Glassmorphism Landing Page Design Using HTML CSS | Beautiful Glass Website Using HTML 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>Glass Food Website</title> <!-- Icons --> <link rel="stylesheet" href="https://unpkg.com/boxicons@latest/css/boxicons.min.css"> <!-- Link To CSS --> <link rel="stylesheet" href="style.css"> </head> <body> <!-- Main --> <section id="main"> <!-- Glass Box --> <div class="main-box"> <!-- Navbar --> <nav> <ul> <li><a href="#" class="logo">Taste</a></li> <li><i class='bx bxs-cart-alt'></i></li> </ul> </nav> <!-- Main Content --> <div class="main-content"> <!-- Main Text --> <div class="main-text"> <h1>Delicious <br>Food</h1> <h2>For Healthy Life</h2> <p>Lorem ipsum dolor sit amet consectetur adipisicing<br> elit. Sint voluptas distinctio perspiciatis aspernatur.</p> <!-- Buttons --> <a href="#" class="btn1">View Menu</a> <a href="#" class="btn2">Book A Table</a> </div> <!-- Image --> <div class="main-img"> <img src="images/food.png" alt=""> </div> </div> </div> </section> <!-- circles --> <div class="circle1"></div> <div class="circle2"></div> </body> </html>
/* Google Fonts */ @import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,500;0,600;1,500&display=swap"); * { margin: 0; padding: 0; list-style: none; text-decoration: none; font-family: "Poppins", sans-serif; } #main { width: 100%; min-height: 100vh; background: #feac00; display: flex; justify-content: center; align-items: center; } .main-box { background: white; width: 80%; min-height: 80vh; background: linear-gradient( to right bottom, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.1) ); border-radius: 1rem; backdrop-filter: blur(2rem); z-index: 4; } .circle1, .circle2 { background: white; height: 15rem; width: 15rem; border-radius: 50%; position: absolute; background: linear-gradient( to right bottom, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.4) ); z-index: 2; } .circle1 { top: 4%; right: 2%; } .circle2 { bottom: 4%; left: 2%; } .main-box nav { padding: 50px; } .main-box nav ul { display: flex; justify-content: space-between; } .logo { color: #000000; font-size: 1.1rem; font-weight: 800; } .bx { font-size: 1.6rem; color: #fff; padding: 6px 6px; border-radius: 0.5rem; background: #000000; cursor: pointer; } .main-content { display: flex; align-items: center; justify-content: space-around; } .main-text { max-width: 500px; } .main-text h1 { font-size: 2.5rem; } .main-text h2 { font-size: 2rem; font-weight: 200; } .main-text p { font-size: 1rem; font-weight: 100; margin: 18px 0 40px; } .btn1, .btn2 { padding: 10px 20px; background: #d41b27; color: #fff; font-weight: 300; border-radius: 2rem; cursor: pointer; } .btn2 { background: #fff; color: #000000; margin-left: 1rem; } .btn2:hover { background: #d41b27; color: #fff; transition: 0.5s ease; } .main-text::after { content: ""; width: 5px; height: 20%; background: #d41b27; position: absolute; left: 2.4rem; top: 11.1rem; } .main-img { width: 350px; height: 350px; } .main-img img { width: 100%; height: 100%; object-fit: contain; object-position: center; }
Download Files:
Comments