Toggle navigation
Bootsnipp
Bootstrap
For
CSS Frameworks
Bootstrap
Foundation
Semantic UI
Materialize
Pure
Bulma
References
CSS Reference
Tools
Community
Page Builder
Form Builder
Button Builder
Icon Search
Dan's Tools
Diff / Merge
Color Picker
Keyword Tool
Web Fonts
.htaccess Generator
Favicon Generator
Site Speed Test
Snippets
Featured
Tags
By Bootstrap Version
4.1.1
4.0.0
3.3.0
3.2.0
3.1.0
3.0.3
3.0.1
3.0.0
2.3.2
Register
Login
"Clone of Xiomi Website"
Bootstrap 4.1.1 Snippet by
dhaval296
4.1.1
Preview
HTML
CSS
View Full Screen
Fork
Fork this
584
 
0 Fav
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
Free Template
Material Bootstrap Wizard
Questions / Comments:
Post
Posting Guidelines
Formatting
- Now
×
Close
Donate
BTC: 12JxYMYi6Vt3mx3hcmP3B2oyFiCSF3FhYT
ETH: 0xCD715b2E3549c54A40e6ecAaFeB82138148a6c76