Untitled
unknown
plain_text
a month ago
5.1 kB
3
Indexable
* { margin: 0px; padding: 0px; } .dark-01 { color: #131313; } .dark-02 { color: #424242; } .dark-03 { color: #424242; } header { background: rgba(255, 144, 14, 0.10); } /*Navbar started here*/ .title { color: var(--Dark-01, #131313); text-align: center; font-family: "Work Sans"; font-size: 45px; font-style: normal; font-weight: 700; line-height: normal; } .navbar { display: flex; justify-content: center; align-items: center; justify-content: space-between; margin: 0px 80px; padding-top: 43px; padding-bottom: 63px; } .nav-items { display: flex; justify-content: center; align-items: center; text-align: center; gap: 50px; text-align: center; font-family: "Work Sans"; font-size: 18px; font-style: normal; font-weight: 500; } /* banner section started here */ .banner-section{ margin: 0px 300px; } .para { color: var(--Dark-03, #727272); text-align: center; font-family: "Work Sans"; font-size: 16px; font-style: normal; font-weight: 400; line-height: 26px; } .banner-section h1{ margin-bottom: 10px; } .banner-section p{ margin-bottom: 23px; } .banner-section button{ margin-bottom: 50px; } .btn-primary { color: #FFF; text-align: center; font-family: "Work Sans"; font-size: 20px; font-style: normal; font-weight: 600; line-height: normal; border-radius: 8px; background: #FF900E; border: none; padding: 20px 24px; } .banner-button{ display: flex; justify-content: center; align-items: center; text-align: center; } .banner-section img { margin: 0 auto; width: 100%; } @media screen and (max-width:576px) { .title { color: var(--Dark-01, #131313); text-align: center; font-family: "Work Sans"; font-size: 45px; font-style: normal; font-weight: 700; line-height: normal; } .navbar { display: flex; justify-content: center; align-items: center; justify-content: space-between; margin: 0px 240px; margin-top: 63px; margin: 0px; flex-direction: column; overflow: hidden; padding: 25px; } /* .navbar h1{ margin: 25px auto; } */ .nav-items { display: flex; justify-content: center; align-items: center; text-align: center; gap: 50px; text-align: center; font-family: "Work Sans"; font-size: 18px; font-style: normal; font-weight: 500; } /* banner section started here */ .banner-section{ margin: 0px 300px; margin: 0px; padding: 0px 20px; overflow: hidden; } .para { color: var(--Dark-03, #727272); text-align: center; font-family: "Work Sans"; font-size: 16px; font-style: normal; font-weight: 400; line-height: 26px; } .banner-section h1{ margin-bottom: 10px; } .banner-section p{ margin-bottom: 23px; } .banner-section button{ margin-bottom: 50px; } .btn-primary { color: #FFF; text-align: center; font-family: "Work Sans"; font-size: 20px; font-style: normal; font-weight: 600; line-height: normal; border-radius: 8px; background: #FF900E; border: none; padding: 20px 24px; } .banner-button{ display: flex; justify-content: center; align-items: center; text-align: center; } } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="styles.css"> </head> <body> <header> <div class="navbar"> <div> <h1 class="title dark-01">G3 Architects</h1> </div> <div class="nav-items dark-02"> <ul>Home</ul> <ul>About</ul> <ul>Contact Us</ul> <ul>Login</ul> </div> </div> <div class="banner-section"> <h1 class="title dark-01">Brand New <br> Group of Architects </h1> <p class="para">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in <br> some form, by injected humour, or randomised words which don't look even</p> <div class="banner-button"> <button class="btn-primary">Explore More</button> </div> <div class="banner-img"> <img src="images/banner.png" alt=""> </div> </div> </header> <main></main> <footer></footer> </body> </html>
Editor is loading...
Leave a Comment