Compare commits
9 Commits
e6ac690692
...
main
| Author | SHA1 | Date | |
|---|---|---|---|
| 07ba482c8b | |||
| dcbf46b4db | |||
| ffca9f3c31 | |||
| f71f914a65 | |||
| 98e9ee1d5d | |||
| bd95f02596 | |||
| 192c30f8c1 | |||
| d6def23321 | |||
| dff5547d78 |
118
about.html
Normal file
118
about.html
Normal file
@@ -0,0 +1,118 @@
|
|||||||
|
<!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">
|
||||||
|
<ul class="items">
|
||||||
|
<li class="item">
|
||||||
|
<a class="link" href="/">Home</a>
|
||||||
|
</li>
|
||||||
|
<li class="item active"><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_about container">
|
||||||
|
<div class="hero_info">
|
||||||
|
<h1 class="hero_h1">
|
||||||
|
Lorem Ipsum is simply dummy text of the printing and.
|
||||||
|
</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 dummy text ever since the 1500s.
|
||||||
|
</p>
|
||||||
|
<button class="hero_btn button">Get in touch</button>
|
||||||
|
</div>
|
||||||
|
<img class="hero_img" src="images/about_photo.png" alt="about_photo">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="container work">
|
||||||
|
<h2 class="work_h2">
|
||||||
|
Why work with us
|
||||||
|
</h2>
|
||||||
|
<div class="work_blocks">
|
||||||
|
<div class="work_block">
|
||||||
|
<span class="work_badge purple">Lorem ipsum</span>
|
||||||
|
<h3 class="work_h3">Lorem Ipsum</h3>
|
||||||
|
<p class="work_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>
|
||||||
|
<div class="work_block">
|
||||||
|
<span class="work_badge brown">Lorem ipsum</span>
|
||||||
|
<h3 class="work_h3">Lorem Ipsum</h3>
|
||||||
|
<p class="work_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>
|
||||||
|
<div class="work_block">
|
||||||
|
<span class="work_badge green">Lorem ipsum</span>
|
||||||
|
<h3 class="work_h3">Lorem Ipsum</h3>
|
||||||
|
<p class="work_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>
|
||||||
|
</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>
|
||||||
118
contacts.html
Normal file
118
contacts.html
Normal file
@@ -0,0 +1,118 @@
|
|||||||
|
<!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>
|
||||||
|
<header class="container">
|
||||||
|
<span class="logo">logo</span>
|
||||||
|
<nav class="nav">
|
||||||
|
<ul class="items">
|
||||||
|
<li class="item">
|
||||||
|
<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="container hero-contacts">
|
||||||
|
<h1 class="contacts_h1">
|
||||||
|
Lorem Ipsum is simply dummy text of the printing and.
|
||||||
|
</h1>
|
||||||
|
<p class="contacts_p">
|
||||||
|
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
|
||||||
|
</p>
|
||||||
|
<img class="contacts_img" src="/images/Map.png" alt="map">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="feedback">
|
||||||
|
<div class="container">
|
||||||
|
<h2 class="feedback_h2">
|
||||||
|
Say hello
|
||||||
|
</h2>
|
||||||
|
<p class="feedback_p">
|
||||||
|
Lorem Ipsum is simply dummy text of the printing .
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<form class="feedback_form">
|
||||||
|
|
||||||
|
<div class="feedback_inline">
|
||||||
|
<div class="feedback_name">
|
||||||
|
<label class="feedback_label" for="">First Name</label>
|
||||||
|
<input class="feedback_input" type="text">
|
||||||
|
</div>
|
||||||
|
<div class="feedback_name">
|
||||||
|
<label class="feedback_label" for="">Last Name</label>
|
||||||
|
<input class="feedback_input" type="text">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<label class="feedback_label">Email Address</label>
|
||||||
|
<input class="one-line" type="email">
|
||||||
|
<label class="feedback_label">Message</label>
|
||||||
|
<textarea class="one-line"></textarea>
|
||||||
|
|
||||||
|
<button class="feedback_btn" type="button">Get in touch</button>
|
||||||
|
|
||||||
|
</form>
|
||||||
|
</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>
|
||||||
BIN
images/Hero Video.png
Normal file
BIN
images/Hero Video.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 356 KiB |
BIN
images/Lupa.png
Normal file
BIN
images/Lupa.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 342 B |
BIN
images/Map.png
Normal file
BIN
images/Map.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 112 KiB |
BIN
images/Projects/1.png
Normal file
BIN
images/Projects/1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 156 KiB |
BIN
images/Projects/2.png
Normal file
BIN
images/Projects/2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 119 KiB |
BIN
images/Projects/3.png
Normal file
BIN
images/Projects/3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 142 KiB |
BIN
images/Projects/4.png
Normal file
BIN
images/Projects/4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 51 KiB |
BIN
images/Projects/5.png
Normal file
BIN
images/Projects/5.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 203 KiB |
BIN
images/Projects/6.png
Normal file
BIN
images/Projects/6.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 141 KiB |
BIN
images/Vector.png
Normal file
BIN
images/Vector.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 758 B |
BIN
images/about_photo.png
Normal file
BIN
images/about_photo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
3
images/icons/map.svg
Normal file
3
images/icons/map.svg
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M19 9C19 8.08075 18.8189 7.1705 18.4672 6.32122C18.1154 5.47194 17.5998 4.70026 16.9497 4.05025C16.2997 3.40024 15.5281 2.88463 14.6788 2.53284C13.8295 2.18106 12.9193 2 12 2C11.0807 2 10.1705 2.18106 9.32122 2.53284C8.47194 2.88463 7.70026 3.40024 7.05025 4.05025C6.40024 4.70026 5.88463 5.47194 5.53284 6.32122C5.18106 7.1705 5 8.08075 5 9C5 10.387 5.41 11.677 6.105 12.765H6.097C8.457 16.46 12 22 12 22L17.903 12.765H17.896C18.6164 11.6414 18.9995 10.3347 19 9ZM12 12C11.2044 12 10.4413 11.6839 9.87868 11.1213C9.31607 10.5587 9 9.79565 9 9C9 8.20435 9.31607 7.44129 9.87868 6.87868C10.4413 6.31607 11.2044 6 12 6C12.7956 6 13.5587 6.31607 14.1213 6.87868C14.6839 7.44129 15 8.20435 15 9C15 9.79565 14.6839 10.5587 14.1213 11.1213C13.5587 11.6839 12.7956 12 12 12Z" fill="#DC7000"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 898 B |
3
images/icons/people.svg
Normal file
3
images/icons/people.svg
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 10.8001C12.9548 10.8001 13.8705 10.4208 14.5456 9.74568C15.2207 9.07055 15.6 8.15488 15.6 7.2001C15.6 6.24532 15.2207 5.32964 14.5456 4.65451C13.8705 3.97938 12.9548 3.6001 12 3.6001C11.0452 3.6001 10.1296 3.97938 9.45442 4.65451C8.77929 5.32964 8.40001 6.24532 8.40001 7.2001C8.40001 8.15488 8.77929 9.07055 9.45442 9.74568C10.1296 10.4208 11.0452 10.8001 12 10.8001ZM6.89866 21.6001C5.07686 21.6001 3.54225 20.0687 4.23942 18.3856C4.66156 17.3664 5.2803 16.4404 6.06031 15.6604C6.84032 14.8804 7.76633 14.2616 8.78547 13.8395C9.8046 13.4174 10.8969 13.2001 12 13.2001C13.1031 13.2001 14.1954 13.4174 15.2145 13.8395C16.2337 14.2616 17.1597 14.8804 17.9397 15.6604C18.7197 16.4404 19.3385 17.3664 19.7606 18.3856C20.4578 20.0687 18.9232 21.6001 17.1014 21.6001H6.89866Z" fill="#DC7000"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 945 B |
3
images/icons/server.svg
Normal file
3
images/icons/server.svg
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M20 3H4C3.46957 3 2.96086 3.21071 2.58579 3.58579C2.21071 3.96086 2 4.46957 2 5V9C2 9.53043 2.21071 10.0391 2.58579 10.4142C2.96086 10.7893 3.46957 11 4 11H20C20.5304 11 21.0391 10.7893 21.4142 10.4142C21.7893 10.0391 22 9.53043 22 9V5C22 4.46957 21.7893 3.96086 21.4142 3.58579C21.0391 3.21071 20.5304 3 20 3ZM15 7C15 7.55228 14.5523 8 14 8C13.4477 8 13 7.55228 13 7C13 6.44772 13.4477 6 14 6C14.5523 6 15 6.44772 15 7ZM19 7C19 7.55228 18.5523 8 18 8C17.4477 8 17 7.55228 17 7C17 6.44772 17.4477 6 18 6C18.5523 6 19 6.44772 19 7ZM20 13H4C3.46957 13 2.96086 13.2107 2.58579 13.5858C2.21071 13.9609 2 14.4696 2 15V19C2 19.5304 2.21071 20.0391 2.58579 20.4142C2.96086 20.7893 3.46957 21 4 21H20C20.5304 21 21.0391 20.7893 21.4142 20.4142C21.7893 20.0391 22 19.5304 22 19V15C22 14.4696 21.7893 13.9609 21.4142 13.5858C21.0391 13.2107 20.5304 13 20 13ZM15 17C15 17.5523 14.5523 18 14 18C13.4477 18 13 17.5523 13 17C13 16.4477 13.4477 16 14 16C14.5523 16 15 16.4477 15 17ZM19 17C19 17.5523 18.5523 18 18 18C17.4477 18 17 17.5523 17 17C17 16.4477 17.4477 16 18 16C18.5523 16 19 16.4477 19 17Z" fill="#DC7000"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.2 KiB |
BIN
images/news/RIGHT/1.png
Normal file
BIN
images/news/RIGHT/1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 60 KiB |
BIN
images/news/RIGHT/2.png
Normal file
BIN
images/news/RIGHT/2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 82 KiB |
BIN
images/news/RIGHT/3.png
Normal file
BIN
images/news/RIGHT/3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 72 KiB |
BIN
images/news/RIGHT/4.png
Normal file
BIN
images/news/RIGHT/4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 106 KiB |
BIN
images/news/RIGHT/5.png
Normal file
BIN
images/news/RIGHT/5.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 64 KiB |
BIN
images/news/RIGHT/6.png
Normal file
BIN
images/news/RIGHT/6.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
BIN
images/news/RIGHT/7.png
Normal file
BIN
images/news/RIGHT/7.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
BIN
images/news/left/1.png
Normal file
BIN
images/news/left/1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 389 KiB |
BIN
images/news/left/2.png
Normal file
BIN
images/news/left/2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 405 KiB |
BIN
images/portfolio/1.png
Normal file
BIN
images/portfolio/1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 563 KiB |
BIN
images/portfolio/2.png
Normal file
BIN
images/portfolio/2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 512 KiB |
BIN
images/portfolio/3.png
Normal file
BIN
images/portfolio/3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 336 KiB |
98
index.html
98
index.html
@@ -13,15 +13,17 @@
|
|||||||
<div class="wrapper">
|
<div class="wrapper">
|
||||||
<header class="container">
|
<header class="container">
|
||||||
<span class="logo">logo</span>
|
<span class="logo">logo</span>
|
||||||
|
|
||||||
<nav class="nav">
|
<nav class="nav">
|
||||||
<ul class="items">
|
<button class="burger" onclick="toggleMenu()">☰</button>
|
||||||
|
<ul class="items menu" id="menu">
|
||||||
<li class="item active">
|
<li class="item active">
|
||||||
<a class="link" href="#">Home</a>
|
<a class="link" href="/">Home</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="item"><a class="link" href="#">About us</a></li>
|
<li class="item"><a class="link" href="./about.html">About us</a></li>
|
||||||
<li class="item"><a class="link" href="#">Portfolio</a></li>
|
<li class="item"><a class="link" href="./portfolio.html">Portfolio</a></li>
|
||||||
<li class="item"><a class="link" href="#">News</a></li>
|
<li class="item"><a class="link" href="./news.html">News</a></li>
|
||||||
<li class="item btn"><a class="link" href="#">Contacts</a></li>
|
<li class="item btn"><a class="link" href="./contacts.html">Contacts</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
</header>
|
</header>
|
||||||
@@ -122,6 +124,88 @@
|
|||||||
</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>
|
<script src="main.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
16
main.js
16
main.js
@@ -0,0 +1,16 @@
|
|||||||
|
function checkEmail() {
|
||||||
|
let email = document.querySelector('#emailField').value;
|
||||||
|
if (!email.includes('@')) alert('Нет символа @');
|
||||||
|
else if(!email.includes('.')) alert('Нет символа .');
|
||||||
|
else alert('Все отлично!')
|
||||||
|
};
|
||||||
|
|
||||||
|
function toggleMenu() {
|
||||||
|
let menu = document.getElementById("menu");
|
||||||
|
|
||||||
|
if (menu.style.display === "flex") {
|
||||||
|
menu.style.display = "none";
|
||||||
|
} else {
|
||||||
|
menu.style.display = "flex";
|
||||||
|
}
|
||||||
|
}
|
||||||
235
news.html
Normal file
235
news.html
Normal file
@@ -0,0 +1,235 @@
|
|||||||
|
<!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>
|
||||||
|
<header class="container">
|
||||||
|
<span class="logo">logo</span>
|
||||||
|
<nav class="nav">
|
||||||
|
<ul class="items">
|
||||||
|
<li class="item">
|
||||||
|
<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 active"><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="container news">
|
||||||
|
<div class="news_heading">
|
||||||
|
<h1 class="news_h1">Lorem Ipsum is simply dummy text of the printing and.</h1>
|
||||||
|
<p class="news_p">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
|
||||||
|
<form action="" class="news_search">
|
||||||
|
<img class="news_img_search" src="images/Lupa.png" alt="">
|
||||||
|
<input class="input_news" type="text" placeholder="Search">
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="news container">
|
||||||
|
<div class="news_separation">
|
||||||
|
<div class="news_left">
|
||||||
|
<div class="news_post">
|
||||||
|
<img class="news_image" src="images/news/left/1.png" alt="img">
|
||||||
|
<div class="news_content">
|
||||||
|
<div class="news_title">
|
||||||
|
John smash
|
||||||
|
</div>
|
||||||
|
<div class="news_time">
|
||||||
|
.5min
|
||||||
|
</div>
|
||||||
|
<h1 class="news_h1">Lorem Ipsum is simply dummy text dummy text</h1>
|
||||||
|
<p class="news_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, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries,
|
||||||
|
</p>
|
||||||
|
<p class="news_p">Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="news_line"></div>
|
||||||
|
<div class="news_post">
|
||||||
|
<img class="news_image" src="images/news/left/2.png" alt="img">
|
||||||
|
<div class="news_content">
|
||||||
|
<div class="news_title">
|
||||||
|
John smash
|
||||||
|
</div>
|
||||||
|
<div class="news_time">
|
||||||
|
.5min
|
||||||
|
</div>
|
||||||
|
<h1 class="news_h1">Lorem Ipsum is simply dummy text dummy text</h1>
|
||||||
|
<p class="news_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, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries,
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<h1 class="news_h1">Lorem Ipsum</h1>
|
||||||
|
<p class="news_p">Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
|
||||||
|
</div>
|
||||||
|
<div class="news_right">
|
||||||
|
<!-- 1 -->
|
||||||
|
<div class="news_items">
|
||||||
|
<div class="news_item">
|
||||||
|
<img class="news_item_img" src="images/news/RIGHT/1.png" alt="">
|
||||||
|
<div class="news_cont">
|
||||||
|
<div class="news_cont_title">
|
||||||
|
<h4 class="news_item_h4">John smash</h4>
|
||||||
|
<div class="news_item_time">
|
||||||
|
.5min
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<h2 class="news_item_h2">Lorem Ipsum is simply dummy text dummy text ? </h2>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 2 -->
|
||||||
|
<div class="news_items">
|
||||||
|
<div class="news_item">
|
||||||
|
<img class="news_item_img" src="images/news/RIGHT/2.png" alt="">
|
||||||
|
<div class="news_cont">
|
||||||
|
<div class="news_cont_title">
|
||||||
|
<h4 class="news_item_h4 news_item_h4_2">John smash</h4>
|
||||||
|
<div class="news_item_time">
|
||||||
|
.5min
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<h2 class="news_item_h2">Lorem Ipsum is simply dummy text dummy text ? </h2>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 3 -->
|
||||||
|
<div class="news_items">
|
||||||
|
<div class="news_item">
|
||||||
|
<img class="news_item_img" src="images/news/RIGHT/3.png" alt="">
|
||||||
|
<div class="news_cont">
|
||||||
|
<div class="news_cont_title">
|
||||||
|
<h4 class="news_item_h4 news_item_h4_3">John smash</h4>
|
||||||
|
<div class="news_item_time">
|
||||||
|
.5min
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<h2 class="news_item_h2">Lorem Ipsum is simply dummy text dummy text ? </h2>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 4 -->
|
||||||
|
<div class="news_items">
|
||||||
|
<div class="news_item">
|
||||||
|
<img class="news_item_img" src="images/news/RIGHT/4.png" alt="">
|
||||||
|
<div class="news_cont">
|
||||||
|
<div class="news_cont_title">
|
||||||
|
<h4 class="news_item_h4 news_item_h4_4">John smash</h4>
|
||||||
|
<div class="news_item_time">
|
||||||
|
.5min
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<h2 class="news_item_h2">Lorem Ipsum is simply dummy text dummy text ? </h2>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 5 -->
|
||||||
|
<div class="news_items">
|
||||||
|
<div class="news_item">
|
||||||
|
<img class="news_item_img" src="images/news/RIGHT/5.png" alt="">
|
||||||
|
<div class="news_cont">
|
||||||
|
<div class="news_cont_title">
|
||||||
|
<h4 class="news_item_h4 news_item_h4_5">John smash</h4>
|
||||||
|
<div class="news_item_time">
|
||||||
|
.5min
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<h2 class="news_item_h2">Lorem Ipsum is simply dummy text dummy text ? </h2>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 6 -->
|
||||||
|
<div class="news_items">
|
||||||
|
<div class="news_item">
|
||||||
|
<img class="news_item_img" src="images/news/RIGHT/6.png" alt="">
|
||||||
|
<div class="news_cont">
|
||||||
|
<div class="news_cont_title">
|
||||||
|
<h4 class="news_item_h4 news_item_h4_6">John smash</h4>
|
||||||
|
<div class="news_item_time">
|
||||||
|
.5min
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<h2 class="news_item_h2">Lorem Ipsum is simply dummy text dummy text ? </h2>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 7 -->
|
||||||
|
<div class="news_items">
|
||||||
|
<div class="news_item">
|
||||||
|
<img class="news_item_img" src="images/news/RIGHT/7.png" alt="">
|
||||||
|
<div class="news_cont">
|
||||||
|
<div class="news_cont_title">
|
||||||
|
<h4 class="news_item_h4 news_item_h4_7">John smash</h4>
|
||||||
|
<div class="news_item_time">
|
||||||
|
.5min
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<h2 class="news_item_h2">Lorem Ipsum is simply dummy text dummy text ? </h2>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</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>
|
||||||
198
portfolio.html
Normal file
198
portfolio.html
Normal file
@@ -0,0 +1,198 @@
|
|||||||
|
<!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>
|
||||||
|
<header class="container">
|
||||||
|
<span class="logo">logo</span>
|
||||||
|
<nav class="nav">
|
||||||
|
<ul class="items">
|
||||||
|
<li class="item">
|
||||||
|
<a class="link" href="/">Home</a>
|
||||||
|
</li>
|
||||||
|
<li class="item"><a class="link" href="./about.html">About us</a></li>
|
||||||
|
<li class="item active"><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="container portfolio">
|
||||||
|
<h1 class="portfolio_h1">
|
||||||
|
Lorem Ipsum is simply dummy text of the printing and.
|
||||||
|
</h1>
|
||||||
|
<p class="portfolio_p">
|
||||||
|
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
|
||||||
|
</p>
|
||||||
|
<div class="portfolio_row">
|
||||||
|
<div class="portfolio_item">
|
||||||
|
<div class="portfolio_svg"><svg width="24" height="24" viewBox="0 0 24 24" fill="none"
|
||||||
|
xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd"
|
||||||
|
d="M12 10.8001C12.9548 10.8001 13.8705 10.4208 14.5456 9.74568C15.2207 9.07055 15.6 8.15488 15.6 7.2001C15.6 6.24532 15.2207 5.32964 14.5456 4.65451C13.8705 3.97938 12.9548 3.6001 12 3.6001C11.0452 3.6001 10.1296 3.97938 9.45442 4.65451C8.77929 5.32964 8.40001 6.24532 8.40001 7.2001C8.40001 8.15488 8.77929 9.07055 9.45442 9.74568C10.1296 10.4208 11.0452 10.8001 12 10.8001ZM6.89866 21.6001C5.07686 21.6001 3.54225 20.0687 4.23942 18.3856C4.66156 17.3664 5.2803 16.4404 6.06031 15.6604C6.84032 14.8804 7.76633 14.2616 8.78547 13.8395C9.8046 13.4174 10.8969 13.2001 12 13.2001C13.1031 13.2001 14.1954 13.4174 15.2145 13.8395C16.2337 14.2616 17.1597 14.8804 17.9397 15.6604C18.7197 16.4404 19.3385 17.3664 19.7606 18.3856C20.4578 20.0687 18.9232 21.6001 17.1014 21.6001H6.89866Z"
|
||||||
|
fill="#DC7000" />
|
||||||
|
</svg></div>
|
||||||
|
<p class="portfolio_p">
|
||||||
|
<span class="portfolio_span">90+</span>
|
||||||
|
<span>Clients</span>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="portfolio_item portfolio_item_border">
|
||||||
|
<div class="portfolio_svg"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M19 9C19 8.08075 18.8189 7.1705 18.4672 6.32122C18.1154 5.47194 17.5998 4.70026 16.9497 4.05025C16.2997 3.40024 15.5281 2.88463 14.6788 2.53284C13.8295 2.18106 12.9193 2 12 2C11.0807 2 10.1705 2.18106 9.32122 2.53284C8.47194 2.88463 7.70026 3.40024 7.05025 4.05025C6.40024 4.70026 5.88463 5.47194 5.53284 6.32122C5.18106 7.1705 5 8.08075 5 9C5 10.387 5.41 11.677 6.105 12.765H6.097C8.457 16.46 12 22 12 22L17.903 12.765H17.896C18.6164 11.6414 18.9995 10.3347 19 9ZM12 12C11.2044 12 10.4413 11.6839 9.87868 11.1213C9.31607 10.5587 9 9.79565 9 9C9 8.20435 9.31607 7.44129 9.87868 6.87868C10.4413 6.31607 11.2044 6 12 6C12.7956 6 13.5587 6.31607 14.1213 6.87868C14.6839 7.44129 15 8.20435 15 9C15 9.79565 14.6839 10.5587 14.1213 11.1213C13.5587 11.6839 12.7956 12 12 12Z" fill="#DC7000"/>
|
||||||
|
</svg></div>
|
||||||
|
<p class="portfolio_p">
|
||||||
|
<span class="portfolio_span">30+</span>
|
||||||
|
<span>Countries</span>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="portfolio_item">
|
||||||
|
<div class="portfolio_svg"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M20 3H4C3.46957 3 2.96086 3.21071 2.58579 3.58579C2.21071 3.96086 2 4.46957 2 5V9C2 9.53043 2.21071 10.0391 2.58579 10.4142C2.96086 10.7893 3.46957 11 4 11H20C20.5304 11 21.0391 10.7893 21.4142 10.4142C21.7893 10.0391 22 9.53043 22 9V5C22 4.46957 21.7893 3.96086 21.4142 3.58579C21.0391 3.21071 20.5304 3 20 3ZM15 7C15 7.55228 14.5523 8 14 8C13.4477 8 13 7.55228 13 7C13 6.44772 13.4477 6 14 6C14.5523 6 15 6.44772 15 7ZM19 7C19 7.55228 18.5523 8 18 8C17.4477 8 17 7.55228 17 7C17 6.44772 17.4477 6 18 6C18.5523 6 19 6.44772 19 7ZM20 13H4C3.46957 13 2.96086 13.2107 2.58579 13.5858C2.21071 13.9609 2 14.4696 2 15V19C2 19.5304 2.21071 20.0391 2.58579 20.4142C2.96086 20.7893 3.46957 21 4 21H20C20.5304 21 21.0391 20.7893 21.4142 20.4142C21.7893 20.0391 22 19.5304 22 19V15C22 14.4696 21.7893 13.9609 21.4142 13.5858C21.0391 13.2107 20.5304 13 20 13ZM15 17C15 17.5523 14.5523 18 14 18C13.4477 18 13 17.5523 13 17C13 16.4477 13.4477 16 14 16C14.5523 16 15 16.4477 15 17ZM19 17C19 17.5523 18.5523 18 18 18C17.4477 18 17 17.5523 17 17C17 16.4477 17.4477 16 18 16C18.5523 16 19 16.4477 19 17Z" fill="#DC7000"/>
|
||||||
|
</svg></div>
|
||||||
|
<p class="portfolio_p">
|
||||||
|
<span class="portfolio_span">50+</span>
|
||||||
|
<span>Projects</span>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="portfolio_about">
|
||||||
|
<img class="portfolio_video" src="images/Hero Video.png" alt="hero_video">
|
||||||
|
<div class="portfolio_content">
|
||||||
|
<h2 class="portfolio_h2">Lorem Ipsum is simply dummy text.</h2>
|
||||||
|
<p class="portfolio_p_2">
|
||||||
|
Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy .
|
||||||
|
</p>
|
||||||
|
<ul class="portfolio_ul">
|
||||||
|
<li class="portfolio_li">
|
||||||
|
<img class="porftfolio_vector" src="images/Vector.png" alt="vector">
|
||||||
|
<p class="portfolio_li_p">Lorem Ipsum is simply</p>
|
||||||
|
</li>
|
||||||
|
<li class="portfolio_li">
|
||||||
|
<img class="porftfolio_vector" src="images/Vector.png" alt="vector">
|
||||||
|
<p class="portfolio_li_p">Lorem Ipsum is simply</p>
|
||||||
|
</li>
|
||||||
|
<li class="portfolio_li">
|
||||||
|
<img class="porftfolio_vector" src="images/Vector.png" alt="vector">
|
||||||
|
<p class="portfolio_li_p">Lorem Ipsum is simply</p>
|
||||||
|
</li>
|
||||||
|
<li class="portfolio_li">
|
||||||
|
<img class="porftfolio_vector" src="images/Vector.png" alt="vector">
|
||||||
|
<p class="portfolio_li_p">Lorem Ipsum is simply</p>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="portfolio_readme">
|
||||||
|
<div class="portfolio_readme_content">
|
||||||
|
<h3 class="portfolio_h3">
|
||||||
|
Lorem Ipsum is simply dummy
|
||||||
|
text dummy text
|
||||||
|
</h3>
|
||||||
|
<p class="portfolio_p_row">
|
||||||
|
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, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries,
|
||||||
|
</p>
|
||||||
|
<p class="portfolio_p_row">
|
||||||
|
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
|
||||||
|
</p>
|
||||||
|
<button class="portfolio_btn" type="button">Read more</button>
|
||||||
|
</div>
|
||||||
|
<img class="portfolio_img" src="images/portfolio/1.png" alt="image">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="portfolio_readme portfolio_readme_reverse">
|
||||||
|
<div class="portfolio_readme_content">
|
||||||
|
<h3 class="portfolio_h3">
|
||||||
|
Lorem Ipsum is simply dummy
|
||||||
|
text dummy text
|
||||||
|
</h3>
|
||||||
|
<p class="portfolio_p_row">
|
||||||
|
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, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries,
|
||||||
|
</p>
|
||||||
|
<p class="portfolio_p_row">
|
||||||
|
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
|
||||||
|
</p>
|
||||||
|
<button class="portfolio_btn" type="button">Read more</button>
|
||||||
|
</div>
|
||||||
|
<img class="portfolio_img" src="images/portfolio/2.png" alt="image">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="portfolio_readme">
|
||||||
|
<div class="portfolio_readme_content">
|
||||||
|
<h3 class="portfolio_h3">
|
||||||
|
Lorem Ipsum is simply dummy
|
||||||
|
text dummy text
|
||||||
|
</h3>
|
||||||
|
<p class="portfolio_p_row">
|
||||||
|
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, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries,
|
||||||
|
</p>
|
||||||
|
<p class="portfolio_p_row">
|
||||||
|
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
|
||||||
|
</p>
|
||||||
|
<button class="portfolio_btn" type="button">Read more</button>
|
||||||
|
</div>
|
||||||
|
<img class="portfolio_img" src="images/portfolio/3.png" alt="image">
|
||||||
|
</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>
|
||||||
723
style.css
723
style.css
@@ -6,6 +6,7 @@ body {
|
|||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
color: white;
|
color: white;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
|
background: #000;
|
||||||
}
|
}
|
||||||
|
|
||||||
img {
|
img {
|
||||||
@@ -15,6 +16,7 @@ img {
|
|||||||
.wrapper {
|
.wrapper {
|
||||||
background: linear-gradient(180deg,rgba(0, 0, 0, 1) 0%, rgba(74, 40, 0, 1) 100%);
|
background: linear-gradient(180deg,rgba(0, 0, 0, 1) 0%, rgba(74, 40, 0, 1) 100%);
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
overflow-x: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* --------------------------------HEADER----------------------------- */
|
/* --------------------------------HEADER----------------------------- */
|
||||||
@@ -70,6 +72,13 @@ header nav ul li:not(.active):not(.btn) .link:hover {
|
|||||||
.btn a:hover {
|
.btn a:hover {
|
||||||
background: #a02604;
|
background: #a02604;
|
||||||
}
|
}
|
||||||
|
.burger {
|
||||||
|
display: none;
|
||||||
|
font-size: 30px;
|
||||||
|
border: none;
|
||||||
|
background: none;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
/* --------------------------------HERO----------------------------------- */
|
/* --------------------------------HERO----------------------------------- */
|
||||||
.hero {
|
.hero {
|
||||||
@@ -160,7 +169,6 @@ span img {
|
|||||||
/* ------------------------------------BIF-TEXT----------------------------------------- */
|
/* ------------------------------------BIF-TEXT----------------------------------------- */
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
|
|
||||||
}
|
}
|
||||||
.big-text {
|
.big-text {
|
||||||
padding: 50px 0;
|
padding: 50px 0;
|
||||||
@@ -239,4 +247,715 @@ span img {
|
|||||||
}
|
}
|
||||||
.img_block {
|
.img_block {
|
||||||
margin-top: 15px;
|
margin-top: 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ----------------------------PROJECTS--------------------------------- */
|
||||||
|
|
||||||
|
.container {
|
||||||
|
}
|
||||||
|
.projects {
|
||||||
|
padding: 100px 0;
|
||||||
|
}
|
||||||
|
.projects_h3 {
|
||||||
|
font-size: 30px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.projects_p {
|
||||||
|
text-align: center;
|
||||||
|
margin: 40px 0;
|
||||||
|
}
|
||||||
|
.projects_images {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
margin-bottom: 25px;
|
||||||
|
}
|
||||||
|
.project_img {
|
||||||
|
}
|
||||||
|
.projects .see-all {
|
||||||
|
float: none;
|
||||||
|
width: 100px;
|
||||||
|
text-align: center;
|
||||||
|
margin: 0 auto;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
/* -----------------------------EMAIL--------------------------------------- */
|
||||||
|
|
||||||
|
.container {
|
||||||
|
|
||||||
|
}
|
||||||
|
.email {
|
||||||
|
padding-bottom: 120px;
|
||||||
|
}
|
||||||
|
.email_h3 {
|
||||||
|
font-size: 30px;
|
||||||
|
margin-top: 60px;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
.email_block {
|
||||||
|
background: #1C140F;
|
||||||
|
margin-top: 10px;
|
||||||
|
border-radius: 10px;
|
||||||
|
padding: 40px 3%;
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.email_collumn {
|
||||||
|
}
|
||||||
|
.email_h4 {
|
||||||
|
font-size: 30px;
|
||||||
|
font-weight: 500;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
.email_p {
|
||||||
|
width: 500px;
|
||||||
|
margin-bottom: 50px;
|
||||||
|
}
|
||||||
|
.email_input {
|
||||||
|
background-color: #fff;
|
||||||
|
outline: none;
|
||||||
|
border: 0;
|
||||||
|
border-radius: 5px;
|
||||||
|
width: 380px;
|
||||||
|
font-family: "Poppins", sans-serif;
|
||||||
|
font-weight: 400;
|
||||||
|
padding: 20px 30px;
|
||||||
|
position: relative;
|
||||||
|
right: -120px;
|
||||||
|
z-index: 1;
|
||||||
|
padding-right: 160px;
|
||||||
|
}
|
||||||
|
.email_input::placeholder {
|
||||||
|
color: #898989;
|
||||||
|
}
|
||||||
|
.email_btn {
|
||||||
|
background: #DC7000;
|
||||||
|
border-radius: 8px;
|
||||||
|
transition: none;
|
||||||
|
cursor: pointer;
|
||||||
|
border: 0;
|
||||||
|
padding: 11px 15px;
|
||||||
|
position: relative;
|
||||||
|
z-index: 2;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.email_btn:hover {
|
||||||
|
transform: none;
|
||||||
|
background: #a02604;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --------------------------------------ABOUT-HERO------------------------------------------- */
|
||||||
|
|
||||||
|
.hero_about {
|
||||||
|
display: flex;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.container {
|
||||||
|
}
|
||||||
|
.hero_info {
|
||||||
|
width: 500px;
|
||||||
|
padding: 250px 0;
|
||||||
|
}
|
||||||
|
.hero_h1 {
|
||||||
|
margin-bottom: 15px;
|
||||||
|
font-size: 30px;
|
||||||
|
}
|
||||||
|
.hero_p {
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
.hero_btn {
|
||||||
|
}
|
||||||
|
.button {
|
||||||
|
}
|
||||||
|
.hero_img {
|
||||||
|
position: absolute;
|
||||||
|
right: -150px;
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ----------------------------------------ABOUT-WORK-------------------------------------------- */
|
||||||
|
|
||||||
|
.container {
|
||||||
|
}
|
||||||
|
.work {
|
||||||
|
padding: 80px 0;
|
||||||
|
}
|
||||||
|
.work_h2 {
|
||||||
|
font-size: 25px;
|
||||||
|
font-weight: 700;
|
||||||
|
margin-bottom: 40px;
|
||||||
|
}
|
||||||
|
.work_blocks {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
.work_block {
|
||||||
|
width: 30%;
|
||||||
|
border-radius: 20px;
|
||||||
|
padding: 50px 35px;
|
||||||
|
background-color: #1C140F;
|
||||||
|
}
|
||||||
|
.work_badge {
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 10px 20px;
|
||||||
|
}
|
||||||
|
.purple {
|
||||||
|
background-color: #560F67;
|
||||||
|
}
|
||||||
|
.work_h3 {
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: 700;
|
||||||
|
margin: 30px 0;
|
||||||
|
}
|
||||||
|
.work_p {
|
||||||
|
}
|
||||||
|
.brown {
|
||||||
|
background-color: #31190D;
|
||||||
|
}
|
||||||
|
.green {
|
||||||
|
background-color: #192A1D;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* -------------------------------------CONTACTS------------------------------------------- */
|
||||||
|
|
||||||
|
.container {
|
||||||
|
}
|
||||||
|
.hero-contacts {
|
||||||
|
|
||||||
|
}
|
||||||
|
.contacts_h1 {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 33px;
|
||||||
|
font-weight: 700;
|
||||||
|
margin-top: 70px;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
.contacts_p {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
.contacts_img {
|
||||||
|
width: 70%;
|
||||||
|
margin: 80px 15%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.feedback {
|
||||||
|
padding: 70px 0;
|
||||||
|
background: #1C140F;
|
||||||
|
}
|
||||||
|
.container {
|
||||||
|
}
|
||||||
|
.feedback_h2 {
|
||||||
|
font-size: 30px;
|
||||||
|
font-weight: 400;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.feedback_p {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: 500;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
.feedback_form {
|
||||||
|
margin: 80px auto;
|
||||||
|
width: 600px;
|
||||||
|
}
|
||||||
|
.feedback_inline {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
.feedback_name {
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
.feedback_label {
|
||||||
|
color: #4F4F4F;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
.feedback_input {
|
||||||
|
display: block;
|
||||||
|
background-color: #2C2420;
|
||||||
|
border-radius: 9px;
|
||||||
|
border: 0.6px solid #CECECE;
|
||||||
|
width: 90%;
|
||||||
|
padding: 15px 10px;
|
||||||
|
color: #fff;
|
||||||
|
margin-top: 7px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
.one-line {
|
||||||
|
display: block;
|
||||||
|
background-color: #2C2420;
|
||||||
|
border-radius: 9px;
|
||||||
|
border: 0.6px solid #CECECE;
|
||||||
|
width: 95%;
|
||||||
|
padding: 15px 10px;
|
||||||
|
color: #fff;
|
||||||
|
margin-top: 7px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
.feedback_btn {
|
||||||
|
float: right;
|
||||||
|
margin-right: 30px;
|
||||||
|
background: none;
|
||||||
|
background-color: #DC7000;
|
||||||
|
border-radius: 10px;
|
||||||
|
padding: 15px 30px;
|
||||||
|
transition: all 500ms ease;
|
||||||
|
}
|
||||||
|
.feedback_btn:hover {
|
||||||
|
transform: none;
|
||||||
|
background-color: #b01414;
|
||||||
|
}
|
||||||
|
textarea {
|
||||||
|
resize: none;
|
||||||
|
height: 200px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ------------------------------------PORTFOLIO-ROW--------------------------------------- */
|
||||||
|
|
||||||
|
.container {
|
||||||
|
}
|
||||||
|
.portfolio {
|
||||||
|
padding: 70px 0;
|
||||||
|
}
|
||||||
|
.portfolio_h1 {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 33px;
|
||||||
|
font-weight: 900;
|
||||||
|
}
|
||||||
|
.portfolio_p {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 500;
|
||||||
|
padding: 30px 0;
|
||||||
|
}
|
||||||
|
.portfolio_row {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
background-color: #1C140F;
|
||||||
|
border-radius: 10px;
|
||||||
|
padding: 30px;
|
||||||
|
margin-top: 30px;
|
||||||
|
margin: 0px 80px;
|
||||||
|
}
|
||||||
|
.portfolio_item {
|
||||||
|
padding: 30px 0;
|
||||||
|
width: 30%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.portfolio_item_border {
|
||||||
|
border-right: 1px solid #fff;
|
||||||
|
border-left: 1px solid #fff;
|
||||||
|
width: 35%;
|
||||||
|
}
|
||||||
|
.portfolio_svg {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 50%;
|
||||||
|
padding: 12px;
|
||||||
|
width: 55px;
|
||||||
|
height: 55px;
|
||||||
|
margin-right: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.portfolio_span {
|
||||||
|
display: block;
|
||||||
|
text-align: left;
|
||||||
|
font-size: 25px;
|
||||||
|
font-weight: 700;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
.portfolio_p span {
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.portfolio_about {
|
||||||
|
padding-top: 120px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
.portfolio_video {
|
||||||
|
object-fit: contain;
|
||||||
|
}
|
||||||
|
.portfolio_content {
|
||||||
|
margin-left: 80px;
|
||||||
|
}
|
||||||
|
.portfolio_h2 {
|
||||||
|
font-size: 30px;
|
||||||
|
font-weight: 900;
|
||||||
|
padding-bottom: 20px;
|
||||||
|
line-height: 1.8;
|
||||||
|
}
|
||||||
|
.portfolio_p_2 {
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 500;
|
||||||
|
padding-bottom: 25px;
|
||||||
|
line-height: 1.8;
|
||||||
|
}
|
||||||
|
.portfolio_ul {
|
||||||
|
}
|
||||||
|
.portfolio_li {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 15px;
|
||||||
|
overflow: hidden;
|
||||||
|
padding-bottom: 10px;
|
||||||
|
}
|
||||||
|
.porftfolio_vector {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
height: 24px;
|
||||||
|
width: 24px;
|
||||||
|
}
|
||||||
|
.portfolio_li_p {
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 500;
|
||||||
|
line-height: 1.8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.portfolio_readme {
|
||||||
|
padding-top: 160px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 140px;
|
||||||
|
}
|
||||||
|
.portfolio_readme_reverse {
|
||||||
|
flex-direction: row-reverse;
|
||||||
|
}
|
||||||
|
.portfolio_readme_content {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
.portfolio_h3 {
|
||||||
|
font-size: 30px;
|
||||||
|
font-weight: 500;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
.portfolio_p_row {
|
||||||
|
font-size: 17px;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
.portfolio_btn {
|
||||||
|
width: 40%;
|
||||||
|
border-radius: 0;
|
||||||
|
background: none;
|
||||||
|
background-color: #DC7000;
|
||||||
|
font-size: 16px;
|
||||||
|
transition: all 500ms ease;
|
||||||
|
}
|
||||||
|
.portfolio_btn:hover {
|
||||||
|
transform: none;
|
||||||
|
background-color: #b01414;
|
||||||
|
}
|
||||||
|
.portfolio_img {
|
||||||
|
}
|
||||||
|
|
||||||
|
/* -----------------------------------NEWS-HEADING-------------------------------------- */
|
||||||
|
|
||||||
|
.container {
|
||||||
|
}
|
||||||
|
.news {
|
||||||
|
}
|
||||||
|
.news_heading {
|
||||||
|
text-align: center;
|
||||||
|
padding: 80px 0;
|
||||||
|
}
|
||||||
|
.news_h1 {
|
||||||
|
font-size: 33px;
|
||||||
|
font-weight: 700;
|
||||||
|
padding-bottom: 30px;
|
||||||
|
}
|
||||||
|
.news_p {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 500;
|
||||||
|
padding-bottom: 60px;
|
||||||
|
}
|
||||||
|
.news_search {
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
.news_img_search {
|
||||||
|
position: absolute;
|
||||||
|
left: 15px;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
width: 15px;
|
||||||
|
height: 15px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.news_img_search img {
|
||||||
|
height: 15px;
|
||||||
|
width: 15px;
|
||||||
|
}
|
||||||
|
.input_news {
|
||||||
|
padding: 10px 45px;
|
||||||
|
border-radius: 10px;
|
||||||
|
z-index: 0;
|
||||||
|
background-color: #1C140F;
|
||||||
|
color: #fff;
|
||||||
|
line-height: 1.8;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
.input_news input {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
/* -------------------------------------NEWS-CONTENT------------------------------------- */
|
||||||
|
|
||||||
|
.news {
|
||||||
|
}
|
||||||
|
.container {
|
||||||
|
}
|
||||||
|
.news_separation {
|
||||||
|
display: flex;
|
||||||
|
gap: 80px;
|
||||||
|
}
|
||||||
|
.news_left {
|
||||||
|
flex-basis: 50%;
|
||||||
|
}
|
||||||
|
.news_post {
|
||||||
|
}
|
||||||
|
.news_image {
|
||||||
|
padding-bottom: 25px;
|
||||||
|
}
|
||||||
|
.news_content {
|
||||||
|
}
|
||||||
|
.news_title {
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 1.8;
|
||||||
|
padding: 15px 40px;
|
||||||
|
background-color: #2351F5;
|
||||||
|
display: inline-block;
|
||||||
|
margin-right: 15px;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
.news_time {
|
||||||
|
display: inline;
|
||||||
|
}
|
||||||
|
.news_h1 {
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
.news_p {
|
||||||
|
font-weight: 100;
|
||||||
|
line-height: 1.8;
|
||||||
|
}
|
||||||
|
.news_line {
|
||||||
|
border-top: 0.1px solid rgba(255, 255, 255, 0.7);
|
||||||
|
padding-bottom: 80px;
|
||||||
|
}
|
||||||
|
.news_right {
|
||||||
|
flex-basis: 50%;
|
||||||
|
}
|
||||||
|
.news_items {
|
||||||
|
}
|
||||||
|
.news_item {
|
||||||
|
display: flex;
|
||||||
|
padding-bottom: 80px;
|
||||||
|
}
|
||||||
|
.news_item_img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.news_cont {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 30px 0px 30px 30px;
|
||||||
|
}
|
||||||
|
.news_cont_title {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 20px;
|
||||||
|
}
|
||||||
|
.news_item_h4 {
|
||||||
|
padding: 15px 20px;
|
||||||
|
background-color: #FF8484;
|
||||||
|
}
|
||||||
|
.news_item_time {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
.news_item_h2 {
|
||||||
|
font-size: 23px;
|
||||||
|
font-weight: 500;
|
||||||
|
line-height: 1.8;
|
||||||
|
}
|
||||||
|
.news_item_h4_2 {
|
||||||
|
background-color: #2351F5;
|
||||||
|
}
|
||||||
|
.news_item_h4_3 {
|
||||||
|
background-color: #FF7C32;
|
||||||
|
}
|
||||||
|
.news_item_h4_4 {
|
||||||
|
background-color: #2351F5;
|
||||||
|
}
|
||||||
|
.news_item_h4_5 {
|
||||||
|
background-color: #23A54F;
|
||||||
|
}
|
||||||
|
.news_item_h4_6 {
|
||||||
|
background-color: #2351F5;
|
||||||
|
}
|
||||||
|
.news_item_h4_7 {
|
||||||
|
background-color: #9921C3;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* -----------------------------------FOOTER------------------------------------------ */
|
||||||
|
|
||||||
|
.footer {
|
||||||
|
background-color: #000;
|
||||||
|
}
|
||||||
|
.blocks {
|
||||||
|
padding: 50px 0;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding-bottom: 0;
|
||||||
|
}
|
||||||
|
.container {
|
||||||
|
}
|
||||||
|
.footer_info {
|
||||||
|
}
|
||||||
|
.footer_logo {
|
||||||
|
text-transform: uppercase;
|
||||||
|
font-size: 29px;
|
||||||
|
font-weight: 800;
|
||||||
|
}
|
||||||
|
.footer_p {
|
||||||
|
width: 300px;
|
||||||
|
padding: 15px 0;
|
||||||
|
}
|
||||||
|
.footer_h4 {
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 17px;
|
||||||
|
}
|
||||||
|
.footer_ul {
|
||||||
|
}
|
||||||
|
.footer_li {
|
||||||
|
margin-top: 7px;
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
footer hr {
|
||||||
|
margin: 30px 0;
|
||||||
|
border: 0;
|
||||||
|
height: 0.6px;
|
||||||
|
background: #ccc;
|
||||||
|
}
|
||||||
|
.footer_p_down {
|
||||||
|
text-align: center;
|
||||||
|
padding-bottom: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ----------------------------------ADAPTIVE---------------------------------------- */
|
||||||
|
|
||||||
|
@media (max-width: 1300px) {
|
||||||
|
.container {
|
||||||
|
width: 950px;
|
||||||
|
}
|
||||||
|
.hero_img {
|
||||||
|
top: 40px;
|
||||||
|
}
|
||||||
|
.games {
|
||||||
|
gap: 20px;
|
||||||
|
}
|
||||||
|
.hero_img {
|
||||||
|
width: 720px;
|
||||||
|
height: 720px;
|
||||||
|
}
|
||||||
|
.project_img {
|
||||||
|
max-width: 30%;
|
||||||
|
max-height: 30%;
|
||||||
|
}
|
||||||
|
.email_input {
|
||||||
|
right: 50px;
|
||||||
|
}
|
||||||
|
.email_h4,
|
||||||
|
.email_p {
|
||||||
|
width: 70%;
|
||||||
|
}
|
||||||
|
.email_btn {
|
||||||
|
right: -195px;
|
||||||
|
top: -53.5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
.container {
|
||||||
|
width: 800px;
|
||||||
|
}
|
||||||
|
.hero {
|
||||||
|
padding-top: 50px;
|
||||||
|
padding-bottom: 100px;
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
.hero_info {
|
||||||
|
width: 100%;
|
||||||
|
padding: 0px 0px 550px 0px;
|
||||||
|
}
|
||||||
|
.hero_img {
|
||||||
|
width: 600px;
|
||||||
|
height: 600px;
|
||||||
|
top: 220px;
|
||||||
|
left: 27%;
|
||||||
|
}
|
||||||
|
.projects_images {
|
||||||
|
flex-wrap: wrap;
|
||||||
|
margin-bottom: 50px;
|
||||||
|
}
|
||||||
|
.email_btn {
|
||||||
|
right: -200px;
|
||||||
|
top: -53.5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 900px) {
|
||||||
|
.container {
|
||||||
|
width: 700px;
|
||||||
|
}
|
||||||
|
.email_block {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.email_input {
|
||||||
|
right: -5px;
|
||||||
|
width: 600px;
|
||||||
|
}
|
||||||
|
.email_btn {
|
||||||
|
right: -470px;
|
||||||
|
top: -53.5px;
|
||||||
|
}
|
||||||
|
.items {
|
||||||
|
display: none;
|
||||||
|
flex-direction: column;
|
||||||
|
position: absolute;
|
||||||
|
top: 70px;
|
||||||
|
right: 20px;
|
||||||
|
background: white;
|
||||||
|
padding: 20px;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.burger {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
.nav {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row-reverse;
|
||||||
|
width: 100%;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.link {
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user