diff --git a/index.html b/index.html
index a006bb9..a524c69 100644
--- a/index.html
+++ b/index.html
@@ -4,20 +4,21 @@
         <title>MyCard</title>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<link rel="stylesheet" type="text/css" href="styles/style.css">
     </head>
     <body>
-        <div>
-            <div>
-                <div></div>
-                <p>Alexander Kiselyov</p>
-                <p>Student</p>
-                <button>Download CV</button>
-                <p>@2021 All rights reserved.</p>
-            </div>
-            <div>
-                <h1>Alexander Kiselyov</h1>
-                <h3>Student</h3>
-            </div>
-        </div>  
+        <div class="card__wrapper">
+            <img class="card__user-logo" src="https://cs11.pikabu.ru/post_img/2020/08/18/4/1597725632113587334.jpg" alt="Лого пользователя"/>
+            <div class="card__user-name">Alexander Kiselyov</div>
+            <div class="card__user-position">Student</div>
+            <img class="card__social-link card__social-link__vk" src="https://astro-centre.ru/wp-content/uploads/2021/01/photo.png" alt="Лого ВКонтакте"/>
+            <img class="card__social-link card__social-link__ok" src="https://pbs.twimg.com/media/DVRsBHFWsAAaxss.jpg" alt="Лого Одноклассники"/>
+            <img class="card__social-link card__social-link__git" src="https://s3.amazonaws.com/media-p.slid.es/uploads/1047281/images/6568412/github-1.svg" alt="Лого Гитхаб"/>
+            <button class="card__download-cv-button">Download CV</button>
+            <div class="card__footer">@2021 All rights reserved.</div>
+            <div class="card__wrapper-main"></div>
+            <h1 class="card__user-name card__bold-name">Alexander Kiselyov</h1>
+            <h3 class="card__user-position card__bold-position">Student</h3>
+        </div>
     </body>
 </html>
diff --git a/styles/style.css b/styles/style.css
new file mode 100644
index 0000000..b9727a7
--- /dev/null
+++ b/styles/style.css
@@ -0,0 +1,135 @@
+body {
+    margin: 0;
+    padding: 0;
+    overflow-x: hidden;
+    overflow-y: auto;
+    position: relative;
+    width: 1127px;
+    height: 595px;
+    top: 100px;
+    left: 200px;
+    color: #FFFFFF;
+}
+
+.card__wrapper {
+    position: absolute;
+    width: 1127px;
+    height: 595px;
+    left: 0px;
+    top: 0px;
+    background: #444444;
+    border-radius: 30px;
+}
+
+.card__user-logo {
+    position: absolute;
+    width: 180px;
+    height: 180px;
+    left: 100px;
+    top: 30px;
+    border-radius: 50%;
+}
+
+.card__user-name {
+    position: absolute;
+    width: 197px;
+    height: 44px;
+    left: 91px;
+    top: 230px;
+    font-family: Helvetica;
+    font-style: normal;
+    font-weight: bold;
+    font-size: 38px;
+    line-height: 44px;
+    text-align: center;
+}
+
+.card__bold-name {
+    width: 400px;
+    height: 44px;
+    left: 550px;
+    top: 200px;
+    font-size: 38px;
+    line-height: 44px;
+}
+
+.card__user-position {
+    position: absolute;
+    width: 127px;
+    height: 23px;
+    left: 126px;
+    top: 331px;
+    font-family: Helvetica;
+    font-style: normal;
+    font-weight: normal;
+    font-size: 20px;
+    line-height: 23px;
+    text-align: center;
+}
+
+.card__bold-position {
+    width: 140px;
+    height: 25px;
+    left: 683px;
+    top: 270px;
+    font-size: 22px;
+    line-height: 25px;
+}
+
+.card__social-link {
+    position: absolute;
+    width: 24px;
+    height: 24px;
+    top: 370px;
+    background: #C4C4C4;
+    border-radius: 50%;
+}
+
+.card__social-link__vk {
+    left: 144px;
+}
+
+.card__social-link__ok {
+    left: 178px;
+}
+
+.card__social-link__git {
+    left: 212px;
+}
+
+.card__download-cv-button {
+    position: absolute;
+    width: 168px;
+    height: 46px;
+    left: 106px;
+    top: 451px;
+    background: #444444;
+    border: 3px solid #FFFFFF;
+    box-sizing: border-box;
+    border-radius: 40px;
+    color: #FFFFFF;
+}
+
+.card__footer {
+    position: absolute;
+    width: 170px;
+    height: 16px;
+    left: 105px;
+    top: 563px;
+    font-family: Helvetica;
+    font-style: normal;
+    font-weight: normal;
+    font-size: 14px;
+    line-height: 16px;
+    text-align: center;
+}
+
+.card__wrapper-main {
+    position: absolute;
+    width: 747px;
+    height: 595px;
+    left: 380px;
+    top: 0px;
+    background: #222222;
+    border-radius: 30px;
+}
