-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
67 lines (60 loc) · 5.46 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
<!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">
<title>Mini Project-1</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="navbar">
<a href="/index.html"><img src="logo.svg" alt="logo"></a>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div class="top-container">
<h1>
Welcome to our website
</h1>
</div>
<div class="bottom-container">
<p class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo expedita ab reiciendis aliquam consequuntur qui quia omnis, voluptas ad, corrupti commodi delectus asperiores voluptatem eos architecto non? Fugiat quo cumque aliquam aut accusantium distinctio debitis consequuntur! Vero unde quaerat blanditiis dolores molestiae, deleniti quae laboriosam! Id commodi cupiditate, neque fugit illum dicta, aliquam inventore magnam animi ab sunt unde voluptatum omnis pariatur qui ratione delectus quos cumque rem architecto optio voluptate tempora ullam. Omnis, cum sapiente officiis quos, commodi iste impedit nesciunt cupiditate minus accusamus optio iusto laudantium recusandae error temporibus? Commodi nulla amet quae doloribus, est aut quam temporibus, sit voluptatibus consequuntur in. Quasi minus corporis odit magnam adipisci sapiente eveniet aut accusantium numquam perspiciatis dicta tenetur labore quos qui pariatur voluptatem eum quisquam, amet hic commodi ea a ducimus iste. Velit ab at autem dolores aut aliquid, consequatur distinctio assumenda voluptatum a adipisci libero illum qui cupiditate mollitia, ad praesentium laboriosam consectetur asperiores sapiente! Facere, tempore obcaecati in, asperiores cumque autem, quod non laboriosam a officiis labore neque hic repellendus quas dolore. Blanditiis ad perspiciatis quo aliquid qui incidunt magnam cupiditate veritatis praesentium exercitationem reiciendis possimus accusantium, laudantium nihil velit repellat quasi quam natus expedita, numquam, magni explicabo.</p>
<p class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo expedita ab reiciendis aliquam consequuntur qui quia omnis, voluptas ad, corrupti commodi delectus asperiores voluptatem eos architecto non? Fugiat quo cumque aliquam aut accusantium distinctio debitis consequuntur! Vero unde quaerat blanditiis dolores molestiae, deleniti quae laboriosam! Id commodi cupiditate, neque fugit illum dicta, aliquam inventore magnam animi ab sunt unde voluptatum omnis pariatur qui ratione delectus quos cumque rem architecto optio voluptate tempora ullam. Omnis, cum sapiente officiis quos, commodi iste impedit nesciunt cupiditate minus accusamus optio iusto laudantium recusandae error temporibus? Commodi nulla amet quae doloribus, est aut quam temporibus, sit voluptatibus consequuntur in. Quasi minus corporis odit magnam adipisci sapiente eveniet aut accusantium numquam perspiciatis dicta tenetur labore quos qui pariatur voluptatem eum quisquam, amet hic commodi ea a ducimus iste. Velit ab at autem dolores aut aliquid, consequatur distinctio assumenda voluptatum a adipisci libero illum qui cupiditate mollitia, ad praesentium laboriosam consectetur asperiores sapiente! Facere, tempore obcaecati in, asperiores cumque autem, quod non laboriosam a officiis labore neque hic repellendus quas dolore. Blanditiis ad perspiciatis quo aliquid qui incidunt magnam cupiditate veritatis praesentium exercitationem reiciendis possimus accusantium, laudantium nihil velit repellat quasi quam natus expedita, numquam, magni explicabo.</p>
<div class="container">
<h2>Character Counter</h2>
<textarea class="textarea" id="textarea" placeholder="please write your text here..." maxlength="50"></textarea>
<div class="counter-container">
<p>Total Characters:
<span class="total-counter" id="total-counter">0</span>
</p>
<p>Remaining:
<span class="remaining-counter" id="remaining-counter">50</span>
</p>
</div>
</div>
</div>
<div class="RCG">
<h1>Random Color Generator</h1>
<div class="c-container">
</div>
</div>
<div class="videoarea">
<div class="main-container">
<img src="https://images.pexels.com/photos/15517793/pexels-photo-15517793.jpeg?auto=compress&cs=tinysrgb&w=400&lazy=load" alt="movie-image">
<h1>Movie Title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut excepturi ipsam reprehenderit quis tempora quia, doloremque mollitia est earum sequi assumenda placeat sit ad repellendus minima soluta perspiciatis id maiores.</p>
<button class="btn">watch now</button>
</div>
<div class="trailer-container activeV">
<video src="trailer.mp4" controls></video>
<i class="fa-solid fa-xmark fa-2x close-icon" ></i>
</div>
</div>
<script src="index.js"></script>
</body>
</html>