diff --git a/index.html b/index.html
new file mode 100644
index 0000000..166d7af
--- /dev/null
+++ b/index.html
@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="container">
+        <article class="left_side">
+            <div class="photo">
+                <a href="https://github.com/Daria70890"> <img
+                        src="https://sun9-23.userapi.com/impf/c626125/v626125810/1b3d6/Kn3yCsZGrZw.jpg?size=612x612&quality=96&sign=61f44fa8c3c3b0e112cbeda4ce1ec906&type=album"
+                        alt="Соколова Дарья Фото" width="245" height="245"></a>
+            </div>
+            <h2 class="contacts animation"> Contacts</h2>
+            <address>
+                <ul class="contacts-list">
+                    <li>Phone:<a href="tel:+79163071982">+79163071982</a></li>
+                    <li>E-mail:<a href="mailto:sqz008@mail.ru">sqz008@mail.ru</a></li>
+                    <li>Social network:
+                        <ul>
+                            <li class="vk"><a href="http://www.instagram.com/daria70890">insta @Daria79890</a></li>
+                            <li class="vk"><a href="http://www.vk.com/sqz008" style="color: #62686e;">vk sqz008</a></li>
+                        </ul>
+                    </li>
+                </ul>
+            </address>
+        </article>
+
+        <main class="right_side">
+            <section class="rigrt-side_text">
+                <h1 class="animation">Sokolova Daria</h1>
+                <h2> About me</h2>
+                <p>Hardworking, loyal, energetic, teamwork, working for results.</p>
+                <p>In the work I adhere to the rule, which means hurry up slowly:</p>
+                <blockquote>"Festina lente".</blockquote>
+
+                <h2>Tech skills</h2>
+                <nav>
+                    <ul>
+                        <li>html</li>
+                        <li>css</li>
+                    </ul>
+                </nav>
+                <h2>Education</h2>
+                <nav>
+                    <ul class="education">
+                        <li>Moscow State Building University, Economics bachelor, 2015</li>
+                        <li><span>Udemy:</span>
+                            <ul>
+                                <li>"web-developer 2021" - Ivan Petrichenko;</li>
+                                <li>"The basics of web development. HTML and CSS" -
+                                    YouRa Allakhverdov.</li>
+                            </ul>
+                        </li>
+                    </ul>
+                </nav>
+                <h2>English level</h2>
+                <ul>
+                    <li>Pre-intermediate</li>
+                </ul>
+            </section>
+
+        </main>
+    </div>
+    
+    <footer class="footer">
+      <h5 class="footer_text">2021 год</h5>
+      <div class="go"><a href="https://rs.school/js/"><img src="https://rs.school/images/rs_school_js.svg" alt="logo"
+                    width="100"></a></div>
+
+    </footer>
+
+</body>
+
+</html>
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..b43dfa0
--- /dev/null
+++ b/style.css
@@ -0,0 +1,110 @@
+body {
+  background-image: url(https://wallpaper-house.com/data/out/9/wallpaper2you_322331.jpg);
+  background-color: #f5f7fa;
+  padding: 40px;
+  font-family: "Montserrat", sans-serif;
+}
+.container {
+  display: flex;
+  max-width: 1000px;
+  margin-left: auto;
+  margin-right: auto;
+  background-color: rgb(189, 191, 196);
+}
+
+.left-side {
+  max-width: 300px;
+  color: #fff;
+}
+
+.photo {
+  border: 1px solid #8c9099;
+  border-radius: 50%;
+  overflow: hidden;
+  text-align: center;
+}
+.footer {
+  width: 1000px;
+  background-color: gray;
+  text-align: center;
+  margin: auto;
+  margin-top: 0;
+}
+
+.footer_text {
+  width: auto;
+  text-align: center;
+  margin-top: 0px;
+  padding-top: 20px;
+}
+.contacts {
+  width: 250px;
+  text-align: center;
+}
+
+.contacts-list {
+  text-align: left;
+}
+
+@keyframes color-change {
+  0% {
+    color: #696969;
+  }
+
+  50% {
+    color: #d3d3d3;
+  }
+
+  100% {
+    color: #ada2a2;
+  }
+}
+.animation {
+  font-size: 32px;
+  text-align: center;
+  animation: color-change 3s infinite;
+}
+
+h2,
+nav,
+p,
+blockquote,
+ul {
+  text-align: center;
+}
+
+h2 {
+  color: rgb(58, 59, 59);
+}
+
+a:link {
+  color: #53606d;
+  font-size: smaller;
+}
+
+main {
+  max-width: 700px;
+  padding-right: 200px;
+  padding-top: 68px;
+  padding-bottom: 68px;
+  text-align: center;
+  background-color: rgb(218, 216, 211);
+}
+
+.vk {
+  text-align: left;
+  color: #53606d;
+}
+
+.rigrt-side_text {
+  width: 600px;
+  margin: auto;
+}
+.education {
+  line-height: 24px;
+}
+
+span {
+  font-weight: bold;
+  font-size: medium;
+}
