HTML, CSS optimalization

This commit is contained in:
Marcel Petráň 2019-04-24 19:31:34 +02:00
parent 3a5eadb765
commit 461b19d210
13 changed files with 107 additions and 4132 deletions

View File

@ -3,8 +3,8 @@
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="../css/master.css">
<link rel="stylesheet" href="../css/bootstrap.min.css">
<link rel="shortcut icon" src="../favicon.ico" type="image/vnd.microsoft.icon" />
<link rel="stylesheet" href="../css/bootstrap.css">
<link rel="shortcut icon" href="../favicon.ico" type="image/vnd.microsoft.icon" />
<title>Sincoolka</title>
</head>
<body>
@ -13,10 +13,10 @@
<div class="navbar-container">
<div class="navbar-grid">
<div class="navbar-grid-col -left">
<h1 class="title nav">Sincoolka</h1>
<h1 class="nav">Sincoolka</h1>
</div>
<div class="navbar-grid-col -right">
<img src="../img/close-menu.svg" class="close-btn" id="close-menu">
<img src="../img/close-menu.svg" alt="close-menu" class="close-btn" id="close-menu">
</div>
</div>
</div>
@ -48,21 +48,21 @@
<div class="navbar-container">
<div class="navbar-grid">
<div class="navbar-grid-col -left">
<h1 class="title nav">Sincoolka</h1>
<h2 class="nav">Sincoolka</h2>
</div>
<div class="navbar-grid-col -right">
<img src="../img/nav-menu.svg" class="menu-btn" id="open-menu">
<img src="../img/nav-menu.svg" alt="open-menu" class="menu-btn" id="open-menu">
</div>
</div>
</div>
</div>
</header>
<main>
<section class="home">
<a href="#About-us"> <img src="../img/arrow-down.svg" class="arrow-down" alt="arrow down"></a>
</section>
<div class="home">
<a href="#About-us"><img src="../img/arrow-down.svg" alt="arrow down" class="arrow-down"></a>
</div>
<section class="about" id="About-us">
<h1 class="title">O nás</h1>
<h2 class="title">O nás</h2>
<article class="about-us-1">
<h3 class="title">Kdo jsme</h3>
<p class="article">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur.</p>
@ -73,14 +73,14 @@
</article>
</section>
<section class="gallery-in">
<h1 class="title">Galerie</h1>
<h2 class="title">Galerie</h2>
<div class="gallery">
<img src="../img/sunset.jpg" alt="Sunset">
</div>
</section>
<section class="team">
<h1 class="title">Tým klubu</h1>
<section class="people">
<h2 class="title">Tým klubu</h2>
<div class="people">
<section class="member">
<img src="../img/Photo.svg" alt="Photo" class="member-photo">
<h3 class="title">Kateřina Němcová</h3>
@ -101,7 +101,7 @@
<h3 class="title">Pavel Valach</h3>
<p class="article">Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur.</p>
</section>
</section>
</div>
<section class="member-last">
<img src="../img/Photo.svg" alt="Photo" class="member-photo">
<h3 class="title">Marcel Petráň</h3>
@ -109,7 +109,7 @@
</section>
</section>
<section class="contact-us">
<h1 class="title">Kontaktuj nás</h1>
<h2 class="title">Kontaktuj nás</h2>
<form class="contact-form" action="#" method="post">
<input type="text" name="e-mail" placeholder="Tvůj e-mail *">
<input type="text" name="full-name" class="name-surname" placeholder="Tvé jméno a přijmení *">
@ -119,36 +119,35 @@
</section>
</main>
<footer>
<section class="footer-top">
<div class="footer-top">
<div class="footer-buttons-left-row-grid">
<div class="footer-button">
<button type="button" name="button" href="#">Členské příspěvky</button>
</div>
<a href="#">
<div class="footer-button">Členské příspěvky</div>
</a>
<div class="footer-button">
<button type="button" name="button" href="#">Sinis</button>
</div>
<a href="#">
<div class="footer-button">Sinis</div>
</a>
<div class="footer-button">
<button type="button" name="button" href="#">Wiki</button>
</div>
<a href="#">
<div class="footer-button">Wiki</div>
</a>
<div class="footer-button">
<button type="button" name="button" href="#">Cloud</button>
</div>
<a href="#">
<div class="footer-button">Cloud</div>
</a>
</div>
<div class="footer-logo-right-col-grid">
<img src="../img/sin-logo-col.png" alt="Club" href="#" class="opacity-decrease footer-img-logo">
<a href="https://su.cvut.cz/" target="_blank"><img src="../img/su-logo-col.svg" alt="Club" href="#" class="footer-img-logo"></a>
<img src="../img/sin-logo-col.png" alt="Club" class="opacity-decrease footer-img-logo">
<a href="https://su.cvut.cz/" target="_blank"><img src="../img/su-logo-col.svg" alt="Club" class="footer-img-logo"></a>
</div>
</section>
</div>
<section class="footer-bottom">
<div class="footer-contacts-row-grid">
<div class="footer-heading-col-grid">
<div class="footer-heading-left">
<h2 class="title">Kontakty</h2>
<h3 class="title">Kontakty</h3>
</div>
<div class="footer-heading-social-col-grid -right">
<a href="https://www.facebook.com/" target="_blank"><img src="../img/facebook.png" alt="Social" class="footer-img-social"></a>
@ -174,7 +173,7 @@
</div>
</div>
<div class="footer-visit-row-grid">
<h2 class="title">Úřední hodiny</h2>
<h3 class="title">Úřední hodiny</h3>
<div class="footer-visit-col-grid">
<p class="article">Administrátoři:</p>
<p class="article">Po & St 20:00 - 21:00</p>
@ -187,9 +186,9 @@
</section>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="../js/bootstrap.bundle.js"></script>
<script type="text/javascript" src="../js/auto_height.js"></script>
<script type="text/javascript" src="../js/navbar.js"></script>
<script type="text/javascript" src="../js/smooth-scroll.js"></script>
<script src="../js/bootstrap.bundle.js"></script>
<script src="../js/auto_height.js"></script>
<script src="../js/navbar.js"></script>
<script src="../js/smooth-scroll.js"></script>
</body>
</html>

