├── 404.html ├── README.md ├── about.html ├── all-works.html ├── category.html ├── contact.html ├── css └── style.css ├── download.html ├── img └── background.jpg ├── index.html ├── js └── custom-function.js ├── portfolio.html ├── single.html └── videos.html /404.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 404 16 | 17 | 18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 | 51 |
52 |
53 |
54 | 76 |
77 | 78 |
79 | 80 |
81 |
Please search for portfolio, download, tutorials.
82 |
83 |
84 |
85 |
86 |
87 |
88 |

404!

89 |
Page not found.
90 |
91 |

It seems that, The page you are looking for does not exist.

92 |
93 |
94 |
95 |
96 |
97 |
98 |
99 | 112 |
113 |
114 |
115 |
116 |
117 |
118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

Crystal - HTML5 and Bootstrap Website Template

2 | 3 | 4 | Crystal is a multi-pages multipurpose html5 and bootstrap website template best for portfolio OR videos displaying websites. 5 | 6 | It has a portfolio page which has included bootstratp carousel. 7 | 8 | Crystal website template is built on HTML5 CSS3 Bootstrap 5+ and Javascript. 9 | 10 | It has used free stock image, font awesome icons 11 | 12 | Crystal is a beautiful modern soap style HTML5 and Bootstrap website template with clean code to and well-commented sections to edit them easily. 13 | 14 | Crystal has included the different pages 15 | 16 | index/home page 17 | 18 | about page 19 | 20 | contact page 21 | 22 | category page 23 | 24 | download page 25 | 26 | portfolio page (included carousel) 27 | 28 | all works (portfolio) page 29 | 30 | single page 31 | 32 | videos page 33 | 34 | 404 page 35 | -------------------------------------------------------------------------------- /about.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | About 16 | 17 | 18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 | 52 |
53 |
54 |
55 | 77 |
78 |
79 |
80 |
81 |
82 |
83 |
Introduction
84 |

85 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum, veritatis quae quos debitis. Ab assumenda laudantium, delectus eius sed inventore beatae consequuntur ex, exercitationem quod totam facilis reprehenderit dolor, voluptates cumque. Deleniti unde magnam aliquam laudantium vitae nam odio iusto! Sequi maxime impedit atque, unde 86 |

87 |

88 | Lorem ipsum, dolor sit amet consectetur adipisicing, elit. Totam, eveniet nostrum deserunt reprehenderit in voluptates accusamus, obcaecati quam, expedita, odio sequi laborum dolores officia consequatur! 89 |

90 |

91 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor, eligendi eius perferendis sit. Eum, hic. 92 |

93 |

94 | Lorem ipsum dolor sit amet, consectetur adipisicing, elit. Temporibus, necessitatibus recusandae et, doloremque architecto dolorum vitae laborum cupiditate atque commodi. 95 |

96 |
97 |
98 |
99 |
100 |
101 |
102 |
103 |
104 | 117 |
118 |
119 |
120 |
121 |
122 |
123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | -------------------------------------------------------------------------------- /all-works.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | Category 16 | 17 | 18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 | 52 |
53 |
54 |
55 | 77 |
78 |

All Works

79 |
80 |
81 |
82 |
83 |
84 |
85 | Card image cap 86 |
87 |

Some quick example text to build on the card title.

88 |
89 |
90 |
91 |
92 |
93 | Card image cap 94 |
95 |

Some quick example text to build on the card title.

96 |
97 |
98 |
99 |
100 |
101 | Card image cap 102 |
103 |

Some quick example text to build on the card title.

104 |
105 |
106 |
107 |
108 |
109 | Card image cap 110 |
111 |

Some quick example text to build on the card title.

112 |
113 |
114 |
115 |
116 |
117 | Card image cap 118 |
119 |

Some quick example text to build on the card title.

120 |
121 |
122 |
123 |
124 |
125 | Card image cap 126 |
127 |

Some quick example text to build on the card title.

128 |
129 |
130 |
131 |
132 |
133 |
134 |
135 |
136 | 144 |
145 | 158 |
159 |
160 |
161 |
162 |
163 |
164 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | -------------------------------------------------------------------------------- /category.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | Category 16 | 17 | 18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 | 52 |
53 |
54 |
55 | 77 |
78 |

