From 88e109e8e2f6fcf7b952b238d21508b54c71e314 Mon Sep 17 00:00:00 2001 From: Nitin Soni Date: Fri, 4 Oct 2024 01:33:20 +0530 Subject: [PATCH] added footer --- assets/images/logo.svg | 3 ++ css/media.css | 65 +++++++++++++++++++++++++++++++++++++- css/style.css | 72 ++++++++++++++++++++++++++++++++++++++++-- index.html | 45 ++++++++++++++++++++------ 4 files changed, 171 insertions(+), 14 deletions(-) create mode 100644 assets/images/logo.svg diff --git a/assets/images/logo.svg b/assets/images/logo.svg new file mode 100644 index 0000000..263921e --- /dev/null +++ b/assets/images/logo.svg @@ -0,0 +1,3 @@ + + + diff --git a/css/media.css b/css/media.css index c8a3446..a3b94f5 100644 --- a/css/media.css +++ b/css/media.css @@ -40,7 +40,7 @@ /*----------------------------------------------------*/ #contact .t-container { - padding: 0; + padding-top: 0; } #contact .table { @@ -62,6 +62,27 @@ #contact .table .table-r { width: 100%; } + + /*----------------------------------------------------*/ + + footer { + padding-top: 3rem; + padding-bottom: 3.5rem; + } + + footer .container { + flex-direction: column; + row-gap: 4rem; + width: 92%; + } + + footer .container .wrapper-l { + width: 100%; + } + + footer .container .wrapper-r { + width: 100%; + } } @media only screen and (max-width: 800px) { @@ -243,6 +264,31 @@ padding-top: 1.5rem; padding-bottom: 2.5rem; } + + /*----------------------------------------------------*/ + + footer { + padding-top: 2.5rem; + padding-bottom: 3rem; + } + + footer .container { + row-gap: 3rem; + } + + footer .container .wrapper-l h2 { + font-weight: 400; + padding-bottom: 1.25rem; + } + + footer .container .wrapper-r { + column-gap: 1.5rem; + } + + footer .container .wrapper-r h3 { + font-size: 1rem; + padding-bottom: .75rem; + } } @media only screen and (max-width: 540px) { @@ -382,6 +428,17 @@ #contact .table .table-r .container .card:not(.front) { transform: rotate(-3deg) translateX(-3px) translateY(-6px); } + + /*----------------------------------------------------*/ + + footer .container { + width: 88%; + } + + footer .container .wrapper-r { + flex-direction: column; + row-gap: 1.5rem; + } } @media only screen and (min-width: 800px) { @@ -449,6 +506,12 @@ #contact .table .table-r .container .card:not(.front):hover { cursor: url('/assets/images/link.png'), pointer; } + + /*----------------------------------------------------*/ + + footer .container .wrapper-r a:hover { + color: white; + } } @media only screen and (min-width: 1400px) { diff --git a/css/style.css b/css/style.css index 71856f1..ba80423 100755 --- a/css/style.css +++ b/css/style.css @@ -198,8 +198,8 @@ nav .nav-l ul li { nav .nav-l ul .logo a { color: white; - font-weight: 500; font-size: 1.5rem; + font-weight: 500; letter-spacing: 2px; margin-right: 2rem; text-decoration: none; @@ -259,7 +259,7 @@ nav .nav-r a { display: flex; justify-content: center; align-items: flex-start; - grid-column-gap: 70px; + column-gap: 70px; position: relative; top: -222px; transform: rotate(-30deg); @@ -652,7 +652,8 @@ nav .nav-r a { #contact .t-container { display: flex; justify-content: center; - padding: 2rem 0; + padding-top: 2rem; + padding-bottom: 2rem; } #contact .table { @@ -849,3 +850,68 @@ nav .nav-r a { z-index: 1; position: absolute; } + +#contact .gradient-ruler { + width: 100%; + height: 1px; + background-color: #0000; + background-image: linear-gradient(270deg, #ffffff12, #ffffff42 31%, #fae57566 68%, #ffffff12); +} + +/*----------------------------------------------------*/ + +footer { + padding-top: 2.5rem; + padding-bottom: 4rem; +} + +footer .container { + margin: auto; + width: 94%; + max-width: 80rem; + display: flex; + flex-direction: row; + column-gap: 8vw; +} + +footer .container .wrapper-l { + width: 40%; +} + +footer .container .wrapper-l h2 { + font-size: 1.5rem; + font-weight: 500; + letter-spacing: 2px; + padding-bottom: 1.5rem; +} + +footer .container .wrapper-l p { + font-size: .875rem; + line-height: 1.375; +} + +footer .container .wrapper-r { + width: 60%; + display: flex; + flex-direction: row; + column-gap: 2rem; +} + +footer .container .wrapper-r h3 { + font-size: 1.25rem; + font-weight: 300; + padding-bottom: 1rem; +} + +footer .container .wrapper-r a { + display: block; + color: #ffffffb3; + font-size: .875rem; + padding: .5rem 0; + transition: color .3s; + text-decoration: none; +} + +footer .container .wrapper-r .column { + width: 100%; +} diff --git a/index.html b/index.html index 17d7087..76757dc 100644 --- a/index.html +++ b/index.html @@ -8,12 +8,12 @@ Nitin Soni's Digital Space - + - - - - + + + +
@@ -47,7 +47,7 @@
- +

to You, Mate

Welcome! I'm Nitin Soni - explore my portfolio,
connect via diverse contact options, and engage on
social platforms for deeper insights.

@@ -55,15 +55,15 @@

to You, Mate

- - + +
- +

Portfolio

@@ -141,7 +141,7 @@

Embark on My
Professional Odyssey

- +

Contact

@@ -190,8 +190,33 @@

Nitin Soni

+
+