plant shop

HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>How to create a website using HTML and CSS</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <header> <nav> <ul> <li><a href="#intro">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#contact">Contact</a></li> </ul> </nav> </header> <main> <section id="intro"> <div class="Container"> <img src="file:///C:/Users/bagha/OneDrive/Pictures/logo.jpg" alt="display picture of doggo"> <h2>My name is Doggo</h2> </div> </section> <section id="about"> <div class="container"> <h1>About Me</h1> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint, similique?</p> <ul> <li>Btech Qualified</li> <li>Software Engineer</li> <li>GATE AIR 01</li> </ul> </div> </section> <section id="contact"> <div class="container"> <h1>Contact me</h1> <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nam, laudantium.</p> <ul> <li>Email ID</li> <li>Insta ID</li> <li>Facebook ID</li> </ul> </div> </section> </main> <footer> <p>© Copyright 2022 Doggo Co LTd.</p> </footer> </body> </html>
CSS
*{ padding: 0; margin: 0; } header{ height: 45px; } header nav ul{ display: flex; margin-left: 80%; } header nav ul li{ padding-left: 10%; } section{ height: 100vh; border: 1px solid grey; display: flex; justify-content: center; align-items: center; } .Container{ margin-top: 10% } .Container img{ height: 300px; } .Container h2{ margin-top: 3%; } footer { line-height: 40px; display: flex; justify-content: center; } #intro { background-image: url(file:///C:/Users/bagha/OneDrive/Pictures/logo.jpg); background-repeat: round; } #about{ background-color: red; } #contact{ background-color: blue; }
JAVASCRIPT
Expand for more options Login