HTML, CSS optimalization
This commit is contained in:
Marcel Petráň
parent
3a5eadb765
commit
461b19d210
13 changed files with 107 additions and 4132 deletions
|
|
@ -1,4 +1,4 @@
|
|||
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600,700');
|
||||
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600,700');
|
||||
body, html {
|
||||
font-family: 'Open Sans', sans-serif !important;
|
||||
color: #4A4A4A !important;
|
||||
|
|
@ -8,8 +8,8 @@ body a, html a {
|
|||
margin: 0;
|
||||
text-decoration: none;
|
||||
}
|
||||
section.gallery-in, section.home{
|
||||
background: #EEEEEE;
|
||||
section.gallery-in, div.home{
|
||||
background-color: #EEEEEE;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding: 3em 5em;
|
||||
|
|
@ -22,17 +22,20 @@ section.team, section.contact-us, section.about{
|
|||
h1.title{
|
||||
font-weight: 700;
|
||||
font-size: 5em;
|
||||
margin-bottom: .4rem
|
||||
margin-bottom: .4rem;
|
||||
}
|
||||
h1.nav{
|
||||
h2.nav, h1.nav{
|
||||
text-align: left;
|
||||
padding-top: .25em;
|
||||
margin-bottom: .4rem;
|
||||
font-size: 4em;
|
||||
font-weight: 600;
|
||||
}
|
||||
h2.title{
|
||||
font-size: 3.5em;
|
||||
font-weight: 400;
|
||||
font-weight: 700;
|
||||
font-size: 5em;
|
||||
margin-bottom: .4rem;
|
||||
text-align: center;
|
||||
}
|
||||
h3.title{
|
||||
font-size: 3em;
|
||||
|
|
@ -42,8 +45,8 @@ p.article{
|
|||
padding-top: .3em;
|
||||
font-size: 2.5em;
|
||||
}
|
||||
section.home {
|
||||
min-height: calc(100vh); /* Bude problem v safari, kde to musim odjebat od nav baru */
|
||||
.home {
|
||||
min-height: calc(100vh - 14.3em); /* Bude problem v safari, kde to musim odjebat od nav baru */
|
||||
background-image: url('../img/logo.png');
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
|
|
@ -52,9 +55,10 @@ section.home {
|
|||
img.arrow-down{
|
||||
width: 3.5em;
|
||||
position: absolute;
|
||||
top: calc(100vh - 5em); /* Bude problem v safari, kde to musim odjebat od nav baru */
|
||||
top: calc(100vh - 18em); /* Bude problem v safari, kde to musim odjebat od nav baru */
|
||||
left: calc(50% - 1.75em);
|
||||
animation: arrow 3s infinite;
|
||||
-webkit-animation: arrow 3s infinite;
|
||||
}
|
||||
section h1{
|
||||
text-align: center;
|
||||
|
|
@ -74,7 +78,7 @@ div.gallery{
|
|||
div.gallery img{
|
||||
width: 100%;
|
||||
}
|
||||
section.people{
|
||||
.people{
|
||||
padding-top: 2em;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 23.05em);
|
||||
|
|
@ -158,28 +162,34 @@ footer p.article{
|
|||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
footer h2.title{
|
||||
footer h3.title{
|
||||
font-size: 3em;
|
||||
}
|
||||
section.footer-top{
|
||||
.footer-top{
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2,auto);
|
||||
}
|
||||
footer .footer-buttons-left-row-grid{
|
||||
display: grid;
|
||||
grid-template-rows: repeat(5,auto);
|
||||
grid-row-gap: .7em;
|
||||
justify-content: left;
|
||||
}
|
||||
footer .footer-button{
|
||||
font-size: 1.8em;
|
||||
}
|
||||
footer button{
|
||||
background-color: #5D5D5D;
|
||||
color: #FCFCFC;
|
||||
font-size: 1.8em;
|
||||
text-align: center;
|
||||
width: 15em;
|
||||
height: 1.7em;
|
||||
}
|
||||
footer div.footer-top div.footer-buttons-left-row-grid a{
|
||||
text-decoration: none !important;
|
||||
}
|
||||
footer .footer-logo-right-col-grid{
|
||||
display: grid;
|
||||
grid-template-rows: repeat(2,auto);
|
||||
grid-row-gap: 1.5em;
|
||||
justify-content: center;
|
||||
}
|
||||
footer .footer-img-logo{
|
||||
|
|
@ -257,6 +267,7 @@ nav ul a{
|
|||
nav ul li {
|
||||
opacity: 0;
|
||||
animation: show-x .7s 1s forwards;
|
||||
-webkit-animation: show-x .7s 1s forwards;
|
||||
}
|
||||
nav ul a:hover{
|
||||
color:#0E404D;
|
||||
|
|
@ -298,31 +309,40 @@ div.-right{
|
|||
}
|
||||
.inactive{
|
||||
animation: r-slide-menu .3s ease-out forwards;
|
||||
-webkit-animation: r-slide-menu .3s ease-out forwards;
|
||||
}
|
||||
.active{
|
||||
display: block;
|
||||
animation: slide-menu .3s ease-in forwards;
|
||||
-webkit-animation: slide-menu .3s ease-in forwards;
|
||||
}
|
||||
.active .close-btn, .active h1.title{
|
||||
animation: show-x .3s .5s forwards;
|
||||
-webkit-animation: show-x .3s .5s forwards;
|
||||
}
|
||||
.active li:nth-of-type(1){
|
||||
animation: menu-item .25s forwards .35s ease-in-out;
|
||||
-webkit-animation: menu-item .25s forwards .35s ease-in-out;
|
||||
}
|
||||
.active li:nth-of-type(2){
|
||||
animation: menu-item .25s forwards .40s ease-in-out;
|
||||
-webkit-animation: menu-item .25s forwards .40s ease-in-out;
|
||||
}
|
||||
.active li:nth-of-type(3){
|
||||
animation: menu-item .25s forwards .45s ease-in-out;
|
||||
-webkit-animation: menu-item .25s forwards .45s ease-in-out;
|
||||
}
|
||||
.active li:nth-of-type(4){
|
||||
animation: menu-item .25s forwards .50s ease-in-out;
|
||||
-webkit-animation: menu-item .25s forwards .50s ease-in-out;
|
||||
}
|
||||
.active li:nth-of-type(5){
|
||||
animation: menu-item .25s forwards .55s ease-in-out;
|
||||
-webkit-animation: menu-item .25s forwards .55s ease-in-out;
|
||||
}
|
||||
.active li:nth-of-type(6){
|
||||
animation: menu-item .25s forwards .60s ease-in-out;
|
||||
-webkit-animation: menu-item .25s forwards .60s ease-in-out;
|
||||
}
|
||||
|
||||
/* <--- ANIMATIONS ---> */
|
||||
|
|
@ -334,6 +354,14 @@ div.-right{
|
|||
transform: scaleX(1);
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes slide-menu {
|
||||
from{
|
||||
transform: scaleX(0);
|
||||
}
|
||||
to{
|
||||
transform: scaleX(1);
|
||||
}
|
||||
}
|
||||
@keyframes r-slide-menu {
|
||||
from{
|
||||
transform: scaleX(1);
|
||||
|
|
@ -342,6 +370,14 @@ div.-right{
|
|||
transform: scaleX(0);
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes r-slide-menu {
|
||||
from{
|
||||
transform: scaleX(1);
|
||||
}
|
||||
to{
|
||||
transform: scaleX(0);
|
||||
}
|
||||
}
|
||||
@keyframes show-x {
|
||||
from {
|
||||
opacity: 0;
|
||||
|
|
@ -350,6 +386,14 @@ div.-right{
|
|||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes show-x {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to{
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@keyframes menu-item {
|
||||
from{
|
||||
transform: translateY(60%);
|
||||
|
|
@ -360,6 +404,16 @@ div.-right{
|
|||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes menu-item {
|
||||
from{
|
||||
transform: translateY(60%);
|
||||
opacity: 0;
|
||||
}
|
||||
to{
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@keyframes arrow {
|
||||
0% {opacity: .2}
|
||||
50% {opacity: .8}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue