"Clone of Xiomi Website"
Bootstrap 4.1.1 Snippet by dhaval296

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' type='text/css' href="css/t3style.css"> <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" /> <title>Xiomi India</title> </head> <body> <div class="header"> <div class="left-header"> <ul> <li>Mi India</li> <li>Get MI store app</li> <li>Online Help</li> <li>Retail Store <i class="fas fa-angle-down"></i> <ul> <li>MI Home</li> <li>MI Store</li> <li>MI Authorise</li> </ul> </li> </ul> </div> <div class="right-header"> <ul> <li>Sign in</li> <li>Sign up</li> <li> <i class="fas fa-shopping-cart"></i> Cart (0) </li> </ul> </div> </div> <div class="backimg"> <div class="main-header"> <ul> <li><span>MI</span></li> <li>Mi Phones <div class="header-slider"></div> </li> <li>TV</li> <li>Laptops</li> <li>Fitness & Lifestyle</li> <li>Home</li> <li>Audio</li> <li>Accessories</li> </ul> </div> </div> <div class="divider"> <div class="section"> <span class="frontline"></span> <div class="title">Latest Product</div> <span class="frontline"></span> </div> </div> <div class="product"> <div class="half"> <img src="https://i02.appmifile.com/935_operator_in/10/08/2021/596704c55af82e224848331e556524c0.jpg?width=612&height=612" alt=""> </div> <div class="half"> <div class="halfrow"> <div class="halfrowcol"> <img src="https://i02.appmifile.com/613_operator_in/14/06/2021/157540ec9f68347cd4bb6f7a86d093d9.jpg?width=612&height=612" alt=""> </div> <div class="halfrowcol"> <img src="https://i02.appmifile.com/613_operator_in/14/06/2021/157540ec9f68347cd4bb6f7a86d093d9.jpg?width=612&height=612" alt=""> </div> </div> <div class="halfrow"> <img src="https://i02.appmifile.com/571_operator_in/22/10/2020/2df7eba98e739b3329dda041b05a0aac.jpg?width=612&height=612" alt=""> </div> </div> </body> </html>
body { font-family: ProximaNova, Arial, Sans-serif; color : #fff; margin : 0; font-size : 12px; } .header { width : 100; background-color: #222; height : 40px; padding : 0 17%; color : rgb(204, 201, 201); } .left-header { float: left; } .left-header ul li { padding-right : 15px; padding-left : 15px; padding-top : 13px; padding-bottom: 13px; } .left-header ul li:hover { background-color: whitesmoke; color : #222; } .left-header ul li ul { position : absolute; visibility : hidden; padding-top: 15px; margin-left: -15px; } .left-header ul li:hover>ul { visibility: visible; } .left-header ul li ul li { background-color: whitesmoke; float : none; width : 100%; padding-top : 13px; padding-bottom : 13px; } .left-header ul li ul li:hover { background-color: rgb(212, 208, 208); color : rgb(235, 81, 81); } .right-header { float: right; } .right-header ul li { padding-right: 15px; padding-left : 15px; padding-top : 12px; } .header ul { list-style: none; padding : 0px; margin : 0px; } .header ul li { float: left; } .main-header { height : 50px; background-color: transparent; color : rgb(252, 250, 250); padding-left : 17%; font-weight : bold; } .main-header ul { list-style: none; padding : 0px; margin : 0px; } .main-header ul li { border : 0px solid; float : left; padding: 40px; } .main-header ul li span { background-color: rgb(226, 96, 35); border-radius : 20px; color : white; padding : 15px; font-size : 20px; } .header-slider { position : absolute; width : 100%; visibility : hidden; height : 350px; background-color: rgb(248, 248, 247); margin-left : -500px; margin-top : 40px; } .main-header ul li:hover>.header-slider { visibility: visible; } .backimg { background-image: url('../Image/banner.jpg'); height : 650px; } .divider h3 { text-align: center; color : #222; } .divider{ margin-left:20%; margin-right: 20%; height: 40px; } .section{ margin: 50px 0 50px; } .frontline{ width: 32.5%; height: 1px; background-color: #e0e0e0; float: left; margin-top: 10px; } .title{ width: 33%; float: left; margin-top: -10px; text-align: center; font-size: 35px; color: #222; } .product { margin: 0 20%; margin-top: 20px; } .half { width: 49%; float: left; height: 600px; border: 1px solid; } .half img{ height: 600px; width: 100%; } .half .halfrow{ height: 300px; } .half .halfrow img{ height: 300px !important; width: 100%; } .halfrowcol{ height: 300px; width: 49%; float: left; margin: 0 2px 2px 2px; } .halfrowcol img{ height: 300px; width: 100%; margin: 0 2px 0 2px; }

Related: See More

Argon Design System

Questions / Comments: