-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
237 lines (205 loc) · 9.45 KB
/
index.html
File metadata and controls
237 lines (205 loc) · 9.45 KB
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
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
<!DOCTYPE html>
<html>
<head>
<title>Final Project - Web Desgin - Kristopher Santos</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.masthead {
height: 80vh;
min-height: 500px;
background:linear-gradient(
45deg,
rgba(12, 141, 117, 0.8),
rgba(41, 6, 96, 0.9) 100%
), url('https://images.macrumors.com/t/tA_RAlO-sKIrvULzR2aaVJ5Tyd4=/1920x/article-new/2019/02/MR-Future-Products-2020-2.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.iconicons img{
height: 10vh;
}
.text-small {
font-size: 0.9rem;
}
a {
color: inherit;
text-decoration: none;
transition: all 0.3s;
}
a:hover, a:focus {
text-decoration: none;
}
.form-control {
background: #212529;
border-color: #545454;
}
.form-control:focus {
background: #212529;
}
footer {
background: #3a3a3a;
}
.hear{
height: 40vh;
background: #5a5a5b;
}
.info{
text-indent: 50px;
}
.mpick{
background-color: #f2f2f2;
}
</style>
</head>
<body>
<nav class="navbar fixed-top navbar-expand-sm bg-dark navbar-dark">
<div class="container-fluid ps-3">
<a class="navbar-brand" href="#"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/Apple_logo_grey.svg/1724px-Apple_logo_grey.svg.png" height="30"></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="product.html">Products</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">About</a>
</li>
</ul>
</div>
</div>
</nav>
<header class="masthead mt-5">
<div class="container h-100">
<div class="row h-100 align-items-center">
<div class="col-12 text-center text-white">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/74/Apple_logo_dark_grey.svg/1200px-Apple_logo_dark_grey.svg.png" width="100px" style="filter: brightness(3);">
<h1 class="fw fs-1">Apple Philippines</h1>
<p class="lead">Unofficial retailer of apple products in the Philippines</p>
</div>
</div>
</div>
</header>
<section class="py-5 info">
<div class="container fs-5">
<p>Here in Apple, you can find quality phones that suit you and your needs. Every phone is crafted precisely and in an elegant manner. Early smartphones were marketed primarily towards the enterprise market, attempting to bridge the functionality of standalone personal digital assistant (PDA) devices with support for cellular telephony, but were limited by their battery life, bulky form factors, and the immaturity of wireless data services.
</p><br>
<p>In the 2000's, BlackBerry, Nokia's Symbian platform, and Windows Phone began to gain market traction, with models often featuring QWERTY keyboards or resistive touchscreen input, and emphasizing access to push email and wireless internet. Since the 2007 unveiling of the iPhone, the majority of smartphones have featured thin, slate-like form factors, with large, capacitive screens with support for multi-touch gestures rather than physical keyboards, and offer the ability for users to download or purchase additional applications from a centralized store, and use cloud storage and synchronization, virtual assistants, as well as mobile payment services.</p>
</div>
</section>
<section class="mpick">
<div class="p-3">
<h1 class="text-center mt-3">This Month's Pick</h1>
<div class="container-fluid p-5 text-center">
<div class="row">
<div class="col-sm-6 mb-4">
<div class="container bg-white rounded p-3 h-100">
<img src="https://store.storeimages.cdn-apple.com/8756/as-images.apple.com/is/mbp14-silver-select-202110?wid=1808&hei=1680&fmt=jpeg&qlt=90&.v=1632788573000" class="img-fluid mt-5" alt="Responsive image">
<h2>Macbook Pro 13"</h2>
<p>Latest model of the macbook series</p>
<p><a href="product.html" class="text-primary">Learn more ></a></p>
<p> </p>
</div>
</div>
<div class="col-sm-6">
<div class="row mb-4">
<div class="col-6 col-sm-6">
<div class="container bg-white rounded p-3 ">
<img src="https://store.storeimages.cdn-apple.com/8756/as-images.apple.com/is/iphone-13-pro-family-hero?wid=940&hei=1112&fmt=png-alpha&.v=1644969385433" class="img-fluid" width="200" alt="Responsive image">
<h2>iPhone 13 Pro</h2>
<p>Latest model of the iPhone Series</p>
<p><a href="product.html" class="text-primary">Learn more ></a></p>
</div>
</div>
<div class="col-6 col-sm-6">
<div class="container bg-white rounded p-3">
<img src="https://store.storeimages.cdn-apple.com/8756/as-images.apple.com/is/iphone-12-family-select-2021?wid=940&hei=1112&fmt=jpeg&qlt=90&.v=1617135051000" class="img-fluid" width="200" alt="Responsive image">
<h2>iPhone 12 Mini</h2>
<p>iPhone 12 but smaller</p>
<p><a href="product.html" class="text-primary">Learn more ></a></p>
</div>
</div>
</div>
<div class="row">
<div class="col-6 col-sm-6">
<div class="container bg-white rounded p-3">
<img src="https://store.storeimages.cdn-apple.com/4982/as-images.apple.com/is/iphone-13-pro-max-blue-select?wid=940&hei=1112&fmt=png-alpha&.v=1645552346295" class="img-fluid" width="200" alt="Responsive image">
<h2>iPhone 13 Pro Max</h2>
<p>256GB version of the Pro Max</p>
<p><a href="product.html" class="text-primary">Learn more ></a></p>
</div>
</div>
<div class="col-6 col-sm-6">
<div class="container bg-white rounded p-3">
<img src="https://store.storeimages.cdn-apple.com/8756/as-images.apple.com/is/iphone-13-pro-max-gold-select?wid=940&hei=1112&fmt=png-alpha&.v=1645552346295" class="img-fluid" width="200" alt="Responsive image">
<h2>iPhone 13 Pro Max</h2>
<p>128GB version of the Pro Max</p>
<p><a href="product.html" class="text-primary">Learn more ></a></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="hear py-5" id="feed">
<div class="container text-center text-white">
<h1>We'd Love to Hear from You</h1>
<a href="about.html" class="btn btn-primary">Feedback</a>
</div>
</section>
<footer class="w-100 py-4 flex-shrink-0">
<div class="container py-4">
<div class="row gy-4 gx-5">
<div class="col-lg-4 col-md-6">
<h5 class="h1 text-white">Apple PH</h5>
<p class="small text-muted">Unofficial Retailer of Apple</p>
<p class="small text-muted mb-0">© Copyrights. All rights reserved. <a class="text-primary" href="#">Apple.com</a></p>
</div>
<div class="col-lg-2 col-md-6">
<h5 class="text-white mb-3">Quick links</h5>
<ul class="list-unstyled text-muted">
<li><a href="index.html">Home</a></li>
<li><a href="product.html">Products</a></li>
<li><a href="about.html">About Us</a></li>
</ul>
</div>
<div class="col-lg-2 col-md-6">
<h5 class="text-white mb-3">Contacts</h5>
<ul class="list-unstyled text-muted">
<li><a href="#">Email</a></li>
<li><a href="#">Facebook</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Others</a></li>
</ul>
</div>
<div class="col-lg-4 col-md-6">
<h5 class="text-white mb-3">Newsletter</h5>
<p class="small text-muted">Subscribe to our newsletter so you wont miss out on new updates about us.</p>
<form action="#">
<div class="input-group mb-3">
<input class="form-control" type="text" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="button-addon2">
<button class="btn btn-primary" id="button-addon2" type="button"><i class="fas fa-paper-plane"></i></button>
</div>
</form>
</div>
</div>
</div>
<div class="container text-light">
<p>For Educational Purposes Only - this is just a mockup of an Apple website made for a school project</p>
</div>
</footer>
</body>
</html>