Added hobbies block and styles

maksym-vovk · Jun 6, 2022 · 6c28f78 · 6c28f78
1 parent 55ce555
commit 6c28f78
Show file tree

Hide file tree

Showing 2 changed files with 76 additions and 0 deletions.
diff --git 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
@@ -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;