-
Notifications
You must be signed in to change notification settings - Fork 0
/
main.html
112 lines (96 loc) · 4 KB
/
main.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- ! CSS -->
<link rel="stylesheet" href="./assets/css/scroll-top.css">
<link rel="stylesheet" href="./assets/css/main.css">
<!-- ! GOOGLE FONTS -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,700&family=Rubik:ital,wght@0,400;0,500;0,600;1,600&display=swap"
rel="stylesheet">
<title>Slider</title>
</head>
<body>
<!-- ! HEADER -->
<header id="header">
<div class="container">
<div class="row">
<div class="logo">
<img src="./assets/media/logo-1.png" alt="logo">
<h1>StartupAMP</h1>
</div>
<ul class="nav">
<li>Home</li>
<li>more demos</li>
<li>watch video</li>
<li class="buy-btn">buy now</li>
</ul>
</div>
</div>
</header>
<!-- ! MAIN SECTION -->
<main>
<!-- ! FIRST SECTION -->
<section class="first-section" style="background-image:url(./assets/media/sec1.jpg)">
<div class="bg-image"></div>
<h1>AMP HTML CAROUSEL & VIDEO TEMPLATE</h1>
</section>
<!-- ! SECOND SECTION -->
<section class="slider-section">
<div class="container">
<div class="article">
<h1>AMP HTML CAROUSEL</h1>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Odit, voluptatum nesciunt.</p>
</div>
<div class="wrapper ">
<div class="slide-container">
<div class="Slide">
<img src="./assets/media/img1.jpg" alt="image1">
</div>
<div class="Slide">
<img src="./assets/media/img2.jpg" alt="image2">
</div>
<div class="Slide">
<img src="./assets/media/img3.jpg" alt="image3">
</div>
<div class="Slide">
<img src="./assets/media/img4.jpg" alt="image4">
</div>
<div class="Slide">
<img src="./assets/media/img5.jpg" alt="image5">
</div>
<div class="Slide">
<img src="./assets/media/img6.jpg" alt="image6">
</div>
<div class="buttons">
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
</div>
<br>
</div>
<div class="lst-artcle">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat tenetur cum corporis
asperiores
quia, esse repellat vero deserunt quam ab voluptatem in fugiat. Distinctio consequuntur
excepturi
rerum voluptatum exercitationem fugiat. Dolorem unde dolor facilis quam? Ipsum similique
facilis
id?
</p>
</div>
</div>
</section>
</main>
<!--! scroll top button -->
<button class="scroll-top">^</button>
<!-- ! JAVASCRIPT -->
<script src="./assets/javascript/slide.js"></script>
<script src="./assets/javascript/scroll-top.js"></script>
</body>
</html>