Scribd
Upload
24 views

Apple HTML and Css Code

Uploaded by

rezu abduselam
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
24 views

Apple HTML and Css Code

Uploaded by

rezu abduselam
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 23

<!

DOCTYPE html>
<html>
<head>
<title>Apple Website</title>
<link rel="stylesheet" type="text/css" href="css/styles.css">

<!-- Link to the Font-Awesome Font -->


<!-- This font gives us the option to use emojies, symbols, common logos and icons as a font -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css">

<!-- Link to Montserrat font on Google Fonts-->


<link href="https://fonts.googleapis.com/css?
family=Montserrat:200,200i,300,300i,400,600,600i,700,700i,800,800i,900,900i&display=swap" rel="stylesheet">

</head>
<body>
<div class="outer-wrapper">
<header class="header-wrapper">
<div class="internal-wrapper">
<div class="header-links-wrapper">
<ul>
<li class="logo-link"><a href="/"><img src="images/icons/logo.png"></a></li>
<li><a href="/mac/">Mac</a></li>
<li><a href="#">iphone</a></li>
<li><a href="#">ipad</a></li>
<li><a href="#">watch</a></li>
<li><a href="#">tv</a></li>
<li><a href="#">Music</a></li>
<li><a href="#">Support</a></li>
<li class="search-link"><a href="/search/"><img src="images/icons/search-
icon.png"></a></li>
<li class="cart-link"><a href="/cart/"><img src="images/icons/cart.png"></a></li>
</ul>
</div>
</div>
</header>

<section class="main-highlight-wrapper">
<div class="internal-wrapper">
<div class="model">
16-inch model
</div>

<div class="product-title">
MacBook Pro
</div>

<div class="brief-description">
The best for the brightest.
</div>

<div class="links-wrapper">
<ul>
<li><a href="">Learn more</a></li>
<li><a href="">Buy</a></li>
</ul>
</div>

<div class="main-image-wrapper">
<img src="images/home/mac-laptop.jpg"/>
</div>

</div>
</section>
<section class="second-hightlight-wrapper">
<div class="internal-wrapper">
<div class="title-wraper">
iPhone 11 Pro
</div>

<div class="description-wrapper">
Pro cameras. Pro display. Pro performance.
</div>

<div class="price-wrapper">
From $24.95/mo. or $599 with trade-in.
</div>

<div class="links-wrapper">
<ul>
<li><a href="">Learn more</a></li>
<li><a href="">Buy</a></li>
</ul>
</div>
</div>
</section>

<section class="third-highlight-wrapper">
<div class="internal-wrapper">
<div class="title-wraper">
iPhone 11
</div>
<div class="description-wrapper">
Just the right amount of everything.
</div>
<div class="price-wrapper">
From $16.62/mo. or $399 with trade-in.
</div>
<div class="links-wrapper">
<ul>
<li><a href="">Learn more</a></li>
<li><a href="">Buy</a></li>
</ul>
</div>
</div>
</section>

<section class="fourth-heghlight-wrapper">
<div class="left-side-wrapper">
<div class="top-logo-wrapper">
<div class="logo-wrapper">
<img src="images/icons/watch-series5-logo.png">
</div>
</div>
<div class="description-wraper">
With the new Always-On Retina display.<br>
You’ve never seen a watch like this.
</div>
<div class="links-wrapper">
<ul>
<li><a href="">Learn more</a></li>
<li><a href="">Buy</a></li>
</ul>
</div>
</div>
<div class="right-side-wrapper">
<div class="top-logo-wrapper">
<div class="logo-wrapper">
<img src="images/icons/apple-card-logo.png">
</div>
</div>
<div class="description-wraper">
Get 3% Daily Cash on purchases from Apple using Apple Card.
</div>
<div class="links-wrapper">
<ul>
<li><a href="">Learn more</a></li>
<li><a href="">Buy</a></li>
</ul>
</div>
</div>
</section>
<section class="fifth-heghlight-wrapper">
<div class="left-side-wrapper">
<div class="top-logo-wrapper">
<div class="logo-wrapper">
<img src="images/icons/apple-tv-logo.png">
</div>
</div>

<div class="tvshow-logo-wraper">
<img src="images/icons/servant-logo.png">
</div>

