-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
127 lines (125 loc) · 6.42 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
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
120
121
122
123
124
125
126
127
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="style.css" rel="stylesheet">
<title>Theyalow</title>
<style>
@import url('https://fonts.googleapis.com/css?family=Asap|Open+Sans:400,700|PT+Sans|PT+Sans+Narrow:400,700&display=swap');
</style>
</head>
<body>
<container class="container">
<div class="wrapper-header">
<header class="header">
<div class="logo-wrapper">
<img src="./assets/icons/logoicon.svg" class="logo-icon" alt="Logo icon">
<div class="logo">theyalow</div>
</div>
<nav class="navbar">
<ul>
<li class="about-us">
<a href="#"><img class="about-us-icon" src="./assets/icons/abouticon.svg" alt="About us" hspace="10">about us</a>
</li>
<li class="services">
<a href="#"><img class="services-icon" src="./assets/icons/servicesicon.svg" alt="Services" hspace="10">services</a>
</li>
<li class="contact">
<a href="#"><img class="contact-icon" src="./assets/icons/contacticon.svg" alt="Contact" hspace="10">contact</a>
</li>
</ul>
</nav>
<div class="navbar-shadow1"></div>
<div class="navbar-shadow2"></div>
</header>
<div class="wrapper-video">
<video class="desktop-video" width="550" height="328" poster="./assets/images/video-image.jpg"></video>
<video class="mobile-video" width="640" height="326" poster="./assets/images/videomobile.svg"></video>
<img class="slider-left" src="./assets/images/slider-left.svg" alt="Slider-left">
<img class="slider-right" src="./assets/images/slider-right.svg" alt="Slider-right">
<img class="scroll-video" src="./assets/images/scroll-video.jpg" alt="Scroll">
<h1 class="h1">
<span class="the-cool">the cool</span>
<span class="the-minimal">the minimal</span>
</h1>
</div>
</div>
<div class="wrapper-icons">
<img class="bg-icons-top" src="./assets/images/bgiconstop.svg" alt="Background top">
<div class="better-design">
<img src="./assets/images/better-design.svg" alt="Cloud"><br>
<span>better design</span>
</div>
<div class="customise">
<img src="./assets/images/customise.svg" alt="Leaf"><br>
<span>customise</span>
</div>
<div class="its-free">
<img src="./assets/images/its-free.svg" alt="Paper plane"><br>
<span>its free</span>
</div>
</div>
<div class="wrapper-content">
<h2 class="h2">Lorem ipsum dolor sit amet</h2>
</div>
<div class="video-description">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inci-didunt ut
<div class="plus-description"><img src="./assets/icons/plussignicon.svg" alt="Plus sign"></div>
</div>
<div class="video-description-mobile">
Lorem ipsum dolor sit amet, consecte-tur adipisicing elit, sed do eiusmod tempor incididunt ut
<div class="plus-description-mobile"><img src="./assets/icons/plussignicon.svg" alt="Plus sign"></div>
</div>
<div class="video-small">
<div class="magic"> </div>
<img src="./assets/images/video-image-small.svg" alt="Poster">
</div>
<div class="twitter">
<span>22</span>
<img class="twitter-logo" src="./assets/images/twitter.svg" alt="Twitter block">
<img class="twitter-logo-mobile" src="./assets/images/twitter-logo-mobile.svg" alt="Twitter logo">
<img class="plus-twitter" src="./assets/icons/plussigntwitter.svg" alt="Plus sign">
<div class="tweets">
<div class="tweet-one">
<img src="./assets/images/tweet-one.svg" alt="Tweet one">
<div>Daily Mobile UI Design Inspiration #1<br> via @cssauthor</div>
</div>
<div class="tweet-two">
<img src="./assets/images/tweet-two.svg" alt="Tweet two">
<div>Daily Mobile UI Design Inspiration #1<br> via @cssauthor</div>
</div>
<div class="tweet-three">
<img src="./assets/images/tweet-three.svg" alt="Tweet three">
<div>Daily Mobile UI Design Inspiration #1<br> via @cssauthor</div>
</div>
<div class="tweet-text-field">
<img src="./assets/images/tweet-text-field.png" alt="Text field">
</div>
</div>
</div>
<div class="date"><span>25</span>april</div>
<div class="scroll-bar">
<img src="./assets/images/scroll-bar.svg" alt="scroll-bar">
</div>
<div class="wrapper-versions">
<div class="menu-header">Lorem ipsum dolor sit amet</div>
<div class="label"><span>Its 100% Free</span></div>
<img class="desktop" src="./assets/images/desktop.svg" alt="Desktop">
<img class="tablet" src="./assets/images/tablet.svg" alt="Tablet">
<img class="mobile" src="./assets/images/mobile.svg" alt="Mobile">
<div class="menu">
<ul>
<li class="menu-items"><span class="span1"></span> Sed ut perspiciatis unde omnis</li>
<li class="menu-items"><span class="span2"></span>Lorem ipsum dolor sit amet, con-sectetur adipisicing</li><br>
<li class="menu-items"><span class="span3"></span>Sed ut perspiciatis unde omnis</li>
<li class="menu-items"><span class="span4"></span>Lorem ipsum dolor sit amet, con-sectetur adipisicing</li>
</ul>
</div>
</div>
<div class="wrapper-footer">
<img class="logo-icon-footer" src="./assets/icons/logoiconsmall.svg" alt="Logo small"></img>
<div class="logo-footer">theyalow</div>
</div>
</container>
</body>
</html>