From 212da6427b3777a34ef5d1386209d484faf0a9ed Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcel=20Petr=C3=A1=C5=88?= <marcelpetran55@gmail.com>
Date: Fri, 19 Apr 2019 19:33:28 +0200
Subject: [PATCH] Better logic in placement of items

---
 cs/home.html      |  19 +++++++-
 css/master.css    | 121 ++++++++++++++++++++++++++++++----------------
 js/auto_height.js |   4 ++
 3 files changed, 101 insertions(+), 43 deletions(-)
 create mode 100644 js/auto_height.js
diff --git a/cs/home.html b/cs/home.html
index 83e1f83..e85c4c2 100644
--- a/cs/home.html
+++ b/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>
diff --git a/css/master.css b/css/master.css
index c630530..074c1be 100644
--- a/css/master.css
+++ b/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 {
diff --git a/js/auto_height.js b/js/auto_height.js
new file mode 100644
index 0000000..3a31f28
--- /dev/null
+++ b/js/auto_height.js
@@ -0,0 +1,4 @@
+function auto_grow(element) {
+    element.style.height = "5px";
+    element.style.height = (element.scrollHeight)+"px";
+}
