Scribd
Upload
32 views

Apple HTML and Css Code

Uploaded by

rezu abduselam
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
32 views

Apple HTML and Css Code

Uploaded by

rezu abduselam
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
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