<div class="watch-more-wrapper">
<a href="#">Watch the trailer</a>
</div>
</div>
<div class="right-side-wrapper">
<div class="top-logo-wrapper">
<div class="logo-wrapper">
AirPods Pro
</div>
</div>

<div class="description-wraper">
Magic like you’ve never heard.
</div>

<div class="links-wrapper">
<ul>
<li><a href="">Learn more</a></li>
<li><a href="">Buy</a></li>
</ul>
</div>
</div>
</section>
<section class="sixth-heghlight-wrapper">
<div class="left-side-wrapper">
<div class="model">
16-inch model
</div>

<div class="product-title-small">
MacBook Pro
</div>

<div class="description-wraper">
The best for the brightest.
</div>

<div class="links-wrapper">
<ul>
<li><a href="">Learn more</a></li>
<li><a href="">Buy</a></li>
</ul>
</div>
</div>
<div class="right-side-wrapper">
<div class="top-logo-wrapper">
<div class="logo-wrapper">
<img src="images/icons/new-ipad-logo.png">
</div>
</div>

<div class="description-wraper">
Like a computer. Unlike any computer.
</div>

<div class="links-wrapper">
<ul>
<li><a href="">Learn more</a></li>
<li><a href="">Buy</a></li>
</ul>
</div>
</div>
</section>
<footer class="footer-wrapper">
<div class="internal-wrapper">
<div class="upper-text-container">
1. Trade In: Trade-in values vary. iPhone 11 and iPhone 11 Pro promotional pricing is after
trade-in of iPhone 8 Plus and iPhone X in good condition. Additional trade-in values require purchase of a new
iPhone, subject to availability and limits. Must be at least 18. Apple or its trade-in partners reserve the
right to refuse or limit any Trade In transaction for any reason. In-store trade-in requires presentation of a
valid, government-issued photo ID (local law may require saving this information). Sales tax may be assessed on
full value of new iPhone. Additional terms from Apple or Apple’s trade-in partners may apply. Monthly pricing:
Available to qualified customers and requires 0% APR, 24-month installment loan with Citizens One, and iPhone
activation with AT&T, Sprint, T-Mobile, or Verizon. <a href="#"> Full terms apply</a>.
</div>
<div class="footer-links-wrapper">
<div class="links-wrapper-1">
<h3>Shop and Learn</h3>
<ul>
<li><a href="#">Mac</a></li>
<li><a href="#">iPad</a></li>
<li><a href="#">iPhone</a></li>
<li><a href="#">Watch</a></li>
<li><a href="#">TV</a></li>
<li><a href="#">Music</a></li>
<li><a href="#">AirPods</a></li>
<li><a href="#">HomePod</a></li>
<li><a href="#">iPod touch</a></li>
<li><a href="#">Accessories</a></li>
<li><a href="#">Gift Cards</a></li>
</ul>
</div>
<div class="links-wrapper-2">
<h3>Services</h3>
<ul>
<li><a href="#">Apple Music</a></li>
<li><a href="#">Apple News+</a></li>
<li><a href="#">Apple TV+</a></li>
<li><a href="#">Apple Arcade</a></li>
<li><a href="#">Apple Card</a></li>
<li><a href="#">iCloud</a></li>
</ul>
<h3>Account</h3>
<ul>
<li><a href="#">Manage Your Apple ID</a></li>
<li><a href="#">Apple Store Account</a></li>
<li><a href="#">iCloud.com</a></li>
</ul>
</div>
<div class="links-wrapper-3">
<h3>Apple Store</h3>
<ul>
<li><a href="#">Find a Store</a></li>
<li><a href="#">Genius Bar</a></li>
<li><a href="#">Today at Apple</a></li>
<li><a href="#">Apple Camp</a></li>
<li><a href="#">Field Trip</a></li>
<li><a href="#">Apple Store App</a></li>
<li><a href="#">Refurbished and Clearance</a></li>
<li><a href="#">Financing</a></li>
<li><a href="#">Apple Trade In</a></li>
<li><a href="#">Order Status</a></li>
<li><a href="#">Shopping Help</a></li>
</ul>
</div>
<div class="links-wrapper-4">
<h3>For Business</h3>
<ul>
<li><a href="#">Apple and Business</a></li>
<li><a href="#">Shop for Business</a></li>
</ul>
<h3>For Education</h3>
<ul>
<li><a href="#">Apple and Education</a></li>
<li><a href="#">Shop for College</a></li>
</ul>
<h3>For Healthcare</h3>
<ul>
<li><a href="#">Manage Your Apple ID</a></li>
<li><a href="#">Apple Store Account</a></li>
<li><a href="#">iCloud.com</a></li>
</ul>
<h3>For Government</h3>
<ul>
<li><a href="#">Apple and Education</a></li>
<li><a href="#">Shop for College</a></li>
</ul>
</div>

