-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
119 lines (118 loc) · 7.02 KB
/
Copy pathindex.html
File metadata and controls
119 lines (118 loc) · 7.02 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
<!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">
<link rel="stylesheet" href="styles.css">
<script src="main.js" defer></script>
<title>Scroll Project</title>
<!--
fire.png : <a href="https://www.flaticon.com/free-icons/fire" title="fire icons">Fire icons created by Freepik - Flaticon</a>
background.jpg : Photo by Austin Zhang, https://www.pexels.com/photo/low-angle-photo-of-airplane-flying-over-high-rise-buildings-2441844/
back.png : <a href="https://www.flaticon.com/free-icons/return" title="return icons">Return icons created by Freepik - Flaticon</a>
play-button.png : <a href="https://www.flaticon.com/free-icons/play-button" title="play button icons">Play button icons created by Freepik - Flaticon</a>
pause.png : <a href="https://www.flaticon.com/free-icons/pause" title="pause icons">Pause icons created by Freepik - Flaticon</a>
-->
</head>
<body>
<nav class="red">
<img src="assets/fire.png" alt="company logo" class="logo">
<ul>
<li><a href="#" id="home-link">Home</a></li>
<li><a href="#" id="about-link">About Us</a></li>
<li><a href="#" id="services-link">Services</a></li>
</ul>
</nav>
<section id="home">
<video src="assets/noa.mp4" autoplay muted loop></video>
<div class="header-content">
<h1 class="title">Lorem Ipsum</h1>
<p class="intro">Lorem ipsum dolor sit amet, consectetur adi Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut quidem reprehenderit alias. Alias laborum cum architecto accusamus? Ducimus! pisicing elit. Iste consectetur ullam iure modi velit tenetur quaerat dicta ipsum exercitationem possimus!</p>
<button class="jump-to-services">Our Services</button>
</div>
<span class="cover"></span>
<button class="pause-button"></button>
</section>
<section id="about-us">
<h2>About Us</h2>
<p class="about-intro">Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo voluptatibus esse eius magni incidunt impedit dolorum quam suscipit minus officiis magnam quibusdam cum, excepturi sequi numquam natus quis ratione provident.</p>
<div class="cards">
<div class="wrapper">
<div class="card unflipped" id="chino-card">
<div class="front-face">
<img src="assets/chino.png" alt="chino">
<h3>Kafuu Chino</h3>
<button>Learn More</button>
</div>
<div class="back-face">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Al Lorem ipsum dolor sit amet consectetur, adipisicing elit. Harum, molestias. Ab quasi repellat at? Atque odit quod fugiat assumenda, itaque voluptate hic adipisci? ias, facilis? Dolorum inventore omnis deserunt eveniet distinctio cum! Earum, officiis impedit!</p>
<button></button>
</div>
</div>
</div>
<div class="wrapper">
<div class="card unflipped" id="chiya-card">
<div class="front-face">
<img src="assets/chiya.png" alt="chiya">
<h3>Ujumatsu Chiya</h3>
<button>Learn More</button>
</div>
<div class="back-face">
<p>Lorem ipsum dolor sit amet consectetur adipisic Lorem ipsum dolor, sit amet consectetur adipisicing elit. Libero voluptatum a fuga laudantium ut, molestias itaque possimus. ing elit. Alias, facilis? Dolorum inventore omnis deserunt eveniet distinctio cum! Earum, officiis impedit!</p>
<button></button>
</div>
</div>
</div>
<div class="wrapper">
<div class="card unflipped" id="cockoa-card">
<div class="front-face">
<img src="assets/cocoa.png" alt="cockoa">
<h3>Hoto Cockoa</h3>
<button>Learn More</button>
</div>
<div class="back-face">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Al Lorem ipsum dolor, sit amet consectetur adipisicing elit. Omnis molestiae illo dolore nostrum porro aut. ias, facilis? Dolorum inventore omnis deserunt eveniet distinctio cum! Earum, officiis impedit!</p>
<button></button>
</div>
</div>
</div>
<div class="wrapper">
<div class="card unflipped" id="sxarp-card">
<div class="front-face">
<img src="assets/sxarp.png" alt="sxarp">
<h3>Sxarp</h3>
<button>Learn More</button>
</div>
<div class="back-face">
<p>Lorem ipsum dolor sit amet consectetur adipis Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim autem ad iste sapiente reiciendis molestias ipsum? Quia recusandae numquam labore! icing elit. Alias, facilis? Dolorum inventore omnis deserunt eveniet distinctio cum! Earum, officiis impedit!</p>
<button></button>
</div>
</div>
</div>
</div>
</section>
<section id="services">
<h2>Our Services</h2>
<p class="about-intro">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ea porro ducimus ut eveniet sit, non ullam tenetur hic, deserunt ex a quasi voluptatibus assumenda? Necessitatibus.</p>
<ul>
<li>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Hic, minus ea inventore officiis praesentium corrupti perferendis quia omnis molestiae consequatur?</p>
</li>
<li>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex facere debitis illo, aliquam molestias quos accusamus.</p>
</li>
<li>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo natus vero magni nisi quis ab laborum voluptatem, esse pariatur earum dolorem iusto, magnam hic quidem inventore molestiae, tenetur harum similique.</p>
</li>
<li>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum amet praesentium totam reprehenderit, est voluptatum illo dolorem saepe facere. Culpa.</p>
</li>
<li>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam fugiat, veritatis omnis placeat reprehenderit esse qui ratione natus atque saepe doloribus eos blanditiis tempora dolorum.</p>
</li>
</ul>
</section>
<footer><p>Copyright © The 4Channel Company 2027. Most Rights Reserved</p></footer>
</body>
</html>