├── .vscode └── settings.json ├── Alerts-MrAfonso ├── index.html └── style.css ├── Button-mindninjaX ├── 01 │ ├── index.html │ └── style.css ├── 02 │ ├── index.html │ └── style.css ├── 03 │ ├── index.html │ └── style.css ├── 04 │ ├── index.html │ └── style.css └── 05 │ ├── index.html │ └── style.css ├── Buttons ├── animated_buttons │ ├── index.html │ └── style.css ├── index.html └── style.css ├── CONTRIBUTION.md ├── Cards-MrAfonso ├── index.html └── style.css ├── Cards ├── index.html └── style.css ├── Character_card ├── assets │ ├── background-1.webp │ ├── background-2.jpg │ ├── background-3.webp │ ├── ichigo.png │ ├── logo-1.png │ ├── logo-2.png │ ├── logo-3.png │ ├── luffy.png │ └── naruto.png ├── index.html └── style.css ├── Cool form ├── index.html └── style.css ├── EventCard ├── index.html └── style.css ├── FileUploader ├── index.html └── style.css ├── Forms ├── index.html └── style.css ├── LICENSE ├── LoginPage ├── index.html └── style.css ├── Modals ├── index.html └── style.css ├── Pop-up ├── index.html └── style.css ├── PriceCard ├── index.html └── style.css ├── README.md ├── ReviewCard ├── index.html └── style.css ├── SearchBar ├── index.html ├── script.js └── style.css ├── Select User ├── index.html └── style.css ├── Share-Button ├── index.html └── style.css ├── Sign-up ├── pruddy storez.png ├── sign up.html └── style.css ├── Signup Page ├── design.css └── index.html ├── Simple-cards ├── Thumbs.db ├── images │ ├── angular-img.png │ ├── css-img.png │ ├── html-img.png │ ├── js-img.png │ ├── node-img.png │ └── react-img.png ├── index.html └── style.css ├── Subsrciption_Cards └── index.html ├── Timeline └── index.html ├── UI_TimeLine ├── index.html └── style.css ├── VideoPlayer ├── assets │ ├── pause.svg │ ├── play.svg │ ├── poster-img.jpg │ └── testMovie2.mp4 ├── index.html ├── scripts │ ├── playback.js │ └── videocontrol.js └── styles │ └── player.css ├── YBHAV_buttons ├── index.html └── style.css ├── animated search bar ├── index.html └── style.scss ├── button-animation ├── index.html └── style.css ├── css-only-Accordion ├── index.html └── style.css ├── css-only-model ├── index.html └── style.css ├── image-slider-Harvansh-1234 ├── index.html └── style.css ├── image-slider └── style.css ├── imageSlider └── index.html ├── images ├── 5726840.jpg ├── Illustration.webp ├── Logo.ico ├── New-Logo.webp ├── Screenshot 2021-10-14 at 23-03-45 Logo Maker Used By 2 3 Million Startups.png ├── faizur-rehman-yapBRdPWxik-unsplash.jpg ├── fakurian-design-UI81cov4gSY-unsplash.jpg ├── favicon.ico ├── favicon.webp ├── lookup.webp ├── pexels-anand-dandekar-1532771.jpg └── pexels-pixabay-60597.jpg ├── index.html ├── package-lock.json ├── profile-card ├── index.html ├── profile-pic.webp └── style.css ├── script.js ├── style.css └── testimonialUi ├── index.html └── style.css /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "liveServer.settings.port": 5503 3 | } -------------------------------------------------------------------------------- /Alerts-MrAfonso/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | UI-UX-Designs - Alerts 8 | 9 | 10 | 11 | 12 | 28 | 29 |
30 | 36 | 42 | 48 | 54 | 60 |
61 | Go back 62 | 65 | 66 | 67 | -------------------------------------------------------------------------------- /Alerts-MrAfonso/style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;400;500;700&display=swap"); 2 | 3 | * { 4 | margin: 0; 5 | padding: 0; 6 | -webkit-box-sizing: border-box; 7 | box-sizing: border-box; 8 | font-family: "Poppins", sans-serif; 9 | } 10 | 11 | html { 12 | scroll-behavior: smooth; 13 | } 14 | main { 15 | padding-top: 80px; 16 | background-color: #FFFFFF; 17 | flex: 1; 18 | } 19 | 20 | 21 | #logo { 22 | object-fit: scale-down; 23 | width: 200px; 24 | height: 60px; 25 | } 26 | 27 | nav { 28 | display: flex; 29 | flex-direction: row; 30 | justify-content: space-between; 31 | align-items: center; 32 | background-color: #FFFFFF; 33 | height: 80px; 34 | border-bottom: 0.5px solid #555555; 35 | position: fixed; 36 | top: 0; 37 | width: 100%; 38 | } 39 | 40 | .bton { 41 | font-size: medium; 42 | text-decoration:none; 43 | transition-duration: 300ms; 44 | } 45 | 46 | .nav-btn { 47 | color: #9F9F9F; 48 | } 49 | 50 | .nav-btn:hover { 51 | color: #444444; 52 | } 53 | 54 | .nav-btn-active { 55 | color: #444444; 56 | } 57 | #nav-buttons { 58 | display: flex; 59 | justify-content: space-between; 60 | align-items: center; 61 | gap: 2rem; 62 | margin-right: 1.5rem; 63 | } 64 | 65 | body { 66 | background-color: #F0F0F0; 67 | display: flex; 68 | flex-direction: column; 69 | align-items: center; 70 | width: 100%; 71 | } 72 | 73 | header { 74 | padding: 0px 3rem 0px 0rem; 75 | display: flex; 76 | flex-direction: row; 77 | justify-content: space-between; 78 | align-items: center; 79 | background-color: #FFFFFF; 80 | height: 80px; 81 | border-bottom: 0.5px solid #555555; 82 | position: fixed; 83 | top: 0; 84 | width: 100%; 85 | } 86 | 87 | #title-alerts { 88 | font-weight: 300; 89 | font-size: 1.75rem; 90 | color: black; 91 | } 92 | 93 | #author { 94 | font-size: 0.85rem; 95 | color: #7c7c7c; 96 | } 97 | 98 | section { 99 | padding: 7rem 2rem 2rem 2rem; 100 | } 101 | .alert { 102 | display: flex; 103 | margin-bottom: 1rem; 104 | border-radius: 0.5rem; 105 | font-size: 0.875rem; 106 | line-height: 1.25rem; 107 | padding: 1rem; 108 | } 109 | 110 | .icon { 111 | margin-right: 0.75rem; 112 | display: inline; 113 | height: 1.25rem; 114 | width: 1.25rem; 115 | flex-shrink: 0; 116 | } 117 | 118 | .bold { 119 | font-weight: 500; 120 | } 121 | 122 | .alert-info { 123 | background-color: #bfdbfe; 124 | color: #1e40af; 125 | } 126 | 127 | .alert-danger { 128 | background-color: #fecaca; 129 | color: #991b1b; 130 | } 131 | 132 | .alert-success { 133 | background-color: #bbf7d0; 134 | color: #166534; 135 | } 136 | 137 | .alert-warning { 138 | background-color: #fef08a; 139 | color: #854d0e; 140 | } 141 | 142 | .alert-dark { 143 | background-color: #374151; 144 | color: #d1d5db; 145 | } 146 | 147 | #logo { 148 | object-fit: scale-down; 149 | width: 200px; 150 | height: 60px; 151 | } 152 | 153 | #back-btn { 154 | font-size: medium; 155 | text-decoration:none; 156 | transition-duration: 300ms; 157 | color: #6D4BFF; 158 | text-align: center; 159 | background-color: #D6CFF3; 160 | padding: 10px 25px 10px 25px; 161 | border-radius: 5px; 162 | border: 1px solid #6D4BFF; 163 | width: 12rem; 164 | margin-bottom: 2rem; 165 | } 166 | 167 | #back-btn:hover { 168 | scale: 1.025; 169 | transition-duration: 300ms; 170 | } 171 | 172 | footer { 173 | padding-top: auto; 174 | background-color: #FFFFFF; 175 | width: 100%; 176 | padding: 1.5rem; 177 | display: flex; 178 | justify-content: center; 179 | align-items: center; 180 | color: #535353; 181 | } 182 | -------------------------------------------------------------------------------- /Button-mindninjaX/01/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 |
11 |
BUTTON: SLIDE DOWN
12 |


13 |
BUTTON: SLIDE RIGHT
14 |


15 |
BUTTON: SLIDE INSIDE
16 |


17 |
BUTTON: SLIDE DIAGONAL
18 |


