Fonts are disappearing and behaving in a really strange way css3 @font-face

I ve done a mistake in @font-face - I included src on each line but it looked just as I wanted (the only problem was, that was appearing just in edge and not in other browsers), but now when I corrected it, it suddenly behaves really strangely. Why? Is there any posibility to change the code but leave the same apperance?
Before (with mistakes)
and after correcting it

Here is the first code:

body {

font-size: 16px;

margin-top: 9.375em;



}

@media (min-width:640px) {

* {

 margin:0px;

 font-family:"bigjohn", Helvetica, Ariel, sans-serif;

 

  }

  

*::selection {

background-color: rgb(0, 0, 20);

color: fefefe;

}



@font-face {

    font-family: Alcubierre;

    src: url("fonts/Alcubierre.eot") format('embedded-opentype');

    src: url("fonts/Alcubierre.woff") format('woff');

    src: url("fonts/Alcubierre.ttf") format('truetype');

    src: url("fonts/Alcubierre.otf") format('opentype');

    src: url("fonts/Alcubierre.svg") format('svg');

        

    }

@font-face {

    font-family: bigjohn;

    src: url("fonts/bigjohn.eot") format('mbedded-opentype');

    src: url("fonts/bigjohn.woff") format('woff');

    src: url("fonts/bigjohn.ttf") format('truetype');

    src: url("fonts/bigjohn.otf") format('opentype');

    src: url("fonts/bigjohn.svg") format('svg');

    }

@font-face {    

    font-family: Le_Super_Type_SemiBold;

    src: url(Le_Super_Type_SemiBold.ttf) format('ttf');

    }

@font-face {

    font-family: centurygothic;

    src: url(centurygothic.ttf) format('ttf');

    }

@font-face {  

    font-family: Montserrat-Light;

    src: url('Montserrat.otf') format('otf');

    }   

a {

  text-decoration: none; 

  }

li {

list-style-type: none;

}

p {

font-family:"Monsterrat", Helvetica, Ariel, sans-serif;

}

  

h1, h2, h3 {

text-transform: uppercase;

text-align: center;

font-family:"Alcubierre", Helvetica, Ariel, sans-serif;

}



h1 {

font-family:'bigjohn', 'Changa', Helvetica, Ariel, sans-serif;

font-size: 4.375em;



} 



  h1 span {

    font-family:"bigjohn", 'Changa', Helvetica, Ariel, sans-serif;

    font-size: 1.23333333em;

  }

  

nav {

    float: center;

    margin-top: -8em;

    margin-left: 35em;

    column-gap: 4em;

  }

    

  nav img {

      margin-left: 4em;

      margin-top: 5em;

    }

      

    nav a {

    color: black; 

    font-size:25px;

    text-transform: uppercase;   

      -webkit-transition: color .4s ease-out;

      -moz-transition: color .4s ease-out;

      -o-transition: color .4s ease-out;

      transition: color .4s ease-out;    

    }

    

      nav a:hover {

        text-decoration: none;

        color: rgb(47, 48, 62); 

      }

    

    nav ul {

      list-style: none;

      margin: -8em;

      padding: 0; 

    }



      nav ul li {

        display: inline-block;

        *display: inline; /* pro IE7 */

        margin-right: 10em;

        word-spacing: 4em; 

      }

           

        nav ul li span {

          margin-left: 100em;       

        }

body > header {

position: sticky;

box-shadow: rgba(0, 0, 0, .25) 0 3px 22px 0;

background-image: linear-gradient(#87053e 10%);      

}



.jmeno {

  margin-top:5em;

  position: relative;

  text-align: center;

  margin-left:18.494444em;

  margin-right: 18.494444em;

  border-bottom-style: ridge;

  font-size:1.875em;

  }

  

  .jmeno::selection {

background-color: rgba(0, 0, 0, .25);

color: #fefefe;

}

.promo-tlacitko { 

  z-index: 5;

  padding-bottom: 0.5em;

  box-shadow: rgba(0, 0, 0, 0.25) 0 0.0416666em 0.3055em 0;

  background-image:rgb(0, 0, 20);

    display: inline-block;

    width: 15.166666em;

    padding: 1.30666em 0;

    border: 0.5em solid rgb(47, 48, 62);

    background-color: rgb(0, 0, 20);

    box-shadow: rgba(0, 0, 0, .25) 0 0.35em 0.1em 0;

    font-size: 1.25em;

    color: #fefefe;

    transition: transform. 5s ease-out; 

    text-align: center;

    text-transform: uppercase;

        margin-left: 25.75em;

        margin-top: 7.5em;

        margin-bottom: 10em;

        font-family:"Le_Super_Type_SemiBold", Helvetica, Ariel, sans-serif;

        font-family:"Alcubierre", Helvetica, Ariel, sans-serif;

        



}

  .promo-tlacitko:hover {

   background-color: rgb(47, 48, 62);

   border: 0.5em solid rgb(0, 0, 20);

  }

  

.uvodnik {

   margin-right:10em;

   margin-left:10em;

   margin-top: 7.5em;

   margin-bottom:4.5em;

   display: inline-block;

   column-count: 3;

   column-rule: 3px solid rgb(47, 48, 62);

   column-gap: 2em;

   text-align: center;   

  }

  

.uvodnik p {

font-family:"Montserrat", 'Changa', Helvetica, Ariel, sans-serif;



}

  

  .uvodnik h5 {

  margin-top: 0px;

  font-family:"bigjohn", 'Changa', Helvetica, Ariel, sans-serif;

font-size: 1.3em;



} 



  .uvodnik h5 span {

    font-family:"bigjohn", 'Changa', Helvetica, Ariel, sans-serif;

    font-size:1.2em;

    text-transform: uppercase;

    margin-top: 0px;

      }  

    .uvodnik-1 {

    text-align: right;

    margin-top:8px;

    }   

      .uvodnik-1 span {

    line-height: 0.4em;

      } 

      

      .uvodnik-1 p {

        margin-top: -1.5em;

      } 

    .uvodnik-3 {

    text-align: left;

    margin-top:2em;

    margin-bottom: 3em;

    }                 

  

.rectangle {

position: absolute;

  z-index:-1;

  

}

  

.uvodnik, h5 {

    margin-top: 0px;

}



.ukazky-prace {

z-index: 3;

  



}



.ukazky-prace p {

  margin-left: 54em;

  margin-top: -17em;

  font-family:"Montserrat", Helvetica, Ariel, sans-serif;

        font-size: 1.25em;

        color: #7b6047;

        text-transform: uppercase;

        float: right;

        z-index: 5;

        color: white;

}

  .ukazka-1 {

      

  }

  

  .ukazka-2 {

  margin-left: 21em;

  

  

  }

    .ukazka-2 p {

      position: absolute;

  margin-left: -17em;

  width: 14em;

  text-align: right;



  

  }

  

  .ukazka-3 {

  margin-top: -0.1em;

  

  }

  

  .ukazka-3 p {

  margin-right: 3em;

  

  }

  

  

footer {

 overflow: hidden;

  background-color: rgb(0, 0, 20);

  padding-bottom: 9em;

  color: rgb(94, 109, 120);

  list-style: none;

  text-transform: uppercase;

  margin-top: -5em;  

  padding-top: 12.5em;

}



.footer, h2 {

color: fefefe;

text-align: right;



}





footer p {

    position: absolute;

    bottom: -200em;

    display: inline-block;

    margin-left: 31.25em;

    text-align: center;

    font-family: "Montserrat", Helvetica, Ariel, sans-serif;

          font-weight: 100;

}



footer span {

          font-size: 0.9em;

          color: rgb(47, 48, 62);

          font-family: "bigjohn", "Montserrat", Helvetica, Ariel, sans-serif;

          font-weight: 900;

          text-transform: uppercase;

          

        }

.zapati-1 {

  padding-left: 10em;

  float: left;

  text-align: right;

  margin-top: 3em;

   font-family: "bigjohn", "Montserrat", Helvetica, Ariel, sans-serif;

          font-weight: 700;

          text-transform: uppercase;



    

}



.zapati-2 {

  float: right;

  padding-right: 300px;

  text-align: left;

  margin-top: 3em; 



}



.zpapti-2, h2 span {

text-transform: uppercase;

font-family:"Montserrat", Helvetica, Ariel, sans-serif;

color: fefefe;

font-weight: 400;







}





.zapati-1 ul a,

      .zapati-2 ul a {

        color: rgb( 94, 109, 120);

        list-style-type: none;

        text-decoration: none; 

        }

.zapati-1 a:hover {

      text-decoration: underline;

      } 

      

.zapati-2 a:hover {

      text-decoration: underline;

      }

  }

  media(max-width:480px) {

  background-color: red;

  font-size: 40px;



  }

<!DOCTYPE html>

<html lang="cs" dir="ltr" class="no-js">

<head>

  <meta charset="utf-8" />

  <title>Maran Atha Design</title>

  <meta name="description" content="Grafický designér, webdesignér" />

  <meta name="author" content="Filip Janeček" />

  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  <!-- Odstraňte tyto odkazy, pokud umístíte stejnojmenné soubory do kořenového adresáře. -->

  <link rel="shortcut icon" href="obrazky/favicon.ico" />



  <link rel="stylesheet" href="css/normalize.css" />

  <link rel="stylesheet" href="css/styly.css" />

<link href="https://fonts.googleapis.com/css?family=Changa:800&amp;subset=latin-ext" rel="stylesheet">

<link href="https://fonts.googleapis.com/css?family=Montserrat:100,200,300,400,500,600,700,800,900" rel="stylesheet">



</head>

<body>

<header>

  <nav>

     <img src="obrazky/MARAN-ATHA-m-logo-cerne.png" alt="logo Vyhledávač receptů" class="logo" width="90" height="190">                                               

        <ul>

          <li><a onclick="scrollWin()" selection>Portfolio</a></li>           

           <span><li><a href="javascript: document.body.scrollIntoView(false);">Kontakt</a></li></span>

        </ul>

      </nav>

</header>

<div class="jmeno"><br><h3>MARAN ATHA<h3></div>

<h1>DESIGN<span>É</span>R</h1 selection>

<h1>CO SI SEDNE</h1 selection>

<a href="javascript: document.body.scrollIntoView(false);" class="promo-tlacitko">napište mi!</a>  



<div class="uvodnik">

  <div class="uvodnik-1">

  <h5>Webdesign</h5 selection><span><br><br></span>

  <p>Vytvářím webové bannery, programuji weby (nejraději malé), tvořím design pro mobilní aplikace.</p>

  </div>

  <div class="uvodnik-2"> 

  <h5>  

  Grafick<span>ý</span> Design </h5>

  <p>Magazíny, letáky, karty, plakáty, package design, logo design... To je pouze ukázka mé každodenní náplně.</p>

  </div>                                                                   

  <div class="uvodnik-3">

  <h5>

  Dal<span>ší</span></h5>   

  <p>Brand identity, motion design... To jsou termíny nad kterými se usmívám od rána do večera.</p> 

  </div>  

</div>

<div class="rectangle">

<img src="obrazky/background.png" alt="Cuketové pyré" width="1350" height="2100" />

</div>

<div class="ukazky-prace">

  <div class="ukazka-1">

    <img src="obrazky/mistero23.png" alt="Cuketové pyré" width="1020" height="700" />

    <p>Ukázka ze série plakátů pro Mistero, značku luxusních italských parfémů pro muže.</p>

  </div>

  <div class="ukazka-2">

    <img src="obrazky/wine-bottle.png" alt="Cuketové pyré" width="1020" height="700" />

    <p>Tvorba obalu jablečného vína Chinaska z Minessoty.</p>

  </div>

  <div class="ukazka-3">

    <img src="obrazky/mockup2.png" alt="Cuketové pyré" width="1020" height="698" />

    <p>Toto logo bylo vytvořeno pro společnost Ping, svými službami srovnatelnou např. se Skypem.</p>

  </div>

</div>



 <footer>

      <div class="zapati-1">

        <h2>Kontakt</h2><br>

        <ul class="cf">

          <li>Filip Janeček</li>

          <li><a href="https://www.google.cz/maps/place/Na+Svahu+1103,+293+06+Kosmonosy/@50.4435741,14.9179623,17z/data=!3m1!4b1!4m5!3m4!1s0x4709544129ed24c7:0x8f9764d49c6ff7fb!8m2!3d50.4435707!4d14.920151?hl=cs&authuser=0"><span class="info"> Adresa: </span>Kosmonosy Na Svahu 1103</a></li>

          <li><a href="https://www.facebook.com/maran.atha.92123?lst=100028119321828%3A100028119321828%3A1539100304"><span class="info">Facebook</span> Maran Atha</a></li>

          <li><a href="#28"></a><span class="info">Tel. číslo:</span> 702 885 801</li>

          <li><a href="#29"><span class="info">E-mail:</span> filip.janecek28@gmail.com</a></li>

        </ul>

      </div><!-- .zapati-1 -->



      <div class="zapati-2">

        <h2>Kde m<span>ě</span> sehnat</h2> <br>

        <ul>

          <li><a href="https://webtrh.cz/members/163351-Filip-Jane%C4%8Dek">Webtrh.cz</a></li>

          <li><a href="https://www.stovkomat.cz/uzivatel/Maran%20Atha">Stovkomat.cz</a></li>

          <li><a href="https://www.shutterstock.com/g/Maran-Atha?sort_method=popular">Shutterstock.com</a></li>

        </ul>

      </div><!-- .zapati-2 -->

      

      <p>Copyright 2018 © Maran Atha</p>

  </footer selection>

  <script>

function scrollWin() {

    window.scrollTo(0,1300);

}

</script>

<script src="script.js"></script>

  

</body>

</html>

And after correcting it:

@font-face {

    font-family: "Alcubierre";

    src: url("./fonts/Alcubierre.eot") format('embedded-opentype'),

        url("./fonts/Alcubierre.woff") format('woff'),

        url("./fonts/Alcubierre.ttf") format('truetype'),

        url("./fonts/Alcubierre.otf") format('opentype'),

        url("./fonts/Alcubierre.svg") format('svg');

    font-weight: normal;

    font-style: normal;        

    }

@font-face {

    font-family: "BigJohn";

    src: url("./fonts/bigjohn.eot") format('embedded-opentype'),

        url("./fonts/bigjohn.woff") format('woff'),

        url("./fonts/bigjohn.ttf") format('truetype'),

        url("./fonts/bigjohn.otf") format('opentype'),

        url("./fonts/bigjohn.svg") format('svg');

        font-weight: normal;

    font-style: normal;        

    }

@font-face {

    font-family: centurygothic;

    src: url(centurygothic.ttf) format('ttf');

    }

@font-face {  

    font-family: Montserrat-Light;

    src: url('Montserrat.otf') format('otf');

    }   

body {

font-size: 16px;

margin-top: 9.375em;



}

@media (min-width:640px) {

* {

 margin:0px;

 font-family:"bigjohn", Helvetica, Ariel, sans-serif;

 

  }

  

*::selection {

background-color: rgb(0, 0, 20);

color: fefefe;

}



a {

  text-decoration: none; 

  }

li {

list-style-type: none;

}

p {

font-family:"Monsterrat", Helvetica, Ariel, sans-serif;

}

  

h1, h2, h3 {

text-transform: uppercase;

text-align: center;

font-family:"Alcubierre", Helvetica, Ariel, sans-serif;

}



h1 {

font-family:'bigjohn', 'Changa', Helvetica, Ariel, sans-serif;

font-size: 4.375em;



} 



  h1 span {

    font-family:"bigjohn", 'Changa', Helvetica, Ariel, sans-serif;

    font-size: 1.23333333em;

  }

  

nav {

    float: center;

    margin-top: -8em;

    margin-left: 35em;

    column-gap: 4em;

  }

    

  nav img {

      margin-left: 4em;

      margin-top: 5em;

    }

      

    nav a {

    color: black; 

    font-size:25px;

    text-transform: uppercase;   

      -webkit-transition: color .4s ease-out;

      -moz-transition: color .4s ease-out;

      -o-transition: color .4s ease-out;

      transition: color .4s ease-out;    

    }

    

      nav a:hover {

        text-decoration: none;

        color: rgb(47, 48, 62); 

      }

    

    nav ul {

      list-style: none;

      margin: -8em;

      padding: 0; 

    }



      nav ul li {

        display: inline-block;

        *display: inline; /* pro IE7 */

        margin-right: 10em;

        word-spacing: 4em; 

      }

           

        nav ul li span {

          margin-left: 100em;       

        }

body > header {

position: sticky;

box-shadow: rgba(0, 0, 0, .25) 0 3px 22px 0;

background-image: linear-gradient(#87053e 10%);      

}



.jmeno {

  margin-top:5em;

  position: relative;

  text-align: center;

  margin-left:18.494444em;

  margin-right: 18.494444em;

  border-bottom-style: ridge;

  font-size:1.875em;

  }

  

  .jmeno::selection {

background-color: rgba(0, 0, 0, .25);

color: #fefefe;

}

.promo-tlacitko { 

  z-index: 5;

  padding-bottom: 0.5em;

  box-shadow: rgba(0, 0, 0, 0.25) 0 0.0416666em 0.3055em 0;

  background-image:rgb(0, 0, 20);

    display: inline-block;

    width: 15.166666em;

    padding: 1.30666em 0;

    border: 0.5em solid rgb(47, 48, 62);

    background-color: rgb(0, 0, 20);

    box-shadow: rgba(0, 0, 0, .25) 0 0.35em 0.1em 0;

    font-size: 1.25em;

    color: #fefefe;

    transition: transform. 5s ease-out; 

    text-align: center;

    text-transform: uppercase;

        margin-left: 25.75em;

        margin-top: 7.5em;

        margin-bottom: 10em;

        font-family:"Le_Super_Type_SemiBold", Helvetica, Ariel, sans-serif;

        font-family:"Alcubierre", Helvetica, Ariel, sans-serif;

        



}

  .promo-tlacitko:hover {

   background-color: rgb(47, 48, 62);

   border: 0.5em solid rgb(0, 0, 20);

  }

  

.uvodnik {

   margin-right:10em;

   margin-left:10em;

   margin-top: 7.5em;

   margin-bottom:4.5em;

   display: inline-block;

   column-count: 3;

   column-rule: 3px solid rgb(47, 48, 62);

   column-gap: 2em;

   text-align: center;   

  }

  

.uvodnik p {

font-family:"Montserrat", 'Changa', Helvetica, Ariel, sans-serif;



}

  

  .uvodnik h5 {

  margin-top: 0px;

  font-family:"bigjohn", 'Changa', Helvetica, Ariel, sans-serif;

font-size: 1.3em;



} 



  .uvodnik h5 span {

    font-family:"bigjohn", 'Changa', Helvetica, Ariel, sans-serif;

    font-size:1.2em;

    text-transform: uppercase;

    margin-top: 0px;

      }  

    .uvodnik-1 {

    text-align: right;

    margin-top:8px;

    }   

      .uvodnik-1 span {

    line-height: 0.4em;

      } 

      

      .uvodnik-1 p {

        margin-top: -1.5em;

      } 

    .uvodnik-3 {

    text-align: left;

    margin-top:2em;

    margin-bottom: 3em;

    }                 

  

.rectangle {

position: absolute;

  z-index:-1;

  

}

  

.uvodnik, h5 {

    margin-top: 0px;

}



.ukazky-prace {

z-index: 3;

  



}



.ukazky-prace p {

  margin-left: 54em;

  margin-top: -17em;

  font-family:"Montserrat", Helvetica, Ariel, sans-serif;

        font-size: 1.25em;

        color: #7b6047;

        text-transform: uppercase;

        float: right;

        z-index: 5;

        color: white;

}

  .ukazka-1 {

      

  }

  

  .ukazka-2 {

  margin-left: 21em;

  

  

  }

    .ukazka-2 p {

      position: absolute;

  margin-left: -17em;

  width: 14em;

  text-align: right;



  

  }

  

  .ukazka-3 { 

  margin-top: -0.1em;  

  

  }

  

  .ukazka-3 p {

  margin-right: 3em;

  

  }

  

  

footer {

 overflow: hidden;

  background-color: rgb(0, 0, 20);

  padding-bottom: 9em;

  color: rgb(94, 109, 120);

  list-style: none;

  text-transform: uppercase;

  margin-top: -5em;  

  padding-top: 12.5em;

}



.footer, h2 {

color: fefefe;

text-align: right;



}





footer p {

    position: absolute;

    bottom: -200em;

    display: inline-block;

    margin-left: 31.25em;

    text-align: center;

    font-family: "Montserrat", Helvetica, Ariel, sans-serif;

          font-weight: 100;

}



footer span {

          font-size: 0.9em;

          color: rgb(47, 48, 62);

          font-family: "bigjohn", "Montserrat", Helvetica, Ariel, sans-serif;

          font-weight: 900;

          text-transform: uppercase;

          

        }

.zapati-1 {

  padding-left: 10em;

  float: left;

  text-align: right;

  margin-top: 3em;

   font-family: "bigjohn", "Montserrat", Helvetica, Ariel, sans-serif;

          font-weight: 700;

          text-transform: uppercase;



    

}



.zapati-2 {

  float: right;

  padding-right: 300px;

  text-align: left;

  margin-top: 3em; 



}



.zpapti-2, h2 span {

text-transform: uppercase;

font-family:"Montserrat", Helvetica, Ariel, sans-serif;

color: fefefe;

font-weight: 400;







}





.zapati-1 ul a,

      .zapati-2 ul a {

        color: rgb( 94, 109, 120);

        list-style-type: none;

        text-decoration: none; 

        }

.zapati-1 a:hover {

      text-decoration: underline;

      } 

      

.zapati-2 a:hover {

      text-decoration: underline;

      }

  }

  media(max-width:480px) {

  background-color: red;

  font-size: 40px;



  }

<!DOCTYPE html>

<html lang="cs" dir="ltr" class="no-js">

<head>

  <meta charset="utf-8" />

  <title>Maran Atha Design</title>

  <meta name="description" content="Grafický designér, webdesignér" />

  <meta name="author" content="Filip Janeček" />

  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  <!-- Odstraňte tyto odkazy, pokud umístíte stejnojmenné soubory do kořenového adresáře. -->

  <link rel="shortcut icon" href="obrazky/favicon.ico" />



  <link rel="stylesheet" href="css/normalize.css" />

  <link rel="stylesheet" href="css/styly.css" />

<link href="https://fonts.googleapis.com/css?family=Changa:800&amp;subset=latin-ext" rel="stylesheet">

<link href="https://fonts.googleapis.com/css?family=Montserrat:100,200,300,400,500,600,700,800,900" rel="stylesheet">



</head>

<body>

<header>

  <nav>

     <img src="obrazky/MARAN-ATHA-m-logo-cerne.png" alt="logo Vyhledávač receptů" class="logo" width="90" height="190">                                               

        <ul>

          <li><a onclick="scrollWin()" selection>Portfolio</a></li>           

           <span><li><a href="javascript: document.body.scrollIntoView(false);">Kontakt</a></li></span>

        </ul>

      </nav>

</header>

<div class="jmeno"><br><h3>MARAN ATHA<h3></div>

<h1>DESIGN<span>É</span>R</h1 selection>

<h1>CO SI SEDNE</h1 selection>

<a href="javascript: document.body.scrollIntoView(false);" class="promo-tlacitko">napište mi!</a>  



<div class="uvodnik">

  <div class="uvodnik-1">

  <h5>Webdesign</h5 selection><span><br><br></span>

  <p>Vytvářím webové bannery, programuji weby (nejraději malé), tvořím design pro mobilní aplikace.</p>

  </div>

  <div class="uvodnik-2"> 

  <h5>  

  Grafick<span>ý</span> Design </h5>

  <p>Magazíny, letáky, karty, plakáty, package design, logo design... To je pouze ukázka mé každodenní náplně.</p>

  </div>                                                                   

  <div class="uvodnik-3">

  <h5>

  Dal<span>ší</span></h5>   

  <p>Brand identity, motion design... To jsou termíny nad kterými se usmívám od rána do večera.</p> 

  </div>  

</div>

<div class="rectangle">

<img src="obrazky/background.png" alt="Cuketové pyré" width="1350" height="2100" />

</div>

<div class="ukazky-prace">

  <div class="ukazka-1">

    <img src="obrazky/mistero23.png" alt="Cuketové pyré" width="1020" height="700" />

    <p>Ukázka ze série plakátů pro Mistero, značku luxusních italských parfémů pro muže.</p>

  </div>

  <div class="ukazka-2">

    <img src="obrazky/wine-bottle.png" alt="Cuketové pyré" width="1020" height="700" />

    <p>Tvorba obalu jablečného vína Chinaska z Minessoty.</p>

  </div>

  <div class="ukazka-3">

    <img src="obrazky/mockup2.png" alt="Cuketové pyré" width="1020" height="698" />

    <p>Toto logo bylo vytvořeno pro společnost Ping, svými službami srovnatelnou např. se Skypem.</p>

  </div>

</div>



 <footer>

      <div class="zapati-1">

        <h2>Kontakt</h2><br>

        <ul class="cf">

          <li>Filip Janeček</li>

          <li><a href="https://www.google.cz/maps/place/Na+Svahu+1103,+293+06+Kosmonosy/@50.4435741,14.9179623,17z/data=!3m1!4b1!4m5!3m4!1s0x4709544129ed24c7:0x8f9764d49c6ff7fb!8m2!3d50.4435707!4d14.920151?hl=cs&authuser=0"><span class="info"> Adresa: </span>Kosmonosy Na Svahu 1103</a></li>

          <li><a href="https://www.facebook.com/maran.atha.92123?lst=100028119321828%3A100028119321828%3A1539100304"><span class="info">Facebook</span> Maran Atha</a></li>

          <li><a href="#28"></a><span class="info">Tel. číslo:</span> 702 885 801</li>

          <li><a href="#29"><span class="info">E-mail:</span> filip.janecek28@gmail.com</a></li>

        </ul>

      </div><!-- .zapati-1 -->



      <div class="zapati-2">

        <h2>Kde m<span>ě</span> sehnat</h2> <br>

        <ul>

          <li><a href="https://webtrh.cz/members/163351-Filip-Jane%C4%8Dek">Webtrh.cz</a></li>

          <li><a href="https://www.stovkomat.cz/uzivatel/Maran%20Atha">Stovkomat.cz</a></li>

          <li><a href="https://www.shutterstock.com/g/Maran-Atha?sort_method=popular">Shutterstock.com</a></li>

        </ul>

      </div><!-- .zapati-2 -->

      

      <p>Copyright 2018 © Maran Atha</p>

  </footer selection>

  <script>

function scrollWin() {

    window.scrollTo(0,1300);

}

</script>

<script src="script.js"></script>

  

</body>

</html>

asked Nov 17 '18 at 11:09

Maran_Atha

add a comment |

Here is the first code:

body {

font-size: 16px;

margin-top: 9.375em;



}

@media (min-width:640px) {

* {

 margin:0px;

 font-family:"bigjohn", Helvetica, Ariel, sans-serif;

 

  }

  

*::selection {

background-color: rgb(0, 0, 20);

color: fefefe;

}



@font-face {

    font-family: Alcubierre;

    src: url("fonts/Alcubierre.eot") format('embedded-opentype');

    src: url("fonts/Alcubierre.woff") format('woff');

    src: url("fonts/Alcubierre.ttf") format('truetype');

    src: url("fonts/Alcubierre.otf") format('opentype');

    src: url("fonts/Alcubierre.svg") format('svg');

        

    }

@font-face {

    font-family: bigjohn;

    src: url("fonts/bigjohn.eot") format('mbedded-opentype');

    src: url("fonts/bigjohn.woff") format('woff');

    src: url("fonts/bigjohn.ttf") format('truetype');

    src: url("fonts/bigjohn.otf") format('opentype');

    src: url("fonts/bigjohn.svg") format('svg');

    }

@font-face {    

    font-family: Le_Super_Type_SemiBold;

    src: url(Le_Super_Type_SemiBold.ttf) format('ttf');

    }

@font-face {

    font-family: centurygothic;

    src: url(centurygothic.ttf) format('ttf');

    }

@font-face {  

    font-family: Montserrat-Light;

    src: url('Montserrat.otf') format('otf');

    }   

a {

  text-decoration: none; 

  }

li {

list-style-type: none;

}

p {

font-family:"Monsterrat", Helvetica, Ariel, sans-serif;

}

  

h1, h2, h3 {

text-transform: uppercase;

text-align: center;

font-family:"Alcubierre", Helvetica, Ariel, sans-serif;

}



h1 {

font-family:'bigjohn', 'Changa', Helvetica, Ariel, sans-serif;

font-size: 4.375em;



} 



  h1 span {

    font-family:"bigjohn", 'Changa', Helvetica, Ariel, sans-serif;

    font-size: 1.23333333em;

  }

  

nav {

    float: center;

    margin-top: -8em;

    margin-left: 35em;

    column-gap: 4em;

  }

    

  nav img {

      margin-left: 4em;

      margin-top: 5em;

    }

      

    nav a {

    color: black; 

    font-size:25px;

    text-transform: uppercase;   

      -webkit-transition: color .4s ease-out;

      -moz-transition: color .4s ease-out;

      -o-transition: color .4s ease-out;

      transition: color .4s ease-out;    

    }

    

      nav a:hover {

        text-decoration: none;

        color: rgb(47, 48, 62); 

      }

    

    nav ul {

      list-style: none;

      margin: -8em;

      padding: 0; 

    }



      nav ul li {

        display: inline-block;

        *display: inline; /* pro IE7 */

        margin-right: 10em;

        word-spacing: 4em; 

      }

           

        nav ul li span {

          margin-left: 100em;       

        }

body > header {

position: sticky;

box-shadow: rgba(0, 0, 0, .25) 0 3px 22px 0;

background-image: linear-gradient(#87053e 10%);      

}



.jmeno {

  margin-top:5em;

  position: relative;

  text-align: center;

  margin-left:18.494444em;

  margin-right: 18.494444em;

  border-bottom-style: ridge;

  font-size:1.875em;

  }

  

  .jmeno::selection {

background-color: rgba(0, 0, 0, .25);

color: #fefefe;

}

.promo-tlacitko { 

  z-index: 5;

  padding-bottom: 0.5em;

  box-shadow: rgba(0, 0, 0, 0.25) 0 0.0416666em 0.3055em 0;

  background-image:rgb(0, 0, 20);

    display: inline-block;

    width: 15.166666em;

    padding: 1.30666em 0;

    border: 0.5em solid rgb(47, 48, 62);

    background-color: rgb(0, 0, 20);

    box-shadow: rgba(0, 0, 0, .25) 0 0.35em 0.1em 0;

    font-size: 1.25em;

    color: #fefefe;

    transition: transform. 5s ease-out; 

    text-align: center;

    text-transform: uppercase;

        margin-left: 25.75em;

        margin-top: 7.5em;

        margin-bottom: 10em;

        font-family:"Le_Super_Type_SemiBold", Helvetica, Ariel, sans-serif;

        font-family:"Alcubierre", Helvetica, Ariel, sans-serif;

        



}

  .promo-tlacitko:hover {

   background-color: rgb(47, 48, 62);

   border: 0.5em solid rgb(0, 0, 20);

  }

  

.uvodnik {

   margin-right:10em;

   margin-left:10em;

   margin-top: 7.5em;

   margin-bottom:4.5em;

   display: inline-block;

   column-count: 3;

   column-rule: 3px solid rgb(47, 48, 62);

   column-gap: 2em;

   text-align: center;   

  }

  

.uvodnik p {

font-family:"Montserrat", 'Changa', Helvetica, Ariel, sans-serif;



}

  

  .uvodnik h5 {

  margin-top: 0px;

  font-family:"bigjohn", 'Changa', Helvetica, Ariel, sans-serif;

font-size: 1.3em;



} 



  .uvodnik h5 span {

    font-family:"bigjohn", 'Changa', Helvetica, Ariel, sans-serif;

    font-size:1.2em;

    text-transform: uppercase;

    margin-top: 0px;

      }  

    .uvodnik-1 {

    text-align: right;

    margin-top:8px;

    }   

      .uvodnik-1 span {

    line-height: 0.4em;

      } 

      

      .uvodnik-1 p {

        margin-top: -1.5em;

      } 

    .uvodnik-3 {

    text-align: left;

    margin-top:2em;

    margin-bottom: 3em;

    }                 

  

.rectangle {

position: absolute;

  z-index:-1;

  

}

  

.uvodnik, h5 {

    margin-top: 0px;

}



.ukazky-prace {

z-index: 3;

  



}



.ukazky-prace p {

  margin-left: 54em;

  margin-top: -17em;

  font-family:"Montserrat", Helvetica, Ariel, sans-serif;

        font-size: 1.25em;

        color: #7b6047;

        text-transform: uppercase;

        float: right;

        z-index: 5;

        color: white;

}

  .ukazka-1 {

      

  }

  

  .ukazka-2 {

  margin-left: 21em;

  

  

  }

    .ukazka-2 p {

      position: absolute;

  margin-left: -17em;

  width: 14em;

  text-align: right;



  

  }

  

  .ukazka-3 {

  margin-top: -0.1em;

  

  }

  

  .ukazka-3 p {

  margin-right: 3em;

  

  }

  

  

footer {

 overflow: hidden;

  background-color: rgb(0, 0, 20);

  padding-bottom: 9em;

  color: rgb(94, 109, 120);

  list-style: none;

  text-transform: uppercase;

  margin-top: -5em;  

  padding-top: 12.5em;

}



.footer, h2 {

color: fefefe;

text-align: right;



}





footer p {

    position: absolute;

    bottom: -200em;

    display: inline-block;

    margin-left: 31.25em;

    text-align: center;

    font-family: "Montserrat", Helvetica, Ariel, sans-serif;

          font-weight: 100;

}



footer span {

          font-size: 0.9em;

          color: rgb(47, 48, 62);

          font-family: "bigjohn", "Montserrat", Helvetica, Ariel, sans-serif;

          font-weight: 900;

          text-transform: uppercase;

          

        }

.zapati-1 {

  padding-left: 10em;

  float: left;

  text-align: right;

  margin-top: 3em;

   font-family: "bigjohn", "Montserrat", Helvetica, Ariel, sans-serif;

          font-weight: 700;

          text-transform: uppercase;



    

}



.zapati-2 {

  float: right;

  padding-right: 300px;

  text-align: left;

  margin-top: 3em; 



}



.zpapti-2, h2 span {

text-transform: uppercase;

font-family:"Montserrat", Helvetica, Ariel, sans-serif;

color: fefefe;

font-weight: 400;







}





.zapati-1 ul a,

      .zapati-2 ul a {

        color: rgb( 94, 109, 120);

        list-style-type: none;

        text-decoration: none; 

        }

.zapati-1 a:hover {

      text-decoration: underline;

      } 

      

.zapati-2 a:hover {

      text-decoration: underline;

      }

  }

  media(max-width:480px) {

  background-color: red;

  font-size: 40px;



  }

<!DOCTYPE html>

<html lang="cs" dir="ltr" class="no-js">

<head>

  <meta charset="utf-8" />

  <title>Maran Atha Design</title>

  <meta name="description" content="Grafický designér, webdesignér" />

  <meta name="author" content="Filip Janeček" />

  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  <!-- Odstraňte tyto odkazy, pokud umístíte stejnojmenné soubory do kořenového adresáře. -->

  <link rel="shortcut icon" href="obrazky/favicon.ico" />



  <link rel="stylesheet" href="css/normalize.css" />

  <link rel="stylesheet" href="css/styly.css" />

<link href="https://fonts.googleapis.com/css?family=Changa:800&amp;subset=latin-ext" rel="stylesheet">

<link href="https://fonts.googleapis.com/css?family=Montserrat:100,200,300,400,500,600,700,800,900" rel="stylesheet">



</head>

<body>

<header>

  <nav>

     <img src="obrazky/MARAN-ATHA-m-logo-cerne.png" alt="logo Vyhledávač receptů" class="logo" width="90" height="190">                                               

        <ul>

          <li><a onclick="scrollWin()" selection>Portfolio</a></li>           

           <span><li><a href="javascript: document.body.scrollIntoView(false);">Kontakt</a></li></span>

        </ul>

      </nav>

</header>

<div class="jmeno"><br><h3>MARAN ATHA<h3></div>

<h1>DESIGN<span>É</span>R</h1 selection>

<h1>CO SI SEDNE</h1 selection>

<a href="javascript: document.body.scrollIntoView(false);" class="promo-tlacitko">napište mi!</a>  



<div class="uvodnik">

  <div class="uvodnik-1">

  <h5>Webdesign</h5 selection><span><br><br></span>

  <p>Vytvářím webové bannery, programuji weby (nejraději malé), tvořím design pro mobilní aplikace.</p>

  </div>

  <div class="uvodnik-2"> 

  <h5>  

  Grafick<span>ý</span> Design </h5>

  <p>Magazíny, letáky, karty, plakáty, package design, logo design... To je pouze ukázka mé každodenní náplně.</p>

  </div>                                                                   

  <div class="uvodnik-3">

  <h5>

  Dal<span>ší</span></h5>   

  <p>Brand identity, motion design... To jsou termíny nad kterými se usmívám od rána do večera.</p> 

  </div>  

</div>

<div class="rectangle">

<img src="obrazky/background.png" alt="Cuketové pyré" width="1350" height="2100" />

</div>

<div class="ukazky-prace">

  <div class="ukazka-1">

    <img src="obrazky/mistero23.png" alt="Cuketové pyré" width="1020" height="700" />

    <p>Ukázka ze série plakátů pro Mistero, značku luxusních italských parfémů pro muže.</p>

  </div>

  <div class="ukazka-2">

    <img src="obrazky/wine-bottle.png" alt="Cuketové pyré" width="1020" height="700" />

    <p>Tvorba obalu jablečného vína Chinaska z Minessoty.</p>

  </div>

  <div class="ukazka-3">

    <img src="obrazky/mockup2.png" alt="Cuketové pyré" width="1020" height="698" />

    <p>Toto logo bylo vytvořeno pro společnost Ping, svými službami srovnatelnou např. se Skypem.</p>

  </div>

</div>



 <footer>

      <div class="zapati-1">

        <h2>Kontakt</h2><br>

        <ul class="cf">

          <li>Filip Janeček</li>

          <li><a href="https://www.google.cz/maps/place/Na+Svahu+1103,+293+06+Kosmonosy/@50.4435741,14.9179623,17z/data=!3m1!4b1!4m5!3m4!1s0x4709544129ed24c7:0x8f9764d49c6ff7fb!8m2!3d50.4435707!4d14.920151?hl=cs&authuser=0"><span class="info"> Adresa: </span>Kosmonosy Na Svahu 1103</a></li>

          <li><a href="https://www.facebook.com/maran.atha.92123?lst=100028119321828%3A100028119321828%3A1539100304"><span class="info">Facebook</span> Maran Atha</a></li>

          <li><a href="#28"></a><span class="info">Tel. číslo:</span> 702 885 801</li>

          <li><a href="#29"><span class="info">E-mail:</span> filip.janecek28@gmail.com</a></li>

        </ul>

      </div><!-- .zapati-1 -->



      <div class="zapati-2">

        <h2>Kde m<span>ě</span> sehnat</h2> <br>

        <ul>

          <li><a href="https://webtrh.cz/members/163351-Filip-Jane%C4%8Dek">Webtrh.cz</a></li>

          <li><a href="https://www.stovkomat.cz/uzivatel/Maran%20Atha">Stovkomat.cz</a></li>

          <li><a href="https://www.shutterstock.com/g/Maran-Atha?sort_method=popular">Shutterstock.com</a></li>

        </ul>

      </div><!-- .zapati-2 -->

      

      <p>Copyright 2018 © Maran Atha</p>

  </footer selection>

  <script>

function scrollWin() {

    window.scrollTo(0,1300);

}

</script>

<script src="script.js"></script>

  

</body>

</html>

And after correcting it:

@font-face {

    font-family: "Alcubierre";

    src: url("./fonts/Alcubierre.eot") format('embedded-opentype'),

        url("./fonts/Alcubierre.woff") format('woff'),

        url("./fonts/Alcubierre.ttf") format('truetype'),

        url("./fonts/Alcubierre.otf") format('opentype'),

        url("./fonts/Alcubierre.svg") format('svg');

    font-weight: normal;

    font-style: normal;        

    }

@font-face {

    font-family: "BigJohn";

    src: url("./fonts/bigjohn.eot") format('embedded-opentype'),

        url("./fonts/bigjohn.woff") format('woff'),

        url("./fonts/bigjohn.ttf") format('truetype'),

        url("./fonts/bigjohn.otf") format('opentype'),

        url("./fonts/bigjohn.svg") format('svg');

        font-weight: normal;

    font-style: normal;        

    }

@font-face {

    font-family: centurygothic;

    src: url(centurygothic.ttf) format('ttf');

    }

@font-face {  

    font-family: Montserrat-Light;

    src: url('Montserrat.otf') format('otf');

    }   

body {

font-size: 16px;

margin-top: 9.375em;



}

@media (min-width:640px) {

* {

 margin:0px;

 font-family:"bigjohn", Helvetica, Ariel, sans-serif;

 

  }

  

*::selection {

background-color: rgb(0, 0, 20);

color: fefefe;

}



a {

  text-decoration: none; 

  }

li {

list-style-type: none;

}

p {

font-family:"Monsterrat", Helvetica, Ariel, sans-serif;

}

  

h1, h2, h3 {

text-transform: uppercase;

text-align: center;

font-family:"Alcubierre", Helvetica, Ariel, sans-serif;

}



h1 {

font-family:'bigjohn', 'Changa', Helvetica, Ariel, sans-serif;

font-size: 4.375em;



} 



  h1 span {

    font-family:"bigjohn", 'Changa', Helvetica, Ariel, sans-serif;

    font-size: 1.23333333em;

  }

  

nav {

    float: center;

    margin-top: -8em;

    margin-left: 35em;

    column-gap: 4em;

  }

    

  nav img {

      margin-left: 4em;

      margin-top: 5em;

    }

      

    nav a {

    color: black; 

    font-size:25px;

    text-transform: uppercase;   

      -webkit-transition: color .4s ease-out;

      -moz-transition: color .4s ease-out;

      -o-transition: color .4s ease-out;

      transition: color .4s ease-out;    

    }

    

      nav a:hover {

        text-decoration: none;

        color: rgb(47, 48, 62); 

      }

    

    nav ul {

      list-style: none;

      margin: -8em;

      padding: 0; 

    }



      nav ul li {

        display: inline-block;

        *display: inline; /* pro IE7 */

        margin-right: 10em;

        word-spacing: 4em; 

      }

           

        nav ul li span {

          margin-left: 100em;       

        }

body > header {

position: sticky;

box-shadow: rgba(0, 0, 0, .25) 0 3px 22px 0;

background-image: linear-gradient(#87053e 10%);      

}



.jmeno {

  margin-top:5em;

  position: relative;

  text-align: center;

  margin-left:18.494444em;

  margin-right: 18.494444em;

  border-bottom-style: ridge;

  font-size:1.875em;

  }

  

  .jmeno::selection {

background-color: rgba(0, 0, 0, .25);

color: #fefefe;

}

.promo-tlacitko { 

  z-index: 5;

  padding-bottom: 0.5em;

  box-shadow: rgba(0, 0, 0, 0.25) 0 0.0416666em 0.3055em 0;

  background-image:rgb(0, 0, 20);

    display: inline-block;

    width: 15.166666em;

    padding: 1.30666em 0;

    border: 0.5em solid rgb(47, 48, 62);

    background-color: rgb(0, 0, 20);

    box-shadow: rgba(0, 0, 0, .25) 0 0.35em 0.1em 0;

    font-size: 1.25em;

    color: #fefefe;

    transition: transform. 5s ease-out; 

    text-align: center;

    text-transform: uppercase;

        margin-left: 25.75em;

        margin-top: 7.5em;

        margin-bottom: 10em;

        font-family:"Le_Super_Type_SemiBold", Helvetica, Ariel, sans-serif;

        font-family:"Alcubierre", Helvetica, Ariel, sans-serif;

        



}

  .promo-tlacitko:hover {

   background-color: rgb(47, 48, 62);

   border: 0.5em solid rgb(0, 0, 20);

  }

  

.uvodnik {

   margin-right:10em;

   margin-left:10em;

   margin-top: 7.5em;

   margin-bottom:4.5em;

   display: inline-block;

   column-count: 3;

   column-rule: 3px solid rgb(47, 48, 62);

   column-gap: 2em;

   text-align: center;   

  }

  

.uvodnik p {

font-family:"Montserrat", 'Changa', Helvetica, Ariel, sans-serif;



}

  

  .uvodnik h5 {

  margin-top: 0px;

  font-family:"bigjohn", 'Changa', Helvetica, Ariel, sans-serif;

font-size: 1.3em;



} 



  .uvodnik h5 span {

    font-family:"bigjohn", 'Changa', Helvetica, Ariel, sans-serif;

    font-size:1.2em;

    text-transform: uppercase;

    margin-top: 0px;

      }  

    .uvodnik-1 {

    text-align: right;

    margin-top:8px;

    }   

      .uvodnik-1 span {

    line-height: 0.4em;

      } 

      

      .uvodnik-1 p {

        margin-top: -1.5em;

      } 

    .uvodnik-3 {

    text-align: left;

    margin-top:2em;

    margin-bottom: 3em;

    }                 

  

.rectangle {

position: absolute;

  z-index:-1;

  

}

  

.uvodnik, h5 {

    margin-top: 0px;

}



.ukazky-prace {

z-index: 3;

  



}



.ukazky-prace p {

  margin-left: 54em;

  margin-top: -17em;

  font-family:"Montserrat", Helvetica, Ariel, sans-serif;

        font-size: 1.25em;

        color: #7b6047;

        text-transform: uppercase;

        float: right;

        z-index: 5;

        color: white;

}

  .ukazka-1 {

      

  }

  

  .ukazka-2 {

  margin-left: 21em;

  

  

  }

    .ukazka-2 p {

      position: absolute;

  margin-left: -17em;

  width: 14em;

  text-align: right;



  

  }

  

  .ukazka-3 { 

  margin-top: -0.1em;  

  

  }

  

  .ukazka-3 p {

  margin-right: 3em;

  

  }

  

  

footer {

 overflow: hidden;

  background-color: rgb(0, 0, 20);

  padding-bottom: 9em;

  color: rgb(94, 109, 120);

  list-style: none;

  text-transform: uppercase;

  margin-top: -5em;  

  padding-top: 12.5em;

}



.footer, h2 {

color: fefefe;

text-align: right;



}





footer p {

    position: absolute;

    bottom: -200em;

    display: inline-block;

    margin-left: 31.25em;

    text-align: center;

    font-family: "Montserrat", Helvetica, Ariel, sans-serif;

          font-weight: 100;

}



footer span {

          font-size: 0.9em;

          color: rgb(47, 48, 62);

          font-family: "bigjohn", "Montserrat", Helvetica, Ariel, sans-serif;

          font-weight: 900;

          text-transform: uppercase;

          

        }

.zapati-1 {

  padding-left: 10em;

  float: left;

  text-align: right;

  margin-top: 3em;

   font-family: "bigjohn", "Montserrat", Helvetica, Ariel, sans-serif;

          font-weight: 700;

          text-transform: uppercase;



    

}



.zapati-2 {

  float: right;

  padding-right: 300px;

  text-align: left;

  margin-top: 3em; 



}



.zpapti-2, h2 span {

text-transform: uppercase;

font-family:"Montserrat", Helvetica, Ariel, sans-serif;

color: fefefe;

font-weight: 400;







}





.zapati-1 ul a,

      .zapati-2 ul a {

        color: rgb( 94, 109, 120);

        list-style-type: none;

        text-decoration: none; 

        }

.zapati-1 a:hover {

      text-decoration: underline;

      } 

      

.zapati-2 a:hover {

      text-decoration: underline;

      }

  }

  media(max-width:480px) {

  background-color: red;

  font-size: 40px;



  }

<!DOCTYPE html>

<html lang="cs" dir="ltr" class="no-js">

<head>

  <meta charset="utf-8" />

  <title>Maran Atha Design</title>

  <meta name="description" content="Grafický designér, webdesignér" />

  <meta name="author" content="Filip Janeček" />

  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  <!-- Odstraňte tyto odkazy, pokud umístíte stejnojmenné soubory do kořenového adresáře. -->

  <link rel="shortcut icon" href="obrazky/favicon.ico" />



  <link rel="stylesheet" href="css/normalize.css" />

  <link rel="stylesheet" href="css/styly.css" />

<link href="https://fonts.googleapis.com/css?family=Changa:800&amp;subset=latin-ext" rel="stylesheet">

<link href="https://fonts.googleapis.com/css?family=Montserrat:100,200,300,400,500,600,700,800,900" rel="stylesheet">



</head>

<body>

<header>

  <nav>

     <img src="obrazky/MARAN-ATHA-m-logo-cerne.png" alt="logo Vyhledávač receptů" class="logo" width="90" height="190">                                               

        <ul>

          <li><a onclick="scrollWin()" selection>Portfolio</a></li>           

           <span><li><a href="javascript: document.body.scrollIntoView(false);">Kontakt</a></li></span>

        </ul>

      </nav>

</header>

<div class="jmeno"><br><h3>MARAN ATHA<h3></div>

<h1>DESIGN<span>É</span>R</h1 selection>

<h1>CO SI SEDNE</h1 selection>

<a href="javascript: document.body.scrollIntoView(false);" class="promo-tlacitko">napište mi!</a>  



<div class="uvodnik">

  <div class="uvodnik-1">

  <h5>Webdesign</h5 selection><span><br><br></span>

  <p>Vytvářím webové bannery, programuji weby (nejraději malé), tvořím design pro mobilní aplikace.</p>

  </div>

  <div class="uvodnik-2"> 

  <h5>  

  Grafick<span>ý</span> Design </h5>

  <p>Magazíny, letáky, karty, plakáty, package design, logo design... To je pouze ukázka mé každodenní náplně.</p>

  </div>                                                                   

  <div class="uvodnik-3">

  <h5>

  Dal<span>ší</span></h5>   

  <p>Brand identity, motion design... To jsou termíny nad kterými se usmívám od rána do večera.</p> 

  </div>  

</div>

<div class="rectangle">

<img src="obrazky/background.png" alt="Cuketové pyré" width="1350" height="2100" />

</div>

<div class="ukazky-prace">

  <div class="ukazka-1">

    <img src="obrazky/mistero23.png" alt="Cuketové pyré" width="1020" height="700" />

    <p>Ukázka ze série plakátů pro Mistero, značku luxusních italských parfémů pro muže.</p>

  </div>

  <div class="ukazka-2">

    <img src="obrazky/wine-bottle.png" alt="Cuketové pyré" width="1020" height="700" />

    <p>Tvorba obalu jablečného vína Chinaska z Minessoty.</p>

  </div>

  <div class="ukazka-3">

    <img src="obrazky/mockup2.png" alt="Cuketové pyré" width="1020" height="698" />

    <p>Toto logo bylo vytvořeno pro společnost Ping, svými službami srovnatelnou např. se Skypem.</p>

  </div>

</div>



 <footer>

      <div class="zapati-1">

        <h2>Kontakt</h2><br>

        <ul class="cf">

          <li>Filip Janeček</li>

          <li><a href="https://www.google.cz/maps/place/Na+Svahu+1103,+293+06+Kosmonosy/@50.4435741,14.9179623,17z/data=!3m1!4b1!4m5!3m4!1s0x4709544129ed24c7:0x8f9764d49c6ff7fb!8m2!3d50.4435707!4d14.920151?hl=cs&authuser=0"><span class="info"> Adresa: </span>Kosmonosy Na Svahu 1103</a></li>

          <li><a href="https://www.facebook.com/maran.atha.92123?lst=100028119321828%3A100028119321828%3A1539100304"><span class="info">Facebook</span> Maran Atha</a></li>

          <li><a href="#28"></a><span class="info">Tel. číslo:</span> 702 885 801</li>

          <li><a href="#29"><span class="info">E-mail:</span> filip.janecek28@gmail.com</a></li>

        </ul>

      </div><!-- .zapati-1 -->



      <div class="zapati-2">

        <h2>Kde m<span>ě</span> sehnat</h2> <br>

        <ul>

          <li><a href="https://webtrh.cz/members/163351-Filip-Jane%C4%8Dek">Webtrh.cz</a></li>

          <li><a href="https://www.stovkomat.cz/uzivatel/Maran%20Atha">Stovkomat.cz</a></li>

          <li><a href="https://www.shutterstock.com/g/Maran-Atha?sort_method=popular">Shutterstock.com</a></li>

        </ul>

      </div><!-- .zapati-2 -->

      

      <p>Copyright 2018 © Maran Atha</p>

  </footer selection>

  <script>

function scrollWin() {

    window.scrollTo(0,1300);

}

</script>

<script src="script.js"></script>

  

</body>

</html>

asked Nov 17 '18 at 11:09

Maran_Atha

add a comment |

Here is the first code:

body {

font-size: 16px;

margin-top: 9.375em;



}

@media (min-width:640px) {

* {

 margin:0px;

 font-family:"bigjohn", Helvetica, Ariel, sans-serif;

 

  }

  

*::selection {

background-color: rgb(0, 0, 20);

color: fefefe;

}



@font-face {

    font-family: Alcubierre;

    src: url("fonts/Alcubierre.eot") format('embedded-opentype');

    src: url("fonts/Alcubierre.woff") format('woff');

    src: url("fonts/Alcubierre.ttf") format('truetype');

    src: url("fonts/Alcubierre.otf") format('opentype');

    src: url("fonts/Alcubierre.svg") format('svg');

        

    }

@font-face {

    font-family: bigjohn;

    src: url("fonts/bigjohn.eot") format('mbedded-opentype');

    src: url("fonts/bigjohn.woff") format('woff');

    src: url("fonts/bigjohn.ttf") format('truetype');

    src: url("fonts/bigjohn.otf") format('opentype');

    src: url("fonts/bigjohn.svg") format('svg');

    }

@font-face {    

    font-family: Le_Super_Type_SemiBold;

    src: url(Le_Super_Type_SemiBold.ttf) format('ttf');

    }

@font-face {

    font-family: centurygothic;

    src: url(centurygothic.ttf) format('ttf');

    }

@font-face {  

    font-family: Montserrat-Light;

    src: url('Montserrat.otf') format('otf');

    }   

a {

  text-decoration: none; 

  }

li {

list-style-type: none;

}

p {

font-family:"Monsterrat", Helvetica, Ariel, sans-serif;

}

  

h1, h2, h3 {

text-transform: uppercase;

text-align: center;

font-family:"Alcubierre", Helvetica, Ariel, sans-serif;

}



h1 {

font-family:'bigjohn', 'Changa', Helvetica, Ariel, sans-serif;

font-size: 4.375em;



} 



  h1 span {

    font-family:"bigjohn", 'Changa', Helvetica, Ariel, sans-serif;

    font-size: 1.23333333em;

  }

  

nav {

    float: center;

    margin-top: -8em;

    margin-left: 35em;

    column-gap: 4em;

  }

    

  nav img {

      margin-left: 4em;

      margin-top: 5em;

    }

      

    nav a {

    color: black; 

    font-size:25px;

    text-transform: uppercase;   

      -webkit-transition: color .4s ease-out;

      -moz-transition: color .4s ease-out;

      -o-transition: color .4s ease-out;

      transition: color .4s ease-out;    

    }

    

      nav a:hover {

        text-decoration: none;

        color: rgb(47, 48, 62); 

      }

    

    nav ul {

      list-style: none;

      margin: -8em;

      padding: 0; 

    }



      nav ul li {

        display: inline-block;

        *display: inline; /* pro IE7 */

        margin-right: 10em;

        word-spacing: 4em; 

      }

           

        nav ul li span {

          margin-left: 100em;       

        }

body > header {

position: sticky;

box-shadow: rgba(0, 0, 0, .25) 0 3px 22px 0;

background-image: linear-gradient(#87053e 10%);      

}



.jmeno {

  margin-top:5em;

  position: relative;

  text-align: center;

  margin-left:18.494444em;

  margin-right: 18.494444em;

  border-bottom-style: ridge;

  font-size:1.875em;

  }

  

  .jmeno::selection {

background-color: rgba(0, 0, 0, .25);

color: #fefefe;

}

.promo-tlacitko { 

  z-index: 5;

  padding-bottom: 0.5em;

  box-shadow: rgba(0, 0, 0, 0.25) 0 0.0416666em 0.3055em 0;

  background-image:rgb(0, 0, 20);

    display: inline-block;

    width: 15.166666em;

    padding: 1.30666em 0;

    border: 0.5em solid rgb(47, 48, 62);

    background-color: rgb(0, 0, 20);

    box-shadow: rgba(0, 0, 0, .25) 0 0.35em 0.1em 0;

    font-size: 1.25em;

    color: #fefefe;

    transition: transform. 5s ease-out; 

    text-align: center;

    text-transform: uppercase;

        margin-left: 25.75em;

        margin-top: 7.5em;

        margin-bottom: 10em;

        font-family:"Le_Super_Type_SemiBold", Helvetica, Ariel, sans-serif;

        font-family:"Alcubierre", Helvetica, Ariel, sans-serif;

        



}

  .promo-tlacitko:hover {

   background-color: rgb(47, 48, 62);

   border: 0.5em solid rgb(0, 0, 20);

  }

  

.uvodnik {

   margin-right:10em;

   margin-left:10em;

   margin-top: 7.5em;

   margin-bottom:4.5em;

   display: inline-block;

   column-count: 3;

   column-rule: 3px solid rgb(47, 48, 62);

   column-gap: 2em;

   text-align: center;   

  }

  

.uvodnik p {

font-family:"Montserrat", 'Changa', Helvetica, Ariel, sans-serif;



}

  

  .uvodnik h5 {

  margin-top: 0px;

  font-family:"bigjohn", 'Changa', Helvetica, Ariel, sans-serif;

font-size: 1.3em;



} 



  .uvodnik h5 span {

    font-family:"bigjohn", 'Changa', Helvetica, Ariel, sans-serif;

    font-size:1.2em;

    text-transform: uppercase;

    margin-top: 0px;

      }  

    .uvodnik-1 {

    text-align: right;

    margin-top:8px;

    }   

      .uvodnik-1 span {

    line-height: 0.4em;

      } 

      

      .uvodnik-1 p {

        margin-top: -1.5em;

      } 

    .uvodnik-3 {

    text-align: left;

    margin-top:2em;

    margin-bottom: 3em;

    }                 

  

.rectangle {

position: absolute;

  z-index:-1;

  

}

  

.uvodnik, h5 {

    margin-top: 0px;

}



.ukazky-prace {

z-index: 3;

  



}



.ukazky-prace p {

  margin-left: 54em;

  margin-top: -17em;

  font-family:"Montserrat", Helvetica, Ariel, sans-serif;

        font-size: 1.25em;

        color: #7b6047;

        text-transform: uppercase;

        float: right;

        z-index: 5;

        color: white;

}

  .ukazka-1 {

      

  }

  

  .ukazka-2 {

  margin-left: 21em;

  

  

  }

    .ukazka-2 p {

      position: absolute;

  margin-left: -17em;

  width: 14em;

  text-align: right;



  

  }

  

  .ukazka-3 {

  margin-top: -0.1em;

  

  }

  

  .ukazka-3 p {

  margin-right: 3em;

  

  }

  

  

footer {

 overflow: hidden;

  background-color: rgb(0, 0, 20);

  padding-bottom: 9em;

  color: rgb(94, 109, 120);

  list-style: none;

  text-transform: uppercase;

  margin-top: -5em;  

  padding-top: 12.5em;

}



.footer, h2 {

color: fefefe;

text-align: right;



}





footer p {

    position: absolute;

    bottom: -200em;

    display: inline-block;

    margin-left: 31.25em;

    text-align: center;

    font-family: "Montserrat", Helvetica, Ariel, sans-serif;

          font-weight: 100;

}



footer span {

          font-size: 0.9em;

          color: rgb(47, 48, 62);

          font-family: "bigjohn", "Montserrat", Helvetica, Ariel, sans-serif;

          font-weight: 900;

          text-transform: uppercase;

          

        }

.zapati-1 {

  padding-left: 10em;

  float: left;

  text-align: right;

  margin-top: 3em;

   font-family: "bigjohn", "Montserrat", Helvetica, Ariel, sans-serif;

          font-weight: 700;

          text-transform: uppercase;



    

}



.zapati-2 {

  float: right;

  padding-right: 300px;

  text-align: left;

  margin-top: 3em; 



}



.zpapti-2, h2 span {

text-transform: uppercase;

font-family:"Montserrat", Helvetica, Ariel, sans-serif;

color: fefefe;

font-weight: 400;







}





.zapati-1 ul a,

      .zapati-2 ul a {

        color: rgb( 94, 109, 120);

        list-style-type: none;

        text-decoration: none; 

        }

.zapati-1 a:hover {

      text-decoration: underline;

      } 

      

.zapati-2 a:hover {

      text-decoration: underline;

      }

  }

  media(max-width:480px) {

  background-color: red;

  font-size: 40px;



  }

<!DOCTYPE html>

<html lang="cs" dir="ltr" class="no-js">

<head>

  <meta charset="utf-8" />

  <title>Maran Atha Design</title>

  <meta name="description" content="Grafický designér, webdesignér" />

  <meta name="author" content="Filip Janeček" />

  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  <!-- Odstraňte tyto odkazy, pokud umístíte stejnojmenné soubory do kořenového adresáře. -->

  <link rel="shortcut icon" href="obrazky/favicon.ico" />



  <link rel="stylesheet" href="css/normalize.css" />

  <link rel="stylesheet" href="css/styly.css" />

<link href="https://fonts.googleapis.com/css?family=Changa:800&amp;subset=latin-ext" rel="stylesheet">

<link href="https://fonts.googleapis.com/css?family=Montserrat:100,200,300,400,500,600,700,800,900" rel="stylesheet">



</head>

<body>

<header>

  <nav>

     <img src="obrazky/MARAN-ATHA-m-logo-cerne.png" alt="logo Vyhledávač receptů" class="logo" width="90" height="190">                                               

        <ul>

          <li><a onclick="scrollWin()" selection>Portfolio</a></li>           

           <span><li><a href="javascript: document.body.scrollIntoView(false);">Kontakt</a></li></span>

        </ul>

      </nav>

</header>

<div class="jmeno"><br><h3>MARAN ATHA<h3></div>

<h1>DESIGN<span>É</span>R</h1 selection>

<h1>CO SI SEDNE</h1 selection>

<a href="javascript: document.body.scrollIntoView(false);" class="promo-tlacitko">napište mi!</a>  



<div class="uvodnik">

  <div class="uvodnik-1">

  <h5>Webdesign</h5 selection><span><br><br></span>

  <p>Vytvářím webové bannery, programuji weby (nejraději malé), tvořím design pro mobilní aplikace.</p>

  </div>

  <div class="uvodnik-2"> 

  <h5>  

  Grafick<span>ý</span> Design </h5>

  <p>Magazíny, letáky, karty, plakáty, package design, logo design... To je pouze ukázka mé každodenní náplně.</p>

  </div>                                                                   

  <div class="uvodnik-3">

  <h5>

  Dal<span>ší</span></h5>   

  <p>Brand identity, motion design... To jsou termíny nad kterými se usmívám od rána do večera.</p> 

  </div>  

</div>

<div class="rectangle">

<img src="obrazky/background.png" alt="Cuketové pyré" width="1350" height="2100" />

</div>

<div class="ukazky-prace">

  <div class="ukazka-1">

    <img src="obrazky/mistero23.png" alt="Cuketové pyré" width="1020" height="700" />

    <p>Ukázka ze série plakátů pro Mistero, značku luxusních italských parfémů pro muže.</p>

  </div>

  <div class="ukazka-2">

    <img src="obrazky/wine-bottle.png" alt="Cuketové pyré" width="1020" height="700" />

    <p>Tvorba obalu jablečného vína Chinaska z Minessoty.</p>

  </div>

  <div class="ukazka-3">

    <img src="obrazky/mockup2.png" alt="Cuketové pyré" width="1020" height="698" />

    <p>Toto logo bylo vytvořeno pro společnost Ping, svými službami srovnatelnou např. se Skypem.</p>

  </div>

</div>



 <footer>

      <div class="zapati-1">

        <h2>Kontakt</h2><br>

        <ul class="cf">

          <li>Filip Janeček</li>

          <li><a href="https://www.google.cz/maps/place/Na+Svahu+1103,+293+06+Kosmonosy/@50.4435741,14.9179623,17z/data=!3m1!4b1!4m5!3m4!1s0x4709544129ed24c7:0x8f9764d49c6ff7fb!8m2!3d50.4435707!4d14.920151?hl=cs&authuser=0"><span class="info"> Adresa: </span>Kosmonosy Na Svahu 1103</a></li>

          <li><a href="https://www.facebook.com/maran.atha.92123?lst=100028119321828%3A100028119321828%3A1539100304"><span class="info">Facebook</span> Maran Atha</a></li>

          <li><a href="#28"></a><span class="info">Tel. číslo:</span> 702 885 801</li>

          <li><a href="#29"><span class="info">E-mail:</span> filip.janecek28@gmail.com</a></li>

        </ul>

      </div><!-- .zapati-1 -->



      <div class="zapati-2">

        <h2>Kde m<span>ě</span> sehnat</h2> <br>

        <ul>

          <li><a href="https://webtrh.cz/members/163351-Filip-Jane%C4%8Dek">Webtrh.cz</a></li>

          <li><a href="https://www.stovkomat.cz/uzivatel/Maran%20Atha">Stovkomat.cz</a></li>

          <li><a href="https://www.shutterstock.com/g/Maran-Atha?sort_method=popular">Shutterstock.com</a></li>

        </ul>

      </div><!-- .zapati-2 -->

      

      <p>Copyright 2018 © Maran Atha</p>

  </footer selection>

  <script>

function scrollWin() {

    window.scrollTo(0,1300);

}

</script>

<script src="script.js"></script>

  

</body>

</html>

And after correcting it:

@font-face {

    font-family: "Alcubierre";

    src: url("./fonts/Alcubierre.eot") format('embedded-opentype'),

        url("./fonts/Alcubierre.woff") format('woff'),

        url("./fonts/Alcubierre.ttf") format('truetype'),

        url("./fonts/Alcubierre.otf") format('opentype'),

        url("./fonts/Alcubierre.svg") format('svg');

    font-weight: normal;

    font-style: normal;        

    }

@font-face {

    font-family: "BigJohn";

    src: url("./fonts/bigjohn.eot") format('embedded-opentype'),

        url("./fonts/bigjohn.woff") format('woff'),

        url("./fonts/bigjohn.ttf") format('truetype'),

        url("./fonts/bigjohn.otf") format('opentype'),

        url("./fonts/bigjohn.svg") format('svg');

        font-weight: normal;

    font-style: normal;        

    }

@font-face {

    font-family: centurygothic;

    src: url(centurygothic.ttf) format('ttf');

    }

@font-face {  

    font-family: Montserrat-Light;

    src: url('Montserrat.otf') format('otf');

    }   

body {

font-size: 16px;

margin-top: 9.375em;



}

@media (min-width:640px) {

* {

 margin:0px;

 font-family:"bigjohn", Helvetica, Ariel, sans-serif;

 

  }

  

*::selection {

background-color: rgb(0, 0, 20);

color: fefefe;

}



a {

  text-decoration: none; 

  }

li {

list-style-type: none;

}

p {

font-family:"Monsterrat", Helvetica, Ariel, sans-serif;

}

  

h1, h2, h3 {

text-transform: uppercase;

text-align: center;

font-family:"Alcubierre", Helvetica, Ariel, sans-serif;

}



h1 {

font-family:'bigjohn', 'Changa', Helvetica, Ariel, sans-serif;

font-size: 4.375em;



} 



  h1 span {

    font-family:"bigjohn", 'Changa', Helvetica, Ariel, sans-serif;

    font-size: 1.23333333em;

  }

  

nav {

    float: center;

    margin-top: -8em;

    margin-left: 35em;

    column-gap: 4em;

  }

    

  nav img {

      margin-left: 4em;

      margin-top: 5em;

    }

      

    nav a {

    color: black; 

    font-size:25px;

    text-transform: uppercase;   

      -webkit-transition: color .4s ease-out;

      -moz-transition: color .4s ease-out;

      -o-transition: color .4s ease-out;

      transition: color .4s ease-out;    

    }

    

      nav a:hover {

        text-decoration: none;

        color: rgb(47, 48, 62); 

      }

    

    nav ul {

      list-style: none;

      margin: -8em;

      padding: 0; 

    }



      nav ul li {

        display: inline-block;

        *display: inline; /* pro IE7 */

        margin-right: 10em;

        word-spacing: 4em; 

      }

           

        nav ul li span {

          margin-left: 100em;       

        }

body > header {

position: sticky;

box-shadow: rgba(0, 0, 0, .25) 0 3px 22px 0;

background-image: linear-gradient(#87053e 10%);      

}



.jmeno {

  margin-top:5em;

  position: relative;

  text-align: center;

  margin-left:18.494444em;

  margin-right: 18.494444em;

  border-bottom-style: ridge;

  font-size:1.875em;

  }

  

  .jmeno::selection {

background-color: rgba(0, 0, 0, .25);

color: #fefefe;

}

.promo-tlacitko { 

  z-index: 5;

  padding-bottom: 0.5em;

  box-shadow: rgba(0, 0, 0, 0.25) 0 0.0416666em 0.3055em 0;

  background-image:rgb(0, 0, 20);

    display: inline-block;

    width: 15.166666em;

    padding: 1.30666em 0;

    border: 0.5em solid rgb(47, 48, 62);

    background-color: rgb(0, 0, 20);

    box-shadow: rgba(0, 0, 0, .25) 0 0.35em 0.1em 0;

    font-size: 1.25em;

    color: #fefefe;

    transition: transform. 5s ease-out; 

    text-align: center;

    text-transform: uppercase;

        margin-left: 25.75em;

        margin-top: 7.5em;

        margin-bottom: 10em;

        font-family:"Le_Super_Type_SemiBold", Helvetica, Ariel, sans-serif;

        font-family:"Alcubierre", Helvetica, Ariel, sans-serif;

        



}

  .promo-tlacitko:hover {

   background-color: rgb(47, 48, 62);

   border: 0.5em solid rgb(0, 0, 20);

  }

  

.uvodnik {

   margin-right:10em;

   margin-left:10em;

   margin-top: 7.5em;

   margin-bottom:4.5em;

   display: inline-block;

   column-count: 3;

   column-rule: 3px solid rgb(47, 48, 62);

   column-gap: 2em;

   text-align: center;   

  }

  

.uvodnik p {

font-family:"Montserrat", 'Changa', Helvetica, Ariel, sans-serif;



}

  

  .uvodnik h5 {

  margin-top: 0px;

  font-family:"bigjohn", 'Changa', Helvetica, Ariel, sans-serif;

font-size: 1.3em;



} 



  .uvodnik h5 span {

    font-family:"bigjohn", 'Changa', Helvetica, Ariel, sans-serif;

    font-size:1.2em;

    text-transform: uppercase;

    margin-top: 0px;

      }  

    .uvodnik-1 {

    text-align: right;

    margin-top:8px;

    }   

      .uvodnik-1 span {

    line-height: 0.4em;

      } 

      

      .uvodnik-1 p {

        margin-top: -1.5em;

      } 

    .uvodnik-3 {

    text-align: left;

    margin-top:2em;

    margin-bottom: 3em;

    }                 

  

.rectangle {

position: absolute;

  z-index:-1;

  

}

  

.uvodnik, h5 {

    margin-top: 0px;

}



.ukazky-prace {

z-index: 3;

  



}



.ukazky-prace p {

  margin-left: 54em;

  margin-top: -17em;

  font-family:"Montserrat", Helvetica, Ariel, sans-serif;

        font-size: 1.25em;

        color: #7b6047;

        text-transform: uppercase;

        float: right;

        z-index: 5;

        color: white;

}

  .ukazka-1 {

      

  }

  

  .ukazka-2 {

  margin-left: 21em;

  

  

  }

    .ukazka-2 p {

      position: absolute;

  margin-left: -17em;

  width: 14em;

  text-align: right;



  

  }

  

  .ukazka-3 { 

  margin-top: -0.1em;  

  

  }

  

  .ukazka-3 p {

  margin-right: 3em;

  

  }

  

  

footer {

 overflow: hidden;

  background-color: rgb(0, 0, 20);

  padding-bottom: 9em;

  color: rgb(94, 109, 120);

  list-style: none;

  text-transform: uppercase;

  margin-top: -5em;  

  padding-top: 12.5em;

}



.footer, h2 {

color: fefefe;

text-align: right;



}





footer p {

    position: absolute;

    bottom: -200em;

    display: inline-block;

    margin-left: 31.25em;

    text-align: center;

    font-family: "Montserrat", Helvetica, Ariel, sans-serif;

          font-weight: 100;

}



footer span {

          font-size: 0.9em;

          color: rgb(47, 48, 62);

          font-family: "bigjohn", "Montserrat", Helvetica, Ariel, sans-serif;

          font-weight: 900;

          text-transform: uppercase;

          

        }

.zapati-1 {

  padding-left: 10em;

  float: left;

  text-align: right;

  margin-top: 3em;

   font-family: "bigjohn", "Montserrat", Helvetica, Ariel, sans-serif;

          font-weight: 700;

          text-transform: uppercase;



    

}



.zapati-2 {

  float: right;

  padding-right: 300px;

  text-align: left;

  margin-top: 3em; 



}



.zpapti-2, h2 span {

text-transform: uppercase;

font-family:"Montserrat", Helvetica, Ariel, sans-serif;

color: fefefe;

font-weight: 400;







}





.zapati-1 ul a,

      .zapati-2 ul a {

        color: rgb( 94, 109, 120);

        list-style-type: none;

        text-decoration: none; 

        }

.zapati-1 a:hover {

      text-decoration: underline;

      } 

      

.zapati-2 a:hover {

      text-decoration: underline;

      }

  }

  media(max-width:480px) {

  background-color: red;

  font-size: 40px;



  }

<!DOCTYPE html>

<html lang="cs" dir="ltr" class="no-js">

<head>

  <meta charset="utf-8" />

  <title>Maran Atha Design</title>

  <meta name="description" content="Grafický designér, webdesignér" />

  <meta name="author" content="Filip Janeček" />

  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  <!-- Odstraňte tyto odkazy, pokud umístíte stejnojmenné soubory do kořenového adresáře. -->

  <link rel="shortcut icon" href="obrazky/favicon.ico" />



  <link rel="stylesheet" href="css/normalize.css" />

  <link rel="stylesheet" href="css/styly.css" />

<link href="https://fonts.googleapis.com/css?family=Changa:800&amp;subset=latin-ext" rel="stylesheet">

<link href="https://fonts.googleapis.com/css?family=Montserrat:100,200,300,400,500,600,700,800,900" rel="stylesheet">



</head>

<body>

<header>

  <nav>

     <img src="obrazky/MARAN-ATHA-m-logo-cerne.png" alt="logo Vyhledávač receptů" class="logo" width="90" height="190">                                               

        <ul>

          <li><a onclick="scrollWin()" selection>Portfolio</a></li>           

           <span><li><a href="javascript: document.body.scrollIntoView(false);">Kontakt</a></li></span>

        </ul>

      </nav>

</header>

<div class="jmeno"><br><h3>MARAN ATHA<h3></div>

<h1>DESIGN<span>É</span>R</h1 selection>

<h1>CO SI SEDNE</h1 selection>

<a href="javascript: document.body.scrollIntoView(false);" class="promo-tlacitko">napište mi!</a>  



<div class="uvodnik">

  <div class="uvodnik-1">

  <h5>Webdesign</h5 selection><span><br><br></span>

  <p>Vytvářím webové bannery, programuji weby (nejraději malé), tvořím design pro mobilní aplikace.</p>

  </div>

  <div class="uvodnik-2"> 

  <h5>  

  Grafick<span>ý</span> Design </h5>

  <p>Magazíny, letáky, karty, plakáty, package design, logo design... To je pouze ukázka mé každodenní náplně.</p>

  </div>                                                                   

  <div class="uvodnik-3">

  <h5>

  Dal<span>ší</span></h5>   

  <p>Brand identity, motion design... To jsou termíny nad kterými se usmívám od rána do večera.</p> 

  </div>  

</div>

<div class="rectangle">

<img src="obrazky/background.png" alt="Cuketové pyré" width="1350" height="2100" />

</div>

<div class="ukazky-prace">

  <div class="ukazka-1">

    <img src="obrazky/mistero23.png" alt="Cuketové pyré" width="1020" height="700" />

    <p>Ukázka ze série plakátů pro Mistero, značku luxusních italských parfémů pro muže.</p>

  </div>

  <div class="ukazka-2">

    <img src="obrazky/wine-bottle.png" alt="Cuketové pyré" width="1020" height="700" />

    <p>Tvorba obalu jablečného vína Chinaska z Minessoty.</p>

  </div>

  <div class="ukazka-3">

    <img src="obrazky/mockup2.png" alt="Cuketové pyré" width="1020" height="698" />

    <p>Toto logo bylo vytvořeno pro společnost Ping, svými službami srovnatelnou např. se Skypem.</p>

  </div>

</div>



 <footer>

      <div class="zapati-1">

        <h2>Kontakt</h2><br>

        <ul class="cf">

          <li>Filip Janeček</li>

          <li><a href="https://www.google.cz/maps/place/Na+Svahu+1103,+293+06+Kosmonosy/@50.4435741,14.9179623,17z/data=!3m1!4b1!4m5!3m4!1s0x4709544129ed24c7:0x8f9764d49c6ff7fb!8m2!3d50.4435707!4d14.920151?hl=cs&authuser=0"><span class="info"> Adresa: </span>Kosmonosy Na Svahu 1103</a></li>

          <li><a href="https://www.facebook.com/maran.atha.92123?lst=100028119321828%3A100028119321828%3A1539100304"><span class="info">Facebook</span> Maran Atha</a></li>

          <li><a href="#28"></a><span class="info">Tel. číslo:</span> 702 885 801</li>

          <li><a href="#29"><span class="info">E-mail:</span> filip.janecek28@gmail.com</a></li>

        </ul>

      </div><!-- .zapati-1 -->



      <div class="zapati-2">

        <h2>Kde m<span>ě</span> sehnat</h2> <br>

        <ul>

          <li><a href="https://webtrh.cz/members/163351-Filip-Jane%C4%8Dek">Webtrh.cz</a></li>

          <li><a href="https://www.stovkomat.cz/uzivatel/Maran%20Atha">Stovkomat.cz</a></li>

          <li><a href="https://www.shutterstock.com/g/Maran-Atha?sort_method=popular">Shutterstock.com</a></li>

        </ul>

      </div><!-- .zapati-2 -->

      

      <p>Copyright 2018 © Maran Atha</p>

  </footer selection>

  <script>

function scrollWin() {

    window.scrollTo(0,1300);

}

</script>

<script src="script.js"></script>

  

</body>

</html>

asked Nov 17 '18 at 11:09

Maran_Atha

Here is the first code:

body {

font-size: 16px;

margin-top: 9.375em;



}

@media (min-width:640px) {

* {

 margin:0px;

 font-family:"bigjohn", Helvetica, Ariel, sans-serif;

 

  }

  

*::selection {

background-color: rgb(0, 0, 20);

color: fefefe;

}



@font-face {

    font-family: Alcubierre;

    src: url("fonts/Alcubierre.eot") format('embedded-opentype');

    src: url("fonts/Alcubierre.woff") format('woff');

    src: url("fonts/Alcubierre.ttf") format('truetype');

    src: url("fonts/Alcubierre.otf") format('opentype');

    src: url("fonts/Alcubierre.svg") format('svg');

        

    }

@font-face {

    font-family: bigjohn;

    src: url("fonts/bigjohn.eot") format('mbedded-opentype');

    src: url("fonts/bigjohn.woff") format('woff');

    src: url("fonts/bigjohn.ttf") format('truetype');

    src: url("fonts/bigjohn.otf") format('opentype');

    src: url("fonts/bigjohn.svg") format('svg');

    }

@font-face {    

    font-family: Le_Super_Type_SemiBold;

    src: url(Le_Super_Type_SemiBold.ttf) format('ttf');

    }

@font-face {

    font-family: centurygothic;

    src: url(centurygothic.ttf) format('ttf');

    }

@font-face {  

    font-family: Montserrat-Light;

    src: url('Montserrat.otf') format('otf');

    }   

a {

  text-decoration: none; 

  }

li {

list-style-type: none;

}

p {

font-family:"Monsterrat", Helvetica, Ariel, sans-serif;

}

  

h1, h2, h3 {

text-transform: uppercase;

text-align: center;

font-family:"Alcubierre", Helvetica, Ariel, sans-serif;

}



h1 {

font-family:'bigjohn', 'Changa', Helvetica, Ariel, sans-serif;

font-size: 4.375em;



} 



  h1 span {

    font-family:"bigjohn", 'Changa', Helvetica, Ariel, sans-serif;

    font-size: 1.23333333em;

  }

  

nav {

    float: center;

    margin-top: -8em;

    margin-left: 35em;

    column-gap: 4em;

  }

    

  nav img {

      margin-left: 4em;

      margin-top: 5em;

    }

      

    nav a {

    color: black; 

    font-size:25px;

    text-transform: uppercase;   

      -webkit-transition: color .4s ease-out;

      -moz-transition: color .4s ease-out;

      -o-transition: color .4s ease-out;

      transition: color .4s ease-out;    

    }

    

      nav a:hover {

        text-decoration: none;

        color: rgb(47, 48, 62); 

      }

    

    nav ul {

      list-style: none;

      margin: -8em;

      padding: 0; 

    }



      nav ul li {

        display: inline-block;

        *display: inline; /* pro IE7 */

        margin-right: 10em;

        word-spacing: 4em; 

      }

           

        nav ul li span {

          margin-left: 100em;       

        }

body > header {

position: sticky;

box-shadow: rgba(0, 0, 0, .25) 0 3px 22px 0;

background-image: linear-gradient(#87053e 10%);      

}



.jmeno {

  margin-top:5em;

  position: relative;

  text-align: center;

  margin-left:18.494444em;

  margin-right: 18.494444em;

  border-bottom-style: ridge;

  font-size:1.875em;

  }

  

  .jmeno::selection {

background-color: rgba(0, 0, 0, .25);

color: #fefefe;

}

.promo-tlacitko { 

  z-index: 5;

  padding-bottom: 0.5em;

  box-shadow: rgba(0, 0, 0, 0.25) 0 0.0416666em 0.3055em 0;

  background-image:rgb(0, 0, 20);

    display: inline-block;

    width: 15.166666em;

    padding: 1.30666em 0;

    border: 0.5em solid rgb(47, 48, 62);

    background-color: rgb(0, 0, 20);

    box-shadow: rgba(0, 0, 0, .25) 0 0.35em 0.1em 0;

    font-size: 1.25em;

    color: #fefefe;

    transition: transform. 5s ease-out; 

    text-align: center;

    text-transform: uppercase;

        margin-left: 25.75em;

        margin-top: 7.5em;

        margin-bottom: 10em;

        font-family:"Le_Super_Type_SemiBold", Helvetica, Ariel, sans-serif;

        font-family:"Alcubierre", Helvetica, Ariel, sans-serif;

        



}

  .promo-tlacitko:hover {

   background-color: rgb(47, 48, 62);

   border: 0.5em solid rgb(0, 0, 20);

  }

  

.uvodnik {

   margin-right:10em;

   margin-left:10em;

   margin-top: 7.5em;

   margin-bottom:4.5em;

   display: inline-block;

   column-count: 3;

   column-rule: 3px solid rgb(47, 48, 62);

   column-gap: 2em;

   text-align: center;   

  }

  

.uvodnik p {

font-family:"Montserrat", 'Changa', Helvetica, Ariel, sans-serif;



}

  

  .uvodnik h5 {

  margin-top: 0px;

  font-family:"bigjohn", 'Changa', Helvetica, Ariel, sans-serif;

font-size: 1.3em;



} 



  .uvodnik h5 span {

    font-family:"bigjohn", 'Changa', Helvetica, Ariel, sans-serif;

    font-size:1.2em;

    text-transform: uppercase;

    margin-top: 0px;

      }  

    .uvodnik-1 {

    text-align: right;

    margin-top:8px;

    }   

      .uvodnik-1 span {

    line-height: 0.4em;

      } 

      

      .uvodnik-1 p {

        margin-top: -1.5em;

      } 

    .uvodnik-3 {

    text-align: left;

    margin-top:2em;

    margin-bottom: 3em;

    }                 

  

.rectangle {

position: absolute;

  z-index:-1;

  

}

  

.uvodnik, h5 {

    margin-top: 0px;

}



.ukazky-prace {

z-index: 3;

  



}



.ukazky-prace p {

  margin-left: 54em;

  margin-top: -17em;

  font-family:"Montserrat", Helvetica, Ariel, sans-serif;

        font-size: 1.25em;

        color: #7b6047;

        text-transform: uppercase;

        float: right;

        z-index: 5;

        color: white;

}

  .ukazka-1 {

      

  }

  

  .ukazka-2 {

  margin-left: 21em;

  

  

  }

    .ukazka-2 p {

      position: absolute;

  margin-left: -17em;

  width: 14em;

  text-align: right;



  

  }

  

  .ukazka-3 {

  margin-top: -0.1em;

  

  }

  

  .ukazka-3 p {

  margin-right: 3em;

  

  }

  

  

footer {

 overflow: hidden;

  background-color: rgb(0, 0, 20);

  padding-bottom: 9em;

  color: rgb(94, 109, 120);

  list-style: none;

  text-transform: uppercase;

  margin-top: -5em;  

  padding-top: 12.5em;

}



.footer, h2 {

color: fefefe;

text-align: right;



}





footer p {

    position: absolute;

    bottom: -200em;

    display: inline-block;

    margin-left: 31.25em;

    text-align: center;

    font-family: "Montserrat", Helvetica, Ariel, sans-serif;

          font-weight: 100;

}



footer span {

          font-size: 0.9em;

          color: rgb(47, 48, 62);

          font-family: "bigjohn", "Montserrat", Helvetica, Ariel, sans-serif;

          font-weight: 900;

          text-transform: uppercase;

          

        }

.zapati-1 {

  padding-left: 10em;

  float: left;

  text-align: right;

  margin-top: 3em;

   font-family: "bigjohn", "Montserrat", Helvetica, Ariel, sans-serif;

          font-weight: 700;

          text-transform: uppercase;



    

}



.zapati-2 {

  float: right;

  padding-right: 300px;

  text-align: left;

  margin-top: 3em; 



}



.zpapti-2, h2 span {

text-transform: uppercase;

font-family:"Montserrat", Helvetica, Ariel, sans-serif;

color: fefefe;

font-weight: 400;







}





.zapati-1 ul a,

      .zapati-2 ul a {

        color: rgb( 94, 109, 120);

        list-style-type: none;

        text-decoration: none; 

        }

.zapati-1 a:hover {

      text-decoration: underline;

      } 

      

.zapati-2 a:hover {

      text-decoration: underline;

      }

  }

  media(max-width:480px) {

  background-color: red;

  font-size: 40px;



  }

<!DOCTYPE html>

<html lang="cs" dir="ltr" class="no-js">

<head>

  <meta charset="utf-8" />

  <title>Maran Atha Design</title>

  <meta name="description" content="Grafický designér, webdesignér" />

  <meta name="author" content="Filip Janeček" />

  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  <!-- Odstraňte tyto odkazy, pokud umístíte stejnojmenné soubory do kořenového adresáře. -->

  <link rel="shortcut icon" href="obrazky/favicon.ico" />



  <link rel="stylesheet" href="css/normalize.css" />

  <link rel="stylesheet" href="css/styly.css" />

<link href="https://fonts.googleapis.com/css?family=Changa:800&amp;subset=latin-ext" rel="stylesheet">

<link href="https://fonts.googleapis.com/css?family=Montserrat:100,200,300,400,500,600,700,800,900" rel="stylesheet">



</head>

<body>

<header>

  <nav>

     <img src="obrazky/MARAN-ATHA-m-logo-cerne.png" alt="logo Vyhledávač receptů" class="logo" width="90" height="190">                                               

        <ul>

          <li><a onclick="scrollWin()" selection>Portfolio</a></li>           

           <span><li><a href="javascript: document.body.scrollIntoView(false);">Kontakt</a></li></span>

        </ul>

      </nav>

</header>

<div class="jmeno"><br><h3>MARAN ATHA<h3></div>

<h1>DESIGN<span>É</span>R</h1 selection>

<h1>CO SI SEDNE</h1 selection>

<a href="javascript: document.body.scrollIntoView(false);" class="promo-tlacitko">napište mi!</a>  



<div class="uvodnik">

  <div class="uvodnik-1">

  <h5>Webdesign</h5 selection><span><br><br></span>

  <p>Vytvářím webové bannery, programuji weby (nejraději malé), tvořím design pro mobilní aplikace.</p>

  </div>

  <div class="uvodnik-2"> 

  <h5>  

  Grafick<span>ý</span> Design </h5>

  <p>Magazíny, letáky, karty, plakáty, package design, logo design... To je pouze ukázka mé každodenní náplně.</p>

  </div>                                                                   

  <div class="uvodnik-3">

  <h5>

  Dal<span>ší</span></h5>   

  <p>Brand identity, motion design... To jsou termíny nad kterými se usmívám od rána do večera.</p> 

  </div>  

</div>

<div class="rectangle">

<img src="obrazky/background.png" alt="Cuketové pyré" width="1350" height="2100" />

</div>

<div class="ukazky-prace">

  <div class="ukazka-1">

    <img src="obrazky/mistero23.png" alt="Cuketové pyré" width="1020" height="700" />

    <p>Ukázka ze série plakátů pro Mistero, značku luxusních italských parfémů pro muže.</p>

  </div>

  <div class="ukazka-2">

    <img src="obrazky/wine-bottle.png" alt="Cuketové pyré" width="1020" height="700" />

    <p>Tvorba obalu jablečného vína Chinaska z Minessoty.</p>

  </div>

  <div class="ukazka-3">

    <img src="obrazky/mockup2.png" alt="Cuketové pyré" width="1020" height="698" />

    <p>Toto logo bylo vytvořeno pro společnost Ping, svými službami srovnatelnou např. se Skypem.</p>

  </div>

</div>



 <footer>

      <div class="zapati-1">

        <h2>Kontakt</h2><br>

        <ul class="cf">

          <li>Filip Janeček</li>

          <li><a href="https://www.google.cz/maps/place/Na+Svahu+1103,+293+06+Kosmonosy/@50.4435741,14.9179623,17z/data=!3m1!4b1!4m5!3m4!1s0x4709544129ed24c7:0x8f9764d49c6ff7fb!8m2!3d50.4435707!4d14.920151?hl=cs&authuser=0"><span class="info"> Adresa: </span>Kosmonosy Na Svahu 1103</a></li>

          <li><a href="https://www.facebook.com/maran.atha.92123?lst=100028119321828%3A100028119321828%3A1539100304"><span class="info">Facebook</span> Maran Atha</a></li>

          <li><a href="#28"></a><span class="info">Tel. číslo:</span> 702 885 801</li>

          <li><a href="#29"><span class="info">E-mail:</span> filip.janecek28@gmail.com</a></li>

        </ul>

      </div><!-- .zapati-1 -->



      <div class="zapati-2">

        <h2>Kde m<span>ě</span> sehnat</h2> <br>

        <ul>

          <li><a href="https://webtrh.cz/members/163351-Filip-Jane%C4%8Dek">Webtrh.cz</a></li>

          <li><a href="https://www.stovkomat.cz/uzivatel/Maran%20Atha">Stovkomat.cz</a></li>

          <li><a href="https://www.shutterstock.com/g/Maran-Atha?sort_method=popular">Shutterstock.com</a></li>

        </ul>

      </div><!-- .zapati-2 -->

      

      <p>Copyright 2018 © Maran Atha</p>

  </footer selection>

  <script>

function scrollWin() {

    window.scrollTo(0,1300);

}

</script>

<script src="script.js"></script>

  

</body>

</html>

And after correcting it:

@font-face {

    font-family: "Alcubierre";

    src: url("./fonts/Alcubierre.eot") format('embedded-opentype'),

        url("./fonts/Alcubierre.woff") format('woff'),

        url("./fonts/Alcubierre.ttf") format('truetype'),

        url("./fonts/Alcubierre.otf") format('opentype'),

        url("./fonts/Alcubierre.svg") format('svg');

    font-weight: normal;

    font-style: normal;        

    }

@font-face {

    font-family: "BigJohn";

    src: url("./fonts/bigjohn.eot") format('embedded-opentype'),

        url("./fonts/bigjohn.woff") format('woff'),

        url("./fonts/bigjohn.ttf") format('truetype'),

        url("./fonts/bigjohn.otf") format('opentype'),

        url("./fonts/bigjohn.svg") format('svg');

        font-weight: normal;

    font-style: normal;        

    }

@font-face {

    font-family: centurygothic;

    src: url(centurygothic.ttf) format('ttf');

    }

@font-face {  

    font-family: Montserrat-Light;

    src: url('Montserrat.otf') format('otf');

    }   

body {

font-size: 16px;

margin-top: 9.375em;



}

@media (min-width:640px) {

* {

 margin:0px;

 font-family:"bigjohn", Helvetica, Ariel, sans-serif;

 

  }

  

*::selection {

background-color: rgb(0, 0, 20);

color: fefefe;

}



a {

  text-decoration: none; 

  }

li {

list-style-type: none;

}

p {

font-family:"Monsterrat", Helvetica, Ariel, sans-serif;

}

  

h1, h2, h3 {

text-transform: uppercase;

text-align: center;

font-family:"Alcubierre", Helvetica, Ariel, sans-serif;

}



h1 {

font-family:'bigjohn', 'Changa', Helvetica, Ariel, sans-serif;

font-size: 4.375em;



} 



  h1 span {

    font-family:"bigjohn", 'Changa', Helvetica, Ariel, sans-serif;

    font-size: 1.23333333em;

  }

  

nav {

    float: center;

    margin-top: -8em;

    margin-left: 35em;

    column-gap: 4em;

  }

    

  nav img {

      margin-left: 4em;

      margin-top: 5em;

    }

      

    nav a {

    color: black; 

    font-size:25px;

    text-transform: uppercase;   

      -webkit-transition: color .4s ease-out;

      -moz-transition: color .4s ease-out;

      -o-transition: color .4s ease-out;

      transition: color .4s ease-out;    

    }

    

      nav a:hover {

        text-decoration: none;

        color: rgb(47, 48, 62); 

      }

    

    nav ul {

      list-style: none;

      margin: -8em;

      padding: 0; 

    }



      nav ul li {

        display: inline-block;

        *display: inline; /* pro IE7 */

        margin-right: 10em;

        word-spacing: 4em; 

      }

           

        nav ul li span {

          margin-left: 100em;       

        }

body > header {

position: sticky;

box-shadow: rgba(0, 0, 0, .25) 0 3px 22px 0;

background-image: linear-gradient(#87053e 10%);      

}



.jmeno {

  margin-top:5em;

  position: relative;

  text-align: center;

  margin-left:18.494444em;

  margin-right: 18.494444em;

  border-bottom-style: ridge;

  font-size:1.875em;

  }

  

  .jmeno::selection {

background-color: rgba(0, 0, 0, .25);

color: #fefefe;

}

.promo-tlacitko { 

  z-index: 5;

  padding-bottom: 0.5em;

  box-shadow: rgba(0, 0, 0, 0.25) 0 0.0416666em 0.3055em 0;

  background-image:rgb(0, 0, 20);

    display: inline-block;

    width: 15.166666em;

    padding: 1.30666em 0;

    border: 0.5em solid rgb(47, 48, 62);

    background-color: rgb(0, 0, 20);

    box-shadow: rgba(0, 0, 0, .25) 0 0.35em 0.1em 0;

    font-size: 1.25em;

    color: #fefefe;

    transition: transform. 5s ease-out; 

    text-align: center;

    text-transform: uppercase;

        margin-left: 25.75em;

        margin-top: 7.5em;

        margin-bottom: 10em;

        font-family:"Le_Super_Type_SemiBold", Helvetica, Ariel, sans-serif;

        font-family:"Alcubierre", Helvetica, Ariel, sans-serif;

        



}

  .promo-tlacitko:hover {

   background-color: rgb(47, 48, 62);

   border: 0.5em solid rgb(0, 0, 20);

  }

  

.uvodnik {

   margin-right:10em;

   margin-left:10em;

   margin-top: 7.5em;

   margin-bottom:4.5em;

   display: inline-block;

   column-count: 3;

   column-rule: 3px solid rgb(47, 48, 62);

   column-gap: 2em;

   text-align: center;   

  }

  

.uvodnik p {

font-family:"Montserrat", 'Changa', Helvetica, Ariel, sans-serif;



}

  

  .uvodnik h5 {

  margin-top: 0px;

  font-family:"bigjohn", 'Changa', Helvetica, Ariel, sans-serif;

font-size: 1.3em;



} 



  .uvodnik h5 span {

    font-family:"bigjohn", 'Changa', Helvetica, Ariel, sans-serif;

    font-size:1.2em;

    text-transform: uppercase;

    margin-top: 0px;

      }  

    .uvodnik-1 {

    text-align: right;

    margin-top:8px;

    }   

      .uvodnik-1 span {

    line-height: 0.4em;

      } 

      

      .uvodnik-1 p {

        margin-top: -1.5em;

      } 

    .uvodnik-3 {

    text-align: left;

    margin-top:2em;

    margin-bottom: 3em;

    }                 

  

.rectangle {

position: absolute;

  z-index:-1;

  

}

  

.uvodnik, h5 {

    margin-top: 0px;

}



.ukazky-prace {

z-index: 3;

  



}



.ukazky-prace p {

  margin-left: 54em;

  margin-top: -17em;

  font-family:"Montserrat", Helvetica, Ariel, sans-serif;

        font-size: 1.25em;

        color: #7b6047;

        text-transform: uppercase;

        float: right;

        z-index: 5;

        color: white;

}

  .ukazka-1 {

      

  }

  

  .ukazka-2 {

  margin-left: 21em;

  

  

  }

    .ukazka-2 p {

      position: absolute;

  margin-left: -17em;

  width: 14em;

  text-align: right;



  

  }

  

  .ukazka-3 { 

  margin-top: -0.1em;  

  

  }

  

  .ukazka-3 p {

  margin-right: 3em;

  

  }

  

  

footer {

 overflow: hidden;

  background-color: rgb(0, 0, 20);

  padding-bottom: 9em;

  color: rgb(94, 109, 120);

  list-style: none;

  text-transform: uppercase;

  margin-top: -5em;  

  padding-top: 12.5em;

}



.footer, h2 {

color: fefefe;

text-align: right;



}





footer p {

    position: absolute;

    bottom: -200em;

    display: inline-block;

    margin-left: 31.25em;

    text-align: center;

    font-family: "Montserrat", Helvetica, Ariel, sans-serif;

          font-weight: 100;

}



footer span {

          font-size: 0.9em;

          color: rgb(47, 48, 62);

          font-family: "bigjohn", "Montserrat", Helvetica, Ariel, sans-serif;

          font-weight: 900;

          text-transform: uppercase;

          

        }

.zapati-1 {

  padding-left: 10em;

  float: left;

  text-align: right;

  margin-top: 3em;

   font-family: "bigjohn", "Montserrat", Helvetica, Ariel, sans-serif;

          font-weight: 700;

          text-transform: uppercase;



    

}



.zapati-2 {

  float: right;

  padding-right: 300px;

  text-align: left;

  margin-top: 3em; 



}



.zpapti-2, h2 span {

text-transform: uppercase;

font-family:"Montserrat", Helvetica, Ariel, sans-serif;

color: fefefe;

font-weight: 400;







}





.zapati-1 ul a,

      .zapati-2 ul a {

        color: rgb( 94, 109, 120);

        list-style-type: none;

        text-decoration: none; 

        }

.zapati-1 a:hover {

      text-decoration: underline;

      } 

      

.zapati-2 a:hover {

      text-decoration: underline;

      }

  }

  media(max-width:480px) {

  background-color: red;

  font-size: 40px;



  }

<!DOCTYPE html>

<html lang="cs" dir="ltr" class="no-js">

<head>

  <meta charset="utf-8" />

  <title>Maran Atha Design</title>

  <meta name="description" content="Grafický designér, webdesignér" />

  <meta name="author" content="Filip Janeček" />

  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  <!-- Odstraňte tyto odkazy, pokud umístíte stejnojmenné soubory do kořenového adresáře. -->

  <link rel="shortcut icon" href="obrazky/favicon.ico" />



  <link rel="stylesheet" href="css/normalize.css" />

  <link rel="stylesheet" href="css/styly.css" />

<link href="https://fonts.googleapis.com/css?family=Changa:800&amp;subset=latin-ext" rel="stylesheet">

<link href="https://fonts.googleapis.com/css?family=Montserrat:100,200,300,400,500,600,700,800,900" rel="stylesheet">



</head>

<body>

<header>

  <nav>

     <img src="obrazky/MARAN-ATHA-m-logo-cerne.png" alt="logo Vyhledávač receptů" class="logo" width="90" height="190">                                               

        <ul>

          <li><a onclick="scrollWin()" selection>Portfolio</a></li>           

           <span><li><a href="javascript: document.body.scrollIntoView(false);">Kontakt</a></li></span>

        </ul>

      </nav>

</header>

<div class="jmeno"><br><h3>MARAN ATHA<h3></div>

<h1>DESIGN<span>É</span>R</h1 selection>

<h1>CO SI SEDNE</h1 selection>

<a href="javascript: document.body.scrollIntoView(false);" class="promo-tlacitko">napište mi!</a>  



<div class="uvodnik">

  <div class="uvodnik-1">

  <h5>Webdesign</h5 selection><span><br><br></span>

  <p>Vytvářím webové bannery, programuji weby (nejraději malé), tvořím design pro mobilní aplikace.</p>

  </div>

  <div class="uvodnik-2"> 

  <h5>  

  Grafick<span>ý</span> Design </h5>

  <p>Magazíny, letáky, karty, plakáty, package design, logo design... To je pouze ukázka mé každodenní náplně.</p>

  </div>                                                                   

  <div class="uvodnik-3">

  <h5>

  Dal<span>ší</span></h5>   

  <p>Brand identity, motion design... To jsou termíny nad kterými se usmívám od rána do večera.</p> 

  </div>  

</div>

<div class="rectangle">

<img src="obrazky/background.png" alt="Cuketové pyré" width="1350" height="2100" />

</div>

<div class="ukazky-prace">

  <div class="ukazka-1">

    <img src="obrazky/mistero23.png" alt="Cuketové pyré" width="1020" height="700" />

    <p>Ukázka ze série plakátů pro Mistero, značku luxusních italských parfémů pro muže.</p>

  </div>

  <div class="ukazka-2">

    <img src="obrazky/wine-bottle.png" alt="Cuketové pyré" width="1020" height="700" />

    <p>Tvorba obalu jablečného vína Chinaska z Minessoty.</p>

  </div>

  <div class="ukazka-3">

    <img src="obrazky/mockup2.png" alt="Cuketové pyré" width="1020" height="698" />

    <p>Toto logo bylo vytvořeno pro společnost Ping, svými službami srovnatelnou např. se Skypem.</p>

  </div>

</div>



 <footer>

      <div class="zapati-1">

        <h2>Kontakt</h2><br>

        <ul class="cf">

          <li>Filip Janeček</li>

          <li><a href="https://www.google.cz/maps/place/Na+Svahu+1103,+293+06+Kosmonosy/@50.4435741,14.9179623,17z/data=!3m1!4b1!4m5!3m4!1s0x4709544129ed24c7:0x8f9764d49c6ff7fb!8m2!3d50.4435707!4d14.920151?hl=cs&authuser=0"><span class="info"> Adresa: </span>Kosmonosy Na Svahu 1103</a></li>

          <li><a href="https://www.facebook.com/maran.atha.92123?lst=100028119321828%3A100028119321828%3A1539100304"><span class="info">Facebook</span> Maran Atha</a></li>

          <li><a href="#28"></a><span class="info">Tel. číslo:</span> 702 885 801</li>

          <li><a href="#29"><span class="info">E-mail:</span> filip.janecek28@gmail.com</a></li>

        </ul>

      </div><!-- .zapati-1 -->



      <div class="zapati-2">

        <h2>Kde m<span>ě</span> sehnat</h2> <br>

        <ul>

          <li><a href="https://webtrh.cz/members/163351-Filip-Jane%C4%8Dek">Webtrh.cz</a></li>

          <li><a href="https://www.stovkomat.cz/uzivatel/Maran%20Atha">Stovkomat.cz</a></li>

          <li><a href="https://www.shutterstock.com/g/Maran-Atha?sort_method=popular">Shutterstock.com</a></li>

        </ul>

      </div><!-- .zapati-2 -->

      

      <p>Copyright 2018 © Maran Atha</p>

  </footer selection>

  <script>

function scrollWin() {

    window.scrollTo(0,1300);

}

</script>

<script src="script.js"></script>

  

</body>

</html>

body {

font-size: 16px;

margin-top: 9.375em;



}

@media (min-width:640px) {

* {

 margin:0px;

 font-family:"bigjohn", Helvetica, Ariel, sans-serif;

 

  }

  

*::selection {

background-color: rgb(0, 0, 20);

color: fefefe;

}



@font-face {

    font-family: Alcubierre;

    src: url("fonts/Alcubierre.eot") format('embedded-opentype');

    src: url("fonts/Alcubierre.woff") format('woff');

    src: url("fonts/Alcubierre.ttf") format('truetype');

    src: url("fonts/Alcubierre.otf") format('opentype');

    src: url("fonts/Alcubierre.svg") format('svg');

        

    }

@font-face {

    font-family: bigjohn;

    src: url("fonts/bigjohn.eot") format('mbedded-opentype');

    src: url("fonts/bigjohn.woff") format('woff');

    src: url("fonts/bigjohn.ttf") format('truetype');

    src: url("fonts/bigjohn.otf") format('opentype');

    src: url("fonts/bigjohn.svg") format('svg');

    }

@font-face {    

    font-family: Le_Super_Type_SemiBold;

    src: url(Le_Super_Type_SemiBold.ttf) format('ttf');

    }

@font-face {

    font-family: centurygothic;

    src: url(centurygothic.ttf) format('ttf');

    }

@font-face {  

    font-family: Montserrat-Light;

    src: url('Montserrat.otf') format('otf');

    }   

a {

  text-decoration: none; 

  }

li {

list-style-type: none;

}

p {

font-family:"Monsterrat", Helvetica, Ariel, sans-serif;

}

  

h1, h2, h3 {

text-transform: uppercase;

text-align: center;

font-family:"Alcubierre", Helvetica, Ariel, sans-serif;

}



h1 {

font-family:'bigjohn', 'Changa', Helvetica, Ariel, sans-serif;

font-size: 4.375em;



} 



  h1 span {

    font-family:"bigjohn", 'Changa', Helvetica, Ariel, sans-serif;

    font-size: 1.23333333em;

  }

  

nav {

    float: center;

    margin-top: -8em;

    margin-left: 35em;

    column-gap: 4em;

  }

    

  nav img {

      margin-left: 4em;

      margin-top: 5em;

    }

      

    nav a {

    color: black; 

    font-size:25px;

    text-transform: uppercase;   

      -webkit-transition: color .4s ease-out;

      -moz-transition: color .4s ease-out;

      -o-transition: color .4s ease-out;

      transition: color .4s ease-out;    

    }

    

      nav a:hover {

        text-decoration: none;

        color: rgb(47, 48, 62); 

      }

    

    nav ul {

      list-style: none;

      margin: -8em;

      padding: 0; 

    }



      nav ul li {

        display: inline-block;

        *display: inline; /* pro IE7 */

        margin-right: 10em;

        word-spacing: 4em; 

      }

           

        nav ul li span {

          margin-left: 100em;       

        }

body > header {

position: sticky;

box-shadow: rgba(0, 0, 0, .25) 0 3px 22px 0;

background-image: linear-gradient(#87053e 10%);      

}



.jmeno {

  margin-top:5em;

  position: relative;

  text-align: center;

  margin-left:18.494444em;

  margin-right: 18.494444em;

  border-bottom-style: ridge;

  font-size:1.875em;

  }

  

  .jmeno::selection {

background-color: rgba(0, 0, 0, .25);

color: #fefefe;

}

.promo-tlacitko { 

  z-index: 5;

  padding-bottom: 0.5em;

  box-shadow: rgba(0, 0, 0, 0.25) 0 0.0416666em 0.3055em 0;

  background-image:rgb(0, 0, 20);

    display: inline-block;

    width: 15.166666em;

    padding: 1.30666em 0;

    border: 0.5em solid rgb(47, 48, 62);

    background-color: rgb(0, 0, 20);

    box-shadow: rgba(0, 0, 0, .25) 0 0.35em 0.1em 0;

    font-size: 1.25em;

    color: #fefefe;

    transition: transform. 5s ease-out; 

    text-align: center;

    text-transform: uppercase;

        margin-left: 25.75em;

        margin-top: 7.5em;

        margin-bottom: 10em;

        font-family:"Le_Super_Type_SemiBold", Helvetica, Ariel, sans-serif;

        font-family:"Alcubierre", Helvetica, Ariel, sans-serif;

        



}

  .promo-tlacitko:hover {

   background-color: rgb(47, 48, 62);

   border: 0.5em solid rgb(0, 0, 20);

  }

  

.uvodnik {

   margin-right:10em;

   margin-left:10em;

   margin-top: 7.5em;

   margin-bottom:4.5em;

   display: inline-block;

   column-count: 3;

   column-rule: 3px solid rgb(47, 48, 62);

   column-gap: 2em;

   text-align: center;   

  }

  

.uvodnik p {

font-family:"Montserrat", 'Changa', Helvetica, Ariel, sans-serif;



}

  

  .uvodnik h5 {

  margin-top: 0px;

  font-family:"bigjohn", 'Changa', Helvetica, Ariel, sans-serif;

font-size: 1.3em;



} 



  .uvodnik h5 span {

    font-family:"bigjohn", 'Changa', Helvetica, Ariel, sans-serif;

    font-size:1.2em;

    text-transform: uppercase;

    margin-top: 0px;

      }  

    .uvodnik-1 {

    text-align: right;

    margin-top:8px;

    }   

      .uvodnik-1 span {

    line-height: 0.4em;

      } 

      

      .uvodnik-1 p {

        margin-top: -1.5em;

      } 

    .uvodnik-3 {

    text-align: left;

    margin-top:2em;

    margin-bottom: 3em;

    }                 

  

.rectangle {

position: absolute;

  z-index:-1;

  

}

  

.uvodnik, h5 {

    margin-top: 0px;

}



.ukazky-prace {

z-index: 3;

  



}



.ukazky-prace p {

  margin-left: 54em;

  margin-top: -17em;

  font-family:"Montserrat", Helvetica, Ariel, sans-serif;

        font-size: 1.25em;

        color: #7b6047;

        text-transform: uppercase;

        float: right;

        z-index: 5;

        color: white;

}

  .ukazka-1 {

      

  }

  

  .ukazka-2 {

  margin-left: 21em;

  

  

  }

    .ukazka-2 p {

      position: absolute;

  margin-left: -17em;

  width: 14em;

  text-align: right;



  

  }

  

  .ukazka-3 {

  margin-top: -0.1em;

  

  }

  

  .ukazka-3 p {

  margin-right: 3em;

  

  }

  

  

footer {

 overflow: hidden;

  background-color: rgb(0, 0, 20);

  padding-bottom: 9em;

  color: rgb(94, 109, 120);

  list-style: none;

  text-transform: uppercase;

  margin-top: -5em;  

  padding-top: 12.5em;

}



.footer, h2 {

color: fefefe;

text-align: right;



}





footer p {

    position: absolute;

    bottom: -200em;

    display: inline-block;

    margin-left: 31.25em;

    text-align: center;

    font-family: "Montserrat", Helvetica, Ariel, sans-serif;

          font-weight: 100;

}



footer span {

          font-size: 0.9em;

          color: rgb(47, 48, 62);

          font-family: "bigjohn", "Montserrat", Helvetica, Ariel, sans-serif;

          font-weight: 900;

          text-transform: uppercase;

          

        }

.zapati-1 {

  padding-left: 10em;

  float: left;

  text-align: right;

  margin-top: 3em;

   font-family: "bigjohn", "Montserrat", Helvetica, Ariel, sans-serif;

          font-weight: 700;

          text-transform: uppercase;



    

}



.zapati-2 {

  float: right;

  padding-right: 300px;

  text-align: left;

  margin-top: 3em; 



}



.zpapti-2, h2 span {

text-transform: uppercase;

font-family:"Montserrat", Helvetica, Ariel, sans-serif;

color: fefefe;

font-weight: 400;







}





.zapati-1 ul a,

      .zapati-2 ul a {

        color: rgb( 94, 109, 120);

        list-style-type: none;

        text-decoration: none; 

        }

.zapati-1 a:hover {

      text-decoration: underline;

      } 

      

.zapati-2 a:hover {

      text-decoration: underline;

      }

  }

  media(max-width:480px) {

  background-color: red;

  font-size: 40px;



  }

<!DOCTYPE html>

<html lang="cs" dir="ltr" class="no-js">

<head>

  <meta charset="utf-8" />

  <title>Maran Atha Design</title>

  <meta name="description" content="Grafický designér, webdesignér" />

  <meta name="author" content="Filip Janeček" />

  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  <!-- Odstraňte tyto odkazy, pokud umístíte stejnojmenné soubory do kořenového adresáře. -->

  <link rel="shortcut icon" href="obrazky/favicon.ico" />



  <link rel="stylesheet" href="css/normalize.css" />

  <link rel="stylesheet" href="css/styly.css" />

<link href="https://fonts.googleapis.com/css?family=Changa:800&amp;subset=latin-ext" rel="stylesheet">

<link href="https://fonts.googleapis.com/css?family=Montserrat:100,200,300,400,500,600,700,800,900" rel="stylesheet">



</head>

<body>

<header>

  <nav>

     <img src="obrazky/MARAN-ATHA-m-logo-cerne.png" alt="logo Vyhledávač receptů" class="logo" width="90" height="190">                                               

        <ul>

          <li><a onclick="scrollWin()" selection>Portfolio</a></li>           

           <span><li><a href="javascript: document.body.scrollIntoView(false);">Kontakt</a></li></span>

        </ul>

      </nav>

</header>

<div class="jmeno"><br><h3>MARAN ATHA<h3></div>

<h1>DESIGN<span>É</span>R</h1 selection>

<h1>CO SI SEDNE</h1 selection>

<a href="javascript: document.body.scrollIntoView(false);" class="promo-tlacitko">napište mi!</a>  



<div class="uvodnik">

  <div class="uvodnik-1">

  <h5>Webdesign</h5 selection><span><br><br></span>

  <p>Vytvářím webové bannery, programuji weby (nejraději malé), tvořím design pro mobilní aplikace.</p>

  </div>

  <div class="uvodnik-2"> 

  <h5>  

  Grafick<span>ý</span> Design </h5>

  <p>Magazíny, letáky, karty, plakáty, package design, logo design... To je pouze ukázka mé každodenní náplně.</p>

  </div>                                                                   

  <div class="uvodnik-3">

  <h5>

  Dal<span>ší</span></h5>   

  <p>Brand identity, motion design... To jsou termíny nad kterými se usmívám od rána do večera.</p> 

  </div>  

</div>

<div class="rectangle">

<img src="obrazky/background.png" alt="Cuketové pyré" width="1350" height="2100" />

</div>

<div class="ukazky-prace">

  <div class="ukazka-1">

    <img src="obrazky/mistero23.png" alt="Cuketové pyré" width="1020" height="700" />

    <p>Ukázka ze série plakátů pro Mistero, značku luxusních italských parfémů pro muže.</p>

  </div>

  <div class="ukazka-2">

    <img src="obrazky/wine-bottle.png" alt="Cuketové pyré" width="1020" height="700" />

    <p>Tvorba obalu jablečného vína Chinaska z Minessoty.</p>

  </div>

  <div class="ukazka-3">

    <img src="obrazky/mockup2.png" alt="Cuketové pyré" width="1020" height="698" />

    <p>Toto logo bylo vytvořeno pro společnost Ping, svými službami srovnatelnou např. se Skypem.</p>

  </div>

</div>



 <footer>

      <div class="zapati-1">

        <h2>Kontakt</h2><br>

        <ul class="cf">

          <li>Filip Janeček</li>

          <li><a href="https://www.google.cz/maps/place/Na+Svahu+1103,+293+06+Kosmonosy/@50.4435741,14.9179623,17z/data=!3m1!4b1!4m5!3m4!1s0x4709544129ed24c7:0x8f9764d49c6ff7fb!8m2!3d50.4435707!4d14.920151?hl=cs&authuser=0"><span class="info"> Adresa: </span>Kosmonosy Na Svahu 1103</a></li>

          <li><a href="https://www.facebook.com/maran.atha.92123?lst=100028119321828%3A100028119321828%3A1539100304"><span class="info">Facebook</span> Maran Atha</a></li>

          <li><a href="#28"></a><span class="info">Tel. číslo:</span> 702 885 801</li>

          <li><a href="#29"><span class="info">E-mail:</span> filip.janecek28@gmail.com</a></li>

        </ul>

      </div><!-- .zapati-1 -->



      <div class="zapati-2">

        <h2>Kde m<span>ě</span> sehnat</h2> <br>

        <ul>

          <li><a href="https://webtrh.cz/members/163351-Filip-Jane%C4%8Dek">Webtrh.cz</a></li>

          <li><a href="https://www.stovkomat.cz/uzivatel/Maran%20Atha">Stovkomat.cz</a></li>

          <li><a href="https://www.shutterstock.com/g/Maran-Atha?sort_method=popular">Shutterstock.com</a></li>

        </ul>

      </div><!-- .zapati-2 -->

      

      <p>Copyright 2018 © Maran Atha</p>

  </footer selection>

  <script>

function scrollWin() {

    window.scrollTo(0,1300);

}

</script>

<script src="script.js"></script>

  

</body>

</html>

body {

font-size: 16px;

margin-top: 9.375em;



}

@media (min-width:640px) {

* {

 margin:0px;

 font-family:"bigjohn", Helvetica, Ariel, sans-serif;

 

  }

  

*::selection {

background-color: rgb(0, 0, 20);

color: fefefe;

}



@font-face {

    font-family: Alcubierre;

    src: url("fonts/Alcubierre.eot") format('embedded-opentype');

    src: url("fonts/Alcubierre.woff") format('woff');

    src: url("fonts/Alcubierre.ttf") format('truetype');

    src: url("fonts/Alcubierre.otf") format('opentype');

    src: url("fonts/Alcubierre.svg") format('svg');

        

    }

@font-face {

    font-family: bigjohn;

    src: url("fonts/bigjohn.eot") format('mbedded-opentype');

    src: url("fonts/bigjohn.woff") format('woff');

    src: url("fonts/bigjohn.ttf") format('truetype');

    src: url("fonts/bigjohn.otf") format('opentype');

    src: url("fonts/bigjohn.svg") format('svg');

    }

@font-face {    

    font-family: Le_Super_Type_SemiBold;

    src: url(Le_Super_Type_SemiBold.ttf) format('ttf');

    }

@font-face {

    font-family: centurygothic;

    src: url(centurygothic.ttf) format('ttf');

    }

@font-face {  

    font-family: Montserrat-Light;

    src: url('Montserrat.otf') format('otf');

    }   

a {

  text-decoration: none; 

  }

li {

list-style-type: none;

}

p {

font-family:"Monsterrat", Helvetica, Ariel, sans-serif;

}

  

h1, h2, h3 {

text-transform: uppercase;

text-align: center;

font-family:"Alcubierre", Helvetica, Ariel, sans-serif;

}



h1 {

font-family:'bigjohn', 'Changa', Helvetica, Ariel, sans-serif;

font-size: 4.375em;



} 



  h1 span {

    font-family:"bigjohn", 'Changa', Helvetica, Ariel, sans-serif;

    font-size: 1.23333333em;

  }

  

nav {

    float: center;

    margin-top: -8em;

    margin-left: 35em;

    column-gap: 4em;

  }

    

  nav img {

      margin-left: 4em;

      margin-top: 5em;

    }

      

    nav a {

    color: black; 

    font-size:25px;

    text-transform: uppercase;   

      -webkit-transition: color .4s ease-out;

      -moz-transition: color .4s ease-out;

      -o-transition: color .4s ease-out;

      transition: color .4s ease-out;    

    }

    

      nav a:hover {

        text-decoration: none;

        color: rgb(47, 48, 62); 

      }

    

    nav ul {

      list-style: none;

      margin: -8em;

      padding: 0; 

    }



      nav ul li {

        display: inline-block;

        *display: inline; /* pro IE7 */

        margin-right: 10em;

        word-spacing: 4em; 

      }

           

        nav ul li span {

          margin-left: 100em;       

        }

body > header {

position: sticky;

box-shadow: rgba(0, 0, 0, .25) 0 3px 22px 0;

background-image: linear-gradient(#87053e 10%);      

}



.jmeno {

  margin-top:5em;

  position: relative;

  text-align: center;

  margin-left:18.494444em;

  margin-right: 18.494444em;

  border-bottom-style: ridge;

  font-size:1.875em;

  }

  

  .jmeno::selection {

background-color: rgba(0, 0, 0, .25);

color: #fefefe;

}

.promo-tlacitko { 

  z-index: 5;

  padding-bottom: 0.5em;

  box-shadow: rgba(0, 0, 0, 0.25) 0 0.0416666em 0.3055em 0;

  background-image:rgb(0, 0, 20);

    display: inline-block;

    width: 15.166666em;

    padding: 1.30666em 0;

    border: 0.5em solid rgb(47, 48, 62);

    background-color: rgb(0, 0, 20);

    box-shadow: rgba(0, 0, 0, .25) 0 0.35em 0.1em 0;

    font-size: 1.25em;

    color: #fefefe;

    transition: transform. 5s ease-out; 

    text-align: center;

    text-transform: uppercase;

        margin-left: 25.75em;

        margin-top: 7.5em;

        margin-bottom: 10em;

        font-family:"Le_Super_Type_SemiBold", Helvetica, Ariel, sans-serif;

        font-family:"Alcubierre", Helvetica, Ariel, sans-serif;

        



}

  .promo-tlacitko:hover {

   background-color: rgb(47, 48, 62);

   border: 0.5em solid rgb(0, 0, 20);

  }

  

.uvodnik {

   margin-right:10em;

   margin-left:10em;

   margin-top: 7.5em;

   margin-bottom:4.5em;

   display: inline-block;

   column-count: 3;

   column-rule: 3px solid rgb(47, 48, 62);

   column-gap: 2em;

   text-align: center;   

  }

  

.uvodnik p {

font-family:"Montserrat", 'Changa', Helvetica, Ariel, sans-serif;



}

  

  .uvodnik h5 {

  margin-top: 0px;

  font-family:"bigjohn", 'Changa', Helvetica, Ariel, sans-serif;

font-size: 1.3em;



} 



  .uvodnik h5 span {

    font-family:"bigjohn", 'Changa', Helvetica, Ariel, sans-serif;

    font-size:1.2em;

    text-transform: uppercase;

    margin-top: 0px;

      }  

    .uvodnik-1 {

    text-align: right;

    margin-top:8px;

    }   

      .uvodnik-1 span {

    line-height: 0.4em;

      } 

      

      .uvodnik-1 p {

        margin-top: -1.5em;

      } 

    .uvodnik-3 {

    text-align: left;

    margin-top:2em;

    margin-bottom: 3em;

    }                 

  

.rectangle {

position: absolute;

  z-index:-1;

  

}

  

.uvodnik, h5 {

    margin-top: 0px;

}



.ukazky-prace {

z-index: 3;

  



}



.ukazky-prace p {

  margin-left: 54em;

  margin-top: -17em;

  font-family:"Montserrat", Helvetica, Ariel, sans-serif;

        font-size: 1.25em;

        color: #7b6047;

        text-transform: uppercase;

        float: right;

        z-index: 5;

        color: white;

}

  .ukazka-1 {

      

  }

  

  .ukazka-2 {

  margin-left: 21em;

  

  

  }

    .ukazka-2 p {

      position: absolute;

  margin-left: -17em;

  width: 14em;

  text-align: right;



  

  }

  

  .ukazka-3 {

  margin-top: -0.1em;

  

  }

  

  .ukazka-3 p {

  margin-right: 3em;

  

  }

  

  

footer {

 overflow: hidden;

  background-color: rgb(0, 0, 20);

  padding-bottom: 9em;

  color: rgb(94, 109, 120);

  list-style: none;

  text-transform: uppercase;

  margin-top: -5em;  

  padding-top: 12.5em;

}



.footer, h2 {

color: fefefe;

text-align: right;



}





footer p {

    position: absolute;

    bottom: -200em;

    display: inline-block;

    margin-left: 31.25em;

    text-align: center;

    font-family: "Montserrat", Helvetica, Ariel, sans-serif;

          font-weight: 100;

}



footer span {

          font-size: 0.9em;

          color: rgb(47, 48, 62);

          font-family: "bigjohn", "Montserrat", Helvetica, Ariel, sans-serif;

          font-weight: 900;

          text-transform: uppercase;

          

        }

.zapati-1 {

  padding-left: 10em;

  float: left;

  text-align: right;

  margin-top: 3em;

   font-family: "bigjohn", "Montserrat", Helvetica, Ariel, sans-serif;

          font-weight: 700;

          text-transform: uppercase;



    

}



.zapati-2 {

  float: right;

  padding-right: 300px;

  text-align: left;

  margin-top: 3em; 



}



.zpapti-2, h2 span {

text-transform: uppercase;

font-family:"Montserrat", Helvetica, Ariel, sans-serif;

color: fefefe;

font-weight: 400;







}





.zapati-1 ul a,

      .zapati-2 ul a {

        color: rgb( 94, 109, 120);

        list-style-type: none;

        text-decoration: none; 

        }

.zapati-1 a:hover {

      text-decoration: underline;

      } 

      

.zapati-2 a:hover {

      text-decoration: underline;

      }

  }

  media(max-width:480px) {

  background-color: red;

  font-size: 40px;



  }

<!DOCTYPE html>

<html lang="cs" dir="ltr" class="no-js">

<head>

  <meta charset="utf-8" />

  <title>Maran Atha Design</title>

  <meta name="description" content="Grafický designér, webdesignér" />

  <meta name="author" content="Filip Janeček" />

  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  <!-- Odstraňte tyto odkazy, pokud umístíte stejnojmenné soubory do kořenového adresáře. -->

  <link rel="shortcut icon" href="obrazky/favicon.ico" />



  <link rel="stylesheet" href="css/normalize.css" />

  <link rel="stylesheet" href="css/styly.css" />

<link href="https://fonts.googleapis.com/css?family=Changa:800&amp;subset=latin-ext" rel="stylesheet">

<link href="https://fonts.googleapis.com/css?family=Montserrat:100,200,300,400,500,600,700,800,900" rel="stylesheet">



</head>

<body>

<header>

  <nav>

     <img src="obrazky/MARAN-ATHA-m-logo-cerne.png" alt="logo Vyhledávač receptů" class="logo" width="90" height="190">                                               

        <ul>

          <li><a onclick="scrollWin()" selection>Portfolio</a></li>           

           <span><li><a href="javascript: document.body.scrollIntoView(false);">Kontakt</a></li></span>

        </ul>

      </nav>

</header>

<div class="jmeno"><br><h3>MARAN ATHA<h3></div>

<h1>DESIGN<span>É</span>R</h1 selection>

<h1>CO SI SEDNE</h1 selection>

<a href="javascript: document.body.scrollIntoView(false);" class="promo-tlacitko">napište mi!</a>  



<div class="uvodnik">

  <div class="uvodnik-1">

  <h5>Webdesign</h5 selection><span><br><br></span>

  <p>Vytvářím webové bannery, programuji weby (nejraději malé), tvořím design pro mobilní aplikace.</p>

  </div>

  <div class="uvodnik-2"> 

  <h5>  

  Grafick<span>ý</span> Design </h5>

  <p>Magazíny, letáky, karty, plakáty, package design, logo design... To je pouze ukázka mé každodenní náplně.</p>

  </div>                                                                   

  <div class="uvodnik-3">

  <h5>

  Dal<span>ší</span></h5>   

  <p>Brand identity, motion design... To jsou termíny nad kterými se usmívám od rána do večera.</p> 

  </div>  

</div>

<div class="rectangle">

<img src="obrazky/background.png" alt="Cuketové pyré" width="1350" height="2100" />

</div>

<div class="ukazky-prace">

  <div class="ukazka-1">

    <img src="obrazky/mistero23.png" alt="Cuketové pyré" width="1020" height="700" />

    <p>Ukázka ze série plakátů pro Mistero, značku luxusních italských parfémů pro muže.</p>

  </div>

  <div class="ukazka-2">

    <img src="obrazky/wine-bottle.png" alt="Cuketové pyré" width="1020" height="700" />

    <p>Tvorba obalu jablečného vína Chinaska z Minessoty.</p>

  </div>

  <div class="ukazka-3">

    <img src="obrazky/mockup2.png" alt="Cuketové pyré" width="1020" height="698" />

    <p>Toto logo bylo vytvořeno pro společnost Ping, svými službami srovnatelnou např. se Skypem.</p>

  </div>

</div>



 <footer>

      <div class="zapati-1">

        <h2>Kontakt</h2><br>

        <ul class="cf">

          <li>Filip Janeček</li>

          <li><a href="https://www.google.cz/maps/place/Na+Svahu+1103,+293+06+Kosmonosy/@50.4435741,14.9179623,17z/data=!3m1!4b1!4m5!3m4!1s0x4709544129ed24c7:0x8f9764d49c6ff7fb!8m2!3d50.4435707!4d14.920151?hl=cs&authuser=0"><span class="info"> Adresa: </span>Kosmonosy Na Svahu 1103</a></li>

          <li><a href="https://www.facebook.com/maran.atha.92123?lst=100028119321828%3A100028119321828%3A1539100304"><span class="info">Facebook</span> Maran Atha</a></li>

          <li><a href="#28"></a><span class="info">Tel. číslo:</span> 702 885 801</li>

          <li><a href="#29"><span class="info">E-mail:</span> filip.janecek28@gmail.com</a></li>

        </ul>

      </div><!-- .zapati-1 -->



      <div class="zapati-2">

        <h2>Kde m<span>ě</span> sehnat</h2> <br>

        <ul>

          <li><a href="https://webtrh.cz/members/163351-Filip-Jane%C4%8Dek">Webtrh.cz</a></li>

          <li><a href="https://www.stovkomat.cz/uzivatel/Maran%20Atha">Stovkomat.cz</a></li>

          <li><a href="https://www.shutterstock.com/g/Maran-Atha?sort_method=popular">Shutterstock.com</a></li>

        </ul>

      </div><!-- .zapati-2 -->

      

      <p>Copyright 2018 © Maran Atha</p>

  </footer selection>

  <script>

function scrollWin() {

    window.scrollTo(0,1300);

}

</script>

<script src="script.js"></script>

  

</body>

</html>

@font-face {

    font-family: "Alcubierre";

    src: url("./fonts/Alcubierre.eot") format('embedded-opentype'),

        url("./fonts/Alcubierre.woff") format('woff'),

        url("./fonts/Alcubierre.ttf") format('truetype'),

        url("./fonts/Alcubierre.otf") format('opentype'),

        url("./fonts/Alcubierre.svg") format('svg');

    font-weight: normal;

    font-style: normal;        

    }

@font-face {

    font-family: "BigJohn";

    src: url("./fonts/bigjohn.eot") format('embedded-opentype'),

        url("./fonts/bigjohn.woff") format('woff'),

        url("./fonts/bigjohn.ttf") format('truetype'),

        url("./fonts/bigjohn.otf") format('opentype'),

        url("./fonts/bigjohn.svg") format('svg');

        font-weight: normal;

    font-style: normal;        

    }

@font-face {

    font-family: centurygothic;

    src: url(centurygothic.ttf) format('ttf');

    }

@font-face {  

    font-family: Montserrat-Light;

    src: url('Montserrat.otf') format('otf');

    }   

body {

font-size: 16px;

margin-top: 9.375em;



}

@media (min-width:640px) {

* {

 margin:0px;

 font-family:"bigjohn", Helvetica, Ariel, sans-serif;

 

  }

  

*::selection {

background-color: rgb(0, 0, 20);

color: fefefe;

}



a {

  text-decoration: none; 

  }

li {

list-style-type: none;

}

p {

font-family:"Monsterrat", Helvetica, Ariel, sans-serif;

}

  

h1, h2, h3 {

text-transform: uppercase;

text-align: center;

font-family:"Alcubierre", Helvetica, Ariel, sans-serif;

}



h1 {

font-family:'bigjohn', 'Changa', Helvetica, Ariel, sans-serif;

font-size: 4.375em;



} 



  h1 span {

    font-family:"bigjohn", 'Changa', Helvetica, Ariel, sans-serif;

    font-size: 1.23333333em;

  }

  

nav {

    float: center;

    margin-top: -8em;

    margin-left: 35em;

    column-gap: 4em;

  }

    

  nav img {

      margin-left: 4em;

      margin-top: 5em;

    }

      

    nav a {

    color: black; 

    font-size:25px;

    text-transform: uppercase;   

      -webkit-transition: color .4s ease-out;

      -moz-transition: color .4s ease-out;

      -o-transition: color .4s ease-out;

      transition: color .4s ease-out;    

    }

    

      nav a:hover {

        text-decoration: none;

        color: rgb(47, 48, 62); 

      }

    

    nav ul {

      list-style: none;

      margin: -8em;

      padding: 0; 

    }



      nav ul li {

        display: inline-block;

        *display: inline; /* pro IE7 */

        margin-right: 10em;

        word-spacing: 4em; 

      }

           

        nav ul li span {

          margin-left: 100em;       

        }

body > header {

position: sticky;

box-shadow: rgba(0, 0, 0, .25) 0 3px 22px 0;

background-image: linear-gradient(#87053e 10%);      

}



.jmeno {

  margin-top:5em;

  position: relative;

  text-align: center;

  margin-left:18.494444em;

  margin-right: 18.494444em;

  border-bottom-style: ridge;

  font-size:1.875em;

  }

  

  .jmeno::selection {

background-color: rgba(0, 0, 0, .25);

color: #fefefe;

}

.promo-tlacitko { 

  z-index: 5;

  padding-bottom: 0.5em;

  box-shadow: rgba(0, 0, 0, 0.25) 0 0.0416666em 0.3055em 0;

  background-image:rgb(0, 0, 20);

    display: inline-block;

    width: 15.166666em;

    padding: 1.30666em 0;

    border: 0.5em solid rgb(47, 48, 62);

    background-color: rgb(0, 0, 20);

    box-shadow: rgba(0, 0, 0, .25) 0 0.35em 0.1em 0;

    font-size: 1.25em;

    color: #fefefe;

    transition: transform. 5s ease-out; 

    text-align: center;

    text-transform: uppercase;

        margin-left: 25.75em;

        margin-top: 7.5em;

        margin-bottom: 10em;

        font-family:"Le_Super_Type_SemiBold", Helvetica, Ariel, sans-serif;

        font-family:"Alcubierre", Helvetica, Ariel, sans-serif;

        



}

  .promo-tlacitko:hover {

   background-color: rgb(47, 48, 62);

   border: 0.5em solid rgb(0, 0, 20);

  }

  

.uvodnik {

   margin-right:10em;

   margin-left:10em;

   margin-top: 7.5em;

   margin-bottom:4.5em;

   display: inline-block;

   column-count: 3;

   column-rule: 3px solid rgb(47, 48, 62);

   column-gap: 2em;

   text-align: center;   

  }

  

.uvodnik p {

font-family:"Montserrat", 'Changa', Helvetica, Ariel, sans-serif;



}

  

  .uvodnik h5 {

  margin-top: 0px;

  font-family:"bigjohn", 'Changa', Helvetica, Ariel, sans-serif;

font-size: 1.3em;



} 



  .uvodnik h5 span {

    font-family:"bigjohn", 'Changa', Helvetica, Ariel, sans-serif;

    font-size:1.2em;

    text-transform: uppercase;

    margin-top: 0px;

      }  

    .uvodnik-1 {

    text-align: right;

    margin-top:8px;

    }   

      .uvodnik-1 span {

    line-height: 0.4em;

      } 

      

      .uvodnik-1 p {

        margin-top: -1.5em;

      } 

    .uvodnik-3 {

    text-align: left;

    margin-top:2em;

    margin-bottom: 3em;

    }                 

  

.rectangle {

position: absolute;

  z-index:-1;

  

}

  

.uvodnik, h5 {

    margin-top: 0px;

}



.ukazky-prace {

z-index: 3;

  



}



.ukazky-prace p {

  margin-left: 54em;

  margin-top: -17em;

  font-family:"Montserrat", Helvetica, Ariel, sans-serif;

        font-size: 1.25em;

        color: #7b6047;

        text-transform: uppercase;

        float: right;

        z-index: 5;

        color: white;

}

  .ukazka-1 {

      

  }

  

  .ukazka-2 {

  margin-left: 21em;

  

  

  }

    .ukazka-2 p {

      position: absolute;

  margin-left: -17em;

  width: 14em;

  text-align: right;



  

  }

  

  .ukazka-3 { 

  margin-top: -0.1em;  

  

  }

  

  .ukazka-3 p {

  margin-right: 3em;

  

  }

  

  

footer {

 overflow: hidden;

  background-color: rgb(0, 0, 20);

  padding-bottom: 9em;

  color: rgb(94, 109, 120);

  list-style: none;

  text-transform: uppercase;

  margin-top: -5em;  

  padding-top: 12.5em;

}



.footer, h2 {

color: fefefe;

text-align: right;



}





footer p {

    position: absolute;

    bottom: -200em;

    display: inline-block;

    margin-left: 31.25em;

    text-align: center;

    font-family: "Montserrat", Helvetica, Ariel, sans-serif;

          font-weight: 100;

}



footer span {

          font-size: 0.9em;

          color: rgb(47, 48, 62);

          font-family: "bigjohn", "Montserrat", Helvetica, Ariel, sans-serif;

          font-weight: 900;

          text-transform: uppercase;

          

        }

.zapati-1 {

  padding-left: 10em;

  float: left;

  text-align: right;

  margin-top: 3em;

   font-family: "bigjohn", "Montserrat", Helvetica, Ariel, sans-serif;

          font-weight: 700;

          text-transform: uppercase;



    

}



.zapati-2 {

  float: right;

  padding-right: 300px;

  text-align: left;

  margin-top: 3em; 



}



.zpapti-2, h2 span {

text-transform: uppercase;

font-family:"Montserrat", Helvetica, Ariel, sans-serif;

color: fefefe;

font-weight: 400;







}





.zapati-1 ul a,

      .zapati-2 ul a {

        color: rgb( 94, 109, 120);

        list-style-type: none;

        text-decoration: none; 

        }

.zapati-1 a:hover {

      text-decoration: underline;

      } 

      

.zapati-2 a:hover {

      text-decoration: underline;

      }

  }

  media(max-width:480px) {

  background-color: red;

  font-size: 40px;



  }

<!DOCTYPE html>

<html lang="cs" dir="ltr" class="no-js">

<head>

  <meta charset="utf-8" />

  <title>Maran Atha Design</title>

  <meta name="description" content="Grafický designér, webdesignér" />

  <meta name="author" content="Filip Janeček" />

  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  <!-- Odstraňte tyto odkazy, pokud umístíte stejnojmenné soubory do kořenového adresáře. -->

  <link rel="shortcut icon" href="obrazky/favicon.ico" />



  <link rel="stylesheet" href="css/normalize.css" />

  <link rel="stylesheet" href="css/styly.css" />

<link href="https://fonts.googleapis.com/css?family=Changa:800&amp;subset=latin-ext" rel="stylesheet">

<link href="https://fonts.googleapis.com/css?family=Montserrat:100,200,300,400,500,600,700,800,900" rel="stylesheet">



</head>

<body>

<header>

  <nav>

     <img src="obrazky/MARAN-ATHA-m-logo-cerne.png" alt="logo Vyhledávač receptů" class="logo" width="90" height="190">                                               

        <ul>

          <li><a onclick="scrollWin()" selection>Portfolio</a></li>           

           <span><li><a href="javascript: document.body.scrollIntoView(false);">Kontakt</a></li></span>

        </ul>

      </nav>

</header>

<div class="jmeno"><br><h3>MARAN ATHA<h3></div>

<h1>DESIGN<span>É</span>R</h1 selection>

<h1>CO SI SEDNE</h1 selection>

<a href="javascript: document.body.scrollIntoView(false);" class="promo-tlacitko">napište mi!</a>  



<div class="uvodnik">

  <div class="uvodnik-1">

  <h5>Webdesign</h5 selection><span><br><br></span>

  <p>Vytvářím webové bannery, programuji weby (nejraději malé), tvořím design pro mobilní aplikace.</p>

  </div>

  <div class="uvodnik-2"> 

  <h5>  

  Grafick<span>ý</span> Design </h5>

  <p>Magazíny, letáky, karty, plakáty, package design, logo design... To je pouze ukázka mé každodenní náplně.</p>

  </div>                                                                   

  <div class="uvodnik-3">

  <h5>

  Dal<span>ší</span></h5>   

  <p>Brand identity, motion design... To jsou termíny nad kterými se usmívám od rána do večera.</p> 

  </div>  

</div>

<div class="rectangle">

<img src="obrazky/background.png" alt="Cuketové pyré" width="1350" height="2100" />

</div>

<div class="ukazky-prace">

  <div class="ukazka-1">

    <img src="obrazky/mistero23.png" alt="Cuketové pyré" width="1020" height="700" />

    <p>Ukázka ze série plakátů pro Mistero, značku luxusních italských parfémů pro muže.</p>

  </div>

  <div class="ukazka-2">

    <img src="obrazky/wine-bottle.png" alt="Cuketové pyré" width="1020" height="700" />

    <p>Tvorba obalu jablečného vína Chinaska z Minessoty.</p>

  </div>

  <div class="ukazka-3">

    <img src="obrazky/mockup2.png" alt="Cuketové pyré" width="1020" height="698" />

    <p>Toto logo bylo vytvořeno pro společnost Ping, svými službami srovnatelnou např. se Skypem.</p>

  </div>

</div>



 <footer>

      <div class="zapati-1">

        <h2>Kontakt</h2><br>

        <ul class="cf">

          <li>Filip Janeček</li>

          <li><a href="https://www.google.cz/maps/place/Na+Svahu+1103,+293+06+Kosmonosy/@50.4435741,14.9179623,17z/data=!3m1!4b1!4m5!3m4!1s0x4709544129ed24c7:0x8f9764d49c6ff7fb!8m2!3d50.4435707!4d14.920151?hl=cs&authuser=0"><span class="info"> Adresa: </span>Kosmonosy Na Svahu 1103</a></li>

          <li><a href="https://www.facebook.com/maran.atha.92123?lst=100028119321828%3A100028119321828%3A1539100304"><span class="info">Facebook</span> Maran Atha</a></li>

          <li><a href="#28"></a><span class="info">Tel. číslo:</span> 702 885 801</li>

          <li><a href="#29"><span class="info">E-mail:</span> filip.janecek28@gmail.com</a></li>

        </ul>

      </div><!-- .zapati-1 -->



      <div class="zapati-2">

        <h2>Kde m<span>ě</span> sehnat</h2> <br>

        <ul>

          <li><a href="https://webtrh.cz/members/163351-Filip-Jane%C4%8Dek">Webtrh.cz</a></li>

          <li><a href="https://www.stovkomat.cz/uzivatel/Maran%20Atha">Stovkomat.cz</a></li>

          <li><a href="https://www.shutterstock.com/g/Maran-Atha?sort_method=popular">Shutterstock.com</a></li>

        </ul>

      </div><!-- .zapati-2 -->

      

      <p>Copyright 2018 © Maran Atha</p>

  </footer selection>

  <script>

function scrollWin() {

    window.scrollTo(0,1300);

}

</script>

<script src="script.js"></script>

  

</body>

</html>

@font-face {

    font-family: "Alcubierre";

    src: url("./fonts/Alcubierre.eot") format('embedded-opentype'),

        url("./fonts/Alcubierre.woff") format('woff'),

        url("./fonts/Alcubierre.ttf") format('truetype'),

        url("./fonts/Alcubierre.otf") format('opentype'),

        url("./fonts/Alcubierre.svg") format('svg');

    font-weight: normal;

    font-style: normal;        

    }

@font-face {

    font-family: "BigJohn";

    src: url("./fonts/bigjohn.eot") format('embedded-opentype'),

        url("./fonts/bigjohn.woff") format('woff'),

        url("./fonts/bigjohn.ttf") format('truetype'),

        url("./fonts/bigjohn.otf") format('opentype'),

        url("./fonts/bigjohn.svg") format('svg');

        font-weight: normal;

    font-style: normal;        

    }

@font-face {

    font-family: centurygothic;

    src: url(centurygothic.ttf) format('ttf');

    }

@font-face {  

    font-family: Montserrat-Light;

    src: url('Montserrat.otf') format('otf');

    }   

body {

font-size: 16px;

margin-top: 9.375em;



}

@media (min-width:640px) {

* {

 margin:0px;

 font-family:"bigjohn", Helvetica, Ariel, sans-serif;

 

  }

  

*::selection {

background-color: rgb(0, 0, 20);

color: fefefe;

}



a {

  text-decoration: none; 

  }

li {

list-style-type: none;

}

p {

font-family:"Monsterrat", Helvetica, Ariel, sans-serif;

}

  

h1, h2, h3 {

text-transform: uppercase;

text-align: center;

font-family:"Alcubierre", Helvetica, Ariel, sans-serif;

}



h1 {

font-family:'bigjohn', 'Changa', Helvetica, Ariel, sans-serif;

font-size: 4.375em;



} 



  h1 span {

    font-family:"bigjohn", 'Changa', Helvetica, Ariel, sans-serif;

    font-size: 1.23333333em;

  }

  

nav {

    float: center;

    margin-top: -8em;

    margin-left: 35em;

    column-gap: 4em;

  }

    

  nav img {

      margin-left: 4em;

      margin-top: 5em;

    }

      

    nav a {

    color: black; 

    font-size:25px;

    text-transform: uppercase;   

      -webkit-transition: color .4s ease-out;

      -moz-transition: color .4s ease-out;

      -o-transition: color .4s ease-out;

      transition: color .4s ease-out;    

    }

    

      nav a:hover {

        text-decoration: none;

        color: rgb(47, 48, 62); 

      }

    

    nav ul {

      list-style: none;

      margin: -8em;

      padding: 0; 

    }



      nav ul li {

        display: inline-block;

        *display: inline; /* pro IE7 */

        margin-right: 10em;

        word-spacing: 4em; 

      }

           

        nav ul li span {

          margin-left: 100em;       

        }

body > header {

position: sticky;

box-shadow: rgba(0, 0, 0, .25) 0 3px 22px 0;

background-image: linear-gradient(#87053e 10%);      

}



.jmeno {

  margin-top:5em;

  position: relative;

  text-align: center;

  margin-left:18.494444em;

  margin-right: 18.494444em;

  border-bottom-style: ridge;

  font-size:1.875em;

  }

  

  .jmeno::selection {

background-color: rgba(0, 0, 0, .25);

color: #fefefe;

}

.promo-tlacitko { 

  z-index: 5;

  padding-bottom: 0.5em;

  box-shadow: rgba(0, 0, 0, 0.25) 0 0.0416666em 0.3055em 0;

  background-image:rgb(0, 0, 20);

    display: inline-block;

    width: 15.166666em;

    padding: 1.30666em 0;

    border: 0.5em solid rgb(47, 48, 62);

    background-color: rgb(0, 0, 20);

    box-shadow: rgba(0, 0, 0, .25) 0 0.35em 0.1em 0;

    font-size: 1.25em;

    color: #fefefe;

    transition: transform. 5s ease-out; 

    text-align: center;

    text-transform: uppercase;

        margin-left: 25.75em;

        margin-top: 7.5em;

        margin-bottom: 10em;

        font-family:"Le_Super_Type_SemiBold", Helvetica, Ariel, sans-serif;

        font-family:"Alcubierre", Helvetica, Ariel, sans-serif;

        



}

  .promo-tlacitko:hover {

   background-color: rgb(47, 48, 62);

   border: 0.5em solid rgb(0, 0, 20);

  }

  

.uvodnik {

   margin-right:10em;

   margin-left:10em;

   margin-top: 7.5em;

   margin-bottom:4.5em;

   display: inline-block;

   column-count: 3;

   column-rule: 3px solid rgb(47, 48, 62);

   column-gap: 2em;

   text-align: center;   

  }

  

.uvodnik p {

font-family:"Montserrat", 'Changa', Helvetica, Ariel, sans-serif;



}

  

  .uvodnik h5 {

  margin-top: 0px;

  font-family:"bigjohn", 'Changa', Helvetica, Ariel, sans-serif;

font-size: 1.3em;



} 



  .uvodnik h5 span {

    font-family:"bigjohn", 'Changa', Helvetica, Ariel, sans-serif;

    font-size:1.2em;

    text-transform: uppercase;

    margin-top: 0px;

      }  

    .uvodnik-1 {

    text-align: right;

    margin-top:8px;

    }   

      .uvodnik-1 span {

    line-height: 0.4em;

      } 

      

      .uvodnik-1 p {

        margin-top: -1.5em;

      } 

    .uvodnik-3 {

    text-align: left;

    margin-top:2em;

    margin-bottom: 3em;

    }                 

  

.rectangle {

position: absolute;

  z-index:-1;

  

}

  

.uvodnik, h5 {

    margin-top: 0px;

}



.ukazky-prace {

z-index: 3;

  



}



.ukazky-prace p {

  margin-left: 54em;

  margin-top: -17em;

  font-family:"Montserrat", Helvetica, Ariel, sans-serif;

        font-size: 1.25em;

        color: #7b6047;

        text-transform: uppercase;

        float: right;

        z-index: 5;

        color: white;

}

  .ukazka-1 {

      

  }

  

  .ukazka-2 {

  margin-left: 21em;

  

  

  }

    .ukazka-2 p {

      position: absolute;

  margin-left: -17em;

  width: 14em;

  text-align: right;



  

  }

  

  .ukazka-3 { 

  margin-top: -0.1em;  

  

  }

  

  .ukazka-3 p {

  margin-right: 3em;

  

  }

  

  

footer {

 overflow: hidden;

  background-color: rgb(0, 0, 20);

  padding-bottom: 9em;

  color: rgb(94, 109, 120);

  list-style: none;

  text-transform: uppercase;

  margin-top: -5em;  

  padding-top: 12.5em;

}



.footer, h2 {

color: fefefe;

text-align: right;



}





footer p {

    position: absolute;

    bottom: -200em;

    display: inline-block;

    margin-left: 31.25em;

    text-align: center;

    font-family: "Montserrat", Helvetica, Ariel, sans-serif;

          font-weight: 100;

}



footer span {

          font-size: 0.9em;

          color: rgb(47, 48, 62);

          font-family: "bigjohn", "Montserrat", Helvetica, Ariel, sans-serif;

          font-weight: 900;

          text-transform: uppercase;

          

        }

.zapati-1 {

  padding-left: 10em;

  float: left;

  text-align: right;

  margin-top: 3em;

   font-family: "bigjohn", "Montserrat", Helvetica, Ariel, sans-serif;

          font-weight: 700;

          text-transform: uppercase;



    

}



.zapati-2 {

  float: right;

  padding-right: 300px;

  text-align: left;

  margin-top: 3em; 



}



.zpapti-2, h2 span {

text-transform: uppercase;

font-family:"Montserrat", Helvetica, Ariel, sans-serif;

color: fefefe;

font-weight: 400;







}





.zapati-1 ul a,

      .zapati-2 ul a {

        color: rgb( 94, 109, 120);

        list-style-type: none;

        text-decoration: none; 

        }

.zapati-1 a:hover {

      text-decoration: underline;

      } 

      

.zapati-2 a:hover {

      text-decoration: underline;

      }

  }

  media(max-width:480px) {

  background-color: red;

  font-size: 40px;



  }

<!DOCTYPE html>

<html lang="cs" dir="ltr" class="no-js">

<head>

  <meta charset="utf-8" />

  <title>Maran Atha Design</title>

  <meta name="description" content="Grafický designér, webdesignér" />

  <meta name="author" content="Filip Janeček" />

  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  <!-- Odstraňte tyto odkazy, pokud umístíte stejnojmenné soubory do kořenového adresáře. -->

  <link rel="shortcut icon" href="obrazky/favicon.ico" />



  <link rel="stylesheet" href="css/normalize.css" />

  <link rel="stylesheet" href="css/styly.css" />

<link href="https://fonts.googleapis.com/css?family=Changa:800&amp;subset=latin-ext" rel="stylesheet">

<link href="https://fonts.googleapis.com/css?family=Montserrat:100,200,300,400,500,600,700,800,900" rel="stylesheet">



</head>

<body>

<header>

  <nav>

     <img src="obrazky/MARAN-ATHA-m-logo-cerne.png" alt="logo Vyhledávač receptů" class="logo" width="90" height="190">                                               

        <ul>

          <li><a onclick="scrollWin()" selection>Portfolio</a></li>           

           <span><li><a href="javascript: document.body.scrollIntoView(false);">Kontakt</a></li></span>

        </ul>

      </nav>

</header>

<div class="jmeno"><br><h3>MARAN ATHA<h3></div>

<h1>DESIGN<span>É</span>R</h1 selection>

<h1>CO SI SEDNE</h1 selection>

<a href="javascript: document.body.scrollIntoView(false);" class="promo-tlacitko">napište mi!</a>  



<div class="uvodnik">

  <div class="uvodnik-1">

  <h5>Webdesign</h5 selection><span><br><br></span>

  <p>Vytvářím webové bannery, programuji weby (nejraději malé), tvořím design pro mobilní aplikace.</p>

  </div>

  <div class="uvodnik-2"> 

  <h5>  

  Grafick<span>ý</span> Design </h5>

  <p>Magazíny, letáky, karty, plakáty, package design, logo design... To je pouze ukázka mé každodenní náplně.</p>

  </div>                                                                   

  <div class="uvodnik-3">

  <h5>

  Dal<span>ší</span></h5>   

  <p>Brand identity, motion design... To jsou termíny nad kterými se usmívám od rána do večera.</p> 

  </div>  

</div>

<div class="rectangle">

<img src="obrazky/background.png" alt="Cuketové pyré" width="1350" height="2100" />

</div>

<div class="ukazky-prace">

  <div class="ukazka-1">

    <img src="obrazky/mistero23.png" alt="Cuketové pyré" width="1020" height="700" />

    <p>Ukázka ze série plakátů pro Mistero, značku luxusních italských parfémů pro muže.</p>

  </div>

  <div class="ukazka-2">

    <img src="obrazky/wine-bottle.png" alt="Cuketové pyré" width="1020" height="700" />

    <p>Tvorba obalu jablečného vína Chinaska z Minessoty.</p>

  </div>

  <div class="ukazka-3">

    <img src="obrazky/mockup2.png" alt="Cuketové pyré" width="1020" height="698" />

    <p>Toto logo bylo vytvořeno pro společnost Ping, svými službami srovnatelnou např. se Skypem.</p>

  </div>

</div>



 <footer>

      <div class="zapati-1">

        <h2>Kontakt</h2><br>

        <ul class="cf">

          <li>Filip Janeček</li>

          <li><a href="https://www.google.cz/maps/place/Na+Svahu+1103,+293+06+Kosmonosy/@50.4435741,14.9179623,17z/data=!3m1!4b1!4m5!3m4!1s0x4709544129ed24c7:0x8f9764d49c6ff7fb!8m2!3d50.4435707!4d14.920151?hl=cs&authuser=0"><span class="info"> Adresa: </span>Kosmonosy Na Svahu 1103</a></li>

          <li><a href="https://www.facebook.com/maran.atha.92123?lst=100028119321828%3A100028119321828%3A1539100304"><span class="info">Facebook</span> Maran Atha</a></li>

          <li><a href="#28"></a><span class="info">Tel. číslo:</span> 702 885 801</li>

          <li><a href="#29"><span class="info">E-mail:</span> filip.janecek28@gmail.com</a></li>

        </ul>

      </div><!-- .zapati-1 -->



      <div class="zapati-2">

        <h2>Kde m<span>ě</span> sehnat</h2> <br>

        <ul>

          <li><a href="https://webtrh.cz/members/163351-Filip-Jane%C4%8Dek">Webtrh.cz</a></li>

          <li><a href="https://www.stovkomat.cz/uzivatel/Maran%20Atha">Stovkomat.cz</a></li>

          <li><a href="https://www.shutterstock.com/g/Maran-Atha?sort_method=popular">Shutterstock.com</a></li>

        </ul>

      </div><!-- .zapati-2 -->

      

      <p>Copyright 2018 © Maran Atha</p>

  </footer selection>

  <script>

function scrollWin() {

    window.scrollTo(0,1300);

}

</script>

<script src="script.js"></script>

  

</body>

</html>

html css browser font-face

asked Nov 17 '18 at 11:09

Maran_Atha

asked Nov 17 '18 at 11:09

Maran_Atha

asked Nov 17 '18 at 11:09

Maran_Atha

asked Nov 17 '18 at 11:09

Maran_Atha

asked Nov 17 '18 at 11:09

Maran_Atha

add a comment |

0

active

oldest

votes

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53350624%2ffonts-are-disappearing-and-behaving-in-a-really-strange-way-css3-font-face%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

0

active

oldest

votes

0

active

oldest

votes

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Agfdhyk