-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
147 lines (142 loc) · 7.31 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
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="styles.css">
<link rel="icon" href="images\favicon-16x16.png">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@200;400;600;700;900&display=swap" rel="stylesheet">
<title>The New PS5 is Here!</title>
</head>
<body>
<section id="title">
<div class="container-fluid">
<nav class="navbar navbar-expand-md navbar-dark">
<a class="navbar-brand" href="">PS5™</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar1" aria-controls="navbar1" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar1">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#title">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#features">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#pricing">Pricing</a>
</li>
</ul>
</div>
</nav>
<div class="row div1">
<div class="col-lg-6">
<h1 class="main-heading">The All New PS5 is Here.</h1>
<a href="https://www.youtube.com/watch?v=RuLci-lSeCo">
<button type="button" class="btn btn-outline-light btn-lg watch-btn">Watch Now</button>
</a>
</div>
<div class="col-lg-6">
<img src="images\ps5-main.jpg" alt="PS5" class="main-img img-fluid">
</div>
</div>
</div>
</section>
<section id="features">
<div id="features-carousel" class="carousel slide" data-ride="false">
<ol class="carousel-indicators">
<li data-target="#features-carousel" data-slide-to="0" class="active"></li>
<li data-target="#features-carousel" data-slide-to="1"></li>
<li data-target="#features-carousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<h3>The Power you Need</h3>
<p>With a high speed SSD and custom CPU and GPU, there's no limits to this console's capabilities.</p>
<img src="images\carousel1.jpg" alt="PS5 Carousel 1" class="img-fluid caro-img">
</div>
<div class="carousel-item">
<h3>As Immersive as it Gets</h3>
<p>Enjoy and become part of the game with Haptic Feedback and Adaptive Triggers. PS5™ makes the OASIS look dry.</p>
<img src="images\carousel2.jpeg" alt="PS5 Carousel 2" class="img-fluid caro-img">
</div>
<div class="carousel-item">
<h3>New, Exclusive Games</h3>
<p>Play brand new titles like HITMAN 3 and Returnal with amazing graphics and the PS5™ experience.</p>
<img src="images\carousel3.jpg" alt="" class="img-fluid caro-img">
</div>
</div>
<a class="carousel-control-prev" href="#features-carousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#features-carousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</section>
<section id="pricing">
<h2 style="color: white;">Pricing</h2>
<div class="card-deck mb-3 text-center">
<div class="card mb-4 box-shadow">
<div class="card-header">
<h4 class="my-0 font-weight-normal"><strong>PS5</strong></h4>
</div>
<div class="card-body">
<h2 class="card-title pricing-card-title">$499</h2>
<ul class="list-unstyled mt-3 mb-4">
<li>2 Weeks PSN Plus</li>
<li>1 TB HDD</li>
<li>250 GB SSD</li>
<li>+2 Games for $15 each</li>
</ul>
<button type="button" class="btn btn-lg btn-block btn-outline-dark">Pre-Book</button>
</div>
</div>
<div class="card mb-4 box-shadow">
<div class="card-header">
<h4 class="my-0 font-weight-normal"><strong>PS5 Pro</strong></h4>
</div>
<div class="card-body">
<h2 class="card-title pricing-card-title">$599</h2>
<ul class="list-unstyled mt-3 mb-4">
<li>3 Weeks PSN Plus</li>
<li>2 TB HDD</li>
<li>500GB SSD</li>
<li>+2 Games for $10 each</li>
</ul>
<button type="button" class="btn btn-lg btn-block btn-outline-dark">Pre-Book</button>
</div>
</div>
<div class="card mb-4 box-shadow">
<div class="card-header">
<h4 class="my-0 font-weight-normal"><strong>PS5 Ultra</strong></h4>
</div>
<div class="card-body">
<h2 class="card-title pricing-card-title">$699</h2>
<ul class="list-unstyled mt-3 mb-4">
<li>30 users included</li>
<li>15 GB HDD</li>
<li>825 GB SSD</li>
<li>+3 Games for $10 each</li>
</ul>
<button type="button" class="btn btn-lg btn-block btn-outline-primary">Pre-Book</button>
</div>
</div>
</div>
</section>
<section id="copyright-bar">
<p style="margin: 0;">©2020 <a href="" class="anchor">SONY</a></p>
</section>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>