From 6c28f785aba8de41c3c4707c2dc2227927bffd63 Mon Sep 17 00:00:00 2001
From: maksym-vovk <mvx.vovk@gmail.com>
Date: Mon, 6 Jun 2022 13:47:03 +0300
Subject: [PATCH] Added hobbies block and styles

---
 index.html | 30 ++++++++++++++++++++++++++++++
 styles.css | 46 ++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 76 insertions(+)

diff --git a/index.html b/index.html
index 8e89744..f773c2b 100644
--- a/index.html
+++ b/index.html
@@ -116,6 +116,36 @@ <h3 class="skills__header">Skills</h3>
         </div>
       </div>
     </div>
+    <div class="container">
+      <div class="resume__block">
+        <div class="hobbies">
+          <h3 class="hobbies__header">Hobbies</h3>
+          <ul class="hobbies-list">
+            <li class="hobbies-list__item">
+              <h4 class="hobbies-list__title">High intensive training</h4>
+              <img src="assets/hobbies-hiit.jpg" alt="hiit" class="hobbies-list__img">
+              <p class="hobbies-list__desc">
+                I have HIIT five days a week. A good opportunity to lose a few pounds and keep your body in good shape.
+              </p>
+            </li>
+            <li class="hobbies-list__item">
+              <h4 class="hobbies-list__title">Gaming</h4>
+              <img src="assets/hobbies-gaming.jpg" alt="games" class="hobbies-list__img">
+              <p class="hobbies-list__desc">
+                Games are my favorite activity when I want to de-stress after a hard day.
+              </p>
+            </li>
+            <li class="hobbies-list__item">
+              <h4 class="hobbies-list__title">Administration</h4>
+              <img src="assets/hobbies-admin.jpg" alt="facebook" class="hobbies-list__img">
+              <p class="hobbies-list__desc">
+                I am an Xbox Community Administrator in Ukraine. This is a good opportunity to provide people with a comfortable environment for communication on topics of interest to them.
+              </p>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
     <div class="container">
       <div class="resume__block">
         <div class="main-info fh">
diff --git a/styles.css b/styles.css
index 55bc45f..2bccc5c 100644
--- a/styles.css
+++ b/styles.css
@@ -241,6 +241,52 @@ body {
     left: -50%;
 }
 
+.hobbies__header {
+    text-align: center;
+    margin-bottom: 15px;
+}
+
+.hobbies-list {
+    display: flex;
+    justify-content: center;
+    list-style: none;
+}
+
+.hobbies-list__item {
+    border: 2px solid var(--text-decoration-color);
+    box-shadow: 0 0 7px #f5f5f5;
+    border-radius: 10px;
+    padding: 20px;
+    cursor: pointer;
+    transition: all .3s ease-in-out;
+}
+
+.hobbies-list__item:hover {
+    transform: scale(1.05);
+}
+
+.hobbies-list__item:not(:last-child) {
+    margin-right: 15px;
+}
+
+.hobbies-list__title {
+    text-align: center;
+    color: var(--primary-text-color);
+    margin-bottom: 10px;
+}
+
+.hobbies-list__img {
+    display: block;
+    border-radius: 10px;
+    max-width: 100%;
+    margin-bottom: 10px;
+}
+
+.hobbies-list__desc {
+    text-align: center;
+    color: var(--primary-text-color);
+}
+
 .experiences {
     flex: 1 1 60%;
     margin-right: 50px;