<div class="container-fluid">
<!-- Nav Bar -->
<nav class="navbar navbar-expand-lg navbar-dark">
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto">
<li>
<a class="nav-link" href="#"><i class="fa-brands fa-apple"></i></a>
</li>
<li class="nav-item">
<a class="nav-link" href="index 2.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="product.html">Products</a>
</li>
<li class="nav-item">
<a class="nav-link" href="product.html#bestseller">Best-Sellers</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#cta">Contact Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="fas fa-search"></i></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="fas fa-shopping-bag"></i></a>
</li>
</ul>
</div>
</nav>
</div>
<div class="col-lg-12">
<h1 class="big-heading">Stay Productive with the Newest Apple Products.</h1>
</div>
<a href="product.html"><h2 class="section-heading">A New Device for Everyone Needs</h2></a>
<p>Stay Productive.</p>
<div class="row">
<div class="product-column col-lg-4 col-md-6">
<div class="card">
<div class="card-body">
<img class="iphone-pic" src="images/iphone_pic.jpeg" alt="#"/>
<a href="product.html#iphone"><button class="btn btn-lg btn-outline-dark col-12" type="button" id="#iphone">iPhone</button></a>
</div>
</div>
</div>
<div class="product-column col-lg-4 col-md-6">
<div class="card">
<div class="card-body">
<img class="macbookhome-pic" src="images/macbook_pic.jpeg" alt="#"/>
<a href="product.html#mac"><button class="btn btn-lg btn-dark col-12" type="button">Mac</button></a>
</div>
</div>
</div>
<div class="product-column col-lg-4">
<div class="card">
<div class="card-body">
<img class="ipadhome-pic" src="images/ipad_pic.jpeg" alt="#"/>
<a href="product.html#ipad"><button class="btn btn-lg btn-dark col-12" type="button">iPad</button></a>
</div>
</div>
</div>
</div>
<div class="row">
<div class="product-column col-lg-6 col-md-6">
<div class="card">
<div class="card-body">
<img class="applewatch-pic" src="images/applewatch_pic.jpeg" alt="#"/>
<a href="product.html#applewatch"><button class="btn btn-lg btn-dark col-12" type="button">Apple Watch</button></a>
</div>
</div>
</div>
<div class="product-column col-lg-6 col-md-6">
<div class="card">
<div class="card-body">
<img class="airpodsprohome-pic" src="images/airpodspro_pic.jpeg" alt="#"/>
<a href="product.html#airpods"><button class="btn btn-lg btn-dark col-12" type="button">Airpods</button></a>
</div>
</div>
</div>
</div>
<h3 class="cta-heading">Find the Nearest Apple Premium Reseller to Stay productive with Apple Products</h3>
<button type="button" class="btn btn-dark btn-lg contact-button"><i class="fa-regular fa-browser"></i> Visit APR Website</button>
<button type="button" class="btn btn-light btn-lg contact-button"><i class="fa-solid fa-phone"></i> Call Us Now</button>
</div>
<i class="footer-image fa-brands fa-twitter"></i>
<i class="footer-image fa-brands fa-facebook"></i>
<i class="footer-image fa-brands fa-instagram"></i>
<i class="footer-image fa-solid fa-envelope"></i>
<p>© Copyright Puvaan Raaj</p>
</div>