index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<link href="https://cdn.jsdelivr.net/npm/remixicon@3.2.0/fonts/remixicon.css" rel="stylesheet">
</head>
<body>
<div id="main">
<!-- //nav bar -->
<div id="nav">
<i class="ri-apple-fill"></i>
<a href="">store</a><a href="">mac</a><a href="">iphone</a><a href="">watch</a><a href="">airpods</a><a href="">TV & Home</a><a href="">entertainment</a><a href="">accessories</a><a href="">support</a>
<i class="ri-shopping-cart-2-fill"></i>
<i class="ri-search-line"></i>
</div>
<!-- //hero -->
<div id="hero">
<div class="center">
<h1>iPhone 14 Pro</h1>
<h1>Pro.Beyond.</h1>
<div>
<a href="">Learn more<i class="ri-arrow-drop-right-line"></i></a>
<a href="">Buy<i class="ri-arrow-drop-right-line"></i></a>
</div>
</div>
<img src="iphone-x-pictures-45230.png" alt="">
</div>
<!-- //hero 1 -->
<div id="hero1">
<div class="center">
<h1>iPhone 14</h1>
<h1>Wonderfull.</h1>
<div>
<a href="">Learn more<i class="ri-arrow-drop-right-line"></i></a>
<a href="">Buy<i class="ri-arrow-drop-right-line"></i></a>
</div>
</div>
<img src="https://www.apple.com/newsroom/images/product/iphone/geo/Apple-iPhone-14-iPhone-14-Plus-hero-220907-geo_Full-Bleed-Image.jpg.xlarge.jpg" alt="">
</div>
<!-- //hero 2 -->
<div id="hero2">
<div class="center">
<h1>apple watch</h1>
<h1>series 8</h1>
<h1>A healthy leap ahead.</h1>
<div>
<a href="">Learn more<i class="ri-arrow-drop-right-line"></i></a>
<a href="">Buy<i class="ri-arrow-drop-right-line"></i></a>
</div>
</div>
<img src="https://www.apple.com/v/apple-watch-series-8/c/images/overview/design/pluto_face_endframe__glt6xzvhhm6a_large.jpg" alt="">
</div>
<!-- //hero 3 -->
<div id="hero3">
<div class="hero31">
<div class="center">
<div class="card1">
<div class="content">
<h1>apple Trade In</h1>
<p>Upgrade and save, It's that easy.</p>
<a href="">See what your device is worth</a>
<i class="ri-arrow-drop-right-line"></i>
</div>
<img src="https://www.ilounge.com/wp-content/uploads/2022/01/Apple-4.png" alt="">
</div>
</div>
<div class="center">
<div class="card2">
<div class="content">
<h1><i class="ri-apple-fill wwc"></i>WWDC23</h1>
<p>Apple Worldwide Developer Conference. Join us online June 5-9.</p>
<a href="">Learn more</a>
<i class="ri-arrow-drop-right-line"></i>
</div>
<img src="https://developer.apple.com/wwdc23/images/hero-p1-b2hwz1/wwdc-p1-large_2x.webp" alt="">
</div>
</div>
</div>
<div class="hero31">
<div class="center">
<div class="card1">
<div class="content">
<h1>iPad</h1>
<p>Lovable. Drawable. Magical.</p>
<a href="">Learn more</a>
<i class="ri-arrow-drop-right-line"></i>
<a href="">Buy</a>
<i class="ri-arrow-drop-right-line"></i>
</div>
<img class="imgCard3" src="https://www.apple.com/newsroom/images/product/ipad/standard/Apple-iPad-Air-hero-color-lineup-220308_big.jpg.slideshow-large_2x.jpg" alt="">
</div>
</div>
<div class="center">
<div class="card2">
<div class="content">
<h1>MacBook Pro</h1>
<p>Supercharged by M2 Pro and M2 Max</p>
<a href="">Learn more</a>
<i class="ri-arrow-drop-right-line"></i>
<a href="">Buy</a>
<i class="ri-arrow-drop-right-line"></i>
</div>
<img src="https://i0.wp.com/www.smartprix.com/bytes/wp-content/uploads/2022/06/MacBook-Air.png?fit=1200%2C630&ssl=1" alt="">
</div>
</div>
</div>
</div>
<!-- //hero 4 -->
<div id="hero4">
<div class="hLeft">
<div class="content">
<h1>Behind every product is plan for the environment.</h1>
<a href="">See our progress</a><i class="ri-arrow-drop-right-line"></i>
</div>
</div>
<div class="hLeft">
<div class="content">
<h1 class="h1Card"><i class="ri-apple-fill"></i>Card</h1>
<p>Get up to 3% Daily Cash back with every purchase.</p>
<a href="">Learn more</a><i class="ri-arrow-drop-right-line"></i>
<a href="">Apple now</a><i class="ri-arrow-drop-right-line"></i>
</div>
</div>
</div>
<!-- //footer -->
<div id="footer">
<div class="topFooter">
<div class="content">
<p>1. Trade-in values will vary based on the condition, year, and configuration of your eligible trade-in device. Not all devices are eligible for credit. You must be at least 18 years old to be eligible to trade in for credit or for an Apple Gift Card. Trade-in value may be applied toward qualifying new device purchase, or added to an Apple Gift Card. Actual value awarded is based on receipt of a qualifying device matching the description provided when estimate was made. Sales tax may be assessed on full value of a new device purchase. In-store trade-in requires presentation of a valid photo ID (local law may require saving this information). Offer may not be available in all stores, and may vary between in-store and online trade-in. Some stores may have additional requirements. Apple or its trade-in partners reserve the right to refuse or limit quantity of any trade-in transaction for any reason. More details are available from Apple’s trade-in partner for trade-in and recycling of eligible devices. Restrictions and limitations may apply.</p>
<p>To access and use all the features of Apple Card, you must add Apple Card to Wallet on an iPhone or iPad with the latest version of iOS or iPadOS. Update to the latest version by going to Settings > General > Software Update. Tap Download and Install.</p>
<p>Available for qualifying applicants in the United States.</p>
<p>Apple Card is issued by Goldman Sachs Bank USA, Salt Lake City Branch.</p>
<p>Learn more about how Apple Card applications are evaluated at <a href=""> support.apple.com/kb/HT209218.</a></p>
<p>A subscription is required for Apple TV+.</p>
<p>Major League Baseball trademarks and copyrights are used with permission of MLB Advanced Media, L.P. All rights reserved.</p>
</div>
<div class="content2">
<div class="cLeft">
<p>Shop and Learn</p>
<p><a href="">Store</a></p>
<p><a href="">Mac</a></p>
<p><a href="">iPad</a></p>
<p><a href="">iPhone</a></p>
<p><a href="">Watch</a></p>
<p><a href="">AirPods</a></p>
<p><a href="">TV & Home</a></p>
<p><a href="">AirTag</a></p>
<p><a href="">Accessories</a></p>
<p><a href="">Gift Cards</a></p>
<p>Apple Wallet</p>
<p><a href="">Wallet</a></p>
<p><a href="">Apple Card</a></p>
<p><a href="">Apple Pay</a></p>
<p><a href="">Apple Cash</a></p>
</div>
<div class="cLeft">
<p>Account</p>
<p><a href="">Manage Your Apple ID</a></p>
<p><a href="">Apple Store Account</a></p>
<p><a href="">iCloud.com</a></p>
<p>Entertainment</p>
<p><a href="">Apple One</a></p>
<p><a href="">Apple TV+</a></p>
<p><a href="">Apple Music</a></p>
<p><a href="">Apple Arcade</a></p>
<p><a href="">Apple Fitness+</a></p>
<p><a href="">Apple News+</a></p>
<p><a href="">Apple Podcasts</a></p>
<p><a href="">Apple Books</a></p>
<p><a href="">App Store</a></p>
</div>
<div class="cLeft">
<p>Apple Store</p>
<p><a href="">Find a Store</a></p>
<p><a href="">Genius Bar</a></p>
<p><a href="">Today at Apple</a></p>
<p><a href="">Apple Camp</a></p>
<p><a href="">Apple Store App</a></p>
<p><a href="">Certified Refurbished</a></p>
<p><a href="">Apple Trade In</a></p>
<p><a href="">Financing</a></p>
<p><a href="">Carrier Deals at Apple</a></p>
<p><a href="">Order Status</a></p>
<p><a href="">Shopping Help</a></p>
</div>
<div class="cLeft">
<p>For Business</p>
<p><a href="">Apple and Business</a></p>
<p><a href="">Shop for Business</a></p>
<p>For Education</p>
<p><a href="">Apple and Education</a></p>
<p><a href="">Shop for K-12</a></p>
<p><a href="">Shop for College</a></p>
<p>For Healthcare</p>
<p><a href="">Apple in Healthcare</a></p>
<p><a href="">Health on Apple Watch</a></p>
<p><a href="">Health Records on iPhone</a></p>
<p>For Government</p>
<p><a href="">Shop for Government</a></p>
<p><a href="">Shop for Veterans and Military</a></p>
</div>
<div class="cLeft">
<p>Apple Values</p>
<p><a href="">Accessibility</a></p>
<p><a href="">Education</a></p>
<p><a href="">Environment</a></p>
<p><a href="">Inclusion and Diversity</a></p>
<p><a href="">Privacy</a></p>
<p><a href="">Racial Equity and Justice</a></p>
<p><a href="">Supplier Responsibility</a></p>
<p>About Apple</p>
<p><a href="">Newsroom</a></p>
<p><a href="">Apple Leadership</a></p>
<p>Apple Wallet</p>
<p><a href="">Career Opportunities</a></p>
<p><a href="">Investors</a></p>
<p><a href="">Ethics & Compliance</a></p>
<p><a href="">Events</a></p>
<p><a href="">Contact Apple</a></p>
</div>
</div>
<div class="content3">
<p>More ways to shop: Find an Apple Store or other retailer near you. Or call 1-800-MY-APPLE.</p>
<div>
<p>Copyright © 2021 Abhay Gautam.</p>
<p>Terms of Use | Privacy Policy | Sales and Refunds | Legal | Site Map</p>
<p><a href="">United States</a></p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
style.css
*{
margin:0;
padding:0;
box-sizing: border-box;
font-family: gilroy;
}
html,body{
width: 100%;
height: 100%;
}
#main{
width: 100%;
}
#nav{
width: 100%;
height: 10vh;
background-color: rgb(58, 58, 58);
display: flex;
justify-content: center;
gap: 70px;
align-items: center;
text-transform: capitalize;
}
#nav a{
/* justify-content: ; */
color: rgb(215, 215, 215);
text-decoration: none;
font-weight: 500;
font-size: 14px;
}
#nav a:hover{
/* justify-content: ; */
color: rgb(215, 215, 215);
text-decoration: underline;
font-weight: 500;
font-size: 14px;
}
#nav i{
font-size: 20px;
color:rgb(215, 215, 215);
}
#hero{
width: 100%;
height: 80vh;
background-color: rgb(8, 8, 8);
overflow: hidden;
color: antiquewhite;
/* background-image: url("iphone-x-pictures-45230.png"); */
}
#hero img{
width: 50%;
margin-left: 25%;
margin-top: 15%;
}
#hero .center{
position: absolute;
top: 30%;
left: 50%;
text-align: center;
transform: translate(-50%,-50%);
}
#hero .center h1{
font-size: 50px;
font-weight: 700;
}#hero .center h1:nth-child(2){
font-size: 35px;
font-weight: 400;
}
#hero .center div{
align-items: center;
justify-content: end;
}
#hero .center a{
color: rgb(0, 111, 208);
text-decoration: none;
font-size: 24px;
margin-top: 10px;
align-items:center;
text-align: center;
margin-left: 10px;
}
#hero .center i{
/* font-size: 2rem; */
color: rgb(0, 111, 208);
text-align: center;
}
#hero1{
width: 100%;
height: 90vh;
background-color: rgb(255, 255, 255);
overflow: hidden;
position: relative;
color: rgb(0, 0, 0);
/* background-image: url("iphone-x-pictures-45230.png"); */
}
#hero1 img{
width: 50%;
margin-left: 25%;
margin-top: 15%;
}
#hero1 .center{
position: absolute;
top: 25%;
left: 50%;
text-align: center;
transform: translate(-50%,-50%);
}
#hero1 .center h1{
font-size: 50px;
font-weight: 700;
}#hero1 .center h1:nth-child(2){
font-size: 35px;
font-weight: 400;
}
#hero1 .center div{
align-items: center;
justify-content: end;
}
#hero1 .center a{
color: rgb(0, 111, 208);
text-decoration: none;
font-size: 24px;
margin-top: 10px;
align-items:center;
text-align: center;
margin-left: 10px;
}
#hero1 .center i{
/* font-size: 2rem; */
color: rgb(0, 111, 208);
text-align: center;
}
#hero2{
width: 100%;
height: 80vh;
background-color: rgb(0, 0, 0);
overflow: hidden;
position: relative;
color: rgb(255, 255, 255);
/* background-image: url("iphone-x-pictures-45230.png"); */
}
#hero2 img{
width: 50%;
margin-left: 25%;
margin-top: 22%;
}
#hero2 .center{
position: absolute;
top: 30%;
left: 50%;
text-align: center;
transform: translate(-50%,-50%);
}
#hero2 .center h1{
font-size: 50px;
font-weight: 700;
}#hero2 .center h1:nth-child(2){
font-size: 26px;
text-transform: uppercase;
font-weight: 500;
color: red;
}#hero2 .center h1:nth-child(3){
font-size: 30px;
font-weight: 400;
letter-spacing: -1px;
}
#hero2 .center div{
align-items: center;
justify-content: end;
}
#hero2 .center a{
color: rgb(0, 111, 208);
text-decoration: none;
font-size: 24px;
margin-top: 10px;
align-items:center;
text-align: center;
margin-left: 10px;
}
#hero2 .center i{
/* font-size: 2rem; */
color: rgb(0, 111, 208);
text-align: center;
}
#hero3{
width: 100%;
height: 150vh;
background-color: rgb(255, 255, 255);
overflow: hidden;
position: relative;
color: rgb(0, 0, 0);
}
#hero3 .hero31{
width: 100%;
height: 75vh;
margin-top: 4px;
display: flex;
justify-content: space-between;
gap: 1px;
}
#hero3 .hero31 .center{
width: 50%;
height: 100%;
background-color: black;
}
#hero3 .hero31 .center .card1{
border: 2px solid rgb(216, 216, 216);
width: 100%;
height: 100%;
background-color: rgb(255, 255, 255);
position: relative;
text-align: center;
}
#hero3 .hero31 .center .card1 .content{
width:50%;
position: absolute;
left: 50%;
top: 10%;
transform: translate(-50%,0%);
}
#hero3 .hero31 .center .card1 .content h1{
font-size:40px;
color: rgb(43, 43, 43);
}
#hero3 .hero31 .center .card1 .content p{
font-size: 20px;
color: rgb(43, 43, 43);
margin-top: 10px;
}
#hero3 .hero31 .center .card1 .content a{
color: rgb(0, 102, 191);
text-decoration: none;
font-size: 18px;
margin-top: 10px;
align-items:center;
text-align: center;
margin-left: 10px;
}
#hero3 .hero31 .center .card1 .content i{
color:rgb(0, 102, 191);
}
#hero3 .hero31 .center .card1 img{
width: 100%;
margin-top: 10%;
}
#hero3 .hero31 .center .card2{
border: 2px solid rgb(216, 216, 216);
width: 100%;
height: 100%;
background-color: rgb(0, 0, 0);
position: relative;
text-align: center;
}
#hero3 .hero31 .center .card2 .content{
width:50%;
position: absolute;
left: 50%;
top: 65%;
transform: translate(-50%,0%);
}
#hero3 .hero31 .center .card2 .content h1{
font-size:40px;
color: rgb(234, 234, 234);
}
#hero3 .hero31 .center .card2 .content h1 i{
color:rgb(232, 232, 232);
}
#hero3 .hero31 .center .card2 .content p{
font-size: 20px;
color: rgb(234, 234, 234);
margin-top: 5px;
}
#hero3 .hero31 .center .card2 .content a{
color: rgb(0, 114, 214);
text-decoration: none;
font-size: 18px;
margin-top: 30px;
align-items:center;
text-align: center;
margin-left: 10px;
}
#hero3 .hero31 .center .card2 .content i{
color:rgb(0, 102, 191);
}
#hero3 .hero31 .center .card2 img{
width: 80%;
margin-top: 10%;
}#hero3 .hero31 .center .card1 .imgCard3{
width: 70%;
margin-top: 10%;
}
/* #hero3 img{
width: 50%;
margin-left: 25%;
margin-top: 20%;
}
#hero3 .center{
position: absolute;
top: 30%;
left: 50%;
text-align: center;
transform: translate(-50%,-50%);
}
#hero3 .center h1{
font-size: 50px;
font-weight: 700;
}#hero3 .center h1:nth-child(2){
font-size: 35px;
font-weight: 400;
}
#hero3 .center div{
align-items: center;
justify-content: end;
}
#hero3 .center a{
color: rgb(0, 111, 208);
text-decoration: none;
font-size: 24px;
margin-top: 10px;
align-items:center;
text-align: center;
margin-left: 10px;
}
#hero3 .center i{
color: rgb(0, 111, 208);
text-align: center;
} */
#hero4{
width: 100%;
height: 50vh;
/* background-color: blueviolet; */
display: flex;
justify-content: space-between;
gap: 1px;
margin-top: 2px;
align-items: center;
}
#hero4 .hLeft{
width: 50%;
height: 100%;
/* background-color: rgb(0, 0, 0); */
align-items: center;
position: relative;
}
#hero4 .hLeft .content{
width: 40%;
text-align: center;
color: rgb(26, 26, 26);
position: absolute;
left: 50%;
top: 40%;
transform: translate(-50%,-50%);
}
#hero4 .hLeft .content h1{
font-size: 32px;
font-weight: 500;
}#hero4 .hLeft .content p{
font-size: 20px;
font-weight: 500;
color: rgb(53, 53, 53);
}
#hero4 .hLeft .content .h1Card{
font-size: 32px;
font-weight: 700;
text-shadow: 0 0 7px rgb(116, 116, 116);
}
#hero4 .hLeft .content a{
text-decoration: none;
font-size: 18px;
color:rgb(0, 60, 255);
}
/* //footer */
#footer{
width: 100%;
height: 150vh;
background-color: rgb(243, 243, 243);
margin-top: 5px;
/* border-top: 1px solid rgb(178, 178, 178); */
}
#footer .topFooter{
width: 80%;
height: 100%;
margin-left: 10%;
/* background-color: rgb(168, 168, 168); */
}
#footer .topFooter .content{
width: 100%;
height: 38%;
color: rgb(96, 96, 96);
padding: 20px;
border-bottom: 1px solid rgb(215, 215, 215);
}
#footer .topFooter .content p{
font-size: 14px;
margin-top: 20px;
font-weight:500;
}
#footer .topFooter .content p a{
color: rgb(41, 41, 41);
}
#footer .topFooter .content2{
width: 100%;
height: 53%;
/* background-color: aquamarine; */
display: flex;
justify-content: space-between;
color: rgb(67, 67, 67);
gap: 1px;
margin-top: 40px;
border-bottom:1px solid rgb(215, 215, 215);
}
#footer .topFooter .content2 .cLeft{
width: 25%;
height: 100%;
/* background-color: rgb(168, 168, 168); */
padding: 20px;
}
#footer .topFooter .content2 .cLeft p{
font-weight: 600;
font-size: 16px;
margin-top: 10px;
}
#footer .topFooter .content2 .cLeft p a{
color: rgb(86, 86, 86);
font-weight: 500;
margin-left: 10px;
font-size: 13px;
text-decoration: none;
}#footer .topFooter .content2 .cLeft p a:hover{
color: rgb(86, 86, 86);
font-weight: 500;
margin-left: 10px;
font-size: 13px;
text-decoration: underline;
}
#footer .topFooter .content3{
width: 100%;
height:10vh;
margin-top: -25px;
/* background-color: aquamarine; */
}
#footer .topFooter .content3 p{
font-size: 14px;
}
#footer .topFooter .content3 div{
display: flex;
width: 100%;
height: 60%;
/* background-color: rgb(201, 201, 201); */
justify-content: space-between;
margin-top: 10px;
align-items: center;
}
#footer .topFooter .content3 div p{
font-size: 14px;
}
#footer .topFooter .content3 div p a{
color: black;
text-decoration: none;
}#footer .topFooter .content3 div p a:hover{
color: black;
text-decoration: underline;
}
output: -
Post a Comment