Files
Figma_itproger/index.html
2026-03-10 23:18:05 +03:00

211 lines
9.2 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Figma</title>
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<header class="container">
<span class="logo">logo</span>
<nav class="nav">
<button class="burger" onclick="toggleMenu()"></button>
<ul class="items menu" id="menu">
<li class="item active">
<a class="link" href="/">Home</a>
</li>
<li class="item"><a class="link" href="./about.html">About us</a></li>
<li class="item"><a class="link" href="./portfolio.html">Portfolio</a></li>
<li class="item"><a class="link" href="./news.html">News</a></li>
<li class="item btn"><a class="link" href="./contacts.html">Contacts</a></li>
</ul>
</nav>
</header>
<div class="hero container">
<div class="hero_info">
<h2 class="hero_h2">3D game Dev </h2>
<h1 class="hero_h1">Work that we produce for our clients</h1>
<p class="hero_p">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard.</p>
<button class="btn">Get more details</button>
</div>
<img class="hero_img" src="images/Gameplay.svg" alt="img">
</div>
<div class="container trending">
<a href="#" class="see-all">SEE ALL</a>
<h3 class="see_h3">Currently Trending Games</h3>
<div class="games">
<!-- 1 -->
<div class="block">
<img class="block_img" src="images/Games/1.png" alt="game1">
<span class="span"><img src="images/Fire.svg" alt="fire">40 Followers</span>
</div>
<!-- 2 -->
<div class="block">
<img class="block_img" src="images/Games/2.png" alt="game2">
<span class="span"><img src="images/Fire.svg" alt="fire">40 Followers</span>
</div>
<!-- 3 -->
<div class="block">
<img class="block_img" src="images/Games/3.png" alt="game3">
<span class="span"><img src="images/Fire.svg" alt="fire">40 Followers</span>
</div>
<!-- 4 -->
<div class="block">
<img class="block_img" src="images/Games/4.png" alt="game4">
<span class="span"><img src="images/Fire.svg" alt="fire">40 Followers</span>
</div>
</div>
</div>
<div class="container big-text">
<p class="text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
<div class="container banner">
<h3 class="banner_h3">Lorem Ipsum</h3>
<p class="banner_p">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,</p>
<img class="img_banner" src="images/banner.png" alt="banner">
</div>
</div>
<div class="features">
<div class="container">
<h3 class="features_h3">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</h3>
<p class="features_p">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
</p>
<div class="feature_info">
<!-- 1 -->
<div class="feature_block">
<img class="block_img" src="images/row/phone.png" alt="img1">
<p class="block_p">Mobile Game Development</p>
<img class="img_block" src="images/row/right.svg" alt="right">
</div>
<!-- 2 -->
<div class="feature_block">
<img class="block_img" src="images/row/pc.png" alt="img1">
<p class="block_p">PC Game Development</p>
<img class="img_block" src="images/row/right.svg" alt="right">
</div>
<!-- 3 -->
<div class="feature_block">
<img class="block_img" src="images/row/ps4.png" alt="img1">
<p class="block_p">PS4 Game Development</p>
<img class="img_block" src="images/row/right.svg" alt="right">
</div>
<!-- 4 -->
<div class="feature_block">
<img class="block_img" src="images/row/vr.png" alt="img1">
<p class="block_p">AR/VR Solutions</p>
<img class="img_block" src="images/row/right.svg" alt="right">
</div>
<div class="blocks_down">
<!-- 5 -->
<div class="feature_block">
<img class="block_img" src="images/row/monitor.png" alt="img1">
<p class="block_p">AR/ VR design</p>
<img class="img_block" src="images/row/right.svg" alt="right">
</div>
<!-- 6 -->
<div class="feature_block">
<img class="block_img" src="images/row/cube.png" alt="img1">
<p class="block_p">3D Modelings</p>
<img class="img_block" src="images/row/right.svg" alt="right">
</div>
</div>
</div>
</div>
</div>
<div class="wrapper">
<div class="container projects">
<h3 class="projects_h3">
Our Recent Projects
</h3>
<p class="projects_p">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</p>
<div class="projects_images">
<img class="project_img" src="images/Projects/1.png" alt="">
<img class="project_img" src="images/Projects/2.png" alt="">
<img class="project_img" src="images/Projects/3.png" alt="">
</div>
<div class="projects_images">
<img class="project_img" src="images/Projects/4.png" alt="">
<img class="project_img" src="images/Projects/5.png" alt="">
<img class="project_img" src="images/Projects/6.png" alt="">
</div>
<a class="see-all" href="#">SEE ALL</a>
</div>
<div class="container email">
<h3 class="email_h3">Lorem Ipsum</h3>
<p class="email_p">Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
<div class="email_block">
<div class="email_collumn">
<h4 class="email_h4">Stay in the loop</h4>
<p class="email_p">Subscribe to receive the latest news and updates about TDA.
We promise not to spam you! </p>
</div>
<div class="email_collumn">
<input class="email_input" type="email" placeholder="Enter email address" id="emailField">
<button class="email_btn" onclick="checkEmail()">Continue</button>
</div>
</div>
</div>
</div>
<footer class="footer">
<div class="blocks container">
<div class="footer_info">
<span class="footer_logo">Logo</span>
<p class="footer_p">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</p>
</div>
<div class="footer_info">
<h4 class="footer_h4">
About us
</h4>
<ul class="footer_ul">
<li class="footer_li">
Zeux
</li>
<li class="footer_li">
Portfolio
</li>
<li class="footer_li">
Careers
</li>
<li class="footer_li">
Contact us
</li>
</ul>
</div>
<div class="footer_info">
<h4 class="footer_h4">
Contact us
</h4>
<p class="footer_p">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</p>
<p class="footer_p">
+908 89097 890
</p>
</div>
</div>
<hr>
<p class="footer_p_down">
Copyright ® 2021 Lorem All rights Rcerved
</p>
</footer>
<script src="main.js"></script>
</body>
</html>