├── Animated Login Form ├── css │ └── style.css ├── img │ ├── avatar.svg │ └── log2.jpg ├── index.html └── js │ └── script.js ├── CSS Button - 1 ├── index.html └── style.css ├── Feedback form ├── CSS │ └── style.css ├── README.md └── index.html ├── Login-form ├── CSS │ └── style.css ├── README.md ├── img │ ├── icons8-google.svg │ ├── image 2.png │ ├── image 3.png │ └── image 4.png └── index.html ├── Loki series intro ├── README.md ├── index.html └── style.css ├── Pricing-card ├── README.md ├── index.html └── style.css ├── Solar-eclipse ├── README.md ├── index.html └── style.css ├── The Linker ├── CSS │ └── style.css ├── favicon.png ├── index.html └── profile-pic.png └── survey-card-UI ├── README.md ├── index.html └── style.css /Animated Login Form/css/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | font-family: "Poppins", sans-serif; 9 | overflow: hidden; 10 | } 11 | 12 | .wave { 13 | position: fixed; 14 | bottom: 0; 15 | left: 0; 16 | height: 100%; 17 | z-index: -1; 18 | } 19 | 20 | .container { 21 | width: 100vw; 22 | height: 100vh; 23 | display: grid; 24 | grid-template-columns: repeat(2, 1fr); 25 | grid-gap: 7rem; 26 | padding: 0 2rem; 27 | } 28 | 29 | .img { 30 | display: flex; 31 | justify-content: flex-end; 32 | align-items: center; 33 | } 34 | 35 | .login-content { 36 | display: flex; 37 | justify-content: flex-start; 38 | align-items: center; 39 | text-align: center; 40 | } 41 | 42 | .img img { 43 | width: 500px; 44 | } 45 | 46 | form { 47 | width: 360px; 48 | } 49 | 50 | .login-content img { 51 | height: 100px; 52 | } 53 | 54 | .login-content h2 { 55 | margin: 15px 0; 56 | color: #333; 57 | text-transform: uppercase; 58 | font-size: 2rem; 59 | } 60 | 61 | .login-content .input-div { 62 | position: relative; 63 | display: grid; 64 | grid-template-columns: 7% 93%; 65 | margin: 25px 0; 66 | padding: 5px 0; 67 | border-bottom: 2px solid #d9d9d9; 68 | } 69 | 70 | .login-content .input-div .one { 71 | margin-top: 0; 72 | } 73 | 74 | .i { 75 | color: #d9d9d9; 76 | display: flex; 77 | justify-content: center; 78 | align-items: center; 79 | } 80 | 81 | .i { 82 | transition: 0.3s; 83 | } 84 | 85 | .input-div > div { 86 | position: relative; 87 | height: 45px; 88 | } 89 | 90 | .input-div > div > h5 { 91 | position: absolute; 92 | left: 10px; 93 | top: 50%; 94 | transform: translateY(-50%); 95 | color: #999; 96 | font-size: 18px; 97 | transition: 0.3s; 98 | } 99 | 100 | .input-div:before, 101 | .input-div:after { 102 | content: ""; 103 | position: absolute; 104 | bottom: -2px; 105 | width: 0%; 106 | height: 2px; 107 | background-color: #38d39f; 108 | transition: 0.4s; 109 | } 110 | 111 | .input-div:before { 112 | right: 50%; 113 | } 114 | 115 | .input-div:after { 116 | left: 50%; 117 | } 118 | 119 | .input-div.focus:before, 120 | .input-div.focus:after { 121 | width: 50%; 122 | } 123 | 124 | .input-div.focus > div > h5 { 125 | top: -5px; 126 | font-size: 15px; 127 | } 128 | 129 | .input-div.focus > .i > i { 130 | color: #38d39f; 131 | } 132 | 133 | .input-div > div > input { 134 | position: absolute; 135 | left: 0; 136 | top: 0; 137 | width: 100%; 138 | height: 100%; 139 | border: none; 140 | outline: none; 141 | background: none; 142 | padding: 0.5rem 0.7rem; 143 | font-size: 1.2rem; 144 | color: #555; 145 | font-family: "poppins", sans-serif; 146 | } 147 | 148 | .input-div.pass { 149 | margin-bottom: 4px; 150 | } 151 | 152 | a { 153 | display: block; 154 | text-align: right; 155 | text-decoration: none; 156 | color: #999; 157 | font-size: 0.9rem; 158 | transition: 0.3s; 159 | } 160 | 161 | a:hover { 162 | color: #38d39f; 163 | } 164 | 165 | .btn { 166 | display: block; 167 | width: 100%; 168 | height: 50px; 169 | border-radius: 25px; 170 | outline: none; 171 | border: none; 172 | background-image: linear-gradient(to right, #e74c3c, #9b59b6, #32be8f); 173 | background-size: 200%; 174 | font-size: 1.2rem; 175 | color: #fff; 176 | font-family: "Poppins", sans-serif; 177 | text-transform: uppercase; 178 | margin: 1rem 0; 179 | cursor: pointer; 180 | transition: 0.5s; 181 | } 182 | .btn:hover { 183 | background-position: right; 184 | } 185 | 186 | @media screen and (max-width: 1050px) { 187 | .container { 188 | grid-gap: 5rem; 189 | } 190 | } 191 | 192 | @media screen and (max-width: 1000px) { 193 | form { 194 | width: 290px; 195 | } 196 | 197 | .login-content h2 { 198 | font-size: 2.4rem; 199 | margin: 8px 0; 200 | } 201 | 202 | .img img { 203 | width: 400px; 204 | } 205 | } 206 | 207 | @media screen and (max-width: 900px) { 208 | .container { 209 | grid-template-columns: 1fr; 210 | } 211 | 212 | .img { 213 | display: none; 214 | } 215 | 216 | .wave { 217 | display: none; 218 | } 219 | 220 | .login-content { 221 | justify-content: center; 222 | } 223 | } 224 | -------------------------------------------------------------------------------- /Animated Login Form/img/avatar.svg: -------------------------------------------------------------------------------- 1 | profile pic -------------------------------------------------------------------------------- /Animated Login Form/img/log2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/charukirti/HTML-and-CSS-mini-projects/e6ea71240bb8249de013ef95de87fc0834d888b1/Animated Login Form/img/log2.jpg -------------------------------------------------------------------------------- /Animated Login Form/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Animated Login Form 5 | 6 | 10 | 11 | 12 | 13 | 14 |
15 |
16 | 17 |
18 |
19 |
20 | 21 |

Welcome Back

22 |
23 |
24 | 25 |
26 |
27 |
Username
28 | 29 |
30 |
31 |
32 |
33 | 34 |
35 |
36 |
Password
37 | 38 |
39 |
40 | Forgot Password? 41 | 42 |
43 |
44 |
45 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /Animated Login Form/js/script.js: -------------------------------------------------------------------------------- 1 | const inputs = document.querySelectorAll(".input"); 2 | 3 | function addcl() { 4 | let parent = this.parentNode.parentNode; 5 | parent.classList.add("focus"); 6 | } 7 | 8 | function remcl() { 9 | let parent = this.parentNode.parentNode; 10 | if (this.value == "") { 11 | parent.classList.remove("focus"); 12 | } 13 | } 14 | 15 | inputs.forEach((input) => { 16 | input.addEventListener("focus", addcl); 17 | input.addEventListener("blur", remcl); 18 | }); 19 | -------------------------------------------------------------------------------- /CSS Button - 1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 15 | 16 | Document 17 | 18 | 19 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /CSS Button - 1/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | display: flex; 3 | align-items: center; 4 | justify-content: center; 5 | height: 100vh; 6 | font-family: "Oswald", sans-serif; 7 | } 8 | 9 | 10 | .flip { 11 | background-color: transparent; 12 | width: 11rem; 13 | height: 3rem; 14 | line-height: 3rem; 15 | perspective: 31rem; 16 | border: none; 17 | } 18 | 19 | .inner-content { 20 | position: relative; 21 | width: 100%; 22 | height: 100%; 23 | text-align: center; 24 | transition: transform 1s; 25 | transform-style: preserve-3d; 26 | pointer-events: none; 27 | font-size: 1.1rem; 28 | font-weight: 500; 29 | color: #fff; 30 | } 31 | 32 | .flip:hover .inner-content { 33 | transform: rotateX(180deg); 34 | } 35 | 36 | .front, 37 | .back { 38 | position: absolute; 39 | width: 100%; 40 | height: 100%; 41 | backface-visibility: hidden; 42 | border-radius: 1.2rem; 43 | } 44 | 45 | .front { 46 | background: #0077ff; 47 | } 48 | 49 | .back { 50 | background: #005fcc; 51 | transform: rotateX(180deg); 52 | } 53 | -------------------------------------------------------------------------------- /Feedback form/CSS/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | display: flex; 9 | align-items: center; 10 | min-height: 100vh; 11 | font-family: "Poppins", sans-serif; 12 | background: #e5e5e5; 13 | } 14 | 15 | h2 { 16 | font-size: 2rem; 17 | font-weight: 900; 18 | font-family: "Merriweather", serif; 19 | margin-bottom: 1rem; 20 | } 21 | 22 | p { 23 | font-size: 1rem; 24 | font-weight: 400; 25 | margin-bottom: 1rem; 26 | } 27 | 28 | a { 29 | color: #000000; 30 | } 31 | 32 | button { 33 | padding: 1rem 3rem; 34 | border: none; 35 | background: #000; 36 | color: #fff; 37 | outline: none; 38 | font-size: 1rem; 39 | } 40 | 41 | .container { 42 | margin: 0 auto; 43 | display: flex; 44 | flex-direction: column; 45 | padding: 3.5rem; 46 | width: 32rem; 47 | box-shadow: 6px 8px 0px #000000; 48 | background: #ffff; 49 | } 50 | 51 | .checkbox-group { 52 | display: flex; 53 | flex-direction: column; 54 | align-items: center; 55 | margin-bottom: 1rem; 56 | } 57 | 58 | textarea { 59 | outline: none; 60 | border: 1px solid #bababa; 61 | padding: 10px; 62 | } 63 | 64 | .checkbox-group > div { 65 | margin-top: 1rem; 66 | display: flex; 67 | flex-direction: row; 68 | align-items: center; 69 | } 70 | 71 | .checkbox-group label { 72 | font-size: 1rem; 73 | font-weight: 400; 74 | } 75 | 76 | .checkbox-group input[type="checkbox"] { 77 | width: 1rem; 78 | height: 1rem; 79 | border-radius: 0.15em; 80 | transform: translateY(-0.075em); 81 | } 82 | -------------------------------------------------------------------------------- /Feedback form/README.md: -------------------------------------------------------------------------------- 1 | # Created this feedback form using HTML and CSS. 2 | ## Output 3 | ![feedback](https://user-images.githubusercontent.com/108792404/226115813-bfb13b7c-1ade-4807-a034-2a18c8716512.png) 4 | -------------------------------------------------------------------------------- /Feedback form/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 15 | 16 | HTML CSS Mini Projects | Feedback form 17 | 18 | 19 |
20 |
21 |

Give feedback

22 |

Your thoughts are valuable in helping improve our products.

23 |
24 |
25 | 32 |
33 |
34 |
35 | 42 |
43 | 44 |
45 | 51 |
52 |
53 | 54 | 55 |
56 | 57 | 58 | -------------------------------------------------------------------------------- /Login-form/CSS/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | font-family: "Poppins", sans-serif; 6 | } 7 | 8 | :root { 9 | --primary-color: #171645; 10 | --background-color: #9fedb5; 11 | --secondary-color: #f8f8fb; 12 | --text-color: #ffff; 13 | } 14 | 15 | body { 16 | display: flex; 17 | justify-content: center; 18 | align-items: center; 19 | height: 95vh; 20 | } 21 | 22 | main { 23 | display: flex; 24 | flex-direction: column; 25 | align-items: center; 26 | padding: 45px; 27 | gap: 16px; 28 | background: #9fedb5; 29 | box-shadow: 0px 0px 73px rgba(23, 22, 69, 0.8); 30 | border-radius: 12px; 31 | } 32 | 33 | h2 { 34 | font-family: "Poppins"; 35 | font-style: normal; 36 | font-weight: 700; 37 | font-size: 1.6rem; 38 | line-height: 54px; 39 | color: var(--primary-color); 40 | } 41 | 42 | .form-container form { 43 | display: flex; 44 | flex-direction: column; 45 | align-items: flex-start; 46 | padding: 0px; 47 | gap: 12px; 48 | } 49 | 50 | .form-container form > input { 51 | width: 20rem; 52 | padding: 4%; 53 | border: 1px solid #dadaf2; 54 | border-radius: 4px; 55 | outline: none; 56 | font-weight: 500; 57 | font-size: 1.1rem; 58 | line-height: 27px; 59 | } 60 | 61 | .form-container form > input::placeholder { 62 | color: var(--primary-color); 63 | opacity: 0.6; 64 | } 65 | .form-container form > button { 66 | width: 20rem; 67 | padding: 4%; 68 | border: none; 69 | border-radius: 4px; 70 | background-color: var(--primary-color); 71 | color: var(--text-color); 72 | font-weight: 500; 73 | font-size: 1.13rem; 74 | line-height: 27px; 75 | } 76 | 77 | h3 { 78 | font-weight: 500; 79 | font-size: 18px; 80 | line-height: 27px; 81 | color: #171645; 82 | opacity: 0.5; 83 | } 84 | 85 | .other-options { 86 | display: flex; 87 | flex-direction: column; 88 | align-items: flex-start; 89 | padding: 0px; 90 | gap: 12px; 91 | } 92 | 93 | .other-options > button { 94 | display: flex; 95 | flex-direction: row; 96 | justify-content: center; 97 | align-items: center; 98 | width: 20rem; 99 | padding: 4%; 100 | gap: 10px; 101 | border: none; 102 | border-radius: 4px; 103 | color: var(--primary-color); 104 | font-weight: 500; 105 | font-size: 1rem; 106 | line-height: 27px; 107 | background: var(--secondary-color); 108 | } 109 | 110 | p { 111 | font-size: 1rem; 112 | font-weight: 500; 113 | line-height: 27px; 114 | color: var(--primary-color); 115 | } 116 | -------------------------------------------------------------------------------- /Login-form/README.md: -------------------------------------------------------------------------------- 1 | # Log In form using HTML and CSS 2 | ## This log in form created by using HTML and CSS 3 | # Output 4 | ![Login form](https://user-images.githubusercontent.com/108792404/222901331-48fa9606-70b5-4c14-9666-89aa256a1026.png) 5 | -------------------------------------------------------------------------------- /Login-form/img/icons8-google.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Login-form/img/image 2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/charukirti/HTML-and-CSS-mini-projects/e6ea71240bb8249de013ef95de87fc0834d888b1/Login-form/img/image 2.png -------------------------------------------------------------------------------- /Login-form/img/image 3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/charukirti/HTML-and-CSS-mini-projects/e6ea71240bb8249de013ef95de87fc0834d888b1/Login-form/img/image 3.png -------------------------------------------------------------------------------- /Login-form/img/image 4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/charukirti/HTML-and-CSS-mini-projects/e6ea71240bb8249de013ef95de87fc0834d888b1/Login-form/img/image 4.png -------------------------------------------------------------------------------- /Login-form/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | HTML-CSS-Mini-Projects | Log In form 8 | 9 | 10 | 11 | 15 | 16 | 17 | 18 | 19 |
20 |

Log In

21 |
22 |
23 | 24 | 25 | 26 |
27 |
28 |

Or

29 |
30 | 33 | 36 | 39 |
40 |

Can’t log in? ・Already have an account?

41 |
42 | 43 | 44 | -------------------------------------------------------------------------------- /Loki series intro/README.md: -------------------------------------------------------------------------------- 1 | # Loki Series Intro animation by using HTML and CSS 2 | --- 3 | # output 👇 4 | [Live Preview](https://user-images.githubusercontent.com/108792404/225228357-aecf5a07-c96b-4e78-b262-6f24715f2d93.webm) 5 | 6 | -------------------------------------------------------------------------------- /Loki series intro/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 15 | 16 | Loki Intro 17 | 18 | 19 |
20 |
21 | L 22 | O 23 | K 24 | I 25 |
26 |
27 | 28 | 29 | -------------------------------------------------------------------------------- /Loki series intro/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | .container { 8 | color: #ffffffda; 9 | display: grid; 10 | place-content: center; 11 | height: 100vh; 12 | width: 100vw; 13 | background-color: #2d3436; 14 | } 15 | 16 | .text-container { 17 | display: flex; 18 | align-items: center; 19 | justify-content: center; 20 | gap: 4rem; 21 | width: 30rem; 22 | font-size: 5rem; 23 | font-family: "Poppins", sans-serif; 24 | font-weight: 400; 25 | transition: 0.3s all ease; 26 | } 27 | 28 | /* Animating each letter*/ 29 | 30 | .letter-L { 31 | animation: l 5s infinite; 32 | } 33 | 34 | .letter-O { 35 | animation: o 5s infinite; 36 | } 37 | 38 | .letter-K { 39 | animation: k 5s infinite; 40 | } 41 | 42 | .letter-I { 43 | animation: i 5s infinite; 44 | } 45 | 46 | @keyframes l { 47 | 10% { 48 | font-family: "Kumar One", cursive; 49 | } 50 | 20% { 51 | font-family: "Nabla", cursive; 52 | } 53 | 54 | 30% { 55 | font-family: "Noto Sans Bassa Vah", sans-serif; 56 | } 57 | 58 | 40% { 59 | font-family: "Press Start 2P", cursive; 60 | } 61 | 62 | 50% { 63 | font-family: "Henny Penny", cursive; 64 | } 65 | 66 | 60% { 67 | font-family: "Shantell Sans", cursive; 68 | } 69 | 70 | 70% { 71 | font-family: "Single Day", cursive; 72 | } 73 | 74 | 80% { 75 | font-family: "Rubik Iso", cursive; 76 | } 77 | 78 | 90% { 79 | font-family: "Amatic SC", cursive; 80 | } 81 | 82 | 100% { 83 | font-family: "Noto Sans Meroitic", sans-serif; 84 | } 85 | } 86 | 87 | @keyframes o { 88 | 10% { 89 | font-family: "Henny Penny", cursive; 90 | } 91 | 92 | 20% { 93 | font-family: "Shantell Sans", cursive; 94 | } 95 | 96 | 30% { 97 | font-family: "Noto Sans Meroitic", sans-serif; 98 | } 99 | 100 | 40% { 101 | font-family: "Amatic SC", cursive; 102 | } 103 | 104 | 50% { 105 | font-family: "Single Day", cursive; 106 | } 107 | 108 | 60% { 109 | font-family: "Nabla", cursive; 110 | } 111 | 112 | 70% { 113 | font-family: "Noto Sans Cuneiform", sans-serif; 114 | } 115 | 116 | 80% { 117 | font-family: "Press Start 2P", cursive; 118 | } 119 | 120 | 90% { 121 | font-family: "Rubik Iso", cursive; 122 | } 123 | 124 | 100% { 125 | font-family: "Kirang Haerang", cursive; 126 | } 127 | } 128 | 129 | @keyframes k { 130 | 10% { 131 | font-family: "Shantell Sans", cursive; 132 | } 133 | 134 | 20% { 135 | font-family: "Kirang Haerang", cursive; 136 | } 137 | 138 | 30% { 139 | font-family: "Henny Penny", cursive; 140 | } 141 | 142 | 40% { 143 | font-family: "Noto Sans Meroitic", sans-serif; 144 | } 145 | 146 | 50% { 147 | font-family: "Amatic SC", cursive; 148 | } 149 | 150 | 60% { 151 | font-family: "Single Day", cursive; 152 | } 153 | 154 | 70% { 155 | font-family: "Nabla", cursive; 156 | } 157 | 158 | 80% { 159 | font-family: "Noto Sans Cuneiform", sans-serif; 160 | } 161 | 162 | 90% { 163 | font-family: "Press Start 2P", cursive; 164 | } 165 | 166 | 100% { 167 | font-family: "Rubik Iso", cursive; 168 | } 169 | } 170 | 171 | @keyframes i { 172 | 10% { 173 | font-family: "Rubik Iso", cursive; 174 | } 175 | 176 | 20% { 177 | font-family: "Press Start 2P", cursive; 178 | } 179 | 180 | 30% { 181 | font-family: "Noto Sans Cuneiform", sans-serif; 182 | } 183 | 184 | 40% { 185 | font-family: "Nabla", cursive; 186 | } 187 | 188 | 50% { 189 | font-family: "Single Day", cursive; 190 | } 191 | 192 | 60% { 193 | font-family: "Amatic SC", cursive; 194 | } 195 | 196 | 70% { 197 | font-family: "Noto Sans Meroitic", sans-serif; 198 | } 199 | 200 | 80% { 201 | font-family: "Henny Penny", cursive; 202 | } 203 | 204 | 90% { 205 | font-family: "Kirang Haerang", cursive; 206 | } 207 | 208 | 100% { 209 | font-family: "Shantell Sans", cursive; 210 | } 211 | } 212 | -------------------------------------------------------------------------------- /Pricing-card/README.md: -------------------------------------------------------------------------------- 1 | # Pricing Card 2 | ## This pricing card is created by using HTML and CSS 3 | # Output 4 | ![pricing card](https://user-images.githubusercontent.com/108792404/222901404-be95b3f4-934c-42d9-9d8b-76ff9b0ad017.png) 5 | -------------------------------------------------------------------------------- /Pricing-card/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 15 | 16 | 17 | 18 | Document 19 | 20 | 21 |
22 |
23 | 24 |
25 |

Try Free for 4 weeks

26 |

We uncover the facts around the clock, all over the globe.

27 |
28 | 29 | 30 |
31 |
32 | 36 | 37 |
38 |

Monthly

39 |

4 weeks for free

40 |

Then $3 every month for the first year

41 |
42 |
43 | 44 |
45 | 49 | 50 |
51 |

Best value

52 |

Yearly

53 |

8 weeks for free

54 |

Then $30 for the first year

55 |
56 |
57 |
58 | 59 |
60 | 61 | 64 | View more offers 65 |
66 |
67 |
68 | 69 | 70 | -------------------------------------------------------------------------------- /Pricing-card/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | :root { 8 | --main-font: "Poppins", sans-serif; 9 | --header-font: "Merriweather", serif; 10 | --body-background: rgb(233, 235, 248); 11 | --text-color: rgb(12, 16, 51); 12 | --link-color: rgb(47, 66, 238); 13 | --card-bg: rgb(255, 255, 255); 14 | --card-border-active: 2px solid rgb(47, 66, 238); 15 | --card-border: 7px solid rgb(233, 235, 248); 16 | } 17 | 18 | /* centring container */ 19 | 20 | .container { 21 | display: flex; 22 | justify-content: center; 23 | align-items: center; 24 | height: 100vh; 25 | background-color: var(--body-background); 26 | } 27 | 28 | main { 29 | display: flex; 30 | flex-direction: column; 31 | align-items: center; 32 | box-shadow: 0px 34px 44px rgba(0, 11, 115, 0.1); 33 | border-radius: 32px; 34 | padding: 2rem; 35 | gap: 35px; 36 | width: 30rem; 37 | background-color: var(--card-bg); 38 | } 39 | 40 | /* styling card header */ 41 | 42 | .header { 43 | text-align: center; 44 | width: 30rem; 45 | } 46 | 47 | .header > h2 { 48 | font-size: 2rem; 49 | font-weight: 900; 50 | font-family: var(--header-font); 51 | margin-bottom: 10px; 52 | } 53 | 54 | .header > p { 55 | font-size: 1rem; 56 | font-weight: 500; 57 | line-height: 27px; 58 | font-family: var(--main-font); 59 | color: var(--text-color); 60 | padding: 0 6rem 0 6rem; 61 | } 62 | 63 | /* styling cards */ 64 | 65 | .cards { 66 | display: flex; 67 | flex-direction: column; 68 | padding: 0px; 69 | gap: 16px; 70 | } 71 | 72 | .plans-card { 73 | display: flex; 74 | flex-direction: row; 75 | align-items: center; 76 | padding: 15px; 77 | gap: 24px; 78 | background-color: var(--card-bg); 79 | border: var(--card-border); 80 | border-radius: 8px; 81 | cursor: pointer; 82 | transition: 0.5ms linear; 83 | } 84 | 85 | /* Styling card content */ 86 | 87 | .card-content { 88 | display: flex; 89 | flex-direction: column; 90 | align-items: flex-start; 91 | padding: 0px; 92 | gap: 5px; 93 | } 94 | 95 | .bg { 96 | padding: 4px 16px; 97 | background-color: var(--link-color); 98 | border-radius: 1.3rem; 99 | color: var(--card-bg); 100 | } 101 | 102 | .card-content p { 103 | font-size: 1rem; 104 | font-weight: 500; 105 | font-family: var(--main-font); 106 | } 107 | 108 | .duration { 109 | text-transform: uppercase; 110 | } 111 | 112 | .card-content h3 { 113 | font-size: 1.5rem; 114 | font-weight: 500; 115 | font-family: var(--main-font); 116 | } 117 | 118 | /* adding hover effect to the card */ 119 | 120 | .plans-card:hover { 121 | border: var(--card-border-active); 122 | } 123 | 124 | /* styling checkboxes */ 125 | 126 | .label { 127 | display: block; 128 | position: relative; 129 | } 130 | 131 | .check { 132 | appearance: none; 133 | border-radius: 50px; 134 | border: 1px solid #808080; 135 | cursor: pointer; 136 | display: flex; 137 | flex-direction: column; 138 | align-items: center; 139 | justify-content: center; 140 | height: 25px; 141 | outline: none; 142 | width: 25px; 143 | } 144 | .check:checked { 145 | background-color: var(--text-color); 146 | border-color: var(--text-color); 147 | } 148 | 149 | .checkicon { 150 | border: solid #fff; 151 | border-width: 0 0 4px 4px; 152 | cursor: pointer; 153 | display: block; 154 | left: 7px; 155 | position: absolute; 156 | transform: rotate(-45deg); 157 | top: 7px; 158 | width: 13px; 159 | height: 7px; 160 | } 161 | 162 | /* styling buttons */ 163 | 164 | .btn-container { 165 | display: flex; 166 | flex-direction: column; 167 | align-items: center; 168 | padding: 0px; 169 | gap: 20px; 170 | } 171 | 172 | button { 173 | padding: 10px; 174 | width: 21rem; 175 | height: 4rem; 176 | color: var(--card-bg); 177 | font-size: 1rem; 178 | font-family: var(--main-font); 179 | font-weight: 500; 180 | text-align: center; 181 | border-radius: 45px; 182 | border: none; 183 | cursor: pointer; 184 | } 185 | 186 | .continue-btn { 187 | background-color: #0c1033; 188 | } 189 | 190 | .continue-btn:hover { 191 | background-color: #0c1033c7; 192 | } 193 | .paypal-btn { 194 | display: flex; 195 | flex-direction: row; 196 | align-items: center; 197 | justify-content: center; 198 | gap: 5px; 199 | border: var(--body-background); 200 | color: var(--text-color); 201 | } 202 | 203 | .offer-link { 204 | font-family: var(--main-font); 205 | color: var(--link-color); 206 | font-weight: 500; 207 | font-size: 1rem; 208 | } 209 | -------------------------------------------------------------------------------- /Solar-eclipse/README.md: -------------------------------------------------------------------------------- 1 | # Solar eclipse animation using HTML and CSS 2 | ## Output 3 | ![solar](https://user-images.githubusercontent.com/108792404/227696785-9c59bbeb-6b5e-4a8b-87c6-ff3f22fdc5cf.gif) 4 | -------------------------------------------------------------------------------- /Solar-eclipse/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Solar Eclipse 8 | 9 | 10 | 11 |
12 | 13 | 14 | -------------------------------------------------------------------------------- /Solar-eclipse/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #000; 3 | height: 85vh; 4 | display: grid; 5 | place-items: center; 6 | } 7 | 8 | .circle { 9 | background-color: #e67e22; 10 | height: 200px; 11 | width: 200px; 12 | border-radius: 50%; 13 | position: relative; 14 | box-shadow: 0 0 10px #ff4500, 0 0 40px #ff4500, 0 0 80px #ff4500; 15 | } 16 | 17 | .circle::after { 18 | content: ""; 19 | position: absolute; 20 | height: 200px; 21 | width: 200px; 22 | border-radius: 50%; 23 | background-color: #000; 24 | animation: eclipse 10s ease-in-out infinite; 25 | } 26 | 27 | @keyframes eclipse { 28 | 0% { 29 | transform: translate(-450px, 50px); 30 | scale: (0.9); 31 | box-shadow: none; 32 | } 33 | 34 | 50% { 35 | box-shadow: none; 36 | } 37 | 38 | 65%, 39 | 75% { 40 | transform: translate(0px, 0px); 41 | scale: (1.02); 42 | box-shadow: 0 0 10px #f9f3f2, 0 0 80px 8px #c79388; 43 | } 44 | 45 | 80% { 46 | box-shadow: none; 47 | } 48 | 49 | 100% { 50 | transform: translate(450px, -50px); 51 | scale: (0.9); 52 | box-shadow: none; 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /The Linker/CSS/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | 6 | :root { 7 | --main-font: "Poppins", sans-serif; 8 | --font-size-a: 1.2rem; 9 | --font-size-h2: 1.3rem; 10 | --font-size-p: 1.2rem; 11 | --font-size-i: 2rem; 12 | 13 | /* colors */ 14 | --link-color: rgb(0, 0, 0); 15 | --color-h2: rgb(255, 107, 107); 16 | --color-p: rgb(155, 89, 182); 17 | --link-tile-bg: rgb(245, 246, 250); 18 | 19 | /* icon-colors */ 20 | --icon-twitter: rgb(10, 189, 227); 21 | --icon-instagram: rgb(239, 83, 80); 22 | --icon-github: rgb(45, 52, 54); 23 | --icon-hashnode: rgb(9, 132, 227); 24 | --icon-linkedin: rgb(41, 128, 185); 25 | 26 | /* drop-shadow-color */ 27 | --drop-shadow: rgba(0, 0, 0, 0.2); 28 | } 29 | 30 | body { 31 | display: flex; 32 | align-items: center; 33 | flex-direction: column; 34 | width: 100vw; 35 | font-family: var(--main-font); 36 | } 37 | 38 | a { 39 | text-decoration: none; 40 | color: var(--link-color); 41 | font-size: 1.2rem; 42 | } 43 | 44 | header { 45 | margin-top: 15px; 46 | width: 75%; 47 | max-width: 768px; 48 | display: flex; 49 | flex-direction: column; 50 | align-items: center; 51 | } 52 | 53 | header > img { 54 | width: 25%; 55 | } 56 | 57 | header > h2 { 58 | color: var(--color-h2); 59 | font-size: var(--font-size-h2); 60 | } 61 | 62 | header > p { 63 | color: var(--color-p); 64 | font-size: var(--font-size-p); 65 | text-align: center; 66 | } 67 | 68 | section { 69 | width: 85%; 70 | max-width: 668px; 71 | margin: 10px; 72 | display: flex; 73 | align-items: center; 74 | flex-direction: column; 75 | } 76 | 77 | .link-tile { 78 | width: 100%; 79 | height: 55px; 80 | border-radius: 20px; 81 | background-color: var(--link-tile-bg); 82 | margin: 10px; 83 | display: flex; 84 | justify-content: space-between; 85 | align-items: center; 86 | } 87 | 88 | .icon { 89 | margin: 4px 8px; 90 | font-size: var(--font-size-i); 91 | } 92 | 93 | .link-tile:nth-child(1) i { 94 | color: var(--icon-twitter); 95 | } 96 | 97 | .link-tile:nth-child(2) i { 98 | color: var(--icon-instagram); 99 | } 100 | 101 | .link-tile:nth-child(3) i { 102 | color: var(--icon-github); 103 | } 104 | 105 | .link-tile:nth-child(4) i { 106 | color: var(--icon-hashnode); 107 | } 108 | 109 | .link-tile:nth-child(5) i { 110 | color: var(--icon-linkedin); 111 | } 112 | 113 | .link-tile:hover { 114 | filter: drop-shadow(0px 5px 1px var(--drop-shadow)); 115 | transform: scale(1.05); 116 | } 117 | 118 | .link-tile > * { 119 | transition: all 0.3s ease-in-out; 120 | transition-delay: 0.1s; 121 | } 122 | 123 | .link-tile:hover > * { 124 | transform: scale(1.1); 125 | filter: drop-shadow(0px 5px 1px var(--drop-shadow)); 126 | } 127 | 128 | footer > p { 129 | color: rgb(39, 60, 117); 130 | } 131 | 132 | footer > a { 133 | font-size: 1.2rem; 134 | } 135 | 136 | -------------------------------------------------------------------------------- /The Linker/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/charukirti/HTML-and-CSS-mini-projects/e6ea71240bb8249de013ef95de87fc0834d888b1/The Linker/favicon.png -------------------------------------------------------------------------------- /The Linker/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | The Linker 8 | 9 | 10 | 17 | 18 | 19 | 20 | 24 | 25 | 26 |
27 | 28 |

@Charukirticc

29 |

A passionate frontend developer

30 |
31 | 32 |
33 | 38 |
39 | 40 |
41 | 42 |

Twitter

43 | 44 | 45 | 46 | 47 | 52 |
53 | 54 |
55 | 56 |

Instagram

57 | 58 | 59 | 60 | 61 | 62 |
63 | 64 |
65 | 66 |

GitHub

67 | 68 | 69 | 70 | 71 | 76 |
77 | 78 |
79 | 80 |

Hashnode

81 | 82 | 83 | 84 | 85 | 90 |
91 | 92 |
93 | 94 |

LinkedIn

95 | 96 | 97 | 98 |
99 | 100 | 103 | 104 | 105 | -------------------------------------------------------------------------------- /The Linker/profile-pic.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/charukirti/HTML-and-CSS-mini-projects/e6ea71240bb8249de013ef95de87fc0834d888b1/The Linker/profile-pic.png -------------------------------------------------------------------------------- /survey-card-UI/README.md: -------------------------------------------------------------------------------- 1 | # Survey Card UI 2 | ## This card is created by using HTML and CSS 3 | --- 4 | # Output 5 | ![Survey Card](https://user-images.githubusercontent.com/108792404/222901151-9f5a9a1d-ace7-4a5b-9368-ca2b611dfac3.png) 6 | -------------------------------------------------------------------------------- /survey-card-UI/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Survey Card UI 8 | 9 | 10 | 11 | 15 | 16 | 17 | 18 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 |

What do you think?

31 | 32 | 33 | 34 |
35 |
36 |
37 | 38 | 39 |
40 | 41 |
42 | 43 | 44 |
45 |
46 | 47 |
48 |
49 | 50 | 51 |
52 | 53 |
54 | 55 | 56 |
57 |
58 |
59 | 60 | 61 | 62 |

Do you have any comments or suggestions?

63 | 64 | 65 |

66 | The data you provide helps us improve our platform. Find out more if it 67 | is a legal case, you must submit a legal removal request. 68 |

69 | 70 | 71 | 72 |
73 | 74 | 75 |
76 |
77 | 78 | 79 | -------------------------------------------------------------------------------- /survey-card-UI/style.css: -------------------------------------------------------------------------------- 1 | /* font-families */ 2 | /* font-family: 'Merriweather', serif; */ 3 | /* font-family: 'Mulish', sans-serif; */ 4 | * { 5 | margin: 0; 6 | padding: 0; 7 | box-sizing: border-box; 8 | } 9 | 10 | :root { 11 | --primary-color: #1b2b5c; 12 | --primary-font: "Merriweather", serif; 13 | --secondary-font: "Mulish", sans-serif; 14 | } 15 | 16 | h2 { 17 | font-size: 1.63rem; 18 | font-weight: 900; 19 | font-family: var(--primary-font); 20 | color: var(--primary-color); 21 | } 22 | 23 | h3 { 24 | font-size: 1.2rem; 25 | font-weight: 400; 26 | font-family: var(--secondary-font); 27 | color: var(--primary-color); 28 | } 29 | 30 | label { 31 | font-size: 1.2rem; 32 | line-height: 1em; 33 | color: var(--primary-color); 34 | font-family: var(--secondary-font); 35 | } 36 | 37 | body { 38 | display: flex; 39 | justify-content: center; 40 | align-items: center; 41 | height: 100vh; 42 | background: #f1f4fd; 43 | } 44 | 45 | .container { 46 | width: 40rem; 47 | background: #ffffff; 48 | height: 27rem; 49 | padding: 3rem; 50 | box-shadow: 0px 15px 25px -10px rgba(152, 168, 215, 0.38); 51 | border-radius: 20px; 52 | } 53 | 54 | .checkbox-section { 55 | display: flex; 56 | align-items: center; 57 | margin-top: 1rem; 58 | } 59 | 60 | .field-group { 61 | width: 15rem; 62 | padding-bottom: 20px; 63 | } 64 | 65 | .checkbox__field { 66 | opacity: 0; 67 | } 68 | 69 | .checkbox__label { 70 | position: relative; 71 | padding-left: 22px; 72 | cursor: pointer; 73 | } 74 | 75 | .checkbox__label::before { 76 | content: ""; 77 | position: absolute; 78 | left: 0; 79 | top: 5px; 80 | width: 15px; 81 | height: 15px; 82 | border-radius: 100%; 83 | border: 1px solid #000; 84 | } 85 | 86 | .checkbox__label::after { 87 | content: ""; 88 | position: absolute; 89 | left: 1px; 90 | top: 6px; 91 | width: 1rem; 92 | height: 1rem; 93 | border-radius: 100%; 94 | background-color: #1b2b5c; 95 | transition: 0.2s ease; 96 | } 97 | 98 | .checkbox__field:not(:checked) + .checkbox__label::after { 99 | transform: scale(0); 100 | opacity: 0; 101 | } 102 | 103 | .checkbox__field:checked + .checkbox__label::after { 104 | transform: rotate(35deg) scale(1); 105 | opacity: 1; 106 | } 107 | 108 | textarea { 109 | width: 75%; 110 | height: 4rem; 111 | margin-top: 1rem; 112 | padding: 15px; 113 | outline: none; 114 | font-size: 1.2rem; 115 | font-weight: 400; 116 | font-weight: 400; 117 | border: 1px solid #e3e8f5; 118 | border-radius: 5px; 119 | } 120 | 121 | textarea::placeholder { 122 | color: #1b2b5c80; 123 | font-size: 1rem; 124 | font-weight: 400; 125 | } 126 | 127 | p { 128 | margin-top: 1rem; 129 | width: 32rem; 130 | font-size: 1rem; 131 | font-weight: 400; 132 | font-family: var(--secondary-font); 133 | color: var(--primary-color); 134 | opacity: 0.7; 135 | line-height: 15px; 136 | } 137 | 138 | .cta { 139 | margin-top: 1rem; 140 | display: flex; 141 | flex-direction: row; 142 | align-items: flex-start; 143 | gap: 10px; 144 | } 145 | 146 | button { 147 | padding: 10px 15px; 148 | border: none; 149 | font-size: 1rem; 150 | font-weight: 400; 151 | border-radius: 5px; 152 | font-family: var(--secondary-font); 153 | color: #000; 154 | background: #ebeffa; 155 | } 156 | 157 | button:nth-child(2) { 158 | background: var(--primary-color); 159 | color: #fff; 160 | } 161 | --------------------------------------------------------------------------------