-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
170 lines (158 loc) · 5.62 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- sets the character set your document should use to utf-8 -->
<script src="https://kit.fontawesome.com/f9e8ebbd0f.js" crossorigin="anonymous"></script>
<!-- title tag defines what is shown on the tab of the browser -->
<link href="style.css" rel="stylesheet" type="text/css">
<title>Apple</title>
</head>
<body>
<header>
<!-- write your navigation bar here -->
<nav>
<div class="container">
<a href="#"><i class="fa-brands fa-apple"></i></a><!--
--><a href="#">Mac</a><!--
--><a href="#">iPad</a><!--
--><a href="#">iPhone</a><!--
--><a href="#">Watch</a><!--
--><a href="#">TV</a><!--
--><a href="#">Music</a><!--
--><a href="#">Support</a><!--
--><a href="#"><i class="fa-solid fa-magnifying-glass"></i></a><!--
--><a href="#"><i class="fa-solid fa-bag-shopping"></i></a>
</div>
</nav>
</header>
<div class="hero">
<!-- write your hero section here -->
<div class="product-info-container">
<h1>iPhone 13 Pro</h1>
<h2>Oh.So.Pro</h2>
<div class="product-info-container-links">
<a href="#">Learn more ></a>
<a href="#">Buy ></a>
</div>
</div>
<div class="iphone-13-pro-img">
</div>
</div>
<div class="sub-hero">
<!-- write your sub hero section here -->
<div class="sub-hero-images .clearfix">
<div class="sub-hero-products watch"></div><!--
--><div class="sub-hero-products ipad"></div><!--
--><div class="sub-hero-products accessories"></div><!--
--><div class="sub-hero-products macbook"></div>
</div>
<div class="sub-hero-link">
<a href="#">AC Wall Plug Adapter Recall Program ></a></a>
</div>
</div>
<footer>
<!-- write your footer here -->
<div class="footer-container">
<div class="footer-links-container">
<ul class="footer-links shop">
<h3>Shop and Learn</h3>
<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="#">iTunes</a></li>
<li><a href="#">iPod</a></li>
<li><a href="#">Accessories</a></li>
<li><a href="#">Gift Cards</a></li>
</ul>
</div><!--
--><div class="footer-links-container">
<ul class="footer-links store">
<h3>Shop and Learn</h3>
<li><a href="#">Find a Store</a></li>
<li><a href="#">Genius Bar</a></li>
<li><a href="#">Workshops and Learning</a></li>
<li><a href="#">Youth Programs</a></li>
<li><a href="#">Apple Store App</a></li>
<li><a href="#">Refurbished</a></li>
<li><a href="#">Financing</a></li>
<li><a href="#">Reuse and Recycling</a></li>
<li><a href="#">Order Status</a></li>
<li><a href="#">Shopping Help</a></li>
</ul>
</div><!--
--><div class="footer-links-container">
<ul class="footer-links education">
<h3>For Education</h3>
<li><a href="#">Apple and Education</a></li>
<li><a href="#">Shop for College</a></li>
</ul>
<ul class="footer-links business">
<h3>For Business</h3>
<li><a href="#">iPhone in Business</a></li>
<li><a href="#">iPad in Business</a></li>
<li><a href="#">Mac in Business</a></li>
<li><a href="#">Shop for Your Business</a></li>
</ul>
</div><!--
--><div class="footer-links-container">
<ul class="footer-links account">
<h3>Account</h3>
<li><a href="#">Manage Your Apple ID</a></li>
<li><a href="#">Apple Store Account</a></li>
<li><a href="#">iCloud.coms</a></li>
</ul>
<ul class="footer-links values">
<h3>Apple Values</h3>
<li><a href="#">Environment</a></li>
<li><a href="#">Supplier Responsibility</a></li>
<li><a href="#">Accessibility</a></li>
<li><a href="#">Privacy</a></li>
<li><a href="#">Inclusion and Diversity</a></li>
<li><a href="#">Education</a></li>
</ul>
</div><!--
--><div class="footer-links-container">
<ul class="footer-links about">
<h3>About Apple</h3>
<li><a href="#">Apple Info</a></li>
<li><a href="#">Job Opportunities</a></li>
<li><a href="#">Press Info</a></li>
<li><a href="#">Investors</a></li>
<li><a href="#">Events</a></li>
<li><a href="#">Hot News</a></li>
<li><a href="#">Legal</a></li>
<li><a href="#">Contact Apple</a></li>
</ul>
</div>
<div class="footer-info more-info">
<p>
More ways to shop: Visit an <a class="footer-blue-color" href="#">Apple Store</a>, call 1-800-MY-APPLE, or <a class="footer-blue-color" href="#">find a reseller.</a>
</p>
</div>
<br>
<div class="footer-info legal-container">
<div class="footer-info legal-links-container">
<div class="footer-info copyright">
<p> Copyright © 2016 Apple Inc. All rights reserved.
</p>
</div>
<div class="footer-info legal-links">
<a class="footer-legal-link" href="#">Privacy Policy</a>
<a class="footer-legal-link" href="#">Terms of Use</a>
<a class="footer-legal-link" href="#">Sales and Refunds</a>
<a href="#">Site Map</a>
</div>
<div class="footer-info language">
<img id="footer-language" src="images/usa.png" alt="usa flag">
<a href="#">United States</a>
</div>
</div>
</div>
</div>
</footer>
</body>
</html>