3719
css/bootstrap-grid.css vendored

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -1,331 +0,0 @@
/*!
* Bootstrap Reboot v4.3.1 (https://getbootstrap.com/)
* Copyright 2011-2019 The Bootstrap Authors
* Copyright 2011-2019 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md)
*/
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
font-family: sans-serif;
line-height: 1.15;
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {
display: block;
}
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #212529;
text-align: left;
background-color: #fff;
}
[tabindex="-1"]:focus {
outline: 0 !important;
}
hr {
box-sizing: content-box;
height: 0;
overflow: visible;
}
h1, h2, h3, h4, h5, h6 {
margin-top: 0;
margin-bottom: 0.5rem;
}
p {
margin-top: 0;
margin-bottom: 1rem;
}
abbr[title],
abbr[data-original-title] {
text-decoration: underline;
-webkit-text-decoration: underline dotted;
text-decoration: underline dotted;
cursor: help;
border-bottom: 0;
-webkit-text-decoration-skip-ink: none;
text-decoration-skip-ink: none;
}
address {
margin-bottom: 1rem;
font-style: normal;
line-height: inherit;
}
ol,
ul,
dl {
margin-top: 0;
margin-bottom: 1rem;
}
ol ol,
ul ul,
ol ul,
ul ol {
margin-bottom: 0;
}
dt {
font-weight: 700;
}
dd {
margin-bottom: .5rem;
margin-left: 0;
}
blockquote {
margin: 0 0 1rem;
}
b,
strong {
font-weight: bolder;
}
small {
font-size: 80%;
}
sub,
sup {
position: relative;
font-size: 75%;
line-height: 0;
vertical-align: baseline;
}
sub {
bottom: -.25em;
}
sup {
top: -.5em;
}
a {
color: #007bff;
text-decoration: none;
background-color: transparent;
}
a:hover {
color: #0056b3;
text-decoration: underline;
}
a:not([href]):not([tabindex]) {
color: inherit;
text-decoration: none;
}
a:not([href]):not([tabindex]):hover, a:not([href]):not([tabindex]):focus {
color: inherit;
text-decoration: none;
}
a:not([href]):not([tabindex]):focus {
outline: 0;
}
pre,
code,
kbd,
samp {
font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
font-size: 1em;
}
pre {
margin-top: 0;
margin-bottom: 1rem;
overflow: auto;
}
figure {
margin: 0 0 1rem;
}
img {
vertical-align: middle;
border-style: none;
}
svg {
overflow: hidden;
vertical-align: middle;
}
table {
border-collapse: collapse;
}
caption {
padding-top: 0.75rem;
padding-bottom: 0.75rem;
color: #6c757d;
text-align: left;
caption-side: bottom;
}
th {
text-align: inherit;
}
label {
display: inline-block;
margin-bottom: 0.5rem;
}
button {
border-radius: 0;
}
button:focus {
outline: 1px dotted;
outline: 5px auto -webkit-focus-ring-color;
}
input,
button,
select,
optgroup,
textarea {
margin: 0;
font-family: inherit;
font-size: inherit;
line-height: inherit;
}
button,
input {
overflow: visible;
}
button,
select {
text-transform: none;
}
select {
word-wrap: normal;
}
button,
[type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button;
}
button:not(:disabled),
[type="button"]:not(:disabled),
[type="reset"]:not(:disabled),
[type="submit"]:not(:disabled) {
cursor: pointer;
}
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
padding: 0;
border-style: none;
}
input[type="radio"],
input[type="checkbox"] {
box-sizing: border-box;
padding: 0;
}
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"] {
-webkit-appearance: listbox;
}
textarea {
overflow: auto;
resize: vertical;
}
fieldset {
min-width: 0;
padding: 0;
margin: 0;
border: 0;
}
legend {
display: block;
width: 100%;
max-width: 100%;
padding: 0;
margin-bottom: .5rem;
font-size: 1.5rem;
line-height: inherit;
color: inherit;
white-space: normal;
}
progress {
vertical-align: baseline;
}
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
}
[type="search"] {
outline-offset: -2px;
-webkit-appearance: none;
}
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
::-webkit-file-upload-button {
font: inherit;
-webkit-appearance: button;
}
output {
display: inline-block;
}
summary {
display: list-item;
cursor: pointer;
}
template {
display: none;
}
[hidden] {
display: none !important;
}
/*# sourceMappingURL=bootstrap-reboot.css.map */

