Modified Home Page Layout

This commit is contained in:
Kelvin Samuel 2021-09-20 23:25:45 +07:00
parent d349abbfb7
commit 7e61961638
2 changed files with 34 additions and 36 deletions

View file

@ -5,7 +5,7 @@ body {
background-color: #1b1c1e; background-color: #1b1c1e;
} }
.nav-color { .comp-color {
background-color: #212226; background-color: #212226;
} }
@ -17,13 +17,12 @@ body {
.carousel-inner{ .carousel-inner{
margin-top: -3%; margin-top: -3%;
width: 1400px; width: 1400px;
margin-left: 5%; margin-left: 4%;
} }
.banner{ .banner{
width: 100%; width: 100%;
margin-top: 30px; margin-top: 30px;
margin-left: 12.5%;
} }
.banner_item{ .banner_item{
@ -319,7 +318,7 @@ body {
background-size: cover; background-size: cover;
background-position: center center ; background-position: center center ;
margin-top: 3%; margin-top: 3%;
margin-left: 5%; margin-left: 4%;
} }
.main_slider_content{ .main_slider_content{

View file

@ -16,37 +16,36 @@
<link rel="stylesheet" type="text/css" href="Style-index.css"> <link rel="stylesheet" type="text/css" href="Style-index.css">
</head> </head>
<body class="bg-color"> <body class="bg-color">
<nav class="navbar navbar-expand-lg navbar-dark comp-color ml-5 mr-5 nav-radius"> <nav class="navbar navbar-expand-lg navbar-dark comp-color ml-5 mr-5 nav-radius">
<a href="/"><img alt="Banner" class="navbar-brand" height="80" src="assets/logo_transparent.png" <a href="/"><img alt="Banner" class="navbar-brand" height="80" src="assets/logo_transparent.png"
style="margin-top: 0%;" width="80"></a> style="margin-top: 0%;" width="80"></a>
<button aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation" <button aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler"
class="navbar-toggler" data-target="#navbarTogglerDemo01" data-toggle="collapse" type="button">
data-target="#navbarTogglerDemo01" data-toggle="collapse" type="button"> <span class="navbar-toggler-icon"></span>
<span class="navbar-toggler-icon"></span> </button>
</button> <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<div class="collapse navbar-collapse" id="navbarTogglerDemo01"> <ul class="navbar-nav mx-auto">
<ul class="navbar-nav mx-auto"> <li class="nav-item">
<li class="nav-item active"> <a class="nav-link" href="/">Home</a>
<a class="nav-link" href="#">Home</a> </li>
</li> <li class="nav-item active">
<li class="nav-item"> <a aria-disabled="true" class="nav-link disabled" href="product-list.html">Products</a>
<a aria-disabled="true" class="nav-link" href="product-list.html">Products</a> </li>
</li> <li class="nav-item">
<li class="nav-item"> <a class="nav-link" href="about-us.html">About Us</a>
<a class="nav-link" href="about-us.html">About Us</a> </li>
</li> <li class="nav-item">
<li class="nav-item"> <a class="nav-link" href="faq.html">FAQ</a>
<a class="nav-link" href="faq.html">FAQ</a> </li>
</li> </ul>
</ul> <span class="navbar-nav my-2 my-lg-0 text-white">
<span class="navbar-nav my-2 my-lg-0 text-white"> <div class="my-4">
<div class="my-4"> <a href="login.html"><button class="btn btn-outline-success mt-auto mb-auto mr-3" type="button">Login</button></a>
<a href="login.html"><button class="btn btn-outline-success mt-auto mb-auto mr-3" type="button">Login</button></a> </div>
</div> <i class="fas fa-shopping-cart mt-auto mb-auto"><span class="ml-2 mt-auto mb-auto">$999</span></i>
<i class="fas fa-shopping-cart mt-auto mb-auto"><span class="ml-2 mt-auto mb-auto">$999</span></i> </span>
</span> </div>
</div> </nav>
</nav>
<header> <header>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" style="width: 100%;"> <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" style="width: 100%;">
@ -83,7 +82,7 @@
<div class="banner"> <div class="banner">
<div class="container"> <div class="container">
<div class="row"> <div class="row justify-content-center" >
<div class="col-md-4"> <div class="col-md-4">
<div class="banner_item align-item-center" style="background-image: url(assets/banner_1.jpg);"> <div class="banner_item align-item-center" style="background-image: url(assets/banner_1.jpg);">
<div class="banner_category"> <div class="banner_category">