11

oxica · Sep 4, 2024 · a93a76f · a93a76f
1 parent d290f68
commit a93a76f
Show file tree

Hide file tree

Showing 3 changed files with 89 additions and 5 deletions.
diff --git a/images/code.jpg b/images/code.jpg
diff --git a/index.html b/index.html
@@ -226,13 +226,33 @@ <h3>Lenguages</h3>
                     <h1 class="title">Latest project</h1>
                     <div class="portfolio-box">
 
+                        <div class="img-box">
+                            <img src="./images/code.jpg" alt="code">
+                        </div>
+
+                        <div class="info-box">
+                            <div class="info-title">
+                                <h3>Project</h3>
+                                <a href="https://oxica.github.io/dragon/">Live preview <i class='bx bx-link-external'></i></a>
+                            </div>
+                            <p>Tech used:</p>
+                            <p>HTML, CSS, JavaScript</p>
+                        </div>
+                        <div class="btn-box">
+                            <a href="https://github.com/oxica/dragon" class="btn">Source code</a>
+                            <a href="https://github.com/oxica?tab=repositories" class="btn">More Projects</a>
+                        </div>
                     </div>
-                </div>
+                    <span class="number-page">5</span>
 
-                <div class="page-back">
-                    <h1 class="title">Contact me</h1>
+                <span class="nextprev-btn" data-page="turn-3">
+                    <i class='bx bx-chevron-right'></i>
+                </span>
                 </div>
-            </div>
+
+    <div class="page-back">
+        <h1 class="title">Contact me</h1>
+    </div>
 </div>
 
     <script src="./index.js"></script>

diff --git a/style.css b/style.css
@@ -363,11 +363,75 @@ color: var(--white-color);
     margin-right: 1rem;
 }
 
-.softskills-content .content{
+.softskills-content .content:nth-of-type(1){
     margin-bottom: 2rem;
 }
 
+/* .softskills-content .content{
+    margin-bottom: 2rem;
+} */
+
 .skills-content .content span i{
     margin-right: 1rem;
     color: var(--main-color);
 }
+
+.portfolio-box .img-box{
+    display: flex;
+    width: 100%;
+    height: 15rem;
+    border: var(--border);
+    border-radius: .5rem;
+    overflow: hidden;
+}
+
+.portfolio-box .img-box img{
+    width: 100%;
+    object-fit: cover;
+    transition: .5s ease;
+}
+
+.portfolio-box .img-box img:hover{
+    transform: scale(1.1);
+}
+
+.portfolio-box .info-box{
+    margin: 1rem 0 1.5rem;
+}
+
+.portfolio-box .info-box .info-title{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 1rem;
+}
+
+.portfolio-box .info-box .info-title h3{
+    font-size: 1.3rem;
+}
+
+.portfolio-box .info-box .info-title a{
+    display: flex;
+    align-items: center;
+    color: var(--main-color);
+}
+
+.portfolio-box .info-box .info-title a i{
+    margin-left: .3rem;
+}
+
+.portfolio-box .info-box p:nth-of-type(1){
+    font-weight: 600;
+}
+
+.portfolio-box .btn-box{
+    display: flex;
+    justify-content: center;
+}
+
+.portfolio-box .btn-box .btn{
+    margin: 0 1.15rem;
+}
+
+
+