sincoolka/Project-new-web
7
0
Fork 0
Code Issues Releases Activity

Better logic in placement of items

Browse Source
This commit is contained in:
Marcel Petráň 2019-04-19 19:33:28 +02:00
parent 00f083363a
commit 212da6427b
3 changed files with 101 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
cs/home.html
View File

@ -9,7 +9,18 @@
</head> </head>
<body> <body>
<nav id="overlay"> <nav id="overlay">
<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"> <img src="../img/close-menu.svg" class="close-btn" id="close-menu">
</div>
</div>
</div>
</div>
<ul> <ul>
<li> <li>
<a href="#">DOMŮ</a> <a href="#">DOMŮ</a>
@ -100,7 +111,10 @@
<section class="contact-us"> <section class="contact-us">
<h1 class="title">Kontaktuj nás</h1> <h1 class="title">Kontaktuj nás</h1>
<form class="contact-form" action="#" method="post"> <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> </form>
</section> </section>
</main> </main>
@ -109,6 +123,7 @@
</footer> </footer>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <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/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/navbar.js"></script>
</body> </body>
</html> </html>

121
css/master.css
View File

@ -1,12 +1,24 @@
@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 { body, html {
font-family: 'Open Sans', sans-serif !important; font-family: 'Open Sans', sans-serif !important;
color: #4A4A4A !important;
margin: 0; margin: 0;
} }
body a, html a { body a, html a {
margin: 0; margin: 0;
text-decoration: none; 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{ h1.title{
font-weight: 700; font-weight: 700;
font-size: 5em; font-size: 5em;
@ -30,9 +42,7 @@ p.article{
font-size: 2.5em; font-size: 2.5em;
} }
section.home { section.home {
padding: 4em;
min-height: 100vh; min-height: 100vh;
background: #EEEEEE;
background-image: url('../img/logo.png'); background-image: url('../img/logo.png');
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
@ -43,12 +53,6 @@ a img.arrow-down{
position: absolute; position: absolute;
top: calc(100vh - 4em); top: calc(100vh - 4em);
left: calc(50% - 1.75em); left: calc(50% - 1.75em);
}
section.about{
background: #FFF;
height: auto;
padding: 6em 7.6em;
} }
section h1{ section h1{
text-align: center; text-align: center;
@ -61,39 +65,27 @@ article.about-us-1 h3.title::before{
content: "Whaaat"; content: "Whaaat";
} }
*/ */
section.gallery-in{
background: #EEEEEE;
margin-left: auto;
margin-right: auto;
padding: 2.1em;
}
div.gallery{ div.gallery{
padding: 2.1em; display: block;
} }
div.gallery img{ div.gallery img{
width: 100%; width: 100%;
} }
section.team , section.contact-us{
background: #FFF;
padding: 3em 7.6em;
}
section.people{ section.people{
padding-top: 2em; padding-top: 2em;
display: grid; display: grid;
grid-template-columns: repeat(2,50%); grid-template-columns: repeat(2, 23.05em);
grid-gap: 3em;
grid-template-rows: repeat(2,auto); grid-template-rows: repeat(2,auto);
grid-gap: 3em;
justify-content: space-evenly; justify-content: space-evenly;
text-align: center; text-align: center;
} }
section.member{ section.member{
margin: 2em 0; margin: 2em 0 0 0;
} }
section.member-last{ section.member-last{
padding-top: 2em;
width: 50%; width: 50%;
margin: 0 auto; margin: 5em auto 0 auto;
display: block; display: block;
text-align: center; text-align: center;
} }
@ -101,15 +93,60 @@ img.member-photo{
padding: 1em; padding: 1em;
width: 75%; 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{ footer{
background-color: #4A4A4A; background-color: #4A4A4A;
padding: 3em 7.6em; padding: 3em 3em;
} }
/* <--- NAVIGATION ---> */ /* <--- NAVIGATION ---> */
nav { nav {
position: fixed; position: fixed;
background: #EEEEEE; background: #EEEEEE;
padding: 3em;
width: calc(100%); width: calc(100%);
height: calc(100vh); height: calc(100vh);
z-index: +101; z-index: +101;
@ -120,7 +157,7 @@ nav ul {
list-style-type: none; list-style-type: none;
margin: 20% auto 0 auto; margin: 20% auto 0 auto;
display: grid; display: grid;
grid-template-rows: repeat(6,20%); grid-template-rows: repeat(6, 8em);
justify-content: space-evenly; justify-content: space-evenly;
text-align: center; text-align: center;
width: 80%; width: 80%;
@ -138,12 +175,14 @@ nav ul a:hover{
color:#0E404D; color:#0E404D;
text-decoration: none; text-decoration: none;
} }
#overlay h1.title{
opacity: 0;
}
img.close-btn { img.close-btn {
opacity: 0; opacity: 0;
padding-top: 1.5em;
position: relative;
width: 4.2em; width: 4.2em;
position: fixed;
top: 4em;
right: 3.5em;
cursor: pointer; cursor: pointer;
} }
img.menu-btn { img.menu-btn {
@ -171,32 +210,32 @@ div.-right{
text-align: right; text-align: right;
} }
.inactive{ .inactive{
animation: r-slide-menu .4s ease-out forwards; animation: r-slide-menu .3s ease-out forwards;
} }
.active{ .active{
display: block; display: block;
animation: slide-menu .4s ease-in forwards; animation: slide-menu .3s ease-in forwards;
} }
.active .close-btn{ .active .close-btn, .active h1.title{
animation: show-x .4s .7s forwards; animation: show-x .3s .5s forwards;
} }
.active li:nth-of-type(1){ .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){ .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){ .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){ .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){ .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){ .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 ---> */ /* <--- ANIMATIONS ---> */
@keyframes slide-menu { @keyframes slide-menu {

4
js/auto_height.js Normal file
View File

@ -0,0 +1,4 @@
function auto_grow(element) {
element.style.height = "5px";
element.style.height = (element.scrollHeight)+"px";
}