I have a quick project that I'm building right now. That's why I would like to make my whole page scalable and not use media queries, as it would be faster and save me a lot of time. The only problem is that I'm still a beginner, and I don't really know how to make it fully scalable. Could someone help me with this? As you can see, the page is not really optimized. Thanks in advance, here is my code:
HTML
<html>
<head>
<title>Thermocase</title>
<link rel="icon" href="img/fav.png" type="image/png">
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<img src="img/iphone.png" class="bg"/>
<nav class="global-nav">
<img src="img/thermocase.png" class="logo-left"/>
<ul class="menu">
<li><a href="#">Contact us</a></li>
<li><a href="#">The Team</a></li>
<li><a href="#">Our Product</a></li>
</ul>
</nav>
</body>
</html>
CSS
@font-face {
font-family: bebas;
src: url(font/coyote.ttf);
}
@keyframes fadein {
from {
opacity:0;
}
to {
opacity:1;
}
}
@-moz-keyframes fadein { /* Firefox */
from {
opacity:0;
}
to {
opacity:1;
}
}
@-webkit-keyframes fadein { /* Safari and Chrome */
from {
opacity:0;
}
to {
opacity:1;
}
}
@-o-keyframes fadein { /* Opera */
from {
opacity:0;
}
to {
opacity: 1;
}
}
@keyframes load_up {
from {
opacity:0;top:10%
}
to {
opacity:1;top:0%;
}
}
@-webkit-keyframes load_up {
from {
opacity:0;top:10%
}
to {
opacity:1;top:0%;
}
}
@-moz-keyframes load_up{
from {
opacity:0;top:10%
}
to {
opacity:1;top:0%;
}
}
@-o-keyframes load_up{
from {
opacity:0;top:10%
}
to {
opacity:1;top:0%;
}
}
body {
background-color: white;
margin: 0;
width: 100%;
height: 100%;
}
.bg {
animation: fadein 4s;
-moz-animation: fadein 4s; /* Firefox */
-webkit-animation: fadein 4s; /* Safari and Chrome */
-o-animation: fadein 4s; /* Opera */
animation: load_up 2s forwards;
-webkit-animation: load_up 2s forwards;
-moz-animation: load_up 2s forwards;
-o-animation : load_up 2s forwards;
width: 45%;
left: 28%;
padding-top: 7%;
position: fixed;
}
.global-nav {
position: fixed;
top: 0;
z-index: 9999;
height: 15%;
width: 100%;
background: #ffff;
color: #fff;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.logo-left {
position: absolute;
top: 27%;
padding-left: 2%;
display: block;
width: 15%;
}
.menu li {
display: block;
font-family: bebas;
letter-spacing: -3px;
font-size: 20px;
float: right;
padding-right: 5%;
padding-top: 2%;
text-align: center;
}
.menu a:hover {
color:#CF2034;
transition: color .7s cubic-bezier(0.11, 0.7, 0, 1);
-o-transition: color .7s cubic-bezier(0.11, 0.7, 0, 1);
-moz-transition: color .7s cubic-bezier(0.11, 0.7, 0, 1);
-webkit-transition: color .7s cubic-bezier(0.11, 0.7, 0, 1);
transition-timing-function: ease-in-out;
}
.menu a {
text-decoration: none;
color: inherit;
color: black;
transition-timing-function: ease-in-out;
}
.menu a:after {
position: absolute;
bottom: 0;
left: 0;
display: block;
width: 100%;
height: 2px;
background-color: #CF2034;
content: "";
transform: scale(0);
-o-transition: transform 1s cubic-bezier(0.11, 0.7, 0, 1) ;
-moz-transition: transform 1s cubic-bezier(0.11, 0.7, 0, 1) ;
-webkit-transition: transform 1s cubic-bezier(0.11, 0.7, 0, 1) ;
transition: transform 1s cubic-bezier(0.11, 0.7, 0, 1) ;
transition-timing-function: ease-in-out;
}
.menu a:hover:after {
transform: scale(1);
}
Aucun commentaire:
Enregistrer un commentaire