├── .DS_Store ├── .vscode └── settings.json ├── Amazing_Logo_Transition ├── index.html ├── logo.png └── style.css ├── AmplopAnimation ├── index.html └── style.css ├── Animated Hero Section ├── images │ ├── arrow.png │ ├── flat-worried-woman-have-list-credit-debts-overdue-bills-girl-reading-letter-from-collection-agency-about-financial-problems-loans-unpaid-tax-calculation-payment-expen.webp │ ├── heroImage.jpg │ ├── logo-white.png │ └── photo-1598760122223-45f0f18a1bbd.avif ├── index.html └── style.css ├── Animated_Alert_Bar ├── cross.png ├── index.html ├── script.js ├── style.css └── tick.png ├── Anshita_styles.css ├── Aston-Martin-Landing-Page ├── images │ ├── am-2022-concept-car.jpg │ ├── am-valhalla.jpg │ ├── am-valkyrie-spider.jpg │ ├── amr21.jpg │ ├── aston-martin-dbx.jpg │ ├── aston-martin-logo.png │ ├── aston-martin-logo.svg │ └── one-77.jpg ├── index.html ├── script.js └── style.css ├── Awesome-Animation ├── index.html └── style.css ├── BgColorAnim └── index.html ├── Bootstrap-Gallery ├── gallery.css ├── gallery.html ├── img1.jpg ├── img2.jpg ├── img3.jpg ├── img4.jpg ├── img5.jpg ├── img6.jpg ├── img7.jpg ├── img8.jpg └── img9.jpg ├── CSS_Animation_Using_Javascript ├── background.jpg ├── car_body.png ├── car_wheel_left.png ├── car_wheel_right.png ├── index.html ├── scirpt.js ├── sound.mp3 ├── style.css ├── track.png └── trees.png ├── Carousel ├── index.html └── style.css ├── Gaming_Banner ├── Images │ ├── pexel.jpg │ ├── waller.jpg │ ├── waller1.jpg │ └── waller3.jpg ├── index.html └── style.css ├── HF 2022.css ├── New Year wish ├── Assets │ ├── Images │ │ └── wall.jpg │ ├── Js │ │ └── vanilla-tilt.js │ └── Style.css └── index.html ├── Online-Food.css ├── OpenStoreAnimation ├── index.html └── style.css ├── Plotmeasurement ├── Plotmeasurement.css ├── README.md ├── RGB Game ├── README.md ├── colorGameProject.css ├── colorGameProject.js └── index.html ├── Reset.css ├── Rotating-Gallery ├── 1.jpg ├── 2.webp ├── 3.jpg ├── 4.jpg ├── 5.webp ├── 6.jpg ├── 7.jpg ├── index.html ├── script.js └── style.css ├── Zuxtoberfest ├── animate.css ├── animation-roll.css ├── animation-text ├── img │ ├── abc.png │ └── background.jpg ├── index.html └── style.css ├── asadlu.css ├── blabla.css ├── bob.css ├── border.css ├── button_style.css ├── byskue.css ├── card.css ├── chart.css ├── css1.css ├── cssxx ├── style-1080.css ├── style-1368.css ├── style-380.css ├── style-840.css ├── style.css └── style_login.css ├── custom-style.css ├── dam.css ├── flagicon.css ├── form.css ├── guideau.css ├── hek.css ├── landingPage ├── img │ ├── employee.png │ ├── hires.png │ ├── img1.png │ ├── img2.png │ ├── img3.png │ ├── jumbotron-bg.jpg │ ├── landingpage.png │ ├── security.png │ └── workingspace.png ├── index.html └── style.css ├── loader ├── index.html └── style.css ├── login-page.html ├── login-rtl.css ├── loginpage ├── .vscode │ └── settings.json ├── damn.jpg ├── damn1.jpg ├── index.html └── style.css ├── modals.css ├── nan.css ├── navbar tailwind ├── index.html └── output.css ├── navbar-changecolor.css ├── oktavianto.css ├── opening-div ├── index.html └── style.css ├── pagination.css ├── resposive-web ├── index.html ├── main.css └── responsive.css ├── sImpson-face ├── index.html └── style.css ├── segitiga.css ├── sgb.css ├── simple-landing-page ├── font │ ├── playfairdisplay-black-webfont.woff │ ├── playfairdisplay-black-webfont.woff2 │ ├── roboto-black-webfont.woff │ ├── roboto-black-webfont.woff2 │ ├── roboto-thin-webfont.woff │ └── roboto-thin-webfont.woff2 ├── img │ ├── alpukad.jpg │ ├── cery.jpg │ ├── jeruk.jpg │ ├── pineapple.png │ ├── pisang.jpg │ ├── semangka.jpg │ └── strowberry.jpg ├── index.html └── style │ └── style.css ├── simple-portfolio ├── asset │ ├── css │ │ ├── aos.css │ │ ├── bootstrap.min.css │ │ └── bootstrap.min.css.map │ ├── img │ │ ├── cursor │ │ │ ├── boy_apple.png │ │ │ ├── tunjuk_apple.png │ │ │ └── unicorn_apple.png │ │ ├── me.webp │ │ └── project │ │ │ ├── cosine.webp │ │ │ ├── linku.webp │ │ │ ├── nyumput.webp │ │ │ └── quran.webp │ ├── js │ │ ├── aos.js │ │ ├── bootstrap.bundle.min.js │ │ ├── bootstrap.bundle.min.js.map │ │ └── main.js │ └── scss │ │ ├── main.css │ │ └── main.scss ├── favicon.ico └── index.html ├── slide-swipe.css ├── solar-eclipse ├── index.html └── style.css ├── stamp.css ├── style anjay.css ├── style_sidebar.css ├── stylesheet.css ├── styling.css ├── text-inside-a-box ├── background.jpg ├── index.html └── style.css ├── text-shadow.css ├── transfrom.css ├── triangle.css ├── vertical-masonry-layout-grid ├── css │ ├── global.css │ ├── navbar.css │ └── style.css ├── index.html ├── js │ └── script.js └── readme.md └── warr.css /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FirmanKurniawan/CSS-Projects/bfd22d16984e1215bcf05f08429daf87a2e9cd6c/.DS_Store -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "liveServer.settings.port": 5501 3 | } -------------------------------------------------------------------------------- /Amazing_Logo_Transition/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Logo-Animation 10 | 11 | 12 | 13 |
14 | 17 |
18 | 19 | 20 | -------------------------------------------------------------------------------- /Amazing_Logo_Transition/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FirmanKurniawan/CSS-Projects/bfd22d16984e1215bcf05f08429daf87a2e9cd6c/Amazing_Logo_Transition/logo.png -------------------------------------------------------------------------------- /Amazing_Logo_Transition/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | overflow: hidden; 5 | } 6 | 7 | .container { 8 | height: 100%; 9 | width: 100%; 10 | margin-inline: 50%; 11 | } 12 | 13 | .logo { 14 | cursor: pointer; 15 | width: 6rem; 16 | border-radius: 100%; 17 | overflow: hidden; 18 | } 19 | 20 | .logo img { 21 | height: 6rem; 22 | width: 12rem; 23 | transition: all 0.6s; 24 | } 25 | 26 | .logo img:hover { 27 | transform: translateX(-50%); 28 | } -------------------------------------------------------------------------------- /AmplopAnimation/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Amplop 8 | 9 | 10 | 11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 | 29 | -------------------------------------------------------------------------------- /AmplopAnimation/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: #323641; 3 | } 4 | 5 | .letter-image { 6 | position: absolute; 7 | top: 50%; 8 | left: 50%; 9 | width: 200px; 10 | height: 200px; 11 | -webkit-transform: translate(-50%, -50%); 12 | -moz-transform: translate(-50%, -50%); 13 | transform: translate(-50%, -50%); 14 | cursor: pointer; 15 | } 16 | 17 | .animated-mail { 18 | position: absolute; 19 | height: 150px; 20 | width: 200px; 21 | -webkit-transition: 0.4s; 22 | -moz-transition: 0.4s; 23 | transition: 0.4s; 24 | } 25 | .animated-mail .body { 26 | position: absolute; 27 | bottom: 0; 28 | width: 0; 29 | height: 0; 30 | border-style: solid; 31 | border-width: 0 0 100px 200px; 32 | border-color: transparent transparent #5855e9 transparent; 33 | z-index: 2; 34 | } 35 | .animated-mail .top-fold { 36 | position: absolute; 37 | top: 50px; 38 | width: 0; 39 | height: 0; 40 | border-style: solid; 41 | border-width: 50px 100px 0 100px; 42 | -webkit-transform-origin: 50% 0%; 43 | -webkit-transition: transform 0.4s 0.4s, z-index 0.2s 0.4s; 44 | -moz-transform-origin: 50% 0%; 45 | -moz-transition: transform 0.4s 0.4s, z-index 0.2s 0.4s; 46 | transform-origin: 50% 0%; 47 | transition: transform 0.4s 0.4s, z-index 0.2s 0.4s; 48 | border-color: #4c43cf transparent transparent transparent; 49 | z-index: 2; 50 | } 51 | .animated-mail .back-fold { 52 | position: absolute; 53 | bottom: 0; 54 | width: 200px; 55 | height: 100px; 56 | background: #4345cf; 57 | z-index: 0; 58 | } 59 | .animated-mail .left-fold { 60 | position: absolute; 61 | bottom: 0; 62 | width: 0; 63 | height: 0; 64 | border-style: solid; 65 | border-width: 50px 0 50px 100px; 66 | border-color: transparent transparent transparent #5349e1; 67 | z-index: 2; 68 | } 69 | .animated-mail .letter { 70 | left: 20px; 71 | bottom: 0px; 72 | position: absolute; 73 | width: 160px; 74 | height: 60px; 75 | background: white; 76 | z-index: 1; 77 | overflow: hidden; 78 | -webkit-transition: 0.4s 0.2s; 79 | -moz-transition: 0.4s 0.2s; 80 | transition: 0.4s 0.2s; 81 | } 82 | .animated-mail .letter .letter-border { 83 | height: 10px; 84 | width: 100%; 85 | background: repeating-linear-gradient(-45deg, #cb5a5e, #cb5a5e 8px, transparent 8px, transparent 18px); 86 | } 87 | .animated-mail .letter .letter-title { 88 | margin-top: 10px; 89 | margin-left: 5px; 90 | height: 10px; 91 | width: 40%; 92 | background: #cb5a5e; 93 | } 94 | .animated-mail .letter .letter-context { 95 | margin-top: 10px; 96 | margin-left: 5px; 97 | height: 10px; 98 | width: 20%; 99 | background: #cb5a5e; 100 | } 101 | .animated-mail .letter .letter-stamp { 102 | margin-top: 30px; 103 | margin-left: 120px; 104 | border-radius: 100%; 105 | height: 30px; 106 | width: 30px; 107 | background: #cb5a5e; 108 | opacity: 0.3; 109 | } 110 | 111 | .shadow { 112 | position: absolute; 113 | top: 200px; 114 | left: 50%; 115 | width: 400px; 116 | height: 30px; 117 | transition: 0.4s; 118 | transform: translateX(-50%); 119 | -webkit-transition: 0.4s; 120 | -webkit-transform: translateX(-50%); 121 | -moz-transition: 0.4s; 122 | -moz-transform: translateX(-50%); 123 | border-radius: 100%; 124 | background: radial-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)); 125 | } 126 | 127 | .letter-image:hover .animated-mail { 128 | transform: translateY(50px); 129 | -webkit-transform: translateY(50px); 130 | -moz-transform: translateY(50px); 131 | } 132 | .letter-image:hover .animated-mail .top-fold { 133 | transition: transform 0.4s, z-index 0.2s; 134 | transform: rotateX(180deg); 135 | -webkit-transition: transform 0.4s, z-index 0.2s; 136 | -webkit-transform: rotateX(180deg); 137 | -moz-transition: transform 0.4s, z-index 0.2s; 138 | -moz-transform: rotateX(180deg); 139 | z-index: 0; 140 | } 141 | .letter-image:hover .animated-mail .letter { 142 | height: 180px; 143 | } 144 | .letter-image:hover .shadow { 145 | width: 250px; 146 | } -------------------------------------------------------------------------------- /Animated Hero Section/images/arrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FirmanKurniawan/CSS-Projects/bfd22d16984e1215bcf05f08429daf87a2e9cd6c/Animated Hero Section/images/arrow.png -------------------------------------------------------------------------------- /Animated Hero Section/images/flat-worried-woman-have-list-credit-debts-overdue-bills-girl-reading-letter-from-collection-agency-about-financial-problems-loans-unpaid-tax-calculation-payment-expen.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FirmanKurniawan/CSS-Projects/bfd22d16984e1215bcf05f08429daf87a2e9cd6c/Animated Hero Section/images/flat-worried-woman-have-list-credit-debts-overdue-bills-girl-reading-letter-from-collection-agency-about-financial-problems-loans-unpaid-tax-calculation-payment-expen.webp -------------------------------------------------------------------------------- /Animated Hero Section/images/heroImage.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FirmanKurniawan/CSS-Projects/bfd22d16984e1215bcf05f08429daf87a2e9cd6c/Animated Hero Section/images/heroImage.jpg -------------------------------------------------------------------------------- /Animated Hero Section/images/logo-white.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FirmanKurniawan/CSS-Projects/bfd22d16984e1215bcf05f08429daf87a2e9cd6c/Animated Hero Section/images/logo-white.png -------------------------------------------------------------------------------- /Animated Hero Section/images/photo-1598760122223-45f0f18a1bbd.avif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FirmanKurniawan/CSS-Projects/bfd22d16984e1215bcf05f08429daf87a2e9cd6c/Animated Hero Section/images/photo-1598760122223-45f0f18a1bbd.avif -------------------------------------------------------------------------------- /Animated Hero Section/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | NUTORS PROJECT 7 | 8 | 9 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 25 | 26 | 27 | 28 | 29 |
30 |
31 |
32 | 33 |
34 | About Natours 35 | Your Benefits 36 | Popular Tours 37 | Stories 38 | Book Now 39 | Book Now 40 |
41 | 58 |
59 |
60 |

OUTDOORS

61 |

IS WHERE LIFE HAPPENS

62 |
63 | 64 |
65 |
66 |

LET'S GO

