06

oxica · Sep 1, 2024 · 54d71f2 · 54d71f2
1 parent 147610e
commit 54d71f2
Show file tree

Hide file tree

Showing 2 changed files with 115 additions and 10 deletions.
diff --git a/index.html b/index.html
@@ -89,23 +89,23 @@ <h3 class="workeduc-pretitle">
                     </h3>
 
                     <div class="workeduc-content">
-                        <span class="year"><i class='bx bx-calendar'></i>2021 – I’m currently continuing my education</span>
+                        <span class="year"><i class='bx bx-calendar'></i>2021 – 2022</span>
                         <h3>IT School GoIT</h3>
-                        <p>Full Stack Developer</p>
+                        <p>Front-end Developer</p>
 
                     </div>
 
                     <div class="workeduc-content">
                         <span class="year"><i class='bx bx-calendar'></i>2021 - 2024</span>
-                        <h3 class="workeduc-pretitle">Udemy</h3>
+                        <h3>Udemy</h3>
                         <a href="https://github.com/oxica/cv/tree/main/certificates"></a>
 
-                        <h4>Creating HTML5 games with JavaScript and Canvas</h4>
-                        <p>Credential ID UC-c10b155b-92cb-47cf-815a-be2a60d45c86</p>
-                        <h4>50 Projects In 50 Days - HTML, CSS & JavaScript</h4>
-                        <p>Credential ID UC-866846b1-6c69-4e28-b791-df41e7ee9255</p>
-                        <!-- <h4>[2022] Programowanie w JavaScript od Zera do Mastera</h4>
-                        <p>Credential ID UC-417a1a7b-f3d2-41d1-b3bf-e30082eac83f</p> -->
+                        <h4 class="workeduc-courses">Creating HTML5 games with JavaScript and Canvas</h4>
+                        <a class="workeduc-text" href="https://github.com/oxica/cv/tree/main/certificates">Credential ID UC-c10b155b-92cb-47cf-815a-be2a60d45c86</a>
+                        <h4 class="workeduc-courses">50 Projects In 50 Days - HTML, CSS & JavaScript</h4>
+                        <a class="workeduc-text" href="https://github.com/oxica/cv/tree/main/certificates">Credential ID UC-866846b1-6c69-4e28-b791-df41e7ee9255</a>
+                        <h4 class="workeduc-courses">[2022] Programowanie w JavaScript od Zera do Mastera</h4>
+                        <a class="workeduc-text" href="https://github.com/oxica/cv/tree/main/certificates">Credential ID UC-417a1a7b-f3d2-41d1-b3bf-e30082eac83f</a>
                     </div>
                 </div>
 
@@ -116,6 +116,46 @@ <h4>50 Projects In 50 Days - HTML, CSS & JavaScript</h4>
                 </span>
             </div>
         </div>
+
+            <div class="book-page page-right" id="turn-2">
+                <div class="page-front">
+                    <h1 class="title">My services</h1>
+                    <div class="services-box">
+                        <div class="services-content">
+                            <!-- <i class='bx bx-code-alt'></i> -->
+                            <h3>Filmoteka</h3>
+                            <h5>JavaScript, Parcel, HTML5, CSS, SASS, GitHub</h5>
+                            <p class="services-text">On the team project, I performed the tasks of a team lead. My main responsibilities included developing the basic structure of the project.</p>
+                            <a href="https://github.com/oxica/project-filmoteka" class="btn">Read more</a>
+                        </div>
+                        <div class="services-content">
+                            <!-- <i class='bx bx-code-alt'></i> -->
+                            <h3>Ice-Cream</h3>
+                            <h5>HTML5, CSS, SASS, JavaScript, Parcel, GitHub</h5>
+                            <p class="services-text">A team-project related to the creation of a landing page for the practice of learned technologies in teamwork. On the project, I performed the tasks of a team lead. </p>
+                            <a href="https://github.com/oxica/special-team" class="btn">Read more</a>
+                        </div>
+                        <div class="services-content">
+                            <!-- <i class='bx bx-code-alt'></i> -->
+                            <h3>Web Studio</h3>
+                            <h5>HTML5, CSS, SASS, GitHub</h5>
+                            <p class="services-text">A responsive web-page layout, which applies all best practices taken from BEM methodology.</p>
+                            <a href="https://github.com/oxica/-goit-markup-hw-08" class="btn">Read more</a>
+                        </div>
+                    </div>
+                  <span class="number-page">3</span>
+
+                <span class="nextprev-btn" data-page="turn-1">
+                    <i class='bx bx-chevron-right'></i>
+                </span>
+                </div>
+
+
+                <div class="page-back">
+                    <h1 class="title">My skills</h1>
+                </div>
+            </div>
+
     </div>
 </div>
 

diff --git a/style.css b/style.css
@@ -21,7 +21,7 @@
     --cover-color: linear-gradient(45deg, #2fe690df, #1759b0);
     --pages-color: linear-gradient(90deg, #fff, #ddd);
     --border: .125rem solid #0074f0;
-    --box-shadow: 0 0 .6rem rgba(0, 0, 0, .2);
+    --box-shadow: 0 0 1rem rgba(0, 0, 0, .2);
 }
 
 body{
@@ -269,3 +269,68 @@ color: var(--white-color);
 .nextprev-btn.back{
     left: 1.5rem;
 }
+
+.workeduc-box>h3{
+    color: var(--main-color);
+}
+
+.workeduc-courses{
+    font-size: .9rem;
+}
+
+.workeduc-text{
+    font-size: .8rem;
+    margin-bottom: .6rem;
+    color: var(--main-color);
+}
+
+.services-box{
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1.5rem;
+}
+
+.services-box .services-content{
+
+    flex: 1 1 10rem;
+    border: var(--border);
+    padding: .8rem .5rem 1.1rem;
+    border-radius: .5rem;
+     text-align: center;
+     transition: .3s ease;
+}
+
+.services-box .services-content:hover{
+    box-shadow: var(--box-shadow);
+    background: #a9eaff;
+}
+
+.services-text{
+    font-size: .8rem;
+}
+
+/* .services-content i{
+    font-size: 1.5rem;
+    color: var(--main-color);
+} */
+
+.services-content h3{
+    font-size: 1.1rem;
+     margin-bottom: .6rem;
+}
+
+.services-content h5{
+    margin-bottom: 0.6rem;
+}
+
+.services-content p{
+   margin-bottom: .6rem;
+}
+
+.services-content .btn{
+
+
+
+width: 8rem;
+height: 2.5rem;
+}