Better logic in placement of items
This commit is contained in:
Marcel Petráň
parent
00f083363a
commit
212da6427b
19
cs/home.html
19
cs/home.html
@ -9,7 +9,18 @@
|
||||
</head>
|
||||
<body>
|
||||
<nav id="overlay">
|
||||
<img src="../img/close-menu.svg" class="close-btn" id="close-menu">
|
||||
<div class="navbar-strip">
|
||||
<div class="navbar-container">
|
||||
<div class="navbar-grid">
|
||||
<div class="navbar-grid-col -left">
|
||||
<h1 class="title left">Sincoolka</h1>
|
||||
</div>
|
||||
<div class="navbar-grid-col -right">
|
||||
<img src="../img/close-menu.svg" class="close-btn" id="close-menu">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#">DOMŮ</a>
|
||||
@ -100,7 +111,10 @@
|
||||
<section class="contact-us">
|
||||
<h1 class="title">Kontaktuj nás</h1>
|
||||
<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í *">
|
||||
<textarea name="your-message" onkeyup="auto_grow(this)" rows="1" placeholder="Tvá zpráva"></textarea>
|
||||
<button type="button" name="send-btn">Odeslat</button>
|
||||
</form>
|
||||
</section>
|
||||
</main>
|
||||
@ -109,6 +123,7 @@
|
||||
</footer>
|
||||
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></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>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
121
css/master.css
121
css/master.css
@ -1,12 +1,24 @@
|
||||
@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;
|
||||
margin: 0;
|
||||
}
|
||||
body a, html a {
|
||||
margin: 0;
|
||||
text-decoration: none;
|
||||
}
|
||||
section.gallery-in, section.home{
|
||||
background: #EEEEEE;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding: 3em 5em;
|
||||
}
|
||||
section.team , section.contact-us, section.about{
|
||||
background: #FFF;
|
||||
padding: 3em 5em;
|
||||
height: auto;
|
||||
}
|
||||
h1.title{
|
||||
font-weight: 700;
|
||||
font-size: 5em;
|
||||
@ -30,9 +42,7 @@ p.article{
|
||||
font-size: 2.5em;
|
||||
}
|
||||
section.home {
|
||||
padding: 4em;
|
||||
min-height: 100vh;
|
||||
background: #EEEEEE;
|
||||
background-image: url('../img/logo.png');
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
@ -43,12 +53,6 @@ a img.arrow-down{
|
||||
position: absolute;
|
||||
top: calc(100vh - 4em);
|
||||
left: calc(50% - 1.75em);
|
||||
|
||||
}
|
||||
section.about{
|
||||
background: #FFF;
|
||||
height: auto;
|
||||
padding: 6em 7.6em;
|
||||
}
|
||||
section h1{
|
||||
text-align: center;
|
||||
@ -61,39 +65,27 @@ article.about-us-1 h3.title::before{
|
||||
content: "Whaaat";
|
||||
}
|
||||
*/
|
||||
section.gallery-in{
|
||||
background: #EEEEEE;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding: 2.1em;
|
||||
|
||||
}
|
||||
div.gallery{
|
||||
padding: 2.1em;
|
||||
display: block;
|
||||
}
|
||||
div.gallery img{
|
||||
width: 100%;
|
||||
}
|
||||
section.team , section.contact-us{
|
||||
background: #FFF;
|
||||
padding: 3em 7.6em;
|
||||
}
|
||||
section.people{
|
||||
padding-top: 2em;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2,50%);
|
||||
grid-gap: 3em;
|
||||
grid-template-columns: repeat(2, 23.05em);
|
||||
grid-template-rows: repeat(2,auto);
|
||||
grid-gap: 3em;
|
||||
justify-content: space-evenly;
|
||||
text-align: center;
|
||||
}
|
||||
section.member{
|
||||
margin: 2em 0;
|
||||
margin: 2em 0 0 0;
|
||||
}
|
||||
section.member-last{
|
||||
padding-top: 2em;
|
||||
width: 50%;
|
||||
margin: 0 auto;
|
||||
margin: 5em auto 0 auto;
|
||||
display: block;
|
||||
text-align: center;
|
||||
}
|
||||
@ -101,15 +93,60 @@ img.member-photo{
|
||||
padding: 1em;
|
||||
width: 75%;
|
||||
}
|
||||
form.contact-form{
|
||||
display: grid;
|
||||
grid-template-rows: repeat(3,auto);
|
||||
grid-row-gap: .5em;
|
||||
font-size: 2.5em;
|
||||
font-weight: 300;
|
||||
margin: 1.5em 0;
|
||||
}
|
||||
input.name-surname{
|
||||
width: 15em;
|
||||
}
|
||||
input{
|
||||
width: 15em;
|
||||
}
|
||||
textarea{
|
||||
resize: none !important;
|
||||
overflow: hidden;
|
||||
}
|
||||
input, textarea{
|
||||
background-color: #F9F9F9;
|
||||
border: none;
|
||||
}
|
||||
button{
|
||||
display: block !important;
|
||||
margin: auto !important;
|
||||
cursor: pointer;
|
||||
width: 13em;
|
||||
color: #828282;
|
||||
background-color: #EEEEEE;
|
||||
border: none;
|
||||
justify-content: center;
|
||||
}
|
||||
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
|
||||
color: #9D9D9D;
|
||||
opacity: 1; /* Firefox */
|
||||
padding-left: .35em;
|
||||
}
|
||||
|
||||
:-ms-input-placeholder { /* Internet Explorer 10-11 */
|
||||
color: #9D9D9D;
|
||||
}
|
||||
|
||||
::-ms-input-placeholder { /* Microsoft Edge */
|
||||
color: #9D9D9D;
|
||||
}
|
||||
|
||||
footer{
|
||||
background-color: #4A4A4A;
|
||||
padding: 3em 7.6em;
|
||||
padding: 3em 3em;
|
||||
}
|
||||
/* <--- NAVIGATION ---> */
|
||||
nav {
|
||||
position: fixed;
|
||||
background: #EEEEEE;
|
||||
padding: 3em;
|
||||
width: calc(100%);
|
||||
height: calc(100vh);
|
||||
z-index: +101;
|
||||
@ -120,7 +157,7 @@ nav ul {
|
||||
list-style-type: none;
|
||||
margin: 20% auto 0 auto;
|
||||
display: grid;
|
||||
grid-template-rows: repeat(6,20%);
|
||||
grid-template-rows: repeat(6, 8em);
|
||||
justify-content: space-evenly;
|
||||
text-align: center;
|
||||
width: 80%;
|
||||
@ -138,12 +175,14 @@ nav ul a:hover{
|
||||
color:#0E404D;
|
||||
text-decoration: none;
|
||||
}
|
||||
#overlay h1.title{
|
||||
opacity: 0;
|
||||
}
|
||||
img.close-btn {
|
||||
opacity: 0;
|
||||
padding-top: 1.5em;
|
||||
position: relative;
|
||||
width: 4.2em;
|
||||
position: fixed;
|
||||
top: 4em;
|
||||
right: 3.5em;
|
||||
cursor: pointer;
|
||||
}
|
||||
img.menu-btn {
|
||||
@ -171,32 +210,32 @@ div.-right{
|
||||
text-align: right;
|
||||
}
|
||||
.inactive{
|
||||
animation: r-slide-menu .4s ease-out forwards;
|
||||
animation: r-slide-menu .3s ease-out forwards;
|
||||
}
|
||||
.active{
|
||||
display: block;
|
||||
animation: slide-menu .4s ease-in forwards;
|
||||
animation: slide-menu .3s ease-in forwards;
|
||||
}
|
||||
.active .close-btn{
|
||||
animation: show-x .4s .7s forwards;
|
||||
.active .close-btn, .active h1.title{
|
||||
animation: show-x .3s .5s forwards;
|
||||
}
|
||||
.active li:nth-of-type(1){
|
||||
animation: menu-item .25s forwards .45s ease-in-out;
|
||||
animation: menu-item .25s forwards .35s ease-in-out;
|
||||
}
|
||||
.active li:nth-of-type(2){
|
||||
animation: menu-item .25s forwards .55s ease-in-out;
|
||||
animation: menu-item .25s forwards .40s ease-in-out;
|
||||
}
|
||||
.active li:nth-of-type(3){
|
||||
animation: menu-item .25s forwards .65s ease-in-out;
|
||||
animation: menu-item .25s forwards .45s ease-in-out;
|
||||
}
|
||||
.active li:nth-of-type(4){
|
||||
animation: menu-item .25s forwards .75s ease-in-out;
|
||||
animation: menu-item .25s forwards .50s ease-in-out;
|
||||
}
|
||||
.active li:nth-of-type(5){
|
||||
animation: menu-item .25s forwards .85s ease-in-out;
|
||||
animation: menu-item .25s forwards .55s ease-in-out;
|
||||
}
|
||||
.active li:nth-of-type(6){
|
||||
animation: menu-item .25s forwards .95s ease-in-out;
|
||||
animation: menu-item .25s forwards .60s ease-in-out;
|
||||
}
|
||||
/* <--- ANIMATIONS ---> */
|
||||
@keyframes slide-menu {
|
||||
|
||||
4
js/auto_height.js
Normal file
4
js/auto_height.js
Normal file
@ -0,0 +1,4 @@
|
||||
function auto_grow(element) {
|
||||
element.style.height = "5px";
|
||||
element.style.height = (element.scrollHeight)+"px";
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user