Homepage_creation
This commit is contained in:
parent
e62142ec36
commit
8afe7e5252
Binary file not shown.
|
After Width: | Height: | Size: 1 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.3 MiB |
BIN
wp-content/themes/twentytwentyfive-child/assets/images/boots.jpg
Normal file
BIN
wp-content/themes/twentytwentyfive-child/assets/images/boots.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 134 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
BIN
wp-content/themes/twentytwentyfive-child/assets/images/hats.png
Normal file
BIN
wp-content/themes/twentytwentyfive-child/assets/images/hats.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 100 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 215 B |
|
|
@ -206,3 +206,5 @@
|
|||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@
|
|||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<?php wp_head(); ?>
|
||||
</head>
|
||||
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
|
||||
<style>
|
||||
@font-face {
|
||||
font-family: 'Cormorant';
|
||||
|
|
|
|||
|
|
@ -287,7 +287,7 @@ get_header();
|
|||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: 30px;
|
||||
gap: 40px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
|
|
@ -301,24 +301,24 @@ get_header();
|
|||
} */
|
||||
|
||||
.product-card .title {
|
||||
font-size: 14px;
|
||||
font-size: 16px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.product-card .price {
|
||||
font-weight: 600;
|
||||
font-weight: 500;
|
||||
margin-top: 5px;
|
||||
font-size: 14px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.see-all {
|
||||
display: block;
|
||||
text-align: center;
|
||||
margin-top: 30px;
|
||||
font-weight: 500;
|
||||
font-weight: 400;
|
||||
color: #1a1819;
|
||||
text-decoration: none;
|
||||
font-size: 14px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
/* -------------------- Responsive -------------------- */
|
||||
|
|
@ -358,6 +358,227 @@ get_header();
|
|||
}
|
||||
|
||||
|
||||
/* Sellers styling */
|
||||
.section-title {
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
font-size: 14px;
|
||||
letter-spacing: 1px;
|
||||
color: #B08722;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.section-heading {
|
||||
font-family:'Cormorant';
|
||||
text-align: center;
|
||||
font-size: 44px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 40px;
|
||||
color:#1A1819;
|
||||
}
|
||||
|
||||
/* Verified Sellers */
|
||||
.verified-sellers {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
/* gap: 20px; */
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.seller-card {
|
||||
flex: 1 1 45%;
|
||||
background-color: #f6f6f6;
|
||||
/* text-align: center; */
|
||||
/* padding: 30px; */
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.seller-card img {
|
||||
max-width: 525px;
|
||||
height: auto;
|
||||
/* margin-bottom: 20px; */
|
||||
}
|
||||
|
||||
.seller-card h3 {
|
||||
font-size: 20px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.visit-store {
|
||||
font-size: 14px;
|
||||
color: #1a1a1a;
|
||||
text-decoration: none;
|
||||
border-bottom: 1px solid;
|
||||
}
|
||||
|
||||
.visit-store:hover {
|
||||
color: #A08B42;
|
||||
}
|
||||
|
||||
/* Testimonials */
|
||||
.testimonials {
|
||||
/* background-color: #fafafa; */
|
||||
}
|
||||
|
||||
.testimonial-wrapper {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 28px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.testimonial {
|
||||
/* background: #fff; */
|
||||
padding: 10px;
|
||||
max-width: 443px;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
.testimonial img {
|
||||
object-fit: cover;
|
||||
float: left;
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
.testimonial p {
|
||||
font-family:'Poppins';
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
/* margin: 10px 0; */
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.stars {
|
||||
color: #FFA500;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.author {
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
color: #555;
|
||||
margin-top: 10px;
|
||||
display: flex;
|
||||
justify-content:space-evenly;
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 768px) {
|
||||
.seller-card {
|
||||
flex: 1 1 100%;
|
||||
}
|
||||
|
||||
.testimonial-wrapper {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.verified-sellers-section {
|
||||
max-width: 1320px;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
/* gap: 30px; */
|
||||
align-items: stretch;
|
||||
flex-wrap: wrap;
|
||||
margin-block: 70px;s
|
||||
}
|
||||
|
||||
.seller-text {
|
||||
flex: 1 1 100%;
|
||||
max-width: 300px;
|
||||
}
|
||||
|
||||
.seller-text .label {
|
||||
font-size: 14px;
|
||||
font-family:'Poppins';
|
||||
font-weight:500;
|
||||
text-transform: uppercase;
|
||||
color: #B08722;
|
||||
letter-spacing: 1px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.seller-text h2 {
|
||||
font-family:'Cormorant';
|
||||
font-weight:500;
|
||||
font-size: 44px;
|
||||
font-weight: normal;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.seller-images {
|
||||
display: flex;
|
||||
flex: 1 1 60%;
|
||||
/* gap: 20px; */
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.seller-card {
|
||||
position: relative;
|
||||
flex: 1 1 45%;
|
||||
/* border-radius: 6px; */
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.seller-card img {
|
||||
/* height: 100%; */
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.seller-card .overlay {
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
left: 20px;
|
||||
color: #1a1a1a;
|
||||
/* background-color: rgba(255, 255, 255, 0.9); */
|
||||
padding: 10px 14px;
|
||||
border-radius: 6px;
|
||||
max-width: 90%;
|
||||
}
|
||||
|
||||
.seller-card .overlay h3 {
|
||||
font-family:'Cormorant';
|
||||
font-weight: 500;
|
||||
font-size: 36px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.seller-card .overlay a {
|
||||
font-family:'Poppins';
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.seller-card .overlay a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 768px) {
|
||||
.verified-sellers-section {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.seller-images {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.seller-card {
|
||||
flex: 1 1 100%;
|
||||
}
|
||||
|
||||
.seller-text {
|
||||
max-width: 100%;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
<section class="hero-section">
|
||||
|
|
@ -443,7 +664,6 @@ get_header();
|
|||
<p>Helmets, Riding Boots, Breeches, Gloves, Vests and more—for less</p>
|
||||
<a href="#" class="btn">Shop Now</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Discover More Section -->
|
||||
|
|
@ -453,30 +673,165 @@ get_header();
|
|||
<div class="discover-grid">
|
||||
<div class="product-card">
|
||||
<img src="<?php echo get_stylesheet_directory_uri(); ?>/assets/images/boot_1.png" alt="boot 1"/>
|
||||
<p class="title">ARIAT Unisex-Child Scout Zip Paddock Boot</p>
|
||||
<p class="title">ARIAT Unisex-Child Scout Zip <br> Paddock Boot</p>
|
||||
<p class="price">$40.00</p>
|
||||
</div>
|
||||
<div class="product-card">
|
||||
<img src="<?php echo get_stylesheet_directory_uri(); ?>/assets/images/boot_2.png" alt="boot 2"/>
|
||||
<p class="title">ARIAT Unisex-Child Scout Zip Paddock Boot</p>
|
||||
<p class="title">ARIAT Unisex-Child Scout Zip <br> Paddock Boot</p>
|
||||
<p class="price">$40.00</p>
|
||||
</div>
|
||||
<div class="product-card">
|
||||
<img src="<?php echo get_stylesheet_directory_uri(); ?>/assets/images/boot_3.png" alt="boot 2"/>
|
||||
<p class="title">ARIAT Unisex-Child Scout Zip Paddock Boot</p>
|
||||
<p class="title">ARIAT Unisex-Child Scout Zip <br> Paddock Boot</p>
|
||||
<p class="price">$40.00</p>
|
||||
</div>
|
||||
<div class="product-card">
|
||||
<img src="<?php echo get_stylesheet_directory_uri(); ?>/assets/images/boot_4.png" alt="boot 2"/>
|
||||
<p class="title">ARIAT Unisex-Child Scout Zip Paddock Boot</p>
|
||||
<p class="title">ARIAT Unisex-Child Scout Zip <br> Paddock Boot</p>
|
||||
<p class="price">$40.00</p>
|
||||
</div>
|
||||
</div>
|
||||
<a href="#" class="see-all">See all →</a>
|
||||
<a href="#" class="see-all">See all <img src="<?php echo get_stylesheet_directory_uri();?>/assets/images/see-all.png" alt="see-all"></a>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
<section class="apparel">
|
||||
<div class="rider-sale-banner">
|
||||
<img src="<?php echo get_stylesheet_directory_uri(); ?>/assets/images/apparel-banner.png" alt="boot 1"/>
|
||||
<!-- <div class="sale-content">
|
||||
<h3>Apparel</h3>
|
||||
</div> -->
|
||||
</div>
|
||||
|
||||
<div class="discover-section">
|
||||
<p class="subheading">Top Picks</p>
|
||||
<h2 class="heading">Galloping Gear: This Week's Top Picks for Young Riders</h2>
|
||||
<div class="discover-grid">
|
||||
<div class="product-card">
|
||||
<img src="<?php echo get_stylesheet_directory_uri(); ?>/assets/images/boot_1.png" alt="boot 1"/>
|
||||
<p class="title">ARIAT Unisex-Child Scout Zip <br> Paddock Boot</p>
|
||||
<p class="price">$40.00</p>
|
||||
</div>
|
||||
<div class="product-card">
|
||||
<img src="<?php echo get_stylesheet_directory_uri(); ?>/assets/images/boot_2.png" alt="boot 2"/>
|
||||
<p class="title">ARIAT Unisex-Child Scout Zip <br> Paddock Boot</p>
|
||||
<p class="price">$40.00</p>
|
||||
</div>
|
||||
<div class="product-card">
|
||||
<img src="<?php echo get_stylesheet_directory_uri(); ?>/assets/images/boot_3.png" alt="boot 2"/>
|
||||
<p class="title">ARIAT Unisex-Child Scout Zip <br> Paddock Boot</p>
|
||||
<p class="price">$40.00</p>
|
||||
</div>
|
||||
<div class="product-card">
|
||||
<img src="<?php echo get_stylesheet_directory_uri(); ?>/assets/images/boot_4.png" alt="boot 2"/>
|
||||
<p class="title">ARIAT Unisex-Child Scout Zip <br> Paddock Boot</p>
|
||||
<p class="price">$40.00</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="verified-sellers-section">
|
||||
<!-- Left Text Column -->
|
||||
<div class="seller-text">
|
||||
<div class="label">Sellers</div>
|
||||
<h2>Meet Our<br>Verified Sellers</h2>
|
||||
</div>
|
||||
|
||||
<!-- Right Image Cards -->
|
||||
<div class="seller-images">
|
||||
<div class="seller-card">
|
||||
<img src="<?php echo get_stylesheet_directory_uri(); ?>/assets/images/hats.png" alt="Fedora Hats">
|
||||
<div class="overlay">
|
||||
<h3>Fedora Hats</h3>
|
||||
<a href="#">Visit Store →</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="seller-card">
|
||||
<img src="<?php echo get_stylesheet_directory_uri(); ?>/assets/images/boots.jpg" alt="Fedora boots">
|
||||
<div class="overlay">
|
||||
<h3>Paddock Boots</h3>
|
||||
<a href="#">Visit Store →</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Testimonials Section -->
|
||||
<section class="testimonials">
|
||||
<div class="section-title">Testimonials</div>
|
||||
<div class="section-heading">Happy Customers</div>
|
||||
|
||||
<div class="testimonial-wrapper multiple-items">
|
||||
<div class="testimonial">
|
||||
<img src="<?php echo get_stylesheet_directory_uri();?>/assets/images/client-1.png" alt="Customer">
|
||||
<div class="stars">★★★★★</div>
|
||||
<p>The quality of the riding boots I purchased is outstanding. Comfortable, durable, fit perfectly, provide excellent support and stylish — I couldn’t ask for more!</p>
|
||||
<div class="author">– Emily R., Competitive Rider</div>
|
||||
</div>
|
||||
<div class="testimonial">
|
||||
<img src="<?php echo get_stylesheet_directory_uri();?>/assets/images/client-2.png" alt="Customer">
|
||||
<div class="stars">★★★★★</div>
|
||||
<p>Finally, gear that keeps up with my rides! The saddle I bought provides excellent support, and my horse seems happier too.</p>
|
||||
<div class="author">– Jack M., Trail Rider</div>
|
||||
</div>
|
||||
<div class="testimonial">
|
||||
<img src="<?php echo get_stylesheet_directory_uri();?>/assets/images/client-3.png" alt="Customer">
|
||||
<div class="stars">★★★★★</div>
|
||||
<p>I love how this store combines elegance and practicality. My new riding jacket looks fantastic both in the arena and around town!</p>
|
||||
<div class="author">– Rachel K., First-Time Rider</div>
|
||||
</div>
|
||||
<div class="testimonial">
|
||||
<img src="<?php echo get_stylesheet_directory_uri();?>/assets/images/client-1.png" alt="Customer">
|
||||
<div class="stars">★★★★★</div>
|
||||
<p>I love how this store combines elegance and practicality. My new riding jacket looks fantastic both in the arena and around town!</p>
|
||||
<div class="author">– Rachel K., First-Time Rider</div>
|
||||
</div>
|
||||
<div class="testimonial">
|
||||
<img src="<?php echo get_stylesheet_directory_uri();?>/assets/images/client-2.png" alt="Customer">
|
||||
<div class="stars">★★★★★</div>
|
||||
<p>I love how this store combines elegance and practicality. My new riding jacket looks fantastic both in the arena and around town!</p>
|
||||
<div class="author">– Rachel K., First-Time Rider</div>
|
||||
</div>
|
||||
<div class="testimonial">
|
||||
<img src="<?php echo get_stylesheet_directory_uri();?>/assets/images/client-3.png" alt="Customer">
|
||||
<div class="stars">★★★★★</div>
|
||||
<p>I love how this store combines elegance and practicality. My new riding jacket looks fantastic both in the arena and around town!</p>
|
||||
<div class="author">– Rachel K., First-Time Rider</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
|
||||
<script>
|
||||
$('.multiple-items').slick({
|
||||
infinite: true,
|
||||
slidesToShow: 3,
|
||||
slidesToScroll: 2,
|
||||
arrows: false, // Disable arrows
|
||||
dots: false, // Optional: show dots navigation
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 1024,
|
||||
settings: {
|
||||
slidesToShow: 2,
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 768,
|
||||
settings: {
|
||||
slidesToShow: 1,
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue