-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
131 lines (126 loc) · 5.13 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
128
129
130
131
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png" />
<title>Frontend Mentor | Loopstudios landing page</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<main id="container">
<section id="header">
<nav id="navbar">
<img src="images/logo.svg" alt="logo" id="logo" />
<img src="images/icon-hamburger.svg" alt="icon-hamburger" id="icon-hamburger" class="toggle" />
<ul id="nav-link-list">
<li class="nav-links"><a href="#"> About</a></li>
<li class="nav-links"><a href="#"> Careers</a></li>
<li class="nav-links"><a href="#"> Events</a></li>
<li class="nav-links"><a href="#"> Products</a></li>
<li class="nav-links"><a href="#"> Support</a></li>
</ul>
</nav>
<nav id="mobile-nav" class="hidden">
<div class="mobile-nav-logo">
<img src="images/logo.svg" alt="logo" id="logo" />
<img src="images/icon-close.svg" alt="icon-close.svg" class="toggle" />
</div>
<ul id="mobile-nav-list">
<li class="mobile-nav-links"><a href="#"> About</a></li>
<li class="mobile-nav-links"><a href="#"> Careers</a></li>
<li class="mobile-nav-links"><a href="#"> Events</a></li>
<li class="mobile-nav-links"><a href="#"> Products</a></li>
<li class="mobile-nav-links"><a href="#"> Support</a></li>
</ul>
</nav>
<div id="header-text">
<h1>Immersive experiences that deliver</h1>
</div>
</section>
<section id="middle-sec">
<div id="vr-img">
<img id="desktop-image-interactive" src="images/desktop/image-interactive.jpg" alt="image-interactive" />
<img id="mobile-image-interactive" src="images/mobile/image-interactive.jpg" alt="image-interactive" />
</div>
<div id="vr-desc">
<h1>The leader in interactive VR</h1>
<p>
Founded in 2011, Loopstudios has been producing world-class virtual
reality projects for some of the best companies around the globe.
Our award-winning creations have transformed businesses through
digital experiences that bind to their brand.
</p>
</div>
</section>
<section id="creation-sec">
<div id="creations-head">
<h1>Our creations</h1>
<button id="btn">See all</button>
</div>
<div id="creations-grid">
<div class="creation-img img1">
<h2>Deep earth</h2>
</div>
<div class="creation-img img2">
<h2>Night arcade</h2>
</div>
<div class="creation-img img3">
<h2>Soccer team VR</h2>
</div>
<div class="creation-img img4">
<h2>The grid</h2>
</div>
<div class="creation-img img5">
<h2>From up above VR</h2>
</div>
<div class="creation-img img6">
<h2>Pocket borealis</h2>
</div>
<div class="creation-img img7">
<h2>The curiosity</h2>
</div>
<div class="creation-img img8">
<h2>Make it fisheye</h2>
</div>
</div>
<button id="mobile-btn">See all</button>
</section>
<footer>
<div id="logo-social-links">
<div id="footer-logo">
<img src="images/logo.svg" alt="Footer-logo" />
</div>
<div id="desktop-view-social-links">
<span class="social-links"><img class="icon" src="images/icon-facebook.svg" alt="icon-facebook" /></span>
<span class="social-links"><img class="icon" src="images/icon-twitter.svg" alt="icon-twitter" /></span>
<span class="social-links"><img class="icon" src="images/icon-pinterest.svg" alt="icon-pinterest" /></span>
<span class="social-links"><img class="icon" src="images/icon-instagram.svg" alt="icon-instagram" /></span>
</div>
</div>
<div id="footer-nav-links">
<ul id="footer-link-list">
<li class="footer-links"><a href="#"> About</a></li>
<li class="footer-links"><a href="#"> Careers</a></li>
<li class="footer-links"><a href="#"> Events</a></li>
<li class="footer-links"><a href="#"> Products</a></li>
<li class="footer-links"><a href="#"> Support</a></li>
</ul>
<div id="mobile-view-social-links">
<span class="social-links"><img class="icon" src="images/icon-facebook.svg" alt="icon-facebook" /></span>
<span class="social-links"><img class="icon" src="images/icon-twitter.svg" alt="icon-twitter" /></span>
<span class="social-links"><img class="icon" src="images/icon-pinterest.svg" alt="icon-pinterest" /></span>
<span class="social-links"><img class="icon" src="images/icon-instagram.svg" alt="icon-instagram" /></span>
</div>
<div id="copyright-section">
<p>
© <span id="copyright-year"></span> Loopstudios. All rights
reserved.
</p>
</div>
</div>
</footer>
</main>
<script src="script.js"></script>
</body>
</html>