19 |
20 | 21 | -------------------------------------------------------------------------------- /Button-mindninjaX/01/style.css: -------------------------------------------------------------------------------- 1 | html { 2 | height: 100%; 3 | } 4 | 5 | body { 6 | height: 100%; 7 | margin: 0; 8 | background: #162944; 9 | } 10 | 11 | .button_slide { 12 | color: #FFF; 13 | border: 2px solid rgb(216, 2, 134); 14 | border-radius: 0px; 15 | padding: 18px 36px; 16 | display: inline-block; 17 | font-family: "Lucida Console", Monaco, monospace; 18 | font-size: 14px; 19 | letter-spacing: 1px; 20 | cursor: pointer; 21 | box-shadow: inset 0 0 0 0 #D80286; 22 | -webkit-transition: ease-out 0.4s; 23 | -moz-transition: ease-out 0.4s; 24 | transition: ease-out 0.4s; 25 | } 26 | 27 | .slide_down:hover { 28 | box-shadow: inset 0 100px 0 0 #D80286; 29 | } 30 | 31 | .slide_right:hover { 32 | box-shadow: inset 400px 0 0 0 #D80286; 33 | } 34 | 35 | .slide_left:hover { 36 | box-shadow: inset 0 0 0 50px #D80286; 37 | } 38 | 39 | .slide_diagonal:hover { 40 | box-shadow: inset 400px 50px 0 0 #D80286; 41 | } 42 | 43 | #outer { 44 | width: 364px; 45 | margin: 50px auto 0 auto; 46 | text-align: center; 47 | } -------------------------------------------------------------------------------- /Button-mindninjaX/02/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 |
11 | 18 |
19 | 20 | -------------------------------------------------------------------------------- /Button-mindninjaX/02/style.css: -------------------------------------------------------------------------------- 1 | body{ 2 | padding:0px; 3 | margin: 0px; 4 | background-color: #6D214F; 5 | width:100%; 6 | height:100vh; 7 | } 8 | .wrapper{ 9 | position: absolute; 10 | top:50%; 11 | left:50%; 12 | transform: translate(-50%, -50%); 13 | width: fit-content; 14 | height:auto; 15 | } 16 | button{ 17 | width:200px; 18 | height:70px; 19 | background: linear-gradient(to left top, #c32c71 50%, #b33771 50%); 20 | border-style: none; 21 | color:#fff; 22 | font-size: 23px; 23 | letter-spacing: 3px; 24 | font-family: 'Lato'; 25 | font-weight: 600; 26 | outline: none; 27 | cursor: pointer; 28 | position: relative; 29 | padding: 0px; 30 | overflow: hidden; 31 | transition: all .5s; 32 | box-shadow: 0px 1px 2px rgba(0,0,0,.2); 33 | } 34 | button span{ 35 | position: absolute; 36 | display: block; 37 | } 38 | button span:nth-child(1){ 39 | height: 3px; 40 | width:200px; 41 | top:0px; 42 | left:-200px; 43 | background: linear-gradient(to right, rgba(0,0,0,0), #f6e58d); 44 | border-top-right-radius: 1px; 45 | border-bottom-right-radius: 1px; 46 | animation: span1 2s linear infinite; 47 | animation-delay: 1s; 48 | } 49 | 50 | @keyframes span1{ 51 | 0%{ 52 | left:-200px 53 | } 54 | 100%{ 55 | left:200px; 56 | } 57 | } 58 | button span:nth-child(2){ 59 | height: 70px; 60 | width: 3px; 61 | top:-70px; 62 | right:0px; 63 | background: linear-gradient(to bottom, rgba(0,0,0,0), #f6e58d); 64 | border-bottom-left-radius: 1px; 65 | border-bottom-right-radius: 1px; 66 | animation: span2 2s linear infinite; 67 | animation-delay: 2s; 68 | } 69 | @keyframes span2{ 70 | 0%{ 71 | top:-70px; 72 | } 73 | 100%{ 74 | top:70px; 75 | } 76 | } 77 | button span:nth-child(3){ 78 | height:3px; 79 | width:200px; 80 | right:-200px; 81 | bottom: 0px; 82 | background: linear-gradient(to left, rgba(0,0,0,0), #f6e58d); 83 | border-top-left-radius: 1px; 84 | border-bottom-left-radius: 1px; 85 | animation: span3 2s linear infinite; 86 | animation-delay: 3s; 87 | } 88 | @keyframes span3{ 89 | 0%{ 90 | right:-200px; 91 | } 92 | 100%{ 93 | right: 200px; 94 | } 95 | } 96 | 97 | button span:nth-child(4){ 98 | height:70px; 99 | width:3px; 100 | bottom:-70px; 101 | left:0px; 102 | background: linear-gradient(to top, rgba(0,0,0,0), #f6e58d); 103 | border-top-right-radius: 1px; 104 | border-top-left-radius: 1px; 105 | animation: span4 2s linear infinite; 106 | animation-delay: 4s; 107 | } 108 | @keyframes span4{ 109 | 0%{ 110 | bottom: -70px; 111 | } 112 | 100%{ 113 | bottom:70px; 114 | } 115 | } 116 | 117 | button:hover{ 118 | transition: all .5s; 119 | transform: rotate(-3deg) scale(1.1); 120 | box-shadow: 0px 3px 5px rgba(0,0,0,.4); 121 | } 122 | button:hover span{ 123 | animation-play-state: paused; 124 | } 125 | 126 | 127 | 128 | 129 | /* footer */ 130 | footer { 131 | background-color: #222; 132 | color: #fff; 133 | font-size: 14px; 134 | bottom: 0; 135 | position: fixed; 136 | left: 0; 137 | right: 0; 138 | text-align: center; 139 | z-index: 999; 140 | } 141 | 142 | footer p { 143 | margin: 10px 0; 144 | font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; 145 | } 146 | footer .fa-heart{ 147 | color: red; 148 | } 149 | footer .fa-dev{ 150 | color: #fff; 151 | } 152 | footer .fa-twitter-square{ 153 | color:#1da0f1; 154 | } 155 | footer .fa-instagram{ 156 | color: #f0007c; 157 | } 158 | fotter .fa-linkedin{ 159 | color:#0073b1; 160 | } 161 | footer .fa-codepen{ 162 | color:#fff 163 | } 164 | footer a { 165 | color: #3c97bf; 166 | text-decoration: none; 167 | margin-right:5px; 168 | } 169 | .youtubeBtn{ 170 | position: fixed; 171 | left: 50%; 172 | transform:translatex(-50%); 173 | bottom: 45px; 174 | cursor: pointer; 175 | transition: all .3s; 176 | vertical-align: middle; 177 | text-align: center; 178 | display: inline-block; 179 | } 180 | .youtubeBtn i{ 181 | font-size:20px; 182 | float:left; 183 | } 184 | .youtubeBtn a{ 185 | color:#ff0000; 186 | text-shadow: 0px 2px 5px rgba(0,0,0,.5); 187 | animation: youtubeAnim 1000ms linear infinite; 188 | float:right; 189 | } 190 | .youtubeBtn a:hover{ 191 | color:#c9110f; 192 | transition:all .3s ease-in-out; 193 | text-shadow: none; 194 | } 195 | .youtubeBtn i:active{ 196 | transform:scale(.9); 197 | transition:all .3s ease-in-out; 198 | } 199 | .youtubeBtn span{ 200 | font-family: 'Lato'; 201 | font-weight: bold; 202 | color: #fff; 203 | display: block; 204 | font-size: 12px; 205 | float: right; 206 | line-height: 20px; 207 | padding-left: 5px; 208 | 209 | } 210 | 211 | @keyframes youtubeAnim{ 212 | 0%,100%{ 213 | color:#c9110f; 214 | } 215 | 50%{ 216 | color:#ff0000; 217 | } 218 | } 219 | /* footer */ -------------------------------------------------------------------------------- /Button-mindninjaX/03/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 |
11 |
12 |

Button 1:

13 | Hover over me 14 |
15 | 16 |
17 |

Button 2:

18 | Hover over me 19 |
20 |
21 | 22 | 25 | 26 | -------------------------------------------------------------------------------- /Button-mindninjaX/03/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: #ffffff; 3 | font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif; 4 | color: #c2c2c2; 5 | } 6 | 7 | .center { 8 | display: flex; 9 | justify-content: center; 10 | align-items: center; 11 | min-height: 100vh; 12 | font-size: 24px; 13 | } 14 | 15 | .btn-1, 16 | .btn-2 { 17 | width: 300px; 18 | height: 200px; 19 | display: flex; 20 | justify-content: center; 21 | align-items: center; 22 | flex-direction: column; 23 | } 24 | /* Created by http://grohit.com/ */ 25 | footer a, 26 | .btn-1 a, 27 | .btn-2 a { 28 | text-decoration: none; 29 | border: 2px solid #010100; 30 | padding: 15px; 31 | color: #000; 32 | text-transform: uppercase; 33 | letter-spacing: 2px; 34 | position: relative; 35 | display: inline-block; 36 | } 37 | 38 | span { 39 | position: relative; 40 | /* z-index coz when we put bg to before and after this span text will not be visible */ 41 | z-index: 3; 42 | } 43 | 44 | /* Button 1 styles */ 45 | 46 | .btn-1 a::before { 47 | content: ""; 48 | position: absolute; 49 | top: 5px; 50 | left: -2px; 51 | width: calc(100% + 6px); 52 | /*100% plus double the times left values*/ 53 | height: calc(100% - 10px); 54 | background-color: #ffffff; 55 | transition: all 0.5s ease-in-out; 56 | transform: scaleY(1); 57 | } 58 | 59 | .btn-1 a:hover::before, 60 | .btn-2 a:hover::before { 61 | transform: scaleY(0); 62 | } 63 | 64 | .btn-1 a::after { 65 | content: ""; 66 | position: absolute; 67 | left: 5px; 68 | top: -5px; 69 | width: calc(100% - 10px); 70 | /*100% plus double the times left values*/ 71 | height: calc(100% + 10px); 72 | background-color: #ffffff; 73 | transition: all 0.5s ease-in-out; 74 | transform: scaleX(1); 75 | } 76 | /* Created by http://grohit.com/ */ 77 | 78 | .btn-1 a:hover::after, 79 | .btn-2 a:hover::after { 80 | transform: scaleX(0); 81 | } 82 | 83 | /* Button 2 styles */ 84 | 85 | .btn-2 a { 86 | color: #ffffff; 87 | transition: all 0.5s ease-in-out; 88 | } 89 | 90 | .btn-2 a:hover { 91 | color: #000000; 92 | transition: all 0.5s ease-in-out; 93 | } 94 | 95 | .btn-2 a::before { 96 | content: ""; 97 | position: absolute; 98 | top: 0; 99 | left: 0; 100 | width: 100%; 101 | height: 100%; 102 | background-color: #000; 103 | transition: all 0.5s ease-in-out; 104 | transform: scaleY(1); 105 | } 106 | 107 | .btn-2 a::after { 108 | content: ""; 109 | position: absolute; 110 | left: 0; 111 | top: 0; 112 | width: 100%; 113 | height: 100%; 114 | background-color: black; 115 | transition: all 0.5s ease-in-out; 116 | transform: scaleX(1); 117 | } 118 | 119 | /* Created by http://grohit.com/ */ 120 | footer{ 121 | text-align: center; 122 | font-size: 10px; 123 | } -------------------------------------------------------------------------------- /Button-mindninjaX/04/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 16 | 17 | -------------------------------------------------------------------------------- /Button-mindninjaX/04/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | height: 100vh; 4 | display: flex; 5 | align-items: center; 6 | justify-content: center; 7 | background-color: #333; 8 | } 9 | 10 | ul { 11 | padding: 0; 12 | list-style-type: none; 13 | } 14 | 15 | li { 16 | font-size: 25px; 17 | width: 8em; 18 | height: 2em; 19 | color: orange; 20 | border-left: 0.08em solid; 21 | position: relative; 22 | margin-top: 0.8em; 23 | cursor: pointer; 24 | } 25 | 26 | li::before, 27 | li::after 28 | { 29 | content: ''; 30 | position: absolute; 31 | width: inherit; 32 | border-left: inherit; 33 | z-index: -1; 34 | } 35 | 36 | li::before { 37 | height: 80%; 38 | top: 10%; 39 | left: calc(-0.15em - 0.08em * 2); 40 | filter: brightness(0.8); 41 | } 42 | 43 | li::after { 44 | height: 60%; 45 | top: 20%; 46 | left: calc(-0.15em * 2 - 0.08em * 3); 47 | filter: brightness(0.6); 48 | } 49 | 50 | li span { 51 | position: relative; 52 | height: 120%; 53 | top: -10%; 54 | box-sizing: border-box; 55 | border: 0.08em solid; 56 | background-color: #333; 57 | display: flex; 58 | align-items: center; 59 | justify-content: center; 60 | font-family: sans-serif; 61 | text-transform: capitalize; 62 | transform: translateX(calc(-0.15em * 3 - 0.08em * 2)); 63 | transition: 0.3s; 64 | } 65 | 66 | li:hover span { 67 | transform: translateX(0.15em); 68 | } -------------------------------------------------------------------------------- /Button-mindninjaX/05/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 |
11 |

button style 1

12 | 13 | Button 14 | 15 | Button 16 | 17 | 18 | Button 19 | 20 |
21 | 22 |

button style 2

23 | 24 | Button 2 25 | 26 | 27 | Button 2 28 | 29 | 30 | Button 2 31 | 32 | 33 |

button style 3

34 | 35 | Button 3 36 | 37 | 38 | Button 3 39 | 40 | 41 | Button 3 42 | 43 | 44 |

button style 4

45 | 46 | Button 4 47 | 48 | 49 | Button 4 50 | 51 | 52 | Button 4 53 | 54 | 55 |

button style 5

56 | 57 | Button 5 58 | 59 | 60 | Button 5 61 | 62 | 63 | Button 5 64 | 65 | 66 |

button style 6

67 | 68 | Button 6 69 | 70 | 71 | Button 6 72 | 73 | 74 | Button 6 75 | 76 | 77 |

button style 7

78 | 79 | Button 7 80 | 81 | 82 | Button 7 83 | 84 | 85 | Button 7 86 | 87 | 88 |

Button style 8

89 | 90 | button 8 91 |
92 | 93 | 94 | button 8 95 |
96 | 97 | 98 | button 8 99 |
100 | 101 | 102 |

Button style 9

103 | 104 | button 9 105 |
106 | 107 | 108 | button 9 109 |
110 | 111 | 112 | button 9 113 |
114 | 115 | 116 |

Button style 10

117 | 118 | button 10 119 |
120 | 121 | 122 | button 10 123 |
124 | 125 | 126 | button 10 127 |
128 | 129 | 130 |

Button style 11

131 | 132 | button 11 133 |
134 | 135 | 136 | button 11 137 |
138 | 139 | 140 | button 11 141 |
142 | 143 |

Button style 12

144 | 145 | 146 | 147 | Button 12 148 | 149 | 150 | 151 | 152 | 153 | Button 12 154 | 155 | 156 | 157 | 158 | 159 | Button 12 160 | 161 | 162 | 163 | 164 |
165 | 166 | -------------------------------------------------------------------------------- /Buttons/animated_buttons/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Buttons 8 | 9 | 10 | 11 |
12 | 13 |
14 | 15 | -------------------------------------------------------------------------------- /Buttons/animated_buttons/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,600;1,600&display=swap'); 2 | 3 | *{ 4 | font-family: 'Source Sans Pro', sans-serif; 5 | letter-spacing: 4px; 6 | background-color: #25252A; 7 | } 8 | 9 | .container 10 | { 11 | display: flex; 12 | flex-direction: row; 13 | justify-content: space-evenly; 14 | align-items: center; 15 | text-align: center; 16 | min-height: 100vh; 17 | } 18 | .btn1 19 | { 20 | width: 300px; 21 | height: 100px; 22 | border: none; 23 | color: white; 24 | background-color: #3CAEA3; 25 | /* rgb(255,0,68) */ 26 | border-radius: 4px; 27 | box-shadow: inset 0 0 0 0 #f9e589; 28 | transition: ease-out 0.3s; 29 | font-size: 2rcm; 30 | outline: none; 31 | } 32 | .btn1:hover 33 | { 34 | box-shadow: inset 300px 0 0 0 #f9e589; 35 | } -------------------------------------------------------------------------------- /Buttons/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Buttons 7 | 8 | 9 | 10 | 22 |
23 |
24 |

Button Designs

25 |

Hover Button

26 |

Go back

27 |
28 | 29 |
30 |

Buttons Design

31 |
32 |
33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 |
43 | 44 | 45 |
46 |

Outline Buttons

47 |
48 |
49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 |
59 | 60 | 61 | 62 |
63 |

Small Buttons

64 |
65 |
66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 |
76 | 77 | 78 | 79 |
80 |

Large Buttons

81 |
82 |
83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 |
93 | 94 | 95 |
96 |

Buttons with beautiful animation

97 |
98 |
99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 |
109 | 110 | 111 |
112 |

Buttons with changing colors

113 |
114 |
115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 |
125 | 126 | 127 |
128 |

Buttons with Hover

129 |
130 |
131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 |
141 |
142 | 143 | 144 | -------------------------------------------------------------------------------- /Buttons/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin :0 auto; 3 | padding :0; 4 | font-family: Verdana; 5 | background:rgba(0, 0, 0, 0.05); 6 | } 7 | 8 | .container-pro{ 9 | display: flex; 10 | flex-direction: column; 11 | margin-top:2em 12 | 13 | } 14 | main { 15 | padding-top: 80px; 16 | background-color: #FFFFFF; 17 | flex: 1; 18 | } 19 | 20 | 21 | #logo { 22 | object-fit: scale-down; 23 | width: 200px; 24 | height: 60px; 25 | } 26 | 27 | nav { 28 | display: flex; 29 | flex-direction: row; 30 | justify-content: space-between; 31 | align-items: center; 32 | background-color: #FFFFFF; 33 | height: 80px; 34 | border-bottom: 0.5px solid #555555; 35 | position: fixed; 36 | top: 0; 37 | width: 100%; 38 | } 39 | 40 | .bton { 41 | font-size: medium; 42 | text-decoration:none; 43 | transition-duration: 300ms; 44 | } 45 | 46 | .nav-btn { 47 | color: #9F9F9F; 48 | } 49 | 50 | .nav-btn:hover { 51 | color: #444444; 52 | } 53 | 54 | .nav-btn-active { 55 | color: #444444; 56 | } 57 | #nav-buttons { 58 | display: flex; 59 | justify-content: space-between; 60 | align-items: center; 61 | gap: 2rem; 62 | margin-right: 1.5rem; 63 | } 64 | 65 | header{ 66 | background-color: lightpink; 67 | padding: 1em; 68 | color: white; 69 | } 70 | 71 | .container{ 72 | display: block; 73 | margin : 1em auto; 74 | width : 100%; 75 | height: 80%; 76 | max-width : 100%; 77 | max-height: 400px; 78 | border : solid #eeee; 79 | background-color: white; 80 | 81 | } 82 | 83 | 84 | @media (min-width: 785px) { 85 | 86 | .container-pro{ 87 | flex-direction: row; 88 | justify-content: space-evenly; 89 | } 90 | 91 | .container{ 92 | margin : 1em 1em; 93 | } 94 | 95 | } 96 | 97 | 98 | 99 | 100 | h1, h2, h3, h4, p{ 101 | text-align : center; 102 | } 103 | 104 | h2{ 105 | font-size: 2em; 106 | margin-top: 1rem; 107 | margin-bottom : 0; 108 | padding : 0 0; 109 | } 110 | 111 | h4{ 112 | color : darkgray; 113 | margin : 0 0; 114 | padding : 0 0; 115 | } 116 | 117 | .sub-heading 118 | { 119 | text-align: left; 120 | padding-left: 50px; 121 | } 122 | .btn { 123 | border-radius: 5px; 124 | color: white; 125 | padding-top: 15px; 126 | padding-bottom: 15px; 127 | padding-left: 20px; 128 | padding-right: 20px; 129 | text-align: center; 130 | text-decoration: none; 131 | display: inline-block; 132 | font-size: 16px; 133 | margin: 4px 2px; 134 | border: none; 135 | cursor: pointer; 136 | } 137 | #back-btn { 138 | font-size: medium; 139 | text-decoration:none; 140 | transition-duration: 300ms; 141 | color: #6D4BFF; 142 | text-align: center; 143 | background-color: #D6CFF3; 144 | padding: 10px 25px 10px 25px; 145 | border-radius: 5px; 146 | border: 1px solid #6D4BFF; 147 | width: 12rem; 148 | margin-bottom: 2rem; 149 | } 150 | .btn:active { 151 | transform: scale(0.98); 152 | box-shadow: 3px 2px 22px 1px rgba(0, 0, 0, 0.24); 153 | } 154 | 155 | 156 | 157 | .primary-btn 158 | { 159 | background-color: #007bff; 160 | } 161 | 162 | .secondary-btn 163 | { 164 | background-color: #6c757d; 165 | } 166 | 167 | .success-btn 168 | { 169 | background-color: #28A745; 170 | } 171 | .danger-btn 172 | { 173 | background-color: #DC3545; 174 | } 175 | .info-btn 176 | { 177 | background-color: #17A2BB; 178 | } 179 | .light-btn 180 | { 181 | background-color: #6c757d; 182 | } 183 | .dark-btn 184 | { 185 | background-color: #343A40; 186 | } 187 | .link-btn 188 | { 189 | background-color: white; 190 | color: #007BFF; 191 | } 192 | .warning-btn 193 | { 194 | background-color: #FFC107; 195 | } 196 | 197 | 198 | .primary-outline-btn 199 | { 200 | color: #007bff; 201 | border: 2px solid #007bff; 202 | } 203 | 204 | .secondary-outline-btn 205 | { 206 | color: #6c757d; 207 | border: 2px solid #6c757d; 208 | } 209 | 210 | .success-outline-btn 211 | { 212 | color: #28A745; 213 | border: 2px solid #28A745; 214 | } 215 | .danger-outline-btn 216 | { 217 | color: #DC3545; 218 | border: 2px solid #DC3545; 219 | } 220 | .info-outline-btn 221 | { 222 | color: #17A2BB; 223 | border: 2px solid #17A2BB; 224 | } 225 | .light-outline-btn 226 | { 227 | color: #6c757d; 228 | border: 2px solid #6c757d; 229 | } 230 | .dark-outline-btn 231 | { 232 | color: #343A40; 233 | border: 2px solid #343A40; 234 | } 235 | .link-outline-btn 236 | { 237 | border: 2px solid #007BFF; 238 | color: #007BFF; 239 | } 240 | .warning-outline-btn 241 | { 242 | color: #FFC107; 243 | border: 2px solid #FFC107; 244 | } 245 | 246 | .btn-large 247 | { 248 | padding-top: 20px; 249 | padding-bottom: 20px; 250 | padding-left: 25px; 251 | padding-right: 25px; 252 | } 253 | 254 | .btn-small 255 | { 256 | padding-top: 10px; 257 | padding-bottom: 10px; 258 | padding-left: 15px; 259 | padding-right: 15px; 260 | } 261 | 262 | .btn-animation:hover 263 | { 264 | transform: scale(1.0); 265 | box-shadow: 3px 2px 22px 1px rgba(0, 0, 0, 0.24); 266 | border: 2px solid #007bff; 267 | transition: 0.5s; 268 | text-decoration: none; 269 | font-family: Verdana; 270 | font-size: 16px; 271 | } 272 | .btn-color 273 | { 274 | transition: background-color 0.5s ease-out 0.2s; 275 | } 276 | .btn-color:hover 277 | { 278 | background-color: #324ebf; 279 | 280 | } 281 | .btn1:hover{ 282 | color: #007BFF; 283 | border: 1px solid #324ebf; 284 | } 285 | .btn2:hover{ 286 | color: #6c757d; 287 | border: 1px solid #6c757d; 288 | } 289 | .btn3:hover{ 290 | color: #28A745; 291 | border: 1px solid #28A745; 292 | } 293 | .btn4:hover{ 294 | color: #DC3545; 295 | border: 1px solid #DC3545; 296 | } 297 | .btn5:hover{ 298 | color: #FFC107; 299 | border: 1px solid #FFC107; 300 | } 301 | .btn6:hover{ 302 | color: #17A2BB; 303 | border: 1px solid #17A2BB; 304 | } 305 | .btn7:hover{ 306 | color: #6c757d; 307 | border: 1px solid #6c757d; 308 | } 309 | .btn8:hover{ 310 | color: #343A40; 311 | border: 1px solid #343A40; 312 | } 313 | .btn9:hover{ 314 | color: black; 315 | } 316 | .btn-hover:hover{ 317 | background-color: white; 318 | } -------------------------------------------------------------------------------- /CONTRIBUTION.md: -------------------------------------------------------------------------------- 1 | # Welcome to Contribution Guideline 2 | 3 | > Thank You for taking interest in increasing quality of the repo. 4 | 5 | ## Guidance 6 | 7 | - Add Name of Your component in the Main directory. 8 | - Add `index.html` link of your component to the main directory's `index.html` 9 | 10 | ## While creating Pull Request 11 | 12 | - Alphabetize your entry. 13 | - Search previous suggestions before making a new one, as yours may be a duplicate. 14 | - Make an individual pull request for each suggestion. 15 | - Keep descriptions short and simple, but descriptive. 16 | - Start the description with a capital and end with a full stop/period. 17 | - Check your spelling and grammar. 18 | 19 | ## Things we love to merge in our repo 20 | 21 | - Improving UI 22 | - Mobile Compatibility 23 | 24 | ## How to Contribute? ✍ 25 | 26 | ### 1. Fork the Project 🍴 27 | Fork this repository and make changes in code as required. You can change it online or by cloning it in your device. Then Pust it on your Forked Repo for further Actions. Do not use special characters in the template above. 28 | 29 | ![forked](https://user-images.githubusercontent.com/63325246/138092106-83ca7ed0-1ec3-4d01-a90c-ae3362bef4f5.jpg) 30 | 31 | ### 2. (Optional) Clone the fork via `git` 32 | - Using SSH 33 | ```shell 34 | git clone git@github.com:surajondev/UI-UX-Design.git 35 | ``` 36 | 37 | - Using HTTPS 38 | 39 | ```shell 40 | git clone https://github.com/surajondev/UI-UX-Design.git 41 | ``` 42 | 43 | - Using GitHub CLI 44 | 45 | ```shell 46 | gh repo clone surajondev/UI-UX-Design 47 | ``` 48 | 49 | ### 3. Create a new branch 50 | ### 4. Start hacking on the new branch 51 | ### 5. Add Issue (Before making a pull request) 52 | 53 | - go to the Issues tab of the repository and click on the issue you want to work on. 54 | - Under that issue, write a comment asking permission for the admin of the repository to assign you the issue you want to work on. 55 | - For example, 56 | ``` 57 | I would like to work on this issue. Can you assign it to me? 58 | ``` 59 | ### 6. Commit and push to the new branch 60 | 61 | ### 7. Click the contribute button to bring up a drop-down menu; select the pull request option from the menu. 62 | 63 | ### 8. But before making a pull request, be sure to link the issue in the description box for which you are creating the pull request. 64 | 65 |
66 | **Note: A pull request allows you to merge your changes into the main project.** 67 |
68 | Wait for your edits to be merged before proceeding. 69 |
70 | Hurray! You've made a significant contribution! :partying_face:🎉 71 | 72 | 73 | -------------------------------------------------------------------------------- /Cards-MrAfonso/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | UI-UX-Designs - Cards 8 | 9 | 10 | 11 | 12 | 28 | 29 |
30 |
31 | Bonnie image 32 |
Suraj Vishwakarma
33 | Web Developer 34 |

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Optio libero ad harum possimus suscipit perspiciatis culit at.

35 |
36 | Github 37 | Twitter 38 |
39 |
40 |
41 | Bonnie image 42 |
MrAfonso
43 | Fullstack Developer & UI Designer 44 |

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Optio libero ad harum possimus suscipit perspiciatis culit at.

45 |
46 | Github 47 | Twitter 48 |
49 |
50 |
51 | Go back 52 |
53 |

Made with ❤ by MrAfonso

54 |
55 | 56 | -------------------------------------------------------------------------------- /Cards-MrAfonso/style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;400;500;700&display=swap"); 2 | 3 | * { 4 | margin: 0; 5 | padding: 0; 6 | -webkit-box-sizing: border-box; 7 | box-sizing: border-box; 8 | font-family: "Poppins", sans-serif; 9 | } 10 | 11 | html { 12 | scroll-behavior: smooth; 13 | } 14 | main { 15 | padding-top: 80px; 16 | background-color: #FFFFFF; 17 | flex: 1; 18 | } 19 | 20 | 21 | #logo { 22 | object-fit: scale-down; 23 | width: 200px; 24 | height: 60px; 25 | } 26 | 27 | nav { 28 | display: flex; 29 | flex-direction: row; 30 | justify-content: space-between; 31 | align-items: center; 32 | background-color: #FFFFFF; 33 | height: 80px; 34 | border-bottom: 0.5px solid #555555; 35 | position: fixed; 36 | top: 0; 37 | width: 100%; 38 | } 39 | 40 | .bton { 41 | font-size: medium; 42 | text-decoration:none; 43 | transition-duration: 300ms; 44 | } 45 | 46 | .nav-btn { 47 | color: #9F9F9F; 48 | } 49 | 50 | .nav-btn:hover { 51 | color: #444444; 52 | } 53 | 54 | .nav-btn-active { 55 | color: #444444; 56 | } 57 | #nav-buttons { 58 | display: flex; 59 | justify-content: space-between; 60 | align-items: center; 61 | gap: 2rem; 62 | margin-right: 1.5rem; 63 | } 64 | 65 | body { 66 | background-color: #F0F0F0; 67 | display: flex; 68 | flex-direction: column; 69 | align-items: center; 70 | width: 100%; 71 | } 72 | 73 | header { 74 | padding: 0px 3rem 0px 0rem; 75 | display: flex; 76 | flex-direction: row; 77 | justify-content: space-between; 78 | align-items: center; 79 | background-color: #FFFFFF; 80 | height: 80px; 81 | border-bottom: 0.5px solid #555555; 82 | position: fixed; 83 | top: 0; 84 | width: 100%; 85 | } 86 | 87 | #title-cards { 88 | font-weight: 300; 89 | font-size: 1.75rem; 90 | color: black; 91 | } 92 | 93 | #author { 94 | font-size: 0.85rem; 95 | color: #7c7c7c; 96 | } 97 | 98 | section { 99 | padding: 7rem 2rem 2rem 2rem; 100 | display: flex; 101 | flex-direction: row; 102 | gap: 1.5rem; 103 | } 104 | 105 | #logo { 106 | object-fit: scale-down; 107 | width: 200px; 108 | height: 60px; 109 | } 110 | 111 | #back-btn { 112 | font-size: medium; 113 | text-decoration:none; 114 | transition-duration: 300ms; 115 | color: #6D4BFF; 116 | text-align: center; 117 | background-color: #D6CFF3; 118 | padding: 10px 25px 10px 25px; 119 | border-radius: 5px; 120 | border: 1px solid #6D4BFF; 121 | width: 12rem; 122 | margin-bottom: 2rem; 123 | } 124 | 125 | #back-btn:hover { 126 | scale: 1.025; 127 | transition-duration: 300ms; 128 | } 129 | 130 | footer { 131 | padding: auto; 132 | background-color: #FFFFFF; 133 | width: 100%; 134 | padding: 1.5rem; 135 | display: flex; 136 | justify-content: center; 137 | align-items: center; 138 | color: #535353; 139 | position: fixed; 140 | bottom: 0%; 141 | } 142 | 143 | #card { 144 | width: 100%; 145 | padding: 0rem 3rem 0rem 3rem; 146 | max-width: 24rem; 147 | background-color: white; 148 | border-radius: 0.5rem; 149 | border: 1px solid; 150 | border-color: #e5e7eb; 151 | box-shadow: #000000; 152 | display: flex; 153 | flex-direction: column; 154 | align-items: center; 155 | padding-bottom: 2.5rem; 156 | } 157 | 158 | #card > img { 159 | margin-top: 2rem; 160 | margin-bottom: 0.75rem; 161 | width: 6rem; 162 | height: 6rem; 163 | border-radius: 9999px; 164 | box-shadow: #000000; 165 | } 166 | 167 | #card > h5 { 168 | margin-bottom: 0.25rem; 169 | font-size: 1.25rem; 170 | line-height: 1.75rem; 171 | font-weight: 500; 172 | color: #111827; 173 | } 174 | 175 | #card > span { 176 | font-size: 0.875rem; 177 | line-height: 1.25rem; 178 | color: #6b7280; 179 | text-align: center; 180 | } 181 | 182 | #card > p { 183 | margin-top: 0.75rem; 184 | font-size: 0.875rem; 185 | line-height: 1.25rem; 186 | color: #38393b; 187 | text-align: center; 188 | } 189 | 190 | #card > div { 191 | display: flex; 192 | margin-top: 1rem; 193 | margin-left: 0.75rem; 194 | gap: 0.75rem; 195 | } 196 | 197 | #card > div > a { 198 | display: inline-flex; 199 | align-items: center; 200 | padding: 0.5rem 1rem 0.5rem 1rem; 201 | font-size: 0.875rem; 202 | line-height: 1.25rem; 203 | font-weight: 500; 204 | text-align: center; 205 | text-decoration: none; 206 | border-radius: 5px; 207 | background-color: #6D4BFF; 208 | color: white; 209 | transition-duration: 300ms; 210 | } 211 | 212 | #card > div > a:hover { 213 | scale: 1.02; 214 | } -------------------------------------------------------------------------------- /Cards/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Cards 7 | 8 | 9 | 10 | 22 |
23 |
24 |

My Favourite Actresses

25 |
26 |
27 |
28 |
29 | 30 |

Shraddha Kapoor

31 |

Actor/Singer

32 |

Find Her on @shraddha

33 | 34 | 35 |
36 |
37 |
38 |
39 | 40 |

Preity Zinta

41 |

Actor

42 |

Find Her on @realpz

43 | 44 | 45 |
46 |
47 |
48 |
49 |
50 |
51 | 52 |

Scarlett Johansson

53 |

Actor/Voice Artist

54 |

Find Her on @scarlett

55 | 56 | 57 |
58 |
59 |
60 |
61 | 62 |

Elizabeth Olsen

63 |

Actor/

64 |

Find Her on @elizabeth

65 | 66 | 67 |
68 |
69 |
70 |
71 |
72 |
73 | 74 |

Emma Stone

75 |

Actress

76 |

Find Her on @emmastone

77 | 78 | 79 |
80 |
81 |
82 |
83 | 84 |

Jennifer Lawrence

85 |

Actress

86 |

Find Her on @jenniferlawrence_

87 | 88 | 89 |
90 |
91 |
92 |
93 | 94 | 95 | -------------------------------------------------------------------------------- /Cards/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin :0 auto; 3 | padding :0; 4 | font-family: Verdana; 5 | background:rgba(0, 0, 0, 0.05); 6 | } 7 | main { 8 | padding-top: 80px; 9 | background-color: #FFFFFF; 10 | flex: 1; 11 | } 12 | 13 | 14 | #logo { 15 | object-fit: scale-down; 16 | width: 200px; 17 | height: 60px; 18 | } 19 | 20 | nav { 21 | display: flex; 22 | flex-direction: row; 23 | justify-content: space-between; 24 | align-items: center; 25 | background-color: #FFFFFF; 26 | height: 80px; 27 | border-bottom: 0.5px solid #555555; 28 | position: fixed; 29 | top: 0; 30 | width: 100%; 31 | } 32 | 33 | .bton { 34 | font-size: medium; 35 | text-decoration:none; 36 | transition-duration: 300ms; 37 | } 38 | 39 | .nav-btn { 40 | color: #9F9F9F; 41 | } 42 | 43 | .nav-btn:hover { 44 | color: #444444; 45 | } 46 | 47 | .nav-btn-active { 48 | color: #444444; 49 | } 50 | #nav-buttons { 51 | display: flex; 52 | justify-content: space-between; 53 | align-items: center; 54 | gap: 2rem; 55 | margin-right: 1.5rem; 56 | } 57 | 58 | .container-pro{ 59 | display: flex; 60 | flex-direction: column; 61 | margin-top:2em 62 | 63 | } 64 | 65 | header{ 66 | background-color: lightpink; 67 | padding: 1em; 68 | 69 | color: white; 70 | } 71 | 72 | .container{ 73 | display: block; 74 | margin : 1em auto; 75 | padding : 2rem 1rem; 76 | width : 60%; 77 | height: 80%; 78 | max-width : 400px; 79 | max-height: 400px; 80 | border : solid #eeee; 81 | border-radius : 2em; 82 | background-color: white; 83 | /* //added the box box-shadow: ; */ 84 | box-shadow: -6px -6px 20px rgb(230, 130, 130), 6px 6px 20px rgba(231, 21, 21, 0.1); 85 | 86 | } 87 | 88 | 89 | @media (min-width: 785px) { 90 | 91 | .container-pro{ 92 | flex-direction: row; 93 | justify-content: space-evenly; 94 | } 95 | 96 | .container{ 97 | margin : 1em 1em; 98 | } 99 | 100 | } 101 | 102 | img{ 103 | display : inline; 104 | margin :0 auto; 105 | height: 100%; 106 | width : auto; 107 | max-width:50%; 108 | max-height:50%; 109 | } 110 | 111 | .img-container{ 112 | width : 40%; 113 | height : 40%; 114 | max-width:50%; 115 | max-height:50%; 116 | border-radius : 50%; 117 | margin : auto ; 118 | display : block; 119 | /* box-shadow : 0.2rem 0.2rem 0.5rem lightgrey */ 120 | box-shadow : 0 0.4rem 0.5rem rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); 121 | } 122 | 123 | 124 | 125 | h1, h2, h3, h4, p{ 126 | text-align : center; 127 | } 128 | 129 | h2{ 130 | font-size: 2em; 131 | margin-top: 1rem; 132 | margin-bottom : 0; 133 | padding : 0 0; 134 | } 135 | 136 | h4{ 137 | color : darkgray; 138 | margin : 0 0; 139 | padding : 0 0; 140 | } 141 | 142 | button { 143 | display: block; 144 | margin : auto; 145 | cursor: pointer; 146 | } 147 | 148 | .btn{ 149 | background-image : linear-gradient(to right, purple, blue); 150 | color : white; 151 | padding : 0.2rem 2rem; 152 | font-size : 1.5em; 153 | border : none; 154 | border-radius : 6rem; 155 | box-shadow : 0 0.4rem 0.5rem rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); 156 | } 157 | 158 | -------------------------------------------------------------------------------- /Character_card/assets/background-1.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/surajondev/UI-UX-Design/e124bedd064ac8e3f934f09ee30af66e1df70a48/Character_card/assets/background-1.webp -------------------------------------------------------------------------------- /Character_card/assets/background-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/surajondev/UI-UX-Design/e124bedd064ac8e3f934f09ee30af66e1df70a48/Character_card/assets/background-2.jpg -------------------------------------------------------------------------------- /Character_card/assets/background-3.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/surajondev/UI-UX-Design/e124bedd064ac8e3f934f09ee30af66e1df70a48/Character_card/assets/background-3.webp -------------------------------------------------------------------------------- /Character_card/assets/ichigo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/surajondev/UI-UX-Design/e124bedd064ac8e3f934f09ee30af66e1df70a48/Character_card/assets/ichigo.png -------------------------------------------------------------------------------- /Character_card/assets/logo-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/surajondev/UI-UX-Design/e124bedd064ac8e3f934f09ee30af66e1df70a48/Character_card/assets/logo-1.png -------------------------------------------------------------------------------- /Character_card/assets/logo-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/surajondev/UI-UX-Design/e124bedd064ac8e3f934f09ee30af66e1df70a48/Character_card/assets/logo-2.png -------------------------------------------------------------------------------- /Character_card/assets/logo-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/surajondev/UI-UX-Design/e124bedd064ac8e3f934f09ee30af66e1df70a48/Character_card/assets/logo-3.png -------------------------------------------------------------------------------- /Character_card/assets/luffy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/surajondev/UI-UX-Design/e124bedd064ac8e3f934f09ee30af66e1df70a48/Character_card/assets/luffy.png -------------------------------------------------------------------------------- /Character_card/assets/naruto.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/surajondev/UI-UX-Design/e124bedd064ac8e3f934f09ee30af66e1df70a48/Character_card/assets/naruto.png -------------------------------------------------------------------------------- /Character_card/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Character Cards 8 | 9 | 10 |

The Big 3 Of Anime

11 | 12 |
13 |
14 | 15 | 16 | 17 |
18 |
19 |
20 |
21 | 22 | 23 | 24 |
25 |
26 |
27 |
28 | 29 | 30 | 31 |
32 |
33 | 34 | -------------------------------------------------------------------------------- /Character_card/style.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --timing: 400ms; 3 | --rotation: 20deg; 4 | } 5 | 6 | html { 7 | color-scheme: dark; 8 | } 9 | body{ 10 | display: grid; 11 | grid: auto / auto auto auto; 12 | place-content: center; 13 | min-height: 100vh; 14 | } 15 | .heading{ 16 | width: 100%; 17 | position: absolute; 18 | text-align: center; 19 | } 20 | .heading h1{ 21 | font-size: 40px; 22 | } 23 | .container { 24 | margin:20px; 25 | perspective: 1000px; 26 | } 27 | 28 | img { 29 | max-width: 100%; 30 | } 31 | 32 | .character { 33 | width: 250px; 34 | margin: 20px; 35 | aspect-ratio: 9 / 16; 36 | position: relative; 37 | transform-style: preserve-3d; 38 | transition: rotate var(--timing) ease; 39 | } 40 | 41 | .character:hover { 42 | rotate: x var(--rotation); 43 | } 44 | 45 | .character::before { 46 | content: ""; 47 | position: absolute; 48 | inset: 0; 49 | z-index: 100; 50 | background-image: radial-gradient(circle, transparent 150px, black); 51 | opacity: 0; 52 | transition: opacity var(--timing); 53 | } 54 | 55 | .character:hover::before { 56 | opacity: 1; 57 | } 58 | 59 | .character::after { 60 | content: ""; 61 | position: absolute; 62 | inset: 80% 0.5rem 0.5rem; 63 | translate: 0; 64 | transform: translateZ(-100px); 65 | background: black; 66 | filter: blur(1rem); 67 | z-index: 1; 68 | transition: rotate var(--timing), translate var(--timing); 69 | } 70 | 71 | .character:hover::after { 72 | rotate: x calc(var(--rotation) * -1); 73 | translate: 0 60px; 74 | } 75 | 76 | .bg-image { 77 | position: absolute; 78 | z-index: 10; 79 | height: 100%; 80 | object-fit: cover; 81 | object-position: center; 82 | } 83 | 84 | .logo-1, .logo-2, 85 | .front-image-1, .front-image-2 { 86 | position: absolute; 87 | } 88 | 89 | .logo-1, .logo-2 { 90 | z-index: 1000; 91 | width: 65%; 92 | scale: 1.125; 93 | margin-inline: auto; 94 | inset: auto 0 2rem; 95 | 96 | transition: var(--timing); 97 | } 98 | .logo-1{ 99 | translate: 0rem 3.5rem; 100 | } 101 | .character:hover .logo-1 { 102 | transform: translateY(-2rem) translateZ(20px); 103 | rotate: x calc(var(--rotation) * -1); 104 | } 105 | .character:hover .logo-2{ 106 | transform: translateY(-2rem) translateZ(20px); 107 | rotate: x calc(var(--rotation) * -1); 108 | } 109 | .front-image-1 { 110 | scale: 1.6; 111 | transform-origin: bottom; 112 | opacity: 0; 113 | z-index: 100; 114 | transition: var(--timing); 115 | translate: 0rem 10rem; 116 | } 117 | 118 | .front-image-2 { 119 | scale: 1.125; 120 | transform-origin: bottom; 121 | opacity: 0; 122 | z-index: 100; 123 | transition: var(--timing); 124 | translate: 1rem 0; 125 | } 126 | 127 | .character:hover .front-image-1, .character:hover .front-image-2{ 128 | opacity: 1; 129 | transform: translateY(-1.5rem) translateZ(-10px); 130 | rotate: x calc(var(--rotation) * -1); 131 | } 132 | -------------------------------------------------------------------------------- /Cool form/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 |
12 | 13 |
TWITTER
14 |
15 | 16 | 17 | 18 | 19 | 20 |
21 | MADE BY PRATHAM 22 | 23 |
24 | 25 | -------------------------------------------------------------------------------- /Cool form/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;900&display=swap'); 2 | 3 | input { 4 | caret-color: red; 5 | } 6 | 7 | body { 8 | margin: 0; 9 | width: 100vw; 10 | height: 100vh; 11 | background: #ecf0f3; 12 | display: flex; 13 | align-items: center; 14 | text-align: center; 15 | justify-content: center; 16 | place-items: center; 17 | overflow: hidden; 18 | font-family: poppins; 19 | } 20 | 21 | .container { 22 | position: relative; 23 | width: 350px; 24 | height: 500px; 25 | border-radius: 20px; 26 | padding: 40px; 27 | box-sizing: border-box; 28 | background: #ecf0f3; 29 | box-shadow: 14px 14px 20px #cbced1, -14px -14px 20px white; 30 | } 31 | 32 | .brand-logo { 33 | height: 100px; 34 | width: 100px; 35 | background: url("https://img.icons8.com/color/100/000000/twitter--v2.png"); 36 | margin: auto; 37 | border-radius: 50%; 38 | box-sizing: border-box; 39 | box-shadow: 7px 7px 10px #cbced1, -7px -7px 10px white; 40 | } 41 | 42 | .brand-title { 43 | margin-top: 10px; 44 | font-weight: 900; 45 | font-size: 1.8rem; 46 | color: #1DA1F2; 47 | letter-spacing: 1px; 48 | } 49 | 50 | .inputs { 51 | text-align: left; 52 | margin-top: 30px; 53 | } 54 | 55 | label, input, button { 56 | display: block; 57 | width: 100%; 58 | padding: 0; 59 | border: none; 60 | outline: none; 61 | box-sizing: border-box; 62 | } 63 | 64 | label { 65 | margin-bottom: 4px; 66 | } 67 | 68 | label:nth-of-type(2) { 69 | margin-top: 12px; 70 | } 71 | 72 | input::placeholder { 73 | color: gray; 74 | } 75 | 76 | input { 77 | background: #ecf0f3; 78 | padding: 10px; 79 | padding-left: 20px; 80 | height: 50px; 81 | font-size: 14px; 82 | border-radius: 50px; 83 | box-shadow: inset 6px 6px 6px #cbced1, inset -6px -6px 6px white; 84 | } 85 | 86 | button { 87 | color: white; 88 | margin-top: 20px; 89 | background: #1DA1F2; 90 | height: 40px; 91 | border-radius: 20px; 92 | cursor: pointer; 93 | font-weight: 900; 94 | box-shadow: 6px 6px 6px #cbced1, -6px -6px 6px white; 95 | transition: 0.5s; 96 | } 97 | 98 | button:hover { 99 | box-shadow: none; 100 | } 101 | 102 | a { 103 | position: absolute; 104 | font-size: 8px; 105 | bottom: 4px; 106 | right: 4px; 107 | text-decoration: none; 108 | color: black; 109 | background: yellow; 110 | border-radius: 10px; 111 | padding: 2px; 112 | } 113 | 114 | h1 { 115 | position: absolute; 116 | top: 0; 117 | left: 0; 118 | } -------------------------------------------------------------------------------- /EventCard/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Event Card 9 | 10 | 11 |
12 |
13 |
14 | Wed, Nov 24, 2022 15 | 6:00 IST 16 |
17 |

Sustainability in Product Design

18 |
19 | 20 | Mumbai 21 |
22 | 23 |
24 |
25 | user-1 26 | user-2 27 | user-3 28 |
29 |
30 | Attend 31 |
32 |
33 |
34 |
35 | 36 | -------------------------------------------------------------------------------- /EventCard/style.css: -------------------------------------------------------------------------------- 1 | *, 2 | *::before, 3 | *::after { 4 | padding: 0; 5 | margin: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | html { 10 | box-sizing: border-box; 11 | } 12 | 13 | .container { 14 | font-family: "Montserrat"; 15 | width: 100%; 16 | height: 100%; 17 | display: flex; 18 | color: rgb(71 85 105); 19 | justify-content: center; 20 | margin-top: 100px; 21 | } 22 | 23 | .event-card { 24 | font-weight: 700; 25 | width: 40%; 26 | border-radius: 20px; 27 | background-color: #fff; 28 | box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); 29 | padding: 40px; 30 | } 31 | 32 | .event-card-time { 33 | font-size: 14px; 34 | margin-bottom: 20px; 35 | } 36 | 37 | .event-card-heading { 38 | font-size: 22px; 39 | margin-bottom: 20px; 40 | color: rgb(30 41 59); 41 | } 42 | 43 | .event-card-location { 44 | display: flex; 45 | align-items: center; 46 | margin-bottom: 30px; 47 | } 48 | 49 | .event-card-location span:not(:last-child) { 50 | margin-right: 5px; 51 | } 52 | 53 | .event-card-location--icon svg { 54 | height: 25px; 55 | width: 25px; 56 | } 57 | 58 | .event-card-attendee-container { 59 | display: flex; 60 | justify-content: space-between; 61 | align-items: center; 62 | 63 | } 64 | 65 | .event-card-attendee-btn a { 66 | text-decoration: none; 67 | background-color: #112152; 68 | color: #fff; 69 | font-weight: 400; 70 | padding: 10px 20px; 71 | border-radius: 5px; 72 | transition: all .3s; 73 | } 74 | 75 | .event-card-attendee-btn a:hover { 76 | background-color: #19327f; 77 | } 78 | 79 | .event-card-attendee-profile { 80 | height: 40px; 81 | width: 40px; 82 | border-radius: 50%; 83 | outline: 3px solid #fff; 84 | } 85 | 86 | .event-card-attendee-profile:not(:first-child) { 87 | margin-left: -10px; 88 | } 89 | 90 | @media (max-width: 768px) { 91 | .event-card { 92 | width: 75%; 93 | } 94 | } -------------------------------------------------------------------------------- /FileUploader/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | File Uploader 8 | 9 | 10 | 11 |
12 |
13 |
14 |

Upload your files

15 |

File should be mp4, avi, mov

16 |
17 |
18 | 19 | 31 |
32 |
33 |
34 | 35 | 36 | -------------------------------------------------------------------------------- /FileUploader/style.css: -------------------------------------------------------------------------------- 1 | *, 2 | *::before, 3 | *::after { 4 | box-sizing: inherit; 5 | margin: 0; 6 | padding: 0; 7 | } 8 | 9 | html { 10 | box-sizing: border-box; 11 | } 12 | 13 | body { 14 | height: 100vh; 15 | color: rgba(17, 24, 39, 1); 16 | background-color: rgba(209, 213, 219, 1); 17 | } 18 | 19 | .container { 20 | display: flex; 21 | max-width: 24rem; 22 | justify-content: center; 23 | margin: 0 auto; 24 | } 25 | 26 | .file-uploader-card { 27 | display: flex; 28 | flex-direction: column; 29 | justify-content: center; 30 | align-items: center; 31 | background-color: rgba(255, 255, 255, 1); 32 | width: 75%; 33 | height: auto; 34 | margin: 5rem 0; 35 | border-radius: 0.5rem; 36 | box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 37 | 0 8px 10px -6px rgb(0 0 0 / 0.1); 38 | } 39 | 40 | .file-uploader-card-info { 41 | margin-bottom: 2.5rem; 42 | margin-top: 3rem; 43 | text-align: center; 44 | } 45 | 46 | h2 { 47 | font-size: 1.25rem; 48 | line-height: 1.75rem; 49 | } 50 | 51 | p { 52 | color: rgba(107,114,128, 1); 53 | font-weight: 100; 54 | font-size: .75rem; 55 | line-height: 1rem; 56 | } 57 | 58 | form { 59 | position: relative; 60 | background-color: rgba(243,244,246, 1); 61 | width: 80%; 62 | height: 8rem; 63 | margin-bottom: 2.5rem; 64 | border-radius: 0.5rem; 65 | box-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05); 66 | } 67 | 68 | input { 69 | display: none; 70 | } 71 | 72 | label { 73 | display: flex; 74 | flex-direction: column-reverse; 75 | justify-content: center; 76 | align-items: center; 77 | width: 100%; 78 | height: 100%; 79 | z-index: 20; 80 | cursor: pointer; 81 | } 82 | 83 | label > p { 84 | font-weight: 300; 85 | z-index: 10; 86 | font-size: .75rem; 87 | line-height: 1rem; 88 | text-align: center; 89 | color: rgba(107,114,128, 1) 90 | } 91 | 92 | svg { 93 | color: rgba(129,140,248, 1); 94 | width: 2rem; 95 | height: 2rem; 96 | z-index: 10; 97 | } -------------------------------------------------------------------------------- /Forms/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Forms 7 | 8 | 9 | 10 | 22 |
23 |
24 |

Your Data

25 |
26 | 27 |
28 |
29 | image 30 |
31 | 32 |
33 |

TELL US ABOUT YOURSELF...

34 |

MY NAME

35 |
36 | 37 | 38 |
39 |

GENDER

40 |
41 | 45 |
46 |

BIRTHDAY

47 |
48 | 49 |
50 |

LIVES IN

51 |
52 | 53 |
54 |
55 | 56 | 57 |
58 |
59 |
60 |
61 | 62 | -------------------------------------------------------------------------------- /Forms/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin :0 auto; 3 | padding :0; 4 | font-family: Verdana; 5 | background:rgba(0, 0, 0, 0.05); 6 | } 7 | main { 8 | padding-top: 80px; 9 | background-color: #FFFFFF; 10 | flex: 1; 11 | } 12 | 13 | 14 | #logo { 15 | object-fit: scale-down; 16 | width: 200px; 17 | height: 60px; 18 | } 19 | 20 | nav { 21 | display: flex; 22 | flex-direction: row; 23 | justify-content: space-between; 24 | align-items: center; 25 | background-color: #FFFFFF; 26 | height: 80px; 27 | border-bottom: 0.5px solid #555555; 28 | position: fixed; 29 | top: 0; 30 | width: 100%; 31 | } 32 | 33 | .bton { 34 | font-size: medium; 35 | text-decoration:none; 36 | transition-duration: 300ms; 37 | } 38 | 39 | .nav-btn { 40 | color: #9F9F9F; 41 | } 42 | 43 | .nav-btn:hover { 44 | color: #444444; 45 | } 46 | 47 | .nav-btn-active { 48 | color: #444444; 49 | } 50 | #nav-buttons { 51 | display: flex; 52 | justify-content: space-between; 53 | align-items: center; 54 | gap: 2rem; 55 | margin-right: 1.5rem; 56 | } 57 | 58 | 59 | header{ 60 | background-color: lightpink; 61 | padding: 1em; 62 | color: white; 63 | } 64 | 65 | 66 | .container{ 67 | display :flex; 68 | flex-direction: column; 69 | margin:1em auto; 70 | background-color: white; 71 | height : 100%; 72 | width:80%; 73 | padding: 1em; 74 | max-width: 850px; 75 | } 76 | 77 | h1{ 78 | text-align: center; 79 | } 80 | 81 | h2{ 82 | font-size: 2em; 83 | margin-top: 1rem; 84 | margin-bottom : 0; 85 | padding : 0 0; 86 | color: #7C4F46 87 | } 88 | 89 | h4{ 90 | margin-left : 0.2em; 91 | margin-bottom : 0.5em; 92 | color : #B3836B; 93 | 94 | } 95 | 96 | img{ 97 | display: none; 98 | } 99 | 100 | .form{ 101 | display: flex; 102 | } 103 | 104 | .text{ 105 | margin : 0.2rem; 106 | border : solid lightblue; 107 | padding : 0.5rem; 108 | font-family :sans-serif; 109 | color : lightblue; 110 | font-weight: bold; 111 | } 112 | 113 | select{ 114 | margin:0.2em; 115 | border : solid lightblue; 116 | padding : 0.5rem; 117 | font-family :sans-serif; 118 | color : lightblue; 119 | font-weight: bold; 120 | } 121 | 122 | button{ 123 | margin : 1em 0; 124 | margin-left: 0.2em; 125 | padding: 1em 2em; 126 | font-weight: bold; 127 | font-size: 1em; 128 | cursor: pointer; 129 | } 130 | 131 | .btn{ 132 | background-color: lightblue; 133 | border: none; 134 | border-radius : 0.5rem; 135 | box-shadow : 0 0.4rem 0.5rem rgba(173, 216, 230, 0.2), 0 6px 20px 0 rgba(173, 216, 230, 0.19); 136 | color:white; 137 | } 138 | 139 | .btn1{ 140 | background-color: white; 141 | border : none; 142 | color :rgba(173, 216, 230) 143 | } 144 | 145 | @media (min-width :900px){ 146 | img{ 147 | display : block; 148 | margin : 1em; 149 | } 150 | 151 | .container{ 152 | flex-direction: row; 153 | } 154 | 155 | .img-container{ 156 | width : 90%; 157 | max-width : 400px; 158 | } 159 | 160 | .right-item{ 161 | margin-left : 0 162 | } 163 | } 164 | 165 | @media (max-width :473px){ 166 | .form{ 167 | flex-direction: column; 168 | } 169 | } -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 Suraj Vishwakarma 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /LoginPage/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Document 10 | 11 | 12 |
13 | 28 | 43 |
44 |
45 |
46 |

Welcome Back!

47 |

To keep connected with us please login with your personal info

48 | 49 |
50 |
51 |

Hello, Friend!

52 |

Enter your personal details and start journey with us

53 | 54 |
55 |
56 |
57 |
58 | 59 | 65 | 66 | 67 | 80 | -------------------------------------------------------------------------------- /LoginPage/style.css: -------------------------------------------------------------------------------- 1 | 2 | @import url('https://fonts.googleapis.com/css?family=Montserrat:400,800'); 3 | 4 | * { 5 | box-sizing: border-box; 6 | } 7 | 8 | body { 9 | background: #e0dee3; 10 | display: flex; 11 | justify-content: center; 12 | align-items: center; 13 | flex-direction: column; 14 | font-family: 'Montserrat', sans-serif; 15 | height: 100vh; 16 | margin: -20px 0 50px; 17 | } 18 | 19 | h1 { 20 | font-weight: bold; 21 | margin: 0; 22 | } 23 | 24 | h2 { 25 | text-align: center; 26 | } 27 | 28 | p { 29 | font-size: 14px; 30 | font-weight: 100; 31 | line-height: 20px; 32 | letter-spacing: 0.5px; 33 | margin: 20px 0 30px; 34 | } 35 | 36 | span { 37 | font-size: 12px; 38 | } 39 | 40 | a { 41 | color: #333; 42 | font-size: 14px; 43 | text-decoration: none; 44 | margin: 15px 0; 45 | } 46 | 47 | button { 48 | border-radius: 20px; 49 | border: 1px solid rgb(79, 106, 243); 50 | background-color: rgb(79, 106, 243); 51 | color: #FFFFFF; 52 | font-size: 12px; 53 | font-weight: bold; 54 | padding: 12px 45px; 55 | letter-spacing: 1px; 56 | text-transform: uppercase; 57 | transition: transform 80ms ease-in; 58 | } 59 | 60 | button:active { 61 | transform: scale(0.95); 62 | } 63 | 64 | button:focus { 65 | outline: none; 66 | } 67 | 68 | button.ghost { 69 | background-color: transparent; 70 | border-color: #FFFFFF; 71 | } 72 | 73 | form { 74 | background-color: #FFFFFF; 75 | display: flex; 76 | align-items: center; 77 | justify-content: center; 78 | flex-direction: column; 79 | padding: 0 50px; 80 | height: 100%; 81 | text-align: center; 82 | } 83 | 84 | input { 85 | background-color: #eee; 86 | border: none; 87 | padding: 12px 15px; 88 | margin: 8px 0; 89 | width: 100%; 90 | } 91 | 92 | .container { 93 | background-color: #fff; 94 | border-radius: 10px; 95 | box-shadow: 0 14px 28px rgba(0,0,0,0.25), 96 | 0 10px 10px rgba(0,0,0,0.22); 97 | position: relative; 98 | overflow: hidden; 99 | width: 768px; 100 | max-width: 100%; 101 | min-height: 480px; 102 | } 103 | 104 | .form-container { 105 | position: absolute; 106 | top: 0; 107 | height: 100%; 108 | transition: all 0.6s ease-in-out; 109 | } 110 | 111 | .sign-in-container { 112 | left: 0; 113 | width: 50%; 114 | z-index: 2; 115 | } 116 | 117 | .container.right-panel-active .sign-in-container { 118 | transform: translateX(100%); 119 | } 120 | 121 | .sign-up-container { 122 | left: 0; 123 | width: 50%; 124 | opacity: 0; 125 | z-index: 1; 126 | } 127 | 128 | .container.right-panel-active .sign-up-container { 129 | transform: translateX(100%); 130 | opacity: 1; 131 | z-index: 5; 132 | animation: show 0.6s; 133 | } 134 | 135 | @keyframes show { 136 | 0%, 49.99% { 137 | opacity: 0; 138 | z-index: 1; 139 | } 140 | 141 | 50%, 100% { 142 | opacity: 1; 143 | z-index: 5; 144 | } 145 | } 146 | 147 | .overlay-container { 148 | position: absolute; 149 | top: 0; 150 | left: 50%; 151 | width: 50%; 152 | height: 100%; 153 | overflow: hidden; 154 | transition: transform 0.6s ease-in-out; 155 | z-index: 100; 156 | } 157 | 158 | .container.right-panel-active .overlay-container{ 159 | transform: translateX(-100%); 160 | } 161 | 162 | .overlay { 163 | background: rgb(79, 106, 243); 164 | background: -webkit-linear-gradient(to right, rgb(133, 84, 193) , rgb(79, 106, 243)); 165 | background: linear-gradient(to right, rgb(133, 84, 193) , rgb(79, 106, 243)); 166 | background-repeat: no-repeat; 167 | background-size: cover; 168 | background-position: 0 0; 169 | color: #FFFFFF; 170 | position: relative; 171 | left: -100%; 172 | height: 100%; 173 | width: 200%; 174 | transform: translateX(0); 175 | transition: transform 0.6s ease-in-out; 176 | } 177 | 178 | .container.right-panel-active .overlay { 179 | transform: translateX(50%); 180 | } 181 | 182 | .overlay-panel { 183 | position: absolute; 184 | display: flex; 185 | align-items: center; 186 | justify-content: center; 187 | flex-direction: column; 188 | padding: 0 40px; 189 | text-align: center; 190 | top: 0; 191 | height: 100%; 192 | width: 50%; 193 | transform: translateX(0); 194 | transition: transform 0.6s ease-in-out; 195 | } 196 | 197 | .overlay-left { 198 | transform: translateX(-20%); 199 | } 200 | 201 | .container.right-panel-active .overlay-left { 202 | transform: translateX(0); 203 | } 204 | 205 | .overlay-right { 206 | right: 0; 207 | transform: translateX(0); 208 | } 209 | 210 | .container.right-panel-active .overlay-right { 211 | transform: translateX(20%); 212 | } 213 | 214 | .social-container { 215 | margin: 20px 0; 216 | } 217 | 218 | .social-container a { 219 | border: 1px solid #DDDDDD; 220 | border-radius: 50%; 221 | display: inline-flex; 222 | justify-content: center; 223 | align-items: center; 224 | margin: 0 5px; 225 | height: 40px; 226 | width: 40px; 227 | } 228 | 229 | footer { 230 | background-color: #222; 231 | color: #fff; 232 | font-size: 14px; 233 | bottom: 0; 234 | position: fixed; 235 | left: 0; 236 | right: 0; 237 | text-align: center; 238 | z-index: 999; 239 | } 240 | 241 | footer p { 242 | margin: 10px 0; 243 | } 244 | 245 | footer i { 246 | color: red; 247 | } 248 | 249 | footer a { 250 | color: #3c97bf; 251 | text-decoration: none; 252 | } -------------------------------------------------------------------------------- /Modals/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Modal 8 | 9 | 10 | 11 |
12 |
13 |
14 | 15 | 16 | 17 |
18 | 19 |
20 |
21 | 22 |
23 |
Your session has expired
24 |
Enter you password to pick up where you lef off.
25 |
26 |
27 |
28 | 29 |
30 |
31 | 32 | 33 |
34 |
35 |
36 |
37 | 38 | -------------------------------------------------------------------------------- /Modals/style.css: -------------------------------------------------------------------------------- 1 | *, 2 | *::before, 3 | *::after { 4 | padding: 0; 5 | margin: 0; 6 | box-sizing: inherit 7 | } 8 | 9 | html { 10 | box-sizing: border-box; 11 | height: 100%; 12 | } 13 | body { 14 | color: rgb(17 24 39); 15 | height: 100%; 16 | background-color: rgba(0,0,0, 0.8) 17 | } 18 | 19 | .container { 20 | font-family: "Montserrat"; 21 | width: 100%; 22 | display: flex; 23 | color: rgb(75 85 99); 24 | justify-content: center; 25 | 26 | } 27 | 28 | .card { 29 | width: 30%; 30 | border-radius: 20px; 31 | background-color: #fff; 32 | box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); 33 | padding: 20px; 34 | z-index: 999; 35 | } 36 | 37 | .card-modal-close-btn { 38 | display: flex; 39 | flex-direction: row-reverse; 40 | color: rgb(148 163 184); 41 | margin-bottom: 30px; 42 | } 43 | .card-modal-close-btn-icon { 44 | padding: 5px; 45 | border-radius: 50%; 46 | background-color: rgb(241 245 249); 47 | line-height: 0; 48 | 49 | } 50 | .card-modal-close-btn svg { 51 | height: 25px; 52 | } 53 | 54 | h6 { 55 | font-size: 24px; 56 | font-family: serif; 57 | letter-spacing: 1px; 58 | color: #000; 59 | margin-bottom: 15px; 60 | } 61 | 62 | .card-modal-description { 63 | font-size: 12px; 64 | font-weight: 500; 65 | margin-bottom: 15px; 66 | } 67 | 68 | .card-modal-field-label { 69 | margin-bottom: 7px; 70 | } 71 | 72 | .card-modal-field-label label { 73 | font-weight: 700; 74 | font-size: 12px; 75 | } 76 | 77 | 78 | input { 79 | padding: 10px; 80 | border: 1px solid rgb(203 213 225); 81 | border-radius: 5px; 82 | width: 75%; 83 | margin-right: 5px; 84 | } 85 | button { 86 | width: 20%; 87 | border: none; 88 | padding: 10px; 89 | background-color: #e23a5e; 90 | color: #fff; 91 | border-radius: 5px; 92 | } 93 | 94 | @media (max-width: 1280px) { 95 | .card { 96 | width: 50%; 97 | } 98 | } 99 | 100 | @media (max-width: 1024px) { 101 | .card { 102 | width: 50%; 103 | } 104 | } 105 | 106 | @media (max-width: 768px) { 107 | .card { 108 | width: 75%; 109 | } 110 | } 111 | 112 | @media (max-width: 546px) { 113 | .card { 114 | width: 100%; 115 | padding: 10px; 116 | } 117 | 118 | } 119 | 120 | -------------------------------------------------------------------------------- /Pop-up/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 |
12 |
13 | 14 | 15 | 16 | 17 |
18 | 19 |
20 | We use cookie for improving user 21 | experience, analytics and marketing. 22 |
23 |
24 | That's fine! 25 |
26 |
27 |
28 |
29 | 30 | -------------------------------------------------------------------------------- /Pop-up/style.css: -------------------------------------------------------------------------------- 1 | *, 2 | *::before, 3 | *::after { 4 | padding: 0; 5 | margin: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | html { 10 | box-sizing: border-box; 11 | height: 100%; 12 | } 13 | body { 14 | color: rgb(17 24 39); 15 | height: 100%; 16 | } 17 | 18 | .container { 19 | font-family: "Montserrat"; 20 | width: 100%; 21 | display: flex; 22 | color: rgb(75 85 99); 23 | justify-content: center; 24 | } 25 | 26 | .card-pop-up { 27 | width: 30%; 28 | border-radius: 20px; 29 | background-color: #fff; 30 | box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); 31 | padding: 20px; 32 | } 33 | 34 | .card-pop-up-close-btn { 35 | color: #c0c5cb; 36 | display: flex; 37 | flex-direction: row-reverse; 38 | margin-bottom: 20px; 39 | } 40 | 41 | .card-pop-up-details { 42 | display: flex; 43 | flex-direction: column; 44 | align-items: center; 45 | } 46 | 47 | .card-pop-up-description { 48 | display: flex; 49 | flex-direction: column; 50 | font-size: 12px; 51 | font-weight: 500; 52 | margin-bottom: 30px; 53 | } 54 | 55 | .card-pop-up-btn a { 56 | text-decoration: none; 57 | color: #fff; 58 | padding: 8px 30px; 59 | font-size: 12px; 60 | background-color: #ed6755; 61 | border-radius: 5px; 62 | box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); 63 | transition: background-color 0.3s; 64 | } 65 | 66 | .card-pop-up-btn a:hover { 67 | background-color: #ed5844; 68 | } -------------------------------------------------------------------------------- /PriceCard/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 |
12 |
13 |
14 |
549, -
15 |
Pay now, later or split up.
16 |
17 |
18 | 19 |
20 |
21 |
22 | 18 in online storage 23 | - can be shipped today 24 |
25 |
    26 |
  • 27 | 28 | 29 | 30 | Free shipping over USD 800 31 |
    • 32 |
  • 33 | 34 | 35 | 36 | Lightning fast delivery 37 |
    • 38 |
39 | 40 |
41 |
See how fast you can get the item
42 |
43 | 44 | 45 | 46 | 47 | 48 | 49 |
50 |
51 | 52 |
53 | 54 |
55 |
56 |
57 |
58 | 59 | -------------------------------------------------------------------------------- /PriceCard/style.css: -------------------------------------------------------------------------------- 1 | .container { 2 | font-family: "Montserrat"; 3 | width: 100%; 4 | height: 100%; 5 | display: flex; 6 | color: rgb(75 85 99); 7 | justify-content: center; 8 | } 9 | 10 | .card { 11 | width: 30%; 12 | border-radius: 20px; 13 | background-color: #fff; 14 | box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); 15 | padding: 40px; 16 | } 17 | 18 | .card-price { 19 | margin-bottom: 30px; 20 | } 21 | 22 | .card-price--label { 23 | font-size: 27px; 24 | font-weight: 700; 25 | margin-bottom: 10px; 26 | color: #000; 27 | } 28 | 29 | .card-buy { 30 | text-align: center; 31 | } 32 | 33 | .card-btn { 34 | width: 100%; 35 | border: none; 36 | border-radius: 10px; 37 | padding: 20px; 38 | text-transform: uppercase; 39 | font-weight: 500; 40 | cursor: pointer; 41 | margin-bottom: 20px; 42 | } 43 | 44 | .card-buy--btn { 45 | background: linear-gradient(to right, rgb(98, 244, 152), rgb(116, 244, 229)) 46 | } 47 | 48 | .card-pick-up-btn { 49 | background: linear-gradient(to right, #a0c0ff, #b1acff) 50 | } 51 | 52 | .card-detail-description--primary-text { 53 | font-weight: 500; 54 | } 55 | 56 | .card-detail-list { 57 | list-style: none; 58 | padding: 0; 59 | } 60 | 61 | .card-detail-list-item { 62 | display: flex; 63 | align-items: center; 64 | font-weight: 500; 65 | } 66 | 67 | .card-detail-list-item:not(:last-child) { 68 | margin-bottom: 5px; 69 | } 70 | 71 | .check-detail-list-item--check-icon { 72 | border-radius: 50%; 73 | height: 25px; 74 | width: 25px; 75 | display: flex; 76 | justify-content: center; 77 | align-items: center; 78 | background-color: rgb(233, 235, 255); 79 | margin-right: 5px; 80 | } 81 | .check-detail-list-item--check-icon svg { 82 | height: 20px; 83 | width: 20px; 84 | } 85 | 86 | .card-zipcode { 87 | padding: 15px; 88 | border-radius: 10px; 89 | font-weight: 500; 90 | color: #000; 91 | background-color: rgb(233, 235, 255); 92 | } 93 | 94 | .card-zipcode-detail { 95 | margin-bottom: 15px; 96 | } 97 | 98 | .card-zipcode-form { 99 | width: 100%; 100 | display: flex; 101 | position: relative; 102 | align-items: center; 103 | } 104 | 105 | .card-zipcode-input { 106 | width: 60%; 107 | border: 1px solid rgb(185, 203, 228); 108 | padding: 15px; 109 | padding-left: 42px; 110 | font-size: 18px; 111 | border-radius: 5px; 112 | background-color: inherit; 113 | margin-right: 10px; 114 | } 115 | 116 | .card-zipcode-input::placeholder { 117 | color: rgb(31 41 55); 118 | } 119 | 120 | .card-zipcode-btn { 121 | width: 40%; 122 | padding: 15px; 123 | border-radius: 5px; 124 | background-color: #fff; 125 | border: none; 126 | cursor: pointer; 127 | font-weight: bold; 128 | } 129 | 130 | .card-zipcode-form-input-icon { 131 | position: absolute; 132 | left: 10px; 133 | 134 | } 135 | 136 | .card-zipcode-form-input-icon svg { 137 | height: 25px; 138 | width: 25px; 139 | } 140 | 141 | .card-pick-up { 142 | margin-top: 30px; 143 | } 144 | 145 | @media (max-width: 768px) { 146 | .card { 147 | width: 75%; 148 | } 149 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | # 🎨 UI-UX-Design 3 | 4 | The Repository is created to encourage developers to create UI components. Each component is stored in the main directory with the name of the component. If you want to create the same component with a different style, make sure to use your name after the directory name. 5 | 6 | ### 💻 For CSS Lovers Who Want to Learn UI/UX Designs 7 | 8 | # UI-UX-Design gif 9 | 10 | This Repository is established in order to encourage developers to design UI components. This component is generated in the main directory with the component name. 11 | If you wish to develop the same component in a different style, be sure to include your name after the directory name. 12 | 13 | ## This is for CSS lovers who wants to learn UI/UX Designs gif 14 | 15 | ## Contribution gif 16 | You can check the `CONTRIBUTION.md` for guidelines for contribution. 17 | 18 | ## 🌐 Visit the site [UI/UX Design](https://surajondev.github.io/UI-UX-Design/) 19 | 20 | ## 🛠️ Technologies Used 21 | 22 | - HTML5 HTML 23 | - CSS3 CSS 24 | 25 | This repository serves as a resource for developers to explore and create various UI components using CSS. Whether you're a beginner or an experienced developer, this repository can be a valuable asset for honing your UI/UX design skills. The components are organized in a user-friendly manner, making it easy to find what you're looking for. 26 | 27 | Feel free to contribute your own UI components and designs. Your contributions are highly appreciated and will help create a rich and diverse collection of UI/UX designs. 28 | 29 | ## 🌟 Get Started 30 | 31 | To get started, simply visit the provided link and explore the various UI components available. Dive into the code to understand how each component is designed and implemented. Feel free to use them in your projects or as inspiration for your own designs. 32 | 33 | ## 🤝 Contribution 34 | 35 | We welcome contributions from the community. Please read the `Contribution.md` file for guidelines on how to contribute to this repository. Whether it's adding new components or improving existing ones, your contributions can make a significant impact. 36 | 37 | ## 📄 License 38 | 39 | The code in this repository is licensed under the MIT License. 40 | -------------------------------------------------------------------------------- /ReviewCard/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 |
12 |

13 | How likely are you to recommend 14 | Dev Dojo to your colleagues? 15 |

16 |
17 |
18 | 19 | 20 |
21 |
22 | 23 | 24 |
25 |
26 | 27 | 28 |
29 |
30 | 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 | 67 |
68 | 71 |
72 |
73 |
74 |
75 | 76 | 77 | -------------------------------------------------------------------------------- /ReviewCard/style.css: -------------------------------------------------------------------------------- 1 | *, 2 | *::after, 3 | *::before { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: inherit; 7 | } 8 | 9 | html { 10 | box-sizing: border-box; 11 | } 12 | 13 | body { 14 | display: flex; 15 | flex-direction: column; 16 | justify-content: center; 17 | align-items: center; 18 | background-color: rgb(219,234,254); 19 | min-height: 100vh; 20 | } 21 | 22 | .container { 23 | display: flex; 24 | flex-direction: column; 25 | /* min-height: 100vh; */ 26 | padding: 2.5rem; 27 | background-color: #fff; 28 | border-radius: 0.5rem; 29 | width: 80%; 30 | box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); 31 | } 32 | 33 | @media (min-width: 1024px) { 34 | .container { 35 | width: 40%; 36 | } 37 | } 38 | 39 | h1 { 40 | display: flex; 41 | flex-direction: column; 42 | text-align: center; 43 | margin-bottom: 1.5rem; 44 | font-size: 1.25rem; 45 | line-height: 1.75rem; 46 | font-weight: 600; 47 | } 48 | 49 | .review-rating-card { 50 | display: flex; 51 | flex-wrap: wrap; 52 | justify-content: center; 53 | } 54 | 55 | .review-rating-card-number { 56 | display: flex; 57 | margin: 0.375rem; 58 | } 59 | 60 | .review-rating-card-number input { 61 | display: none; 62 | } 63 | 64 | .review-rating-card-number label { 65 | display: flex; 66 | justify-content: center; 67 | align-items: center; 68 | color: rgb(75,85,99); 69 | font-weight: 600; 70 | text-align: center; 71 | background-color: rgb(249,250,251); 72 | border-color: rgb(229,231,235); 73 | border-width: 1px; 74 | border-radius: 50%; 75 | cursor: pointer; 76 | width: 3rem; 77 | height: 3rem; 78 | } 79 | 80 | .review-rating-card-number label:hover { 81 | color: rgb(249,250,251); 82 | background-color: rgb(244,114,182); 83 | border-color: rgb(252,231,243); 84 | } 85 | 86 | textarea { 87 | outline: 2px solid transparent; 88 | outline-offset: 2px; 89 | color: rgb(107,114,128); 90 | padding-bottom: 2rem; 91 | padding: 1rem; 92 | border-color: rgb(229,231,235); 93 | border-width: 2px; 94 | border-radius: 0.375rem; 95 | resize: none; 96 | width: 100%; 97 | margin-top: 1.5rem; 98 | } 99 | 100 | textarea:focus { 101 | border: 2px solid rgb(147,197,253) 102 | } 103 | 104 | .review-rating-card-button { 105 | display: flex; 106 | flex-direction: column-reverse; 107 | } 108 | 109 | .review-rating-card-button > button { 110 | color: rgb(249,250,251); 111 | padding: 0.8rem 1.5rem; 112 | background-color: rgb(17,24,39); 113 | border-radius: 0.25rem; 114 | border: none; 115 | cursor: pointer; 116 | } -------------------------------------------------------------------------------- /SearchBar/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Search Bar 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 27 |
28 |
29 |
30 |
31 |

Search Bars

32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 | 40 | search 41 | 42 | 43 |
44 |
45 |
46 |
47 |
48 |
49 |

Recent Searches

50 |
51 |
52 |
53 | 54 |
55 |
56 |
57 | 58 | search 59 | 60 | 61 |
62 |
63 |
64 |
65 |
66 |
67 |

Recent Searches

68 |
69 |
70 |
71 |
72 | 73 | 74 |
75 | 76 | -------------------------------------------------------------------------------- /SearchBar/script.js: -------------------------------------------------------------------------------- 1 | function searchFocus() 2 | { 3 | document.getElementById("search-sug-box").style.display = 'block' 4 | document.getElementById("search-container").style.transform = "translateY(-10%)" 5 | document.getElementById("search-container").style.border = '2px solid rgba(0, 119, 255, 0.642)' 6 | document.getElementById("search-sug-header").innerText = 'Recent Searches' 7 | } 8 | 9 | function searchBlur() 10 | { 11 | document.getElementById("search-container").style.border = '2px solid rgba(0, 0, 0, 0.08)' 12 | document.getElementById("search-container").style.transform = "translateY(10%)" 13 | document.getElementById("search-sug-box").style.display = 'none' 14 | } 15 | 16 | function searchKeyInput() 17 | { 18 | document.getElementById("search-sug-header").innerText = 'All Results' 19 | } 20 | 21 | function searchFocusDark() 22 | { 23 | document.getElementById("search-sug-box-dark").style.display = 'block' 24 | document.getElementById("search-container-dark").style.transform = "translateY(-10%)" 25 | document.getElementById("search-container-dark").style.border = '2px solid rgba(0, 119, 255, 0.907)' 26 | document.getElementById("search-sug-header-dark").innerText = 'Recent Searches' 27 | document.body.style.backgroundColor = '#121212' 28 | document.getElementById("page-heading").style.color = 'rgb(169, 169, 169)' 29 | } 30 | 31 | function searchBlurDark() 32 | { 33 | document.getElementById("search-container-dark").style.border = '2px solid rgba(0, 0, 0, 0.08)' 34 | document.getElementById("search-container-dark").style.transform = "translateY(10%)" 35 | document.getElementById("search-sug-box-dark").style.display = 'none' 36 | document.body.style.transitionDuration = '0.2s' 37 | document.body.style.backgroundColor = '#ffffff' 38 | document.getElementById("page-heading").style.color = 'black' 39 | } 40 | 41 | function searchKeyInputDark() 42 | { 43 | document.getElementById("search-sug-header-dark").innerText = 'All Results' 44 | } -------------------------------------------------------------------------------- /SearchBar/style.css: -------------------------------------------------------------------------------- 1 | #page-heading 2 | { 3 | font-family: 'Poppins', sans-serif; 4 | margin-top: 100px; 5 | } 6 | #search-container 7 | { 8 | position: relative; 9 | width: 35%; 10 | margin-top: 50px; 11 | border-radius: 5px 5px 5px 5px; 12 | border: 2px solid rgba(0, 0, 0, 0.08); 13 | transition: 0.2s all; 14 | outline: none; 15 | background-color: white; 16 | } 17 | .search-icon 18 | { 19 | position: relative; 20 | color: rgb(169, 169, 169); 21 | top: 6.5px; 22 | left:13px; 23 | display: block; 24 | } 25 | .search-box 26 | { 27 | border: none; 28 | outline: none; 29 | background-color: transparent; 30 | margin-left: 10px; 31 | padding-left: 10px; 32 | padding-top: 10px; 33 | padding-bottom: 10px; 34 | color: rgb(58, 58, 58); 35 | border-radius: 2px; 36 | width: 80%; 37 | background-color: white; 38 | } 39 | #search-container:hover 40 | { 41 | border: 2px solid rgba(0, 119, 255, 0.642); 42 | transform: translateY(-10%); 43 | transition: 0.2s all; 44 | 45 | } 46 | #search-sug-box 47 | { 48 | display: none; 49 | box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px; 50 | width: 35%; 51 | border-radius: 5px; 52 | margin-top: 20px; 53 | height: 300px; 54 | transition: 0.2s all; 55 | } 56 | #search-sug-header 57 | { 58 | padding-top: 15px; 59 | padding-bottom: 15px; 60 | font-family: 'Poppins', sans-serif; 61 | color: rgb(163, 163, 163); 62 | padding-left: 20px; 63 | font-size: 1em; 64 | border-radius: 5px 5px 0px 0px; 65 | } 66 | 67 | @media (max-width: 768px) 68 | { 69 | #search-container 70 | { 71 | width: 60%; 72 | transition: 0.1s all; 73 | } 74 | #search-sug-box 75 | { 76 | width: 60%; 77 | transition: 0.1s all; 78 | } 79 | #search-sug-header 80 | { 81 | font-size: 0.8em; 82 | } 83 | } 84 | 85 | #search-container-dark 86 | { 87 | position: relative; 88 | width: 35%; 89 | margin-top: 50px; 90 | border-radius: 5px 5px 5px 5px; 91 | border: 2px solid rgba(0, 0, 0, 0.08); 92 | transition: 0.2s all; 93 | outline: none; 94 | background-color: #252525; 95 | } 96 | .search-icon-dark 97 | { 98 | position: relative; 99 | color: rgb(163, 163, 163); 100 | top: 6.5px; 101 | left:13px; 102 | display: block; 103 | } 104 | .search-box-dark 105 | { 106 | border: none; 107 | outline: none; 108 | background-color: transparent; 109 | margin-left: 10px; 110 | padding-left: 10px; 111 | padding-top: 10px; 112 | padding-bottom: 10px; 113 | color: rgb(163, 163, 163); 114 | border-radius: 2px; 115 | width: 80%; 116 | } 117 | #search-container-dark:hover 118 | { 119 | border: 2px solid rgba(0, 119, 255, 0.907); 120 | transform: translateY(-10%); 121 | transition: 0.2s all; 122 | } 123 | #search-sug-box-dark 124 | { 125 | display: none; 126 | box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px; 127 | width: 35%; 128 | border-radius: 5px; 129 | margin-top: 20px; 130 | height: 300px; 131 | transition: 0.2s all; 132 | background-color: #252525; 133 | } 134 | #search-sug-header-dark 135 | { 136 | padding-top: 15px; 137 | padding-bottom: 15px; 138 | font-family: 'Poppins', sans-serif; 139 | color: rgb(163, 163, 163); 140 | padding-left: 20px; 141 | font-size: 1em; 142 | border-radius: 5px 5px 0px 0px; 143 | } 144 | 145 | @media (max-width: 768px) 146 | { 147 | #search-container-dark 148 | { 149 | width: 60%; 150 | transition: 0.1s all; 151 | } 152 | #search-sug-box-dark 153 | { 154 | width: 60%; 155 | transition: 0.1s all; 156 | } 157 | #search-sug-header-dark 158 | { 159 | font-size: 0.8em; 160 | } 161 | } 162 | main { 163 | padding-top: 80px; 164 | background-color: #FFFFFF; 165 | flex: 1; 166 | } 167 | 168 | 169 | #logo { 170 | object-fit: scale-down; 171 | width: 200px; 172 | height: 60px; 173 | } 174 | 175 | nav { 176 | display: flex; 177 | flex-direction: row; 178 | justify-content: space-between; 179 | align-items: center; 180 | background-color: #FFFFFF; 181 | height: 80px; 182 | border-bottom: 0.5px solid #555555; 183 | position: fixed; 184 | top: 0; 185 | width: 100%; 186 | } 187 | 188 | .bton { 189 | font-size: medium; 190 | text-decoration:none; 191 | transition-duration: 300ms; 192 | } 193 | 194 | .nav-btn { 195 | color: #9F9F9F; 196 | } 197 | 198 | .nav-btn:hover { 199 | color: #444444; 200 | } 201 | 202 | .nav-btn-active { 203 | color: #444444; 204 | } 205 | #nav-buttons { 206 | display: flex; 207 | justify-content: space-between; 208 | align-items: center; 209 | gap: 2rem; 210 | margin-right: 1.5rem; 211 | } -------------------------------------------------------------------------------- /Select User/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Select User 9 | 10 | 11 | 23 |
24 |
25 |
26 |
27 | Character 28 |
29 | 30 |
31 | Player 1 32 |

Taylor

33 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Error laudantium sequi facere mollitia saepe.

34 |
35 | 36 |
37 |
38 |
25
39 |
Rank
40 |
41 |
42 |
329
43 |
Stars
44 |
45 |
46 |
10
47 |
Achievements
48 |
49 |
50 | 51 |
52 | 53 |
54 | 55 |
56 | 57 |
58 |
59 | Character 60 |
61 | 62 |
63 | Player 2 64 |

Ester

65 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Error laudantium sequi facere mollitia saepe.

66 |
67 | 68 |
69 |
70 |
25
71 |
Rank
72 |
73 |
74 |
329
75 |
Stars
76 |
77 |
78 |
10
79 |
Achievements
80 |
81 |
82 |
83 | 84 |
85 | 86 |
87 | 88 |
89 |
90 | Character 91 |
92 | 93 |
94 | New? 95 |

Register

96 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Error laudantium sequi facere mollitia saepe.

97 |
98 | 99 |
100 |
101 |
ㅤㅤ
102 |
ㅤㅤㅤ
103 |
104 |
105 |
ㅤㅤ
106 |
ㅤㅤㅤ
107 |
108 |
109 |
ㅤㅤ
110 |
ㅤㅤㅤ
111 |
112 |
113 |
114 | 115 | 116 |
117 |
118 | 119 |
120 | 121 |
122 | 123 |
124 |
125 | 126 | -------------------------------------------------------------------------------- /Select User/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | font-family: 'Montserrat', sans-serif; 6 | } 7 | 8 | body { 9 | font-size: 14px; 10 | min-height: 100vh; 11 | width: 100%; 12 | /* background: url(./images/bk.jpg); */ 13 | background-color: #5e6d87; 14 | display: flex; 15 | justify-content: center; 16 | align-items: center; 17 | padding: 20px; 18 | } 19 | 20 | main { 21 | padding-top: 80px; 22 | background-color: #FFFFFF; 23 | flex: 1; 24 | } 25 | 26 | 27 | #logo { 28 | object-fit: scale-down; 29 | width: 200px; 30 | height: 60px; 31 | } 32 | 33 | nav { 34 | display: flex; 35 | flex-direction: row; 36 | justify-content: space-between; 37 | align-items: center; 38 | background-color: #FFFFFF; 39 | height: 80px; 40 | border-bottom: 0.5px solid #555555; 41 | position: fixed; 42 | top: 0; 43 | width: 100%; 44 | } 45 | 46 | .bton { 47 | font-size: medium; 48 | text-decoration:none; 49 | transition-duration: 300ms; 50 | } 51 | 52 | .nav-btn { 53 | color: #9F9F9F; 54 | } 55 | 56 | .nav-btn:hover { 57 | color: #444444; 58 | } 59 | 60 | .nav-btn-active { 61 | color: #444444; 62 | } 63 | #nav-buttons { 64 | display: flex; 65 | justify-content: space-between; 66 | align-items: center; 67 | gap: 2rem; 68 | margin-right: 1.5rem; 69 | } 70 | img { 71 | border-radius: 100px; 72 | 73 | } 74 | 75 | .container { 76 | /* position: relative; */ 77 | display: flex; 78 | justify-content: center; 79 | align-items: center; 80 | flex-wrap: wrap; 81 | } 82 | 83 | .card { 84 | position: relative; 85 | width: 270px; 86 | margin: 2em; 87 | display: grid; 88 | grid-template-columns: 1fr; 89 | grid-template-rows: 180px 1fr auto; 90 | border-radius: 30px; 91 | } 92 | 93 | .card-body, 94 | .card-footer { 95 | display: flex; 96 | flex-direction: column; 97 | align-items: center; 98 | } 99 | 100 | .card-image { 101 | position: relative; 102 | border-top-left-radius: 18px; 103 | border-top-right-radius: 18px; 104 | z-index: 2; 105 | display: flex; 106 | justify-content: center; 107 | align-items: center; 108 | /* background: url(./images/bk1.jpg); */ 109 | background-color: #4891BA; 110 | background-size: cover; 111 | } 112 | 113 | .card-image img { 114 | max-width: 95%; 115 | max-height: 95%; 116 | transition: max-width 0.4s, max-height 0.4s; 117 | } 118 | 119 | .card:hover .card-image img { 120 | max-width: 120%; 121 | max-height: 120%; 122 | } 123 | 124 | 125 | .card { 126 | box-shadow: 0 15px 30px -10px #000; 127 | cursor: pointer; 128 | } 129 | 130 | .card:hover { 131 | box-shadow: 4px 4px 25px rgba(0, 0, 0, 0.2); 132 | } 133 | 134 | .card:nth-child(2) .card-image { 135 | 136 | background-color: #9898ea; 137 | } 138 | 139 | .card:nth-child(3) .card-image { 140 | 141 | background-color: #1A1A2A; 142 | } 143 | 144 | 145 | .card-body { 146 | background: #fff; 147 | padding: 20px 28px; 148 | } 149 | 150 | .card-body .power { 151 | font-weight: bolder; 152 | } 153 | 154 | .card-body h2 { 155 | font-size: 1.8em; 156 | margin: 4px auto 12px; 157 | } 158 | 159 | .card-body p { 160 | color: gray; 161 | font-size: 1.1em; 162 | line-height: 20px; 163 | text-align: center; 164 | } 165 | 166 | .card-footer { 167 | width: 100%; 168 | display: grid; 169 | grid-template-columns: 1fr 1fr 1fr; 170 | border-bottom-left-radius: 18px; 171 | border-bottom-right-radius: 18px; 172 | } 173 | 174 | .card-footer .info { 175 | font-size: 0.9em; 176 | padding: 10px; 177 | color: #fff; 178 | display: flex; 179 | flex-direction: column; 180 | align-items: center; 181 | border-right: 1px solid rgba(0, 0, 0, 0.1); 182 | } 183 | 184 | .card-footer .info:last-child { 185 | border: none; 186 | } 187 | 188 | .card-footer .info .type { 189 | text-transform: uppercase; 190 | margin-top: 2px; 191 | font-size: 0.8em; 192 | } 193 | 194 | .card:nth-child(1) .card-footer { 195 | background: #4891ba; 196 | } 197 | .card:nth-child(2) .card-footer { 198 | background: #9898ea; 199 | } 200 | .card:nth-child(3) .card-footer { 201 | background: #1A1A2A; 202 | } 203 | .card:nth-child(4) .card-footer { 204 | background: #9e5161; 205 | } 206 | 207 | .card:nth-child(1) .power { 208 | color: #4891ba; 209 | } 210 | .card:nth-child(2) .power { 211 | color: #9898ea; 212 | } 213 | .card:nth-child(3) .power { 214 | color: #1A1A2A; 215 | } 216 | .card:nth-child(4) .power { 217 | color: #9e5161; 218 | } 219 | 220 | .selector { 221 | position: absolute; 222 | top: 0; 223 | left: 0; 224 | width: 100%; 225 | height: 100%; 226 | background-color: rgba(255, 255, 255, 0.85); 227 | border-radius: 18px; 228 | 229 | display: flex; 230 | justify-content: center; 231 | align-items: center; 232 | opacity: 0; 233 | transition: opacity 0.5s; 234 | } 235 | 236 | .card:hover .selector { 237 | opacity: 1; 238 | } 239 | 240 | .selector button { 241 | background-color: #4891ba; 242 | color: #fff; 243 | outline: none; 244 | border: 2px solid currentColor; 245 | cursor: pointer; 246 | padding: 12px 20px; 247 | transform: translateY(60px); 248 | border-radius: 50px; 249 | text-transform: uppercase; 250 | letter-spacing: 2px; 251 | font-size: 1.1em; 252 | font-weight: bolder; 253 | transition: opacity 0.3s; 254 | } 255 | 256 | .selector button:hover { 257 | opacity: 0.8; 258 | } 259 | 260 | .card:nth-child(2) .selector button { 261 | background-color: #9898ea; 262 | } 263 | .card:nth-child(3) .selector button { 264 | background-color: #1A1A2A; 265 | } 266 | .card:nth-child(4) .selector button { 267 | background-color: #1A1A2A; 268 | } 269 | 270 | footer{ 271 | margin-top: 500px; 272 | background-color: black; 273 | } 274 | 275 | .home{ 276 | text-decoration: none; 277 | color: white; 278 | } 279 | 280 | .link{ 281 | text-decoration: none; 282 | color: white; 283 | } 284 | 285 | .back { 286 | position: relative; 287 | /* background-color: black; */ 288 | text-align: center; 289 | width: 270px; 290 | height: 20px; 291 | margin: 2em; 292 | border-radius: 30px; 293 | 294 | } 295 | 296 | .back .bk { 297 | background-color: #8fa1bf; 298 | color: #fff; 299 | outline: none; 300 | border: 2px solid currentColor; 301 | cursor: pointer; 302 | padding: 12px 20px; 303 | /* transform: translateY(60px); */ 304 | border-radius: 50px; 305 | text-transform: uppercase; 306 | letter-spacing: 2px; 307 | font-size: 1.1em; 308 | font-weight: bolder; 309 | transition: opacity 0.3s; 310 | } 311 | 312 | .back .bk:hover { 313 | opacity: 0.8; 314 | } -------------------------------------------------------------------------------- /Share-Button/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Share Button 8 | 9 | 10 | 11 | 12 | 21 | 22 | -------------------------------------------------------------------------------- /Share-Button/style.css: -------------------------------------------------------------------------------- 1 | body{ 2 | margin: 0; 3 | padding: 0; 4 | height: 100vh; 5 | display: flex; 6 | align-items: center; 7 | justify-content: center; 8 | background-color: #eee; 9 | } 10 | 11 | .share-btn{ 12 | background: linear-gradient(30deg, #3498db, #5363d8); 13 | color: #fff; 14 | font-family: "Montserrat"; 15 | border: 0; 16 | padding: 16px 40px; 17 | font-size: 20px; 18 | font-weight: 600; 19 | cursor: pointer; 20 | overflow: hidden; 21 | position: relative; 22 | border-radius: 40px; 23 | transition: .3s; 24 | } 25 | 26 | .sm-btns{ 27 | position: absolute; 28 | width: 100%; 29 | left: 0; 30 | display: flex; 31 | justify-content: space-around; 32 | bottom: 0; 33 | transform: translateY(100%); 34 | } 35 | 36 | .sm-btns a{ 37 | color: #fff; 38 | transition: .3s; 39 | } 40 | 41 | .share-btn:hover{ 42 | border-radius: 0; 43 | } 44 | 45 | .text, .icon{ 46 | display: inline-block; 47 | transition: .3s; 48 | } 49 | 50 | .icon{ 51 | transition-delay: 60ms; 52 | } 53 | 54 | .sm-btns a:nth-child(2){ 55 | transition-delay: 60ms; 56 | } 57 | 58 | .sm-btns a:nth-child(3){ 59 | transition-delay: 120ms; 60 | } 61 | 62 | .share-btn:hover .text, 63 | .share-btn:hover .icon, 64 | .share-btn:hover .sm-btns a{ 65 | transform: translateY(-40px); 66 | } 67 | 68 | .sm-btns a:hover{ 69 | opacity: .7; 70 | } -------------------------------------------------------------------------------- /Sign-up/pruddy storez.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/surajondev/UI-UX-Design/e124bedd064ac8e3f934f09ee30af66e1df70a48/Sign-up/pruddy storez.png -------------------------------------------------------------------------------- /Sign-up/sign up.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 11 | 12 | 13 | 14 | 15 |
16 |
17 | 18 |

Please sign in

19 | 20 |
21 | 22 | 23 |
24 |
25 | 26 | 27 |
28 | 29 |
30 | 33 |
34 | 35 |

© Pruddy Stores

36 |
37 |
38 | 39 | 40 | -------------------------------------------------------------------------------- /Sign-up/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | display: flex; 3 | align-items: center; 4 | padding-top: 40px; 5 | padding-bottom: 40px; 6 | background-color: #f5f5f5; 7 | } 8 | 9 | .form-signin { 10 | width: 100%; 11 | max-width: 330px; 12 | padding: 15px; 13 | margin: auto; 14 | } 15 | 16 | .form-signin .checkbox { 17 | font-weight: 400; 18 | } 19 | 20 | .form-signin .form-floating:focus-within { 21 | z-index: 2; 22 | } 23 | 24 | .form-signin input[type="email"] { 25 | margin-bottom: -1px; 26 | border-bottom-right-radius: 0; 27 | border-bottom-left-radius: 0; 28 | } 29 | 30 | .form-signin input[type="password"] { 31 | margin-bottom: 10px; 32 | border-top-left-radius: 0; 33 | border-top-right-radius: 0; 34 | } 35 | .form-signin .btn{ 36 | background-color: purple; 37 | color: white; 38 | } -------------------------------------------------------------------------------- /Signup Page/design.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/surajondev/UI-UX-Design/e124bedd064ac8e3f934f09ee30af66e1df70a48/Signup Page/design.css -------------------------------------------------------------------------------- /Signup Page/index.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/surajondev/UI-UX-Design/e124bedd064ac8e3f934f09ee30af66e1df70a48/Signup Page/index.html -------------------------------------------------------------------------------- /Simple-cards/Thumbs.db: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/surajondev/UI-UX-Design/e124bedd064ac8e3f934f09ee30af66e1df70a48/Simple-cards/Thumbs.db -------------------------------------------------------------------------------- /Simple-cards/images/angular-img.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/surajondev/UI-UX-Design/e124bedd064ac8e3f934f09ee30af66e1df70a48/Simple-cards/images/angular-img.png -------------------------------------------------------------------------------- /Simple-cards/images/css-img.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/surajondev/UI-UX-Design/e124bedd064ac8e3f934f09ee30af66e1df70a48/Simple-cards/images/css-img.png -------------------------------------------------------------------------------- /Simple-cards/images/html-img.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/surajondev/UI-UX-Design/e124bedd064ac8e3f934f09ee30af66e1df70a48/Simple-cards/images/html-img.png -------------------------------------------------------------------------------- /Simple-cards/images/js-img.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/surajondev/UI-UX-Design/e124bedd064ac8e3f934f09ee30af66e1df70a48/Simple-cards/images/js-img.png -------------------------------------------------------------------------------- /Simple-cards/images/node-img.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/surajondev/UI-UX-Design/e124bedd064ac8e3f934f09ee30af66e1df70a48/Simple-cards/images/node-img.png -------------------------------------------------------------------------------- /Simple-cards/images/react-img.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/surajondev/UI-UX-Design/e124bedd064ac8e3f934f09ee30af66e1df70a48/Simple-cards/images/react-img.png -------------------------------------------------------------------------------- /Simple-cards/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Simple css cards 4 | 5 | 6 | 7 | 8 |
9 |
10 | 11 | 12 | 13 | 14 | 15 |
16 |
17 | 18 | 19 | 20 |
21 |
22 | 23 | 24 | 25 |
26 |
27 | 28 | 29 | 30 |
31 |
32 | 33 | 34 | 35 |
36 |
37 | 38 | 39 | 40 |
41 | 42 |
43 | -------------------------------------------------------------------------------- /Simple-cards/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | 5 | html, body { 6 | margin: 0; 7 | padding: 0; 8 | } 9 | 10 | .card-container{ 11 | margin-top: 5%; 12 | margin-left: 15%; 13 | margin-right: 0%; 14 | display: grid; 15 | grid-template-columns: 20% 20% 20%; 16 | gap: 30px; 17 | column-gap: 130px; 18 | row-gap: 50px; 19 | } 20 | 21 | .card{ 22 | box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.5); 23 | transition: 0.8s; 24 | text-align: center; 25 | width: 200px; 26 | height: 250px; 27 | 28 | } 29 | 30 | .card:hover{ 31 | box-shadow: 0 16px 24px 10px rgba(0,0,0,0.5); 32 | width: 230px; 33 | height: 280px; 34 | cursor: pointer; 35 | 36 | } 37 | 38 | 39 | .card img{ 40 | transition: 0.8s; 41 | width: 200px; 42 | height: 250px; 43 | } 44 | 45 | .card img:hover{ 46 | width: 230px; 47 | height: 280px; 48 | cursor: pointer; 49 | } 50 | .card img:active{ 51 | display: none; 52 | } 53 | -------------------------------------------------------------------------------- /Subsrciption_Cards/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Pricing Table 7 | 120 | 121 | 122 | 134 |
135 |
136 |
137 |
Basic Plan
138 |
₹199/month
139 |
    140 |
  • 141 | ✓ All course 142 | materials 143 |
    • 144 |
  • 145 | ✓ Basic quizzes 146 | and assignments 147 |
    • 148 |
  • 149 | ✓ Email support 150 |
    • 151 |
152 | Get Started 153 |
154 |
155 |
Premium Plan
156 |
₹599/month
157 |
    158 |
  • 159 | ✓ Advanced courses 160 |
    • 161 |
  • 162 | ✓ Personalized 163 | assignment feedback 164 |
    • 165 |
  • 166 | ✓ 24/7 priority 167 | support 168 |
    • 169 |
  • 170 | ✓ Chatbot 171 | assistance 172 |
    • 173 |
  • 174 | ✓ Certification 175 | upon completion 176 |
    • 177 |
178 | Get Started 179 |
180 |
181 |
Pro Plan
182 |
₹399/month
183 |
    184 |
  • 185 | ✓ Intermediate 186 | courses 187 |
    • 188 |
  • 189 | ✓ Standard 190 | assignments and quizzes 191 |
    • 192 |
  • 193 | ✓ Regular email 194 | support 195 |
    • 196 |
  • 197 | ✓ Certificate of 198 | completion 199 |
    • 200 |
201 | Get Started 202 |
203 |
204 |
205 | 206 | 207 | -------------------------------------------------------------------------------- /Timeline/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 221 | 222 |
223 | 224 |
225 | 226 | 227 | 228 | 229 | 230 | 231 | 232 |
233 | 234 | 235 |
236 | 237 |

Updates

238 | 239 | 240 | 241 |
242 | 243 |
244 | 245 |
246 |
247 |
248 |
249 |
250 |
251 |
252 |
253 | 254 |
255 |
256 | 257 |

16:30

258 |

Believing Is The Absence
Of Doubt

259 |
260 |
261 |

15:22

262 |

Start With A Baseline

263 |
264 |
265 |

14:15

266 |

Break Through Self Doubt
And Fear

267 |
268 |
269 | 270 | 271 | 272 |
273 | 274 | 275 | 276 | 277 |
278 | 279 |
Show all updates
280 | 281 |
282 |
283 | 284 | 285 |
286 |
287 | 288 | 289 | -------------------------------------------------------------------------------- /UI_TimeLine/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Timeline 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 |
18 |
19 | 20 |
21 |

Bachelor of Technology

22 |
23 | 24 | 25 | Student 26 | 27 | 28 | 29 | November 2023 - 2026 30 | 31 |
32 |

XYZ Institute of Technology

33 |
    34 |
  • OOP
    • 35 |
  • ML
    • 36 |
  • DBMS
    • 37 |
  • SQL
    • 38 |
  • OS
    • 39 |
40 |
41 |
42 | 43 |
44 |
45 | 46 |
47 |

Intermediate

48 |

ABC Junior college

49 |
50 | 51 | 52 | Student 53 | 54 | 55 | 56 | 2020 - 2022 57 | 58 |
59 | 60 | 61 |
62 |
63 | 64 |
65 |
66 | 67 |
68 |

SSC

69 |

MNO Techno School

70 |
71 | 72 | 73 | Student 74 | 75 | 76 | 77 | 2020 PassedOut 78 | 79 |
80 | 81 | 82 |
83 |
84 | 85 |
86 | 87 | 88 | 89 | -------------------------------------------------------------------------------- /UI_TimeLine/style.css: -------------------------------------------------------------------------------- 1 | html, body { 2 | background-color: #222C32; 3 | height: 100%; 4 | font-family: 'Open Sans', sans-serif; 5 | box-sizing: border-box; 6 | } 7 | 8 | .cd-container { 9 | width: 90%; 10 | max-width: 1080px; 11 | margin: 0 auto; 12 | background: #2B343A; 13 | padding: 0 10%; 14 | border-radius: 2px; 15 | } 16 | 17 | .cd-container::after { 18 | content: ''; 19 | display: table; 20 | clear: both; 21 | } 22 | 23 | #cd-timeline { 24 | position: relative; 25 | padding: 2em 0; 26 | margin-top: 2em; 27 | margin-bottom: 2em; 28 | } 29 | 30 | #cd-timeline::before { 31 | content: ''; 32 | position: absolute; 33 | top: 0; 34 | left: 25px; 35 | height: 100%; 36 | width: 4px; 37 | background: #7E57C2; 38 | } 39 | 40 | @media only screen and (min-width: 1170px) { 41 | #cd-timeline { 42 | margin-top: 3em; 43 | margin-bottom: 3em; 44 | } 45 | 46 | #cd-timeline::before { 47 | left: 50%; 48 | margin-left: -2px; 49 | } 50 | } 51 | .cd-timeline-block { 52 | position: relative; 53 | margin: 2em 0; 54 | } 55 | 56 | .cd-timeline-block:after { 57 | content: ""; 58 | display: table; 59 | clear: both; 60 | } 61 | 62 | .cd-timeline-block:first-child { 63 | margin-top: 0; 64 | } 65 | 66 | .cd-timeline-block:last-child { 67 | margin-bottom: 0; 68 | } 69 | 70 | @media only screen and (min-width: 1170px) { 71 | .cd-timeline-block { 72 | margin: 4em 0; 73 | } 74 | 75 | .cd-timeline-block:first-child { 76 | margin-top: 0; 77 | } 78 | 79 | .cd-timeline-block:last-child { 80 | margin-bottom: 0; 81 | } 82 | } 83 | .cd-timeline-img { 84 | position: absolute; 85 | top: 8px; 86 | left: 12px; 87 | width: 30px; 88 | height: 30px; 89 | border-radius: 50%; 90 | box-shadow: 0 0 0 4px #7E57C2, inset 0 2px 0 rgba(0, 0, 0, 0.08), 0 3px 0 4px rgba(0, 0, 0, 0.05); 91 | } 92 | 93 | .cd-timeline-img { 94 | background: #673AB7; 95 | } 96 | 97 | @media only screen and (min-width: 1170px) { 98 | .cd-timeline-img { 99 | width: 30px; 100 | height: 30px; 101 | left: 50%; 102 | margin-left: -15px; 103 | margin-top: 15px; 104 | -webkit-transform: translateZ(0); 105 | -webkit-backface-visibility: hidden; 106 | } 107 | } 108 | .cd-timeline-content { 109 | position: relative; 110 | margin-left: 60px; 111 | margin-right: 30px; 112 | background: #333C42; 113 | border-radius: 2px; 114 | padding: 1em; 115 | } 116 | .cd-timeline-content .timeline-content-info { 117 | background: #2B343A; 118 | padding: 5px 10px; 119 | color: rgba(255, 255, 255, 0.7); 120 | font-size: 12px; 121 | box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.08); 122 | border-radius: 2px; 123 | } 124 | .cd-timeline-content .timeline-content-info i { 125 | margin-right: 5px; 126 | } 127 | .cd-timeline-content .timeline-content-info .timeline-content-info-title, .cd-timeline-content .timeline-content-info .timeline-content-info-date { 128 | width: calc(50% - 2px); 129 | display: inline-block; 130 | } 131 | @media (max-width: 500px) { 132 | .cd-timeline-content .timeline-content-info .timeline-content-info-title, .cd-timeline-content .timeline-content-info .timeline-content-info-date { 133 | display: block; 134 | width: 100%; 135 | } 136 | } 137 | .cd-timeline-content .content-skills { 138 | font-size: 12px; 139 | padding: 0; 140 | margin-bottom: 0; 141 | display: flex; 142 | flex-wrap: wrap; 143 | justify-content: center; 144 | } 145 | .cd-timeline-content .content-skills li { 146 | background: #40484D; 147 | border-radius: 2px; 148 | display: inline-block; 149 | padding: 2px 10px; 150 | color: rgba(255, 255, 255, 0.7); 151 | margin: 3px 2px; 152 | text-align: center; 153 | flex-grow: 1; 154 | } 155 | 156 | .cd-timeline-content:after { 157 | content: ""; 158 | display: table; 159 | clear: both; 160 | } 161 | 162 | .cd-timeline-content h2 { 163 | color: rgba(255, 255, 255, 0.9); 164 | margin-top: 0; 165 | margin-bottom: 5px; 166 | } 167 | 168 | .cd-timeline-content p, .cd-timeline-content .cd-date { 169 | color: rgba(255, 255, 255, 0.7); 170 | font-size: 13px; 171 | font-size: 0.8125rem; 172 | } 173 | 174 | .cd-timeline-content .cd-date { 175 | display: inline-block; 176 | } 177 | 178 | .cd-timeline-content p { 179 | margin: 1em 0; 180 | line-height: 1.6; 181 | } 182 | 183 | .cd-timeline-content::before { 184 | content: ''; 185 | position: absolute; 186 | top: 16px; 187 | right: 100%; 188 | height: 0; 189 | width: 0; 190 | border: 7px solid transparent; 191 | border-right: 7px solid #333C42; 192 | } 193 | 194 | @media only screen and (min-width: 768px) { 195 | .cd-timeline-content h2 { 196 | font-size: 20px; 197 | font-size: 1.25rem; 198 | } 199 | 200 | .cd-timeline-content p { 201 | font-size: 16px; 202 | font-size: 1rem; 203 | } 204 | 205 | .cd-timeline-content .cd-read-more, .cd-timeline-content .cd-date { 206 | font-size: 14px; 207 | font-size: 0.875rem; 208 | } 209 | } 210 | @media only screen and (min-width: 1170px) { 211 | .cd-timeline-content { 212 | color: white; 213 | margin-left: 0; 214 | padding: 1.6em; 215 | width: 36%; 216 | margin: 0 5%; 217 | } 218 | 219 | .cd-timeline-content::before { 220 | top: 24px; 221 | left: 100%; 222 | border-color: transparent; 223 | border-left-color: #333C42; 224 | } 225 | 226 | .cd-timeline-content .cd-date { 227 | position: absolute; 228 | width: 100%; 229 | left: 122%; 230 | top: 6px; 231 | font-size: 16px; 232 | font-size: 1rem; 233 | } 234 | 235 | .cd-timeline-block:nth-child(even) .cd-timeline-content { 236 | float: right; 237 | } 238 | 239 | .cd-timeline-block:nth-child(even) .cd-timeline-content::before { 240 | top: 24px; 241 | left: auto; 242 | right: 100%; 243 | border-color: transparent; 244 | border-right-color: #333C42; 245 | } 246 | 247 | .cd-timeline-block:nth-child(even) .cd-timeline-content .cd-read-more { 248 | float: right; 249 | } 250 | 251 | .cd-timeline-block:nth-child(even) .cd-timeline-content .cd-date { 252 | left: auto; 253 | right: 122%; 254 | text-align: right; 255 | } 256 | } 257 | -------------------------------------------------------------------------------- /VideoPlayer/assets/pause.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /VideoPlayer/assets/play.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /VideoPlayer/assets/poster-img.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/surajondev/UI-UX-Design/e124bedd064ac8e3f934f09ee30af66e1df70a48/VideoPlayer/assets/poster-img.jpg -------------------------------------------------------------------------------- /VideoPlayer/assets/testMovie2.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/surajondev/UI-UX-Design/e124bedd064ac8e3f934f09ee30af66e1df70a48/VideoPlayer/assets/testMovie2.mp4 -------------------------------------------------------------------------------- /VideoPlayer/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 |

Custom Video Player

14 |
15 |
16 |
17 | 21 | 23 | 24 |
25 |
26 | 27 |
28 |

by Kristian Talley

29 |
30 | 31 | 32 | -------------------------------------------------------------------------------- /VideoPlayer/scripts/playback.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | let videoPlayer = document.getElementById('video-player'); 4 | let videoControl = document.getElementById('video-control'); 5 | let PausePlay = function () { 6 | if (videoPlayBack === true) { 7 | videoPlayer.pause(); 8 | videoPlayer.setAttribute('class', '--overlay') 9 | // article_hide class not added to pause state for persistent play button visibility 10 | videoControl.setAttribute('class', 'videoControls playVideoBtn'); 11 | videoPlayBack = false; 12 | } else { 13 | videoPlayer.play(); 14 | videoPlayer.setAttribute('class', '') 15 | videoControl.setAttribute('class', 'videoControls --hide pauseVideoBtn'); 16 | videoPlayBack = true; 17 | } 18 | 19 | } 20 | //Mobile breakpoint playback controls are hidden by default 21 | //In order to show controls, user must tap/click video player to reveal button. 22 | videoPlayer.addEventListener('click', function () { 23 | 24 | videoControl.setAttribute('style', 'display: block'); 25 | // styles are removed to fall back on default article_hide class after 3 seconds 26 | setTimeout(() => { 27 | videoControl.setAttribute('style', ''); 28 | }, 3000); 29 | 30 | }) -------------------------------------------------------------------------------- /VideoPlayer/scripts/videocontrol.js: -------------------------------------------------------------------------------- 1 | const pauseButton = document.getElementsByClassName('videoControls pauseVideoBtn'); 2 | 3 | const playButton = document.getElementsByClassName('videoControls --hide playVideoBtn'); 4 | 5 | let videoPlayBack = true; -------------------------------------------------------------------------------- /VideoPlayer/styles/player.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #FF6E6E; 3 | } 4 | .projectWrapper { 5 | display: flex; 6 | padding-top: 24px; 7 | justify-content: center; 8 | 9 | } 10 | 11 | h1, h2 { 12 | font-size: 2.4rem; 13 | color: white; 14 | font-family: menlo, sans-serif; 15 | align-items: center; 16 | text-align: center; 17 | text-shadow: 0px 2px 6px 2px rgba(0,0,0,0.93); 18 | } 19 | h2 { 20 | font-size: 1rem; 21 | text-align: left; 22 | 23 | } 24 | a { 25 | color: rgb(71, 116, 123) 26 | } 27 | .headerContainer { 28 | display: flex; 29 | position: relative; 30 | justify-content: center; 31 | } 32 | .footerContainer { 33 | display: flex; 34 | position: relative; 35 | margin-left: 1rem; 36 | justify-content: left; 37 | } 38 | 39 | 40 | .videoContainer { 41 | display: inline-block; 42 | position: relative; 43 | /* max-width: 832px; */ 44 | } 45 | 46 | 47 | #video-player { 48 | object-fit: contain; 49 | overflow-clip-margin: content-box; 50 | overflow: clip; 51 | width: 92vw; 52 | border-radius: 2rem; 53 | outline: solid rgba(255,255,255,0.6) 1px; 54 | stroke-width: 32px; 55 | box-shadow: 0px 10px 30px 20px rgba(0,0,0,0.33); 56 | } 57 | 58 | /* pause button */ 59 | .videoContainer .videoControls.pauseVideoBtn { 60 | background-image: url(../assets/pause.svg); 61 | opacity: 72%; 62 | } 63 | 64 | /* play button */ 65 | .videoContainer .videoControls.playVideoBtn { 66 | background-image: url(../assets/play.svg); 67 | opacity: 72%; 68 | } 69 | 70 | .videoContainer .videoControls { 71 | position: absolute; 72 | left: 0; 73 | display: block; 74 | -webkit-transform: translateY(-100%) scale(1); 75 | transform: translateY(-100%) scale(1); 76 | background-repeat: no-repeat; 77 | width: 124px; 78 | height: 124px; 79 | border: none; 80 | background-color: transparent; 81 | cursor: pointer; 82 | background-size: cover; 83 | } 84 | 85 | 86 | /* mobile */ 87 | @media (max-width: 412px) { 88 | .videoContainer .videoControls { 89 | position: absolute; 90 | top: 50%; 91 | left: 50%; 92 | -webkit-transform: translate(-50%, -50%) scale(1.2); 93 | transform: translate(-50%, -50%) scale(1.2); 94 | } 95 | 96 | .--overlay { 97 | -webkit-filter: brightness(40%); 98 | -moz-filter: brightness(40%); 99 | -o-filter: brightness(40%); 100 | -ms-filter: brightness(40%); 101 | filter: brightness(40%); 102 | } 103 | 104 | .videoContainer .videoControls.--hide { 105 | display: none; 106 | } 107 | } -------------------------------------------------------------------------------- /YBHAV_buttons/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /YBHAV_buttons/style.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; 4 | font-size: 100%; 5 | height: 100%; 6 | margin: 0; 7 | padding: 0; 8 | } 9 | 10 | body { 11 | background: #970c23; 12 | display: flex; 13 | flex-direction: column; 14 | justify-content: space-around; 15 | align-items: center; 16 | line-height: 1; 17 | position: relative; 18 | } 19 | 20 | body::before { 21 | background: repeating-linear-gradient( 22 | transparent, 23 | transparent 2em, 24 | rgba(45,25,25,0.3) 2em, 25 | rgba(45,25,25,0.3) 2.5em, 26 | transparent 2.5em, 27 | transparent 4.5em, 28 | rgba(45,25,25,0.3) 4.5em, 29 | rgba(45,25,25,0.3) 6.5em, 30 | transparent 6.5em, 31 | transparent 7em, 32 | rgba(45,25,25,0.3) 7em, 33 | rgba(45,25,25,0.3) 9em 34 | ); 35 | content: ''; 36 | bottom: 0; 37 | top: 0; 38 | left: 0; 39 | right: 0; 40 | position: absolute; 41 | } 42 | 43 | body::after { 44 | background: repeating-linear-gradient( 90deg, 45 | transparent, 46 | transparent 2em, 47 | rgba(45,25,25,0.3) 2em, 48 | rgba(45,25,25,0.3) 2.5em, 49 | transparent 2.5em, 50 | transparent 4.5em, 51 | rgba(45,25,25,0.3) 4.5em, 52 | rgba(45,25,25,0.3) 6.5em, 53 | transparent 6.5em, 54 | transparent 7em, 55 | rgba(45,25,25,0.3) 7em, 56 | rgba(45,25,25,0.3) 9em 57 | ); 58 | content: ''; 59 | bottom: 0; 60 | top: 0; 61 | left: 0; 62 | right: 0; 63 | position: absolute; 64 | } 65 | 66 | .button { 67 | background: #4d6b61; 68 | border: 0; 69 | border-radius: 50%; 70 | box-shadow: inset -0.125rem -0.25rem rgba(0,0,0,0.2), 71 | inset 0.125rem 0.25rem rgba(255,255,255,0.2), 72 | 0.125rem 0.25rem 0.25rem rgba(0,0,0,0.35); 73 | color: #4d6b61; 74 | display: inline-block; 75 | font-size: 0.625em; 76 | letter-spacing: 0.25em; 77 | text-transform: uppercase; 78 | text-align: center; 79 | text-decoration: none; 80 | text-shadow: 1px 1px 1px rgba(0,0,0,0.3), -1px -1px 1px rgba(255,255,255,0.4); 81 | height: 8rem; 82 | width: 8rem; 83 | position: relative; 84 | z-index: 1; 85 | } 86 | 87 | .button::before { 88 | content: ''; 89 | border-radius: 50%; 90 | box-shadow: inset -0.0625rem -0.125rem rgba(255,255,255,0.2), 91 | inset 0.0625rem 0.125rem rgba(0,0,0,0.2); 92 | position: absolute; 93 | top: 1rem; 94 | left: 1rem; 95 | height: 6rem; 96 | width: 6rem; 97 | } 98 | 99 | .button::after { 100 | content: ''; 101 | border-radius: 50%; 102 | box-shadow: 2.45rem 2.45rem #462227, 103 | 2.45rem 4.45rem #462227, 104 | 4.45rem 2.45rem #462227, 105 | 4.45rem 4.45rem #462227, 106 | 2.55rem 2.55rem rgba(255,255,255,0.2), 107 | 2.55rem 4.55rem rgba(255,255,255,0.2), 108 | 4.55rem 2.55rem rgba(255,255,255,0.2), 109 | 4.55rem 4.55rem rgba(255,255,255,0.2), 110 | 2.35rem 2.35rem rgba(0,0,0,0.2), 111 | 2.35rem 4.35rem rgba(0,0,0,0.2), 112 | 4.35rem 2.35rem rgba(0,0,0,0.2), 113 | 4.35rem 4.35rem rgba(0,0,0,0.2); 114 | position: absolute; 115 | top: 0; 116 | left: 0; 117 | height: 1rem; 118 | width: 1rem; 119 | } 120 | 121 | .button:focus { 122 | background: #56796d; 123 | outline:0; 124 | } 125 | 126 | .button:active { 127 | transform: scale(0.98,0.98); 128 | } 129 | 130 | /* Hide buttons on small screens */ 131 | @media only screen and (max-height: 440px) { 132 | button:nth-child(3) { 133 | display: none; 134 | } 135 | } 136 | 137 | @media only screen and (max-height: 300px) { 138 | button:nth-child(2) { 139 | display: none; 140 | } 141 | } -------------------------------------------------------------------------------- /animated search bar/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 |
12 | 13 |
14 |
15 | 16 | -------------------------------------------------------------------------------- /animated search bar/style.scss: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Inconsolata:700'); 2 | 3 | * { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | html, body { 10 | width: 100%; 11 | height: 100%; 12 | } 13 | 14 | body { 15 | background: #252525; 16 | } 17 | 18 | .container { 19 | position: absolute; 20 | margin: auto; 21 | top: 0; 22 | left: 0; 23 | right: 0; 24 | bottom: 0; 25 | width: 300px; 26 | height: 100px; 27 | .search { 28 | position: absolute; 29 | margin: auto; 30 | top: 0; 31 | right: 0; 32 | bottom: 0; 33 | left: 0; 34 | width: 80px; 35 | height: 80px; 36 | background: crimson; 37 | border-radius: 50%; 38 | transition: all 1s; 39 | z-index: 4; 40 | box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.4); 41 | // box-shadow: 0 0 25px 0 crimson; 42 | &:hover { 43 | cursor: pointer; 44 | } 45 | &::before { 46 | content: ""; 47 | position: absolute; 48 | margin: auto; 49 | top: 22px; 50 | right: 0; 51 | bottom: 0; 52 | left: 22px; 53 | width: 12px; 54 | height: 2px; 55 | background: white; 56 | transform: rotate(45deg); 57 | transition: all .5s; 58 | } 59 | &::after { 60 | content: ""; 61 | position: absolute; 62 | margin: auto; 63 | top: -5px; 64 | right: 0; 65 | bottom: 0; 66 | left: -5px; 67 | width: 25px; 68 | height: 25px; 69 | border-radius: 50%; 70 | border: 2px solid white; 71 | transition: all .5s; 72 | } 73 | } 74 | input { 75 | font-family: 'Inconsolata', monospace; 76 | position: absolute; 77 | margin: auto; 78 | top: 0; 79 | right: 0; 80 | bottom: 0; 81 | left: 0; 82 | width: 50px; 83 | height: 50px; 84 | outline: none; 85 | border: none; 86 | // border-bottom: 1px solid rgba(255, 255, 255, 0.2); 87 | background: crimson; 88 | color: white; 89 | text-shadow: 0 0 10px crimson; 90 | padding: 0 80px 0 20px; 91 | border-radius: 30px; 92 | box-shadow: 0 0 25px 0 crimson, 93 | 0 20px 25px 0 rgba(0, 0, 0, 0.2); 94 | // box-shadow: inset 0 0 25px 0 rgba(0, 0, 0, 0.5); 95 | transition: all 1s; 96 | opacity: 0; 97 | z-index: 5; 98 | font-weight: bolder; 99 | letter-spacing: 0.1em; 100 | &:hover { 101 | cursor: pointer; 102 | } 103 | &:focus { 104 | width: 300px; 105 | opacity: 1; 106 | cursor: text; 107 | } 108 | &:focus ~ .search { 109 | right: -250px; 110 | background: #151515; 111 | z-index: 6; 112 | &::before { 113 | top: 0; 114 | left: 0; 115 | width: 25px; 116 | } 117 | &::after { 118 | top: 0; 119 | left: 0; 120 | width: 25px; 121 | height: 2px; 122 | border: none; 123 | background: white; 124 | border-radius: 0%; 125 | transform: rotate(-45deg); 126 | } 127 | } 128 | &::placeholder { 129 | color: white; 130 | opacity: 0.5; 131 | font-weight: bolder; 132 | } 133 | } 134 | } 135 | -------------------------------------------------------------------------------- /button-animation/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 |
11 | hover me 12 |
13 | 14 | -------------------------------------------------------------------------------- /button-animation/style.css: -------------------------------------------------------------------------------- 1 | div { 2 | font: 22px Arial; 3 | display: block; 4 | margin-top: 20%; 5 | margin-left: 30%; 6 | margin-right: 30%; 7 | padding: 1em 2em; 8 | text-align: center; 9 | color: white; 10 | background: red; /* default color */ 11 | 12 | /* "to left" / "to right" - affects initial color */ 13 | background: linear-gradient(to left, salmon 50%, lightblue 50%) right; 14 | background-size: 200%; 15 | transition: .5s ease-out; 16 | } 17 | div:hover { 18 | cursor: pointer; 19 | background-position: left; 20 | } -------------------------------------------------------------------------------- /css-only-Accordion/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 |

Accordion Css Only

14 | 15 |
16 | 17 |
18 |
19 |

20 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 21 |

22 |
23 |
24 |
25 | 26 |
27 | 28 |
29 |
30 |

31 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 32 |

33 |
34 |
35 |
36 | 37 |
38 | 39 |
40 |
41 |

42 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 43 |

44 |
45 |
46 |
47 | 48 |
49 | 50 | 51 | 52 | -------------------------------------------------------------------------------- /css-only-Accordion/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | color: #00FFFF; 3 | background-color: #ccc; 4 | font-family: "Poppins", sans-serif; 5 | display: flex; 6 | justify-content: center; 7 | align-items:center; 8 | height: 100vh; 9 | 10 | } 11 | 12 | .container { 13 | background-color: #333; 14 | padding: 10px 30px; 15 | display: flex; 16 | flex-direction:column ; 17 | width:500px; 18 | max-height: auto; 19 | border-radius: 2%; 20 | box-shadow: 0 8px 8px -4px #d6ef61; 21 | box-shadow: 0.5rem 0.5rem 1rem black, -0.5rem -0.5rem #ccc; 22 | 23 | } 24 | 25 | .p{ 26 | color: #4E4B52; 27 | font-size: 5px; 28 | } 29 | 30 | .faq-drawer { 31 | margin-bottom: 30px; 32 | } 33 | 34 | .faq-drawer__content-wrapper { 35 | font-size: 1em; 36 | padding: 0em 0.5em 0.5em 0em; 37 | line-height: 1.4em; 38 | max-height: 0px; 39 | overflow: hidden; 40 | transition: 0.25s ease-in-out; 41 | color:#999999; 42 | 43 | } 44 | 45 | .faq-drawer__title { 46 | border-top: #000 1px solid; 47 | cursor: pointer; 48 | display: block; 49 | font-size: 1.25em; 50 | font-weight: 700; 51 | padding: 30px 0 0 0; 52 | position: relative; 53 | margin-bottom: 0; 54 | transition: all 0.25s ease-out; 55 | } 56 | 57 | .faq-drawer__title::after { 58 | border-style: solid; 59 | border-width: 1px 1px 0 0; 60 | content: " "; 61 | /* display: inline-block; */ 62 | float: right; 63 | height: 10px; 64 | left: 2px; 65 | position: relative; 66 | right: 20px; 67 | top: 2px; 68 | transform: rotate(135deg); 69 | transition: 0.35s ease-in-out; 70 | vertical-align: top; 71 | width: 10px; 72 | } 73 | 74 | /* OPTIONAL HOVER STATE */ 75 | .faq-drawer__title:hover { 76 | color: #4E4B52 ; 77 | } 78 | 79 | .faq-drawer__trigger:checked 80 | + .faq-drawer__title 81 | + .faq-drawer__content-wrapper { 82 | max-height: 350px; 83 | } 84 | 85 | .faq-drawer__trigger:checked + .faq-drawer__title::after { 86 | transform: rotate(-45deg); 87 | transition: 0.25s ease-in-out; 88 | } 89 | 90 | input[type="checkbox"] { 91 | display: none; 92 | } 93 | 94 | @media only screen and (max-width: 600px) { 95 | .container { 96 | padding: 80px; 97 | } 98 | } 99 | -------------------------------------------------------------------------------- /css-only-model/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | CSS Only Model 10 | 11 | 12 |
13 | Open Modal 14 |
15 | 16 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /css-only-model/style.css: -------------------------------------------------------------------------------- 1 | body{ 2 | margin: 0; 3 | padding: 0; 4 | font-family: "Poppins", sans-serif; 5 | } 6 | .model-btn-open { 7 | height: 100vh; 8 | display: flex; 9 | align-items: center; 10 | justify-content: center; 11 | background: #eee; 12 | 13 | } 14 | 15 | .model-btn-open a { 16 | display: inline-block; 17 | text-decoration: none; 18 | text-transform: uppercase; 19 | font-family: 'Roboto', sans-serif; 20 | background-color: #081f2d; 21 | border-radius: 29px; 22 | border: 1px solid #081F2D; 23 | color: white; 24 | font-size: 15px; 25 | padding: 10px 45px; 26 | cursor: pointer; 27 | transition: 0.3s; 28 | } 29 | 30 | .model-btn-open a:hover{ 31 | background-color: white; 32 | color: #081F2D; 33 | border-color: #081F2D; 34 | transition: 0.3s; 35 | } 36 | 37 | .modal { 38 | visibility: hidden; 39 | opacity: 0; 40 | position: absolute; 41 | top: 0; 42 | right: 0; 43 | bottom: 0; 44 | left: 0; 45 | display: flex; 46 | align-items: center; 47 | justify-content: center; 48 | background: #ddd; 49 | transition: all .4s; 50 | } 51 | 52 | .modal:target { 53 | visibility: visible; 54 | opacity: 1; 55 | } 56 | 57 | .modal__content { 58 | display: flex; 59 | flex-direction: column; 60 | border-radius: 4px; 61 | position: relative; 62 | width: 500px; 63 | max-width: 90%; 64 | background: #fff; 65 | border-radius: 5px; 66 | } 67 | 68 | .model-header{ 69 | padding:10px; 70 | height:30px; 71 | color: #fff; 72 | background-color: #081F2D; 73 | border-radius: 5px 5px 0px 0px; 74 | 75 | } 76 | .model-header span{ 77 | font-size: 20px; 78 | 79 | } 80 | 81 | p{ 82 | color:#333; 83 | } 84 | 85 | .model-text{ 86 | padding: 10px 10px; 87 | } 88 | 89 | .modal-footer { 90 | text-align: right; 91 | margin-bottom: 20px; 92 | } 93 | 94 | .modal-footer-btn-close { 95 | margin: 10px 20px; 96 | background: #e74c3c; 97 | color: #ffffff; 98 | cursor: pointer; 99 | padding:8px 20px; 100 | border-radius: 4px; 101 | border: none; 102 | text-decoration: none; 103 | } 104 | 105 | .modal-footer-btn-close:hover { 106 | background: #b32515; 107 | color: #fff; 108 | } 109 | 110 | .modal__close { 111 | font-size: 28px; 112 | position: absolute; 113 | top: 0px; 114 | right: 10px; 115 | color: #585858; 116 | text-decoration: none; 117 | 118 | } 119 | 120 | .modal__close a:hover { 121 | color: #e61a1a; 122 | } 123 | -------------------------------------------------------------------------------- /image-slider-Harvansh-1234/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 11 | 12 | Document 13 | 14 | 15 | 16 | 28 |
29 | 92 | 93 | 96 |
97 | 98 | 99 | 100 | -------------------------------------------------------------------------------- /image-slider-Harvansh-1234/style.css: -------------------------------------------------------------------------------- 1 | main { 2 | padding-top: 80px; 3 | background-color: #FFFFFF; 4 | flex: 1; 5 | } 6 | 7 | 8 | #logo { 9 | object-fit: scale-down; 10 | width: 200px; 11 | height: 60px; 12 | } 13 | 14 | nav { 15 | display: flex; 16 | flex-direction: row; 17 | justify-content: space-between; 18 | align-items: center; 19 | background-color: #FFFFFF; 20 | height: 80px; 21 | border-bottom: 0.5px solid #555555; 22 | position: fixed; 23 | top: 0; 24 | width: 100%; 25 | } 26 | 27 | .btn { 28 | font-size: medium; 29 | text-decoration:none; 30 | transition-duration: 300ms; 31 | } 32 | 33 | .nav-btn { 34 | color: #9F9F9F; 35 | } 36 | 37 | .nav-btn:hover { 38 | color: #444444; 39 | } 40 | 41 | .nav-btn-active { 42 | color: #444444; 43 | } 44 | #nav-buttons { 45 | display: flex; 46 | justify-content: space-between; 47 | align-items: center; 48 | gap: 2rem; 49 | margin-right: 1.5rem; 50 | } 51 | .carousel-control-prev-icon{ 52 | background-color: rgb(0, 0, 0); 53 | border-radius: 50%; 54 | } 55 | .carousel-control-next-icon{ 56 | background-color: rgb(0, 0, 0); 57 | border-radius: 50%; 58 | } 59 | .carousel-inner{ 60 | background-size:auto; 61 | background-position: top; 62 | } 63 | -------------------------------------------------------------------------------- /image-slider/style.css: -------------------------------------------------------------------------------- 1 | .carousel-control-prev-icon{ 2 | background-color: rgb(0, 0, 0); 3 | border-radius: 50%; 4 | } 5 | .carousel-control-next-icon{ 6 | background-color: rgb(0, 0, 0); 7 | border-radius: 50%; 8 | } 9 | .carousel-inner{ 10 | background-size: cover; 11 | background-position: top; 12 | } -------------------------------------------------------------------------------- /images/5726840.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/surajondev/UI-UX-Design/e124bedd064ac8e3f934f09ee30af66e1df70a48/images/5726840.jpg -------------------------------------------------------------------------------- /images/Illustration.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/surajondev/UI-UX-Design/e124bedd064ac8e3f934f09ee30af66e1df70a48/images/Illustration.webp -------------------------------------------------------------------------------- /images/Logo.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/surajondev/UI-UX-Design/e124bedd064ac8e3f934f09ee30af66e1df70a48/images/Logo.ico -------------------------------------------------------------------------------- /images/New-Logo.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/surajondev/UI-UX-Design/e124bedd064ac8e3f934f09ee30af66e1df70a48/images/New-Logo.webp -------------------------------------------------------------------------------- /images/Screenshot 2021-10-14 at 23-03-45 Logo Maker Used By 2 3 Million Startups.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/surajondev/UI-UX-Design/e124bedd064ac8e3f934f09ee30af66e1df70a48/images/Screenshot 2021-10-14 at 23-03-45 Logo Maker Used By 2 3 Million Startups.png -------------------------------------------------------------------------------- /images/faizur-rehman-yapBRdPWxik-unsplash.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/surajondev/UI-UX-Design/e124bedd064ac8e3f934f09ee30af66e1df70a48/images/faizur-rehman-yapBRdPWxik-unsplash.jpg -------------------------------------------------------------------------------- /images/fakurian-design-UI81cov4gSY-unsplash.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/surajondev/UI-UX-Design/e124bedd064ac8e3f934f09ee30af66e1df70a48/images/fakurian-design-UI81cov4gSY-unsplash.jpg -------------------------------------------------------------------------------- /images/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/surajondev/UI-UX-Design/e124bedd064ac8e3f934f09ee30af66e1df70a48/images/favicon.ico -------------------------------------------------------------------------------- /images/favicon.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/surajondev/UI-UX-Design/e124bedd064ac8e3f934f09ee30af66e1df70a48/images/favicon.webp -------------------------------------------------------------------------------- /images/lookup.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/surajondev/UI-UX-Design/e124bedd064ac8e3f934f09ee30af66e1df70a48/images/lookup.webp -------------------------------------------------------------------------------- /images/pexels-anand-dandekar-1532771.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/surajondev/UI-UX-Design/e124bedd064ac8e3f934f09ee30af66e1df70a48/images/pexels-anand-dandekar-1532771.jpg -------------------------------------------------------------------------------- /images/pexels-pixabay-60597.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/surajondev/UI-UX-Design/e124bedd064ac8e3f934f09ee30af66e1df70a48/images/pexels-pixabay-60597.jpg -------------------------------------------------------------------------------- /package-lock.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "UI-UX-Design", 3 | "lockfileVersion": 2, 4 | "requires": true, 5 | "packages": {} 6 | } 7 | -------------------------------------------------------------------------------- /profile-card/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | Document 11 | 12 | 13 | 14 | <<<<<<< HEAD 15 | 16 | ======= 17 | 18 | >>>>>>> 574d3e8c7444d275670d437fd475d86c205a1b94 19 |
20 | 50 | 51 |
52 | 53 | -------------------------------------------------------------------------------- /profile-card/profile-pic.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/surajondev/UI-UX-Design/e124bedd064ac8e3f934f09ee30af66e1df70a48/profile-card/profile-pic.webp -------------------------------------------------------------------------------- /profile-card/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: "Poppins", sans-serif; 3 | 4 | color: #b3afbf; 5 | } 6 | .container { 7 | display: flex; 8 | width: 100%; 9 | height: 100vh; 10 | align-items: center; 11 | justify-content: center; 12 | background-color: #222; 13 | } 14 | 15 | .email-signature { 16 | width: 400px; 17 | /* max-width: 400px; */ 18 | display: flex; 19 | background-color: #222; 20 | gap: 20px; 21 | border-radius: 5px; 22 | padding: 0.625rem 1.25rem; 23 | box-shadow: 0 10px 15px 5px rgba(0, 0, 0, 0.7); 24 | } 25 | 26 | .email-signature img { 27 | border-radius: 50%; 28 | width: 25%; 29 | height: 25%; 30 | border: none; 31 | margin-top: 10px; 32 | } 33 | 34 | .profile-name { 35 | color: #fff; 36 | font-size: 1.3rem; 37 | margin-top: 30px; 38 | line-height: 0px; 39 | } 40 | 41 | li { 42 | list-style-type: none; 43 | } 44 | 45 | .profile-intro { 46 | font-size: 0.9rem; 47 | } 48 | 49 | .profile-post { 50 | font-size: 0.8rem; 51 | } 52 | 53 | .profile-tag { 54 | display: flex; 55 | justify-content: space-between; 56 | } 57 | 58 | .profile-status { 59 | display: flex; 60 | flex-direction: column; 61 | font-weight: 600; 62 | margin-bottom: 20px; 63 | } 64 | 65 | .profile-btn { 66 | display: flex; 67 | justify-content: center; 68 | gap: 0.625rem; 69 | margin-bottom: 20px; 70 | } 71 | 72 | .btn { 73 | padding: 10px 25px; 74 | border-radius: 3px; 75 | border: 1px solid #7ce3ff; 76 | font-weight: bold; 77 | font-family: Montserrat; 78 | cursor: pointer; 79 | transition: 0.2s; 80 | background: transparent; 81 | border-color: #7ce3ff; 82 | color: #7ce3ff; 83 | } 84 | 85 | .btn:hover { 86 | background: #7ce3ff; 87 | color: #222; 88 | } 89 | 90 | @media only screen and (max-width: 468px) { 91 | /* For mobile phones: */ 92 | .email-signature { 93 | flex-direction: column; 94 | margin: 0.5rem; 95 | gap: 0rem; 96 | } 97 | 98 | .email-signature img { 99 | width: 40%; 100 | } 101 | } 102 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | const hamburgerMenu = document.querySelector('.hamburger-menu'); 2 | const menuOverlay = document.querySelector('.menu-overlay'); 3 | 4 | hamburgerMenu.addEventListener('click', () => { 5 | menuOverlay.classList.toggle('show-menu'); 6 | }); 7 | -------------------------------------------------------------------------------- /testimonialUi/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Testimonial UI 6 | 7 | 9 | 10 | 11 | 12 |
13 |

Give Your Testimonial

14 |
15 |
16 |

Rating:

17 |
18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 |
30 |

Other feedback:

31 | 32 |
33 | 34 |
35 |
36 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /testimonialUi/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap'); 2 | @import url('https://fonts.googleapis.com/css2?family=Raleway:wght@100&display=swap'); 3 | 4 | body { 5 | font-family: 'Open Sans', sans-serif; 6 | background-image: url(https://images.unsplash.com/photo-1554034483-04fda0d3507b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80); 7 | color: white; 8 | } 9 | 10 | f { 11 | font-family: 'Raleway', sans-serif; 12 | } 13 | 14 | input, 15 | textarea { 16 | border-radius: 25px; 17 | background: rgba(255, 255, 255, .7); 18 | animation-fill-mode: blur(10px); 19 | backdrop-filter: blur(10px); 20 | min-height: 250px; 21 | min-width: 400px; 22 | color: black; 23 | } 24 | 25 | .rate { 26 | float: left; 27 | height: 46px; 28 | padding: 0 10px; 29 | } 30 | 31 | .rate:not(:checked)>input { 32 | position: absolute; 33 | top: -9999px; 34 | } 35 | 36 | .rate:not(:checked)>label { 37 | float: right; 38 | width: 1em; 39 | overflow: hidden; 40 | white-space: nowrap; 41 | cursor: pointer; 42 | font-size: 30px; 43 | color: #ccc; 44 | } 45 | 46 | .rate:not(:checked)>label:before { 47 | content: ' \272D'; 48 | } 49 | 50 | .rate>input:checked~label { 51 | color: yellow; 52 | } 53 | 54 | .rate:not(:checked)>label:hover, 55 | .rate:not(:checked)>label:hover~label { 56 | color: yellow; 57 | } 58 | main { 59 | padding-top: 80px; 60 | flex: 1; 61 | } 62 | 63 | 64 | #logo { 65 | object-fit: scale-down; 66 | width: 200px; 67 | height: 60px; 68 | } 69 | 70 | nav { 71 | display: flex; 72 | flex-direction: row; 73 | justify-content: space-between; 74 | align-items: center; 75 | background-color: #FFFFFF; 76 | height: 80px; 77 | border-bottom: 0.5px solid #555555; 78 | position: fixed; 79 | top: 0; 80 | width: 100%; 81 | } 82 | 83 | .bton { 84 | font-size: medium; 85 | text-decoration:none; 86 | transition-duration: 300ms; 87 | } 88 | 89 | .nav-btn { 90 | color: #9F9F9F; 91 | } 92 | 93 | .nav-btn:hover { 94 | color: #444444; 95 | } 96 | 97 | .nav-btn-active { 98 | color: #444444; 99 | } 100 | #nav-buttons { 101 | display: flex; 102 | justify-content: space-between; 103 | align-items: center; 104 | gap: 2rem; 105 | margin-right: 1.5rem; 106 | } 107 | 108 | .rate>input:checked+label:hover, 109 | .rate>input:checked+label:hover~label, 110 | .rate>input:checked~label:hover, 111 | .rate>input:checked~label:hover~label, 112 | .rate>label:hover~input:checked~label { 113 | color: yellow; 114 | } 115 | 116 | #heading { 117 | font-size: 3rem; 118 | } 119 | 120 | body { 121 | display: flex; 122 | justify-content: center; 123 | align-items: center; 124 | min-height: 100vh; 125 | margin: 0; 126 | } 127 | 128 | .container { 129 | display: flex; 130 | flex-direction: column; 131 | align-items: center; 132 | justify-content: center; 133 | text-align: center; 134 | position: relative; 135 | padding: 10px; 136 | border-radius: 20px; 137 | } 138 | 139 | .container::before { 140 | content: ''; 141 | position: absolute; 142 | top: 0; 143 | bottom: 0; 144 | left: 0; 145 | right: 0; 146 | box-shadow: 0 0 15px rgba(0, 0, 0, 0.3); 147 | z-index: -1; 148 | border-radius: 20px; 149 | border: grey; 150 | } 151 | 152 | .rate { 153 | display: flex; 154 | } 155 | 156 | .rate input { 157 | display: none; 158 | } 159 | 160 | .rate label { 161 | font-size: 30px; 162 | color: #ddd; 163 | cursor: pointer; 164 | transition: color 0.3s, transform 0.2s, box-shadow 0.3s; 165 | transform-origin: left; 166 | } 167 | 168 | .rate label:before { 169 | content: "\2605"; 170 | } 171 | 172 | .rate input:checked~label { 173 | color: #f90; 174 | transform: scale(1.2); 175 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); 176 | } 177 | 178 | form { 179 | width: 100%; 180 | max-width: 400px; 181 | display: flex; 182 | flex-direction: column; 183 | align-items: center; 184 | } 185 | 186 | textarea { 187 | height: 100px; 188 | resize: none; 189 | } 190 | 191 | #rating-div { 192 | display: flex; 193 | align-items: baseline; 194 | } 195 | 196 | button { 197 | align-self: flex-end; 198 | cursor: pointer; 199 | background-color: #007bff; 200 | color: #fff; 201 | border: none; 202 | padding: 10px 20px; 203 | transition: background-color 0.3s; 204 | border-radius: 10px; 205 | font-size: large; 206 | } 207 | 208 | button:hover { 209 | background-color: #0056b3; 210 | } 211 | 212 | #feedback { 213 | font-size: 16px; 214 | line-height: 1.5; 215 | padding: 10px; 216 | box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3); 217 | } 218 | 219 | #feedback:hover { 220 | cursor: text; 221 | } 222 | 223 | @media (max-width: 375px) { 224 | .container { 225 | margin: 10px; 226 | } 227 | 228 | .rate label { 229 | font-size: 20px; 230 | } 231 | 232 | textarea { 233 | height: 80%; 234 | } 235 | } 236 | 237 | /* star rating adapted from https://codepen.io/hesguru/pen/BaybqXv */ --------------------------------------------------------------------------------