Category

79 |
80 |
81 |
82 |
83 |
84 |
85 | Card image cap 86 |
87 |

Some quick example text to build on the card title.

88 |
89 |
90 |
91 |
92 |
93 | Card image cap 94 |
95 |

Some quick example text to build on the card title.

96 |
97 |
98 |
99 |
100 |
101 | Card image cap 102 |
103 |

Some quick example text to build on the card title.

104 |
105 |
106 |
107 |
108 |
109 | Card image cap 110 |
111 |

Some quick example text to build on the card title.

112 |
113 |
114 |
115 |
116 |
117 | Card image cap 118 |
119 |

Some quick example text to build on the card title.

120 |
121 |
122 |
123 |
124 |
125 | Card image cap 126 |
127 |

Some quick example text to build on the card title.

128 |
129 |
130 |
131 |
132 |
133 |
134 |
135 |
136 | 144 |
145 | 158 |
159 |
160 |
161 |
162 |
163 |
164 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | -------------------------------------------------------------------------------- /contact.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | Contact 16 | 17 | 18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 | 52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
For Web Development
60 | km online works 61 |

kmonlineworks@gmail.com

62 |

63 | 64 | Follow Facebook Page 65 | 66 |

67 |

68 | 69 | Order on Fiverr 70 | 71 |

72 |
73 |
74 |
75 |
76 |
77 |
78 |

Get in Touch

