From d1797e5749f480853ceee043a005bb9869c98a44 Mon Sep 17 00:00:00 2001 From: Mudasir7-Prof-Snape <140256749+Mudasir7-Prof-Snape@users.noreply.github.com> Date: Thu, 5 Oct 2023 13:16:59 +0530 Subject: [PATCH 1/6] Update index.html added my profile --- index.html | 18 +++++++++++++++++- 1 file changed, 17 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 4631ec1..396f4b3 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,22 @@

Akshat Mishra

+
+
User Image
+

Mudasir Tadimrri

+
+ Java + Html + Css + Android Studio + MERN Stack +
+ +
+ From 816674403fa495941dd7733ed00f48e5ff0ee855 Mon Sep 17 00:00:00 2001 From: Mudasir7-Prof-Snape <140256749+Mudasir7-Prof-Snape@users.noreply.github.com> Date: Thu, 5 Oct 2023 13:19:51 +0530 Subject: [PATCH 2/6] Update style.css added hover effect to the profile image --- style.css | 185 +++++++++++++++++++++++++++--------------------------- 1 file changed, 93 insertions(+), 92 deletions(-) diff --git a/style.css b/style.css index 416a5e6..e14bd22 100644 --- a/style.css +++ b/style.css @@ -1,161 +1,162 @@ -@import url('https://fonts.googleapis.com/css2?family=PT+Serif&family=Poppins:wght@200&display=swap'); +@import url("https://fonts.googleapis.com/css2?family=PT+Serif&family=Poppins:wght@200&display=swap"); ::-webkit-scrollbar { - width: 9px; + width: 9px; } ::-webkit-scrollbar-track { - background-color: #141414; + background-color: #141414; } ::-webkit-scrollbar-thumb { - background-color: #302f2f; - border-radius: 12px; + background-color: #302f2f; + border-radius: 12px; } * { - margin: 0; - padding: 0; - box-sizing: border-box; + margin: 0; + padding: 0; + box-sizing: border-box; } body { - background-color: #121212; - color: #ffffff; - font-family: Arial, sans-serif; - text-align: center; + background-color: #121212; + color: #ffffff; + font-family: Arial, sans-serif; + text-align: center; } h1 { - padding: 20px; - font-size: 36px; - font-family: 'PT Serif', serif; + 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; + 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; + 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; + background-color: #333333; } .pfp img { - width: 100px; - height: 100px; - border-radius: 50%; - margin-bottom: 10px; + width: 100px; + height: 100px; + border-radius: 50%; + margin-bottom: 10px; +} +img:hover { + box-shadow: 0 0 5px 5px #cd5c08; } - .name { - font-family: 'Poppins', sans-serif; - font-size: 20px; - margin-bottom: 10px; + 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; + 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; + 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; + margin-top: 13px; + display: flex; + flex-direction: row; + justify-content: center; } .social a { - color: #ffffff; - margin: 0 10px; - font-size: 24px; - text-decoration: none; + 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; + 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; + color: #00aaff; + font-size: 28px; } @media screen and (max-width: 768px) { - .container { - justify-content: center; - } + .container { + justify-content: center; + } - .profile { - width: 100%; - } + .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%; + 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; + 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); + 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; + color: #777; } #searchInput:focus { - outline: none; - box-shadow: 0px 0px 5px rgba(255, 255, 255, 0.5); + outline: none; + box-shadow: 0px 0px 5px rgba(255, 255, 255, 0.5); } - From 16902cbe1755d0dcc5d05f1fc429e34d5629c747 Mon Sep 17 00:00:00 2001 From: Priyansh Prajapat Date: Mon, 9 Oct 2023 18:10:46 +0530 Subject: [PATCH 3/6] fix conflicts --- index.html | 1 + 1 file changed, 1 insertion(+) diff --git a/index.html b/index.html index 396f4b3..6e31802 100644 --- a/index.html +++ b/index.html @@ -864,6 +864,7 @@

Akshat Mishra

+
User Image

Mudasir Tadimrri

From f9ee17a600f6272500f6eac9cf6e33efb7d11f8e Mon Sep 17 00:00:00 2001 From: Priyansh Prajapat Date: Mon, 9 Oct 2023 18:11:40 +0530 Subject: [PATCH 4/6] Update style.css From 4851b39c0e095c3f97e992b38cbef2d3f3e15b19 Mon Sep 17 00:00:00 2001 From: Priyansh Prajapat Date: Mon, 9 Oct 2023 18:16:11 +0530 Subject: [PATCH 5/6] Update style.css --- style.css | 176 +++++++++++++++++++++++++++--------------------------- 1 file changed, 88 insertions(+), 88 deletions(-) diff --git a/style.css b/style.css index e14bd22..78aa82a 100644 --- a/style.css +++ b/style.css @@ -1,124 +1,124 @@ -@import url("https://fonts.googleapis.com/css2?family=PT+Serif&family=Poppins:wght@200&display=swap"); +@import url('https://fonts.googleapis.com/css2?family=PT+Serif&family=Poppins:wght@200&display=swap'); ::-webkit-scrollbar { - width: 9px; + width: 9px; } ::-webkit-scrollbar-track { - background-color: #141414; + background-color: #141414; } ::-webkit-scrollbar-thumb { - background-color: #302f2f; - border-radius: 12px; + background-color: #302f2f; + border-radius: 12px; } * { - margin: 0; - padding: 0; - box-sizing: border-box; + margin: 0; + padding: 0; + box-sizing: border-box; } body { - background-color: #121212; - color: #ffffff; - font-family: Arial, sans-serif; - text-align: center; + background-color: #121212; + color: #ffffff; + font-family: Arial, sans-serif; + text-align: center; } h1 { - padding: 20px; - font-size: 36px; - font-family: "PT Serif", serif; + 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; + 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; + 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; + background-color: #333333; } .pfp img { - width: 100px; - height: 100px; - border-radius: 50%; - margin-bottom: 10px; + width: 100px; + height: 100px; + border-radius: 50%; + margin-bottom: 10px; } img:hover { - box-shadow: 0 0 5px 5px #cd5c08; + box-shadow: 0 0 5px 5px #cd5c08; } .name { - font-family: "Poppins", sans-serif; - font-size: 20px; - margin-bottom: 10px; + 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; + 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; + 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; + margin-top: 13px; + display: flex; + flex-direction: row; + justify-content: center; } .social a { - color: #ffffff; - margin: 0 10px; - font-size: 24px; - text-decoration: none; + 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; + 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; + color: #00aaff; + font-size: 28px; } @media screen and (max-width: 768px) { - .container { - justify-content: center; - } + .container { + justify-content: center; + } .profile { width: 100%; @@ -126,37 +126,37 @@ img:hover { } 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%; + 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; + 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); + 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; + color: #777; } #searchInput:focus { - outline: none; - box-shadow: 0px 0px 5px rgba(255, 255, 255, 0.5); + outline: none; + box-shadow: 0px 0px 5px rgba(255, 255, 255, 0.5); } From ec32c8989b50fc4785f0f0e6de63efba00679631 Mon Sep 17 00:00:00 2001 From: Priyansh Prajapat Date: Mon, 9 Oct 2023 18:19:07 +0530 Subject: [PATCH 6/6] merge css --- css/style.css | 266 ++++++++++++++++++++++++++++++++++++++++++++++++++ style.css | 162 ------------------------------ 2 files changed, 266 insertions(+), 162 deletions(-) create mode 100644 css/style.css delete mode 100644 style.css 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/style.css b/style.css deleted file mode 100644 index 78aa82a..0000000 --- a/style.css +++ /dev/null @@ -1,162 +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; -} -img:hover { - box-shadow: 0 0 5px 5px #cd5c08; -} -.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); -}