1<!DOCTYPE html>
2<html lang="en">
3
4<head>
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <link rel="preconnect" href="https://fonts.googleapis.com">
8 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9 <link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap"
10 rel="stylesheet">
11 <link rel="stylesheet" href="./style.css">
12 <link rel="stylesheet" href="../assets/common.css">
13 <link rel="shortcut icon" href="../assets/favicon.png" type="image/png">
14 <script src="../assets/common.js"></script>
15 <title>001. Vision</title>
16</head>
17
18<body>
19 <!-- Modal Section -->
20 <input class="modal-state" id="modal" type="checkbox" />
21 <div class="modal">
22 <label class="modal__bg" for="modal"></label>
23 <div class="modal__inner">
24 <label class="modal__close" for="modal"></label>
25 <h2>001.Vision</h2>
26 <p class="modal__p">
27 <ul>
28 <li>Sneak effect using CSS and JS.</li>
29 <li>Do you know who is bruce wayne?</li>
30 <span style="color:var(--lightGold)">Then close this box and try typing who he is.</span>
31 </ul>
32 </p>
33 </div>
34 </div>
35
36 <!-- Main Content -->
37 <div id="scope"></div>
38 <p class="content">
39 Fk off mate sit amet, consectetur adipiscing elit. Suspendisse a mi in lorem rhoncus congue. Aenean porta
40 consectetur sollicitudin. Nulla erat turpis, venenatis in faucibus <span class="quote">It's not</span> , laoreet
41 non augue. Proin fermentum
42 augue eu cursus mollis. Sed hendrerit mi sed sollicitudin vulputate.
43 Vestibulum sit amet aliquet velit. Fusce
44 venenatis tortor nec lacus vehicula vestibulum.
45 Ut ac massa sagittis, quam eu, luctus odio. Maecenas semper leo
46 at luctus tempor. Donec odio neque,
47 rhoncus in dolor quis, sodales ornare urna. Orci varius natoque <span class="quote">who I am </span> penatibus
48 et magnis dis parturient montes,
49 nascetur ridiculus mus. Nullam id semper mauris. Donec tempor nisl in libero aliquet, quis luctus quam
50 sollicitudin. Morbi blandit id dui sodales finibus. Duis ultrices sapien et nisi pharetra, nec ultrices odio
51 iaculis. Sed non semper nulla. rutrum sem dolor, sed suscipit justo
52 efficitur a. Integer aliquet in augue sed rhoncus. Maecenas rutrum porttitor tellus eget imperdiet. Nunc sed
53 diam quis ipsum volutpat fringilla. Morbi pretium posuere neque, ut pretium velit scelerisque id. Duis malesuada
54 egestas vehicula. Praesent porttitor, turpis id ullamcorper venenatis, nisi orci pretium mauris, eu pretium
55 sapien Maecenas euismod dui Phasellus fringilla hendrerit purus, vitae rhoncus justo cursus eget. Donec at
56 rhoncus neque.
57 In a euismod lacus.et sem egestas consequat. In consequat libero ex, ut
58 commodo neque
59 mollis sodales.
60 Sed tempor, elit laoreet pretium mattis, sem ante semper eros, finibus viverra risus dui nec odio. Integer
61 ultrices, magna a justo nunc porttitor turpis, ut dignissim nisl lacus
62 et ipsum. Mauris id lorem
63 viverra, finibus augue vel, dictum erat. Quisque condimentum, lacus ac porttitor commodo, lorem urna euismod
64 elit, <span class="quote">underneath</span> in dignissim neque libero et est. Nunc posuere varius tortor ut
65 interdum. Nam a enim eget mi lobortis
66 laoreet. Praesent at cursus magna. Etiam sed lacus nec tellus efficitur facilisis scelerisque id ligula.
67 Nulla magna nisi, pellentesque sit amet eleifend eu, tristique suscipit nibh. Quisque iaculis sem at consequat
68 sodales. Donec in ipsum ultricies, augue. Proin rutrum
69 dictum turpis, ut lacinia nisl
70 accumsan quis. Suspendisse vulputate rhoncus nisi. Phasellus dignissim ligula nec odio egestas, vitae ultricies
71 odio faucibus. <span class="quote">but what I do</span> Vivamus ullamcorper efficitur turpis in euismod. Nulla
72 at
73 est a nisi convallis aliquam.
74 Mauris semper orci a mauris pharetra, in fringilla sem ornare. Nulla at est a nisi convallis aliquam. Nulla
75 semms herb. Serchng forr bst wayy to doo.Mauris semper orci a mauris pharetra, ultricesin fringilla sem ornare.
76 Nulla at
77 est a nisi convallis aliquam. Nulla semms herb. Serchng forr bst wayy to doo.Nulla magna nisi,<span
78 class="quote">that defines
79 me.</span> pellentesque sit
80 amet eleifend eu, tristique suscipit nibh. Quisque iaculis sem at consequat
81 sodales. Donec in ipsum ultricies, augue. Proin rutrum
82 dictum turpis, ut lacinia nisl
83 </p>
84
85 <!-- Footer Section -->
86 <div class="footer">
87 <label for="modal">(i)</label>
88 <a class="arrow" href="../"></a>
89 </div>
90 <script src="./script.js"></script>
91</body>
92
93</html>