From 4d0eeb180ca4e0ded43aea83788015ce2ab28259 Mon Sep 17 00:00:00 2001 From: Akshat Date: Sat, 18 May 2024 00:28:17 +0530 Subject: [PATCH] updated to responsive --- dashboard.css | 148 ++++++++++++++++++++++++---------------------- style-landing.css | 100 +++++++++++++++++++++++++++---- 2 files changed, 168 insertions(+), 80 deletions(-) diff --git a/dashboard.css b/dashboard.css index 12fbf8d..1f2b6cd 100644 --- a/dashboard.css +++ b/dashboard.css @@ -31,7 +31,6 @@ nav { -webkit-backdrop-filter: blur(10px); border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; - } ul { @@ -71,9 +70,7 @@ main { align-items: center; justify-content: center; text-align: center; - /* height: 100vh; */ width: 100%; - /* background-color: #72D34F; */ margin-top: 5vh; margin-bottom: 5vh; } @@ -89,7 +86,7 @@ main { display: grid; grid-template-columns: repeat(8, 1fr); grid-gap: 2rem; - padding : 4rem; + padding: 4rem; } .grid:nth-of-type(2) { @@ -159,7 +156,7 @@ main { background-color: rgba(255, 255, 255, 0.2); } -.grid2 div:hover{ +.grid2 div:hover { color: white; cursor: pointer; font-size: larger; @@ -168,21 +165,22 @@ main { outline: 5px solid #72D34F; } -.left{ +.left { animation: slideIn 1s ease-in-out; } -.right{ +.right { animation: slideOut 1s ease-in-out; } -nav li a{ +nav li a { text-decoration: none; color: white; cursor: pointer; transition: ease 1s; } -nav li a:hover{ + +nav li a:hover { text-shadow: 1px 1px black; font-size: 2.5vh; } @@ -229,7 +227,6 @@ nav li a:hover{ width: 100%; height: 275px; border-radius: 10px; - margin: 0 10px; transition: box-shadow 0.3s ease; } @@ -238,7 +235,6 @@ nav li a:hover{ width: 200px; /* Set the desired width */ height: 200px; /* Set the desired height */ object-fit: cover; - border-radius: 10px; /* Add border-radius for a consistent look */ } @@ -254,13 +250,11 @@ nav li a:hover{ text-decoration: none; } - - h1 { transform: translateX(60%); } -#scrollup{ +#scrollup { display: none; position: fixed; bottom: 20px; @@ -271,88 +265,102 @@ h1 { background-color: greenyellow; color: white; cursor: pointer; - padding: 7px 10px 7px 10px; + padding: 7px 10px; border-radius: 50%; font-size: 18px; } -.foot-names{ +.foot-names { margin-bottom: 10px; } /* Key Frames */ -@media screen and (max-width: 768px) { - .grid { - grid-template-columns: repeat(4, 1fr); +@media screen and (max-width: 1024px) { + nav { + font-size: 2vh; + padding: 1.5rem; } - .grid:nth-of-type(2) { - grid-template-columns: repeat(2, 1fr); + + li { + padding-right: 5vw; } - .grid div { - width: calc(20vh / 6 + 50vw / 6); - height: calc(20vh / 6 + 50vw / 6); + + .logo { + transform: translate(-50%, -16.7vh); } - .grid div:hover { - background-color: #72D34F; - transition: linear 0.1s; + + .grid, .grid2 { + grid-template-columns: repeat(4, 1fr); + } + + .grid div, .grid2 div { + width: calc(15vh / 6 + 45vw / 6); + height: calc(15vh / 6 + 45vw / 6); } - .grid div:not(hover) { - background-color: white; - transition: linear background-color 2.5s; +} + +@media screen and (max-width: 768px) { + nav { + font-size: 1.8vh; + padding: 1rem; } - .grid div::selection { - background-color: black; + + li { + padding-right: 3vw; + transform: translateX(0); } + .logo { - width: 40vh; - position: absolute; - left: 100%; + width: 30vh; transform: translate(-40%, -16.7vh); } + + .grid { + grid-template-columns: repeat(2, 1fr); + } + + .grid2 { + grid-template-columns: repeat(2, 1fr); + } + + .grid div, .grid2 div { + width: calc(20vh / 6 + 40vw / 6); + height: calc(20vh / 6 + 40vw / 6); + } + li:not(:first-child) { display: none; } -} - + .foot { + flex-direction: column; + align-items: center; + } -/* back to top button styles */ -.back-to-top { - position: fixed; - bottom: 20px; - right: 20px; - background-color: #213c15; - color: white; - border: none; - border-radius: 50%; - padding: 10px; - cursor: pointer; - font-size: 24px; - display: none; /* hide by default */ - transition: background-color 0.3s, transform 0.3s; - z-index: 999; - animation: fadeInUp 0.5s ease; /* Entrance animation */ + .col1, .col2 { + width: 100%; + } } -.back-to-top:hover { - background-color: #3a8f0f; - transform: scale(1.1); /* Add a slight scale effect on hover */ -} +@media screen and (max-width: 480px) { + nav { + font-size: 1.5vh; + padding: 0.5rem; + height: 10vh; + } -/* show the button when user scrolls down */ -body.scroll-down .back-to-top { - display: block; -} -/* Entrance animation keyframes */ -@keyframes fadeInUp { - from { - opacity: 0; - transform: translateY(20px); + .logo { + width: 25vh; + transform: translate(-35%, -16.7vh); } - to { - opacity: 1; - transform: translateY(0); + + .grid, .grid2 { + grid-template-columns: 1; } -} + .grid div, .grid2 div { + width: calc(25vh / 6 + 35vw / 6); + height: calc(25vh / 6 + 35vw / 6); + } +} \ No newline at end of file diff --git a/style-landing.css b/style-landing.css index da2e06b..7e5c3ff 100644 --- a/style-landing.css +++ b/style-landing.css @@ -87,13 +87,6 @@ body { content: ""; position: absolute; } -/* Entry Button */ -.button { - display: flex; - align-items: center; - justify-content: center; - margin-top: 50px; -} /* Entry Button */ .button { @@ -103,8 +96,6 @@ body { margin-top: 50px; } - - button { background-color: #72d34f; width: 250px; @@ -128,4 +119,93 @@ button:hover { button a { text-decoration: none; color: white; -} \ No newline at end of file +} + +/* Responsive Design */ +@media (max-width: 1200px) { + .heading { + font-size: 4.5vh; + } + + .dynamic-text { + margin-top: 100px; + height: 80px; + } + + .dynamic-text li { + font-size: 22px; + line-height: 80px; + } +} + +@media (max-width: 768px) { + .bg-img-land img { + height: 50vh; + } + + .heading-subtitle { + transform: translateZ(15vh); + } + + .heading { + font-size: 4vh; + margin-top: -30vh; + } + + .dynamic-text { + margin-top: 80px; + height: 70px; + } + + .dynamic-text li { + font-size: 20px; + line-height: 70px; + } + + button { + width: 220px; + height: 50px; + font-size: 16px; + } + + button:hover { + width: 240px; + height: 55px; + } +} + +@media (max-width: 480px) { + .bg-img-land img { + height: 40vh; + } + + .heading-subtitle { + transform: translateZ(10vh); + } + + .heading { + font-size: 3.5vh; + margin-top: -25vh; + } + + .dynamic-text { + margin-top: 60px; + height: 60px; + } + + .dynamic-text li { + font-size: 18px; + line-height: 60px; + } + + button { + width: 200px; + height: 45px; + font-size: 14px; + } + + button:hover { + width: 220px; + height: 50px; + } +}