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

section_contacts

Browse Source
This commit is contained in:
Alena Trushcheva
2026-02-24 22:45:23 +03:00
parent d6def23321
commit 192c30f8c1
5 changed files with 177 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
about.html
View File

@@ -21,7 +21,7 @@
<li class="item active"><a class="link" href="/about.html">About us</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="#">Portfolio</a></li>
<li class="item"><a class="link" href="#">News</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> </ul>
</nav> </nav>
</header> </header>

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

2
index.html
View File

@@ -21,7 +21,7 @@
<li class="item"><a class="link" href="/about.html">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</a></li>
<li class="item"><a class="link" href="#">News</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> </ul>
</nav> </nav>
</header> </header>

57
style.css
View File

@@ -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 {
@@ -409,6 +410,62 @@ span img {
background-color: #192A1D; 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------------------------------------------ */
.footer { .footer {