Alena/Figma_itproger
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: Alena:e6ac69069235e282b10ca60b610c1265028fe3eb
Branches Tags
Alena:main
..
compare: Alena:192c30f8c11b222a91f48718194631ea95ac6d2d
Branches Tags
Alena:main

3 Commits
e6ac690692 ... 192c30f8c1

Author SHA1 Message Date
alena
192c30f8c1 section_contacts 2026-02-24 22:45:23 +03:00
alena
d6def23321 about 2026-02-24 13:33:32 +03:00
alena
dff5547d78 our recent projects 2026-02-17 22:42:37 +03:00
13 changed files with 599 additions and 5 deletions
Expand all files Collapse all files

118
about.html Normal file
View 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</a></li>
<li class="item"><a class="link" href="#">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
View 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</a></li>
<li class="item"><a class="link" href="#">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/Map.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 112 KiB

BIN
images/Projects/1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 156 KiB

BIN
images/Projects/2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 119 KiB

BIN
images/Projects/3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 142 KiB

BIN
images/Projects/4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 51 KiB

BIN
images/Projects/5.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 203 KiB

BIN
images/Projects/6.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 141 KiB

BIN
images/about_photo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 MiB

88
index.html
View File

@@ -16,12 +16,12 @@
<nav class="nav">
<ul class="items">
<li class="item active">
<a class="link" href="#">Home</a>
<a class="link" href="/">Home</a>
</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="#">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>
</nav>
</header>
@@ -122,6 +122,88 @@
</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>

6
main.js
View File

@@ -0,0 +1,6 @@
function checkEmail() {
let email = document.querySelector('#emailField').value;
if (!email.includes('@')) alert('Нет символа @');
else if(!email.includes('.')) alert('Нет символа .');
else alert('Все отлично!')
};

272
style.css
View File

@@ -6,6 +6,7 @@ body {
font-weight: 400;
color: white;
font-size: 16px;
background: #000;
}
img {
@@ -15,6 +16,7 @@ img {
.wrapper {
background: linear-gradient(180deg,rgba(0, 0, 0, 1) 0%, rgba(74, 40, 0, 1) 100%);
width: 100%;
overflow-x: hidden;
}
/* --------------------------------HEADER----------------------------- */
@@ -160,7 +162,6 @@ span img {
/* ------------------------------------BIF-TEXT----------------------------------------- */
.container {
}
.big-text {
padding: 50px 0;
@@ -240,3 +241,272 @@ span img {
.img_block {
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;
padding: 20px 0;
}
.feedback_form {
}
.feedback_inline {
}
.feedback_name {
}
.feedback_label {
}
.feedback_input {
}
.one-line {
}
.feedback_btn {
}
/* -----------------------------------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;
}