From eee523b4bdfd73cbfbb8243aa290ffb8f055d698 Mon Sep 17 00:00:00 2001
From: Kelvin Samuel <kelvinbalkes@gmail.com>
Date: Tue, 21 Sep 2021 17:30:29 +0700
Subject: [PATCH] Modified Carousel on Home Page
---
Style-index.css | 14 ++++++++++----
index.html | 35 ++++++++++++-----------------------
2 files changed, 22 insertions(+), 27 deletions(-)
diff --git a/Style-index.css b/Style-index.css
index b645d55..07da7c3 100644
--- a/Style-index.css
+++ b/Style-index.css
@@ -16,10 +16,16 @@ body {
.carousel-inner{
margin-top: -3%;
- width: 1400px;
- margin-left: 4%;
+ width: 1518px;
}
+.carousel-item{
+ text-align: center;
+ justify-content: center;
+ align-items: center;
+ position: relative;
+ }
+
.banner{
width: 100%;
margin-top: 30px;
@@ -90,7 +96,7 @@ body {
border-radius: 3px;
margin: 0;
float: left;
- margin-left: -1px;
+ justify-content: center;
}
.grid_sorting_button:first-child{
@@ -109,7 +115,7 @@ body {
.product-grid{
width: 100%;
margin-top: 57px;
-}
+}
.product-item{
width: 20%;
diff --git a/index.html b/index.html
index dbf5e02..dadfb6e 100644
--- a/index.html
+++ b/index.html
@@ -49,7 +49,7 @@
</nav>
<header>
- <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" style="width: 100%;">
+ <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<div style="padding-top: 66px;">
<div class="col-13">
<ol class="carousel-indicators">
@@ -59,13 +59,13 @@
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
- <img class="d-block w-100" src="assets/Carousel_1.jpg" alt="First slide" height="500px">
+ <img class="d-block w-100" src="assets/Carousel_1.jpg" alt="First slide" height="550px">
</div>
<div class="carousel-item">
- <img class="d-block w-100" src="assets/Carousel_2.jpg" alt="Second slide" height="500px">
+ <img class="d-block w-100" src="assets/Carousel_2.jpg" alt="Second slide" height="550px">
</div>
<div class="carousel-item">
- <img class="d-block w-100" src="assets/Carousel_3.jpg" alt="Third slide" height="500px">
+ <img class="d-block w-100" src="assets/Carousel_3.jpg" alt="Third slide" height="550px">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
@@ -107,7 +107,7 @@
<div class="container">
<div class="row">
<div class="col text-center">
- <div class="section-title new_arrivals_title">
+ <div class="section-title new_arrivals_title" style="margin-top: 3%;">
<h2>New Arrivals</h2>
</div>
</div>
@@ -115,7 +115,7 @@
<div class="row align-items-center">
<div class="col text-center">
- <div class="new_arrivals_sorting">
+ <div class="new_arrivals_sorting" style="margin-top: 3%; justify-content: center ;">
<ul class="arrivals_grid_sorting clearfix button-group filters-button-group">
<li class="grid_sorting_button button d-flex flex-column justify-content-center align-items-center active is-checked"
data-filter="*">All
@@ -290,7 +290,7 @@
<div class="main_slider" style="background-image: url(assets/slider_1.jpg);">
<div class="container fill_hight">
- <div class="row align-items-center fill_hight">
+ <div class="row align-items-center fill_hight" style="margin-top: -4%;">
<div class="col">
<div class="main_slider_content">
<h6>Spring / Summer Collection 2021</h6>
@@ -306,14 +306,14 @@
<div class="container">
<div class="row">
<div class="col text-center">
- <div class="section_title new_arrivals_title">
+ <div class="section_title new_arrivals_title" style="margin-top: 3%;">
<h2>Best Sellers</h2>
</div>
</div>
</div>
<div class="row">
<div class="col">
- <div class="product_slider_container">
+ <div class="product_slider_container" style="margin-top: 3%;">
<div class="owl-carousel owl-theme product_slider">
<div class="owl-item product_slider_item">
<div class="product-item men">
@@ -502,9 +502,9 @@
</div>
</div>
-<div class="benefit">
+<div class="benefit" style="margin-top: 2%;">
<div class="container">
- <div class="row benefit_row">
+ <div class="row benefit_row" style="justify-content: center;">
<div class="col-lg-3 benefit_col">
<div class="benefit_item d-flex flex-row align-items-center">
<div class="benefit_icon">
@@ -527,17 +527,6 @@
</div>
</div>
</div>
- <div class="col-lg-3 benefit_col">
- <div class="benefit_item d-flex flex-row align-items-center">
- <div class="benefit_icon">
- <i class="fa fa-money" aria-hidden="true"></i>
- </div>
- <div class="benefit_content">
- <h6>Cash on Delivery</h6>
- <p>The Internet tend to Repeat</p>
- </div>
- </div>
- </div>
<div class="col-lg-3 benefit_col">
<div class="benefit_item d-flex flex-row align-items-center">
<div class="benefit_icon">
@@ -553,7 +542,7 @@
</div>
</div>
-<div class="newsletter">
+<div class="newsletter" style="margin-top: 2%;">
<div class="container">
<div class="row">
<div class="col-lg-6">