ok-technopolis-2021 · coradead · Oct 5, 2021 · Oct 12, 2021 · Oct 13, 2021 · aqus
diff --git a/.idea/.gitignore b/.idea/.gitignore
diff --git a/.idea/misc.xml b/.idea/misc.xml
diff --git a/.idea/modules.xml b/.idea/modules.xml
diff --git a/.idea/runConfigurations.xml b/.idea/runConfigurations.xml
diff --git a/.idea/vcs.xml b/.idea/vcs.xml
diff --git a/frontEnd.iml b/frontEnd.iml
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager" inherit-compiler-output="true">
+    <exclude-output />
+    <content url="file://$MODULE_DIR$" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>
diff --git a/images/face.jpg b/images/face.jpg
diff --git a/images/git-logo.png b/images/git-logo.png
diff --git a/images/tg-logo.png b/images/tg-logo.png
diff --git a/images/vk-logo.png b/images/vk-logo.png
diff --git a/index.html b/index.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Curriculum vitae</title>
+    <link rel="stylesheet" href="style.css"/>
+</head>
+<body>
+<div class="main-card">
+    <div class="left-part">
+        <img class="photo" src="images/face.jpg" alt="photo"/>
+        <div class="employee_FIO">
+            Alex Smith
+        </div>
+        <div class="employee_speciality">
+            Web Designer
+        </div>
+        <div class="social-networks">
+            <a href="https://www.vk.com/coradead">
+                <img src="images/vk-logo.png" height="24" alt="vk-logo">
+            </a>
+            <a href="https://www.telegram.me/coradead">
+                <img src="images/tg-logo.png" height="24" alt="telegram-logo">
+            </a>
+            <a href="https://www.github.com/coradead">
+                <img src="images/git-logo.png" height="24" alt="github-logo">
+            </a>
+        </div>
+        <button class="button">
+            Download CV
+        </button>
+        <footer class="copyright">
+            &#169 2021 All rights reserved.
+        </footer>
+    </div>
+    <div class="right-part">
+        <b class="employee_name">Alex Smith</b>
+        <section class="employee_position">Web Designer</section>
+    </div>
+</div>
+</body>
+</html>
diff --git a/style.css b/style.css
@@ -0,0 +1,117 @@
+body {
+    background-color: #000000;
+}
+.main-card {
+    position: absolute;
+    width: 1127px;
+    height: 595px;
+    top: 50%;
+    left: 50%;
+    margin-right: -50%;
+    transform: translate(-50%, -50%);
+
+    display: flex;
+    align-items: stretch;
+
+    background: #444444;
+    border-radius: 30px;
+
+    font-family: Helvetica, sans-serif;
+    font-style: normal;
+    font-weight: normal;
+
+}
+
+.left-part {
+    display: flex;
+    height: 595px;
+    width: 380px;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+}
+
+.photo{
+    display: flex;
+    width: 180px;
+    height: 180px;
+    margin-top: 70px;
+    border-radius: 50%;
+    box-shadow: 12px 12px 0 0 rgb(196 196 196);
+}
+
+.employee_FIO {
+    display: flex;
+    margin-top: 29px;
+
+    font-weight: bold;
+    font-size: 38px;
+
+    color: #FFFFFF;
+}
+
+.employee_speciality {
+    display: flex;
+    margin-top: 8px;
+    font-size: 20px;
+
+    color: #FFFFFF;
+}
+.social-networks {
+    width: 110px;
+    display: flex;
+    align-self: center;
+    flex-direction: row;
+    justify-content: space-around;
+    margin-top: 16px;
+    height: 24px;
+}
+
+.social-networks img {
+    border-radius: 50%;
+}
+.button {
+    margin-top: 57px;
+    width: 168px;
+    height: 46px;
+
+    background: transparent;
+    border: 3px solid #FFFFFF;
+    box-sizing: border-box;
+    border-radius: 40px;
+
+    font-size: 17px;
+    line-height: 20px;
+    color: #FFFFFF;
+}
+
+.copyright {
+    margin-bottom: 16px;
+    display: flex;
+    flex-grow: 1;
+    flex-direction: row;
+    align-items: flex-end;
+    height: 16px;
+    font-size: 14px;
+    color: #FFFFFF;
+}
+
+.right-part {
+    color: #FFFFFF;
+    background-color: #222222;
+    width: 747px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    border-radius: 30px;
+}
+
+.right-part .employee_name {
+    font-size: 62px;
+}
+
+.right-part .employee_position {
+    margin-top: 8px;
+    font-size: 22px;
+}