Skip to content

Commit 231ff27

Browse files
TusharKesarwaniTusharKesarwani
authored
Merge pull request #1764 from gauravsingh1281/Issue-#1741
Issue No. #1741 [ Fixed New Project Added ] Loopstudios landing page.
2 parents 8165841 + 49a2e9a commit 231ff27

3 files changed

Lines changed: 1091 additions & 0 deletions

File tree

‎Projects/Loopstudios-landing-page/Index.html‎

Lines changed: 156 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,156 @@
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="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png" />
8+
<title>Frontend Mentor | Loopstudios landing page</title>
9+
10+
<link rel="stylesheet" href="style.css" />
11+
</head>
12+
13+
<body>
14+
<main id="container">
15+
<section id="header">
16+
<nav id="navbar">
17+
<img src="https://64b43fd08ca8dd675432a85b--celebrated-selkie-77e3f5.netlify.app/images/logo.svg"
18+
alt="logo" id="logo" />
19+
<img src="https://64b43fd08ca8dd675432a85b--celebrated-selkie-77e3f5.netlify.app/images/icon-hamburger.svg"
20+
alt="icon-hamburger" id="icon-hamburger" class="toggle" />
21+
<ul id="nav-link-list">
22+
<li class="nav-links"><a href="#"> About</a></li>
23+
<li class="nav-links"><a href="#"> Careers</a></li>
24+
<li class="nav-links"><a href="#"> Events</a></li>
25+
<li class="nav-links"><a href="#"> Products</a></li>
26+
<li class="nav-links"><a href="#"> Support</a></li>
27+
</ul>
28+
</nav>
29+
<nav id="mobile-nav" class="hidden">
30+
<div class="mobile-nav-logo">
31+
<img src="https://64b43fd08ca8dd675432a85b--celebrated-selkie-77e3f5.netlify.app/images/logo.svg"
32+
alt="logo" id="logo" />
33+
<img src="https://64b43fd08ca8dd675432a85b--celebrated-selkie-77e3f5.netlify.app/images/icon-close.svg"
34+
alt="icon-close.svg" class="toggle" />
35+
</div>
36+
<ul id="mobile-nav-list">
37+
<li class="mobile-nav-links"><a href="#"> About</a></li>
38+
<li class="mobile-nav-links"><a href="#"> Careers</a></li>
39+
<li class="mobile-nav-links"><a href="#"> Events</a></li>
40+
<li class="mobile-nav-links"><a href="#"> Products</a></li>
41+
<li class="mobile-nav-links"><a href="#"> Support</a></li>
42+
</ul>
43+
</nav>
44+
<div id="header-text">
45+
<h1>Immersive experiences that deliver</h1>
46+
</div>
47+
</section>
48+
<section id="middle-sec">
49+
<div id="vr-img">
50+
<img id="desktop-image-interactive"
51+
src="https://64b43fd08ca8dd675432a85b--celebrated-selkie-77e3f5.netlify.app/images/desktop/image-interactive.jpg"
52+
alt="image-interactive" />
53+
<img id="mobile-image-interactive"
54+
src="https://64b43fd08ca8dd675432a85b--celebrated-selkie-77e3f5.netlify.app/images/mobile/image-interactive.jpg"
55+
alt="image-interactive" />
56+
</div>
57+
<div id="vr-desc">
58+
<h1>The leader in interactive VR</h1>
59+
<p>
60+
Founded in 2011, Loopstudios has been producing world-class virtual
61+
reality projects for some of the best companies around the globe.
62+
Our award-winning creations have transformed businesses through
63+
digital experiences that bind to their brand.
64+
</p>
65+
</div>
66+
</section>
67+
<section id="creation-sec">
68+
<div id="creations-head">
69+
<h1>Our creations</h1>
70+
<button id="btn">See all</button>
71+
</div>
72+
<div id="creations-grid">
73+
<div class="creation-img img1">
74+
<h2>Deep earth</h2>
75+
</div>
76+
<div class="creation-img img2">
77+
<h2>Night arcade</h2>
78+
</div>
79+
<div class="creation-img img3">
80+
<h2>Soccer team VR</h2>
81+
</div>
82+
<div class="creation-img img4">
83+
<h2>The grid</h2>
84+
</div>
85+
<div class="creation-img img5">
86+
<h2>From up above VR</h2>
87+
</div>
88+
<div class="creation-img img6">
89+
<h2>Pocket borealis</h2>
90+
</div>
91+
<div class="creation-img img7">
92+
<h2>The curiosity</h2>
93+
</div>
94+
<div class="creation-img img8">
95+
<h2>Make it fisheye</h2>
96+
</div>
97+
</div>
98+
<button id="mobile-btn">See all</button>
99+
</section>
100+
<footer>
101+
<div id="logo-social-links">
102+
<div id="footer-logo">
103+
<img src="https://64b43fd08ca8dd675432a85b--celebrated-selkie-77e3f5.netlify.app/images/logo.svg"
104+
alt="Footer-logo" />
105+
</div>
106+
<div id="desktop-view-social-links">
107+
<span class="social-links"><img class="icon"
108+
src="https://64b43fd08ca8dd675432a85b--celebrated-selkie-77e3f5.netlify.app/images/icon-facebook.svg"
109+
alt="icon-facebook" /></span>
110+
<span class="social-links"><img class="icon"
111+
src="https://64b43fd08ca8dd675432a85b--celebrated-selkie-77e3f5.netlify.app/images/icon-twitter.svg"
112+
alt="icon-twitter" /></span>
113+
<span class="social-links"><img class="icon"
114+
src="https://64b43fd08ca8dd675432a85b--celebrated-selkie-77e3f5.netlify.app/images/icon-pinterest.svg"
115+
alt="icon-pinterest" /></span>
116+
<span class="social-links"><img class="icon"
117+
src="https://64b43fd08ca8dd675432a85b--celebrated-selkie-77e3f5.netlify.app/images/icon-instagram.svg"
118+
alt="icon-instagram" /></span>
119+
</div>
120+
</div>
121+
<div id="footer-nav-links">
122+
<ul id="footer-link-list">
123+
<li class="footer-links"><a href="#"> About</a></li>
124+
<li class="footer-links"><a href="#"> Careers</a></li>
125+
<li class="footer-links"><a href="#"> Events</a></li>
126+
<li class="footer-links"><a href="#"> Products</a></li>
127+
<li class="footer-links"><a href="#"> Support</a></li>
128+
</ul>
129+
<div id="mobile-view-social-links">
130+
<span class="social-links"><img class="icon"
131+
src="https://64b43fd08ca8dd675432a85b--celebrated-selkie-77e3f5.netlify.app/images/icon-facebook.svg"
132+
alt="icon-facebook" /></span>
133+
<span class="social-links"><img class="icon"
134+
src="https://64b43fd08ca8dd675432a85b--celebrated-selkie-77e3f5.netlify.app/images/icon-twitter.svg"
135+
alt="icon-twitter" /></span>
136+
<span class="social-links"><img class="icon"
137+
src="https://64b43fd08ca8dd675432a85b--celebrated-selkie-77e3f5.netlify.app/images/icon-pinterest.svg"
138+
alt="icon-pinterest" /></span>
139+
<span class="social-links"><img class="icon"
140+
src="https://64b43fd08ca8dd675432a85b--celebrated-selkie-77e3f5.netlify.app/images/icon-instagram.svg"
141+
alt="icon-instagram" /></span>
142+
</div>
143+
<div id="copyright-section">
144+
<p>
145+
© <span id="copyright-year"></span> Loopstudios. All rights
146+
reserved.
147+
</p>
148+
</div>
149+
</div>
150+
</footer>
151+
</main>
152+
153+
<script src="script.js"></script>
154+
</body>
155+
156+
</html>

‎Projects/Loopstudios-landing-page/script.js‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
// copyright year
2+
3+
let copyRightYear = document.getElementById("copyright-year");
4+
let currentDate = new Date();
5+
let currentYear = currentDate.getFullYear();
6+
copyRightYear.innerText = currentYear;
7+
8+
// toggle mobile menu
9+
10+
const toggleButtons = document.querySelectorAll(".toggle");
11+
12+
toggleButtons.forEach((button) => {
13+
button.addEventListener("click", () => {
14+
document.getElementById("mobile-nav").classList.toggle("hidden");
15+
});
16+
});

0 commit comments

Comments
 (0)