diff --git a/dashboard.css b/dashboard.css index 12fbf8d..4958d82 100644 --- a/dashboard.css +++ b/dashboard.css @@ -4,6 +4,7 @@ box-sizing: border-box; scroll-behavior: smooth; font-family: 'Inter', sans-serif; + text-align: center; } body { width: 100vw; @@ -34,6 +35,94 @@ nav { } + + + +/* Add this CSS to your dashboard.css file */ + +/* Navbar */ +.navbar-nav { + display: flex; + justify-content: center; +} + +.navbar-nav li { + margin: 0 10px; +} + +/* Grid Links */ +.grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); + gap: 20px; +} + +.grid2 { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); + gap: 20px; +} + +/* Footer */ +.foot { + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; +} + +.col2 { + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; +} + +.about-section, +.developer-section { + text-align: center; + margin-bottom: 20px; +} + +.foot-names { + display: flex; + justify-content: center; + align-items: center; + padding: 0; + list-style: none; +} + +.foot-names li { + margin: 0 10px; +} +@media only screen and (max-width: 768px) { + .grid, + .grid2 { + grid-template-columns: 1fr; + } +} +/* Responsive Breakpoints */ +@media only screen and (max-width: 768px) { + .grid { + grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); + } + + .grid2 { + grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); + } +} + +@media only screen and (max-width: 576px) { + .navbar-nav { + flex-direction: column; + align-items: center; + } + + .navbar-nav li { + margin: 10px 0; + } +} + ul { display: flex; align-items: center; @@ -85,6 +174,19 @@ main { animation: fadeIn 1s ease-in-out; } +.headin { + font-size: 5vh; + color: #000000; + cursor: default; + animation: fadeIn 1s ease-in-out; +} + +.head { + font-size: 5vh; + color: #ffffff; + cursor: default; + animation: fadeIn 1s ease-in-out; +} .grid { display: grid; grid-template-columns: repeat(8, 1fr); @@ -131,8 +233,17 @@ main { } #bookimg { - height: 40vh; + height: auto; } + .b{ + height: auto; + width: 130px; + } + + .b{ + height: auto; + width: 130px; + } .grid2 { display: grid; @@ -356,3 +467,192 @@ body.scroll-down .back-to-top { } +.follow-us-section { + background-color: white; + } + .follow-us-section-heading { + text-align: center; + color: #183b56; + font-family: "Roboto"; + font-size: 28px; + font-weight: 700; + } + .follow-us-icon-container { + background-color: #faf7e8; + width: 80px; + height: 80px; + border-radius: 40px; + margin: 15px; + padding-top: 22px; + padding-bottom: 14px; + padding-right: 16px; + padding-left: 22px; + } + .icon { + color: #d0b200; + font-size: 35px; + } + .footer-section { + background-color: #0d2436; + max-height: 10vh; + } + .footer-section-mail-id { + color: #959ead; + font-family: "Roboto"; + font-weight: bold; + font-size: 16px; + margin-top: 20px; + } + .footer-section-address { + color: #959ead; + font-family: "Roboto"; + font-size: 14px; + } + + + + + +/* body{ + min-height: 100vh; + width: 100%; + background: #c8e8e9; + display: flex; + align-items: center; + justify-content: center; +} */ +.container{ + width: 85%; + background: #fff; + border-radius: 6px; + padding: 20px 60px 30px 40px; + box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); + text-align: left; +} +.container .content{ + display: flex; + align-items: center; + justify-content: space-between; +} +.container .content .left-side{ + width: 25%; + height: 100%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + margin-top: 15px; + position: relative; +} +.content .left-side::before{ + content: ''; + position: absolute; + height: 70%; + width: 2px; + right: -15px; + top: 50%; + transform: translateY(-50%); + background: #afafb6; +} +.content .left-side .details{ + margin: 14px; + text-align: center; +} +.content .left-side .details i{ + font-size: 30px; + color: #3e2093; + margin-bottom: 10px; +} +.content .left-side .details .topic{ + font-size: 18px; + font-weight: 500; +} +.content .left-side .details .text-one, +.content .left-side .details .text-two{ + font-size: 14px; + color: #afafb6; +} +.container .content .right-side{ + width: 75%; + margin-left: 75px; +} +.content .right-side .topic-text{ + font-size: 23px; + font-weight: 600; + color: #3e2093; +} +.right-side .input-box{ + height: 50px; + width: 100%; + margin: 12px 0; +} +.right-side .input-box input, +.right-side .input-box textarea{ + height: 100%; + width: 100%; + border: none; + outline: none; + font-size: 16px; + background: #F0F1F8; + border-radius: 6px; + padding: 0 15px; + resize: none; +} +.right-side .message-box{ + min-height: 110px; +} +.right-side .input-box textarea{ + padding-top: 6px; +} +.right-side .button{ + display: inline-block; + margin-top: 12px; +} +.right-side .button input[type="button"]{ + color: #fff; + font-size: 18px; + outline: none; + border: none; + padding: 8px 16px; + border-radius: 6px; + background: #3e2093; + cursor: pointer; + transition: all 0.3s ease; +} +.button input[type="button"]:hover{ + background: #5029bc; +} + +@media (max-width: 950px) { + .container{ + width: 90%; + padding: 30px 40px 40px 35px ; + } + .container .content .right-side{ + width: 75%; + margin-left: 55px; +} +} +@media (max-width: 820px) { + .container{ + margin: 40px 0; + height: 100%; + } + .container .content{ + flex-direction: column-reverse; + } + .container .content .left-side{ + width: 100%; + flex-direction: row; + margin-top: 40px; + justify-content: center; + flex-wrap: wrap; + } + .container .content .left-side::before{ + display: none; + } + .container .content .right-side{ + width: 100%; + margin-left: 0; + } +} diff --git a/dashboard.html b/dashboard.html index 5ae21a3..e89987d 100644 --- a/dashboard.html +++ b/dashboard.html @@ -10,13 +10,19 @@ + + + + MindSpace -