add contact download button and show the social links on mobile scree…

…n and download the .vcf file
jehanzeb007 · Feb 7, 2025 · 7ec37c1 · 7ec37c1
1 parent 181e123
commit 7ec37c1
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 8 deletions.
diff --git a/css/responsive.css b/css/responsive.css
@@ -135,4 +135,21 @@
     #typed{
         font-size: 10px !important;
     }
+}
+
+@media (max-width: 515px){
+    .about-btns{
+       display: block;
+    }
+    .contact-btn{
+        width: 236px;
+    }
+}
+
+@media (max-width: 685px){
+    .home-social{
+      right: 10px !important;
+      bottom: 0% !important;
+    }
+
 }
diff --git a/css/style.css b/css/style.css
@@ -306,7 +306,7 @@ a:hover,
 }
 a,
 button {
-	color: ;
+
 	outline: medium none;
 }
 button{cursor: pointer;}
@@ -677,9 +677,6 @@ body {
 .section-wrapper {
     padding-left: 235px;
     position: relative;
-}
-.banner-area {
-
 }
 .section-divide{
 	padding-top:100px;
@@ -1138,9 +1135,6 @@ body {
 }
 .custom {
     margin: 0 -15px;;
-}
-.Portfolio-wrapper {
-
 }
 .Portfolio-wrapper img {
 	width: 100%;
@@ -1959,6 +1953,15 @@ body {
     animation: border-transform 10s linear infinite alternate forwards;
 }
 
+.about-btns{
+    display: flex;
+    gap: 20px;
+}
+
+
+
+
+
 /***----------------------------------------***/
 /***  .13 START OF DEMO SECTION 
 /***----------------------------------------***/
diff --git a/img/jehanzebarfraz.vcf b/img/jehanzebarfraz.vcf
diff --git a/index.html b/index.html
@@ -99,7 +99,7 @@ <h1>Js</h1>
                             </div>
                         </div>
                         <div class="col-12 col-lg-7 col-sm-12 mb-30">
-                            <div class="home-social d-none d-sm-block">
+                            <div class="home-social d-sm-block">
                                 <ul class="social list-unstyled m-0">
                                     <li class="linkedin"><a target="_blank" title="Upwork" href="https://www.upwork.com/freelancers/~01b3c39443e0b4a6fe"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path fill="currentColor" d="M18.561 13.158c-1.102 0-2.135-.467-3.074-1.227l.228-1.076l.008-.042c.207-1.143.849-3.06 2.839-3.06a2.705 2.705 0 0 1 2.703 2.703a2.707 2.707 0 0 1-2.704 2.702zm0-8.14c-2.539 0-4.51 1.649-5.31 4.366c-1.22-1.834-2.148-4.036-2.687-5.892H7.828v7.112a2.551 2.551 0 0 1-2.547 2.548a2.55 2.55 0 0 1-2.545-2.548V3.492H0v7.112c0 2.914 2.37 5.303 5.281 5.303c2.913 0 5.283-2.389 5.283-5.303v-1.19c.529 1.107 1.182 2.229 1.974 3.221l-1.673 7.873h2.797l1.213-5.71c1.063.679 2.285 1.109 3.686 1.109c3 0 5.439-2.452 5.439-5.45c0-3-2.439-5.439-5.439-5.439z"/></svg></a></li>
                                     <li class="linkedin"><a target="_blank" title="Github" href="https://github.com/jehanzeb007"><i class="fa fa-github"></i></a></li>
@@ -136,6 +136,9 @@ <h2>Jehanzeb Sarfraz <span id="typed"></span></h2>
                                 <div class="about-btn">
                                     <a target="_blank" href="img/jehanzeb-lead-php-developer.pdf" class="btn btn-color btn-space">Download My Resume</a>
                                 </div>
+                                <div class="about-btn">
+                                    <a target="_blank" href="img/jehanzebarfraz.vcf" class="btn btn-color btn-space contact-btn" download>Download Contact</a>
+                                </div>
                             </div>
                         </div>
                     </div>