initial commit

ankitgupta1020 · Oct 28, 2023 · 45b96a8 · 45b96a8
1 parent 3f34dcf
commit 45b96a8
Show file tree

Hide file tree

Showing 3 changed files with 84 additions and 5 deletions.
diff --git a/css/general.css b/css/general.css
@@ -2,9 +2,9 @@
 /* CSS VARIABLE */
 /***********************/
 
-@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap");
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');
 
-:root {
+/* :root {
   --clr-primary: #558aff;
   --clr-primary-darker: #446ecc;
   --clr-background: #e5ebf4;
@@ -15,6 +15,18 @@
   --clr-white: #fff;
   --clr-white-darker: #ddd;
   --clr-black: #111;
+} */
+:root {
+  --clr-primary: #1A73E8;           /* Bright Blue */
+  --clr-primary-darker: #0F5DBF;    /* Darker Blue */
+  --clr-background: #F6F7F9;        /* Off White */
+  --clr-background-transparent: rgba(246, 247, 249, 0.95); /* Transparent Off White */
+  --clr-text: #111;                 /* Almost Black */
+  --clr-text-lighter: #575757;      /* Medium Gray */
+  --clr-white-transparent: rgba(255, 255, 255, 0.95); /* Transparent White */
+  --clr-white: #FFFFFF;             /* Pure White */
+  --clr-white-darker: #E2E2E2;      /* Light Gray */
+  --clr-black: #0B0B0B;             /* Deep Black */
 }
 
 .dark-mode {

diff --git a/css/styles.css b/css/styles.css
@@ -863,7 +863,7 @@ h1 span {
 /***********************/
 /* FOOTER */
 /***********************/
-
+/* 
 footer {
   padding: 4.8rem 3.2rem;
   background: var(--clr-black);
@@ -895,4 +895,48 @@ footer .social-link:active {
   -webkit-transform: translateY(-0.3rem);
   -ms-transform: translateY(-0.3rem);
   transform: translateY(-0.3rem);
-}
+} */
+footer {
+  background-color: #FFFFFF; /* Your footer background color */
+  position: relative;
+  overflow: hidden;
+}
+
+footer::after {
+  content: "";
+  position: absolute;
+  bottom: -50px; /* Adjust this value based on your curve size */
+  left: 0;
+  width: 100%;
+  height: 50px; /* Adjust this value based on your curve size */
+  background-color: #FFFFFF; /* Your footer background color */
+  border-top-left-radius: 50% 25px;
+  border-top-right-radius: 50% 25px;
+}
+
+footer {
+  padding: 20px 0;
+  background-color: #1A73E8;  /* A bright blue, but feel free to adjust */
+  color: white;
+  text-align: center;
+}
+
+footer p {
+  font-size: 24px;   /* Emphasizing the name */
+  margin-bottom: 15px;
+}
+
+.social-links {
+  display: flex;
+  justify-content: center;
+  gap: 20px;   /* Space between icons */
+}
+
+.social-link i {
+  font-size: 20px;  /* Adjusting the size of icons */
+  transition: transform 0.3s ease;   /* Smooth transition for hover effect */
+}
+
+.social-link:hover i {
+  transform: scale(1.1);  /* Slightly enlarging icons on hover */
+}
diff --git a/index.html b/index.html
@@ -490,7 +490,7 @@ <h5>Email</h5>
 
 
   <!-- FOOTER -->
-  <footer>
+  <!-- <footer>
     <p>Ankit Gupta</p>
     <div class="social-links center">
       <a class="social-link" title="LinkedIn" href="https://www.linkedin.com/in/ankit-gupta-5bb433174/" target="_blank"
@@ -505,7 +505,30 @@ <h5>Email</h5>
         <i class="fa-brands fa-x "></i>
       </a>
     </div>
+  </footer> -->
+  <!-- FOOTER -->
+  <div class="curved-svg">
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
+      <path fill="#FFFFFF" d="M0,96L40,106.7C80,117,160,139,240,138.7C320,139,400,117,480,122.7C560,128,640,160,720,154.7C800,149,880,107,960,112C1040,117,1120,171,1200,192C1280,213,1360,203,1400,197.3L1440,192L1440,320L1400,320C1360,320,1280,320,1200,320C1120,320,1040,320,960,320C880,320,800,320,720,320C640,320,560,320,480,320C400,320,320,320,240,320C160,320,80,320,40,320L0,320Z"></path>
+    </svg>
+
+  <footer>
+    <p>Ankit Gupta</p>
+    <div class="social-links">
+      <a class="social-link" title="LinkedIn" href="https://www.linkedin.com/in/ankit-gupta-5bb433174/" target="_blank"
+        rel="noopener noreferrer">
+        <i class="fa-brands fa-linkedin"></i>
+      </a>
+      <a class="social-link" title="Github" href="https://github.com/ankitgupta1020" target="_blank"
+        rel="noopener noreferrer">
+        <i class="fa-brands fa-github"></i>
+      </a>
+      <a class="social-link" title="X" href="https://x.com/AnkitGu93350210" target="_blank" rel="noopener noreferrer">
+        <i class="fa-brands fa-x"></i>
+      </a>
+    </div>
   </footer>
+</div>
 </body>
 
 </html>