<div class="links-wrapper-5">
<h3>Apple Values</h3>
<ul>
<li><a href="#">Find a Store</a></li>
<li><a href="#">Genius Bar</a></li>
<li><a href="#">Today at Apple</a></li>
<li><a href="#">Apple Camp</a></li>
<li><a href="#">Field Trip</a></li>
<li><a href="#">Apple Store App</a></li>
</ul>
<h3>About Apple</h3>
<ul>
<li><a href="#">Find a Store</a></li>
<li><a href="#">Genius Bar</a></li>
<li><a href="#">Today at Apple</a></li>
<li><a href="#">Apple Camp</a></li>
<li><a href="#">Field Trip</a></li>
<li><a href="#">Apple Store App</a></li>
</ul>
</div>
</div>
<div class="my-apple-wrapper">
More ways to shop: <a href="#">Find an Apple Store</a> or <a href="#">other retailer</a>
near you. Or call 1-800-MY-APPLE.
</div>
<div class="copyright-wrapper">
<div class="copyright">
Copyright © 2019 Apple Inc. All rights reserved.
</div>
<div class="footer-links-terms">
<ul>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">Terms of Use</a></li>
<li><a href="#">Sales and Refunds</a></li>
<li><a href="#">Legal</a></li>
<li><a href="#">Site Map</a></li>
</ul>
</div>
<div class="footer-country">
<div class="flag-wrapper"><img src="images/icons/16.png"></div> <div class="footer-
country-name">United States</div>
</div>
</div>
</div>
</footer>
</div>

</body>
</html>
* {
margin: 0;
padding: 0;
}
img {
max-width: 100%;
}
body {
font-size: 20px;
font-family: 'Montserrat', sans-serif;
}

/* Header Style */
.header-wrapper {
background: black;
color: #fff;
font-weight: 200;
font-size: 0.75em;
}
.header-wrapper ul {
display: flex;
-webkit-box-pack: justify;
justify-content: space-between;
}
.internal-wrapper {
width: 980px;
padding: 0 10px;
margin: 0 auto;
}
.header-wrapper .header-links-wrapper ul li a {
text-decoration: none;
color: #fff;
}
.header-wrapper ul {
list-style: none;
}
.header-wrapper .header-links-wrapper ul li {
display: inline-block;
padding: 14px 0 8px;
height: 25px;
opacity: 0.8;
}
.header-wrapper .header-links-wrapper ul li:hover {
opacity: 1;
}
.logo-link, .search-link, .cart-link {
width: 18px;
display: block;
}
.header-wrapper .header-links-wrapper ul li.logo-link {
padding: 12px 0 10px;
}
.header-wrapper .header-links-wrapper ul li.search-link {
padding: 14px 0 8px;
}
.header-wrapper .header-links-wrapper ul li.cart-link {
padding: 12px 0 10px;
}

/* Footer Styling */
.footer-wrapper {
background-color: #f5f5f7;
color: #1d1d1f;
font-size: .65em;
}
.upper-text-container {
border-bottom: 1px solid #d2d2d7;
color: #86868b;
padding: 17px 0 20px;
}
.upper-text-container a {
text-decoration: none;
color: #515154;
}
.upper-text-container a:hover {
text-decoration: underline;
}
.footer-links-wrapper {
display: flex;
-webkit-box-pack: justify;
justify-content: space-between;
padding-top: 20px;
}
.footer-wrapper ul {
list-style: none;
padding-bottom: 20px;
}
.footer-wrapper ul li{
padding: 5px 0;
font-size: 0.9em;
}
.footer-links-wrapper a {
color: #515154;
text-decoration: none;
}
.footer-links-wrapper a:hover {
text-decoration: underline;
}
.footer-links-wrapper h3 {
font-size: 12px;
font-weight: 600;
}
.my-apple-wrapper {
border-bottom: 1px solid #d2d2d7;
padding-bottom: 10px;
margin-bottom: 10px;
}
.copyright-wrapper {
display: flex;
-webkit-box-pack: justify;
justify-content: space-between;
padding: 10px 0 20px;
}
.footer-links-terms ul li {
display: inline-block;
padding: 0 5px;
border-right: 1px solid #ccc;
}
.footer-links-terms ul li:last-child {
border-right: 0px;
}
.footer-links-terms ul li a {
text-decoration: none;
color: #515154;
}
.footer-links-terms ul li a:hover {
text-decoration: underline;
}
.footer-country {
display: inline-block;
}
.flag-wrapper {
display: inline-block;
vertical-align: middle;
}
.footer-country-name{
display: inline-block;
vertical-align: top;
}

