"Untitled"
Bootstrap 4.1.1 Snippet by Lutfur2022

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!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"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <title>Coffee-Club</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <link rel="stylesheet" href="Style.css"> <style> *{ padding: 0; margin: 0; box-sizing: border-box; font-family: sans-serif; } #home{ width: 100%; height: 100vh; background-image: url(coffee.jpg); background-repeat: no-repeat; background-position: center; background-size: cover; position: relative; } .navber{ width: 100%; height: 10vh; display: flex; justify-content:space-between; align-items:center; padding:20px; overflow:hidden; line-height:50%; } .navber:hover{ background-color: black; opacity:1; box-shadow: 5px 5px 30px white; transition: 3s; } .logo{ padding-left: 20px; font-weight: bold; color: coral; cursor: pointer; } .logo:hover{ color:white; } .nav-menu ul li{ display: inline-block; padding: 10px; list-style: none; font-size: 15px; } .nav-menu ul li a:hover{ color: coral; } .nav-menu ul li a{ text-decoration: none; color: white; } .btn button{ width: 70px; height: 30px; border-radius: 10px; background-color: chocolate; cursor: pointer; border: none; } .btn button a{ text-decoration: none; color: white; } .btn button:hover{ outline: 1px solid red; background-color: darkseagreen; color: white; } .head{ position: absolute; bottom: 40vh; left: 60px; color: white; } .butt button{ width: 100px; padding: 7px 0; border-radius: 10px; border: none; background-color: red; color: white; cursor: pointer; text-decoration: none; } .butt button a{ text-decoration: none; color: rgb(251, 253, 255); font-size: 15px; } .butt button:hover{ background-color: chocolate; color: black; } .socialmedia{ display: flex; position: absolute; right: 10px; bottom: 30vh; display: block; padding: 10px; } .socialmedia a{ width: 30px; padding: 8px; margin: 8px; text-decoration: none; display:block; background-color: white; border-radius: 50%; align-items: center; line-height: 20px; } .socialmedia a:hover{ color: white; background-color: black; transition: 2s; } </style> </head> <body> <section id="home"> <Header> <div class="navber"> <div class="logo"> <h1>Coffee Club</h1> </div> <div class="nav-menu"> <ul> <li><a href="Index.html">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Service</a></li> <li><a href="#">Blog</a></li> <li><a href="./contact.html">Contact Us</a></li> </ul> </div> <div class="btn"> <button type="Login"><a href="./login.html" target="">Login</a></button> </div> </div> <div class="head"> <div class="text"> <h1>A Cup of Inspiration <br>to Make Your Day</h1> <div class="butt"> <button type="Text"><a href="https://archive.dhakatribune.com/business/2021/01/17/cht-has-the-elements-to-grow-world-class-coffee">Watch More</a></button> </div> </div> </Header> <div class="socialmedia"> <a href="https://www.facebook.com/moienk" target="_blank" class="fa fa-facebook"></a> <a href="https://twitter.com/i/flow/login" target="_blank" class="fa fa-twitter"></a> <a href="https://www.linkedin.com/" target="_blank" class="fa fa-linkedin"></a> <a href="https://www.youtube.com/@moienkhan7998/featured" target="_blank" class="fa fa-youtube"></a> <a href="https://www.instagram.com/moienkhan880/" target="_blank" class="fa fa-instagram"></a> </div> </section> <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script> </body> </html>

Related: See More

Vue Material Dashboard

Questions / Comments: