diff --git a/about.html b/about.html
new file mode 100644
index 0000000..f0c5645
--- /dev/null
+++ b/about.html
@@ -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</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> 
\ No newline at end of file
diff --git a/images/about_photo.png b/images/about_photo.png
new file mode 100644
index 0000000..a2668f2
Binary files /dev/null and b/images/about_photo.png differ
diff --git a/index.html b/index.html
index 527d45b..debf5b0 100644
--- a/index.html
+++ b/index.html
@@ -16,9 +16,9 @@
             <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>
@@ -142,8 +142,68 @@
             </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>
\ No newline at end of file
+</html>                                                                                 
\ No newline at end of file
diff --git a/main.js b/main.js
index e69de29..a7ed766 100644
--- a/main.js
+++ b/main.js
@@ -0,0 +1,6 @@
+function checkEmail() {
+    let email = document.querySelector('#emailField').value;
+    if (!email.includes('@')) alert('Нет символа @');
+    else if(!email.includes('.')) alert('Нет символа .');
+    else alert('Все отлично!')
+};
\ No newline at end of file
diff --git a/style.css b/style.css
index faa3c37..d1a0fa1 100644
--- a/style.css
+++ b/style.css
@@ -15,6 +15,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----------------------------- */
@@ -268,4 +269,187 @@ span img {
     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;
+}
+
+/* -----------------------------------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;
 }
\ No newline at end of file