/* Main Highlight */
.main-highlight-wrapper {
background: #fafafa;
text-align: center;
padding: 25px 0;
}
.links-wrapper ul {
list-style: none;
}
.model {
font-size: .85em;
}
.product-title {
font-weight: 700;
font-size: 56px;
}
.brief-description {
font-size: 2em;
}
.links-wrapper {
padding: 15px 0;
}
.links-wrapper ul li {
display: inline-block;
padding-right: 20px;
}
.links-wrapper ul li a {
color: #06c;
text-decoration: none;
}
.links-wrapper ul li a:hover {
color: #000;
}
.links-wrapper ul li a:after {
font-family: "FontAwesome";
font-weight: 900;
content: "\f105";
padding-left: 10px;
}

/* Second Highlight Section */


.second-hightlight-wrapper {
background-image: url("../images/home/iphone11-pro-bg.jpg");
height: 580px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
text-align: center;
padding: 65px 20px;
color: #fff;
}
.title-wraper {
font-weight: 600;
font-size: 56px;
}
.description-wrapper {
font-size: 26px;
padding: 10px 0;
}
.price-wrapper {
color: #86868b;
font-size: 0.85em;
}

/* Third Highlight Section */


.third-highlight-wrapper {
background-image: url("../images/home/iphone11-bg.jpg");
height: 580px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
text-align: center;
padding: 65px 20px;
}

/*Fourth Highlight Section */


.fourth-heghlight-wrapper {
display: flex;
-webkit-box-pack: justify;
justify-content: space-between;
background: #fff;
}
.left-side-wrapper {
height: 580px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
text-align: center;
width: 48.5%;
margin: 1% 0.5% 0% 1%;
padding-top: 54px;
}
.fourth-heghlight-wrapper .left-side-wrapper {
background-image: url("../images/home/watch-series-5.jpg");
}
.right-side-wrapper {
height: 580px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
text-align: center;
width: 48.5%;
margin: 1% 1% 0% 0.5%;
padding-top: 54px;
}
.fourth-heghlight-wrapper .right-side-wrapper {
background-image: url("../images/home/apple-card.jpg");
}
.description-wraper {
max-width: 430px;
margin: 0 auto;
padding: 10px;
}

/*Fivth Highlight Section */


.fifth-heghlight-wrapper {
display: flex;
-webkit-box-pack: justify;
justify-content: space-between;
background: #fff;
}
.fifth-heghlight-wrapper .left-side-wrapper {
background-image: url("../images/home/apple-tv-background.jpg");
}
.fifth-heghlight-wrapper .right-side-wrapper {
background-image: url("../images/home/air-pods.jpg");
color: #fff;
background-size: initial;
background-color: #000;
background-position: bottom;
}
.logo-wrapper {
font-size: 40px;
font-weight: bold;
}
.tvshow-logo-wraper {
padding: 180px 0 200px;
}
.watch-more-wrapper a {
text-decoration: none;
font-size: 0.85em;
}
.watch-more-wrapper a:after {
font-family: "FontAwesome";
font-weight: 900;
content: "\f144";
padding-left: 15px;
}
/*Sixth Highlight Section */
.sixth-heghlight-wrapper {
display: flex;
-webkit-box-pack: justify;
justify-content: space-between;
background: #fff;
}
.sixth-heghlight-wrapper .left-side-wrapper {
background-image: url("../images/home/macbook-pro.jpg");
background-size: initial;
background-color: #fafafa;
background-position: bottom;
}
.sixth-heghlight-wrapper .right-side-wrapper {
background-image: url("../images/home/new-ipad.jpg");
}
.product-title-small {
font-weight: 700;
font-size: 45px;
}

You might also like