-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
48 lines (46 loc) · 2.79 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
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<title>Quick menu</title>
</head>
<body>
<div id="app-preview-container">
<div id="app-preview" data-aos="fade-up">
<h1>Hi am a title</h1>
<span class="description">In publishing and graphic design, Lorem ipsum is a placeholder text commonly used</span>
<span class="description">to demonstrate the visual form of a document or a typeface without relying on meaningful.</span>
<br />
<div class="preview-content">
<div id="app-item">
<div class="app-item unselected-app-item" data-attr="one">
<h3>Lorem ipsum dolor sit amet</h3>
<span class="description">At vero eos et accusamus et iusto odio dignissimos ducimus</span>
<span class="description">et quas molestias excepturi sint occaecati cupiditate non </span>
</div>
<div class="app-item selected-app-item" data-attr="two">
<h3>Lorem ipsum dolor sit amet</h3>
<span class="description">At vero eos et accusamus et iusto odio dignissimos ducimus</span>
<span class="description">et quas molestias excepturi sint occaecati cupiditate non </span>
</div>
<div class="app-item unselected-app-item" data-attr="three">
<h3>Lorem ipsum dolor sit amet</h3>
<span class="description">At vero eos et accusamus et iusto odio dignissimos ducimus</span>
<span class="description">et quas molestias excepturi sint occaecati cupiditate non </span>
</div>
</div>
<div class="app-item-preview">
<img class="one app-item-img unselected-app-item-preview" src="https://assets.gqindia.com/photos/64f5ef3bf0422a5f6211860d/16:9/w_1920,c_limit/The-Equalizer-3-Denzel-Washington-fees_004.jpg" alt="app preview one" />
<img class="two app-item-img selected-app-item-preview" src="https://encrypted-tbn1.gstatic.com/licensed-image?q=tbn:ANd9GcR_EuEUGoQWN_UnydS-MihovoN-4znnI9kNHpwj5v199UyU2VBpqHrU5OYPUo4fBQX5vFb_UKOEiuwMiBU" alt="app preview two" />
<img class="three app-item-img unselected-app-item-preview" src="https://www.usatoday.com/gcdn/presto/2020/08/17/USAT/7a0449c7-ffa8-450d-b65f-77a920a61757-Robert_De_Niro.JPG?width=660&height=440&fit=crop&format=pjpg&auto=webp" alt="app preview three" />
</div>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>