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 @@