67 |
68 |
69 | 70 | 71 | 72 | -------------------------------------------------------------------------------- /Animated Hero Section/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0px; 3 | margin: 0; 4 | } 5 | 6 | .logo { 7 | border: 0.0001px solid black; 8 | padding: 15px; 9 | border-radius: 100px; 10 | backdrop-filter: blur(50px); 11 | height: 4vh; 12 | } 13 | 14 | .logo:hover { 15 | backdrop-filter: blur(50px); 16 | animation: rotation 1s linear 0s 1 forwards alternate; 17 | } 18 | .nav-bar { 19 | padding: 20px 50px 20px 50px; 20 | margin: 0px auto 0px auto; 21 | display: flex; 22 | justify-content: space-between; 23 | align-items: center; 24 | } 25 | 26 | .nav-items { 27 | font-weight: 500; 28 | display: flex; 29 | gap: 1.3rem; 30 | align-items: center; 31 | } 32 | 33 | .nav-items a { 34 | border-radius: 100px; 35 | backdrop-filter: blur(9px); 36 | background-color: rgba(255, 255, 255, 0.089); 37 | padding: 12px; 38 | font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", 39 | "Lucida Sans Unicode", Geneva, Verdana, sans-serif; 40 | color: white; 41 | font-weight: 300; 42 | text-decoration: none; 43 | } 44 | 45 | .nav-items a:hover { 46 | backdrop-filter: blur(20px); 47 | box-shadow: -3px 3px 3px 0px rgb(0, 0, 0); 48 | transform: translateY(-2px); 49 | } 50 | 51 | .nav-items a:active { 52 | backdrop-filter: blur(20px); 53 | box-shadow: 0px 1px 5px 1px rgb(0, 0, 0); 54 | transform: translateY(2px); 55 | } 56 | .main-heading { 57 | font-family: "Snowburst One", cursive; 58 | font-size: 100px; 59 | color: white; 60 | } 61 | 62 | .sub-heading { 63 | font-family: "Snowburst One", cursive; 64 | color: white; 65 | font-size: 32px; 66 | } 67 | 68 | .hero { 69 | text-align: left; 70 | transform: translate(0px 0px); 71 | position: absolute; 72 | top: 20%; 73 | left: 3%; 74 | display: flex; 75 | flex-direction: column; 76 | gap: 30px; 77 | } 78 | 79 | .hero-button { 80 | backface-visibility: hidden; 81 | margin-top: 20px; 82 | /* animation: myanimation 0.5s ease-in 2s 1 forwards alternate; */ 83 | width: fit-content; 84 | padding: 18px; 85 | color: white; 86 | font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", 87 | "Lucida Sans Unicode", Geneva, Verdana, sans-serif; 88 | background-color: rgba(255, 255, 255, 0); 89 | backdrop-filter: blur(8px); 90 | font-size: 18px; 91 | letter-spacing: 1px; 92 | border: none; 93 | border-radius: 100px; 94 | font-weight: bold; 95 | } 96 | .hero-button:hover { 97 | transform: translateY(-2px); 98 | backdrop-filter: blur(20px); 99 | box-shadow: -1px 3px 3px 1px rgba(0, 0, 0, 0.564); 100 | } 101 | 102 | .hero-button:active { 103 | transform: translateY(2px); 104 | box-shadow: -1px 3px 3px 1px black; 105 | } 106 | .hero-section { 107 | width: 100vw; 108 | height: 100vh; 109 | background-image: linear-gradient(rgba(34, 238, 68, 0), rgba(51, 248, 255, 0)), 110 | url(images/heroImage.jpg); 111 | position: fixed; 112 | background-clip: linear; 113 | } 114 | 115 | .lets-go { 116 | animation: letsgo 3s linear 0s 1 forwards alternate; 117 | position: absolute; 118 | top: 70%; 119 | font-size: 44px; 120 | left: 3%; 121 | transform: rotate(-20deg); 122 | color: white; 123 | font-family: "Snowburst One", cursive; 124 | } 125 | @keyframes myanimation { 126 | 0% { 127 | opacity: 0; 128 | transform: translateX(-100px); 129 | } 130 | 80% { 131 | opacity: 1; 132 | transform: translateX(20%); 133 | } 134 | 100% { 135 | opacity: 1; 136 | transform: translateX(0px); 137 | } 138 | } 139 | 140 | @keyframes rotation { 141 | 0% { 142 | transform: rotate(0deg); 143 | } 144 | 145 | 70% { 146 | transform: rotate(120deg); 147 | } 148 | 149 | 90% { 150 | transform: rotate(180deg); 151 | } 152 | 153 | 100% { 154 | transform: rotate(360deg); 155 | } 156 | } 157 | @keyframes moveInRight { 158 | 0% { 159 | opacity: 0; 160 | transform: translateX(-100px); 161 | } 162 | 80% { 163 | opacity: 1; 164 | transform: translateX(100%); 165 | } 166 | 100% { 167 | opacity: 1; 168 | transform: translateX(0px); 169 | } 170 | } 171 | @keyframes letsgo { 172 | 0% { 173 | transform: translateX(-200px); 174 | opacity: 0; 175 | } 176 | 177 | 25% { 178 | transform: translateX(30px); 179 | opacity: 1; 180 | } 181 | 182 | 40% { 183 | transform: translateX(70px); 184 | opacity: 1; 185 | } 186 | 187 | 60% { 188 | transform: translateX(180px); 189 | opacity: 0; 190 | } 191 | 192 | 70% { 193 | transform: translateX(320px); 194 | opacity: 0; 195 | } 196 | 197 | 80% { 198 | transform: translateX(470px); 199 | opacity: 0; 200 | } 201 | 202 | 90% { 203 | opacity: 0; 204 | } 205 | 100% { 206 | transform: translateX(1400px); 207 | opacity: 0; 208 | } 209 | } 210 | 211 | .menu { 212 | background-color: transparent; 213 | border: none; 214 | cursor: pointer; 215 | display: none; 216 | padding: 0; 217 | } 218 | .line { 219 | fill: none; 220 | stroke: rgb(255, 255, 255); 221 | transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1), 222 | stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1); 223 | } 224 | .line1 { 225 | stroke-dasharray: 60 207; 226 | stroke-width: 2; 227 | } 228 | .line2 { 229 | stroke-dasharray: 60 60; 230 | stroke-width: 2; 231 | } 232 | .line3 { 233 | stroke-dasharray: 60 207; 234 | stroke-width: 2; 235 | } 236 | .opened .line1 { 237 | stroke-dasharray: 90 207; 238 | stroke-dashoffset: -134; 239 | stroke-width: 6; 240 | } 241 | .opened .line2 { 242 | stroke-dasharray: 1 60; 243 | stroke-dashoffset: -30; 244 | stroke-width: 6; 245 | } 246 | .opened .line3 { 247 | stroke-dasharray: 90 207; 248 | stroke-dashoffset: -134; 249 | stroke-width: 6; 250 | } 251 | @media (max-width: 850px) { 252 | #hamburger { 253 | display: block; 254 | } 255 | .nav-items { 256 | display: none; 257 | } 258 | 259 | .main-heading { 260 | font-size: 56px; 261 | } 262 | 263 | .sub-heading { 264 | font-size: 18px; 265 | } 266 | 267 | .hero { 268 | justify-content: center; 269 | margin: auto; 270 | top: 30%; 271 | left: 50%; 272 | transform: translate(-50%); 273 | text-align: center; 274 | } 275 | .nav-bar { 276 | padding: 20px 20px 0px 20px; 277 | } 278 | .hero-section { 279 | height: 100vh; 280 | width: 100vw; 281 | } 282 | 283 | .menu { 284 | display: flex; 285 | } 286 | } 287 | -------------------------------------------------------------------------------- /Animated_Alert_Bar/cross.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FirmanKurniawan/CSS-Projects/bfd22d16984e1215bcf05f08429daf87a2e9cd6c/Animated_Alert_Bar/cross.png -------------------------------------------------------------------------------- /Animated_Alert_Bar/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Document 10 | 11 | 12 | 13 |
14 |
15 | tick 16 |

Alert Message

17 | cross 18 |
19 |
20 | 21 |
22 |
23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /Animated_Alert_Bar/script.js: -------------------------------------------------------------------------------- 1 | let btn = document.getElementById("btnClick"); 2 | let notification = document.getElementById("notiUpper"); 3 | let crossMenu = document.getElementById("menuOff"); 4 | btn.addEventListener("click", () => { 5 | notification.style.top = 0; 6 | }); 7 | crossMenu.addEventListener("click", () => { 8 | notification.style.top = "-25%"; 9 | }); 10 | -------------------------------------------------------------------------------- /Animated_Alert_Bar/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | 6 | body { 7 | font-family: monospace; 8 | } 9 | 10 | .container { 11 | overflow-x: hidden; 12 | height: 100vh; 13 | width: 100%; 14 | display: flex; 15 | justify-content: space-between; 16 | text-align: center; 17 | flex-direction: column; 18 | } 19 | 20 | .upper { 21 | position: relative; 22 | top: -12%; 23 | background-color: white; 24 | box-shadow: 0 0 20px rgba(0, 0, 0, 0.69); 25 | padding: 1rem 0; 26 | text-align: center; 27 | margin-top: 1rem; 28 | margin-inline: 30%; 29 | border: .125rem solid white; 30 | font-size: 1.2rem; 31 | letter-spacing: .1rem; 32 | transition: all 0.6s ease-in-out; 33 | } 34 | 35 | .upper span { 36 | position: absolute; 37 | top: .6rem; 38 | left: .5rem; 39 | } 40 | 41 | #menuOff { 42 | height: 1rem; 43 | width: 1rem; 44 | position: absolute; 45 | top: .6rem; 46 | right: .5rem; 47 | cursor: pointer; 48 | } 49 | 50 | .upper span img { 51 | height: 2rem; 52 | width: 2rem; 53 | } 54 | 55 | .lower { 56 | height: 60%; 57 | } 58 | 59 | .btn { 60 | text-transform: uppercase; 61 | cursor: pointer; 62 | padding: 1rem 3rem; 63 | font-size: 1.5rem; 64 | background-color: red; 65 | color: #fff; 66 | } 67 | 68 | @media screen and (max-width:650px) { 69 | .upper { 70 | text-align: center; 71 | margin-top: 2rem; 72 | margin-inline: 15%; 73 | font-size: 1.2rem; 74 | width: 70%; 75 | } 76 | } 77 | 78 | @media screen and (max-width:350px) { 79 | .upper { 80 | text-align: center; 81 | margin-top: 2rem; 82 | margin-inline: 0; 83 | margin-left: 2rem; 84 | font-size: 1.2rem; 85 | width: 80%; 86 | } 87 | } -------------------------------------------------------------------------------- /Animated_Alert_Bar/tick.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FirmanKurniawan/CSS-Projects/bfd22d16984e1215bcf05f08429daf87a2e9cd6c/Animated_Alert_Bar/tick.png -------------------------------------------------------------------------------- /Aston-Martin-Landing-Page/images/am-2022-concept-car.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FirmanKurniawan/CSS-Projects/bfd22d16984e1215bcf05f08429daf87a2e9cd6c/Aston-Martin-Landing-Page/images/am-2022-concept-car.jpg -------------------------------------------------------------------------------- /Aston-Martin-Landing-Page/images/am-valhalla.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FirmanKurniawan/CSS-Projects/bfd22d16984e1215bcf05f08429daf87a2e9cd6c/Aston-Martin-Landing-Page/images/am-valhalla.jpg -------------------------------------------------------------------------------- /Aston-Martin-Landing-Page/images/am-valkyrie-spider.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FirmanKurniawan/CSS-Projects/bfd22d16984e1215bcf05f08429daf87a2e9cd6c/Aston-Martin-Landing-Page/images/am-valkyrie-spider.jpg -------------------------------------------------------------------------------- /Aston-Martin-Landing-Page/images/amr21.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FirmanKurniawan/CSS-Projects/bfd22d16984e1215bcf05f08429daf87a2e9cd6c/Aston-Martin-Landing-Page/images/amr21.jpg -------------------------------------------------------------------------------- /Aston-Martin-Landing-Page/images/aston-martin-dbx.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FirmanKurniawan/CSS-Projects/bfd22d16984e1215bcf05f08429daf87a2e9cd6c/Aston-Martin-Landing-Page/images/aston-martin-dbx.jpg -------------------------------------------------------------------------------- /Aston-Martin-Landing-Page/images/aston-martin-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FirmanKurniawan/CSS-Projects/bfd22d16984e1215bcf05f08429daf87a2e9cd6c/Aston-Martin-Landing-Page/images/aston-martin-logo.png -------------------------------------------------------------------------------- /Aston-Martin-Landing-Page/images/one-77.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FirmanKurniawan/CSS-Projects/bfd22d16984e1215bcf05f08429daf87a2e9cd6c/Aston-Martin-Landing-Page/images/one-77.jpg -------------------------------------------------------------------------------- /Aston-Martin-Landing-Page/script.js: -------------------------------------------------------------------------------- 1 | const sliderContainer = document.querySelector(".slider-container"); 2 | const slideRight = document.querySelector(".right-slide"); 3 | const slideLeft = document.querySelector(".left-slide"); 4 | const upButton = document.querySelector(".up-button"); 5 | const downButton = document.querySelector(".down-button"); 6 | const slidesLength = slideRight.querySelectorAll("div").length; 7 | 8 | let activeSlideIndex = 0; 9 | 10 | slideLeft.style.top = `-${(slidesLength - 1) * 100}vh`; 11 | 12 | const changeSlide = (direction) => { 13 | const sliderHeight = sliderContainer.clientHeight; 14 | if (direction === "up") { 15 | activeSlideIndex++; 16 | if (activeSlideIndex > slidesLength - 1) 17 | activeSlideIndex = 0; 18 | } else if (direction === "down") { 19 | activeSlideIndex--; 20 | if (activeSlideIndex < 0) 21 | activeSlideIndex = slidesLength - 1; 22 | } 23 | 24 | slideRight.style.transform = `translateY(-${activeSlideIndex * sliderHeight 25 | }px)`; 26 | slideLeft.style.transform = `translateY(${activeSlideIndex * sliderHeight 27 | }px)`; 28 | }; 29 | 30 | upButton.addEventListener("click", () => changeSlide("up")); 31 | downButton.addEventListener("click", () => changeSlide("down")); 32 | 33 | // setInterval(() => { 34 | // changeSlide("up"); 35 | // }, 3000); -------------------------------------------------------------------------------- /Aston-Martin-Landing-Page/style.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --Optima: 'Optima', sans-serif; 3 | } 4 | 5 | * { 6 | margin: 0%; 7 | padding: 0%; 8 | box-sizing: border-box; 9 | transition: 0.3s all ease-out; 10 | color: #ffffff; 11 | } 12 | 13 | html, 14 | body { 15 | overflow-x: hidden; 16 | font-family: var(--Optima); 17 | -webkit-text-size-adjust: 100%; 18 | -moz-text-size-adjust: 100%; 19 | -ms-text-size-adjust: 100%; 20 | text-size-adjust: 100%; 21 | -webkit-font-smoothing: antialiased; 22 | } 23 | 24 | 25 | ul, 26 | li { 27 | list-style: none; 28 | } 29 | 30 | a { 31 | text-decoration: none; 32 | } 33 | 34 | /* Navigation Bar */ 35 | .navbar__header { 36 | background: rgb(0, 0, 0); 37 | background: -moz-linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1829774145986519) 70%, rgba(0, 0, 0, 0.35384576193758754) 100%); 38 | background: -webkit-linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1829774145986519) 70%, rgba(0, 0, 0, 0.35384576193758754) 100%); 39 | background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1829774145986519) 70%, rgba(0, 0, 0, 0.35384576193758754) 100%); 40 | position: absolute; 41 | z-index: 100; 42 | width: 100vw; 43 | } 44 | 45 | nav { 46 | display: flex; 47 | justify-content: space-between; 48 | padding: 1rem 0.5rem 0.7rem 0.5rem; 49 | } 50 | 51 | nav ul { 52 | display: flex; 53 | align-items: center; 54 | } 55 | 56 | nav ul li { 57 | margin: 0 1rem; 58 | } 59 | 60 | header h1 { 61 | font-size: 1.5rem; 62 | font-weight: 200; 63 | margin: 0 1rem 0 0; 64 | } 65 | 66 | header { 67 | height: 35px; 68 | margin: 0 1rem 0 0; 69 | } 70 | 71 | header a img { 72 | height: 100%; 73 | width: 100%; 74 | } 75 | 76 | /* ============== */ 77 | 78 | .left-slide>div:nth-child(1) { 79 | background-color: #004042; 80 | } 81 | 82 | .left-slide>div:nth-child(2) { 83 | background-color: #00716F; 84 | } 85 | 86 | .left-slide>div:nth-child(3) { 87 | background-color: #334D49; 88 | } 89 | 90 | .left-slide>div:nth-child(4) { 91 | background-color: #006F62; 92 | } 93 | 94 | .slider-container { 95 | position: relative; 96 | overflow: hidden; 97 | width: 100vw; 98 | height: 100vh; 99 | } 100 | 101 | .left-slide { 102 | height: 100%; 103 | width: 35%; 104 | position: absolute; 105 | top: 0; 106 | left: 0; 107 | transition: transform 1s ease-out; 108 | -webkit-transition: transform 1s ease-out; 109 | -moz-transition: transform 1s ease-out; 110 | -ms-transition: transform 1s ease-out; 111 | -o-transition: transform 1s ease-out; 112 | } 113 | 114 | .left-slide>div { 115 | height: 100%; 116 | width: 100%; 117 | display: flex; 118 | flex-direction: column; 119 | /* align-items: center; */ 120 | /* to be in consideration */ 121 | justify-content: center; 122 | color: #fff; 123 | } 124 | 125 | .tab__heading { 126 | padding: 1rem; 127 | margin: -30px 0 10px 0; 128 | font-size: 1.5rem; 129 | } 130 | 131 | .tab__heading h6 { 132 | font-weight: 200; 133 | margin: 0 0 0.8rem 0; 134 | font-size: 0.8rem; 135 | } 136 | 137 | .tab__heading h2 { 138 | font-weight: 200; 139 | } 140 | 141 | .news__box { 142 | padding: 1rem; 143 | } 144 | 145 | .nb__heading1 { 146 | font-size: 1.3rem; 147 | line-height: 3rem; 148 | } 149 | 150 | .nb__heading2 { 151 | margin: 1.3rem 0 0 0; 152 | font-size: 1rem; 153 | } 154 | 155 | .nb__paragraph { 156 | margin: 0.6rem 0 1.2rem 0; 157 | font-size: 0.8rem; 158 | line-height: 1.5rem; 159 | } 160 | 161 | .nb__button { 162 | font-family: var(--Optima); 163 | position: absolute; 164 | right: 40px; 165 | margin: 1rem 0; 166 | } 167 | 168 | .right-slide { 169 | height: 100%; 170 | position: absolute; 171 | top: 0; 172 | left: 35%; 173 | width: 65%; 174 | transition: transform 1s ease-out; 175 | -webkit-transition: transform 1s ease-out; 176 | -moz-transition: transform 1s ease-out; 177 | -ms-transition: transform 1s ease-out; 178 | -o-transition: transform 1s ease-out; 179 | } 180 | 181 | .right-slide>div:nth-child(1) { 182 | /* background-image: url(/images/am-2022-concept-car.jpg); */ 183 | background-image: url(/images/amr21.jpg); 184 | } 185 | 186 | .right-slide>div:nth-child(2) { 187 | background-image: url(/images/aston-martin-dbx.jpg); 188 | } 189 | 190 | .right-slide>div:nth-child(3) { 191 | background-image: url(/images/am-valkyrie-spider.jpg); 192 | } 193 | 194 | .right-slide>div:nth-child(4) { 195 | background-image: url(/images/am-valhalla.jpg); 196 | } 197 | 198 | .right-slide>div { 199 | background-repeat: no-repeat; 200 | background-size: cover; 201 | background-position: center center; 202 | height: 100%; 203 | width: 100%; 204 | } 205 | 206 | .slider-container button { 207 | background: #059862; 208 | border: 0; 209 | color: #1B1A17; 210 | font-size: 1rem; 211 | padding: 1rem; 212 | cursor: pointer; 213 | } 214 | 215 | .slider-container button:hover { 216 | color: #252522; 217 | } 218 | 219 | .slider-container button:focus { 220 | outline: none; 221 | } 222 | 223 | .slider-container .action-buttons button { 224 | position: absolute; 225 | left: 35%; 226 | top: 25%; 227 | z-index: 100; 228 | } 229 | 230 | .slider-container .action-buttons .down-button { 231 | transform: translateX(-100%); 232 | -webkit-transform: translateX(-100%); 233 | -moz-transform: translateX(-100%); 234 | -ms-transform: translateX(-100%); 235 | -o-transform: translateX(-100%); 236 | border-top-left-radius: 5px; 237 | border-bottom-left-radius: 5px; 238 | } 239 | 240 | .slider-container .action-buttons .up-button { 241 | transform: translateY(-100%); 242 | -webkit-transform: translateY(-100%); 243 | -moz-transform: translateY(-100%); 244 | -ms-transform: translateY(-100%); 245 | -o-transform: translateY(-100%); 246 | border-top-right-radius: 5px; 247 | border-bottom-right-radius: 5px; 248 | } -------------------------------------------------------------------------------- /Awesome-Animation/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Awesome animation - CSS only 8 | 9 | 10 | 11 |
12 | CSS 13 | is 14 | Awesome 15 |
16 | 17 | 18 | -------------------------------------------------------------------------------- /Awesome-Animation/style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css?family=Montserrat"); 2 | 3 | :root { 4 | --length: 6s; /*adjust to change speed */ 5 | --loop: infinite; 6 | } 7 | 8 | *, 9 | *:before, 10 | *:after { 11 | box-sizing: border-box; 12 | } 13 | 14 | body { 15 | margin: 0; 16 | font-family: "Montserrat", sans-serif; 17 | display: block; 18 | font-size: 3em; 19 | height: 100vh; 20 | overflow: hidden; 21 | padding-top: 50px; 22 | } 23 | 24 | span { 25 | display: block; 26 | } 27 | 28 | /* Background box */ 29 | 30 | #box { 31 | width: 200px; 32 | height: 200px; 33 | margin: 30vh auto; 34 | border: 1px solid #333; 35 | padding: 0 10px; 36 | line-height: 1.4em; 37 | text-transform: uppercase; 38 | text-align: left; 39 | animation: awe-box calc(var(--length) / 2) var(--loop); 40 | } 41 | 42 | @keyframes awe-box { 43 | 0% { 44 | transform: scale(1); 45 | } 46 | 30% { 47 | transform: scale(1); 48 | border-radius: 0%; 49 | background: #fff; 50 | color: #111; 51 | } 52 | 35% { 53 | border-radius: 50%; 54 | transform: scale(2); 55 | background: #111; 56 | color: #fff; 57 | box-shadow: 0 0 0 rgba(94, 245, 94, 1); 58 | } 59 | 40% { 60 | transform: scale(2); 61 | background: #111; 62 | color: #fff; 63 | box-shadow: 0 0 15px rgba(250, 144, 104, 1); 64 | } 65 | 50% { 66 | border-radius: 0%; 67 | transform: scale(1); 68 | background: #fff; 69 | color: #111; 70 | box-shadow: 0 0 65px rgba(94, 187, 245, 1); 71 | } 72 | 56% { 73 | border-radius: 0%; 74 | transform: scale(1); 75 | } 76 | 66% { 77 | border-radius: 0%; 78 | transform: scale(1); 79 | box-shadow: 0 0 0 rgba(94, 187, 245, 1); 80 | } 81 | 70% { 82 | border-radius: 0%; 83 | transform: scale(1); 84 | } 85 | 100% { 86 | border-radius: 0%; 87 | transform: scale(1); 88 | } 89 | } 90 | 91 | /* "CSS" Move */ 92 | 93 | #first { 94 | animation: css var(--length) var(--loop); 95 | } 96 | 97 | @keyframes css { 98 | 0% { 99 | transform: translate(0, 0); 100 | } 101 | 15% { 102 | transform: translate(0, 0); 103 | } 104 | 20% { 105 | transform: translate(65px, 0); 106 | } 107 | 25% { 108 | transform: translate(65px, 65px); 109 | } 110 | 30% { 111 | transform: translate(0, 65px); 112 | } 113 | 70% { 114 | transform: translate(0, 65px); 115 | } 116 | 75% { 117 | transform: translate(0, 0); 118 | } 119 | 100% { 120 | transform: translate(0, 0); 121 | } 122 | } 123 | 124 | /* "Is" Move */ 125 | 126 | #second { 127 | animation: is var(--length) var(--loop); 128 | } 129 | 130 | @keyframes is { 131 | 0% { 132 | transform: translate(0, 0); 133 | } 134 | 15% { 135 | transform: translate(0, 0); 136 | } 137 | 20% { 138 | transform: translate(0, -65px); 139 | } 140 | 30% { 141 | transform: translate(0, -65px); 142 | } 143 | 65% { 144 | transform: translate(0, -65px); 145 | } 146 | 68% { 147 | transform: translate(105px, -65px); 148 | } 149 | 73% { 150 | transform: translate(105px, 0); 151 | } 152 | 80% { 153 | transform: translate(0, 0); 154 | } 155 | 100% { 156 | transform: translate(0, 0); 157 | } 158 | } 159 | 160 | /* "Awesome" Slide */ 161 | 162 | #third { 163 | animation: awesome var(--length) var(--loop); 164 | } 165 | 166 | @keyframes awesome { 167 | 0% { 168 | transform: translateX(0); 169 | } 170 | 20% { 171 | transform: translateX(0); 172 | } 173 | 35% { 174 | transform: translateX(-110px); 175 | } 176 | 50% { 177 | transform: translateX(-110px); 178 | } 179 | 60% { 180 | transform: translateX(-110px); 181 | } 182 | 70% { 183 | transform: translateX(-110px); 184 | } 185 | 85% { 186 | transform: translateX(0); 187 | } 188 | 100% { 189 | transform: translateX(0); 190 | } 191 | } 192 | 193 | /* "?" Fade in */ 194 | 195 | #third::after { 196 | content: "?"; 197 | display: block; 198 | color: #fa7268; /* Pantones on fire */ 199 | width: 50px; 200 | float: right; 201 | margin-top: -67px; 202 | margin-right: -140px; 203 | animation: third-after var(--length) var(--loop); 204 | opacity: 0; 205 | } 206 | 207 | @keyframes third-after { 208 | 0% { 209 | opacity: 0; 210 | } 211 | 30% { 212 | opacity: 0; 213 | } 214 | 35% { 215 | opacity: 1; 216 | } 217 | 50% { 218 | opacity: 1; 219 | } 220 | 65% { 221 | opacity: 1; 222 | } 223 | 70% { 224 | opacity: 0; 225 | } 226 | 100% { 227 | opacity: 0; 228 | } 229 | } 230 | 231 | /* Timer */ 232 | 233 | body::before { 234 | content: ""; 235 | background: #d02b30; 236 | width: 2vw; 237 | height: 0.2vh; 238 | display: block; 239 | position: fixed; 240 | top: 0; 241 | animation: timing calc(var(--length) * 6) 1 linear; 242 | } 243 | 244 | @keyframes timing { 245 | 0% { 246 | transform: scaleX(1); 247 | } 248 | 100% { 249 | transform: scaleX(100); 250 | } 251 | } 252 | 253 | /* Fade to white */ 254 | 255 | body::after { 256 | content: "That's all folks"; 257 | display: block; 258 | position: fixed; 259 | top: 0; 260 | width: 100vw; 261 | height: 100vh; 262 | background: #fff; 263 | text-align: center; 264 | animation: fade-bg calc(var(--length) / 2) forwards; 265 | animation-delay: calc(var(--length) * 6); 266 | opacity: 0; 267 | line-height: 100vh; 268 | } 269 | 270 | @keyframes fade-bg { 271 | 0% { 272 | opacity: 0; 273 | color: #fff; 274 | } 275 | 30% { 276 | opacity: 1; 277 | color: #fff; 278 | filter: blur(20px); 279 | } 280 | 100% { 281 | opacity: 1; 282 | color: #222; 283 | filter: blur(0); 284 | } 285 | } 286 | -------------------------------------------------------------------------------- /BgColorAnim/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 17 | 18 | 19 |

Animation of background-color

20 | 21 |

Gradually change the background-color from red to blue:

22 | 23 |

24 | 25 |

Note: CSS Animations do not work in Internet Explorer 9 and earlier versions.

26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /Bootstrap-Gallery/gallery.css: -------------------------------------------------------------------------------- 1 | .container-fluid{ 2 | background-color:black; 3 | } 4 | .row { 5 | display: flex; 6 | flex-wrap: wrap; 7 | padding: 0 4px; 8 | } 9 | .column { 10 | flex: 25%; 11 | max-width: 33.3%; 12 | padding: 0 4px; 13 | } 14 | .column img { 15 | margin-top: 8px; 16 | vertical-align: middle; 17 | width: 100%; 18 | border-radius: 5px; 19 | cursor: pointer; 20 | transition: 0.3s linear; 21 | } 22 | .column img:hover { 23 | filter: grayscale(1) brightness(0.5); 24 | } 25 | @media screen and (max-width: 800px) { 26 | .column { 27 | flex: 50%; 28 | max-width: 50%; 29 | } 30 | } 31 | @media screen and (max-width: 600px) { 32 | .column { 33 | flex: 100%; 34 | max-width: 100%; 35 | } 36 | .column img { 37 | filter: grayscale(0) brightness(1); 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /Bootstrap-Gallery/gallery.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | image gallery 5 | 6 | 7 |
8 |
9 |
10 | 11 | 12 | 13 |
14 |
15 | 16 | 17 | 18 |
19 |
20 | 21 | 22 | 23 |
24 |
25 |
26 | 27 | 28 | -------------------------------------------------------------------------------- /Bootstrap-Gallery/img1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FirmanKurniawan/CSS-Projects/bfd22d16984e1215bcf05f08429daf87a2e9cd6c/Bootstrap-Gallery/img1.jpg -------------------------------------------------------------------------------- /Bootstrap-Gallery/img2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FirmanKurniawan/CSS-Projects/bfd22d16984e1215bcf05f08429daf87a2e9cd6c/Bootstrap-Gallery/img2.jpg -------------------------------------------------------------------------------- /Bootstrap-Gallery/img3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FirmanKurniawan/CSS-Projects/bfd22d16984e1215bcf05f08429daf87a2e9cd6c/Bootstrap-Gallery/img3.jpg -------------------------------------------------------------------------------- /Bootstrap-Gallery/img4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FirmanKurniawan/CSS-Projects/bfd22d16984e1215bcf05f08429daf87a2e9cd6c/Bootstrap-Gallery/img4.jpg -------------------------------------------------------------------------------- /Bootstrap-Gallery/img5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FirmanKurniawan/CSS-Projects/bfd22d16984e1215bcf05f08429daf87a2e9cd6c/Bootstrap-Gallery/img5.jpg -------------------------------------------------------------------------------- /Bootstrap-Gallery/img6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FirmanKurniawan/CSS-Projects/bfd22d16984e1215bcf05f08429daf87a2e9cd6c/Bootstrap-Gallery/img6.jpg -------------------------------------------------------------------------------- /Bootstrap-Gallery/img7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FirmanKurniawan/CSS-Projects/bfd22d16984e1215bcf05f08429daf87a2e9cd6c/Bootstrap-Gallery/img7.jpg -------------------------------------------------------------------------------- /Bootstrap-Gallery/img8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FirmanKurniawan/CSS-Projects/bfd22d16984e1215bcf05f08429daf87a2e9cd6c/Bootstrap-Gallery/img8.jpg -------------------------------------------------------------------------------- /Bootstrap-Gallery/img9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FirmanKurniawan/CSS-Projects/bfd22d16984e1215bcf05f08429daf87a2e9cd6c/Bootstrap-Gallery/img9.jpg -------------------------------------------------------------------------------- /CSS_Animation_Using_Javascript/background.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FirmanKurniawan/CSS-Projects/bfd22d16984e1215bcf05f08429daf87a2e9cd6c/CSS_Animation_Using_Javascript/background.jpg -------------------------------------------------------------------------------- /CSS_Animation_Using_Javascript/car_body.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FirmanKurniawan/CSS-Projects/bfd22d16984e1215bcf05f08429daf87a2e9cd6c/CSS_Animation_Using_Javascript/car_body.png -------------------------------------------------------------------------------- /CSS_Animation_Using_Javascript/car_wheel_left.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FirmanKurniawan/CSS-Projects/bfd22d16984e1215bcf05f08429daf87a2e9cd6c/CSS_Animation_Using_Javascript/car_wheel_left.png -------------------------------------------------------------------------------- /CSS_Animation_Using_Javascript/car_wheel_right.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FirmanKurniawan/CSS-Projects/bfd22d16984e1215bcf05f08429daf87a2e9cd6c/CSS_Animation_Using_Javascript/car_wheel_right.png -------------------------------------------------------------------------------- /CSS_Animation_Using_Javascript/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Car Animation CSS and JavaScript 7 | 8 | 9 | 10 | 11 |
12 |
13 |
14 |
15 |
16 |
17 | 18 |
19 |
20 | 21 |
22 |
23 |
24 |
25 | 26 | -------------------------------------------------------------------------------- /CSS_Animation_Using_Javascript/scirpt.js: -------------------------------------------------------------------------------- 1 | var audio = document.createElement('audio'); 2 | audio.setAttribute('src', 'sound.mp3'); 3 | audio.loop=true; 4 | audio.play(); 5 | -------------------------------------------------------------------------------- /CSS_Animation_Using_Javascript/sound.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FirmanKurniawan/CSS-Projects/bfd22d16984e1215bcf05f08429daf87a2e9cd6c/CSS_Animation_Using_Javascript/sound.mp3 -------------------------------------------------------------------------------- /CSS_Animation_Using_Javascript/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | padding: 0; 4 | } 5 | body{ 6 | overflow: hidden; 7 | animation: Shakebody linear 6s infinite; 8 | } 9 | .sky{ 10 | height:100vh; 11 | width: 100%; 12 | background-image: url('background.jpg'); 13 | background-repeat: no-repeat; 14 | position: absolute; 15 | } 16 | 17 | .trees{ 18 | height: 100vh; 19 | width: 100%; 20 | background-image: url('trees.png'); 21 | background-size: cover; 22 | position: absolute; 23 | top: -144px; 24 | } 25 | .track{ 26 | height: 60vh; 27 | width: 800vw; 28 | background-image: url('track.png'); 29 | position: absolute; 30 | background-repeat: repeat-x; 31 | top: 70vh; 32 | animation: trackRotation linear 13s infinite; 33 | } 34 | 35 | .car{ 36 | height: 100px; 37 | width: 340px; 38 | background-image: url(car_body.png); 39 | background-size: cover; 40 | background-repeat: no-repeat; 41 | position: absolute; 42 | left: 444px; 43 | bottom: 29vh; 44 | animation: Shake linear 3s infinite; 45 | } 46 | 47 | 48 | .wheel1 img{ 49 | width: 68px; 50 | position: relative; 51 | top: 39px; 52 | left: 41.3px; 53 | animation: wheelRotation linear .6s infinite; 54 | } 55 | .wheel2 img{ 56 | width: 69px; 57 | position: relative; 58 | top: -33px; 59 | left: 218px; 60 | animation: wheelRotation linear .6s infinite; 61 | } 62 | 63 | @keyframes wheelRotation { 64 | 100%{ 65 | transform: rotate(360deg); 66 | } 67 | } 68 | 69 | @keyframes trackRotation { 70 | 100%{ 71 | transform: translateX(-500vw); 72 | } 73 | } 74 | @keyframes Shake { 75 | 0%{ 76 | transform: translateY(-5px); 77 | } 78 | 50%{ 79 | transform: translateY(5px); 80 | } 81 | 100%{ 82 | transform: translateY(-5px); 83 | } 84 | } 85 | @keyframes Shakebody { 86 | 0%{ 87 | transform: translateY(-50px); 88 | } 89 | 50%{ 90 | transform: translateY(10px); 91 | } 92 | 100%{ 93 | transform: translateY(-50px); 94 | } 95 | } -------------------------------------------------------------------------------- /CSS_Animation_Using_Javascript/track.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FirmanKurniawan/CSS-Projects/bfd22d16984e1215bcf05f08429daf87a2e9cd6c/CSS_Animation_Using_Javascript/track.png -------------------------------------------------------------------------------- /CSS_Animation_Using_Javascript/trees.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FirmanKurniawan/CSS-Projects/bfd22d16984e1215bcf05f08429daf87a2e9cd6c/CSS_Animation_Using_Javascript/trees.png -------------------------------------------------------------------------------- /Carousel/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 11 | Carousel Component 12 | 13 | 14 | 18 | 19 | 20 | 21 | 25 | 26 | 27 | 28 |

carousel

29 | 81 | 82 | 83 | -------------------------------------------------------------------------------- /Carousel/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | /* font-family: "Inter", sans-serif; */ 9 | font-family: "Poppins", sans-serif; 10 | color: #343a40; 11 | line-height: 1; 12 | /* max-width: 1440px; 13 | margin: auto; */ 14 | background-color: #e6fcf3; 15 | } 16 | .carousel { 17 | width: 800px; 18 | margin: 100px auto; 19 | background-color: #087f5b; 20 | padding: 32px 48px 32px 86px; 21 | /* padding-->32px and padding-left-->86px 22 | paading-right-->48px */ 23 | border-radius: 10px; 24 | position: relative; 25 | display: flex; 26 | align-items: center; 27 | gap: 86px; 28 | scroll-behavior: smooth; 29 | /* transition: 0.8s; */ 30 | } 31 | .text { 32 | font-size: 18px; 33 | font-weight: 500; 34 | line-height: 1.5; 35 | margin-bottom: 32px; 36 | color: #e6fcf5; 37 | margin-left: 15px; 38 | } 39 | .author-name { 40 | font-size: 14px; 41 | margin-bottom: 4px; 42 | } 43 | .job { 44 | font-size: 12px; 45 | } 46 | .author-name, 47 | .job { 48 | color: #c3fae8; 49 | } 50 | .author-img { 51 | width: 200px; 52 | height: 200px; 53 | border-radius: 10px; 54 | transform: scale(1.5); 55 | box-shadow: 0 12px 24px rgba(0, 0, 0, 0.25); 56 | } 57 | .icon { 58 | height: 24px; 59 | width: 24px; 60 | stroke: #087f5b; 61 | } 62 | .btn { 63 | background-color: #fff; 64 | border: none; 65 | width: 40px; 66 | height: 40px; 67 | box-shadow: 0 12px 24px rgba(0, 0, 0, 0.25); 68 | border-radius: 50%; 69 | cursor: pointer; 70 | position: absolute; 71 | display: flex; 72 | align-items: center; 73 | justify-content: center; 74 | } 75 | .btn--left { 76 | left: -39px; 77 | top: 50%; 78 | transform: translate(50%, -50%); 79 | } 80 | .btn--left:hover { 81 | opacity: 1; 82 | } 83 | .btn--right { 84 | right: 0; 85 | top: 50%; 86 | transform: translate(50%, -50%); 87 | } 88 | .btn--right:hover { 89 | opacity: 1; 90 | } 91 | .dots { 92 | position: absolute; 93 | left: 50%; 94 | bottom: 0; 95 | transform: translate(-50%, 32px); 96 | display: flex; 97 | gap: 12px; 98 | } 99 | .dot { 100 | width: 12px; 101 | height: 12px; 102 | /* border: none; */ 103 | border: 2px solid #087f5b; 104 | background-color: #fff; 105 | border-radius: 50%; 106 | cursor: pointer; 107 | } 108 | .dot--fill { 109 | background-color: #087f5b; 110 | } 111 | .quoteicon { 112 | width: 10%; 113 | } 114 | 115 | .btn { 116 | opacity: 0.8; 117 | } 118 | h1 { 119 | display: flex; 120 | justify-content: center; 121 | margin-top: 40px; 122 | /* font-family: "Bungee Spice", cursive; */ 123 | /* font-family: "Oswald", sans-serif; */ 124 | 125 | font-family: "Oswald", sans-serif; 126 | color: #087f5b; 127 | } 128 | -------------------------------------------------------------------------------- /Gaming_Banner/Images/pexel.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FirmanKurniawan/CSS-Projects/bfd22d16984e1215bcf05f08429daf87a2e9cd6c/Gaming_Banner/Images/pexel.jpg -------------------------------------------------------------------------------- /Gaming_Banner/Images/waller.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FirmanKurniawan/CSS-Projects/bfd22d16984e1215bcf05f08429daf87a2e9cd6c/Gaming_Banner/Images/waller.jpg -------------------------------------------------------------------------------- /Gaming_Banner/Images/waller1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FirmanKurniawan/CSS-Projects/bfd22d16984e1215bcf05f08429daf87a2e9cd6c/Gaming_Banner/Images/waller1.jpg -------------------------------------------------------------------------------- /Gaming_Banner/Images/waller3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FirmanKurniawan/CSS-Projects/bfd22d16984e1215bcf05f08429daf87a2e9cd6c/Gaming_Banner/Images/waller3.jpg -------------------------------------------------------------------------------- /Gaming_Banner/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Document 10 | 11 | 12 | 13 |
14 | 15 | 16 | -------------------------------------------------------------------------------- /Gaming_Banner/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | 6 | body { 7 | overflow: hidden; 8 | } 9 | 10 | .container { 11 | width: 100%; 12 | height: 100vh; 13 | background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(pexel.jpg); 14 | background-size: contain; 15 | background-position: center; 16 | background-repeat: no-repeat; 17 | animation-name: background; 18 | animation-duration: 30s; 19 | animation-iteration-count: infinite; 20 | animation-play-state: running; 21 | animation-timing-function: ease-in-out; 22 | } 23 | 24 | @keyframes background { 25 | 0% { 26 | background: url(./Images/waller.jpg); 27 | } 28 | 29 | 20% { 30 | background: url(./Images/waller1.jpg); 31 | } 32 | 33 | 40% { 34 | background: url(./Images/waller3.jpg); 35 | } 36 | 37 | 60% { 38 | background: url(./Images/pexel.jpg); 39 | } 40 | 41 | 80% { 42 | background: url(./Images/waller1.jpg); 43 | } 44 | 45 | 100% { 46 | background: url(./Images/waller3.jpg); 47 | } 48 | } -------------------------------------------------------------------------------- /HF 2022.css: -------------------------------------------------------------------------------- 1 | /* Bordered form */ 2 | form { 3 | border: 3px solid #f1f1f1; 4 | } 5 | 6 | /* Full-width inputs */ 7 | input[type=text], input[type=password] { 8 | width: 100%; 9 | padding: 12px 20px; 10 | margin: 8px 0; 11 | display: inline-block; 12 | border: 1px solid #ccc; 13 | box-sizing: border-box; 14 | } 15 | 16 | /* Set a style for all buttons */ 17 | button { 18 | background-color: #04AA6D; 19 | color: white; 20 | padding: 14px 20px; 21 | margin: 8px 0; 22 | border: none; 23 | cursor: pointer; 24 | width: 100%; 25 | } 26 | 27 | /* Add a hover effect for buttons */ 28 | button:hover { 29 | opacity: 0.8; 30 | } 31 | 32 | /* Extra style for the cancel button (red) */ 33 | .cancelbtn { 34 | width: auto; 35 | padding: 10px 18px; 36 | background-color: #f44336; 37 | } 38 | 39 | /* Center the avatar image inside this container */ 40 | .imgcontainer { 41 | text-align: center; 42 | margin: 24px 0 12px 0; 43 | } 44 | 45 | /* Avatar image */ 46 | img.avatar { 47 | width: 40%; 48 | border-radius: 50%; 49 | } 50 | 51 | /* Add padding to containers */ 52 | .container { 53 | padding: 16px; 54 | } 55 | 56 | /* The "Forgot password" text */ 57 | span.psw { 58 | float: right; 59 | padding-top: 16px; 60 | } 61 | 62 | /* Change styles for span and cancel button on extra small screens */ 63 | @media screen and (max-width: 300px) { 64 | span.psw { 65 | display: block; 66 | float: none; 67 | text-align: center; 68 | } 69 | .cancelbtn { 70 | width: 100%; 71 | } 72 | } 73 | 74 | -------------------------------------------------------------------------------- /New Year wish/Assets/Images/wall.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FirmanKurniawan/CSS-Projects/bfd22d16984e1215bcf05f08429daf87a2e9cd6c/New Year wish/Assets/Images/wall.jpg -------------------------------------------------------------------------------- /New Year wish/Assets/Style.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: 'Saira Condensed', sans-serif; 3 | font-size: 3rem; 4 | padding: 70px 0; 5 | text-align: center; 6 | background-color: #000000; 7 | } 8 | 9 | .wish { 10 | color: #02141a; 11 | text-transform: uppercase; 12 | letter-spacing: 3px; 13 | animation: animate 3s linear infinite; 14 | padding: 1px; 15 | 16 | 17 | } 18 | 19 | @keyframes animate { 20 | 0%, 18%, 20%, 50.1%, 60%, 65.1%, 80%, 90.1%, 92%{ 21 | color: #01181f; 22 | text-shadow: none; 23 | } 24 | 25 | 18.1%, 20.1%, 30%, 50%, 60.1%, 65%, 80.1%, 90%, 92.1%, 100%{ 26 | 27 | color: #fff; 28 | text-shadow: 0px 0px 10px #03bcf4, 29 | 0 0 20px #03bcf4, 30 | 0 0 40px #03bcf4, 31 | 0 0 80px #03bcf4, 32 | 0 0 160px #03bcf4, 33 | 0 0 400px #03bcf4; 34 | } 35 | 36 | 37 | 38 | } 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | @media (max-width: 548px) { 47 | body { 48 | font-size: 40px; 49 | padding: 70px 0; 50 | } 51 | 52 | } 53 | 54 | 55 | 56 | -------------------------------------------------------------------------------- /New Year wish/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 15 | 16 | 17 | Happy New Year 2022! 18 | 19 | 20 |

21 | Happy New Year
22 | 2022! 23 |

24 | 25 | 26 | 27 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /OpenStoreAnimation/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Fredoka+One'); 2 | 3 | .store-container { 4 | line-height: 0; 5 | margin: 50px auto; 6 | width: 50%; 7 | } 8 | .stroke { 9 | stroke: #0170bb; 10 | stroke-width: 5; 11 | stroke-linejoin: round; 12 | stroke-miterlimit: 10; 13 | } 14 | .round-end { 15 | stroke-linecap: round; 16 | } 17 | #store { 18 | animation: fadeIn 0.8s ease-in; 19 | } 20 | .border-animation { 21 | background-color: white; 22 | border-radius: 10px; 23 | position: relative; 24 | } 25 | .border-animation:after { 26 | content: ''; 27 | background: linear-gradient(45deg, #ccc 48.9%, #0170bb 49%); 28 | background-size: 300% 300%; 29 | border-radius: 10px; 30 | position: absolute; 31 | top: -5px; 32 | left: -5px; 33 | height: calc(100% + 10px); 34 | width: calc(100% + 10px); 35 | z-index: -1; 36 | animation: borderGradient 8s linear both infinite; 37 | } 38 | @keyframes borderGradient { 39 | 0%, 40 | 100% { 41 | background-position: 0% 100%; 42 | } 43 | 50% { 44 | background-position: 100% 0%; 45 | } 46 | } 47 | @keyframes fadeIn { 48 | to { 49 | opacity: 1; 50 | } 51 | } 52 | #browser { 53 | transform: translateY(-100%); 54 | -webkit-animation: moveDown 1.5s cubic-bezier(0.77, -0.5, 0.3, 1.5) forwards; 55 | animation: moveDown 1.5s cubic-bezier(0.77, -0.5, 0.3, 1.5) forwards; 56 | } 57 | @keyframes moveDown { 58 | from { 59 | transform: translate(0, -100%); 60 | } 61 | to { 62 | transform: translate(0, 0); 63 | } 64 | } 65 | #toldo { 66 | animation: fadeIn 1s 1.4s ease-in forwards; 67 | } 68 | .grass { 69 | animation: fadeIn 0.5s 1.6s ease-in forwards; 70 | } 71 | #window { 72 | animation: fadeIn 0.5s 1.8s ease-in forwards; 73 | } 74 | #door { 75 | animation: fadeIn 0.5s 2s ease-in forwards; 76 | } 77 | #sign { 78 | transform-origin: 837px 597px; 79 | animation: pendulum 1.5s 2s ease-in-out alternate; 80 | } 81 | .trees { 82 | animation: fadeIn 0.5s 2.2s ease-in forwards; 83 | } 84 | #toldo, 85 | .grass, 86 | #window, 87 | #door, 88 | .trees, 89 | .cat, 90 | .cat-shadow, 91 | .box, 92 | .parachute, 93 | .tshirt, 94 | .cap, 95 | .ball, 96 | #text, 97 | #button, 98 | .sky-circle, 99 | .sky-circle2, 100 | .sky-circle3 { 101 | opacity: 0; 102 | } 103 | @keyframes pendulum { 104 | 20% { 105 | transform: rotate(60deg); 106 | } 107 | 40% { 108 | transform: rotate(-40deg); 109 | } 110 | 60% { 111 | transform: rotate(20deg); 112 | } 113 | 80% { 114 | transform: rotate(-5deg); 115 | } 116 | } 117 | .cat { 118 | transform-origin: 1145px 620px; 119 | } 120 | .cat-shadow { 121 | transform-origin: 1115px 625px; 122 | } 123 | #store:hover .cat { 124 | animation: catHi 3s 3s cubic-bezier(0.7, -0.5, 0.3, 1.4); 125 | } 126 | #store:hover .cat-shadow { 127 | animation: catShadow 4s 2s cubic-bezier(0.7, -0.5, 0.3, 1.4) alternate; 128 | } 129 | @keyframes catHi { 130 | 0%, 131 | 100% { 132 | opacity: 0; 133 | transform: scale(0.8); 134 | } 135 | 10%, 136 | 60% { 137 | transform: scale(1); 138 | opacity: 1; 139 | } 140 | } 141 | @keyframes catShadow { 142 | 0%, 143 | 100% { 144 | transform: translate(40px, -35px) scale(0.3); 145 | } 146 | 10%, 147 | 60% { 148 | opacity: 1; 149 | transform: translate(-5px, 10px) scale(0.5); 150 | } 151 | 60% { 152 | opacity: 0; 153 | } 154 | } 155 | .box, 156 | .parachute { 157 | transform-origin: 430px 100px; 158 | animation: moveBox 14s 4s linear forwards infinite; 159 | } 160 | .parachute { 161 | animation: parachute 14s 4s linear forwards infinite; 162 | } 163 | @keyframes moveBox { 164 | 0% { 165 | opacity: 0; 166 | transform: translate(0, -150px) rotate(20deg); 167 | } 168 | 15% { 169 | opacity: 1; 170 | transform: translate(0, 100px) rotate(-15deg); 171 | } 172 | 25% { 173 | transform: translate(0, 250px) rotate(10deg); 174 | } 175 | 30% { 176 | transform: translate(0, 350px) rotate(-5deg); 177 | } 178 | 35% { 179 | opacity: 1; 180 | transform: translate(0, 570px) rotate(0deg); 181 | } 182 | 45%, 183 | 100% { 184 | opacity: 0; 185 | transform: translate(0, 570px); 186 | } 187 | } 188 | @keyframes parachute { 189 | 0% { 190 | transform: translate(0, -150px) rotate(20deg) scale(0.8); 191 | opacity: 0; 192 | } 193 | 15% { 194 | transform: translate(0, 100px) rotate(-15deg) scale(1); 195 | opacity: 1; 196 | } 197 | 25% { 198 | transform: translate(0, 250px) rotate(10deg); 199 | } 200 | 30% { 201 | transform: translate(0, 350px) rotate(-5deg); 202 | } 203 | 33% { 204 | transform: translate(0, 460px) rotate(0deg) scale(0.9); 205 | opacity: 1; 206 | } 207 | 45%, 208 | 100% { 209 | transform: translate(0, 480px); 210 | opacity: 0; 211 | } 212 | } 213 | .tshirt { 214 | animation: fadeInOut 42s 10s ease-in forwards infinite; 215 | } 216 | .cap { 217 | animation: fadeInOut 42s 24s ease-in forwards infinite; 218 | } 219 | .ball { 220 | animation: fadeInOut 42s 38s ease-in forwards infinite; 221 | } 222 | #text, 223 | #button { 224 | animation: fadeIn 1s 5s ease-in forwards; 225 | } 226 | @keyframes fadeInOut { 227 | 5%, 228 | 12% { 229 | opacity: 1; 230 | } 231 | 20% { 232 | opacity: 0; 233 | } 234 | } 235 | .cloud { 236 | animation: clouds 50s linear backwards infinite; 237 | } 238 | .cloud2 { 239 | animation: clouds 40s 40s linear backwards infinite; 240 | } 241 | .plane { 242 | animation: clouds 30s linear backwards infinite; 243 | will-change: transform; 244 | } 245 | @keyframes clouds { 246 | from { 247 | transform: translate(-150%, 0); 248 | } 249 | to { 250 | transform: translate(150%, 0); 251 | } 252 | } 253 | .sky-circle { 254 | animation: fadeInOut 10s 5s ease-in infinite; 255 | } 256 | .sky-circle2 { 257 | animation: fadeInOut 12s 30s ease-in infinite; 258 | } 259 | .sky-circle3 { 260 | animation: fadeInOut 8s 40s ease-in infinite; 261 | } 262 | -------------------------------------------------------------------------------- /Plotmeasurement: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: 'Poppins', cursive; 3 | display: flex; 4 | flex-direction: column; 5 | height: 100vh; 6 | } 7 | 8 | main { 9 | flex-grow: 1; 10 | background: url("Mathematics.jpg") no-repeat; 11 | background-position: center; 12 | background-size: cover; 13 | display: flex; 14 | justify-content: center; 15 | align-items: center; 16 | margin: 0; 17 | } 18 | 19 | h1 { 20 | font-weight: 500; 21 | font-size: x-large; 22 | padding: 0.25rem; 23 | margin: 0; 24 | } 25 | 26 | .feet, .marla, .kanal, .acre { 27 | color: rgba(25, 135, 84); 28 | text-align: center; 29 | font-weight: 700; 30 | margin-bottom: 0.50rem; 31 | } 32 | 33 | #warn { 34 | background: none; 35 | border-radius: 0.30rem; 36 | } 37 | 38 | #warn-box { 39 | margin: 0; 40 | } 41 | 42 | #warning { 43 | margin: 0; 44 | font-weight: 600; 45 | font-size: larger; 46 | text-align: center; 47 | } 48 | 49 | #ans1, #ans3{ 50 | text-align: center; 51 | font-weight: 500; 52 | font-size: x-large; 53 | margin-bottom: 1.25rem; 54 | } 55 | 56 | #ans2, #ans4 { 57 | text-align: center; 58 | font-weight: 500; 59 | font-size: x-large; 60 | margin-bottom: 0; 61 | } 62 | 63 | #submit, #reset { 64 | font-weight: 500; 65 | } 66 | 67 | #footer h3 { 68 | margin: 0; 69 | font-size: 0.90rem; 70 | font-weight: 500; 71 | text-align: center; 72 | } 73 | 74 | .link { 75 | text-decoration: none; 76 | } 77 | -------------------------------------------------------------------------------- /Plotmeasurement.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: 'Poppins', cursive; 3 | display: flex; 4 | flex-direction: column; 5 | height: 100vh; 6 | } 7 | 8 | main { 9 | flex-grow: 1; 10 | background: url("Mathematics.jpg") no-repeat; 11 | background-position: center; 12 | background-size: cover; 13 | display: flex; 14 | justify-content: center; 15 | align-items: center; 16 | margin: 0; 17 | } 18 | 19 | h1 { 20 | font-weight: 500; 21 | font-size: x-large; 22 | padding: 0.25rem; 23 | margin: 0; 24 | } 25 | 26 | .feet, .marla, .kanal, .acre { 27 | color: rgba(25, 135, 84); 28 | text-align: center; 29 | font-weight: 700; 30 | margin-bottom: 0.50rem; 31 | } 32 | 33 | #warn { 34 | background: none; 35 | border-radius: 0.30rem; 36 | } 37 | 38 | #warn-box { 39 | margin: 0; 40 | } 41 | 42 | #warning { 43 | margin: 0; 44 | font-weight: 600; 45 | font-size: larger; 46 | text-align: center; 47 | } 48 | 49 | #ans1, #ans3{ 50 | text-align: center; 51 | font-weight: 500; 52 | font-size: x-large; 53 | margin-bottom: 1.25rem; 54 | } 55 | 56 | #ans2, #ans4 { 57 | text-align: center; 58 | font-weight: 500; 59 | font-size: x-large; 60 | margin-bottom: 0; 61 | } 62 | 63 | #submit, #reset { 64 | font-weight: 500; 65 | } 66 | 67 | #footer h3 { 68 | margin: 0; 69 | font-size: 0.90rem; 70 | font-weight: 500; 71 | text-align: center; 72 | } 73 | 74 | .link { 75 | text-decoration: none; 76 | } 77 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # CSS-Projects 2 | # hacktoberfest 3 | 4 | ## Contributing 5 | Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change. 6 | 7 | Please make sure to update tests as appropriate. 8 | 9 | ## License 10 | [MIT](https://choosealicense.com/licenses/mit/) 11 | 12 | hacktoberfest 2022 13 | Hacktoberfest uyee 14 | hacktoberfest josgandos 15 | mau hacktober bang 16 | hacktober 17 | abay-hacktoberfest 18 | hacktoberfest2022 19 | hacktoberfest 20 | HACKTOBERFEST2022 21 | hacktoberfest jos 22 | -------------------------------------------------------------------------------- /RGB Game/README.md: -------------------------------------------------------------------------------- 1 | # RGB color guessing game 2 | 3 | 4 | A RGB Color guessing game in which you need to guess right color. 5 | 6 | ![image](https://user-images.githubusercontent.com/41536903/119881808-5685e500-bf4b-11eb-869c-e6cdea96aadc.png) 7 | 8 | -------------------------------------------------------------------------------- /RGB Game/colorGameProject.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #232323; 3 | margin: 0; 4 | font-family: "Montserrat", "Avenir"; 5 | } 6 | 7 | .square { 8 | width: 30%; 9 | background: purple; 10 | padding-bottom: 30%; 11 | float: left; 12 | margin: 1.66%; 13 | border-radius: 15%; 14 | transition: background 0.6s; 15 | -webkit-transition: background 0.6s; 16 | -moz-transition: background 0.6s; 17 | } 18 | 19 | #container { 20 | margin: 20px auto; 21 | max-width: 600px; 22 | } 23 | 24 | h1 { 25 | text-align: center; 26 | line-height: 1.1; 27 | font-weight: normal; 28 | color: white; 29 | background: steelblue; 30 | margin: 0; 31 | text-transform: uppercase; 32 | padding: 20px 0; 33 | } 34 | 35 | #colorDisplay { 36 | font-size: 200%; 37 | } 38 | 39 | #message { 40 | display: inline-block; 41 | width: 20%; 42 | } 43 | 44 | #stripe { 45 | background: white; 46 | height: 30px; 47 | text-align: center; 48 | color: black; 49 | } 50 | 51 | .selected { 52 | color: white; 53 | background: steelblue; 54 | } 55 | 56 | button { 57 | border: none; 58 | background: none; 59 | text-transform: uppercase; 60 | height: 100%; 61 | font-weight: 700; 62 | color: steelblue; 63 | letter-spacing: 1px; 64 | font-size: inherit; 65 | transition: all 0.3s; 66 | -webkit-transition: all 0.3s; 67 | -moz-transition: all 0.3s; 68 | outline: none; 69 | } 70 | 71 | button:hover { 72 | color: white; 73 | background: steelblue; 74 | } -------------------------------------------------------------------------------- /RGB Game/colorGameProject.js: -------------------------------------------------------------------------------- 1 | var numSquares = 6; 2 | var colors = []; 3 | var pickedColor; 4 | var squares = document.querySelectorAll(".square"); 5 | var colorDisplay = document.getElementById("colorDisplay"); 6 | var messageDisplay = document.querySelector("#message"); 7 | var h1 = document.querySelector("h1"); 8 | var resetButton = document.querySelector("#reset"); 9 | var modeButtons = document.querySelectorAll(".mode"); 10 | 11 | init(); 12 | 13 | function init(){ 14 | setupModeButtons(); 15 | setupSquares(); 16 | reset(); 17 | } 18 | 19 | function setupModeButtons(){ 20 | for(var i = 0; i < modeButtons.length; i++){ 21 | modeButtons[i].addEventListener("click", function(){ 22 | modeButtons[0].classList.remove("selected"); 23 | modeButtons[1].classList.remove("selected"); 24 | this.classList.add("selected"); 25 | this.textContent === "Easy" ? numSquares = 3: numSquares = 6; 26 | reset(); 27 | }); 28 | } 29 | } 30 | 31 | function setupSquares(){ 32 | for(var i = 0; i < squares.length; i++){ 33 | //add click listeners to squares 34 | squares[i].addEventListener("click", function(){ 35 | //grab color of clicked square 36 | var clickedColor = this.style.background; 37 | //compare color to pickedColor 38 | if(clickedColor === pickedColor){ 39 | messageDisplay.textContent = "Correct!"; 40 | resetButton.textContent = "Play Again?" 41 | changeColors(clickedColor); 42 | h1.style.background = clickedColor; 43 | } else { 44 | this.style.background = "#232323"; 45 | messageDisplay.textContent = "Try Again" 46 | } 47 | }); 48 | } 49 | } 50 | 51 | function reset(){ 52 | colors = generateRandomColors(numSquares); 53 | //pick a new random color from array 54 | pickedColor = pickColor(); 55 | //change colorDisplay to match picked Color 56 | colorDisplay.textContent = pickedColor; 57 | resetButton.textContent = "New Colors" 58 | messageDisplay.textContent = ""; 59 | //change colors of squares 60 | for(var i = 0; i < squares.length; i++){ 61 | if(colors[i]){ 62 | squares[i].style.display = "block" 63 | squares[i].style.background = colors[i]; 64 | } else { 65 | squares[i].style.display = "none"; 66 | } 67 | } 68 | h1.style.background = "steelblue"; 69 | } 70 | 71 | resetButton.addEventListener("click", function(){ 72 | reset(); 73 | }) 74 | 75 | function changeColors(color){ 76 | //loop through all squares 77 | for(var i = 0; i < squares.length; i++){ 78 | //change each color to match given color 79 | squares[i].style.background = color; 80 | } 81 | } 82 | 83 | function pickColor(){ 84 | var random = Math.floor(Math.random() * colors.length); 85 | return colors[random]; 86 | } 87 | 88 | function generateRandomColors(num){ 89 | //make an array 90 | var arr = [] 91 | //repeat num times 92 | for(var i = 0; i < num; i++){ 93 | //get random color and push into arr 94 | arr.push(randomColor()) 95 | } 96 | //return that array 97 | return arr; 98 | } 99 | 100 | function randomColor(){ 101 | //pick a "red" from 0 - 255 102 | var r = Math.floor(Math.random() * 256); 103 | //pick a "green" from 0 -255 104 | var g = Math.floor(Math.random() * 256); 105 | //pick a "blue" from 0 -255 106 | var b = Math.floor(Math.random() * 256); 107 | return "rgb(" + r + ", " + g + ", " + b + ")"; 108 | } -------------------------------------------------------------------------------- /RGB Game/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Color Game 5 | 6 | 7 | 8 |

9 | The Great 10 |
11 | RGB 12 |
13 | Color Game 14 |

15 | 16 |
17 | 18 | 19 | 20 | 21 |
22 | 23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 | 32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /Reset.css: -------------------------------------------------------------------------------- 1 | html, body, div, span, applet, object, iframe, 2 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 3 | a, abbr, acronym, address, big, cite, code, 4 | del, dfn, em, img, ins, kbd, q, s, samp, 5 | small, strike, strong, sub, sup, tt, var, 6 | b, u, i, center, 7 | dl, dt, dd, ol, ul, li, 8 | fieldset, form, label, legend, 9 | table, caption, tbody, tfoot, thead, tr, th, td, 10 | article, aside, canvas, details, embed, 11 | figure, figcaption, footer, header, hgroup, 12 | menu, nav, output, ruby, section, summary, 13 | time, mark, audio, video { 14 | margin: 0; 15 | padding: 0; 16 | border: 0; 17 | font-size: 100%; 18 | font: inherit; 19 | vertical-align: baseline; 20 | } 21 | /* HTML5 display-role reset for older browsers */ 22 | article, aside, details, figcaption, figure, 23 | footer, header, hgroup, menu, nav, section { 24 | display: block; 25 | } 26 | body { 27 | line-height: 1; 28 | } 29 | ol, ul { 30 | list-style: none; 31 | } 32 | blockquote, q { 33 | quotes: none; 34 | } 35 | blockquote:before, blockquote:after, 36 | q:before, q:after { 37 | content: ''; 38 | content: none; 39 | } 40 | table { 41 | border-collapse: collapse; 42 | border-spacing: 0; 43 | } 44 | blockquote, q { 45 | quotes: none; 46 | } 47 | blockquote:before, blockquote:after, 48 | q:before, q:after { 49 | content: ''; 50 | content: none; 51 | } 52 | table { 53 | border-collapse: collapse; 54 | border-spacing: 0; 55 | } 56 | -------------------------------------------------------------------------------- /Rotating-Gallery/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FirmanKurniawan/CSS-Projects/bfd22d16984e1215bcf05f08429daf87a2e9cd6c/Rotating-Gallery/1.jpg -------------------------------------------------------------------------------- /Rotating-Gallery/2.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FirmanKurniawan/CSS-Projects/bfd22d16984e1215bcf05f08429daf87a2e9cd6c/Rotating-Gallery/2.webp -------------------------------------------------------------------------------- /Rotating-Gallery/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FirmanKurniawan/CSS-Projects/bfd22d16984e1215bcf05f08429daf87a2e9cd6c/Rotating-Gallery/3.jpg -------------------------------------------------------------------------------- /Rotating-Gallery/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FirmanKurniawan/CSS-Projects/bfd22d16984e1215bcf05f08429daf87a2e9cd6c/Rotating-Gallery/4.jpg -------------------------------------------------------------------------------- /Rotating-Gallery/5.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FirmanKurniawan/CSS-Projects/bfd22d16984e1215bcf05f08429daf87a2e9cd6c/Rotating-Gallery/5.webp -------------------------------------------------------------------------------- /Rotating-Gallery/6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FirmanKurniawan/CSS-Projects/bfd22d16984e1215bcf05f08429daf87a2e9cd6c/Rotating-Gallery/6.jpg -------------------------------------------------------------------------------- /Rotating-Gallery/7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FirmanKurniawan/CSS-Projects/bfd22d16984e1215bcf05f08429daf87a2e9cd6c/Rotating-Gallery/7.jpg -------------------------------------------------------------------------------- /Rotating-Gallery/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Rotating Image Gallery 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 | 44 | -------------------------------------------------------------------------------- /Rotating-Gallery/script.js: -------------------------------------------------------------------------------- 1 | const imageContainerEl = document.querySelector(".image-container"); 2 | 3 | const prevEl = document.getElementById("prev"); 4 | const nextEl = document.getElementById("next"); 5 | let x = 0; 6 | let timer; 7 | prevEl.addEventListener("click", () => { 8 | x = x + 45; 9 | clearTimeout(timer); 10 | updateGallery(); 11 | }); 12 | nextEl.addEventListener("click", () => { 13 | x = x - 45; 14 | clearTimeout(timer); 15 | updateGallery(); 16 | }); 17 | 18 | function updateGallery() { 19 | imageContainerEl.style.transform = `perspective(1000px) rotateY(${x}deg)`; 20 | timer = setTimeout(() => { 21 | x = x - 45; 22 | updateGallery(); 23 | }, 3000); 24 | } 25 | 26 | updateGallery(); -------------------------------------------------------------------------------- /Rotating-Gallery/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | display: flex; 4 | flex-direction: column; 5 | align-items: center; 6 | text-align: center; 7 | height: 100vh; 8 | justify-content: center; 9 | background-color: black; 10 | overflow: hidden; 11 | } 12 | 13 | .image-container { 14 | position: relative; 15 | width: 200px; 16 | height: 200px; 17 | transform-style: preserve-3d; 18 | transform: perspective(1000px) rotateY(0deg); 19 | transition: transform 0.7s; 20 | } 21 | 22 | .image-container span { 23 | position: absolute; 24 | top: 0; 25 | left: 0; 26 | width: 100%; 27 | transform: rotateY(calc(var(--i) * 45deg)) translateZ(400px); 28 | } 29 | 30 | .image-container span img { 31 | position: absolute; 32 | left: 0; 33 | top: 0; 34 | width: 100%; 35 | } 36 | 37 | .btn-container { 38 | position: relative; 39 | width: 80%; 40 | } 41 | 42 | .btn { 43 | position: absolute; 44 | bottom: -80px; 45 | background-color: rgb(90, 195, 205); 46 | color: rgb(255, 255, 255); 47 | border: none; 48 | padding: 10px 20px; 49 | border-radius: 5px; 50 | cursor: pointer; 51 | } 52 | 53 | .btn:hover { 54 | filter: brightness(1.5); 55 | } 56 | 57 | #prev { 58 | left: 20%; 59 | } 60 | 61 | #next { 62 | right: 20%; 63 | } -------------------------------------------------------------------------------- /Zuxtoberfest: -------------------------------------------------------------------------------- 1 | #include 2 | 3 | using namespace std; 4 | 5 | int main(){ 6 | 7 | float l, r; 8 | const float phi = 3.14; 9 | 10 | cout << "=================================\n"; 11 | cout << "Program Menghitung Luas Lingkaran\n"; 12 | cout << "=================================\n"; 13 | 14 | cout << "Masukkan panjang jari-jari lingkaran: "; 15 | cin >> r; 16 | 17 | l = phi*r*r; 18 | 19 | cout << "Luas Lingkaran adalah "<< l << endl; 20 | 21 | return 0; 22 | } 23 | -------------------------------------------------------------------------------- /animation-roll.css: -------------------------------------------------------------------------------- 1 | .animated { 2 | background-image: url(/css/images/logo.png); 3 | background-repeat: no-repeat; 4 | background-position: left top; 5 | padding-top:95px; 6 | margin-bottom:60px; 7 | -webkit-animation-duration: 10s; 8 | animation-duration: 10s; 9 | -webkit-animation-fill-mode: both; 10 | animation-fill-mode: both; 11 | } 12 | 13 | @-webkit-keyframes rollIn { 14 | 0% { 15 | opacity: 0; 16 | -webkit-transform: translateX(-100%) rotate(-120deg); 17 | } 18 | 100% { 19 | opacity: 1; 20 | -webkit-transform: translateX(0px) rotate(0deg); 21 | } 22 | } 23 | 24 | @keyframes rollIn { 25 | 0% { 26 | opacity: 0; 27 | transform: translateX(-100%) rotate(-120deg); 28 | } 29 | 100% { 30 | opacity: 1; 31 | transform: translateX(0px) rotate(0deg); 32 | } 33 | } 34 | .rollIn { 35 | -webkit-animation-name: rollIn; 36 | animation-name: rollIn; 37 | } -------------------------------------------------------------------------------- /animation-text/img/abc.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FirmanKurniawan/CSS-Projects/bfd22d16984e1215bcf05f08429daf87a2e9cd6c/animation-text/img/abc.png -------------------------------------------------------------------------------- /animation-text/img/background.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FirmanKurniawan/CSS-Projects/bfd22d16984e1215bcf05f08429daf87a2e9cd6c/animation-text/img/background.jpg -------------------------------------------------------------------------------- /animation-text/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 |

WELCOME
HACKTOBERFEST 2022!

12 | 13 | 14 | -------------------------------------------------------------------------------- /animation-text/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap'); 2 | * { 3 | margin: 0; 4 | padding: 0; 5 | box-sizing: border-box; 6 | } 7 | body { 8 | height: 100vh; 9 | display: flex; 10 | align-items: center; 11 | justify-content: center; 12 | background: rgb(18, 18, 18); 13 | background: linear-gradient(300deg, rgba(18, 18, 18, 1) 35%, rgba(48, 48, 48, 1) 100%); 14 | color: white; 15 | } 16 | 17 | h1 { 18 | font-size: 3em; 19 | letter-spacing: 1px; 20 | font-weight: bold; 21 | font-family: 'Permanent Marker', cursive; 22 | background: url('img/abc.png'); 23 | -webkit-background-clip: text; 24 | background-clip: text; 25 | -webkit-text-fill-color: transparent; 26 | animation: text 7.5s linear infinite; 27 | } 28 | 29 | @keyframes text { 30 | from { 31 | background-position: 0% 50%; 32 | } 33 | to { 34 | background-position: 100% 50%; 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /blabla.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: 'Poppins', cursive; 3 | display: flex; 4 | flex-direction: column; 5 | height: 100vh; 6 | } 7 | 8 | main { 9 | flex-grow: 1; 10 | background: url("Mathematics.jpg") no-repeat; 11 | background-position: center; 12 | background-size: cover; 13 | display: flex; 14 | justify-content: center; 15 | align-items: center; 16 | margin: 0; 17 | } 18 | 19 | h1 { 20 | font-weight: 500; 21 | font-size: x-large; 22 | padding: 0.25rem; 23 | margin: 0; 24 | } 25 | 26 | .feet, .marla, .kanal, .acre { 27 | color: rgba(25, 135, 84); 28 | text-align: center; 29 | font-weight: 700; 30 | margin-bottom: 0.50rem; 31 | } 32 | 33 | #warn { 34 | background: none; 35 | border-radius: 0.30rem; 36 | } 37 | 38 | #warn-box { 39 | margin: 0; 40 | } 41 | 42 | #warning { 43 | margin: 0; 44 | font-weight: 600; 45 | font-size: larger; 46 | text-align: center; 47 | } 48 | 49 | #ans1, #ans3{ 50 | text-align: center; 51 | font-weight: 500; 52 | font-size: x-large; 53 | margin-bottom: 1.25rem; 54 | } 55 | 56 | #ans2, #ans4 { 57 | text-align: center; 58 | font-weight: 500; 59 | font-size: x-large; 60 | margin-bottom: 0; 61 | } 62 | 63 | #submit, #reset { 64 | font-weight: 500; 65 | } 66 | 67 | #footer h3 { 68 | margin: 0; 69 | font-size: 0.90rem; 70 | font-weight: 500; 71 | text-align: center; 72 | } 73 | 74 | .link { 75 | text-decoration: none; 76 | } 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 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 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | 172 | 173 | 174 | 175 | 176 | 177 | 178 | 179 | 180 | 181 | 182 | 183 | 184 | 185 | 186 | 187 | 188 | 189 | 190 | 191 | 192 | 193 | 194 | 195 | 196 | 197 | 198 | 199 | 200 | 201 | 202 | 203 | 204 | 205 | 206 | 207 | 208 | 209 | -------------------------------------------------------------------------------- /border.css: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 17 | 18 | 19 | 20 |

The border-style Property

21 |

This property specifies what kind of border to display:

22 | 23 |

A dotted border.

24 |

A dashed border.

25 |

A solid border.

26 |

A double border.

27 |

A groove border.

28 |

A ridge border.

29 |

An inset border.

30 |

An outset border.

31 |

No border.

32 | 33 |

A mixed border.

34 | 35 | 36 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /byskue.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css?family=Quicksand:400,700&display=swap"); 2 | 3 | body { 4 | font-family: "Quicksand", sans-serif; 5 | margin: 0; 6 | padding: 0; 7 | } 8 | 9 | * { 10 | box-sizing: border-box; 11 | } 12 | 13 | main { 14 | padding: 20px; 15 | overflow: auto; 16 | } 17 | 18 | header { 19 | display: inline; 20 | } 21 | 22 | .content { 23 | float: left; 24 | width: 75%; 25 | } 26 | 27 | aside { 28 | float: right; 29 | width: 25%; 30 | padding-left: 20px; 31 | } 32 | 33 | h2, 34 | h3 { 35 | color: #00a2c6; 36 | } 37 | 38 | nav { 39 | background-color: #00a2c6; 40 | padding: 5px; 41 | position: sticky; 42 | top: 0; 43 | } 44 | 45 | nav a { 46 | font-size: 18px; 47 | font-weight: 400; 48 | text-decoration: none; 49 | color: white; 50 | } 51 | 52 | nav a:hover { 53 | font-weight: bold; 54 | } 55 | 56 | .profile header { 57 | text-align: center; 58 | } 59 | 60 | .featured-image { 61 | width: 100%; 62 | max-height: 300px; 63 | object-fit: cover; 64 | object-position: center; 65 | } 66 | 67 | .profile img { 68 | width: 200px; 69 | } 70 | 71 | .card { 72 | box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); 73 | border-radius: 5px; 74 | padding: 20px; 75 | margin-top: 20px; 76 | } 77 | 78 | .jumbotron { 79 | font-size: 20px; 80 | padding: 60px; 81 | background-color: #00c8eb; 82 | text-align: center; 83 | color: white; 84 | } 85 | 86 | nav li { 87 | display: inline; 88 | list-style-type: none; 89 | margin-right: 20px; 90 | } 91 | 92 | footer { 93 | padding: 20px; 94 | color: white; 95 | background-color: #00a2c6; 96 | text-align: center; 97 | font-weight: bold; 98 | } 99 | 100 | @media screen and (max-width: 1000px) { 101 | #content, 102 | aside { 103 | width: 100%; 104 | padding: 0; 105 | } 106 | } 107 | -------------------------------------------------------------------------------- /card.css: -------------------------------------------------------------------------------- 1 | .card { 2 | background-color: #fff; 3 | 4 | background-color: #fff; 5 | border-radius: 4px; 6 | box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1); 7 | display: flex; 8 | flex-direction: column; 9 | margin: 0 0 1rem; 10 | overflow: scroll; 11 | position: relative; 12 | transition: box-shadow 0.2s ease-in-out; 13 | } 14 | -------------------------------------------------------------------------------- /css1.css: -------------------------------------------------------------------------------- 1 | /*------------------------------------- 2 | TABLE OF CONTENTS: 3 | -------------------------------------*/ 4 | 5 | /*------------------------------------- 6 | + Import Font 7 | + General Layout 8 | + Typography 9 | + Page Title 10 | + Helper Classes 11 | + Preloader 12 | + UI - buttons 13 | + UI - badges & Waves 14 | + UI - Colors 15 | + UI - Toasts 16 | + UI - Modal 17 | + UI - Grid 18 | + UI - Icons 19 | + Form Select 20 | + Dropdowns 21 | + Mediabox 22 | + Date picker 23 | + Time picker 24 | + Feature Discovery 25 | + Carousel 26 | + Carousel Home Screen 27 | + Slider 28 | + Testimonials 29 | + Floating action buttons 30 | + Tooltip 31 | + Highlight 32 | + Breadcrumbs 33 | + Buttons 34 | + Badges 35 | + Blockquote 36 | + Pagination 37 | + Spineers / preloaders 38 | + Carousel Basic 39 | + Accordion 40 | + Waves 41 | + Modal 42 | + Page Top Bar 43 | + Page Top Bar - Left Align 44 | + Page Top Bar - App Based 45 | + Page Top Bar - Right Aligned 46 | + Page Top Bar - Dark Style 47 | + Page Top Bar - Colored Style 48 | + Navigation Menu 49 | + Navigation Menu - Centered 50 | + Navigation Menu - Dark Style 51 | + Navigation Menu - Colored Style 52 | + Sub pages - Inner Menu Links 53 | + Footer 54 | + Footer - Light Style 55 | + Footer - Colored Style 56 | + Footer - Minimal 57 | + Navigation User Menu 58 | + Drop Down 59 | + Collection 60 | + Progress Bars 61 | + Back to top button 62 | + Cards 63 | + Tabs 64 | + Icon Boxes 65 | + Chips 66 | + Form Range Sliders 67 | + Switches 68 | + Form Elements 69 | + Checkboxes 70 | + Radio Buttons 71 | + Select 72 | + Settings 73 | + Parallax 74 | + Masonry 75 | + Cards Wrap 76 | + Chat 77 | + Calendar 78 | + Events 79 | + Mailbox / Messages 80 | + Profile Page 81 | + Timeline 82 | + Portfolio 83 | + Blogs 84 | + Blogs - Aligned 85 | + Blogs - Small Left Style 86 | + Blogs - Medium Left Style 87 | + Blogs - Small Right Style 88 | + Blogs - Medium Right Style 89 | + Blogs - Small Alternate Style 90 | + Blogs - Medium Alternate Style 91 | + Blogs - Non Image 92 | + Login Page 93 | + Welcome page 94 | + Error Pages 95 | + Search Page 96 | + Pricing Tables 97 | + Invoice 98 | + Notifications 99 | + Edit Profile 100 | + App Settings 101 | + Clients 102 | + Fixed Footer Menu 103 | + Fixed Footer Menu - Dark Style 104 | + Fixed Footer Menu - Colored Style 105 | + Perfect Scrollbar 106 | + Table 107 | + Contact us page 108 | + Fancybox 109 | + Image Filter Overlay 110 | + Site - Dark Mode 111 | + Site - Dark Mode - Calendar 112 | + Site - Dark Mode - Events 113 | + Site - Dark Mode - Collections 114 | + Site - Dark Mode - Chat 115 | + Site - Dark Mode - Edit Profile 116 | + Site - Dark Mode - UI 117 | + Site - Dark Mode - Cards 118 | + Site - Dark Mode - Table 119 | + Site - Dark Mode - Badge and collapsible 120 | + Site - Dark Mode - Dropdown 121 | + Site - Dark Mode - Tabs 122 | + Site - Dark Mode - Iconboxes 123 | + Site - Dark Mode - Pagination 124 | + Site - Dark Mode - Modal & Waves 125 | + Site - Dark Mode - Forms 126 | + Site - Dark Mode - Datepicker and Timepicker 127 | + Site - Dark Mode - Checkbox & Radio 128 | + Site - Dark Mode - Chips 129 | + Site - Dark Mode - Range & Select 130 | + Site - Dark Mode - Switches 131 | + Site - Dark Mode - Inputs 132 | + Site - Dark Mode - Timeline 133 | + Site - Dark Mode - Pricing Tables & Search 134 | + Site - Dark Mode - Blogs 135 | + Site - Dark Mode - Client 136 | + Site - Dark Mode - Calendar 137 | + Site - Dark Mode - Portfolio 138 | + Site - Dark Mode - UI Icons 139 | --------------------------------------*/ 140 | 141 | /*------------------------------------- 142 | Variables 143 | + Font: Raleway 144 | + Primary Color: var(--primary-color) / rgba(var(--primary-rgb), 1) 145 | + Accent Color: var(--accent-color) / rgba(var(--accent-rgb), 1) 146 | + Text Color: #455A64 147 | + Background Color: #f5f5f5 148 | + Dark Mode Background Color: #263238 / #37474F / #455A64 149 | + Dark Mode Text Color: #f5f5f5 / #CFD8DC 150 | -------------------------------------*/ 151 | 152 | /*------------------------------------- 153 | Import Font 154 | -------------------------------------*/ 155 | 156 | @import url(https://fonts.googleapis.com/css?family=Raleway:400,500,600); 157 | @import url("variables.css"); 158 | 159 | @import url("_general.css"); 160 | @import url("_preloader.css"); 161 | @import url("_ui.css"); 162 | @import url("_datepicker.css"); 163 | @import url("_timepicker.css"); 164 | @import url("_carousel.css"); 165 | @import url("_carousel-home-screen.css"); 166 | @import url("_slider.css"); 167 | @import url("_testimonials.css"); 168 | @import url("_floating-action.css"); 169 | @import url("_tooltips.css"); 170 | @import url("_buttons.css"); 171 | @import url("_badges.css"); 172 | @import url("_blockquotes.css"); 173 | @import url("_pagination.css"); 174 | @import url("_spinners.css"); 175 | @import url("_accordion.css"); 176 | @import url("_waves.css"); 177 | @import url("_modal.css"); 178 | @import url("_topbar.css"); 179 | @import url("_navigation.css"); 180 | @import url("_navigation-centered.css"); 181 | @import url("_navigation-dark.css"); 182 | @import url("_navigation-colored.css"); 183 | @import url("_subpages.css"); 184 | @import url("_footer.css"); 185 | @import url("_footer-light.css"); 186 | @import url("_footer-colored.css"); 187 | @import url("_footer-minimal.css"); 188 | @import url("_dropdown.css"); 189 | @import url("_collection.css"); 190 | @import url("_progress.css"); 191 | @import url("_backtotop.css"); 192 | @import url("_cards.css"); 193 | @import url("_tabs.css"); 194 | @import url("_iconboxes.css"); 195 | @import url("_chips.css"); 196 | @import url("_form-range-sliders.css"); 197 | @import url("_switches.css"); 198 | @import url("_form-elements.css"); 199 | @import url("_settings.css"); 200 | @import url("_parallax.css"); 201 | @import url("_chat.css"); 202 | @import url("_calendar.css"); 203 | @import url("_events.css"); 204 | @import url("_mailbox.css"); 205 | @import url("_profile.css"); 206 | @import url("_timeline.css"); 207 | @import url("_portfolio.css"); 208 | @import url("_blogs.css"); 209 | @import url("_products.css"); 210 | @import url("_login.css"); 211 | @import url("_welcome.css"); 212 | @import url("_error.css"); 213 | @import url("_search.css"); 214 | @import url("_pricing.css"); 215 | @import url("_invoice.css"); 216 | @import url("_notifications.css"); 217 | @import url("_profile-edit.css"); 218 | @import url("_app-settings.css"); 219 | @import url("_clients.css"); 220 | @import url("_fixed-footer-menu.css"); 221 | @import url("_perfect-scrollbar.css"); 222 | @import url("_tables.css"); 223 | @import url("_contactus.css"); 224 | @import url("_fancybox.css"); 225 | @import url("_image-filter.css"); 226 | @import url("_shadow.css"); 227 | @import url("_team.css"); 228 | @import url("_charts.css"); 229 | @import url("_activity.css"); 230 | @import url("_site-darkmode.css"); 231 | -------------------------------------------------------------------------------- /cssxx/style-380.css: -------------------------------------------------------------------------------- 1 | @media only screen and (max-width: 380px) { 2 | *{ 3 | padding: 0px; 4 | margin: 0px; 5 | font-family: arial; 6 | } 7 | input[type="search"]{ 8 | width: 200px; 9 | height: 25px; 10 | padding-left: 5px; 11 | padding-right: 5px; 12 | 13 | } 14 | input[name="sea"]{ 15 | width: 27px; 16 | height: 27px; 17 | padding: 0px; 18 | color: #fff; 19 | background: #c04848; 20 | border: 0px solid #fff; 21 | } 22 | input[name="sea"]:hover{ 23 | cursor: pointer; 24 | background: #933939; 25 | } 26 | #wrap{ 27 | width: 380px; 28 | height: auto; 29 | margin: auto; 30 | } 31 | #nav{ 32 | width:380px; 33 | height: 40px; 34 | background: #2e2e2e; 35 | margin-left: auto; 36 | margin-right: auto; 37 | position: fixed; 38 | z-index: 99999; 39 | color: #fff; 40 | display: inline-block; 41 | } 42 | #nav #nama{ 43 | font-family:"ether Cute Poison"; 44 | width: 150px; 45 | height: 40px; 46 | font-size: 25px; 47 | text-align: center; 48 | line-height: 40px; 49 | float: left; 50 | cursor: pointer; 51 | 52 | } 53 | #nav #login{ 54 | width: 200px; 55 | height: 40px; 56 | font-size: 13px; 57 | text-align: center; 58 | line-height: 40px; 59 | float: right; 60 | font-weight: bold; 61 | cursor: pointer; 62 | } 63 | 64 | #nav #menus ul{ 65 | list-style: none; 66 | display: none; 67 | } 68 | #nav #menus ul li{ 69 | font-weight: 600; 70 | width: 90px; 71 | font-size: 15px; 72 | height: 30px; 73 | text-align: center; 74 | padding: 5px; 75 | line-height: 30px; 76 | transition:all ease 0.3s; 77 | float: left; 78 | cursor: pointer; 79 | } 80 | #nav #menus ul li:hover{ 81 | background: #333; 82 | transition:all ease 0.3s; 83 | } 84 | #head{ 85 | width: 380px; 86 | height: 300px; 87 | background: url(../img/head.png) no-repeat; 88 | background-position:center center; 89 | position: relative; 90 | color: #fff; 91 | 92 | 93 | } 94 | #head #nama{ 95 | font-family:"ether Cute Poison"; 96 | width: 300px; 97 | height: auto; 98 | position: absolute; 99 | top: 50px; 100 | left: 40px; 101 | right: auto; 102 | font-size: 40px; 103 | text-align: center; 104 | 105 | } 106 | #head #logo{ 107 | width: 80px; 108 | height: 80px; 109 | position: absolute; 110 | top: 100px; 111 | left: 145px; 112 | font-size: 20px; 113 | text-align: center; 114 | background-image: url('../img/logo alora.png') ; 115 | background-position: center center; 116 | 117 | 118 | } 119 | #head p{ 120 | 121 | width: 200px; 122 | height: 40px; 123 | position: absolute; 124 | top: 190px; 125 | left: 85px; 126 | font-size: 12px; 127 | text-align: center; 128 | padding-bottom: 5px; 129 | border-bottom: 1px solid #fff; 130 | 131 | } 132 | #head #rd{ 133 | width: 130px; 134 | height: 30px; 135 | position: absolute; 136 | bottom: 70px; 137 | left: 360px; 138 | font-size: 15px; 139 | text-align: center; 140 | border: 1px solid #fff; 141 | line-height: 30px; 142 | transition:all ease 0.5s; 143 | display: none; 144 | 145 | } 146 | #head #rd:hover{ 147 | transition:all ease 0.5s; 148 | background: rgba(255,255,255,.5); 149 | cursor: pointer; 150 | } 151 | #bar { 152 | width: 380px; 153 | height: 40px; 154 | background: #2e2e2e; 155 | line-height: 40px; 156 | } 157 | #bar #search{ 158 | height: 40px; 159 | width: 250px; 160 | line-height: 40px; 161 | float: right; 162 | margin-right: 305px; 163 | margin-top: 5px; 164 | display: none; 165 | } 166 | #body{ 167 | width: 100%; 168 | min-height: 700px; 169 | position: relative; 170 | height: auto; 171 | margin-right: auto; 172 | margin-left: auto; 173 | } 174 | #body #left{ 175 | float:left; 176 | width: 250px; 177 | min-height: 1015px; 178 | height: auto; 179 | background: #222; 180 | color: #fff; 181 | display: none; 182 | 183 | } 184 | #menu{ 185 | width: 100%;} 186 | #menu h2{ 187 | width: 330px; 188 | height: 30px; 189 | text-align: center; 190 | line-height: 30px; 191 | background: #c04848; 192 | padding: 5px; 193 | font-size: 14px; 194 | } 195 | #menu ul{ 196 | list-style: none; 197 | display: inline-block; 198 | } 199 | #menu ul li{ 200 | width: 330px; 201 | height: 30px; 202 | background: #222; 203 | padding: 5px; 204 | line-height: 30px; 205 | transition:all ease 0.5s; 206 | } 207 | #menu ul li:hover{ 208 | background: #333; 209 | transition:all ease 0.5s; 210 | } 211 | #body #kanan{ 212 | float:left; 213 | width: 380px; 214 | padding: 15px; 215 | height: auto; 216 | padding-bottom: 100px; 217 | } 218 | #kanan #wide{ 219 | width: 330px; 220 | } 221 | #kanan #wid{ 222 | width: 330px; 223 | height: 210px; 224 | background: #998; 225 | transition:all ease 0.5s; 226 | transform-style:preserve-3d; 227 | } 228 | #wide:hover #wid{ 229 | transform:rotateY(0deg); 230 | cursor: pointer; 231 | } 232 | #kanan,#depan,#belakang{ 233 | width: 330px; 234 | height: 210px; 235 | } 236 | 237 | #depan,#belakang{ 238 | position: absolute; 239 | top: 0px; 240 | left: 0px; 241 | backface-visibility:hidden; 242 | 243 | } 244 | #depan{ 245 | z-index: 1;} 246 | 247 | #wid #depan #h{ 248 | width: 100%; 249 | height: 35px; 250 | font-weight: bolder; 251 | color: #fff; 252 | background: #c04848; 253 | line-height: 35px; 254 | text-align: center; 255 | position: relative; 256 | top: 0px; 257 | left: 0px; 258 | } 259 | #wid #depan #g{ 260 | width: 100%; 261 | height: 175px; 262 | background: #999; 263 | opacity: 0.7; 264 | background-size:330px 210px; 265 | } 266 | #wid #depan #s { 267 | width: 150px; 268 | height: 35px; 269 | color: #fff; 270 | position: absolute; 271 | right: 0px; 272 | bottom: 0px; 273 | background: rgba(0,0,0,.5); 274 | text-align: center; 275 | line-height: 35px; 276 | } 277 | #bawah{ 278 | width:790px; 279 | height: 200px; 280 | background: #333; 281 | padding: 15px; 282 | display: none; 283 | } 284 | #bawah #mar{ 285 | width: 330px; 286 | height: 200px; 287 | background: #4e4848; 288 | float: left; 289 | margin-right: 15px; 290 | } 291 | #pbwah{ 292 | width:338px;; 293 | height: 30px; 294 | background: #111; 295 | padding:5px; 296 | text-align: center; 297 | line-height: 30px; 298 | color: #fff; 299 | font-size: 12px; 300 | }} -------------------------------------------------------------------------------- /cssxx/style_login.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin:0px; 3 | padding:0px;} 4 | body{ 5 | background:#2a1d32; 6 | font-family: arial; 7 | color: #555; 8 | } 9 | #wrap{ 10 | width: 600px; 11 | height: 400px; 12 | background: #fff; 13 | margin: auto; 14 | margin-top: 150px; 15 | } 16 | #head{ 17 | width: 100%; 18 | height: 50px; 19 | background: #c04848; 20 | font-weight: 900; 21 | font-size: 30px; 22 | color: #fff; 23 | text-align: center; 24 | line-height: 50px; 25 | } 26 | #kotakz{ 27 | width: 500px; 28 | height: 200px; 29 | margin: 0px auto; 30 | text-align: center; 31 | margin-top: 20px; 32 | } 33 | input[type="text"],input[type="password"]{ 34 | width: 400px; 35 | height: 60px; 36 | margin-top: 25px; 37 | font-size: 19px; 38 | padding: 5px; 39 | color: #999; 40 | } 41 | input[type="submit"]{ 42 | width: 400px; 43 | height: 60px; 44 | margin-top: 25px; 45 | font-size: 19px; 46 | padding: 5px; 47 | color: #999; 48 | background:#c04848; 49 | border: 0px solid transparent; 50 | color: #fff; 51 | margin-bottom: 15px; 52 | } -------------------------------------------------------------------------------- /custom-style.css: -------------------------------------------------------------------------------- 1 | body{ 2 | width:100%; 3 | } 4 | header{ 5 | margin-top:20px; 6 | } 7 | -------------------------------------------------------------------------------- /guideau.css: -------------------------------------------------------------------------------- 1 | /* Bordered form */ 2 | form { 3 | border: 3px solid #f1f1f1; 4 | } 5 | 6 | /* Full-width inputs */ 7 | input[type=text], input[type=password] { 8 | width: 100%; 9 | padding: 12px 20px; 10 | margin: 8px 0; 11 | display: inline-block; 12 | border: 1px solid #ccc; 13 | box-sizing: border-box; 14 | } 15 | 16 | /* Set a style for all buttons */ 17 | button { 18 | background-color: #04AA6D; 19 | color: white; 20 | padding: 14px 20px; 21 | margin: 8px 0; 22 | border: none; 23 | cursor: pointer; 24 | width: 100%; 25 | } 26 | 27 | /* Add a hover effect for buttons */ 28 | button:hover { 29 | opacity: 0.8; 30 | } 31 | 32 | /* Extra style for the cancel button (red) */ 33 | .cancelbtn { 34 | width: auto; 35 | padding: 10px 18px; 36 | background-color: #f44336; 37 | } 38 | 39 | /* Center the avatar image inside this container */ 40 | .imgcontainer { 41 | text-align: center; 42 | margin: 24px 0 12px 0; 43 | } 44 | 45 | /* Avatar image */ 46 | img.avatar { 47 | width: 40%; 48 | border-radius: 50%; 49 | } 50 | 51 | /* Add padding to containers */ 52 | .container { 53 | padding: 16px; 54 | } 55 | 56 | /* The "Forgot password" text */ 57 | span.psw { 58 | float: right; 59 | padding-top: 16px; 60 | } 61 | 62 | /* Change styles for span and cancel button on extra small screens */ 63 | @media screen and (max-width: 300px) { 64 | span.psw { 65 | display: block; 66 | float: none; 67 | } 68 | .cancelbtn { 69 | width: 100%; 70 | } 71 | } -------------------------------------------------------------------------------- /hek.css: -------------------------------------------------------------------------------- 1 | Skip to content 2 | Search or jump to… 3 | Pull requests 4 | Issues 5 | Marketplace 6 | Explore 7 | 8 | @yaelahaiz 9 | FirmanKurniawan 10 | / 11 | CSS-Projects 12 | Public 13 | Code 14 | Issues 15 | Pull requests 16 | Actions 17 | Projects 18 | Security 19 | Insights 20 | CSS-Projects/sgb.css 21 | @twnku 22 | twnku Create sgb.css 23 | Latest commit 2d597da 2 days ago 24 | History 25 | 1 contributor 26 | 71 lines (62 sloc) 1.15 KB 27 | 28 | /* Bordered form */ 29 | form { 30 | border: 3px solid #f1f1f1; 31 | } 32 | 33 | /* Full-width inputs */ 34 | input[type=text], input[type=password] { 35 | width: 100%; 36 | padding: 12px 20px; 37 | margin: 8px 0; 38 | display: inline-block; 39 | border: 1px solid #ccc; 40 | box-sizing: border-box; 41 | } 42 | 43 | /* Set a style for all buttons */ 44 | button { 45 | background-color: #04AA6D; 46 | color: white; 47 | padding: 14px 20px; 48 | margin: 8px 0; 49 | border: none; 50 | cursor: pointer; 51 | width: 100%; 52 | } 53 | 54 | /* Add a hover effect for buttons */ 55 | button:hover { 56 | opacity: 0.8; 57 | } 58 | 59 | /* Extra style for the cancel button (red) */ 60 | .cancelbtn { 61 | width: auto; 62 | padding: 10px 18px; 63 | background-color: #f44336; 64 | } 65 | 66 | /* Center the avatar image inside this container */ 67 | .imgcontainer { 68 | text-align: center; 69 | margin: 24px 0 12px 0; 70 | } 71 | 72 | /* Avatar image */ 73 | img.avatar { 74 | width: 40%; 75 | border-radius: 50%; 76 | } 77 | 78 | /* Add padding to containers */ 79 | .container { 80 | padding: 16px; 81 | } 82 | 83 | /* The "Forgot password" text */ 84 | span.psw { 85 | float: right; 86 | padding-top: 16px; 87 | } 88 | 89 | /* Change styles for span and cancel button on extra small screens */ 90 | @media screen and (max-width: 300px) { 91 | span.psw { 92 | display: block; 93 | float: none; 94 | } 95 | .cancelbtn { 96 | width: 100%; 97 | } 98 | } 99 | Footer 100 | © 2022 GitHub, Inc. 101 | Footer navigation 102 | Terms 103 | Privacy 104 | Security 105 | Status 106 | Docs 107 | Contact GitHub 108 | Pricing 109 | API 110 | Training 111 | Blog 112 | About 113 | CSS-Projects/sgb.css at main · FirmanKurniawan/CSS-Projects 114 | -------------------------------------------------------------------------------- /landingPage/img/employee.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FirmanKurniawan/CSS-Projects/bfd22d16984e1215bcf05f08429daf87a2e9cd6c/landingPage/img/employee.png -------------------------------------------------------------------------------- /landingPage/img/hires.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FirmanKurniawan/CSS-Projects/bfd22d16984e1215bcf05f08429daf87a2e9cd6c/landingPage/img/hires.png -------------------------------------------------------------------------------- /landingPage/img/img1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FirmanKurniawan/CSS-Projects/bfd22d16984e1215bcf05f08429daf87a2e9cd6c/landingPage/img/img1.png -------------------------------------------------------------------------------- /landingPage/img/img2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FirmanKurniawan/CSS-Projects/bfd22d16984e1215bcf05f08429daf87a2e9cd6c/landingPage/img/img2.png -------------------------------------------------------------------------------- /landingPage/img/img3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FirmanKurniawan/CSS-Projects/bfd22d16984e1215bcf05f08429daf87a2e9cd6c/landingPage/img/img3.png -------------------------------------------------------------------------------- /landingPage/img/jumbotron-bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FirmanKurniawan/CSS-Projects/bfd22d16984e1215bcf05f08429daf87a2e9cd6c/landingPage/img/jumbotron-bg.jpg -------------------------------------------------------------------------------- /landingPage/img/landingpage.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FirmanKurniawan/CSS-Projects/bfd22d16984e1215bcf05f08429daf87a2e9cd6c/landingPage/img/landingpage.png -------------------------------------------------------------------------------- /landingPage/img/security.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FirmanKurniawan/CSS-Projects/bfd22d16984e1215bcf05f08429daf87a2e9cd6c/landingPage/img/security.png -------------------------------------------------------------------------------- /landingPage/img/workingspace.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FirmanKurniawan/CSS-Projects/bfd22d16984e1215bcf05f08429daf87a2e9cd6c/landingPage/img/workingspace.png -------------------------------------------------------------------------------- /landingPage/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 12 | 13 | 14 | 15 | 16 | 17 | Enox 18 | 19 | 20 | 21 | 22 | 41 | 42 | 43 | 44 | 45 |
46 |
47 |

Get Work Done Faster
And Better With Us

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

24 Hours

64 |

Lorem ipsum dolor sit.

65 |
66 |
67 | employee 68 |

Hire Res

69 |

Lorem ipsum dolor sit.

70 |
71 | 72 |
73 | employee 74 |

Security

75 |

Lorem ipsum dolor sit.

76 |
77 |
78 |
79 |
80 | 81 | 82 | 83 |
84 |
85 | workingspace 86 |
87 |
88 |

You Work Like
At Home

89 |

Bekerja dengan suasana hati yang lebih asik dan 90 | mempelajari hal baru setiap hari

91 | Galery 92 |
93 |
94 | 95 | 96 | 97 | 98 | 99 |
100 |
101 |
102 |
"Bekerja dengan suasana hati yang lebih asik dan mepelajari hal yang 103 | baru setiap hari" 104 |
105 |
106 |
107 | 108 |
109 |
110 |
111 | A generic square placeholder image with rounded corners in a figure. 112 | 113 |
114 |
115 | A generic square placeholder image with rounded corners in a figure. 116 |
117 |

Suny Ye

118 |

Designer

119 |
120 |
121 |
122 | A generic square placeholder image with rounded corners in a figure. 123 | 124 |
125 |
126 |
127 |
128 | 129 | 130 | 131 | 132 | 133 |
134 |
135 |

Copyright@ By Enox

136 |
137 |
138 | 139 | 140 |
141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 153 | 155 | 157 | 158 | 159 | -------------------------------------------------------------------------------- /landingPage/style.css: -------------------------------------------------------------------------------- 1 | /* Navbar */ 2 | .navbar { 3 | z-index: 1; 4 | position: relative; 5 | } 6 | 7 | .navbar-brand { 8 | font-family: 'viga'; 9 | font-size: 32px; 10 | } 11 | 12 | /* Ultilities */ 13 | .tombol { 14 | text-transform: uppercase; 15 | border-radius: 100px; 16 | 17 | } 18 | 19 | .jumbotron { 20 | background-image: url(img/jumbotron-bg.jpg); 21 | height: 540px; 22 | background-size: cover; 23 | background-position: center; 24 | text-align: center; 25 | position: relative; 26 | } 27 | 28 | .jumbotron .container { 29 | position: relative; 30 | z-index: 1; 31 | } 32 | 33 | .jumbotron::after { 34 | content: ''; 35 | display: block; 36 | width: 100%; 37 | height: 85%; 38 | background-image: linear-gradient(to top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0)); 39 | position: absolute; 40 | bottom: 0; 41 | } 42 | 43 | .jumbotron .display-4 { 44 | color: white; 45 | margin-top: 150px; 46 | font-weight: 200; 47 | text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6); 48 | font-size: 40px; 49 | margin-bottom: 30px; 50 | } 51 | 52 | .jumbotron .display-4 span { 53 | font-weight: bold; 54 | } 55 | 56 | /* Info Panel */ 57 | .info-panel { 58 | box-shadow: 0 3px 20px rgba(0, 0, 0, 0.5); 59 | border-radius: 12px; 60 | margin-top: -100px; 61 | background-color: white; 62 | padding: 30px; 63 | } 64 | 65 | .info-panel img { 66 | widows: 80px; 67 | height: 80px; 68 | margin-right: 20px; 69 | margin-bottom: 20px; 70 | } 71 | 72 | .info-panel h4 { 73 | text-transform: uppercase; 74 | font-size: 16px; 75 | font-weight: bold; 76 | margin-top: 5px; 77 | 78 | } 79 | 80 | .info-panel p { 81 | font-size: 14px; 82 | color: #acacac; 83 | margin-top: 5px; 84 | font-weight: 200; 85 | } 86 | 87 | /* Akhir Info Panel */ 88 | 89 | /* workingspace */ 90 | .workingspace { 91 | margin-top: 120px; 92 | text-align: center; 93 | } 94 | 95 | 96 | .workingspace h3 { 97 | font-size: 52px; 98 | font-weight: 200; 99 | text-transform: uppercase; 100 | margin-top: 30px; 101 | text-align: center; 102 | } 103 | 104 | .workingspace h3 span { 105 | font-weight: bold; 106 | } 107 | 108 | .workingspace p { 109 | font-size: 18px; 110 | font-weight: 200; 111 | color: #acacac; 112 | margin: 30px 0; 113 | } 114 | 115 | 116 | 117 | /* akhir workingspace */ 118 | 119 | /* testimonial */ 120 | .testimonial h5 { 121 | text-align: center; 122 | font-weight: 200; 123 | font-style: italic; 124 | font-size: 20px; 125 | margin-top: 70px; 126 | } 127 | 128 | .testimonial figure img { 129 | width: 60px; 130 | opacity: 0.5; 131 | margin: 20px 15px 0px; 132 | } 133 | 134 | .testimonial figure .utama { 135 | width: 80px; 136 | opacity: 1; 137 | margin-top: 12px; 138 | } 139 | 140 | .testimonial figure h3 { 141 | font-size: 16px; 142 | font-weight: bold; 143 | font-style: normal; 144 | color: #1c2c5d; 145 | } 146 | 147 | .testimonial figcaption { 148 | text-align: center; 149 | } 150 | 151 | .testimonial figure p { 152 | font-size: 12px; 153 | color: #acacac; 154 | margin-top: -5px; 155 | 156 | } 157 | 158 | .footer { 159 | margin-top: 100px; 160 | text-align: center; 161 | } 162 | 163 | 164 | .footer p { 165 | font-size: 18px; 166 | color: #acacac; 167 | 168 | } 169 | 170 | /* DESKTOP VERSION */ 171 | @media (min-width: 992px) { 172 | 173 | /* Navbar */ 174 | .navbar-brand, 175 | .nav-link { 176 | color: white !important; 177 | text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7) 178 | } 179 | 180 | .nav-link { 181 | text-transform: uppercase; 182 | margin-right: 30px; 183 | } 184 | 185 | .nav-link:hover::after { 186 | content: ''; 187 | display: block; 188 | width: 50%; 189 | border-bottom: 3px solid #038FEC; 190 | margin: auto; 191 | padding-bottom: 5px; 192 | margin-bottom: -8px; 193 | 194 | } 195 | 196 | /* Jumbotron */ 197 | .jumbotron { 198 | margin-top: -75px; 199 | height: 640px; 200 | 201 | } 202 | 203 | .jumbotron .display-4 { 204 | font-size: 62px; 205 | 206 | } 207 | 208 | .workingspace h3 { 209 | text-align: left; 210 | } 211 | 212 | .testimonial h5 { 213 | font-size: 32px; 214 | } 215 | 216 | .testimonial figure h3 { 217 | font-size: 16px; 218 | } 219 | 220 | } -------------------------------------------------------------------------------- /loader/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 |
10 | 11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 | 20 | 21 | -------------------------------------------------------------------------------- /loader/style.css: -------------------------------------------------------------------------------- 1 | .loading { 2 | text-align: center; 3 | position: absolute; 4 | top: 50%; 5 | left: 50%; 6 | transform: translate(-50%, -50%); 7 | } 8 | .muter { 9 | width: 2rem; 10 | height: 2rem; 11 | display: inline-block; 12 | border: 5px solid rgba(255, 255, 255, 0.25); 13 | border-radius: 50%; 14 | border-top-color: white; 15 | margin-bottom: 2rem; 16 | animation: 1s spin infinite ease-in-out; 17 | } 18 | .balls > div { 19 | display: flex; 20 | margin-left: 1rem; 21 | width: 1rem; 22 | height: 1rem; 23 | border-radius: 50%; 24 | display: inline-block; 25 | animation: 1.5s scale infinite ease-in-out both; 26 | } 27 | .balls .one { 28 | background: #ef476f; 29 | animation-delay: -0.4s; 30 | } 31 | .balls .two { 32 | background: #ffd166; 33 | animation-delay: -0.3s; 34 | } 35 | .balls .three { 36 | background: #06d6a0; 37 | animation-delay: -0.2s; 38 | } 39 | .balls .four { 40 | background: #118ab2; 41 | animation-delay: -0.1s; 42 | } 43 | .balls .five { 44 | background: #073b4c; 45 | } 46 | 47 | @keyframes scale { 48 | 0%, 49 | 80%, 50 | 100% { 51 | transform: scale(0); 52 | } 53 | 40% { 54 | transform: scale(1); 55 | } 56 | } 57 | 58 | @keyframes spin { 59 | to { 60 | transform: rotate(360deg); 61 | } 62 | } 63 | -------------------------------------------------------------------------------- /login-page.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Login Page | Hacktoberfest 5 | 6 | 7 | 8 | 9 | 10 | 135 | 136 | 137 |
138 |
139 |
140 |
141 |
142 |

Login Here

143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 155 |
156 | 157 | 158 | -------------------------------------------------------------------------------- /loginpage/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "liveServer.settings.port": 5502 3 | } -------------------------------------------------------------------------------- /loginpage/damn.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FirmanKurniawan/CSS-Projects/bfd22d16984e1215bcf05f08429daf87a2e9cd6c/loginpage/damn.jpg -------------------------------------------------------------------------------- /loginpage/damn1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FirmanKurniawan/CSS-Projects/bfd22d16984e1215bcf05f08429daf87a2e9cd6c/loginpage/damn1.jpg -------------------------------------------------------------------------------- /loginpage/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | webpage design 8 | 9 | 10 | 11 |
12 |
13 |
14 | 15 |
16 | 17 |
18 | 25 |
26 |
27 | 28 | 29 |
30 |
31 | 32 |
33 | 34 | 35 |
36 |

Web Design &
Devlopment
Course

37 |

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Consequuntur
38 | quaerat quasi nobis rerum suscipit incidunt
architecto omnis tempora. 39 | Corporis officia maxime illo dicta omnis!

40 | 41 | 42 | 43 |
44 |

Login here

45 | 46 | 47 | 48 | 49 | 50 |

Don't have an account
51 | Sign up here 52 |

53 |

Log in with

54 |
55 | 56 | 57 | 58 | 59 | 60 | 61 |
62 | 63 |
64 |
65 |
66 |
67 | 68 |
69 | 70 |
71 |
72 | 73 |
74 | 75 | 76 | 77 | 78 | -------------------------------------------------------------------------------- /loginpage/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | padding: 0; 4 | } 5 | 6 | .main{ 7 | width: 100%; 8 | background: linear-gradient(to top, rgba(0,0,0,0.5)50%,rgba(0,0,0,0.5)50%), url(damn.jpg); 9 | background-position: centre; 10 | background-size: centre; 11 | height:109vh; 12 | } 13 | .navbar{ 14 | width: 1200px; 15 | height: 75px; 16 | margin: auto; 17 | display: flex; 18 | /* margin-top: 20px; */ 19 | } 20 | .icon { 21 | width: 200px; 22 | float: left; 23 | height: 75px; 24 | 25 | } 26 | .logo{ 27 | color: #ff7200; 28 | font-size: 35px; 29 | font-family: Arial; 30 | padding-left: -20px; 31 | float: left; 32 | padding-top: 10px; 33 | margin-left: -100px; 34 | 35 | 36 | 37 | } 38 | .menu{ 39 | width: 400px; 40 | float: left; 41 | height: 70px; 42 | 43 | 44 | } 45 | ul{ 46 | float: left; 47 | display: flex; 48 | justify-content: centre; 49 | align-items: centre; 50 | 51 | 52 | } 53 | ul li{ 54 | list-style: none; 55 | margin-left: 62px; 56 | margin-top: 27px; 57 | font-size: 14px; 58 | 59 | } 60 | ul li a{ 61 | text-decoration: none; 62 | color: #fff; 63 | font-family: Arial; 64 | font-weight: bold; 65 | transition: 0.4s ease-in-out; 66 | } 67 | ul li a:hover{ 68 | color: #ff7200; 69 | } 70 | 71 | .search{ 72 | width: 330px; 73 | float: left; 74 | margin-left: 270px; 75 | margin-bottom: 50px; 76 | } 77 | .srch{ 78 | font-family:'Times New Roman'; 79 | width: 200px; 80 | height: 40px; 81 | background: transparent; 82 | border: 1px solid #ff7200; 83 | margin-top: 13px; 84 | color: #fff; 85 | border-right: none; 86 | font-size: 16px; 87 | float: right; 88 | padding:20px; 89 | border-bottom-left-radius: 5px; 90 | border-top-left-radius: 5px ; 91 | 92 | 93 | } 94 | 95 | .btn{ 96 | width:100px; 97 | height: 40px; 98 | float: right; 99 | background: #ff7200 ; 100 | /* border: 2px solid #ff7200; */ 101 | /* padding-bottom: 5px; */ 102 | 103 | margin-top: 13px; 104 | color: #fff; 105 | font-size: 15px; 106 | border-radius: 0px 5px 5px 0px; 107 | 108 | /* border-bottom-right-radius: 5px; */ 109 | /* border-bottom-top-radius: 5px; */ 110 | /* border-bottom-top-radius: 5px; */ 111 | transition: 0.2 ease; 112 | cursor: pointer; 113 | } 114 | .btn:hover{ 115 | color:#000; 116 | } 117 | 118 | .btn:focus{ 119 | outline: none; 120 | } 121 | .srch:focus{ 122 | outline: none; 123 | } 124 | .content{ 125 | width:1200px ; 126 | height: auto; 127 | margin: auto; 128 | color: #fff; 129 | position: relative; 130 | display: flex; 131 | flex-direction: column; 132 | /* justify-content: space-between; */ 133 | gap:20px; 134 | 135 | } 136 | .content .paragraph{ 137 | padding-left: 10 0px; 138 | padding-bottom: 25px; 139 | font-family: Arial; 140 | letter-spacing: 1.2px; 141 | line-height: 30px; 142 | 143 | } 144 | .content h1{ 145 | font-family: 'Times New Roman'; 146 | font-size: 50px; 147 | /* padding-left: 20px; */ 148 | margin-top: 9%; 149 | letter-spacing: 2px; 150 | } 151 | .content .cn{ 152 | width: 160px; 153 | height: 40px; 154 | background: #ff7200; 155 | border: none; 156 | margin-bottom: 10px; 157 | /* margin-left: 20px; */ 158 | font-size: 18px; 159 | border-radius: 10px; 160 | cursor: pointer; 161 | transition: .4s ease; 162 | /* text-decoration: none; */ 163 | 164 | 165 | } 166 | /*.content.cn a{ 167 | text-decoration: none; 168 | color: #000; 169 | transition:.3s ease; 170 | 171 | }*/ 172 | .content a{ 173 | text-decoration: none; 174 | color: #000; 175 | transition:.3s ease; 176 | } 177 | .cn:hover{ 178 | background-color: #fff; 179 | 180 | } 181 | .content span{ 182 | color: #ff7200; 183 | font-size: 60px; 184 | 185 | } 186 | .form{ 187 | width: 250px; 188 | height: 380px; 189 | background:linear-gradient(to top, rgba(0,0,0,0.8)50%, rgba(0,0,0,0.8)50%); 190 | position: absolute; 191 | top: -20px; 192 | left: 870px; 193 | border-radius: 10px; 194 | padding: 25px; 195 | margin-top: 140px; 196 | 197 | 198 | } 199 | 200 | .form h2{ 201 | width: 200px; 202 | font-family: sans-serif; 203 | text-align: center; 204 | color: #ff7200; 205 | font-size: 22px; 206 | background-color: #fff; 207 | border-radius: 10px; 208 | margin: 2px; 209 | padding: 8px; 210 | 211 | 212 | 213 | 214 | } 215 | .form input{ 216 | width:240px; 217 | height: 35px; 218 | background: transparent; 219 | border-bottom: 1px solid #ff7200; 220 | border-top: none; 221 | border-right: none; 222 | border-left: none; 223 | color: #fff; 224 | font-size: 15px; 225 | letter-spacing: 1px; 226 | margin-top: 30px; 227 | font-family: sans-serif; 228 | 229 | } 230 | 231 | .form input:focus{ 232 | outline: none; 233 | 234 | } 235 | ::placeholder{ 236 | color: #fff; 237 | font-family: Arial; 238 | 239 | 240 | 241 | } 242 | .btnn{ 243 | width: 240px; 244 | height: 40px; 245 | background: #ff7200; 246 | border: none; 247 | margin-top: 30px; 248 | font-size: 18px; 249 | border-radius: 10px; 250 | cursor: pointer; 251 | color: #fff; 252 | transition: 0.4s ease; 253 | 254 | 255 | 256 | 257 | } 258 | .btnn:hover{ 259 | background: #fff; 260 | color: #ff7200; 261 | 262 | 263 | 264 | } 265 | .btnn a{ 266 | text-decoration: none; 267 | color: #000; 268 | font-weight: bold; 269 | 270 | } 271 | .form .link{ 272 | font-family: Arial, Helvetica, sans-serif; 273 | font-size: 17px; 274 | padding-top:20px; 275 | text-align: center; 276 | 277 | } 278 | .form.link a{ 279 | text-decoration: none; 280 | color: #ff7200; 281 | 282 | } 283 | 284 | .liw{ 285 | padding-top: 15px; 286 | padding-bottom: 10px; 287 | text-align: center; 288 | 289 | } 290 | .icon{ 291 | margin-left: 20px; 292 | 293 | } 294 | .icon a{ 295 | text-decoration: none; 296 | color: #fff; 297 | 298 | } 299 | .icon ion-icon{ 300 | 301 | color: #fff; 302 | font-size:30px; 303 | padding-left: 14px; 304 | padding-top: 5px; 305 | 306 | } 307 | 308 | .icon ion-icon:hover{ 309 | color: #ff7200; 310 | 311 | } 312 | -------------------------------------------------------------------------------- /modals.css: -------------------------------------------------------------------------------- 1 | .bg{ 2 | background-color:#2a5e80; 3 | color:#fff; 4 | text-decoration:none; 5 | } 6 | 7 | .base{ 8 | font-size:16px; 9 | vertical-align:middle; 10 | } 11 | -------------------------------------------------------------------------------- /navbar tailwind/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Latihan 1 - M.Erlangga 9 | 10 | 11 | 29 | 30 | 31 | 39 | 40 | -------------------------------------------------------------------------------- /navbar-changecolor.css: -------------------------------------------------------------------------------- 1 | side-body-black { 2 | background-color: lightblue; 3 | } 4 | 5 | h1-atas { 6 | color: black; 7 | text-align: center; 8 | } 9 | 10 | p { 11 | font-family: arial; 12 | font-size: 00px; 13 | } 14 | -------------------------------------------------------------------------------- /oktavianto.css: -------------------------------------------------------------------------------- 1 | /* 2 | Name: Purepel Telegram Theme 3 | Author: Excel Dwi Oktavianto 4 | Github: https://github.com/oktavianto/Purepel-Telegram-Theme 5 | Website: http://www.oktavianto.id/ 6 | */ 7 | a{color:#684CB0;text-decoration:none}a:focus,a:hover{color:#684CB0;text-decoration:underline}.im_dialogs_col_wrap{background-color:#271C46;border-right:none;padding-bottom:12px}.im_dialogs_scrollable_wrap .active a.im_dialog{border-radius:0;background-color:#211940}.im_dialogs_scrollable_wrap .active a.im_dialog{margin-right:-2px}.im_dialogs_scrollable_wrap .active a.im_dialog:hover,.im_dialogs_scrollable_wrap .active a.im_dialog_selected{background-color:#1f173c}.active .im_dialog_peer{color:#FEFEFE}.im_dialog_peer{font-weight:100;color:#FEFEFE}.im_dialogs_scrollable_wrap a.im_dialog:hover,.im_dialogs_scrollable_wrap a.im_dialog_selected{background:#1f173c}a.im_dialog .im_short_message_text{color:#9EA2B5}a.im_dialog .im_dialog_chat_from_wrap,a.im_dialog .im_short_message_media,a.im_dialog .im_short_message_service{color:#9ea2b5}a.im_dialog:hover .im_short_message_text,a.im_dialog_selected .im_short_message_text{color:#9ea2b5}.active a.im_dialog .im_short_message_text{color:#9ea2b5}.active a.im_dialog .im_dialog_chat_from_wrap,.active a.im_dialog .im_dialog_draft_from,.active a.im_dialog .im_dialog_message,.active a.im_dialog .im_short_message_media,.active a.im_dialog .im_short_message_service,.active a.im_dialog .im_short_message_text{color:#9ea2b5}.active .im_dialog_date,.active a.im_dialog:hover .im_dialog_date,.active a.im_dialog_selected .im_dialog_date{color:#9ea2b5}.im_dialog_date{color:#9ea2b5}.active .im_dialog_date,.active a.im_dialog:hover .im_dialog_date,.active a.im_dialog_selected .im_dialog_date{color:#9ea2b5}.im_dialogs_col{margin:0}.active .im_dialog_badge{color:#fefefe;background-color:#47D1FE;box-shadow:0 0 10px #47D1FE}a.im_dialog:hover .im_dialog_unread,a.im_dialog_selected .im_dialog_unread{background:#47D1FE}.im_dialog_unread{background:#47D1FE;box-shadow:0 0 10px #47D1FE}.im_dialog_badge{background:#47D1FE;box-shadow:0 0 10px #47D1FE}.im_dialog_badge_muted{background:#1d6c86}.tg_head_split{box-shadow:0 0 10px #271C46;margin-top:11px}.tg_head_logo_wrap{background:#271c46}.im_dialogs_search_field{border:1px solid transparent;border-bottom:1px solid #2E264F;border-radius:0;background-color:#271c46;color:#bababa}.form-control.no_outline:focus{border:1px solid transparent;border-bottom:1px solid #443e5a}.im_dialogs_search_field:active,.im_dialogs_search_field:focus{background-color:#271c46}.im_history_messages{background-color:#E5E5FF}.tg_head_main_wrap{background-color:#fff}.im_history_typing_wrap{background-color:#e5e5ff}.im_message_unread_split{background:transparent;color:rgba(39,28,70,.32);border-bottom:1px solid #cccce2;box-shadow:0 5px 15px rgba(204,204,204,.5)}.tg_head_peer_title{color:#271c46}.tg_head_peer_search_btn{background:#c3b9e0}.tg_head_btn:hover{color:#ccc;text-decoration:none;background:#fff}.tg_head_logo_dropdown .dropdown-toggle:hover,.tg_head_logo_dropdown .dropdown-toggle:focus,.tg_head_logo_dropdown .dropdown-toggle:active{background:#271c46}.tg_head_peer_search_btn{background:#c3b9e0}.tg_head_peer_search_btn:hover{background:#c3b9e0}.im_page_wrap{background:#fff;max-width:1010px;min-width:300px;margin:0 auto;box-shadow:0 0 10px #271C46;border:none;overflow:hidden}.page_wrap{background:#684CB0}.composer_rich_textarea:focus,.composer_textarea:focus{box-shadow:0 2px 0 0 #684cb0}a.md_modal_action{color:#fff;background:#4a4164;padding:5px;padding-left:10px;padding-right:10px;border-radius:5px;margin:10px 10px 0 10px;font-weight:700}a.md_modal_action_close{padding-right:10px;margin-left:0}a.md_modal_action:hover{background-color:#362861}.tg_checkbox.tg_checkbox_on span.icon-checkbox-outer{background-color:#271c46}.tg_checkbox.tg_checkbox_on i.icon-checkbox-inner{background:#4a4164}.modal-backdrop{background:rgba(26,26,26,.4);opacity:1!important}.im_dialogs_scrollable_wrap a.im_dialog_searchpeer,.im_dialogs_scrollable_wrap a.im_dialog_searchpeer:hover,.im_dialogs_scrollable_wrap a.im_dialog_searchpeer_selected{background:#271c46}.btn-md,.btn-md:focus,.btn-md:hover{color:#684CB0}.im_message_text{background:#c3b9e0;padding:10px;border-radius:3px;word-wrap:break-word;line-height:150%;white-space:pre-wrap}.im_message_video,a.im_message_photo_thumb{margin-top:5px;border:5px solid #c3b9e0}.im_message_reply_author{color:#684cb0}.im_message_reply_border{background:#684cb0;height:36px;width:3px}.im_message_reply{background:#dedcf8;padding-left:12px;border-radius:3px}pre{color:#a58fe4;background-color:#333;padding:10px;border:1px solid #2f2f2f}.im_history_selectable .im_message_outer_wrap{cursor:auto}.im_message_selected .im_message_outer_wrap{background:#dbdbf7}.btn-primary{background-color:#372863;border-radius:0}.btn-primary.active,.btn-primary:active,.btn-primary:focus,.btn-primary:hover,.open .btn-primary.dropdown-toggle{color:#fff;background-color:#564686}span.tg_head_peer_title:after{content:" •";color:#28CA42}.md_modal_list_peer_description .status_online,.md_modal_list_peer_description.status_online{color:#684cb0}.dropdown.open .tg_head_btn,.tg_head_btn:hover{background:#c3b9e0;color:#fff}.tg_head_peer_dropdown .dropdown-menu>li>a{color:#684cb0}.im_dialogs_contacts_wrap h5,.im_dialogs_messages_wrap h5{color:#fff}.im_message_webpage_wrap{margin:-2px 0 0;padding:10px;background:#fff;padding-left:12px;border-bottom-left-radius:10px;border-bottom-right-radius:10px;border:1px solid #c3b9e0;box-sizing:border-box}.md_modal_head{background:#271C46}.im_edit_cancel_link{display:block;padding:8px 0 8px 10px;border-radius:0;overflow:hidden;float:right}.im_edit_cancel_link:after{content:"X";padding:10px;margin-left:10px;color:#fff;background:#271c46}a.im_edit_cancel_link{background:#271c46;color:#fff}a.im_edit_cancel_link:hover{background:#271c46;color:#fff} 8 | -------------------------------------------------------------------------------- /opening-div/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 |
12 |
13 |
14 |
15 | 16 |

Design

17 |
18 |
19 |
20 |
21 |

22 | Lorem ipsum dolor sit amet consectetur adipisicing elit. 23 | Molestias, sequi. 24 |

25 | Read More 26 |
27 |
28 |
29 |
30 |
31 |
32 | 33 |

Design

34 |
35 |
36 |
37 |
38 |

39 | Lorem ipsum dolor sit amet consectetur adipisicing elit. 40 | Molestias, sequi. 41 |

42 | Read More 43 |
44 |
45 |
46 |
47 |
48 |
49 | 50 |

Design

51 |
52 |
53 |
54 |
55 |

56 | Lorem ipsum dolor sit amet consectetur adipisicing elit. 57 | Molestias, sequi. 58 |

59 | Read More 60 |
61 |
62 |
63 |
64 | 65 | 66 | -------------------------------------------------------------------------------- /opening-div/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | min-height: 100vh; 5 | background: #333; 6 | display: flex; 7 | justify-content: center; 8 | align-items: center; 9 | font-family: consolas; 10 | } 11 | 12 | .container { 13 | width: 1000px; 14 | /* position: relative; */ 15 | display: flex; 16 | justify-content: center; 17 | gap: 40px; 18 | } 19 | 20 | .container .card { 21 | /* position: relative; */ 22 | cursor: pointer; 23 | } 24 | 25 | .container .card .face { 26 | width: 300px; 27 | height: 200px; 28 | transition: 0.5s; 29 | /* outline: none; */ 30 | } 31 | 32 | .container .card .face.face1 { 33 | position: relative; 34 | background: #333; 35 | display: flex; 36 | justify-content: center; 37 | align-items: center; 38 | z-index: 1; 39 | transform: translateY(100px); 40 | box-shadow: rgba(0, 0, 0, 0.2) 0px 20px 30px; 41 | } 42 | 43 | .container .card:hover .face.face1 { 44 | background: #ff0057; 45 | transform: translateY(0); 46 | border-top-left-radius: 10px; 47 | border-top-right-radius: 10px; 48 | } 49 | 50 | .container .card .face.face1 .content { 51 | opacity: 0.2; 52 | transition: 0.5s; 53 | } 54 | 55 | .container .card:hover .face.face1 .content { 56 | opacity: 1; 57 | } 58 | 59 | .container .card .face.face1 .content img { 60 | max-width: 100px; 61 | max-width: 100%; 62 | border-top-left-radius: 10px; 63 | border-top-right-radius: 10px; 64 | } 65 | 66 | .content .card .face.face1 .content h3 { 67 | margin: 10px 0 0; 68 | padding: 0; 69 | color: #fff; 70 | text-align: center; 71 | font-size: 1.5em; 72 | } 73 | 74 | .container .card .face.face2 { 75 | position: relative; 76 | background: #fff; 77 | display: flex; 78 | justify-content: center; 79 | align-items: center; 80 | padding: 20px; 81 | box-sizing: border-box; 82 | transform: translateY(-100px); 83 | } 84 | 85 | .container .card:hover .face.face2 { 86 | transform: translateY(0); 87 | border-bottom-left-radius: 10px; 88 | border-bottom-right-radius: 10px; 89 | } 90 | 91 | .container .card .face.face2 .content p { 92 | margin: 0; 93 | padding: 0; 94 | } 95 | 96 | .container .card .face.face2 .content a { 97 | margin: 15px 0 0; 98 | display: inline-block; 99 | text-decoration: none; 100 | font-weight: 900; 101 | color: #333; 102 | padding: 5px; 103 | border: 1px solid #333; 104 | } 105 | .container .card .face.face2 .content a:hover { 106 | background: #333; 107 | color: #fff; 108 | } 109 | -------------------------------------------------------------------------------- /pagination.css: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 16 | 17 | 18 | 19 |

Simple Pagination

20 | 21 | 31 | 32 | 33 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /resposive-web/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Progate 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 |
16 |
17 | 18 |
19 | 20 | 21 |
22 | Pelajaran 23 | Daftar 24 | 25 |
26 |
27 |
28 |
29 |
30 |

BELAJAR CODING.

31 |

BELAJAR MENJADI LEBIH KREATIF.

32 |

Progate adalah platform online untuk belajar pemrograman.

33 |

Kami menawarkan lingkungan pemrograman yang lengkap untuk mempermudah Anda memulai.

34 |
35 | 36 |

atau

37 | 38 | 39 |
40 |
41 |
42 |
43 |
44 |
45 |

Cari tau dari mana anda mau memulai!

46 |
47 |
48 |
49 |
50 | 51 |

HTML & CSS

52 |
53 |

Dua bahasa yang digunakan untuk membangun struktur dan design tambilan 54 | website anda.

55 |
56 |
57 |
58 | 59 |

jQuery

60 |
61 |

JavaScript Library yang cepat, kaya akan fitur dan mudah digunakan untuk 62 | menangani animasi dan permintaan Ajax.

63 |
64 |
65 |
66 | 67 |

Ruby

68 |
69 |

Bahasa dinamis, serba guna yang sederhana dan produktif. Ruby sering 70 | digunakan untuk membuat aplikasi web yang responsive.

71 |
72 |
73 |
74 | 75 |

PHP

76 |
77 |

Bahasa scripting "open-source" yang dapat disematkan ke dalam HTML, dan 78 | cocok untuk pengembangan web.

79 |
80 |
81 |
82 |
83 |
84 |
85 |
86 |
87 |

Apakah anda siap untuk menjadi programer yang handal?

88 |

Ayo belajar coding, ayo belajar menjadi lebih kreatif!

89 |
90 | Mulai belajar 91 |
92 |
93 | 99 | 100 | 101 | -------------------------------------------------------------------------------- /resposive-web/main.css: -------------------------------------------------------------------------------- 1 | /* Mulai code Anda dari baris terakhir */ 2 | 3 | * { 4 | box-sizing: border-box; 5 | } 6 | 7 | html, 8 | body, 9 | ul, 10 | ol, 11 | li, 12 | h1, 13 | h2, 14 | h3, 15 | h4, 16 | h5, 17 | h6, 18 | p, 19 | div { 20 | margin: 0; 21 | padding: 0; 22 | } 23 | 24 | body { 25 | font-family: "Lucida Grande"; 26 | } 27 | 28 | a { 29 | text-decoration: none; 30 | } 31 | 32 | .clear { 33 | clear: left; 34 | } 35 | 36 | .container { 37 | max-width: 1170px; 38 | padding: 0 15px; 39 | margin: 0 auto; 40 | } 41 | 42 | .top-wrapper { 43 | padding: 180px 0 100px 0; 44 | background-image: url(https://prog-8.com/images/html/advanced/top_en.png); 45 | background-size: cover; 46 | color: white; 47 | text-align: center; 48 | } 49 | 50 | .top-wrapper h1 { 51 | opacity: 0.7; 52 | font-size: 45px; 53 | letter-spacing: 5px; 54 | margin-bottom: 10px; 55 | } 56 | 57 | .top-wrapper p { 58 | opacity: 0.7; 59 | margin-bottom: 3px; 60 | } 61 | 62 | .btn-wrapper { 63 | text-align: center; 64 | margin: 20px 0; 65 | } 66 | 67 | .btn-wrapper p { 68 | margin: 10px 0; 69 | } 70 | 71 | .signup { 72 | background-color: #239b76; 73 | } 74 | 75 | .facebook { 76 | background-color: #3b5998; 77 | margin-right: 10px; 78 | } 79 | 80 | .twitter { 81 | background-color: #55acee; 82 | } 83 | 84 | .btn { 85 | padding: 12px 24px; 86 | color: white; 87 | display: inline-block; 88 | opacity: 0.8; 89 | border-radius: 4px; 90 | text-align: center; 91 | } 92 | 93 | .btn:hover { 94 | opacity: 1; 95 | } 96 | 97 | .fa { 98 | margin-right: 5px; 99 | } 100 | 101 | header { 102 | height: 65px; 103 | width: 100%; 104 | background-color: rgba(34, 49, 52, 0.9); 105 | position: fixed; 106 | top: 0; 107 | z-index: 10; 108 | } 109 | 110 | .logo { 111 | width: 124px; 112 | margin-top: 20px; 113 | } 114 | 115 | .header-left { 116 | float: left; 117 | } 118 | 119 | .header-right { 120 | float: right; 121 | margin-right: -25px; 122 | } 123 | 124 | .header-right a { 125 | line-height: 65px; 126 | padding: 0 25px; 127 | color: white; 128 | display: block; 129 | float: left; 130 | transition: all 0.5s; 131 | } 132 | 133 | .header-right a:hover { 134 | background-color: rgba(255, 255, 255, 0.3); 135 | } 136 | 137 | .lesson-wrapper { 138 | padding-bottom: 80px; 139 | padding-left: 5%; 140 | padding-right: 5%; 141 | background-color: #f7f7f7; 142 | text-align: center; 143 | } 144 | 145 | .heading { 146 | padding-top: 80px; 147 | padding-bottom: 50px; 148 | color: #5f5d60; 149 | } 150 | 151 | .heading h2 { 152 | font-weight: normal; 153 | } 154 | 155 | .lesson { 156 | float: left; 157 | width: 25%; 158 | } 159 | 160 | .lesson-icon { 161 | position: relative; 162 | } 163 | 164 | .lesson-icon p { 165 | position: absolute; 166 | top: 44%; 167 | width: 100%; 168 | color: white; 169 | } 170 | 171 | .txt-contents { 172 | width: 80%; 173 | display: inline-block; 174 | margin-top: 15px; 175 | font-size: 15px; 176 | color: #b3aeb5; 177 | } 178 | 179 | .heading h3 { 180 | font-weight: normal; 181 | } 182 | 183 | .message-wrapper { 184 | border-bottom: 1px solid #eee; 185 | padding-bottom: 80px; 186 | text-align: center; 187 | } 188 | 189 | .message { 190 | padding: 15px 40px; 191 | background-color: #5dca88; 192 | cursor: pointer; 193 | box-shadow: 0 7px #1a7940; 194 | } 195 | 196 | .message:active { 197 | position: relative; 198 | top: 7px; 199 | box-shadow: none; 200 | } 201 | 202 | footer img { 203 | width: 125px; 204 | } 205 | 206 | footer p { 207 | color: #b3aeb5; 208 | font-size: 12px; 209 | } 210 | 211 | footer { 212 | padding-top: 30px; 213 | padding-bottom: 20px; 214 | } 215 | 216 | /* Ketik code Anda dibawah */ 217 | .menu-icon { 218 | color: white; 219 | float: right; 220 | font-size: 25px; 221 | padding: 21px 0; 222 | display: none; 223 | } -------------------------------------------------------------------------------- /resposive-web/responsive.css: -------------------------------------------------------------------------------- 1 | /* Untuk Tablet */ 2 | @media all and (max-width: 1000px) { 3 | 4 | .top-wrapper h1 { 5 | font-size: 32px; 6 | } 7 | 8 | .heading h2 { 9 | font-size: 20px; 10 | } 11 | 12 | .lesson { 13 | width: 50%; 14 | padding-bottom: 50px; 15 | } 16 | 17 | 18 | } 19 | 20 | /* Untuk Smartphone */ 21 | @media all and (max-width: 670px) { 22 | 23 | .header-right { 24 | display: none; 25 | } 26 | 27 | .menu-icon { 28 | display: block; 29 | } 30 | 31 | .top-wrapper h1 { 32 | font-size: 24px; 33 | line-height: 36px; 34 | } 35 | 36 | .top-wrapper { 37 | text-align: left; 38 | } 39 | 40 | .top-wrapper p { 41 | font-size: 14px; 42 | line-height: 20px; 43 | } 44 | 45 | .btn { 46 | width: 100%; 47 | } 48 | 49 | .facebook { 50 | margin-bottom: 10px; 51 | } 52 | 53 | .lesson { 54 | width: 100%; 55 | } 56 | 57 | footer { 58 | text-align: center; 59 | } 60 | } -------------------------------------------------------------------------------- /sImpson-face/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Page Title 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 | -------------------------------------------------------------------------------- /sImpson-face/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: #1ca8e3 3 | } 4 | .container { 5 | margin-top: 20vh 6 | } 7 | .text { 8 | float:left; 9 | padding-top: 25vh; 10 | padding-left: 100px; 11 | font-family: 'Montserrat', sans-serif; 12 | color: #fff; 13 | transforms: rotate(-135deg); 14 | } 15 | span { 16 | font-size: 2em; 17 | } 18 | a { 19 | font-size: 1em; 20 | text-decoration: none 21 | } 22 | .homer { 23 | width: 156px; 24 | height: 304px; 25 | margin-left: 50%; 26 | position: relative; 27 | padding-top: 10px; 28 | 29 | 30 | } 31 | 32 | .square { 33 | width: 100%; 34 | height: 138px; 35 | position: absolute; 36 | margin-top: 100px; 37 | background-image: linear-gradient( to right, #fed80b 50%, #ffcc01 50% ); 38 | z-index: -1; 39 | } 40 | 41 | .circle-top { 42 | width: 156px; 43 | height: 141px; 44 | border-radius: 156px; 45 | background-image: linear-gradient( to right, #fed80b 50%, #ffcc01 50% ); 46 | } 47 | 48 | .circle-left { 49 | width: 16px; 50 | height: 16px; 51 | border-radius: 16px; 52 | float: left; 53 | position: absolute; 54 | right: 92%; 55 | top: 103px; 56 | background-color: #ffdc06 57 | 58 | 59 | } 60 | .circle-right { 61 | left: 92%; 62 | top: 103px; 63 | background-color: #ffcc01 64 | } 65 | 66 | .circle-eye { 67 | width: 81px; 68 | height: 81px; 69 | border-radius: 81px; 70 | position: absolute; 71 | background-color: #fff; 72 | z-index: 999 73 | 74 | } 75 | 76 | .eye-left { 77 | top: 100px; 78 | left: -10px 79 | } 80 | 81 | .eye-right { 82 | top: 100px; 83 | right: -10px 84 | } 85 | 86 | .circle-small { 87 | width: 8px; 88 | height: 8px; 89 | background-color: #000; 90 | border-radius: 5px; 91 | position: relative; 92 | } 93 | 94 | .small-left { 95 | margin: 0 auto; 96 | top: 48%; 97 | animation: eye 2s infinite alternate 98 | } 99 | 100 | .small-right { 101 | top: 48%; 102 | margin: 0 auto; 103 | animation: eye 2s infinite alternate 104 | } 105 | 106 | .circle-inf { 107 | width: 51px; 108 | height: 46px; 109 | border-radius: 51px; 110 | margin-top: 15px; 111 | z-index: 998; 112 | position: absolute; 113 | } 114 | 115 | .inf-esq { 116 | float: left; 117 | left: -10%; 118 | background-color: #f9da0d 119 | } 120 | .inf-dir { 121 | float: right; 122 | left: 75%; 123 | background-color: #ffcb00 124 | } 125 | 126 | .circle-center-center { 127 | width: 100px; 128 | height: 10px; 129 | position: absolute; 130 | z-index: 1000; 131 | border-radius: 100px; 132 | bottom: 50px; 133 | left: 18%; 134 | background-image: linear-gradient( to right, #bf9958 50%, #af874a 50% ); 135 | } 136 | 137 | .circle-center { 138 | width: 100%; 139 | height: 121px; 140 | border-radius: 100%; 141 | margin-top: 30px; 142 | background-color: #d3aa68; 143 | z-index: 999; 144 | position: absolute; 145 | background-image: linear-gradient( to right, #d5ab63 50%, #cba159 50% ); 146 | } 147 | 148 | @keyframes eye { 149 | 0% {left: 0px} 150 | 100% {right: 20%} 151 | } 152 | -------------------------------------------------------------------------------- /segitiga.css: -------------------------------------------------------------------------------- 1 | #triangle-up { 2 | width: auto; 3 | height: auto; 4 | border-left: 50px solid transparent; 5 | border-right: 50px solid transparent; 6 | border-top: 100px solid red; 7 | border-bottom: 100px solid red; 8 | } 9 | -------------------------------------------------------------------------------- /sgb.css: -------------------------------------------------------------------------------- 1 | /* Bordered form */ 2 | form { 3 | border: 3px solid #f1f1f1; 4 | } 5 | 6 | /* Full-width inputs */ 7 | input[type=text], input[type=password] { 8 | width: 100%; 9 | padding: 12px 20px; 10 | margin: 8px 0; 11 | display: inline-block; 12 | border: 1px solid #ccc; 13 | box-sizing: border-box; 14 | } 15 | 16 | /* Set a style for all buttons */ 17 | button { 18 | background-color: #04AA6D; 19 | color: white; 20 | padding: 14px 20px; 21 | margin: 8px 0; 22 | border: none; 23 | cursor: pointer; 24 | width: 100%; 25 | } 26 | 27 | /* Add a hover effect for buttons */ 28 | button:hover { 29 | opacity: 0.8; 30 | } 31 | 32 | /* Extra style for the cancel button (red) */ 33 | .cancelbtn { 34 | width: auto; 35 | padding: 10px 18px; 36 | background-color: #f44336; 37 | } 38 | 39 | /* Center the avatar image inside this container */ 40 | .imgcontainer { 41 | text-align: center; 42 | margin: 24px 0 12px 0; 43 | } 44 | 45 | /* Avatar image */ 46 | img.avatar { 47 | width: 40%; 48 | border-radius: 50%; 49 | } 50 | 51 | /* Add padding to containers */ 52 | .container { 53 | padding: 16px; 54 | } 55 | 56 | /* The "Forgot password" text */ 57 | span.psw { 58 | float: right; 59 | padding-top: 16px; 60 | } 61 | 62 | /* Change styles for span and cancel button on extra small screens */ 63 | @media screen and (max-width: 300px) { 64 | span.psw { 65 | display: block; 66 | float: none; 67 | } 68 | .cancelbtn { 69 | width: 100%; 70 | } 71 | } 72 | 73 | ##HACKTOBERFEST2022 74 | //merch hacktoberfest2022 75 | -------------------------------------------------------------------------------- /simple-landing-page/font/playfairdisplay-black-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FirmanKurniawan/CSS-Projects/bfd22d16984e1215bcf05f08429daf87a2e9cd6c/simple-landing-page/font/playfairdisplay-black-webfont.woff -------------------------------------------------------------------------------- /simple-landing-page/font/playfairdisplay-black-webfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FirmanKurniawan/CSS-Projects/bfd22d16984e1215bcf05f08429daf87a2e9cd6c/simple-landing-page/font/playfairdisplay-black-webfont.woff2 -------------------------------------------------------------------------------- /simple-landing-page/font/roboto-black-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FirmanKurniawan/CSS-Projects/bfd22d16984e1215bcf05f08429daf87a2e9cd6c/simple-landing-page/font/roboto-black-webfont.woff -------------------------------------------------------------------------------- /simple-landing-page/font/roboto-black-webfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FirmanKurniawan/CSS-Projects/bfd22d16984e1215bcf05f08429daf87a2e9cd6c/simple-landing-page/font/roboto-black-webfont.woff2 -------------------------------------------------------------------------------- /simple-landing-page/font/roboto-thin-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FirmanKurniawan/CSS-Projects/bfd22d16984e1215bcf05f08429daf87a2e9cd6c/simple-landing-page/font/roboto-thin-webfont.woff -------------------------------------------------------------------------------- /simple-landing-page/font/roboto-thin-webfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FirmanKurniawan/CSS-Projects/bfd22d16984e1215bcf05f08429daf87a2e9cd6c/simple-landing-page/font/roboto-thin-webfont.woff2 -------------------------------------------------------------------------------- /simple-landing-page/img/alpukad.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FirmanKurniawan/CSS-Projects/bfd22d16984e1215bcf05f08429daf87a2e9cd6c/simple-landing-page/img/alpukad.jpg -------------------------------------------------------------------------------- /simple-landing-page/img/cery.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FirmanKurniawan/CSS-Projects/bfd22d16984e1215bcf05f08429daf87a2e9cd6c/simple-landing-page/img/cery.jpg -------------------------------------------------------------------------------- /simple-landing-page/img/jeruk.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FirmanKurniawan/CSS-Projects/bfd22d16984e1215bcf05f08429daf87a2e9cd6c/simple-landing-page/img/jeruk.jpg -------------------------------------------------------------------------------- /simple-landing-page/img/pineapple.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FirmanKurniawan/CSS-Projects/bfd22d16984e1215bcf05f08429daf87a2e9cd6c/simple-landing-page/img/pineapple.png -------------------------------------------------------------------------------- /simple-landing-page/img/pisang.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FirmanKurniawan/CSS-Projects/bfd22d16984e1215bcf05f08429daf87a2e9cd6c/simple-landing-page/img/pisang.jpg -------------------------------------------------------------------------------- /simple-landing-page/img/semangka.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FirmanKurniawan/CSS-Projects/bfd22d16984e1215bcf05f08429daf87a2e9cd6c/simple-landing-page/img/semangka.jpg -------------------------------------------------------------------------------- /simple-landing-page/img/strowberry.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FirmanKurniawan/CSS-Projects/bfd22d16984e1215bcf05f08429daf87a2e9cd6c/simple-landing-page/img/strowberry.jpg -------------------------------------------------------------------------------- /simple-landing-page/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Healthy Eating 8 | 9 | 10 | 11 | 12 |
13 | 14 |

Healthy Eating

15 |

All About Fruits

16 | 17 |
18 |
19 |

Raw fruit

20 |
21 |

Raw fruits are those which are not ripe properly. But it also contains many different nutrition. The raw food diet encourages people to eat only raw (never heated), unprocessed foods. While eating more produce is advantageous, experts say there’s no reason to avoid cooking it.

22 |
23 |
24 | 25 |
26 |
27 | 28 |
29 |
30 | 31 |
32 |
33 | 34 |
35 |
36 |

Fruit Diet

37 |
38 |

The fruitarian, or fruit, diet is a highly restrictive vegan diet. It excludes all animal products, including dairy. People following this program eat a diet consisting primarily of raw fruits. Vegetables, dried fruits, nuts, and seeds can also be eaten in moderation.

39 |
40 |
41 | 42 |
43 |
44 | 45 |
46 |
47 |
48 | 49 | 54 | 55 | 56 | 57 | 58 | 59 | -------------------------------------------------------------------------------- /simple-landing-page/style/style.css: -------------------------------------------------------------------------------- 1 | /* font */ 2 | 3 | @font-face { 4 | font-family: 'robotothin'; 5 | src: url('font/roboto-thin-webfont.woff2') format('woff2'), 6 | url('font/roboto-thin-webfont.woff') format('woff'); 7 | font-weight: normal; 8 | font-style: normal; 9 | } 10 | 11 | @font-face { 12 | font-family: 'playfair_displayblack'; 13 | src: url('font/playfairdisplay-black-webfont.woff2') format('woff2'), 14 | url('font/playfairdisplay-black-webfont.woff') format('woff'); 15 | font-weight: normal; 16 | font-style: normal; 17 | 18 | } 19 | 20 | @font-face { 21 | font-family: 'robotoblack'; 22 | src: url('font/roboto-black-webfont.woff2') format('woff2'), 23 | url('font/roboto-black-webfont.woff') format('woff'); 24 | font-weight: normal; 25 | font-style: normal; 26 | 27 | } 28 | 29 | *{ 30 | margin: 0; 31 | padding: 0; 32 | box-sizing: border-box; 33 | } 34 | 35 | 36 | .container{ 37 | height: 100%; 38 | max-width: 1200px; 39 | min-width: 80%; 40 | margin: 40px auto; 41 | padding: 0 30px; 42 | } 43 | 44 | h3{ 45 | font-family: 'robotothin', sans-serif; 46 | text-transform: uppercase; 47 | text-align: center; 48 | font-size: 30px; 49 | } 50 | 51 | h1{ 52 | font-size: 50px; 53 | text-align: center; 54 | font-family: 'playfair_displayblack', serif; 55 | } 56 | 57 | img{ 58 | width: 100%; 59 | height: 100%; 60 | object-fit: cover; 61 | } 62 | 63 | .content{ 64 | display: grid; 65 | grid-template-columns: 1fr 1fr 1fr; 66 | grid-template-rows: repeat (6,1fr ); 67 | height: 1200px; 68 | gap: 20px; 69 | margin-top: 35px; 70 | } 71 | 72 | 73 | 74 | .raw-fruit{ 75 | background-color: #2CCCC4; 76 | color:white; 77 | grid-column: 1; 78 | grid-row: 1 / span 2; 79 | font-family: 'robotoblack', sans-serif; 80 | padding: 30px; 81 | justify-content: center; 82 | transition: 1s; 83 | box-shadow: 5px 7px 5px rgba(0, 0, 0, 0.5); 84 | } 85 | 86 | .raw-fruit h4 { 87 | font-size: 22px; 88 | margin-bottom: 28px; 89 | } 90 | 91 | .raw-fruit p{ 92 | line-height: 25.6px; 93 | } 94 | 95 | 96 | 97 | .fruit-diet{ 98 | background-color: #478AC9; 99 | color: #fff; 100 | grid-column: 3; 101 | grid-row: 1 /span 2; 102 | padding: 30px; 103 | font-family: 'robotoblack', sans-serif; 104 | transition: 0.5s; 105 | box-shadow: 5px 7px 5px rgba(0, 0, 0, 0.5); 106 | } 107 | 108 | .fruit-diet h4{ 109 | margin-bottom: 28px; 110 | font-size: 22px; 111 | } 112 | 113 | .fruit-diet p { 114 | line-height: 25.6px; 115 | } 116 | 117 | 118 | .jeruk{ 119 | grid-column: 1; 120 | grid-row: 3/ span 2; 121 | transition: 0.5s; 122 | box-shadow: 5px 7px 5px rgba(0, 0, 0, 0.5); 123 | } 124 | 125 | .cery{ 126 | grid-column: 1; 127 | grid-row: 5/ span 2; 128 | transition: 0.5s; 129 | box-shadow: 5px 7px 5px rgba(0, 0, 0, 0.5); 130 | } 131 | 132 | .pisang{ 133 | grid-column: 2; 134 | grid-row: 1/ span 3; 135 | transition: 0.5s; 136 | box-shadow: 5px 7px 5px rgba(0, 0, 0, 0.5); 137 | } 138 | 139 | .strowberry{ 140 | grid-column: 2; 141 | grid-row: 4/ span 3; 142 | transition: 0.5s; 143 | box-shadow: 5px 7px 5px rgba(0, 0, 0, 0.5); 144 | } 145 | 146 | .nanas{ 147 | grid-column: 3; 148 | grid-row: 3/ span 2; 149 | transition: 0.5s; 150 | box-shadow: 5px 7px 5px rgba(0, 0, 0, 0.5); 151 | } 152 | 153 | .alpukad{ 154 | grid-column: 3; 155 | grid-row: 5 / span 2; 156 | transition: 0.5s; 157 | box-shadow: 5px 7px 5px rgba(0, 0, 0, 0.5); 158 | } 159 | 160 | 161 | footer{ 162 | width: 100%; 163 | font-family: Helvetica, sans-serif; 164 | font-size: 23px; 165 | background-color: #FFBCD1; 166 | padding: 13px 0; 167 | margin-top: 150px; 168 | text-align: center; 169 | display: grid; 170 | } 171 | 172 | /* efek hover*/ 173 | 174 | .raw-fruit:hover{ 175 | transform: scale(1.04); 176 | } 177 | 178 | .jeruk:hover{ 179 | transform: scale(1.04); 180 | } 181 | 182 | .cery:hover{ 183 | transform: scale(1.04); 184 | } 185 | 186 | .pisang:hover{ 187 | transform: scale(1.04); 188 | } 189 | 190 | .strowberry:hover{ 191 | transform: scale(1.04); 192 | } 193 | 194 | .fruit-diet:hover{ 195 | transform: scale(1.04); 196 | } 197 | 198 | .nanas:hover{ 199 | transform: scale(1.04); 200 | } 201 | 202 | .alpukad:hover{ 203 | transform: scale(1.04); 204 | } 205 | 206 | 207 | /* responsive mobile */ 208 | @media screen and (max-width : 700px) { 209 | 210 | .content{ 211 | display: grid; 212 | grid-template-columns: 1fr; 213 | height: 50%; 214 | } 215 | 216 | .raw-fruit{ 217 | grid-area: unset; 218 | } 219 | 220 | 221 | .fruit-diet{ 222 | grid-area: unset; 223 | } 224 | 225 | 226 | .jeruk{ 227 | grid-area: unset; 228 | } 229 | 230 | .cery{ 231 | grid-area: unset; 232 | } 233 | 234 | .pisang{ 235 | grid-area: unset; 236 | } 237 | 238 | .strowberry{ 239 | grid-area: unset; 240 | } 241 | 242 | .nanas{ 243 | grid-area: unset; 244 | } 245 | 246 | .alpukad{ 247 | grid-area: unset; 248 | margin-bottom: 50px; 249 | } 250 | 251 | footer{ 252 | margin-top: 70px; 253 | } 254 | } -------------------------------------------------------------------------------- /simple-portfolio/asset/img/cursor/boy_apple.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FirmanKurniawan/CSS-Projects/bfd22d16984e1215bcf05f08429daf87a2e9cd6c/simple-portfolio/asset/img/cursor/boy_apple.png -------------------------------------------------------------------------------- /simple-portfolio/asset/img/cursor/tunjuk_apple.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FirmanKurniawan/CSS-Projects/bfd22d16984e1215bcf05f08429daf87a2e9cd6c/simple-portfolio/asset/img/cursor/tunjuk_apple.png -------------------------------------------------------------------------------- /simple-portfolio/asset/img/cursor/unicorn_apple.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FirmanKurniawan/CSS-Projects/bfd22d16984e1215bcf05f08429daf87a2e9cd6c/simple-portfolio/asset/img/cursor/unicorn_apple.png -------------------------------------------------------------------------------- /simple-portfolio/asset/img/me.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FirmanKurniawan/CSS-Projects/bfd22d16984e1215bcf05f08429daf87a2e9cd6c/simple-portfolio/asset/img/me.webp -------------------------------------------------------------------------------- /simple-portfolio/asset/img/project/cosine.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FirmanKurniawan/CSS-Projects/bfd22d16984e1215bcf05f08429daf87a2e9cd6c/simple-portfolio/asset/img/project/cosine.webp -------------------------------------------------------------------------------- /simple-portfolio/asset/img/project/linku.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FirmanKurniawan/CSS-Projects/bfd22d16984e1215bcf05f08429daf87a2e9cd6c/simple-portfolio/asset/img/project/linku.webp -------------------------------------------------------------------------------- /simple-portfolio/asset/img/project/nyumput.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FirmanKurniawan/CSS-Projects/bfd22d16984e1215bcf05f08429daf87a2e9cd6c/simple-portfolio/asset/img/project/nyumput.webp -------------------------------------------------------------------------------- /simple-portfolio/asset/img/project/quran.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FirmanKurniawan/CSS-Projects/bfd22d16984e1215bcf05f08429daf87a2e9cd6c/simple-portfolio/asset/img/project/quran.webp -------------------------------------------------------------------------------- /simple-portfolio/asset/js/main.js: -------------------------------------------------------------------------------- 1 | // Select All Projects and AOS Animate 2 | const cards = document.querySelectorAll('.card'); 3 | cards.forEach((card, i) => { 4 | 5 | // AOS Animate 6 | card.dataset.aos = 'zoom-in'; 7 | card.dataset.aosDelay = i * 100; 8 | }); 9 | 10 | // AOS 11 | AOS.init({ 12 | once: true 13 | }); -------------------------------------------------------------------------------- /simple-portfolio/asset/scss/main.css: -------------------------------------------------------------------------------- 1 | body::-webkit-scrollbar{width:.2em}body::-webkit-scrollbar-thumb{background:#94a3b8;border-radius:20px}body{background:#0f172a;color:#fff;font-family:"Poppins",sans-serif;cursor:url("../img/cursor/tunjuk_apple.png"),auto}.section-title{font-size:1.5rem;font-weight:900}.section-title::after{content:"";display:block;width:15%;height:3px;background:#2abfff}.section-description{font-size:1.3rem;font-weight:400;margin-bottom:1rem;color:#94a3b8}img{width:100%}a{cursor:url("../img/cursor/unicorn_apple.png"),auto !important}.container{max-width:576px}.navbar-brand{font-weight:900;color:#fff}.navbar-brand:hover{color:#fff}.nav-link{color:#fff}.nav-link:hover{color:#2abfff}.navbar-toggler:focus,.navbar-toggler:active{outline:none !important;box-shadow:none !important}.navbar-toggler i{color:#fff;font-size:2rem}header h1{font-size:2.5rem;font-weight:900}header span{color:#2abfff}header #emot{-webkit-animation:move 2.5s infinite;animation:move 2.5s infinite;display:inline-block}header p{font-size:1.3rem;font-weight:400;color:#94a3b8}header a{color:#2abfff;text-decoration:none}header a:hover{color:#ff5dd9}#about img{margin-bottom:1rem;border-radius:50%;border:5px solid #334155}@media screen and (max-width: 576px){#about img{width:150px}}@media screen and (max-width: 768px){#about img{width:150px}}#about .name{font-size:1.3rem;font-weight:600}#about .job{font-size:1.1rem;font-weight:300;color:#94a3b8}@media screen and (max-width: 576px){#about .job{margin-bottom:-20px}}@media screen and (max-width: 768px){#about .job{margin-bottom:-20px}}#about .paragrap{color:#cbd5e1;font-size:1.1rem}#about span{color:#2abfff}#project .card{margin-bottom:1.5rem;background:#1e293b;border:2px solid #334155;min-height:50vh;border-radius:15px;overflow:hidden}#project .card h1{font-size:1.5rem;font-weight:600}#project .card p{font-size:1.1rem;font-weight:400;color:#94a3b8}#project .card a{font-size:1.1rem;color:#2abfff;text-decoration:none;transition:all .3s ease-in-out}#project .card a:hover{color:#ff5dd9}#contact p{font-size:1.5rem;font-weight:400;color:#94a3b8}#contact a{color:#2abfff;text-decoration:none;transition:all .3s ease-in-out;font-weight:600}#contact a:hover{color:#ff5dd9}#contact .btn-sosmed{background:#1e293b;border:2px solid #334155;border-radius:10px;color:#fff;font-size:1.2rem;padding:10px 20px;cursor:pointer;transition:all .3s ease-in-out;margin-right:.5rem}#contact .btn-sosmed:hover{background:#2abfff;color:#fff}footer p{font-size:1.1rem;font-weight:300;color:#94a3b8}footer a{color:#2abfff;text-decoration:none;transition:all .3s ease-in-out}footer a:hover{color:#ff5dd9}@-webkit-keyframes move{0%{transform:rotate(0deg)}10%{transform:rotate(14deg)}20%{transform:rotate(-8deg)}30%{transform:rotate(14deg)}40%{transform:rotate(-4deg)}50%{transform:rotate(10deg)}60%{transform:rotate(0deg)}100%{transform:rotate(0deg)}}@keyframes move{0%{transform:rotate(0deg)}10%{transform:rotate(14deg)}20%{transform:rotate(-8deg)}30%{transform:rotate(14deg)}40%{transform:rotate(-4deg)}50%{transform:rotate(10deg)}60%{transform:rotate(0deg)}100%{transform:rotate(0deg)}} -------------------------------------------------------------------------------- /simple-portfolio/asset/scss/main.scss: -------------------------------------------------------------------------------- 1 | // Variabel 2 | $bg-dark:#0F172A; 3 | $white:#FFFFFF; 4 | $primary:#2ABFFF; 5 | $secondary:#FF5DD9; 6 | $paragrap:#94A3B8; 7 | $gray:#CBD5E1; 8 | $card-bg:#1E293B; 9 | $border-card:#334155; 10 | 11 | // Mixin 12 | @mixin btn() { 13 | background: $card-bg; 14 | border: 2px solid $border-card; 15 | border-radius: 10px; 16 | color: $white; 17 | font-size: 1.2rem; 18 | padding: 10px 20px; 19 | cursor: pointer; 20 | transition: all .3s ease-in-out; 21 | margin-right: .5rem; 22 | 23 | &:hover { 24 | background: $primary; 25 | color: $white; 26 | } 27 | } 28 | 29 | // Global 30 | body::-webkit-scrollbar { 31 | width: 0.2em; 32 | } 33 | 34 | body::-webkit-scrollbar-thumb { 35 | background: $paragrap; 36 | border-radius: 20px; 37 | } 38 | 39 | body { 40 | background: $bg-dark; 41 | color: #ffffff; 42 | font-family: 'Poppins', sans-serif; 43 | cursor: url("../img/cursor/tunjuk_apple.png"), auto; 44 | } 45 | 46 | .section-title { 47 | font-size: 1.5rem; 48 | font-weight: 900; 49 | 50 | &::after { 51 | content: ''; 52 | display: block; 53 | width: 15%; 54 | height: 3px; 55 | background: $primary; 56 | } 57 | } 58 | 59 | .section-description { 60 | font-size: 1.3rem; 61 | font-weight: 400; 62 | margin-bottom: 1rem; 63 | color: $paragrap; 64 | } 65 | 66 | img { 67 | width: 100%; 68 | } 69 | 70 | a { 71 | cursor: url("../img/cursor/unicorn_apple.png"), auto !important; 72 | } 73 | 74 | .container { 75 | max-width: 576px; 76 | } 77 | 78 | // Navbar 79 | .navbar-brand { 80 | font-weight: 900; 81 | color: $white; 82 | 83 | &:hover { 84 | color: $white; 85 | } 86 | } 87 | 88 | .nav-link { 89 | color: $white; 90 | 91 | &:hover { 92 | color: $primary; 93 | } 94 | } 95 | 96 | .navbar-toggler { 97 | 98 | &:focus, 99 | &:active { 100 | outline: none !important; 101 | box-shadow: none !important; 102 | } 103 | 104 | i { 105 | color: $white; 106 | font-size: 2rem; 107 | } 108 | } 109 | 110 | // Header 111 | header { 112 | 113 | h1 { 114 | font-size: 2.5rem; 115 | font-weight: 900; 116 | } 117 | 118 | span { 119 | color: $primary; 120 | } 121 | 122 | #emot { 123 | animation: move 2.5s infinite; 124 | display: inline-block; 125 | } 126 | 127 | p { 128 | font-size: 1.3rem; 129 | font-weight: 400; 130 | color: $paragrap; 131 | } 132 | 133 | a { 134 | color: $primary; 135 | text-decoration: none; 136 | 137 | &:hover { 138 | color: $secondary; 139 | } 140 | } 141 | } 142 | 143 | #about { 144 | img { 145 | margin-bottom: 1rem; 146 | border-radius: 50%; 147 | border: 5px solid $border-card; 148 | 149 | @media screen and (max-width: 576px) { 150 | width: 150px; 151 | } 152 | 153 | @media screen and (max-width: 768px) { 154 | width: 150px; 155 | } 156 | } 157 | 158 | .name { 159 | font-size: 1.3rem; 160 | font-weight: 600; 161 | } 162 | 163 | .job { 164 | font-size: 1.1rem; 165 | font-weight: 300; 166 | color: $paragrap; 167 | 168 | @media screen and (max-width: 576px) { 169 | margin-bottom: -20px; 170 | } 171 | 172 | @media screen and (max-width: 768px) { 173 | margin-bottom: -20px; 174 | } 175 | } 176 | 177 | .paragrap { 178 | color: $gray; 179 | font-size: 1.1rem; 180 | } 181 | 182 | span { 183 | color: $primary; 184 | } 185 | } 186 | 187 | #project { 188 | .card { 189 | margin-bottom: 1.5rem; 190 | background: $card-bg; 191 | border: 2px solid $border-card; 192 | min-height: 50vh; 193 | border-radius: 15px; 194 | overflow: hidden; 195 | 196 | h1 { 197 | font-size: 1.5rem; 198 | font-weight: 600; 199 | } 200 | 201 | p { 202 | font-size: 1.1rem; 203 | font-weight: 400; 204 | color: $paragrap; 205 | } 206 | 207 | a { 208 | font-size: 1.1rem; 209 | color: $primary; 210 | text-decoration: none; 211 | transition: all 0.3s ease-in-out; 212 | 213 | &:hover { 214 | color: $secondary; 215 | } 216 | } 217 | } 218 | } 219 | 220 | #contact { 221 | p { 222 | font-size: 1.5rem; 223 | font-weight: 400; 224 | color: $paragrap; 225 | } 226 | 227 | a { 228 | color: $primary; 229 | text-decoration: none; 230 | transition: all 0.3s ease-in-out; 231 | font-weight: 600; 232 | 233 | &:hover { 234 | color: $secondary; 235 | } 236 | } 237 | 238 | .btn-sosmed { 239 | @include btn; 240 | } 241 | } 242 | 243 | footer { 244 | p { 245 | font-size: 1.1rem; 246 | font-weight: 300; 247 | color: $paragrap; 248 | } 249 | 250 | a { 251 | color: $primary; 252 | text-decoration: none; 253 | transition: all 0.3s ease-in-out; 254 | 255 | &:hover { 256 | color: $secondary; 257 | } 258 | } 259 | } 260 | 261 | @keyframes move { 262 | 0% { 263 | transform: rotate(0deg); 264 | } 265 | 266 | 10% { 267 | transform: rotate(14deg); 268 | } 269 | 270 | 20% { 271 | transform: rotate(-8deg); 272 | } 273 | 274 | 30% { 275 | transform: rotate(14deg); 276 | } 277 | 278 | 40% { 279 | transform: rotate(-4deg); 280 | } 281 | 282 | 50% { 283 | transform: rotate(10deg); 284 | } 285 | 286 | 60% { 287 | transform: rotate(0deg); 288 | } 289 | 290 | 100% { 291 | transform: rotate(0deg); 292 | } 293 | } -------------------------------------------------------------------------------- /simple-portfolio/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FirmanKurniawan/CSS-Projects/bfd22d16984e1215bcf05f08429daf87a2e9cd6c/simple-portfolio/favicon.ico -------------------------------------------------------------------------------- /slide-swipe.css: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | .swiper { 5 | width: auto; 6 | height: 100vh; 7 | 8 | } 9 | .swiper .swiper-slide{ 10 | 11 | box-shadow: 15px 15px 118px 0px rgba(30,30,43,0.3) inset; 12 | -webkit-box-shadow: 15px 15px 118px 0px rgba(30,30,43,0.3) inset; 13 | -moz-box-shadow: 15px 15px 118px 0px rgba(30,30,43,0.3) inset; 14 | } 15 | 16 | .swiper .swiper-slide h2{ 17 | font-size: 6rem; 18 | color: white; 19 | font-family: 'gabo-drive-regular', sans-serif; 20 | font-weight: 1000; 21 | text-align: left; 22 | } 23 | 24 | .swiper .swiper-slide p{ 25 | color: white; 26 | text-align: left; 27 | line-height: 90%; 28 | font-family: cursive; 29 | } 30 | 31 | .swiper-slide { 32 | text-align: center; 33 | font-size: 18px; 34 | background-size: cover; 35 | display: -webkit-box; 36 | display: -ms-flexbox; 37 | display: -webkit-flex; 38 | display: flex; 39 | -webkit-box-pack: center; 40 | -ms-flex-pack: center; 41 | -webkit-justify-content: center; 42 | justify-content: center; 43 | -webkit-box-align: center; 44 | -ms-flex-align: center; 45 | -webkit-align-items: center; 46 | align-items: center; 47 | } 48 | 49 | 50 | .title span { 51 | font-size: 100px; 52 | color: white; 53 | font-weight: bolder; 54 | text-align: left; 55 | 56 | } 57 | 58 | .title p { 59 | color: white; 60 | font-size: 20px; 61 | margin-top: -30px; 62 | 63 | } 64 | 65 | .card-container { 66 | position: absolute; 67 | z-index: 2; 68 | height: 450px; 69 | width: 750px; 70 | overflow: hidden; 71 | margin: 150px 10px 30px 700px; 72 | /* top | right | bottom | left */ 73 | } 74 | 75 | 76 | .card-container .swiper-slide { 77 | background-position: center; 78 | background-size: cover; 79 | border-radius: 20px; 80 | filter: blur(2px) 81 | 82 | 83 | 84 | } 85 | 86 | .card-container .swiper-slide-active{ 87 | filter: blur(0px) 88 | } 89 | 90 | .swiper-button-prev, .swiper-button-next { 91 | z-index: 999; 92 | position: absolute; 93 | 94 | 95 | } 96 | .btn-gradient{ 97 | border: #67cc9e 2px solid ; 98 | border-radius: 10px; 99 | box-sizing: border-box; 100 | color: #67cc9e; 101 | display: block; 102 | font: 1.125rem 'Oswald', Arial, sans-serif; /*18*/ 103 | height: 40px; 104 | letter-spacing: 1px; 105 | margin: 0 auto; 106 | padding: 1.5px; 107 | position: relative; 108 | text-decoration: none; 109 | text-transform: uppercase; 110 | width: 100px; 111 | z-index: 2; 112 | 113 | } 114 | 115 | .btn-gradient:hover { 116 | color: #fff; 117 | 118 | } 119 | 120 | .btn-gradient span { 121 | align-items: center; 122 | background: transparent; 123 | border-radius: 10px; 124 | display: flex; 125 | justify-content: center; 126 | height: 100%; 127 | transition: background .5s ease; 128 | width: 100%; 129 | } 130 | 131 | .btn-gradient:hover span { 132 | /* background: red; */ 133 | background-color: #0499f2; 134 | background-image: linear-gradient(315deg, #0499f2 0%, #26f596 74%); 135 | 136 | } 137 | 138 | 139 | .card-title{ 140 | display: flex; 141 | justify-content: center; 142 | color: white; 143 | flex-wrap: wrap; 144 | } 145 | 146 | .card-info{ 147 | margin-top: 220px; 148 | } 149 | 150 | 151 | 152 | 153 | @media only screen and (max-width: 600px) { 154 | 155 | .card-container{ 156 | margin: 150px 10px 30px -150px; 157 | /* top | right | bottom | left */ 158 | } 159 | .swiper .swiper-slide p,h2{ 160 | display: none; 161 | } 162 | } -------------------------------------------------------------------------------- /solar-eclipse/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Gerhana Matahari 9 | 10 | 11 |
12 |
13 |
14 |
15 | 16 | 17 | -------------------------------------------------------------------------------- /solar-eclipse/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin-top: 500px; 3 | padding: 0px; 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | animation: back 15s linear infinite; 9 | overflow: hidden; 10 | } 11 | 12 | .eclipse { 13 | position: absolute; 14 | top: 50%; 15 | left: 50%; 16 | transform: translate(-50%, -500%); 17 | width: 150px; 18 | height: 150px; 19 | } 20 | 21 | .eclipse .matahari { 22 | position: absolute; 23 | width: 100%; 24 | height: 100%; 25 | background: #ffad00; 26 | border-radius: 50%; 27 | box-shadow: 0px 0px 40px 4px #ffad00; 28 | margin-top: 150px; 29 | margin-right: 150px; 30 | animation: sun 15s ease-in-out infinite; 31 | } 32 | 33 | .eclipse .bulan { 34 | position: absolute; 35 | width: 150px; 36 | height: 150px; 37 | background: #fff; 38 | border-radius: 50%; 39 | margin-top: 150px; 40 | margin-left: 0px; 41 | animation: movebulan 15s linear infinite; 42 | } 43 | 44 | @keyframes movebulan { 45 | 0% { 46 | transform: translateX(200px); 47 | background: #fff; 48 | } 49 | 50% { 50 | transform: translateX(0px); 51 | background: #000; 52 | } 53 | 100% { 54 | transform: translateX(-200px); 55 | } 56 | } 57 | 58 | @keyframes back { 59 | 0%, 60 | 100% { 61 | background: #fff; 62 | } 63 | 50% { 64 | background: rgb(0, 0, 0); 65 | } 66 | } 67 | 68 | @keyframes matahari { 69 | 50% { 70 | box-shadow: 0px 0px 10px 4px #ffad00; 71 | } 72 | } 73 | -------------------------------------------------------------------------------- /stamp.css: -------------------------------------------------------------------------------- 1 | black(alpha) 2 | rgba(0,0,0,alpha) 3 | 4 | white(alpha) 5 | rgba(255,255,255,alpha) 6 | 7 | body 8 | min-height: 400px 9 | height: 100vh 10 | position: relative 11 | background-color: linen 12 | text-align: center 13 | 14 | div 15 | position: absolute 16 | left: 50% 17 | top: 50% 18 | 19 | &::before, 20 | &::after 21 | display: block 22 | content: '' 23 | position: absolute 24 | 25 | @media (max-width: 400px) 26 | &:not(.no-scale) 27 | transform: scale(.8) 28 | 29 | #stamp 30 | width: 250px 31 | height: 350px 32 | margin-left: -(@width/2) 33 | margin-top: -(@height/2) 34 | background: radial-gradient(ellipse, white(.2) 10%, white(0) 40%) 50% 110% / 120% 40%, 35 | linear-gradient(to right, darken(wheat,10), alpha(wheat,0) 25%) 50% 100% / 94% 50%, 36 | linear-gradient(to left, darken(wheat,10), alpha(wheat,0) 25%) 50% 100% / 94% 50%, 37 | linear-gradient(to bottom, wheat, darken(wheat,17)) 50% 100% / 94% 50%, 38 | linear-gradient(lightskyblue, lightskyblue) 50% 15% / 85% .5%, 39 | linear-gradient(#ccc, #ccc) 50% 10% / .25% 60%, 40 | repeating-linear-gradient(to bottom, #ccc, #ccc .5%, 41 | white(0) .5%, 42 | white(0) 10%) 50% 41% / 85% 50%, 43 | linear-gradient(to bottom, white 30%, #eee) 50% 40% / 85% 40%, 44 | linear-gradient(40deg, white 96%, white(0) 96.1%) 50% 10% / 85% 60%, 45 | linear-gradient(to right, black(0), black(.2) 6%) 19% 15% / 70% 60%, 46 | linear-gradient(to left, black(0), black(.2) 6%) 81% 25% / 70% 60% 47 | background-repeat: no-repeat 48 | box-shadow: 0 .8em .4em -.65em black(.1) 49 | 50 | &::before, 51 | &::after 52 | font-family: Courier New, mono 53 | font-weight: bold 54 | font-size: 1.2em 55 | color: #444 56 | text-transform: uppercase 57 | -webkit-background-clip: text; 58 | -webkit-text-fill-color: transparent; 59 | 60 | &::before 61 | content: 'Jun 20 1990' 62 | top: 22% 63 | left: 11% 64 | transform: rotate(-2deg) 65 | background-image: linear-gradient(45deg, transparent 50%, #999, #888, #333, #444, #999, #ddd) 66 | text-shadow: .1em 0 0 black(.5) 67 | 68 | &::after 69 | content: 'Apr 14 1990' 70 | top: 30% 71 | left: 20% 72 | transform: rotate(5deg) 73 | background-image: linear-gradient(30deg, #ccc, #999, #444, #999, #bbb, #777, transparent 70%) 74 | text-shadow: .07em 0 0 black(.3) 75 | -------------------------------------------------------------------------------- /style anjay.css: -------------------------------------------------------------------------------- 1 | .box { 2 | background-color: rgba(255, 255, 255, 0.295); 3 | padding: 3rem; 4 | border-radius: 1rem; 5 | position: relative; 6 | margin-top: 3rem; 7 | backdrop-filter: blur(15px); 8 | } 9 | 10 | body { 11 | background-color: #3226FF; 12 | background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg %3E%3Cpath fill='%235b26ff' d='M486 705.8c-109.3-21.8-223.4-32.2-335.3-19.4C99.5 692.1 49 703 0 719.8V800h843.8c-115.9-33.2-230.8-68.1-347.6-92.2C492.8 707.1 489.4 706.5 486 705.8z'/%3E%3Cpath fill='%238526ff' d='M1600 0H0v719.8c49-16.8 99.5-27.8 150.7-33.5c111.9-12.7 226-2.4 335.3 19.4c3.4 0.7 6.8 1.4 10.2 2c116.8 24 231.7 59 347.6 92.2H1600V0z'/%3E%3Cpath fill='%23ae25ff' d='M478.4 581c3.2 0.8 6.4 1.7 9.5 2.5c196.2 52.5 388.7 133.5 593.5 176.6c174.2 36.6 349.5 29.2 518.6-10.2V0H0v574.9c52.3-17.6 106.5-27.7 161.1-30.9C268.4 537.4 375.7 554.2 478.4 581z'/%3E%3Cpath fill='%23d725ff' d='M0 0v429.4c55.6-18.4 113.5-27.3 171.4-27.7c102.8-0.8 203.2 22.7 299.3 54.5c3 1 5.9 2 8.9 3c183.6 62 365.7 146.1 562.4 192.1c186.7 43.7 376.3 34.4 557.9-12.6V0H0z'/%3E%3Cpath fill='%23FF25FD' d='M181.8 259.4c98.2 6 191.9 35.2 281.3 72.1c2.8 1.1 5.5 2.3 8.3 3.4c171 71.6 342.7 158.5 531.3 207.7c198.8 51.8 403.4 40.8 597.3-14.8V0H0v283.2C59 263.6 120.6 255.7 181.8 259.4z'/%3E%3Cpath fill='%23ff1fd1' d='M1600 0H0v136.3c62.3-20.9 127.7-27.5 192.2-19.2c93.6 12.1 180.5 47.7 263.3 89.6c2.6 1.3 5.1 2.6 7.7 3.9c158.4 81.1 319.7 170.9 500.3 223.2c210.5 61 430.8 49 636.6-16.6V0z'/%3E%3Cpath fill='%23ff19a2' d='M454.9 86.3C600.7 177 751.6 269.3 924.1 325c208.6 67.4 431.3 60.8 637.9-5.3c12.8-4.1 25.4-8.4 38.1-12.9V0H288.1c56 21.3 108.7 50.6 159.7 82C450.2 83.4 452.5 84.9 454.9 86.3z'/%3E%3Cpath fill='%23ff1270' d='M1600 0H498c118.1 85.8 243.5 164.5 386.8 216.2c191.8 69.2 400 74.7 595 21.1c40.8-11.2 81.1-25.2 120.3-41.7V0z'/%3E%3Cpath fill='%23ff0c3c' d='M1397.5 154.8c47.2-10.6 93.6-25.3 138.6-43.8c21.7-8.9 43-18.8 63.9-29.5V0H643.4c62.9 41.7 129.7 78.2 202.1 107.4C1020.4 178.1 1214.2 196.1 1397.5 154.8z'/%3E%3Cpath fill='%23FF0606' d='M1315.3 72.4c75.3-12.6 148.9-37.1 216.8-72.4h-723C966.8 71 1144.7 101 1315.3 72.4z'/%3E%3C/g%3E%3C/svg%3E"); 13 | background-attachment: fixed; 14 | background-size: cover; 15 | } 16 | -------------------------------------------------------------------------------- /stylesheet.css: -------------------------------------------------------------------------------- 1 | /* 2 | * Style~! Oh-ba-gangnan-style~! 3 | */ 4 | body { 5 | background-color: #283747; 6 | } 7 | header { 8 | padding: 15px 0; 9 | background: #212F3C; 10 | color: #D6DBDF; 11 | } 12 | .inner { 13 | max-width: 400px; 14 | min-width: 320px; 15 | margin: 0 auto; 16 | } 17 | .timer { 18 | display: inline-block; 19 | } 20 | .timer span { 21 | color: #8c3a2b; 22 | background-color: #f8f8f8; 23 | padding: 2px 4px; 24 | border: 0.1px solid #fff; 25 | border-radius: 2px; 26 | } 27 | #main { 28 | height: 100%; 29 | min-height: 400px; 30 | max-width: 600; 31 | margin: 0 auto; 32 | position: relative; 33 | background-color: #283747; 34 | border-top: none; 35 | border-bottom: none; 36 | -webkit-box-shadow: 0 0 4px rgba(0,0,0,0.3); 37 | -moz-box-shadow: 0 0 4px rgba(0,0,0,0.3); 38 | box-shadow: 0 0 4px rgba(0,0,0,0.3); 39 | overflow-x: hidden; 40 | overflow-y: auto; 41 | } 42 | #heart { 43 | display: none; 44 | max-width: 1000px; 45 | margin-top: 30px; 46 | } 47 | #code { 48 | font-family: Monaco, "Source Code Pro", Consolas, sans-serif; 49 | color: #fff; 50 | font-size: 16px; 51 | margin-top: 50px; 52 | } 53 | #code .comments { 54 | color: #EBEDEF; 55 | } 56 | #code .keywords { 57 | color: red; 58 | } 59 | footer { 60 | font-size: 12px; 61 | color: #fff; 62 | width: 100%; 63 | text-align: center; 64 | 65 | bottom: 0; 66 | } 67 | footer > a { 68 | color: blueviolet; 69 | text-decoration: none; 70 | } 71 | 72 | .iframe { 73 | position: fixed; 74 | left: 0; 75 | bottom: 0; 76 | width: 100%; 77 | background-color: red; 78 | color: white; 79 | text-align: center; 80 | } 81 | -------------------------------------------------------------------------------- /styling.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: lightblue; 3 | } 4 | 5 | h1 { 6 | color: navy; 7 | margin-left: 20px; 8 | } 9 | -------------------------------------------------------------------------------- /text-inside-a-box/background.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FirmanKurniawan/CSS-Projects/bfd22d16984e1215bcf05f08429daf87a2e9cd6c/text-inside-a-box/background.jpg -------------------------------------------------------------------------------- /text-inside-a-box/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Hacktober Fest 2022 9 | 10 | 11 |
12 |
13 |

Hacktoberfest 2022

14 |
15 |
16 | 17 | -------------------------------------------------------------------------------- /text-inside-a-box/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Silkscreen&display=swap'); 2 | 3 | * { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | font-family: 'Silkscreen', cursive; 8 | } 9 | 10 | main { 11 | height: 100vh; 12 | display: flex; 13 | align-items: center; 14 | justify-content: center; 15 | background-image: url(background.jpg); /* source : https://unsplash.com/photos/7PqRZK6rbaE */ 16 | background-repeat: no-repeat; 17 | background-size: cover; 18 | } 19 | 20 | .center { 21 | width: fit-content; 22 | height: fit-content; 23 | background: linear-gradient(to right top, #6a29a8, #52309d, #3d3390, #2a3381, #1b3171); 24 | padding: 20px; 25 | border-radius: 25px; 26 | } 27 | 28 | .center > * { 29 | color: transparent; 30 | font-size: 100px; 31 | -webkit-text-stroke-width: 1px; 32 | -webkit-text-stroke-color: white; 33 | } 34 | 35 | -------------------------------------------------------------------------------- /text-shadow.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: #aaa; 3 | display: flex; 4 | align-items: center; 5 | justify-content: center; 6 | height: 100vh; 7 | } 8 | h1 { 9 | font-family: 'Montserrat', sans-serif; 10 | text-transform: uppercase; 11 | color: white; 12 | font-size: 15vw; 13 | background: linear-gradient(-90deg, rgb(223 223 223) 0%, rgba(190,190,190,1) 100%); 14 | 15 | line-height: 1; 16 | -webkit-background-clip: text; 17 | -webkit-text-fill-color: transparent; 18 | position: relative; 19 | 20 | } 21 | h1:before { 22 | content: attr(data-text); 23 | -webkit-background-clip: none; 24 | -webkit-text-fill-color: black; 25 | position: absolute; 26 | z-index: -1; 27 | filter: blur(14px); 28 | transform: skew(67deg, 0) translate(-20%, 15%) scaleY(0.5); 29 | -webkit-mask-image: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(0,0,0,1) 100%); 30 | padding: 0 22px; 31 | } 32 | -------------------------------------------------------------------------------- /transfrom.css: -------------------------------------------------------------------------------- 1 | div.a { 2 | transform: rotate(20deg); 3 | } 4 | 5 | div.b { 6 | transform: skewY(20deg); 7 | } 8 | 9 | div.c { 10 | transform: scaleY(1.5); 11 | } 12 | #hacktober-fest-2021 13 | #hacktober-indonesia 14 | -------------------------------------------------------------------------------- /triangle.css: -------------------------------------------------------------------------------- 1 | .arrow-up { 2 | width: 0; 3 | height: 0; 4 | border-left: 5px solid transparent; 5 | border-right: 5px solid transparent; 6 | 7 | border-bottom: 5px solid black; 8 | } 9 | 10 | .arrow-down { 11 | width: 0; 12 | height: 0; 13 | border-left: 20px solid transparent; 14 | border-right: 20px solid transparent; 15 | 16 | border-top: 20px solid #f00; 17 | } 18 | 19 | .arrow-right { 20 | width: 0; 21 | height: 0; 22 | border-top: 60px solid transparent; 23 | border-bottom: 60px solid transparent; 24 | 25 | border-left: 60px solid green; 26 | } 27 | 28 | .arrow-left { 29 | width: 0; 30 | height: 0; 31 | border-top: 10px solid transparent; 32 | border-bottom: 10px solid transparent; 33 | 34 | border-right:10px solid blue; 35 | } -------------------------------------------------------------------------------- /vertical-masonry-layout-grid/css/global.css: -------------------------------------------------------------------------------- 1 | .grey { 2 | background-color: #eee; 3 | } 4 | -------------------------------------------------------------------------------- /vertical-masonry-layout-grid/css/navbar.css: -------------------------------------------------------------------------------- 1 | nav { 2 | position: relative; 3 | z-index: 999; 4 | background-color: #fff; 5 | display: flex; 6 | justify-content: space-between; 7 | height: 70px; 8 | align-items: center; 9 | /* Option 1 with margin centering auto */ 10 | width: 90%; 11 | margin: 0 auto; 12 | /* Option 2 with padding left and right */ 13 | /* padding: 0 2rem; */ 14 | /* border-bottom: 2px solid rgba(0, 0, 0, 0.1); */ 15 | } 16 | 17 | nav .logo a, 18 | nav ul li a { 19 | text-decoration: none; 20 | color: #101010; 21 | letter-spacing: 1px; 22 | } 23 | 24 | nav .logo a:hover, 25 | nav ul li a:hover { 26 | color: rgba(0, 0, 0, 0.5); 27 | } 28 | 29 | nav .logo a { 30 | font-size: 1.2em; 31 | /* font-weight: bold; */ 32 | /* font-family: cursive; */ 33 | } 34 | 35 | nav ul { 36 | display: flex; 37 | width: 30%; 38 | justify-content: space-between; 39 | } 40 | 41 | nav ul li { 42 | list-style: none; 43 | } 44 | 45 | .menu-toggle { 46 | height: 21px; 47 | display: none; 48 | padding: 10px; 49 | cursor: pointer; 50 | flex-direction: column; 51 | justify-content: space-between; 52 | } 53 | 54 | .menu-toggle span { 55 | display: block; 56 | height: 3px; 57 | width: 28px; 58 | background-color: #000; 59 | border-radius: 3px; 60 | transition: all 0.5s; 61 | } 62 | 63 | .menu-toggle span:first-child { 64 | transform-origin: 0 0; 65 | } 66 | 67 | .menu-toggle span:last-child { 68 | transform-origin: 0 100%; 69 | } 70 | 71 | .menu-toggle.clicked span:nth-child(1) { 72 | transform: rotate(45deg) translate(-1px, -1px); 73 | } 74 | 75 | .menu-toggle.clicked span:nth-child(2) { 76 | transform: scale(0); 77 | opacity: 0; 78 | } 79 | 80 | .menu-toggle.clicked span:nth-child(3) { 81 | transform: rotate(-45deg); 82 | } 83 | 84 | /* RESPONSIVE */ 85 | 86 | /* DESKTOP */ 87 | @media screen and (max-width: 1024px) { 88 | nav ul { 89 | width: 50%; 90 | } 91 | } 92 | 93 | /* TABLET */ 94 | @media screen and (max-width: 768px) { 95 | nav ul { 96 | width: 65%; 97 | } 98 | } 99 | 100 | /* MOBILE PHONE */ 101 | @media screen and (max-width: 576px) { 102 | .menu-toggle { 103 | display: flex; 104 | } 105 | nav ul { 106 | position: absolute; 107 | top: 0; 108 | right: 0; 109 | width: 100%; 110 | height: 100vh; 111 | flex-direction: column; 112 | justify-content: space-evenly; 113 | align-items: center; 114 | transform: translateY(-100%); 115 | background-color: #fff; 116 | opacity: 0; 117 | transition: all 1s; 118 | } 119 | 120 | nav ul.slide { 121 | transform: translateY(0); 122 | opacity: 1; 123 | } 124 | } 125 | -------------------------------------------------------------------------------- /vertical-masonry-layout-grid/css/style.css: -------------------------------------------------------------------------------- 1 | @import './navbar.css'; 2 | @import './global.css'; 3 | 4 | * { 5 | margin: 0; 6 | padding: 0; 7 | /* box-sizing: border-box; */ 8 | } 9 | 10 | body { 11 | overflow-x: hidden; 12 | font-family: Arial, Helvetica, sans-serif; 13 | } 14 | 15 | .wrapper { 16 | width: 90%; 17 | margin: auto; 18 | } 19 | 20 | .gallery { 21 | display: grid; 22 | gap: 24px; 23 | grid-template-columns: repeat(3, minmax(0, 1fr)); 24 | align-items: start; 25 | } 26 | 27 | .column { 28 | display: grid; 29 | row-gap: 24px; 30 | grid-template-columns: minmax(0, 1fr); 31 | } 32 | 33 | figure { 34 | overflow: hidden; 35 | } 36 | 37 | figure img { 38 | width: 100%; 39 | height: 100%; 40 | object-fit: cover; 41 | transition: all 0.5s; 42 | } 43 | 44 | figure img:hover { 45 | cursor: zoom-in; 46 | transform: scale(1.1); 47 | filter: brightness(50%); 48 | } 49 | 50 | footer { 51 | padding: 20px 0; 52 | } 53 | 54 | footer p { 55 | text-align: center; 56 | } 57 | 58 | @media (max-width: 576px) { 59 | .gallery { 60 | grid-template-columns: 1fr; 61 | } 62 | } 63 | -------------------------------------------------------------------------------- /vertical-masonry-layout-grid/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | CSS Grid | Layouting 8 | 9 | 10 | 11 | 12 | 29 | 30 | 31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 | 39 | 44 | 45 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /vertical-masonry-layout-grid/js/script.js: -------------------------------------------------------------------------------- 1 | const menuToggle = document.querySelector('.menu-toggle'); 2 | const nav = document.querySelector('nav ul'); 3 | 4 | menuToggle.addEventListener('click', function () { 5 | menuToggle.classList.toggle('clicked'); 6 | nav.classList.toggle('slide'); 7 | }); 8 | 9 | const column1 = document.querySelector('.column.column-1'); 10 | const column2 = document.querySelector('.column.column-2'); 11 | const column3 = document.querySelector('.column.column-3'); 12 | function image() { 13 | const figureEl = document.createElement('figure'); 14 | const imageEl = document.createElement('img'); 15 | const width = Math.ceil(Math.random() * 1000) + 600; 16 | const height = Math.ceil(Math.random() * 1000) + 600; 17 | // console.log(`width: ${width}, height: ${height}`); 18 | 19 | imageEl.setAttribute('src', `https://source.unsplash.com/${width}x${height}`); 20 | imageEl.setAttribute('loading', 'lazy'); 21 | imageEl.setAttribute('alt', 'unsplash-image'); 22 | figureEl.appendChild(imageEl); 23 | 24 | return figureEl; 25 | } 26 | 27 | for (let i = 0; i < 100; i++) { 28 | column1.appendChild(image()); 29 | column2.appendChild(image()); 30 | column3.appendChild(image()); 31 | } 32 | -------------------------------------------------------------------------------- /vertical-masonry-layout-grid/readme.md: -------------------------------------------------------------------------------- 1 | ## :zap: This website is just for learning 2 | 3 | ## :pushpin: Credits to www.unsplash.com 4 | 5 | GitHub page: https://yaelahnong.github.io/vertical-masonry-layout-grid/ --------------------------------------------------------------------------------