From 9f44ad20744f857c5c6898aebf1c8a86b2beca57 Mon Sep 17 00:00:00 2001 From: tomoayan <63101155+tomoayan@users.noreply.github.com> Date: Thu, 19 Oct 2023 23:58:26 +0530 Subject: [PATCH] redesign --- index.html | 114 +++++++++++++++++++--------------- main.css | 176 ++++++++++++++++++++++++++++++++--------------------- 2 files changed, 171 insertions(+), 119 deletions(-) diff --git a/index.html b/index.html index 6760c9f..0c76afb 100644 --- a/index.html +++ b/index.html @@ -6,62 +6,80 @@ - + Tomoayan
-
-
- Display Picture -

Tomoayan

-

A lazy naive guy who doesn't have basic social skills and terrible at study.

+
+

A self-proclaimed tech nerd with an insatiable + passion for all things visual and creative.

-
-

Socials

- - - - - - Instagram - - - - - - - Dumny (Edits) - - - - - - - Twitter (X) - - - - - - - Youtube - - - - - - - Github - +
+
+

Tomoayan

+
+ + + + + + Instagram + + + + + + + Twitter (X) + + + + + + + Github + + + + + + + Youtube + +
+
+
+

Dumny

+
+ + + + + + Instagram + + + + + + + Youtube + +
+
+
diff --git a/main.css b/main.css index 7ef4d88..ce72e76 100644 --- a/main.css +++ b/main.css @@ -7,13 +7,15 @@ * { margin: 0; + text-decoration: none; -webkit-tap-highlight-color: transparent; } body { -webkit-font-smoothing: antialiased; font-family: 'IBM Plex Sans', sans-serif; - background-color: #ddd + font-family: 'Inter', sans-serif; + background-color: #232323 } img, @@ -27,6 +29,7 @@ svg { } p, +a, h1, h2, h3, @@ -38,24 +41,16 @@ h6 { } + + /* Wrapper */ .wrapper { min-height: 100vh; - display: grid; - position: relative; - place-content: center; + display: flex; + justify-content: center; + align-items: center; } -.wrapper > img { - position: absolute; - z-index: -1; - top: 0; - left: 0; - width: 100%; - height: 100%; - object-fit: cover; - opacity: .5; -} @@ -63,88 +58,127 @@ h6 { .card { display: flex; flex-direction: column; - gap: 20px; - max-width: 450px; - width: fit-content; - /* border: 1px solid red; */ - padding: 30px 20px; - margin: 30px; - border: 2px solid #000; - border-radius: 15px; - background-color: rgba(221, 221, 221, .8); - backdrop-filter: blur(10px); - box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px, rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px, rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px; + gap: 40px; + padding: 30px; + max-width: 500px; + width: 100% } -/* Profile */ -.profile { + +/* Bio */ +.bio p { + width: 100%; + text-align: center; + font-size: 16px; + max-width: 350px; + margin: 0 auto; + color: hsl(0, 0%, 100%); + font-weight: 400; +} + + + + +/* Links */ +.profile-container { + display: flex; + flex-direction: column; + gap: 40px; +} + +.profile-container .profile { display: flex; flex-direction: column; - align-items: center; gap: 10px; } -.profile h2 { - font-weight: 800; - font-size: 32px; +.profile h3 { + font-size: 16px; + font-weight: 600; + text-transform: uppercase; + color: hsla(0, 0%, 100%) } -.profile img { - width: 100px; - height: 100px; - border-radius: 15px; - border: 2px solid #000; +.links-container { + display: grid; + grid-column: 2; + grid-template-columns: 1fr 1fr; + gap: 15px; } -.profile p { - font-family: Helvetica, sans-serif; - /* font-weight: 500; */ - font-size: 16px; +.links-container a { + position: relative; + display: flex; + gap: 5px; + justify-content: center; + align-items: center; + padding: 10px 0; + box-shadow: inset 0px 0px 0px 1.5px hsla(0, 0%, 100%, 0.6); + border-radius: 10px; + color: hsla(0, 0%, 100%, 0.6); + font-size: 14px; + overflow: hidden; + transition: color ease-in .1s, box-shadow linear .1s } +.links-container a svg { + width: 24px; + height: 24px; + fill: hsla(0, 0%, 100%, 0.6); + transition: fill ease-in .1s; +} -/* Links */ -.links { - display: flex; - flex-direction: column; - gap: 15px; + + +/* Button Hover */ +.links-container a::before { + content: ""; + background-color: #fff; + position: absolute; + width: 115%; + aspect-ratio: 1 / 1; + z-index: -1; + border-radius: 50%; + transform: translateY(65%); + transition: transform cubic-bezier(0, 0, 0, 1) .5s } -.links h3 { - font-size: 20px; - font-weight: 600; - line-height: .9; +.links-container a:hover, +.links-container a:hover svg { + color: #000; + fill: #000; } -.links a { - border: 2px solid #000; - padding: 5px; - display: flex; - align-items: center; - gap: 10px; - text-decoration: none; - color: inherit; - font-weight: 600; - font-size: 16px; - transition: all .1s ease-out; +.links-container a:hover::before { + transform: translateY(0); } -.links a:hover { - box-shadow: -3px 3px; - transform: translate(3px, -3px); +/* social custom colour */ +.links-container a.instagram:hover, +.links-container a.instagram:hover svg, +.links-container a.youtube:hover, +.links-container a.youtube:hover svg { + box-shadow: inset 0px 0px 0px 0px; + color: #fff; + fill: #fff; } -.links a:active { - box-shadow: 0 0; - transform: translate(0) - scale(.97) +.links-container .instagram::before { + background: linear-gradient(90deg, #d300c5 0%, #ff0069 50%, #ffd600 100%); +} +.links-container .youtube::before { + background-color: hsl(0, 100%, 60%); } -.links svg { - width: 26px; - height: 26px; -} \ No newline at end of file + + +@media only screen and (max-width: 450px) { + .links-container a::before { + transform: translateY(70%); + + } + } \ No newline at end of file