Apple-copy Website with BootStrap By Siddharath Bhardwaj
<title> Apple(India)</title> <style> *{ margin: 0; padding: 0; } ul{ background: black !important ; justify-content:center !important; width: 100% !important; }
ul li a{
color: white !important;
padding: 10px 40px !important;
}
.col-lg{
justify-content: center;
margin:10px;
padding: 30px 40px;
}
.logo:hover , a:hover{
color: gray !important;
opacity: 0.8;
}
</style>
<ul class="nav"> <a class="navbar-brand" href="#">
<img class="logo" src="/6th June/apple-logo.jpg" width="30" height="30" alt="">
</a>
<li class="nav-item"><a class="nav-link" href="#">Mac</a></li>
<li class="nav-item"><a class="nav-link" href="#">iPad</a></li>
<li class="nav-item"><a class="nav-link" href="#">iPhone</a></li>
<li class="nav-item"><a class="nav-link" href="#">Watch</a></li>
<li class="nav-item"><a class="nav-link" href="#">TV</a></li>
<li class="nav-item"><a class="nav-link" href="#">Music</a></li>
<li class="nav-item"><a class="nav-link" href="#">Support</a></li>
<li class="nav-item"><a class="nav-link" href="#">Where to buy</a></li>
</ul>
</div>
<div class="jumbotron text-center" style="margin-bottom:0">
<h1 style="font-size: 50px">iPhone Xr</h1>
<p style="font-size: 25px">All-screen Design. Longest battery life ever in an iPhone. <br>
Fastest Performance. Studio-quality photos</p>
<a href="#">Learn more</a> <br> <br>
<img class="img-fluid" src="/6th June/iphone-xr.jpg" alt="iphone-xr" width="700px" height="500px">
</div>
<div class="jumbotron text-center" style="margin-bottom:0">
<h1 style="font-size: 50px">iPhone Xs</h1>
<p style="font-size: 25px">Letest Super Retina Display. Fastest Perfromance with <br>
A12 Biotic. Most secure facial authentification with Face ID. <br>
Breakthrough dual cameras with Depth Control</p>
<a href="#">Learn more</a> <br> <br>
<img class="img-fluid" src="/6th June/iphone-xs-max-gold-select-2018.png" alt="iphone-xr" width="500px" height="200px">
</div>
<div class="row">
<div class="col-lg">
<h1>iPad Pro</h1>
<p>All new. All screen. All powerful</p>
<a href="#">learn more</a> <br> <br>
<img src="/6th June/ipad-pro-lead-1024x576.jpg" alt="iPad pro" width="600px" height="350px">
</div>
<div class="col-lg">
<h1>MacBook Air</h1>
<p>Lightness strikes again.</p>
<a href="#">learn more</a> <br> <br>
<img src="/6th June/MacBook-Air-2019.png" alt="Macbook Air" width="500px" height="400px">
</div>
</div>
</div>