diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..e3be237 --- /dev/null +++ b/css/style.css @@ -0,0 +1,266 @@ +@import url("https://fonts.googleapis.com/css2?family=PT+Serif&family=Poppins:wght@200&display=swap"); + +/* dark color mode */ +:root { + --clr-background: #121212; + --clr-secondary: #292929; + --clr-profile-hover: #333333; + --clr-tertiary: #444444; + --clr-base: #ffffff; + --clr-search-focus: rgba(255, 255, 255, 0.5); + --clr-search-shadow: rgba(255, 255, 255, 0.2); + --clr-gray: #ffffff; +} + +::-webkit-scrollbar { + width: 9px; +} + +::-webkit-scrollbar-track { + background-color: var(--clr-background); +} + +::-webkit-scrollbar-thumb { + background-color: var(--clr-profile-hover); + border-radius: 12px; +} + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + background-color: var(--clr-background); + color: var(--clr-gray); + font-family: Arial, sans-serif; + text-align: center; +} + +.header { + display:flex; + background-color: var(--clr-secondary); +} + +.col{ + /* flex: 50% */ + display: flex; + flex: 50%; +} + +.add-col{ + margin-left: 25px; +} +.add-col:hover{ + background-color: rgb(61, 59, 59); + transform: scale(1.1); + transition: transform 0.5s ease-in-out; +} +h1 { + padding: 20px; + font-size: 36px; + font-family: "PT Serif", serif; + +} + +.container { + display: flex; + flex-wrap: wrap; + justify-content: center; + max-width: 1200px; + margin: 0 auto; + padding: 20px; +} + +#no-profile +{ + text-align: center; + padding: 20px; + font-family: "PT Serif", serif; + display: none; +} + +.profile { + background-color: var(--clr-secondary); + border: 1px solid black ; + box-shadow: 3px 3px 2px 2px rgb(141, 139, 139); + border-radius: 10px; + padding: 20px; + margin: 20px; + width: calc(33.33% - 40px); + text-align: center; + /* transition: background-color 0.3s ease; */ + transform: scale(1.0); + transition-duration: 1s; +} + +.profile:hover { + background-color: var(--clr-profile-hover); + transform: scale(1.1); + transition: transform 0.5s ease-in-out; +} + +.pfp img { + width: 100px; + height: 100px; + border-radius: 50%; + margin-bottom: 10px; +} + +.name { + font-family: "Poppins", sans-serif; + font-size: 20px; + margin-bottom: 10px; +} + +.skills { + margin-bottom: 10px; + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + row-gap: 7px; +} + +.skill { + background-color: var(--clr-tertiary); + padding: 5px 10px; + border-radius: 5px; + margin: 0 5px 10px 0; + font-size: 14px; + display: inline-block; +} + +.social { + margin-top: 13px; + display: flex; + flex-direction: row; + justify-content: center; + margin: 0px; + background-color: var(--clr-tertiary); + padding: 10px; + border-radius: 20px; +} + +.social a { + color: var(--clr-gray); + margin: 0 10px; + font-size: 24px; + text-decoration: none; + transition: color 0.3s, font-size 0.3s; +} + +.social a:hover { + color: #00aaff; + font-size: 28px; +} + +@media screen and (max-width: 768px) { + .container { + justify-content: center; + } + + .profile { + width: 100%; + } +} + +button { + color: var(--clr-gray); + padding: 10px 20px; + background-color: var(--clr-secondary); + border: var(--clr-gray); + cursor: pointer; + font-family: 'Poppins',sans-serif; + font-size: 1.1em; + border-radius: 5%; + float: inline-start; +} + +.search { + text-align: center; + margin: 30px 0 30px 0; +} + +#searchInput { + width: 80%; + padding: 10px; + border: none; + border-radius: 5px; + background-color: var(--clr-background); + color: var(--clr-gray); + font-size: 16px; + box-shadow: 0px 0px 5px var(--clr-search-shadow); +} + +#searchInput::placeholder { + color: #777; +} + +#searchInput:focus { + outline: none; + box-shadow: 0px 0px 5px var(--clr-search-focus); +} + + +.dark-mode { + --clr-background: #ffffff; + --clr-secondary: #f0f0f0; + --clr-profile-hover: #d4d4d4; + --clr-tertiary: #f9f9f9; + --clr-base: #ffffff; + --clr-search-shadow: rgba(0, 0, 0, 0.2); + --clr-search-focus: rgba(0, 0, 0, 0.5); + --clr-gray: #000000; +} + +.wrapper-toggle-button { +display: flex; +justify-content: flex-end; +align-items: center; +padding-right: 40px; +} + +.toggle-mode { +width: 4em; +height: 2em; +border-radius: 8px; +background: var(--clr-secondary); +border: 2px solid var(--clr-gray); +position: absolute; +cursor: pointer; +} + +.mode-toggle { +width: 1.4em; +height: 1.4em; +background: var(--clr-gray); +position: absolute; +border-radius: 6px; +top: 0.2em; +left: 0.25em; +cursor: pointer; +transition: all 250ms ease-in-out; +} + +.toggle-mode::before { +content: "Dark mode"; +position: absolute; +display: inline-block; +width: 12em; +left: -10em; +top: 0.4em; +} + +#input-toggle-button:checked ~ label .mode-toggle { +transform: translatex(1.8em); +} + +#input-toggle-button:checked ~ .toggle-mode::before { +content: "Light mode"; +} + +#input-toggle-button { +display: none; +} diff --git a/index.html b/index.html index 4631ec1..6e31802 100644 --- a/index.html +++ b/index.html @@ -29,6 +29,7 @@

Dev Profiles

+ @@ -849,7 +850,7 @@

Shashwat Bajpai

-
+
User Image

Akshat Mishra

@@ -863,7 +864,23 @@

Akshat Mishra

+ +
+
User Image
+

Mudasir Tadimrri

+
+ Java + Html + Css + Android Studio + MERN Stack +
+ +
+ diff --git a/style.css b/style.css deleted file mode 100644 index 416a5e6..0000000 --- a/style.css +++ /dev/null @@ -1,161 +0,0 @@ -@import url('https://fonts.googleapis.com/css2?family=PT+Serif&family=Poppins:wght@200&display=swap'); - -::-webkit-scrollbar { - width: 9px; -} - -::-webkit-scrollbar-track { - background-color: #141414; -} - -::-webkit-scrollbar-thumb { - background-color: #302f2f; - border-radius: 12px; -} - -* { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -body { - background-color: #121212; - color: #ffffff; - font-family: Arial, sans-serif; - text-align: center; -} - -h1 { - padding: 20px; - font-size: 36px; - font-family: 'PT Serif', serif; -} - -.container { - display: flex; - flex-wrap: wrap; - justify-content: center; - max-width: 1200px; - margin: 0 auto; - padding: 20px; -} - -.profile { - background-color: #292929; - border-radius: 10px; - padding: 20px; - margin: 20px; - width: calc(33.33% - 40px); - text-align: center; - transition: background-color 0.3s ease; -} - -.profile:hover { - background-color: #333333; -} - -.pfp img { - width: 100px; - height: 100px; - border-radius: 50%; - margin-bottom: 10px; -} - -.name { - font-family: 'Poppins', sans-serif; - font-size: 20px; - margin-bottom: 10px; -} - -.skills { - margin-bottom: 10px; - display: flex; - flex-direction: row; - flex-wrap: wrap; - justify-content: center; - row-gap: 7px; -} - -.skill { - background-color: #444; - padding: 5px 10px; - border-radius: 5px; - margin: 0 5px 10px 0; - font-size: 14px; - display: inline-block; -} - -.social { - margin-top: 13px; - display: flex; - flex-direction: row; - justify-content: center; -} - -.social a { - color: #ffffff; - margin: 0 10px; - font-size: 24px; - text-decoration: none; -} - -.social a { - color: #ffffff; - margin: 0 10px; - font-size: 24px; - text-decoration: none; - transition: color 0.3s, font-size 0.3s; -} - -.social a:hover { - color: #00aaff; - font-size: 28px; -} - -@media screen and (max-width: 768px) { - .container { - justify-content: center; - } - - .profile { - width: 100%; - } -} - -button { - color: #fff; - padding: 10px 20px; - background-color: #2b3031; - border: none; - cursor: pointer; - font-family: 'Poppins',sans-serif; - font-size: 1.1em; - border-radius: 5%; -} - -.search { - text-align: center; - margin-bottom: 20px; -} - -#searchInput { - width: 80%; - padding: 10px; - border: none; - border-radius: 5px; - background-color: #121212; - color: #ffffff; - font-size: 16px; - box-shadow: 0px 0px 5px rgba(255, 255, 255, 0.2); -} - -#searchInput::placeholder { - color: #777; -} - -#searchInput:focus { - outline: none; - box-shadow: 0px 0px 5px rgba(255, 255, 255, 0.5); -} -