diff options
| -rw-r--r-- | index.html | 22 | ||||
| -rw-r--r-- | styles.css | 34 |
2 files changed, 30 insertions, 26 deletions
@@ -23,7 +23,7 @@ <path d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z" /> - <title>Bars</title> + <title>Open</title> </svg> <!-- Close --> <svg class="close" viewBox="0 0 384 512" width="100"> @@ -49,8 +49,8 @@ <li><a href="#" class="navbar-item is-active">Home</a></li> <li><a href="#" class="navbar-item">Service</a></li> <li><a href="#" class="navbar-item">About us</a></li> - <li><a href="/login.php" class="navbar-item">Login</a></li> - <li><a href="/account.php" class="navbar-item">Earn Money</a></li> + <li><a href="#" class="navbar-item">Login</a></li> + <li><a href="#" class="navbar-item">Earn Money</a></li> </ul> </div> @@ -89,10 +89,24 @@ </div> <!-- end mobile search --> </header> - <div class="l-block"></div> <main class="main"> <!-- Your content --> + <p> + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis condimentum hendrerit ante nec sollicitudin. Donec condimentum placerat mi. Suspendisse et ante ut velit consectetur varius ut a arcu. Nullam tincidunt, nisl non aliquam dapibus, diam enim laoreet ipsum, sed volutpat sapien sapien at neque. Etiam non sapien sodales, sagittis erat eget, lobortis magna. Nulla quis placerat ligula. Sed sed imperdiet elit. Sed id lectus efficitur, tempor nisi ut, tincidunt massa. Sed rhoncus egestas purus quis iaculis. Aliquam rutrum, diam vitae ultricies scelerisque, nulla augue mollis neque, sed consectetur nisl odio sed dolor. + </p> + <p> + Mauris vel libero sed mauris condimentum ultricies ut et sem. Integer eget elit laoreet, auctor quam nec, volutpat diam. Nulla pulvinar vestibulum nisi, dapibus ultrices justo lobortis ac. Etiam odio velit, dapibus a dolor sit amet, bibendum aliquet leo. Sed in fringilla dui. Phasellus a ultrices magna. Cras ac auctor mauris. + </p> + <p> + Duis dignissim lectus quis arcu sodales congue. Duis in scelerisque ligula. Maecenas tincidunt mollis lorem non mollis. Vestibulum porttitor ornare fermentum. Vestibulum cursus at eros et rutrum. Vivamus mollis, sem id viverra vehicula, leo enim commodo tortor, et vestibulum quam nisi vitae risus. Vivamus bibendum augue at convallis sollicitudin. Morbi vitae gravida mauris, at imperdiet leo. Ut at tempor quam, vitae porttitor nunc. Maecenas urna libero, bibendum vel augue quis, egestas rhoncus dui. Praesent sed blandit erat. Proin dolor lacus, ullamcorper ut tempor a, maximus ac nunc. Integer dignissim est nec lectus vestibulum, in laoreet orci bibendum. Vivamus nec facilisis mi. In ut quam diam. Maecenas tellus dolor, sollicitudin sed tellus nec, consequat elementum nulla. + </p> + <p> + Nunc scelerisque hendrerit sem, pretium fermentum justo tincidunt sit amet. In lacinia, lectus iaculis pulvinar porttitor, dolor sapien maximus leo, feugiat aliquet felis elit eu enim. Maecenas at odio a nulla ultrices congue id id arcu. In leo purus, facilisis non porta vitae, consectetur eget risus. Integer vitae felis dui. Ut id felis in tellus consectetur fringilla. Vivamus tellus nibh, mattis a porta lobortis, tempor non sapien. + </p> + <p> + Pellentesque at est nisi. Proin accumsan ligula lorem, sed elementum ligula hendrerit molestie. Vestibulum pretium, erat vel luctus suscipit, sem dui convallis metus, sit amet accumsan lectus ipsum vel libero. Pellentesque imperdiet scelerisque volutpat. Donec placerat maximus neque eu sodales. Vivamus eu elit nec odio dignissim mollis. Mauris erat turpis, pretium in placerat consequat, laoreet a turpis. Etiam rhoncus felis vel est aliquam finibus. Donec varius mauris sed libero finibus, nec vehicula nisi lobortis. Nunc et dictum odio, vitae consectetur sapien. Maecenas quis sagittis mauris. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. + </p> </main> <footer class="footer"> @@ -5,7 +5,6 @@ --background-l3: #7c8083; --toggle-bg: #000; --header-bg: #FFF; - --vertical-block-space: 3.5rem; --text: #000; --text-l1: #1976d3; --text-l2: #FFF; @@ -17,28 +16,22 @@ --h6: #73828c; } -div, button { - margin: 0; - padding: 0; -} - html { font-family: "liberation serif", "times new roman", calibri, carlito, serif; color: var(--text); + font-size: 16px; } body { display: grid; grid-template-columns: 1fr; - grid-template-rows: auto 1fr 1fr; - grid-gap: 10px 10px; + grid-template-rows: repeat(3, auto); + grid-gap: 1rem; grid-template-areas: "header" "main" "footer"; - /* Fix height */ height: 100vh; - /* grid-template-rows: auto 1fr auto; */ } .text-center { @@ -48,8 +41,8 @@ body { .header { display: grid; grid-template-columns: 60px auto 60px; - grid-template-rows: auto auto; - gap: 0px 0px; + grid-template-rows: repeat(2, auto); + grid-gap: 0px 0px; grid-template-areas: "navbar-toggle logo-name ." "navbar-menu navbar-menu navbar-menu"; @@ -66,10 +59,6 @@ body { z-index: 100; } -.l-block { - margin-bottom: var(--vertical-block-space); -} - .navbar-menu { grid-area: navbar-menu; @@ -330,6 +319,9 @@ input[type="search"] { grid-template-areas: "categories" "shopping"; + margin-top: 1.5rem; + margin-left: 1rem; + margin-right: 1rem; } /* ------ Hidden arrows ------ */ @@ -350,13 +342,12 @@ input::-webkit-inner-spin-button { display: grid; grid-template-columns: 1fr; grid-template-rows: auto auto; - grid-row-gap: 10px; + grid-row-gap: 1rem; grid-template-areas: "footer-info" "copy-info"; background: var(--background); - border-radius: 10px; color: var(--text-l2); } @@ -394,13 +385,12 @@ input::-webkit-inner-spin-button { /* For desktop: */ @media only screen and (min-width: 992px) { body { - height: auto; - grid-template-rows: auto auto auto; + grid-template-rows: repeat(3, 1fr); } .header { display: grid; - grid-template-columns: auto auto auto; - grid-template-rows: auto auto; + grid-template-columns: repeat(3, auto); + grid-template-rows: repeat(2, auto); grid-template-areas: "logo-name navbar-menu sc-form"; background: var(--header-bg); } |