about_us_page
This commit is contained in:
parent
8afe7e5252
commit
c8e378c181
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 539 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 451 KiB |
|
|
@ -6,11 +6,13 @@
|
|||
<html <?php language_attributes(); ?>>
|
||||
<?php wp_head(); ?>
|
||||
<head>
|
||||
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css"/>
|
||||
<meta charset="<?php bloginfo('charset'); ?>">
|
||||
<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';
|
||||
|
|
@ -87,6 +89,43 @@
|
|||
font-weight: 400;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.main-navigation {
|
||||
display: none; /* hide menu on small screens; replace with hamburger if needed */
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.sell-btn {
|
||||
padding: 6px 10px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.header-actions img {
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
/* Stack items vertically for narrow screens */
|
||||
.header-inner {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.site-logo img {
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.sell-btn {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
<body <?php body_class(); ?>>
|
||||
|
|
@ -100,7 +139,7 @@
|
|||
|
||||
<!-- Main Header -->
|
||||
<div style="width: 100%; background-color: #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.05);">
|
||||
<div style="max-width: 1200px; margin: 0 auto; padding: 10px 0px; display: flex; align-items: center; justify-content: space-between;">
|
||||
<div class="header-inner" style="max-width: 1200px; margin: 0 auto; padding: 10px 0px; display: flex; align-items: center; justify-content: space-between;">
|
||||
<!-- Logo -->
|
||||
<div class="site-logo">
|
||||
<a href="<?php echo esc_url(home_url('/')); ?>">
|
||||
|
|
|
|||
|
|
@ -4,6 +4,288 @@ Template Name: About Us page
|
|||
*/
|
||||
get_header();
|
||||
?>
|
||||
<style>
|
||||
.hero-header {
|
||||
background-color: #ffffff;
|
||||
padding: 15px 50px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-family: 'Poppins', sans-serif;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
|
||||
.hero-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.logo img {
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.hero-nav {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
justify-content: start;
|
||||
}
|
||||
|
||||
.nav-menu {
|
||||
display: flex;
|
||||
list-style: none;
|
||||
gap: 40px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.nav-menu li {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.nav-menu > li > a {
|
||||
text-decoration: none;
|
||||
color: #000;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
font-family: 'Poppins';
|
||||
}
|
||||
|
||||
.has-dropdown:hover .dropdown {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
background-color: white;
|
||||
padding: 10px 0;
|
||||
list-style: none;
|
||||
display: none;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.dropdown li a {
|
||||
display: block;
|
||||
padding: 10px 20px;
|
||||
color: #000;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
font-family: 'Poppins';
|
||||
}
|
||||
|
||||
|
||||
.dropdown li a:hover {
|
||||
background-color: #f0f0f0;
|
||||
}
|
||||
|
||||
.search-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
max-width: 360px;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
width: 100%;
|
||||
padding: 10px 16px 10px 16px; /* padding-right for icon space */
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 1px;
|
||||
font-size: 16px;
|
||||
font-family: 'Poppins', sans-serif;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.search-container img {
|
||||
position: absolute;
|
||||
right: 12px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
pointer-events: none;
|
||||
opacity: 0.6;
|
||||
}
|
||||
.text-heading{
|
||||
color: #B08722;
|
||||
font-size: 14px;
|
||||
letter-spacing: 1px;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.text-title{
|
||||
font-family: 'Cormorant';
|
||||
font-weight: 500;
|
||||
font-size: 44px;
|
||||
}
|
||||
.text-content{
|
||||
font-family: 'Poppins';
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 1.7;
|
||||
}
|
||||
.text-card{
|
||||
font-family: 'Poppins';
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
color: #1A1819B2;
|
||||
}
|
||||
|
||||
.card{
|
||||
border: 1px solid #1A181933;
|
||||
gap: 15px;
|
||||
}
|
||||
.card-title{
|
||||
font-family:'Poppins';
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
<section class="hero-section">
|
||||
<header class="hero-header">
|
||||
<div class="hero-container">
|
||||
<nav class="hero-nav">
|
||||
<ul class="nav-menu">
|
||||
<li class="has-dropdown"><a href="#">Apparel <img src="<?php echo get_stylesheet_directory_uri(); ?>/assets/images/drop_down.png" alt="Dropdown Arrow" class="dropdown-icon" /></a>
|
||||
<ul class="dropdown">
|
||||
<li><a href="#">Jackets</a></li>
|
||||
<li><a href="#">Shirts</a></li>
|
||||
<li><a href="#">T-Shirts</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="has-dropdown"><a href="#">Footwear <img src="<?php echo get_stylesheet_directory_uri(); ?>/assets/images/drop_down.png" alt="Dropdown Arrow" class="dropdown-icon" /></a>
|
||||
<ul class="dropdown">
|
||||
<li><a href="#">Tall Boots</a></li>
|
||||
<li><a href="#">short Boots</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="has-dropdown"><a href="#">Accessories <img src="<?php echo get_stylesheet_directory_uri(); ?>/assets/images/drop_down.png" alt="Dropdown Arrow" class="dropdown-icon" /></a>
|
||||
<ul class="dropdown">
|
||||
<li><a href="#">Gloves</a></li>
|
||||
<li><a href="#">Helmets</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="has-dropdown"><a href="#">Miscellaneous <img src="<?php echo get_stylesheet_directory_uri(); ?>/assets/images/drop_down.png" alt="Dropdown Arrow" class="dropdown-icon" /></a>
|
||||
<ul class="dropdown">
|
||||
<li><a href="#">More Questions</a></li>
|
||||
<li><a href="#">Reach out to us</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<div class="search-container">
|
||||
<input type="text" class="search-input" placeholder="Search">
|
||||
<img src="<?php echo get_stylesheet_directory_uri(); ?>/assets/images/search.png" alt="Dropdown Arrow"/>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
</section>
|
||||
|
||||
<!-- Hero Section -->
|
||||
<section class="position-relative">
|
||||
<img src="<?php echo get_stylesheet_directory_uri();?>/assets/images/frame_22.png" class="img-fluid w-100" alt="Hero Image" style="object-fit: cover;">
|
||||
<!-- <div class="position-absolute top-50 start-50 translate-middle text-white text-center">
|
||||
<h1 class="display-5 fw-semibold">Innovation Meets Tradition</h1>
|
||||
</div> -->
|
||||
</section>
|
||||
|
||||
<!-- Mission Section -->
|
||||
<section class="container py-5">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-md-6">
|
||||
<h6 class="text-heading text-uppercase mb-2">Purpose</h6>
|
||||
<h2 class="text-title mb-3">Our Mission</h2>
|
||||
<p class="text-content">
|
||||
At Recquestrian, we're on a purpose-driven quest to revolutionize the equestrian clothing industry. Created by equestrians, for equestrians, our innovative technology platform is a beacon for sustainable fashion, community connection, and accessibility.
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<img src="<?php echo get_stylesheet_directory_uri();?>/assets/images/piano-tutor.png" class="img-fluid shadow" alt="Our Mission">
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Women-Owned Section -->
|
||||
<section class="container py-5">
|
||||
<div class="row align-items-center flex-md-row-reverse">
|
||||
<div class="col-md-6">
|
||||
<h6 class="text-heading text-uppercase mb-2">Women Led</h6>
|
||||
<h2 class="text-title mb-3">Proudly US-based and Woman-Owned</h2>
|
||||
<p class="text-content">
|
||||
Recquestrian not only prides itself as a leading woman-owned tech platform in the US but also as an ally to passionate riders and eco-conscious consumers. We champion high-end, previously loved attire — ensuring that your style and your values ride together.
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<img src="<?php echo get_stylesheet_directory_uri();?>/assets/images/piano-tutor.png" class="img-fluid shadow" alt="Woman Owned">
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Why Choose Us Section -->
|
||||
<section class="bg-light py-5">
|
||||
<div class="container text-center">
|
||||
<h6 class="text-heading text-uppercase mb-2">Choose Us</h6>
|
||||
<h2 class="text-title mb-4">Why Reequestrian?</h2>
|
||||
<p class="text-content mb-5">
|
||||
Reequestrian isn’t just a marketplace; it’s a movement. Founded by Kaitlin Malaspina, a devoted equestrian parent, we recognized the rapid pace at which young riders outgrow their premium attire. Our solution? A sophisticated platform tailored to meet the unique needs of the equestrian community while promoting sustainable practices in the exciting world of English riding.
|
||||
</p>
|
||||
|
||||
<div class="row g-4">
|
||||
<!-- Card 1 -->
|
||||
<div class="col-md-4">
|
||||
<div class="card p-3 bg-white h-100 d-flex flex-column align-items-start card-custom">
|
||||
<img src="<?php echo get_stylesheet_directory_uri();?>/assets/images/circular_fashion.png" alt="circular fashion" class="icon-img me-3 mt-1">
|
||||
<div>
|
||||
<h5 class="card-title">Sophisticated Technology for Circular Fashion</h5>
|
||||
<p class="text-card">
|
||||
Our cutting-edge platform does more than facilitate transactions; it’s building a network committed to circular fashion. Just as riders create harmonious relationships with their horses, we foster connections amongst community members who value both quality and sustainability.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Card 2 -->
|
||||
<div class="col-md-4">
|
||||
<div class="card p-3 bg-white h-100 d-flex flex-column align-items-start card-custom">
|
||||
<img src="<?php echo get_stylesheet_directory_uri();?>/assets/images/accessibility.png" alt="accessibility" class="icon-img me-3 mt-1">
|
||||
<div>
|
||||
<h5 class="card-title">Accessibility at Its Finest</h5>
|
||||
<p class="text-card">
|
||||
By focusing solely on English riding attire, Reequestrian ensures that the sport becomes more accessible for all enthusiasts. It’s time for your passion to be free from constraints, with a vast array of equestrian clothing available at your fingertips.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Card 3 -->
|
||||
<div class="col-md-4">
|
||||
<div class="card p-3 bg-white h-100 d-flex flex-column align-items-start card-custom">
|
||||
<img src="<?php echo get_stylesheet_directory_uri();?>/assets/images/community.png" alt="community" class="icon-img me-3 mt-1">
|
||||
<div>
|
||||
<h5 class="card-title">Community-Centric Approach</h5>
|
||||
<p class="text-card">
|
||||
Our community-centric approach fosters connections among like-minded individuals. With an unwavering commitment to sustainability and the betterment of our planet, Reequestrian provides an inclusive network that makes English horse riding more attainable for everyone.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<?php get_footer(); ?>
|
||||
|
|
@ -18,7 +18,7 @@ get_header();
|
|||
}
|
||||
|
||||
.hero-header {
|
||||
background-color: rgba(255, 255, 255, 0.95);
|
||||
background-color: #ffffff;
|
||||
padding: 15px 50px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -399,6 +399,9 @@ get_header();
|
|||
height: auto;
|
||||
/* margin-bottom: 20px; */
|
||||
}
|
||||
.boot_img{
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
|
||||
.seller-card h3 {
|
||||
font-size: 20px;
|
||||
|
|
@ -465,7 +468,7 @@ get_header();
|
|||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 768px) {
|
||||
@media (max-width: 767px) {
|
||||
.seller-card {
|
||||
flex: 1 1 100%;
|
||||
}
|
||||
|
|
@ -559,7 +562,7 @@ get_header();
|
|||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 768px) {
|
||||
@media (max-width: 767px) {
|
||||
.verified-sellers-section {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
|
@ -579,6 +582,116 @@ get_header();
|
|||
}
|
||||
|
||||
|
||||
/* home section */
|
||||
/* Base styles from your provided code remain same */
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.hero-content h1 {
|
||||
font-size: 64px;
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
margin-left: 200px;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 992px) {
|
||||
.hero-container {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.hero-header {
|
||||
padding: 15px 20px;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.hero-nav {
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.nav-menu {
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.search-container {
|
||||
margin-top: 15px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
padding: 0 20px;
|
||||
margin-left: 0;
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
||||
.hero-content h1 {
|
||||
font-size: 48px;
|
||||
}
|
||||
|
||||
.hero-content p {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.hero-content h1 {
|
||||
font-size: 36px;
|
||||
}
|
||||
|
||||
.hero-content p {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.hero-button {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
padding: 12px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
position: relative;
|
||||
box-shadow: none;
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
|
||||
.dropdown li a {
|
||||
padding: 8px 12px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.nav-menu li {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.hero-content h1 {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.hero-content p {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.hero-button {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.search-container img {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
<section class="hero-section">
|
||||
|
|
@ -699,7 +812,7 @@ get_header();
|
|||
|
||||
<section class="apparel">
|
||||
<div class="rider-sale-banner">
|
||||
<img src="<?php echo get_stylesheet_directory_uri(); ?>/assets/images/apparel-banner.png" alt="boot 1"/>
|
||||
<img src="<?php echo get_stylesheet_directory_uri(); ?>/assets/images/apparel-banner.png" alt="boot 1" class="img-fluid"/>
|
||||
<!-- <div class="sale-content">
|
||||
<h3>Apparel</h3>
|
||||
</div> -->
|
||||
|
|
@ -750,7 +863,7 @@ get_header();
|
|||
</div>
|
||||
</div>
|
||||
<div class="seller-card">
|
||||
<img src="<?php echo get_stylesheet_directory_uri(); ?>/assets/images/boots.jpg" alt="Fedora boots">
|
||||
<img src="<?php echo get_stylesheet_directory_uri(); ?>/assets/images/boots.jpg" class="boot_img" alt="Fedora boots">
|
||||
<div class="overlay">
|
||||
<h3>Paddock Boots</h3>
|
||||
<a href="#">Visit Store →</a>
|
||||
|
|
@ -789,7 +902,7 @@ get_header();
|
|||
<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">
|
||||
<!-- <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>
|
||||
|
|
@ -801,6 +914,12 @@ get_header();
|
|||
<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>
|
||||
|
||||
|
|
@ -809,26 +928,28 @@ get_header();
|
|||
<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>
|
||||
$(document).ready(function(){
|
||||
$('.multiple-items').slick({
|
||||
infinite: true,
|
||||
slidesToShow: 3,
|
||||
slidesToScroll: 2,
|
||||
arrows: false, // Disable arrows
|
||||
dots: false, // Optional: show dots navigation
|
||||
arrows: false,
|
||||
dots: true,
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 1024,
|
||||
settings: {
|
||||
slidesToShow: 2,
|
||||
slidesToShow: 3,
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 768,
|
||||
settings: {
|
||||
slidesToShow: 1,
|
||||
slidesToShow: 2,
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Reference in a new issue