front-page.php

<?php
	get_header();
?>
		<!-- Hero -->
		<div class="container">
			<div class="text-center mx-auto border rounded-3 mb-5">
				<div class="mx-auto p-3">
					<h2>Choose a Colour</h2>
					<p class="lead mb-4">
						No one has more unique colours than us...<br>
						Iceland Green, Texas Brown, Ultamaroon, Reed Green, Polar Silver, Congo Green, Dolomite, Silver
						Granite, Jupiter Grey, Strato Silver, Light Beige, Black, Jungle Green, Nile Beige, lris Blue,
						Delphin Green, Medium Blue, Horizon Blue, Nile Beige, Prairie Beige, Shetland Grey, Almond Green,
						Coral Red, Diamond Green, lnca Red, &amp; Sepia Silver
					</p>

					<img id="changeMe" src="wp-content/uploads/2022/05/vw-sea-green.png" alt="Black Image">

					<div class="justify-content-center mb-5 mt-5">
						<img class="preview" width="20%" src="wp-content/uploads/2022/05/vw-sea-green.png">
						<img class="preview" width="20%" src="wp-content/uploads/2022/05/vw-red.png">
						<img class="preview" width="20%" src="wp-content/uploads/2022/05/vw-blue.png">
						<img class="preview" width="20%" src="wp-content/uploads/2022/05/vw-silver.png">
						<img class="preview" width="20%" src="wp-content/uploads/2022/05/vw-burgundy.png">
						<img class="preview" width="20%" src="wp-content/uploads/2022/05/vw-yellow.png">
					</div>
				</div>
			</div>
		</div>

		<!-- Gallery -->
		<div class="container">
			<div class="gg-container">
				<h3 class="text-center">Gallery</h3>
				<div class="gg-box">
				<img src="wp-content/uploads/2022/05/gettyimages-654881300-2048x2048-1.jpg">
				<img src="wp-content/uploads/2022/05/gettyimages-3308899-2048x2048-1.jpg">
				<img src="wp-content/uploads/2022/05/9122756112_099f6b2dee_b.jpg">
				<img src="wp-content/uploads/2022/05/vw-you.jpeg">
				<img src="wp-content/uploads/2022/05/convert-red.jpeg">
				<img src="wp-content/uploads/2022/05/65-vw-bug-1-2100x992-1.jpeg">
				<img src="wp-content/uploads/2022/05/180914-vw-beetle-al-1015.jpeg">
				<img src="wp-content/uploads/2022/05/zelectricbeetle-10-1000x667-1.jpeg">
				<img src="wp-content/uploads/2022/05/rLXHa9Dogq4HI8lbUBFLP1MKPulNOBZDc8Tt7y6x_LM.webp">
				<img src="wp-content/uploads/2022/05/36943540.jpeg">
				<img src="wp-content/uploads/2022/05/fd7ed72e78fe2027f21b1dba6d4f961f.jpeg">
				<img src="wp-content/uploads/2022/05/how-to-draw-Vintage-Volkswagen-Beetle-step-10.png">
				<img src="wp-content/uploads/2022/05/vw-beetle-interior.jpeg">
				<img src="wp-content/uploads/2022/05/7508676668_bf5a8107b7_b.jpeg">
				</div>
			</div>
		</div>


		<!-- Features -->
		<div class="container px-4 py-5 bg-light" id="featured-3">
        	<div class="row g-4 py-5 row-cols-1 row-cols-lg-3">

				<div class="feature col text-center">
            		<div class="feature-icon bg-primary bg-gradient p-4">
              			<img style="width:300px;border-radius:50px;" src="wp-content/uploads/2022/05/semi-auto-cutaway.jpeg">
            		</div>
            		<h2>Powerplant</h2>
					<p>Power: 40 BHP (29.44 KW) @ 3900 RPM</p>
          		</div>

				<div class="feature col text-center">
            		<div class="feature-icon bg-primary bg-gradient p-4">
						<img class="img-responsive" style="width:300px;border-radius:50px;" src="wp-content/uploads/2022/05/2e01fcf24f2da91609e63063c0b38573.jpeg">
            		</div>
            		<h2>Parts</h2>
            		<p>We have them</p>
          		</div>

          		<div class="feature col text-center">
            		<div class="feature-icon bg-primary bg-gradient p-3">
              			<img style="width:300px;border-radius:50px;" src="wp-content/uploads/2022/05/zvw20aal.jpeg">
            		</div>
            		<h2>Safety</h2>
            		<p>Now with seatbelts</p>
          		</div>

        	</div>
    	</div>

		<!-- Specs -->
		<div class="container col-xxl-12 px-4 py-5 mt-5">
			<div class="row flex-lg-row-reverse align-items-center g-5 py-5 rounded-3 bg-light">
				<div class="col-10 col-sm-8 col-lg-6 mx-auto">
					<img src="wp-content/uploads/2022/05/1952-VW-Beetle-split-window.webp" class="d-block mx-lg-auto img-fluid border-2 border-dark" alt="Bootstrap Themes" width="700" height="500" loading="lazy">
				</div>
				<div class="col-lg-6 text-center">
					<h2 class="display-5 fw-bold lh-1 mb-3">Specifications</h2>
					<div class="accordion accordion-flush" id="accordionFlushExample">
						<div class="accordion-item">
							<h2 class="accordion-header" id="flush-headingOne">
								<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
									Features
								</button>
							</h2>
							<div id="flush-collapseOne" class="accordion-collapse collapse" aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample">
								<div class="accordion-body">
									<ul>
										<li>Engine Location: Rear</li>
										<li>Drive Type: Rear Wheel</li>
										<li>Body / Chassis: Unitized steel</li>
										<li>Production Years for Series: 1938 - 1980</li>
										<li>Weight: 1600 lbs | 725.748 kg</li>
									</ul>
								</div>
							</div>
						</div>

						<div class="accordion-item">
							<h2 class="accordion-header" id="flush-headingTwo">
								<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo">
									Power
								</button>
							</h2>
							<div id="flush-collapseTwo" class="accordion-collapse collapse" aria-labelledby="flush-headingTwo" data-bs-parent="#accordionFlushExample">
								<div class="accordion-body">
									<ul>
										<li>Opposed 4 | Light alloy finned cylinders</li>
										<li>Displacement: 1192 cc | 72.7 cu in. | 1.2 L.</li>
										<li>Power: 40 BHP (29.44 KW) @ 3900 RPM</li>
										<li>Torque: 64 Ft-Lbs (87 NM) @ 2400 RPM</li>
										<li>Bore: 3.0 in | 77 mm.</li>
										<li>Stroke: 2.5 in | 64 mm.</li>
										<li>Compression: 7.0:1</li>
										<li>Main Bearings: 4</li>
										<li>Construction: Light Alloy block and head</li>
										<li>Solex 1-barrel carburetor</li>
										<li>Transmission: 4 Manual</li>
									</ul>
								</div>
							</div>
						</div>

						<div class="accordion-item">
							<h2 class="accordion-header" id="flush-headingThree">
								<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseThree" aria-expanded="false" aria-controls="flush-collapseThree">
									Dimensions
								</button>
							</h2>
							<div id="flush-collapseThree" class="accordion-collapse collapse" aria-labelledby="flush-headingThree" data-bs-parent="#accordionFlushExample">
								<div class="accordion-body">
									<ul>
										<li>Fuel Capacity: 10.8 Gal</li>
										<li>Seating Capacity: 4</li>
										<li>Doors: 2</li>
										<li><strong>Exterior</strong></li>
										<li>Length:	160.6 in | 4079 mm.</li>
										<li>Width: 62.4 in | 1585 mm.</li>
										<li>Height:	59.1 in | 1501 mm.</li>
										<li>Wheelbase: 94.5 in | 2400 mm.</li>
									</ul>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<!-- Pricing -->
		<div class="container-fluid bg-light">
			<div class="container">
				<div class="text-center mx-auto p-2">
					<div class="mx-auto text-center">
						<h2>Pricing</h2>
						<div class="col-auto pb-2">
							<label class="visually-hidden" for="autoSizingSelect">Trim</label>
							<select class="form-select select-price" id="autoSizingSelect">
								<option selected="">Choose...</option>
								<option value="sedan">Sedan</option>
								<option value="sunroof">Sunroof</option>
								<option value="convertible">Cabriolet</option>
							</select>
						</div>

						<div class="col-auto">
							<label class="visually-hidden" for="autoSizingInput">Trim</label>
							<input type="number" class="form-control base-price" id="autoSizingInput" placeholder="Trim Price" disabled="">
							<span class="base-price"></span>
						</div>

						<h3 class="mt-2">Financing</h3>

						<div class="col-auto">
							<label class="visually-hidden" for="autoSizingInput">Down Payment</label>
							<input type="number" class="form-control down-price" id="autoSizingInput" placeholder="Down Payment">
							<span class="down-price"></span>
						</div>

						<div class="col-auto">
							<label class="visually-hidden" for="autoSizingSelect">Years</label>
							<select class="form-select year-price" id="autoSizingSelect">
								<option value="1">1 Year</option>
								<option value="2">2 Years</option>
								<option value="3">3 Years</option>
								<option value="4">4 years</option>
								<option value="5">5 years</option>
							</select>
						</div>

						<div class="col-auto">
							<label class="visually-hidden" for="autoSizingInput">Trim</label>
							<input type="number" class="form-control month-price" id="autoSizingInput" placeholder="Your Monthly" disabled="">
							<span class="month-price"></span>
						</div>
					</div>
					<span class="fine-print">A 7% interest rate added. VAT extra.</span>
				</div>
			</div>
		</div>


		<!-- <article class="content px-3 py-5 p-md-5">
			<?php
				/*
					// get content from editor
					if (have_posts()) {
					while (have_posts()) {
						the_post();
						the_content();
					}
				} */
			?>
	    </article> -->

<?php
	get_footer();
?>