Skip to content

Commit

Permalink
added footer
Browse files Browse the repository at this point in the history
  • Loading branch information
@nitinsooni
nitinsooni committed Oct 3, 2024
1 parent f0cb402 commit 88e109e
Show file tree
Hide file tree
Showing 4 changed files with 171 additions and 14 deletions.
3 changes: 3 additions & 0 deletions assets/images/logo.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
65 changes: 64 additions & 1 deletion css/media.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@
/*----------------------------------------------------*/

#contact .t-container {
padding: 0;
padding-top: 0;
}

#contact .table {
Expand All @@ -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) {
Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -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) {
Expand Down
72 changes: 69 additions & 3 deletions css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -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%;
}
45 changes: 35 additions & 10 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,12 +8,12 @@
<title>Nitin Soni's Digital Space</title>
<link rel="stylesheet" href="/css/style.css">
<link rel="stylesheet" href="/css/media.css">
<link rel="icon" href="/favicon.ico" sizes="48x48" >
<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" href="/favicon.svg" sizes="any" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png"/>
<link rel="stylesheet" href="/assets/fonts/fontawesome/css/fontawesome.css"/>
<link rel="stylesheet" href="/assets/fonts/fontawesome/css/solid.css"/>
<link rel="stylesheet" href="/assets/fonts/fontawesome/css/brands.css"/>
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="stylesheet" href="/assets/fonts/fontawesome/css/fontawesome.css">
<link rel="stylesheet" href="/assets/fonts/fontawesome/css/solid.css">
<link rel="stylesheet" href="/assets/fonts/fontawesome/css/brands.css">
</head>
<body>
<div class="preloader">
Expand Down Expand Up @@ -47,23 +47,23 @@
<div class="title">
<img src="/assets/images/greetings.svg"><!--Arizonia Font-->
<svg viewBox="0 0 530 121" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14.3842 62.6465C-13.5586 90.2972 1.53864 133.508 66.4018 106.456C131.264 79.4047 148.186 89.771 190.258 105.98C232.33 122.19 280.586 127.623 339.926 103.981C402.249 82.3266 422.278 99.0596 464.599 110.393C515.868 123.715 538.408 96.4687 525.376 78.2974C520.937 71.0188 508.251 72.1704 512.514 80.2658"/>
<path d="M14.3842 62.6465C-13.5586 90.2972 1.53864 133.508 66.4018 106.456C131.264 79.4047 148.186 89.771 190.258 105.98C232.33 122.19 280.586 127.623 339.926 103.981C402.249 82.3266 422.278 99.0596 464.599 110.393C515.868 123.715 538.408 96.4687 525.376 78.2974C520.937 71.0188 508.251 72.1704 512.514 80.2658">
</svg>
<h1>to You, Mate</h1>
<p>Welcome! I'm <span class="gold-text">Nitin Soni</span> - explore my portfolio,<br>connect via diverse contact options, and engage on<br>social platforms for deeper insights.</p>
</div>
<div class="contact-box">
<div class="contact-bar">
<form action="mailto:[email protected]" method="post" enctype="text/plain">
<input type="text" class="text-field" name="body" placeholder="Type your message..." required/>
<input type="submit" class="submit" value="E-mail me"/>
<input type="text" class="text-field" name="body" placeholder="Type your message..." required>
<input type="submit" class="submit" value="E-mail me">
</form>
</div>
</div>
<button onclick="topFunction()" id="scroll-to-top"><i class="fa-solid fa-angle-up"></i></button>
</section>
<section id="portfolio" class="section">
<img src="/assets/images/blur-circle.webp" class="blur-circle"/>
<img src="/assets/images/blur-circle.webp" class="blur-circle">
<div class="title">
<h2>Portfolio</h2>
</div>
Expand Down Expand Up @@ -141,7 +141,7 @@ <h3>Embark on My <br><span class="gold-gradient-text">Professional Odyssey</span
</div>
</section>
<section id="contact" class="section">
<img src="/assets/images/blur-circle.webp" class="blur-circle"/>
<img src="/assets/images/blur-circle.webp" class="blur-circle">
<div class="title">
<h2>Contact</h2>
</div>
Expand Down Expand Up @@ -190,8 +190,33 @@ <h3>Nitin Soni</h3>
</div>
</div>
</div>
<div class="gradient-ruler"></div>
</section>
</main>
<footer>
<div class="container">
<div class="wrapper-l">
<h2>NITIN SONI</h2>
<p>Sohna<br>Gurugram, HR 122103</p>
</div>
<div class="wrapper-r">
<div class="column a">
<h3>Donate</h3>
<a href="#">...</a>
</div>
<div class="column b">
<h3>Reach out</h3>
<a href="https://www.instagram.com/nitinsooni" target="_blank">Instagram</a>
<a href="https://www.linkedin.com/in/nitinsooni" target="_blank">LinkedIn</a>
</div>
<div class="column c">
<h3>Webring</h3>
<a href="https://landchad.net" target="_blank">LandChad</a>
<a href="https://www.bugswriter.com" target="_blank">Bugswriter</a>
</div>
</div>
</div>
</footer>
<script src="/js/script.js"></script>
</body>
</html>

0 comments on commit 88e109e

Please sign in to comment.