-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathstunninglandingpage.html
98 lines (89 loc) · 4.37 KB
/
stunninglandingpage.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
<!DOCTYPE html>
<html lang="en",class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>STUNNING LANDING PAGE</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="stunningpagecss.css">
<link rel="preload" href="Kajiro.woff2" as="font" type="font/woff2" crossorigin>
<link rel="stylesheet" href="https://unpkg.com/sheryjs/dist/Shery.css" />
</head>
<body>
<div id="main">
<div id="back">
<img src="IMG_7564.JPG" alt="">
<img src="IMG_7565.JPG" alt="">
<img src="IMG_7566.JPG" alt="">
<img src="IMG_7567.JPG" alt="">
<img src="IMG_7568.JPG" alt="">
</div>
<div id="top">
<div id="workingarea">
<div id="nav">
<div id="nleft">
<img src="raybanlogo.png" alt="">
<a href="#">products</a>
<a href="">about</a>
</div>
<div id="nright">
<a href="#">LUXE</a>
<a href="#">pricing</a>
</div>
</div>
<div id="hero">
<div id="heroleft">
<div class="elem">
<h1>DEVAVRAT SINGH</h1>
<h1>HE WILL BE</h1>
<h1>DEVAVRAT SINGH</h1>
<h1>HE WILL BE</h1>
<h1>DEVAVRAT SINGH</h1>
</div>
<div class="elem">
<h1>IS NEXT LEVEL</h1>
<h1>IRREPLACEABLE</h1>
<h1>IS NEXT LEVEL</h1>
<h1>IRREPLACEABLE</h1>
<h1>IS NEXT LEVEL</h1>
</div>
<div class="elem">
<h1>PRSONALITY.</h1>
<h1>IN FUTURE</h1>
<h1>PRSONALITY.</h1>
<h1>IN FUTURE</h1>
<h1>PRSONALITY</h1>
</div>
<button>Explore Now</button>
</div>
<div id="heroright">
<p>
Lorem ipsum dolor sit a met.
</p>
<!-- work from here tomorrow -->
<div id="imagediv">
</div>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Asperiores sequi alias, nemo iste quam officiis pariatur maiores consequuntur nesciunt inventore commodi nulla reprehenderit repellendus dolore autem provident, velit est, atque debitis eaque ducimus id maxime.
</p>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Tempore laborum voluptatum est quia inventore magni aliquid minus! Saepe perferendis nobis a ab. A nihil beatae fugiat explicabo recusandae et delectus soluta, possimus officia.
</p>
</div>
</div>
</div>
</div>
</div>
<!-- Gsap is needed for Basic Effects -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<!-- Scroll Trigger is needed for Scroll Effects -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
<!-- Three.js is needed for 3d Effects -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/0.155.0/three.min.js"></script>
<!-- ControlKit is needed for Debug Panel -->
<script src="https://cdn.jsdelivr.net/gh/automat/controlkit.js@master/bin/controlKit.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/sheryjs/dist/Shery.js"></script>
<script src="stunninglandingpage.js"></script>
</body>
</html>