437 lines
9.8 KiB
PHP
437 lines
9.8 KiB
PHP
<?php
|
|
/**
|
|
* The header for your theme
|
|
*/
|
|
?><!DOCTYPE html>
|
|
<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>
|
|
|
|
<style>
|
|
@font-face {
|
|
font-family: 'Cormorant';
|
|
src: url('<?php echo get_stylesheet_directory_uri(); ?>/fonts/Cormorant/static/Cormorant-SemiBold.ttf') format('truetype');
|
|
font-weight: 600;
|
|
font-style: normal;
|
|
}
|
|
@font-face {
|
|
font-family: 'Cormorant';
|
|
src: url('<?php echo get_stylesheet_directory_uri(); ?>/fonts/Cormorant/static/Cormorant-Medium.ttf') format('truetype');
|
|
font-weight: 500;
|
|
font-style: normal;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Poppins';
|
|
src: url('<?php echo get_stylesheet_directory_uri(); ?>/fonts/Poppins/Poppins-Regular.ttf') format('truetype');
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
}
|
|
@font-face {
|
|
font-family: 'Poppins';
|
|
src: url('<?php echo get_stylesheet_directory_uri(); ?>/fonts/Poppins/Poppins-Medium.ttf') format('truetype');
|
|
font-weight: 500;
|
|
font-style: normal;
|
|
}
|
|
@font-face {
|
|
font-family: 'Poppins';
|
|
src: url('<?php echo get_stylesheet_directory_uri(); ?>/fonts/Poppins/Poppins-Light.ttf') format('truetype');
|
|
font-weight: 300;
|
|
font-style: normal;
|
|
}
|
|
|
|
.banner{
|
|
background-color: #143D28;
|
|
color: #fff;
|
|
text-align: center;
|
|
padding: 5px 0;
|
|
height: 50px;
|
|
}
|
|
.banner span {
|
|
font-family: 'Poppins', sans-serif;
|
|
font-weight:400;
|
|
font-size: 14px;
|
|
line-height: 26px;
|
|
letter-spacing: 0.7px;
|
|
color: #EFEBE4;
|
|
}
|
|
.header-menu{
|
|
display: flex;
|
|
list-style: none;
|
|
gap: 40px;
|
|
font-family: 'Poppins', sans-serif;
|
|
font-size: 16px;
|
|
font-weight: 400;
|
|
margin-top: 10px;
|
|
}
|
|
.header-menu li a{
|
|
text-decoration: none !important;
|
|
}
|
|
.header-actions{
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 28px;
|
|
}
|
|
.header-actions .sell-btn{
|
|
background-color: #143D28;
|
|
color: white;
|
|
padding: 8px 14px;
|
|
border-radius: 2px;
|
|
text-decoration: none;
|
|
font-family: 'Poppins', sans-serif;
|
|
font-size: 16px;
|
|
font-weight: 400;
|
|
}
|
|
|
|
/* Hero Section */
|
|
|
|
/* .hero-section {
|
|
background:
|
|
linear-gradient(to left,rgba(117, 117, 117, 0) 0%,rgb(46, 42, 42) ),
|
|
url('<?php echo get_stylesheet_directory_uri(); ?>/assets/images/hero-bg.png') no-repeat center center/cover;
|
|
color: #fff;
|
|
height: 100vh;
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
} */
|
|
|
|
.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;
|
|
}
|
|
|
|
@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;
|
|
}
|
|
}
|
|
@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>
|
|
|
|
<body <?php body_class(); ?>>
|
|
<?php wp_body_open(); ?>
|
|
|
|
<header id="site-header" role="banner">
|
|
<!-- Top Bar -->
|
|
<div class="banner">
|
|
<span>SHOPPING FOR THE ECO-FORWARD EQUESTRIAN</span>
|
|
</div>
|
|
|
|
<!-- Main Header -->
|
|
<div style="width: 100%; background-color: #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.05);">
|
|
<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('/')); ?>">
|
|
<img src="<?php echo get_stylesheet_directory_uri(); ?>/assets/images/header_logo.png" alt="REEQUESTRIAN Logo" style="height: 40px;">
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Navigation Menu -->
|
|
<nav class="main-navigation" role="navigation" aria-label="<?php esc_attr_e('Main Menu', 'twentytwentyfive-child'); ?>">
|
|
<?php
|
|
wp_nav_menu(array(
|
|
'theme_location' => 'primary',
|
|
'menu_class' => 'header-menu',
|
|
'container' => false,
|
|
'fallback_cb' => false
|
|
));
|
|
?>
|
|
</nav>
|
|
|
|
<!-- Right Buttons -->
|
|
<div class="header-actions">
|
|
<a class="sell-btn" href="/sell-with-us">Sell with us</a>
|
|
<a href="/my-account" class="account-link">
|
|
<img src="<?php echo get_stylesheet_directory_uri(); ?>/assets/images/my-account.png" alt="My Account" />
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<section class="hero-section-header">
|
|
<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>
|