79 |
80 |
81 |
82 | 83 | 84 |
85 |
86 | 87 | 88 | We'll never share your email with anyone else. 89 |
90 |
91 | 92 | 93 |
94 | 95 |
96 |
97 |
98 |
99 |
100 |
101 |
102 |
103 | 116 |
117 |
118 |
119 |
120 |
121 |
122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | -------------------------------------------------------------------------------- /css/style.css: -------------------------------------------------------------------------------- 1 | :root{ 2 | --main-color: rgba(34, 166, 179, 0.2); 3 | --secondary-color: rgba(126, 214, 223, 0.5); 4 | --shadow-color: rgba(48, 51, 107, 1); 5 | --white-lit-color: rgba(255,255,255,0.4); 6 | --white-color: #fff; 7 | } 8 | body{ 9 | background: url(../img/background.jpg) no-repeat; 10 | background-size: cover; 11 | letter-spacing: 0.2px; 12 | } 13 | /* PreLoeader Style */ 14 | .lds-ripple { 15 | display: inline-block; 16 | position: relative; 17 | width: 80px; 18 | height: 80px; 19 | } 20 | .lds-ripple div { 21 | position: absolute; 22 | border: 4px solid #fff; 23 | opacity: 1; 24 | border-radius: 50%; 25 | animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite; 26 | } 27 | .lds-ripple div:nth-child(2) { 28 | animation-delay: -0.5s; 29 | } 30 | @keyframes lds-ripple { 31 | 0% { 32 | top: 36px; 33 | left: 36px; 34 | width: 0; 35 | height: 0; 36 | opacity: 1; 37 | } 38 | 100% { 39 | top: 0px; 40 | left: 0px; 41 | width: 72px; 42 | height: 72px; 43 | opacity: 0; 44 | } 45 | } 46 | #preloader{ 47 | width: 100vw; 48 | height: 100vh; 49 | position: fixed; 50 | background-color: var(--shadow-color); 51 | top: 50%; 52 | left: 50%; 53 | transform: translate(-50%, -50%); 54 | z-index: 2; 55 | display: flex; 56 | justify-content: center; 57 | align-items: center; 58 | } 59 | /* PreLoeader Style End */ 60 | .btn-primary{ 61 | background-color: var(--secondary-color); 62 | border-color: var(--main-color); 63 | } 64 | .btn-primary:hover{ 65 | background-color: var(--main-color); 66 | border-color: var(--secondary-color); 67 | } 68 | .social-links a:hover > .fa-facebook{ 69 | color: #3b5998; 70 | } 71 | .social-links a:hover > .fa-youtube{ 72 | color: #ff0000; 73 | } 74 | .social-links a:hover > .fa-pinterest{ 75 | color: #cb2027; 76 | } 77 | .fa-ellipsis-v{ 78 | position: absolute; 79 | top: 20px; 80 | right: 20px; 81 | visibility: hidden; 82 | } 83 | #wrapper{ 84 | width: 100%; 85 | height: calc(100vh - 40px); 86 | margin: 20px auto; 87 | border-radius: 20px; 88 | background-color: var(--main-color); 89 | backdrop-filter: blur(5px); 90 | --webkit-backdrop-filter: blur(5px); 91 | overflow: hidden; 92 | } 93 | /* SIDEBAE STYLE */ 94 | #wrapper #sidebar{ 95 | color: var(--white-color); 96 | height: calc(100vh - 40px); 97 | padding: 60px 20px; 98 | box-sizing: border-box; 99 | border-radius: 20px 0px 0px 20px; 100 | background-color: var(--secondary-color); 101 | text-align: center; 102 | position: relative; 103 | } 104 | #wrapper #sidebar:before{ 105 | content: ""; 106 | width: 2%; 107 | height: 100%; 108 | right: -2px; 109 | top: 0; 110 | position: absolute; 111 | background-color: var(--shadow-color); 112 | z-index: -1; 113 | filter: blur(8px); 114 | } 115 | #wrapper #sidebar .logo{ 116 | width: 100px; 117 | height: 100px; 118 | margin: 0 auto 50px auto; 119 | padding: 5px; 120 | border: 1px solid var(--secondary-color); 121 | border-radius: 50%; 122 | background-color: var(--white-lit-color); 123 | box-shadow: 0 0 1px 5px var(--shadow-color); 124 | } 125 | #wrapper #sidebar .logo img{ 126 | width: 100%; 127 | height: 100%; 128 | object-fit: cover; 129 | } 130 | #wrapper #sidebar a{ 131 | width: 80%; 132 | font-size: 14px; 133 | color: var(--white-color); 134 | border: 1px solid transparent; 135 | padding: 5px 15px; 136 | display: flex; 137 | justify-content: space-between; 138 | align-items: center; 139 | margin: 0 auto 20px auto; 140 | border-radius: 15px; 141 | background-color: transparent; 142 | box-shadow: 0 0 1px transparent; 143 | text-transform: uppercase; 144 | transition: 0.5s; 145 | position: relative; 146 | } 147 | #wrapper #sidebar a:before{ 148 | content: ""; 149 | width: 8%; 150 | height: 100%; 151 | position: absolute; 152 | top: 0; 153 | left: 0; 154 | background-color: rgba(255,255,255,0); 155 | transform: rotate(15deg); 156 | transition: 0.5s; 157 | border-radius: 15px; 158 | z-index: -1; 159 | filter: blur(3px); 160 | } 161 | #wrapper #sidebar a:hover:before{ 162 | left: 100%; 163 | width: 0; 164 | background-color: var(--white-lit-color); 165 | opacity: 1; 166 | } 167 | #wrapper #sidebar a:hover, #wrapper #sidebar .active{ 168 | border: 1px solid var(--main-color); 169 | background-color: var(--white-lit-color); 170 | box-shadow: 0 0 1px 5px var(--shadow-color); 171 | } 172 | #wrapper #sidebar a i{ 173 | margin-right: 10px; 174 | } 175 | .copyright{ 176 | width: calc(100% - 40px); 177 | position: absolute; 178 | bottom: 0; 179 | } 180 | .copyright p{ 181 | font-size: 14px; 182 | } 183 | /* MAIN AREA STYLE */ 184 | #wrapper #main-area{ 185 | height: calc(100% - 40px); 186 | padding: 10px 20px; 187 | margin: 20px 5px; 188 | box-sizing: border-box; 189 | border-right: 2px solid var(--main-color); 190 | border-top: 2px solid var(--main-color); 191 | border-bottom: 2px solid var(--main-color); 192 | border-radius: 20px; 193 | } 194 | #wrapper #main-area .header-section{ 195 | margin-bottom: 20px; 196 | } 197 | #wrapper #main-area .header-section.single{ 198 | margin-bottom: 20px; 199 | } 200 | #wrapper #main-area .header-section a, 201 | #wrapper #main-area .header-section .dropdown-menu a{ 202 | font-size: 14px; 203 | color: var(--white-color); 204 | border-bottom: 1px solid transparent; 205 | padding: 5px 15px; 206 | margin-top: 15px; 207 | margin-bottom: 15px; 208 | border-radius: 15px; 209 | text-transform: uppercase; 210 | transition: 0.5s; 211 | } 212 | #wrapper #main-area .header-section a:hover, 213 | #wrapper #main-area .header-section .dropdown-menu a.dropdown-item:hover{ 214 | border-bottom: 1px solid var(--main-color); 215 | background-color: transparent; 216 | } 217 | #wrapper #main-area .header-section .dropdown-menu{ 218 | background-color: var(--secondary-color); 219 | backdrop-filter: blur(2px); 220 | } 221 | #wrapper #main-area .header-section .search-box{ 222 | padding: 0; 223 | box-shadow: 0 0 15px 5px var(--shadow-color); 224 | } 225 | #wrapper #main-area input, 226 | #wrapper #main-area textarea{ 227 | color: var(--white-color); 228 | background: transparent; 229 | border: 1px solid var(--main-color); 230 | } 231 | #wrapper #main-area input::placeholder{ 232 | color: var(--secondary-color); 233 | } 234 | #wrapper #main-area .header-section #searchPrepend{ 235 | color: var(--white-color); 236 | background-color: var(--secondary-color); 237 | border-radius: 0 .25rem .25rem 0; 238 | border: 0; 239 | padding: 10px; 240 | } 241 | #wrapper #main-area .content-section .section-heading{ 242 | display: flex; 243 | justify-content: space-between; 244 | align-items: center; 245 | margin-bottom: 40px; 246 | } 247 | #wrapper #main-area .content-section .section-heading.single{ 248 | margin-bottom: 20px; 249 | } 250 | #wrapper #main-area .content-section .section-heading a{ 251 | color: var(--white-color); 252 | font-size: 14px; 253 | } 254 | #wrapper #main-area .content-section.single, 255 | #wrapper #main-area .content-section.contact{ 256 | margin-top: 20px; 257 | } 258 | #wrapper #main-area .content-section.single .related-video{ 259 | display: flex; 260 | justify-content: space-between; 261 | align-items: center; 262 | position: relative; 263 | margin: 15px auto; 264 | } 265 | #wrapper #main-area .content-section.single .related-video .vid-date{ 266 | color: var(--white-lit-color); 267 | font-size: 12px; 268 | position: absolute; 269 | left: 90px; 270 | top: 30px; 271 | } 272 | #wrapper #main-area .content-section.single .card-title, 273 | #wrapper #main-area .content-section.about .card-title, 274 | #wrapper #main-area .content-section.contact .card-title{ 275 | color: var(--white-color); 276 | } 277 | #wrapper #main-area .content-section.single .card-text{ 278 | margin-left: 10px; 279 | } 280 | #wrapper #main-area .content-section .card-body{ 281 | padding: 8px 15px; 282 | } 283 | #wrapper #main-area .content-section.single .section-description, 284 | #wrapper #main-area .content-section.contact .section-description{ 285 | margin-top: 20px; 286 | } 287 | #wrapper #main-area .content-section .card{ 288 | background-color: transparent; 289 | box-shadow: 0 0 10px 3px var(--shadow-color); 290 | cursor: pointer; 291 | transition: 0.5s; 292 | margin-bottom: 10px; 293 | } 294 | #wrapper #main-area .content-section .card:hover{ 295 | box-shadow: 0 0 15px 5px var(--shadow-color); 296 | } 297 | #wrapper #main-area .content-section .card:before{ 298 | content: ""; 299 | width: 10%; 300 | height: 100%; 301 | position: absolute; 302 | top: 0; 303 | left: 10px; 304 | background-color: rgba(255,255,255,0); 305 | transition: 0.5s; 306 | border-radius: 10px; 307 | filter: blur(5px); 308 | transform: rotate(15deg); 309 | } 310 | #wrapper #main-area .content-section .card:hover:before{ 311 | left: 90%; 312 | width: 0; 313 | background-color: var(--white-lit-color); 314 | opacity: 1; 315 | } 316 | #wrapper #main-area .content-section h2{ 317 | font-size: 24px; 318 | color: var(--white-color); 319 | } 320 | #wrapper #main-area .content-section p{ 321 | font-size: 14px; 322 | color: var(--white-color); 323 | } 324 | #wrapper #main-area .content-section .jumbotron{ 325 | background-color: transparent; 326 | box-shadow: 0 0 5px 2px var(--shadow-color); 327 | color: var(--white-lit-color); 328 | } 329 | #wrapper #main-area .footer{ 330 | width: calc(100% - 70px); 331 | position: absolute; 332 | bottom: 30px; 333 | } 334 | #wrapper #main-area .footer .social-links{ 335 | width: 100%; 336 | margin: 0 auto; 337 | } 338 | #wrapper #main-area .footer .social-links a{ 339 | font-size: 14px; 340 | color: var(--white-color); 341 | margin-right: 20px; 342 | text-decoration: none; 343 | } 344 | #wrapper #main-area .footer .pagination{ 345 | float: right; 346 | margin-right: 10px; 347 | } 348 | #wrapper #main-area .footer .pagination ul{ 349 | display: flex; 350 | justify-content: space-between; 351 | align-items: center; 352 | margin: unset; 353 | } 354 | #wrapper #main-area .footer .pagination ul li{ 355 | margin-right: 5px; 356 | list-style: none; 357 | } 358 | #wrapper #main-area .footer .pagination ul li a{ 359 | font-size: 14px; 360 | color: var(--white-color); 361 | border-radius: 3px; 362 | border: 1px solid var(--secondary-color); 363 | padding: 2px 8px; 364 | text-decoration: none; 365 | transition: 0.5s; 366 | } 367 | #wrapper #main-area .footer .pagination ul li a:hover, 368 | #wrapper #main-area .footer .pagination .active{ 369 | border: 1px solid transparent; 370 | background-color: var(--main-color); 371 | } 372 | #wrapper #main-area .header-section.category{ 373 | display: flex; 374 | justify-content: space-between; 375 | align-items: center; 376 | margin-bottom: unset; 377 | } 378 | #wrapper #main-area .header-section.category .category-heading h2{ 379 | font-size: 24px; 380 | color: var(--white-color); 381 | } 382 | #wrapper #main-area .content-section.contact img{ 383 | width: 80px; 384 | height: 80px; 385 | object-fit: cover; 386 | border-radius: 50%; 387 | border: 1px solid var(--white-lit-color); 388 | margin-bottom: 20px; 389 | padding: 5px; 390 | } 391 | #wrapper #main-area .content-section.contact .card{ 392 | padding: 10px 20px; 393 | } 394 | #wrapper #main-area .content-section.contact .card form{ 395 | margin-bottom: 20px; 396 | margin-top: 15px; 397 | color: var(--white-lit-color); 398 | } 399 | #wrapper #main-area .content-section .carousel .carousel-indicators{ 400 | bottom: -50px; 401 | } 402 | #wrapper #main-area .content-section .carousel h5{ 403 | font-size: 14px; 404 | color: var(--white-color); 405 | } 406 | @media only screen and (min-width: 320px) and (max-width: 520px){ 407 | #wrapper{ 408 | width: 100%; 409 | height: auto; 410 | margin:auto; 411 | overflow: auto; 412 | border-radius: unset; 413 | } 414 | #wrapper #sidebar{ 415 | width: 100%; 416 | height: 140px; 417 | padding: 20px; 418 | overflow: hidden; 419 | transition: 0.5s; 420 | border-radius: 0px 0px 20px 20px; 421 | } 422 | .menu-height{ 423 | height: auto !important; 424 | transition: height 0.5s; 425 | } 426 | #wrapper #sidebar .logo{ 427 | margin-bottom: 30px; 428 | } 429 | .nav{ 430 | display: flex; 431 | justify-content: space-between; 432 | align-items: center; 433 | } 434 | #wrapper #sidebar a { 435 | width: unset !important; 436 | margin-bottom: 10px; 437 | } 438 | #wrapper #sidebar a:hover, 439 | #wrapper #sidebar .active{ 440 | border: unset !important; 441 | } 442 | .copyright{ 443 | position: unset; 444 | width: unset; 445 | } 446 | .copyright p{ 447 | margin-top: 15px; 448 | } 449 | .fa-ellipsis-v{ 450 | visibility: visible; 451 | } 452 | #wrapper #main-area{ 453 | border: 1px solid var(--main-color); 454 | } 455 | #wrapper #main-area .header-section{ 456 | margin-bottom: 20px; 457 | } 458 | #wrapper #main-area .header-section a, 459 | #wrapper #main-area .header-section .dropdown-menu a{ 460 | font-size: 12px; 461 | margin: 5px; 462 | } 463 | #wrapper #main-area .footer { 464 | position: unset; 465 | margin-top: 10px; 466 | width: unset; 467 | text-align: center; 468 | } 469 | #wrapper #main-area .footer .social-links{ 470 | display: flex; 471 | flex-direction: column; 472 | justify-content: center; 473 | } 474 | #wrapper #main-area .footer .social-links a{ 475 | font-size: 12px; 476 | margin-bottom: 8px; 477 | margin-right: unset; 478 | } 479 | #wrapper #main-area .footer .pagination{ 480 | float: unset; 481 | margin-right: unset; 482 | margin-top: 10px; 483 | margin-bottom: 20px; 484 | } 485 | #wrapper #main-area .footer .pagination ul{ 486 | padding: unset; 487 | margin: 0 auto; 488 | } 489 | #wrapper #main-area .footer .pagination ul li a { 490 | font-size: 12px; 491 | } 492 | #wrapper #main-area .header-section.category .category-heading h2{ 493 | font-size: 18px; 494 | text-align: center; 495 | margin-top: 20px; 496 | margin-bottom: 20px; 497 | } 498 | .carousel{ 499 | margin-bottom: 50px; 500 | } 501 | #wrapper #main-area .content-section.single .section-description{ 502 | text-align: justify; 503 | } 504 | #wrapper #main-area .content-section.contact .card-body{ 505 | padding: 0.75rem; 506 | } 507 | #wrapper #main-area .content-section.contact .card-body p{ 508 | font-size: 12px; 509 | } 510 | } 511 | @media only screen and (min-width: 768px) and (max-width: 920px){ 512 | #wrapper #sidebar a { 513 | font-size: 12px; 514 | } 515 | #wrapper #main-area{ 516 | padding: 10px; 517 | } 518 | #wrapper #main-area .header-section{ 519 | margin-bottom: 30px; 520 | } 521 | #wrapper #main-area .header-section a, 522 | #wrapper #main-area .header-section .dropdown-menu a{ 523 | font-size: 12px; 524 | } 525 | #wrapper #main-area .footer { 526 | margin-top: 10px; 527 | text-align: center; 528 | } 529 | #wrapper #main-area .footer .social-links a{ 530 | font-size: 12px; 531 | } 532 | #wrapper #main-area .header-section.category .category-heading h2{ 533 | font-size: 18px; 534 | margin-bottom: 20px; 535 | } 536 | #wrapper #main-area .content-section .section-heading{ 537 | margin-bottom: 20px; 538 | } 539 | #wrapper #main-area .content-section .card-body{ 540 | padding: 0.75rem; 541 | } 542 | #wrapper #main-area .content-section .card-body p{ 543 | font-size: 12px; 544 | } 545 | #wrapper #main-area .footer .pagination{ 546 | float: unset; 547 | margin-right: unset; 548 | margin-top: 15px; 549 | margin-bottom: 15px; 550 | } 551 | #wrapper #main-area .footer .pagination ul{ 552 | padding: unset; 553 | margin: 0 auto; 554 | } 555 | #wrapper #main-area .footer .pagination ul li a { 556 | font-size: 12px; 557 | } 558 | #wrapper #main-area .content-section.contact .card{ 559 | padding: 8px; 560 | } 561 | #wrapper #main-area .content-section.contact .card-title{ 562 | font-size: 16px; 563 | } 564 | #wrapper #main-area .content-section.contact .section-description{ 565 | display: none; 566 | } 567 | #wrapper #main-area .content-section.single .related-video{ 568 | display: block; 569 | text-align: center; 570 | margin: 5px auto; 571 | } 572 | #wrapper #main-area .content-section.single .section-description p{ 573 | margin-bottom: 10px; 574 | } 575 | } 576 | @media only screen and (max-width: 1024px){ 577 | #wrapper #sidebar a { 578 | width: unset; 579 | font-size: 12px; 580 | } 581 | #wrapper #main-area{ 582 | padding: 10px; 583 | } 584 | #wrapper #main-area .header-section{ 585 | margin-bottom: 30px; 586 | } 587 | #wrapper #main-area .header-section a, 588 | #wrapper #main-area .header-section .dropdown-menu a{ 589 | font-size: 12px; 590 | } 591 | #wrapper #main-area .footer { 592 | margin-top: 10px; 593 | text-align: center; 594 | } 595 | #wrapper #main-area .footer .social-links a{ 596 | font-size: 12px; 597 | } 598 | #wrapper #main-area .header-section.category .category-heading h2{ 599 | font-size: 18px; 600 | } 601 | #wrapper #main-area .content-section .section-heading{ 602 | margin-bottom: 20px; 603 | } 604 | #wrapper #main-area .content-section .card-body{ 605 | padding: 0.75rem; 606 | } 607 | #wrapper #main-area .content-section .card-body p{ 608 | font-size: 12px; 609 | } 610 | #wrapper #main-area .footer .social-links a{ 611 | font-size: 10px; 612 | } 613 | 614 | #wrapper #main-area .footer .pagination ul li a { 615 | font-size: 12px; 616 | } 617 | #wrapper #main-area .content-section.contact .card{ 618 | padding: 15px; 619 | } 620 | #wrapper #main-area .content-section.contact .card-title{ 621 | font-size: 16px; 622 | } 623 | #wrapper #main-area .content-section.contact .section-description{ 624 | display: none; 625 | margin-top: 10px; 626 | } 627 | #wrapper #main-area .content-section.single .section-description{ 628 | margin-top: 5px; 629 | } 630 | } -------------------------------------------------------------------------------- /download.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | Download 16 | 17 | 18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 | 52 |
53 |
54 |
55 | 77 |
78 |

Downloads

79 |
80 |
81 |
82 |
83 |
84 |
85 | Card image cap 86 |
87 |

Some quick example text to build on the card title.

88 |
89 |
90 |
91 |
92 |
93 | Card image cap 94 |
95 |

Some quick example text to build on the card title.

96 |
97 |
98 |
99 |
100 |
101 | Card image cap 102 |
103 |

Some quick example text to build on the card title.

104 |
105 |
106 |
107 |
108 |
109 | Card image cap 110 |
111 |

Some quick example text to build on the card title.

112 |
113 |
114 |
115 |
116 |
117 | Card image cap 118 |
119 |

Some quick example text to build on the card title.

120 |
121 |
122 |
123 |
124 |
125 | Card image cap 126 |
127 |

Some quick example text to build on the card title.

128 |
129 |
130 |
131 |
132 |
133 |
134 |
135 |
136 | 144 |
145 | 158 |
159 |
160 |
161 |
162 |
163 |
164 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | -------------------------------------------------------------------------------- /img/background.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kmonlineworks/crystal-html-template/71f792694728e1aad5243bfd698589cd5174b7fe/img/background.jpg -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | Home 16 | 17 | 18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 | 52 |
53 |
54 |
55 | 77 |
78 | 79 |
80 | 81 |
82 |
Please choose a unique and valid username.
83 |
84 |
85 |
86 |
87 |

Latest Videos

88 | All 89 |
90 |
91 |
92 |
93 | 94 | Card image cap 95 | 96 |
97 |

Some quick example text to build on the card title.

98 |
99 |
100 |
101 |
102 |
103 | 104 | Card image cap 105 | 106 |
107 |

Some quick example text to build on the card title.

108 |
109 |
110 |
111 |
112 |
113 | 114 | Card image cap 115 | 116 |
117 |

Some quick example text to build on the card title.

118 |
119 |
120 |
121 |
122 |
123 |
124 |
125 |
126 | 139 |
140 |
141 |
142 |
143 |
144 |
145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | -------------------------------------------------------------------------------- /js/custom-function.js: -------------------------------------------------------------------------------- 1 | $(document).ready(function(){ 2 | 3 | $(".fa-ellipsis-v").click(function(){ 4 | 5 | $("#wrapper #sidebar").toggleClass("menu-height"); 6 | }); 7 | }); 8 | function preloader(){ 9 | 10 | $(window).on("load", function(){ 11 | 12 | $("#preloader").css({ 13 | "visibility":"hidden", 14 | "opacity":"0", 15 | "transition":"0.5s" 16 | }); 17 | }); 18 | } -------------------------------------------------------------------------------- /portfolio.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | Portfolio 16 | 17 | 18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 | 52 |
53 |
54 |
55 | 77 |
78 | 79 |
80 | 81 |
82 |
Please search for portfolio, download, tutorials.
83 |
84 |
85 |
86 |
87 |

Portfolio

88 | All Works 89 |
90 | 187 |
188 |
189 |
190 |
191 | 204 |
205 |
206 |
207 |
208 |
209 |
210 | 211 | 212 | 213 | 214 | 215 | 216 | 217 | -------------------------------------------------------------------------------- /single.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | Single 16 | 17 | 18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 | 52 |
53 |
54 |
55 |
56 |
57 |
58 | Card image cap 59 |
60 |
61 |
62 |
63 |

Video Title

64 |

65 | Lorem ipsum, dolor sit amet consectetur adipisicing, elit. Architecto illo pariatur, quas dignissimos, maiores nostrum quo ea voluptas deserunt libero rerum eveniet, impedit. Dignissimos tempora suscipit laboriosam numquam, error non pariatur necessitatibus magni accusantium tenetur fugiat et molestias architecto nobis, adipisci, reiciendis dolores repellat! Ullam, autem, dolor. Aspernatur, minus obcaecati. 66 |

67 |
68 |
69 |
70 |
71 |
72 |
Related Videos
73 |
74 | 75 |

76 | With supporting text below as a natural lead-in to additional cont. 77 |

78 | December 16, 2021 79 |
80 |
81 | 82 |

83 | With supporting text below as a natural lead-in to additional cont. 84 |

85 | December 16, 2021 86 |
87 |
88 | 89 |

90 | With supporting text below as a natural lead-in to additional cont. 91 |

92 | December 16, 2021 93 |
94 |
95 |
96 |
97 |
98 |
99 |
100 |
101 |
102 | 115 |
116 |
117 |
118 |
119 |
120 |
121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | -------------------------------------------------------------------------------- /videos.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | Videos 16 | 17 | 18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 | 52 |
53 |
54 |
55 | 77 |
78 |

All Videos

79 |
80 |
81 |
82 |
83 |
84 |
85 | Card image cap 86 |
87 |

Some quick example text to build on the card title.

88 |
89 |
90 |
91 |
92 |
93 | Card image cap 94 |
95 |

Some quick example text to build on the card title.

96 |
97 |
98 |
99 |
100 |
101 | Card image cap 102 |
103 |

Some quick example text to build on the card title.

104 |
105 |
106 |
107 |
108 |
109 | Card image cap 110 |
111 |

Some quick example text to build on the card title.

112 |
113 |
114 |
115 |
116 |
117 | Card image cap 118 |
119 |

Some quick example text to build on the card title.

120 |
121 |
122 |
123 |
124 |
125 | Card image cap 126 |
127 |

Some quick example text to build on the card title.

128 |
129 |
130 |
131 |
132 |
133 |
134 |
135 |
136 | 144 |
145 | 158 |
159 |
160 |
161 |
162 |
163 |
164 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | --------------------------------------------------------------------------------