Skip to content

Commit

Permalink
Update index.html
Browse files Browse the repository at this point in the history 
Signed-off-by: The-User-Python <97610126+The-User-Python@users.noreply.github.com>
  • Loading branch information
@The-User-Python
The-User-Python authored Feb 6, 2024
1 parent 154e490 commit cc7fabe
Showing 1 changed file with 143 additions and 21 deletions.
164 changes: 143 additions & 21 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -212,6 +212,90 @@
margin-top: 10px;
}

.dynamic-bg {
min-height: 200px;
background: linear-gradient(45deg, #ffcc00, #333);
color: #fff;
padding: 20px;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
transition: background 0.5s;
}

.featured-categories {
display: flex;
gap: 20px;
margin-top: 20px;
justify-content: space-around;
}

.featured-category {
text-align: center;
flex: 1;
padding: 20px;
background-color: #fff;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
border-radius: 5px;
transition: transform 0.3s;
cursor: pointer;
}

.featured-category:hover {
transform: scale(1.05);
}

.best-sellers {
margin-top: 20px;
background-color: #fff;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
padding: 20px;
border-radius: 5px;
}

.best-sellers h2 {
color: #ffcc00;
}

.best-sellers-carousel {
display: flex;
overflow-x: auto;
gap: 20px;
margin-top: 10px;
padding-bottom: 20px;
scrollbar-width: thin;
scrollbar-color: #333 #f8f8f8;
}

.best-seller-item {
flex-shrink: 0;
width: 200px;
text-align: center;
padding: 10px;
background-color: #f8f8f8;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
border-radius: 5px;
}

.best-seller-item img {
max-width: 100%;
border-radius: 5px;
margin-bottom: 10px;
}

.best-seller-item h3 {
color: #333;
font-size: 1em;
margin-bottom: 5px;
}

.best-seller-item p {
color: #555;
font-size: 0.9em;
}

@media only screen and (max-width: 600px) {
.navigation {
flex-direction: column;
Expand Down Expand Up @@ -239,6 +323,30 @@
.search-input {
margin-bottom: 10px;
}

.language-switcher {
flex-direction: column;
align-items: flex-end;
}

.dynamic-bg {
padding: 10px;
}

.featured-categories {
flex-direction: column;
}

.best-sellers-carousel {
flex-direction: column;
gap: 10px;
padding-bottom: 10px;
overflow-x: initial;
}

.best-seller-item {
width: 100%;
}
}
</style>
</head>
Expand Down Expand Up @@ -289,34 +397,48 @@ <h3 class="highlight">Explore More</h3>

<div class="line"></div>

<div class="new-section">
<h2 class="highlight">Exciting New Arrivals!</h2>
<p>Discover the latest trends and must-have items. Shop now to stay ahead of the fashion curve.</p>
<div class="dynamic-bg">
<h2 class="highlight">New Season, New Styles</h2>
<p>Check out our latest arrivals and stay ahead of the fashion curve.</p>
<a class="nav-link" href="new-arrivals.html">View New Arrivals</a>
</div>

<div class="line"></div>

<div class="carousel-container">
<div class="carousel">
<div class="carousel-item">
<!-- Featured Product 1 -->
<img src="product1.jpg" alt="Featured Product 1">
<h3 class="highlight">Featured Product 1</h3>
<p>Explore the amazing features of our latest product.</p>
<a class="nav-link" href="featured-product1.html">Shop Now</a>
</div>

<div class="carousel-item">
<!-- Featured Product 2 -->
<img src="product2.jpg" alt="Featured Product 2">
<h3 class="highlight">Featured Product 2</h3>
<p>Discover the style and elegance of our new arrival.</p>
<a class="nav-link" href="featured-product2.html">Shop Now</a>
</div>
<div class="featured-categories">
<div class="featured-category">
<h3 class="highlight">Electronics</h3>
<p>Explore cutting-edge gadgets and tech essentials.</p>
<a class="nav-link" href="#">Shop Electronics</a>
</div>
<div class="featured-category">
<h3 class="highlight">Fashion</h3>
<p>Discover the latest trends in clothing and accessories.</p>
<a class="nav-link" href="#">Shop Fashion</a>
</div>
<div class="featured-category">
<h3 class="highlight">Home Essentials</h3>
<p>Find quality home and lifestyle products for every need.</p>
<a class="nav-link" href="#">Shop Home</a>
</div>
</div>

<!-- Add more carousel items as needed -->
<div class="line"></div>

<div class="best-sellers">
<h2 class="highlight">Best Sellers</h2>
<div class="best-sellers-carousel">
<div class="best-seller-item">
<img src="bestseller1.jpg" alt="Best Seller 1">
<h3>Best Seller 1</h3>
<p>Top-rated product with great reviews.</p>
</div>
<div class="best-seller-item">
<img src="bestseller2.jpg" alt="Best Seller 2">
<h3>Best Seller 2</h3>
<p>Customer favorite for quality and style.</p>
</div>
<!-- Add more best sellers as needed -->
</div>
</div>

Expand Down

0 comments on commit cc7fabe

Please sign in to comment.