Untitled
unknown
plain_text
5 months ago
14 kB
7
Indexable
<!-- content-featured-car.php --> <div class="col-lg-3 col-md-4 col-sm-6"> <div class="featured-car-card"> <?php if (has_post_thumbnail()) : ?> <div class="car-thumbnail"> <a href="<?php the_permalink(); ?>" class="thumbnail-link"> <?php the_post_thumbnail('large', array( 'class' => 'img-fluid', 'alt' => get_the_title() )); ?> <div class="hover-overlay"> <span class="view-details">View Details</span> </div> </a> </div> <?php endif; ?> <div class="car-details"> <div class="car-specs"> <div class="spec-item"> <i class="fas fa-calendar-alt"></i> <span><?php echo esc_html(get_post_meta(get_the_ID(), '_model_year', true)); ?></span> </div> <div class="spec-item"> <i class="fas fa-tachometer-alt"></i> <span><?php echo esc_html(get_post_meta(get_the_ID(), '_mileage', true)); ?> Mi</span> </div> <div class="spec-item"> <i class="fas fa-horse-head"></i> <span><?php echo esc_html(get_post_meta(get_the_ID(), '_horsepower', true)); ?>HP</span> </div> <div class="spec-item"> <i class="fas fa-cog"></i> <span><?php echo esc_html(get_post_meta(get_the_ID(), '_transmission', true)); ?></span> </div> </div> <h3 class="car-title"> <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a> </h3> <?php $price = get_post_meta(get_the_ID(), '_price', true); if ($price) : $formatted_price = number_format((float)$price); ?> <div class="car-price"> <i class="fas fa-tag"></i> <span>$<?php echo esc_html($formatted_price); ?></span> </div> <?php endif; ?> <div class="car-description"> <?php the_excerpt(); ?> </div> <a href="<?php the_permalink(); ?>" class="view-details-btn"> View Details <i class="fas fa-arrow-right"></i> </a> </div> </div> </div> <style> .featured-car-card { background: #ffffff; border-radius: 15px; overflow: hidden; box-shadow: 0 2px 15px rgba(0,0,0,0.05); margin-bottom: 30px; transition: transform 0.3s ease, box-shadow 0.3s ease; } .featured-car-card:hover { transform: translateY(-5px); box-shadow: 0 5px 25px rgba(0,0,0,0.1); } .car-thumbnail { position: relative; overflow: hidden; aspect-ratio: 16/10; } .thumbnail-link { display: block; } .car-thumbnail img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .hover-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(44, 62, 80, 0.7); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s ease; } .view-details { color: #ffffff; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; font-size: 14px; } .featured-car-card:hover .hover-overlay { opacity: 1; } .featured-car-card:hover .car-thumbnail img { transform: scale(1.1); } .car-details { padding: 25px; } .car-specs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid #f1f2f6; } .spec-item { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #7f8c8d; } .spec-item i { color: #e74c3c; font-size: 14px; } .car-title { font-size: 1.25rem; font-weight: 600; margin-bottom: 15px; line-height: 1.4; } .car-title a { color: #2c3e50; text-decoration: none; transition: color 0.3s ease; } .car-title a:hover { color: #e74c3c; } .car-price { display: inline-flex; align-items: center; gap: 8px; background: rgba(231, 76, 60, 0.1); color: #e74c3c; padding: 8px 15px; border-radius: 8px; margin-bottom: 20px; font-weight: 600; font-size: 1.1rem; } .car-price i { font-size: 14px; } .car-description { color: #7f8c8d; font-size: 14px; line-height: 1.6; margin-bottom: 20px; } .view-details-btn { display: inline-flex; align-items: center; gap: 8px; color: #e74c3c; text-decoration: none; font-weight: 600; font-size: 14px; transition: gap 0.3s ease; } .view-details-btn:hover { gap: 12px; color: #c0392b; } @media (max-width: 991px) { .car-specs { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 767px) { .featured-car-card { max-width: 400px; margin-left: auto; margin-right: auto; } } </style> <?php get_header(); ?> <!-- single-featured_car.php --> <div class="featured-car-single"> <?php while (have_posts()) : the_post(); ?> <!-- Hero Section --> <div class="car-hero"> <div class="container"> <div class="row align-items-center"> <div class="col-lg-6"> <h1 class="car-title"><?php the_title(); ?></h1> <div class="car-price"> <?php $price = get_post_meta(get_the_ID(), '_price', true); if ($price) : echo '$' . number_format((float)$price); endif; ?> </div> </div> <div class="col-lg-6"> <div class="quick-specs"> <div class="spec-box"> <i class="fas fa-calendar-alt spec-icon"></i> <div class="spec-content"> <span class="spec-label">YEAR</span> <span class="spec-value"><?php echo esc_html(get_post_meta(get_the_ID(), '_model_year', true)); ?></span> </div> </div> <div class="spec-box"> <i class="fas fa-tachometer-alt spec-icon"></i> <div class="spec-content"> <span class="spec-label">MILEAGE</span> <span class="spec-value"><?php echo esc_html(get_post_meta(get_the_ID(), '_mileage', true)); ?> mi</span> </div> </div> <div class="spec-box"> <i class="fas fa-horse-head spec-icon"></i> <div class="spec-content"> <span class="spec-label">POWER</span> <span class="spec-value"><?php echo esc_html(get_post_meta(get_the_ID(), '_horsepower', true)); ?> HP</span> </div> </div> <div class="spec-box"> <i class="fas fa-cog spec-icon"></i> <div class="spec-content"> <span class="spec-label">TRANSMISSION</span> <span class="spec-value"><?php echo esc_html(get_post_meta(get_the_ID(), '_transmission', true)); ?></span> </div> </div> </div> </div> </div> </div> </div> <!-- Main Content --> <div class="car-content"> <div class="container"> <div class="row"> <div class="col-lg-8"> <!-- Gallery --> <div class="car-gallery"> <?php if (has_post_thumbnail()) : ?> <div class="main-image"> <?php the_post_thumbnail('full', array('class' => 'img-fluid')); ?> </div> <?php endif; ?> </div> <!-- Description --> <div class="car-description"> <h3>About this <?php the_title(); ?></h3> <?php the_content(); ?> </div> </div> <div class="col-lg-4"> <!-- Contact Box --> <div class="contact-box"> <h3>Interested in this car?</h3> <a href="<?php echo esc_url(home_url('/contact')); ?>" class="btn-contact"> Contact Dealer </a> <div class="dealer-info"> <p><i class="fas fa-phone"></i> (555) 123-4567</p> <p><i class="fas fa-envelope"></i> sales@dealership.com</p> <p><i class="fas fa-map-marker-alt"></i> 123 Dealer Street</p> </div> </div> </div> </div> </div> </div> <!-- Similar Cars --> <div class="similar-cars"> <div class="container"> <h3>You May Also Like</h3> <div class="row"> <?php $args = array( 'post_type' => 'featured_car', 'posts_per_page' => 3, 'post__not_in' => array(get_the_ID()), 'orderby' => 'rand' ); $related_cars = new WP_Query($args); if ($related_cars->have_posts()) : while ($related_cars->have_posts()) : $related_cars->the_post(); get_template_part('template-parts/content', 'featured-car'); endwhile; wp_reset_postdata(); endif; ?> </div> </div> </div> <?php endwhile; ?> </div> <style> .featured-car-single { padding-top: 80px; } .car-hero { background: linear-gradient(to bottom, #f8f9fa, #fff); padding: 60px 0; margin-bottom: 40px; } .car-title { font-size: 2.8rem; font-weight: 700; color: #333; margin-bottom: 20px; } .car-price { font-size: 2.2rem; font-weight: 600; color: #ff3300; } .quick-specs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 40px; } .spec-box { background: #f8f9fa; border-radius: 8px; padding: 24px; display: flex; align-items: flex-start; gap: 16px; } .spec-icon { color: #ff3300; font-size: 16px; } .spec-content { display: flex; flex-direction: column; } .spec-label { font-size: 14px; color: #666; text-transform: uppercase; margin-bottom: 8px; } .spec-value { font-size: 24px; font-weight: 600; color: #333; } .car-gallery { margin-bottom: 40px; border-radius: 10px; overflow: hidden; box-shadow: 0 3px 20px rgba(0,0,0,0.1); } .car-gallery .main-image { width: 100%; height: auto; } .car-gallery .main-image img { width: 100%; height: auto; object-fit: cover; display: block; max-height: 500px; } .car-description { background: #fff; padding: 30px; border-radius: 10px; box-shadow: 0 2px 15px rgba(0,0,0,0.08); } .car-description h3 { font-size: 1.8rem; color: #333; margin-bottom: 20px; } .contact-box { background: #fff; padding: 30px; border-radius: 10px; box-shadow: 0 2px 15px rgba(0,0,0,0.08); position: sticky; top: 100px; } .contact-box h3 { font-size: 1.5rem; color: #333; margin-bottom: 25px; text-align: center; } .btn-contact { display: inline-block; width: 100%; background: #ff3300; color: #fff !important; text-align: center; padding: 15px; border-radius: 5px; text-decoration: none !important; font-weight: 600; margin-bottom: 25px; transition: all 0.3s ease; border: 2px solid #ff3300; cursor: pointer; } .btn-contact:hover, .btn-contact:focus, .btn-contact:active { background: #e62e00; color: #fff !important; text-decoration: none !important; transform: translateY(-2px); box-shadow: 0 4px 10px rgba(230, 46, 0, 0.2); border-color: #e62e00; } .dealer-info { border-top: 1px solid #eee; padding-top: 20px; } .dealer-info p { margin-bottom: 15px; color: #666; } .dealer-info i { width: 20px; color: #ff3300; margin-right: 10px; } .similar-cars { background: #f8f9fa; padding: 60px 0; margin-top: 60px; } .similar-cars h3 { font-size: 2rem; color: #333; margin-bottom: 40px; text-align: center; } @media (max-width: 991px) { .quick-specs { margin-top: 30px; } .contact-box { position: static; margin-top: 30px; } } @media (max-width: 767px) { .car-hero { padding: 40px 0; } .car-title { font-size: 2.2rem; } .car-price { font-size: 1.8rem; } .quick-specs { grid-template-columns: 1fr; gap: 16px; } } </style> <?php get_footer(); ?>
Editor is loading...
Leave a Comment