How To Make Responsive Website With HTML And CSS
HTML Code
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Pet Care Landing Page</title> <link rel="stylesheet" href="style.css"> <link rel="shortcut icon" href="images/logo.png" type="image/x-icon"> </head> <body> <section class="main"> <nav> <!------logo------------> <img src="images/logo.png" class="logo"> <!-------menu-----------> <ul class="menu"> <li><a href="#" class="menu-download">Download</a></li> <li><a href="#" class="menu-buy">Buy Vetsie</a></li> </ul> </nav> <!----------main-text----------------> <div class="container"> <div class="main-text"> <h1>Modernizing Veterinary Care<span> for pets</span></h1> <p>Reimegine how you communicate with your clients.</p> <img src="images/app1.png"> <img src="images/app2.png"> </div> <!-----man-image----------> <div class="main-img"> <img src="images/2.PNG"> </div> </div> </section> </body> </html>
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,300;0,400;0,500;0,600;1,100;1,200;1,300;1,400;1,500;1,600&display=swap"); * { margin: 0; padding: 0; font-family: "Poppins", sans-serif; } .main { width: 100%; height: 100vh; background-color: #f1f4f5; } .logo { height: 70px; } nav { display: flex; align-items: center; justify-content: space-between; padding: 20px 5%; } ul { list-style: none; } a { text-decoration: none; } .menu { display: flex; justify-content: center; align-items: center; } .menu li a { margin: 0px 5px; font-size: 0.8rem; letter-spacing: 1px; } .menu-download, .menu-buy { padding: 12px 25px; border-radius: 4px; } .menu-download { background-color: #ffffff; color: #111; font-weight: 500; box-shadow: 2px 2px 18px rgba(0, 0, 0, 0.1); } .menu-buy { background-color: #f08030; color: #fff; font-weight: 500; box-shadow: 2px 2px 18px rgba(0, 0, 0, 0.2); } .menu-buy:hover { background-color: #f19654; transition: 0.5s all ease; } .menu-download:hover { background-color: #f08030; color: #fff; transition: 0.5s all ease; } .container { display: flex; align-items: center; justify-content: center; } .main-text h1 { width: 380px; font-size: 2.5rem; } span { color: #f08030; } .main-text p { width: 350px; font-size: 16px; margin-top: 12px; } .main-text img { height: 45px; margin-top: 24px; } /*------make--it---responsive*/ @media (max-width: 912px) { .container { flex-direction: column-reverse; } .main-img img { height: 380px; } } @media (max-width: 433px) { .main-img img { height: 280px; } .menu-download { display: none; } .main-text h1 { width: 260px; font-size: 2rem; } .main-text p { font-size: 15px; font-weight: 400; } }
Download Files
Comments