Spaces:
Sleeping
Sleeping
| @import url('https://fonts.googleapis.com/css2?family=Hind+Madurai&family=Poppins:wght@200&display=swap'); | |
| :root{ | |
| --primary: white; | |
| --secondary: black; | |
| --bg : url("img/dbg.jpg"); | |
| --con: rgb(243, 21, 21); | |
| --lbg: url("img/lbg.jpg"); | |
| --icons: white; | |
| --i-hover: red; | |
| --border: 4px solid red; | |
| --btn-color: red; | |
| --menu: white; | |
| } | |
| *{ | |
| padding: 0; | |
| margin: 0; | |
| } | |
| body{ | |
| min-height: 110vh; | |
| background: var(--bg); | |
| background-attachment: fixed; | |
| background-repeat: no-repeat; | |
| background-size: 100%; | |
| -webkit-background-size: 100%; | |
| -moz-background-size: 100%; | |
| -o-background-size: 100%; | |
| } | |
| .dmode{ | |
| --primary: black; | |
| --secondary: #fff; | |
| --bg: url("img/lbg.jpg"); | |
| --icons: #c4c4c4; | |
| --i-hover: #4facfe; | |
| --menu:#4facfe; | |
| --con: linear-gradient(to top, #00f2fe, #4facfe); | |
| --border: 4px solid #00f2fe; | |
| --btn-color: linear-gradient(to right, #4facfe 0%, #00f2fe 140%); | |
| } | |
| .main{ | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .container{ | |
| background-color: var(--secondary); | |
| width: 390px; | |
| height: 500px; | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| margin-top: 50px; | |
| transform: translate(-50%, -50%); | |
| border-radius: 5px; | |
| } | |
| .top{ | |
| width: 390px; | |
| height: 270px; | |
| background: var(--con); | |
| clip-path: circle(400px at 50% -48.5%); | |
| border-radius: 5px; | |
| } | |
| .k-wrap{ | |
| position: relative; | |
| display: inline-block; | |
| margin-top: 2px; | |
| margin-left: 2px; | |
| } | |
| .menu{ | |
| left: 20px; | |
| top: 20px; | |
| width:40px; | |
| height:30px; | |
| position: relative; | |
| cursor: pointer; | |
| background: transparent; | |
| } | |
| .menu > div{ | |
| position: absolute; | |
| height:3px; | |
| background: var(--secondary); | |
| border-radius: 5px; | |
| transition: width 0.1s ease; | |
| } | |
| .menu-li{ | |
| display: none; | |
| position: absolute; | |
| background-color: var(--secondary); | |
| min-width: 120px; | |
| margin-top: 10px; | |
| margin-left: 20px; | |
| overflow: auto; | |
| box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); | |
| z-index: 1; | |
| border-radius: 5px; | |
| } | |
| .menu-li a{ | |
| color: var(--menu); | |
| padding: 12px 16px; | |
| text-decoration: none; | |
| display: block; | |
| font-family: 'Hind Madurai', sans-serif;; | |
| } | |
| .show {display: block;} | |
| .a{ | |
| width: 23px; | |
| } | |
| .b{ | |
| width: 16px; | |
| top: 8px; | |
| } | |
| .c{ | |
| width: 23px; | |
| top: 16px; | |
| } | |
| .menu:hover div{ | |
| width: 25px; | |
| transition: width 0.5s ease; | |
| } | |
| .email{ | |
| position: absolute; | |
| font-size: 23px; | |
| top: 22px; | |
| right: 20px; | |
| } | |
| .email i{ | |
| color: var(--secondary); | |
| } | |
| .logo{ | |
| position: absolute; | |
| width: 110px; | |
| height: 110px; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -160%); | |
| border-radius: 50%; | |
| border: var(--border); | |
| } | |
| .logo img{ | |
| width: 110px; | |
| height: 110px; | |
| border-radius: 50%; | |
| } | |
| .name{ | |
| font-family: 'Hind Madurai', sans-serif;; | |
| text-align: center; | |
| color: white; | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| margin-top: 10px; | |
| transform: translate(-50%, -150%); | |
| } | |
| .bottom{ | |
| padding: 20px; | |
| } | |
| .details{ | |
| display: block; | |
| font-family: 'Hind Madurai', sans-serif;; | |
| width: 50px; | |
| height: 50px; | |
| color: var(--primary); | |
| margin-left: 15px; | |
| } | |
| hr{ | |
| width: 35px; | |
| border: 2px solid var(--primary); | |
| border-radius: 2px; | |
| } | |
| .info { | |
| font-size: 15px; | |
| font-family: 'Hind Madurai', sans-serif;; | |
| } | |
| .social { | |
| margin-left: 15px; | |
| margin-top: 50px; | |
| font-size: x-large; | |
| text-decoration: none; | |
| } | |
| .social a i{ | |
| color: var(--icons); | |
| margin-right: 10px; | |
| } | |
| .social a i:hover{ | |
| color: var(--i-hover); | |
| } | |
| .btns{ | |
| display: flex; | |
| margin-top: 15px; | |
| margin-left: 15px; | |
| width: 185px; | |
| height: 50px; | |
| } | |
| .btn1{ | |
| display: flex; | |
| height: 35px; | |
| width: 90px; | |
| background: var(--btn-color); | |
| border-radius: 20px; | |
| text-align: center; | |
| border: none; | |
| margin-right: 5px; | |
| } | |
| .follow, .more{ | |
| font-size: smaller; | |
| text-decoration: none; | |
| margin: auto; | |
| font-family: 'Hind Madurai', sans-serif;; | |
| } | |
| .follow{ | |
| color: var(--secondary); | |
| } | |
| .btn1:hover{ | |
| width: 120px; | |
| } | |
| .btn2{ | |
| display: flex; | |
| height: 33px; | |
| width: 90px; | |
| background-color: transparent; | |
| border-radius: 20px; | |
| border: 2px solid var(--i-hover); | |
| text-align: center; | |
| right:0; | |
| top: 0; | |
| } | |
| .more{ | |
| color: var(--i-hover); | |
| } | |
| .btn2:hover{ | |
| width: 120px; | |
| } | |
| /* From here toggle codes taken from Jason Tyler project | |
| Thanks to Jason Tyler | |
| */ | |
| .wrapper { | |
| position: absolute; | |
| left: 0; | |
| top: 5px; | |
| margin-left: -90px; | |
| transform: scale(.6); | |
| margin-bottom: 10px; | |
| } | |
| .toggle { | |
| position: relative; | |
| display: inline-block; | |
| width: 100px; | |
| margin-left: 100px; | |
| padding: 4px; | |
| border-radius: 40px; | |
| } | |
| .toggle:before, .toggle:after { | |
| content: ''; | |
| display: table; | |
| } | |
| .toggle:after { | |
| clear: both; | |
| } | |
| .toggle-bg { | |
| position: absolute; | |
| top: -4px; | |
| left: -4px; | |
| width: 100%; | |
| height: 100%; | |
| background-color: #c0e6f6; | |
| border-radius: 40px; | |
| border: 4px solid #81c0d5; | |
| transition: all 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94); | |
| } | |
| .toggle-input { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| border: 1px solid red; | |
| border-radius: 40px; | |
| z-index: 2; | |
| opacity: 0; | |
| } | |
| .toggle-switch { | |
| top: 2px; | |
| left: 4px; | |
| position: relative; | |
| width: 40px; | |
| height: 40px; | |
| margin-left: 50px; | |
| background-color: #f5eb42; | |
| border: 4px solid #e4c74d; | |
| border-radius: 50%; | |
| transition: all 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94); | |
| transform: translate(-4px,-4px); | |
| } | |
| .toggle-switch-figure { | |
| position: absolute; | |
| bottom: -14px; | |
| left: -50px; | |
| display: block; | |
| width: 80px; | |
| height: 30px; | |
| border: 8px solid #d4d4d2; | |
| border-radius: 20px; | |
| background-color: #fff; | |
| transform: scale(0.4); | |
| transition: all 0.12s cubic-bezier(0.25, 0.46, 0.45, 0.94); | |
| } | |
| .toggle-switch-figure:after { | |
| content: ''; | |
| display: block; | |
| position: relative; | |
| top: -65px; | |
| right: -42px; | |
| width: 15px; | |
| height: 15px; | |
| border: 8px solid #d4d4d2; | |
| border-radius: 100%; | |
| border-right-color: transparent; | |
| border-bottom-color: transparent; | |
| transform: rotateZ(70deg); | |
| background-color: #fff; | |
| } | |
| .toggle-switch-figure:before { | |
| content: ''; | |
| display: block; | |
| position: relative; | |
| top: -25px; | |
| right: -10px; | |
| width: 30px; | |
| height: 30px; | |
| border: 8px solid #d4d4d2; | |
| border-radius: 100%; | |
| border-right-color: transparent; | |
| border-bottom-color: transparent; | |
| transform: rotateZ(30deg); | |
| background-color: #fff; | |
| } | |
| .toggle-switch-figureAlt { | |
| content: ''; | |
| position: absolute; | |
| top: 5px; | |
| left: 2px; | |
| width: 2px; | |
| height: 2px; | |
| background-color: #efeeda; | |
| border-radius: 100%; | |
| border: 4px solid #dee1c5; | |
| box-shadow: 42px -7px 0 -3px #fcfcfc, 75px -10px 0 -3px #fcfcfc, 54px 4px 0 -4px #fcfcfc, 83px 7px 0 -2px #fcfcfc, 63px 18px 0 -4px #fcfcfc, 44px 28px 0 -2px #fcfcfc, 78px 23px 0 -3px #fcfcfc; | |
| transition: all 0.12s cubic-bezier(0.25, 0.46, 0.45, 0.94); | |
| transform: scale(0); | |
| } | |
| .toggle-switch-figureAlt:before { | |
| content: ''; | |
| position: absolute; | |
| top: -6px; | |
| left: 18px; | |
| width: 7px; | |
| height: 7px; | |
| background-color: #efeeda; | |
| border-radius: 100%; | |
| border: 4px solid #dee1c5; | |
| } | |
| .toggle-switch-figureAlt:after { | |
| content: ''; | |
| position: absolute; | |
| top: 19px; | |
| left: 15px; | |
| width: 2px; | |
| height: 2px; | |
| background-color: #efeeda; | |
| border-radius: 100%; | |
| border: 4px solid #dee1c5; | |
| } | |
| .toggle-input:checked ~ .toggle-switch { | |
| margin-left: 0; | |
| border-color: #dee1c5; | |
| background-color: #fffdf2; | |
| } | |
| .toggle-input:checked ~ .toggle-bg { | |
| background-color: #484848; | |
| border-color: #202020; | |
| } | |
| .toggle-input:checked ~ .toggle-switch .toggle-switch-figure { | |
| margin-left: 40px; | |
| opacity: 0; | |
| transform: scale(0.1); | |
| } | |
| .toggle-input:checked ~ .toggle-switch .toggle-switch-figureAlt { | |
| transform: scale(1); | |
| } | |
| @media only screen and (max-width: 600px){ | |
| .container,.top{ | |
| width: 320px; | |
| } | |
| .menu{ | |
| height: 40px; | |
| } | |
| .btns{ | |
| width: 100%; | |
| } | |
| .btn1 { | |
| width: 120px; | |
| } | |
| .btn2 { | |
| width: 120px; | |
| } | |
| } | |