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

View file

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