File diff suppressed because one or more lines are too long

View File

@ -1,8 +0,0 @@
/*!
* Bootstrap Reboot v4.3.1 (https://getbootstrap.com/)
* Copyright 2011-2019 The Bootstrap Authors
* Copyright 2011-2019 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md)
*/*,::after,::before{box-sizing:border-box}html{font-family:sans-serif;line-height:1.15;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}article,aside,figcaption,figure,footer,hgroup,main,nav,section{display:block}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";font-size:1rem;font-weight:400;line-height:1.5;color:#212529;text-align:left;background-color:#fff}[tabindex="-1"]:focus{outline:0!important}hr{box-sizing:content-box;height:0;overflow:visible}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:.5rem}p{margin-top:0;margin-bottom:1rem}abbr[data-original-title],abbr[title]{text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;cursor:help;border-bottom:0;-webkit-text-decoration-skip-ink:none;text-decoration-skip-ink:none}address{margin-bottom:1rem;font-style:normal;line-height:inherit}dl,ol,ul{margin-top:0;margin-bottom:1rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}dt{font-weight:700}dd{margin-bottom:.5rem;margin-left:0}blockquote{margin:0 0 1rem}b,strong{font-weight:bolder}small{font-size:80%}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}a{color:#007bff;text-decoration:none;background-color:transparent}a:hover{color:#0056b3;text-decoration:underline}a:not([href]):not([tabindex]){color:inherit;text-decoration:none}a:not([href]):not([tabindex]):focus,a:not([href]):not([tabindex]):hover{color:inherit;text-decoration:none}a:not([href]):not([tabindex]):focus{outline:0}code,kbd,pre,samp{font-family:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;font-size:1em}pre{margin-top:0;margin-bottom:1rem;overflow:auto}figure{margin:0 0 1rem}img{vertical-align:middle;border-style:none}svg{overflow:hidden;vertical-align:middle}table{border-collapse:collapse}caption{padding-top:.75rem;padding-bottom:.75rem;color:#6c757d;text-align:left;caption-side:bottom}th{text-align:inherit}label{display:inline-block;margin-bottom:.5rem}button{border-radius:0}button:focus{outline:1px dotted;outline:5px auto -webkit-focus-ring-color}button,input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:inherit;line-height:inherit}button,input{overflow:visible}button,select{text-transform:none}select{word-wrap:normal}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]:not(:disabled),[type=reset]:not(:disabled),[type=submit]:not(:disabled),button:not(:disabled){cursor:pointer}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{padding:0;border-style:none}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=date],input[type=datetime-local],input[type=month],input[type=time]{-webkit-appearance:listbox}textarea{overflow:auto;resize:vertical}fieldset{min-width:0;padding:0;margin:0;border:0}legend{display:block;width:100%;max-width:100%;padding:0;margin-bottom:.5rem;font-size:1.5rem;line-height:inherit;color:inherit;white-space:normal}progress{vertical-align:baseline}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{outline-offset:-2px;-webkit-appearance:none}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button}output{display:inline-block}summary{display:list-item;cursor:pointer}template{display:none}[hidden]{display:none!important}
/*# sourceMappingURL=bootstrap-reboot.min.css.map */

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -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}