source: resources/css/style.css@ c433da6

Last change on this file since c433da6 was 0924b6c, checked in by Özkan İliyaz <iliyaz_96@…>, 4 years ago

initial commit
  • Property mode set to 100644
File size: 11.9 KB
Line 
1/*=========================
2/ Global => Defaults
3/=========================*/
4@import url('https://fonts.googleapis.com/css?family=Rubik:400,500,700,900');
5html, body {
6 background: white !important;
7 font-family: 'Rubik', sans-serif !important;
8}
9
10a {text-decoration: none !important;}
11a:hover {text-decoration: none !important;}
12
13.searchResultList {
14 list-style: none;
15}
16.searchResultList li a {
17 font-size: 17px
18}
19
20.default_sectionTitle {
21 width: 100%;
22 margin: 2% 0;
23 position: relative;
24}
25
26.default_sectionTitle:before {
27 position: absolute;
28 content: "";
29 width: 100%;
30 height: 2px;
31 top: 50%;
32 z-index: 1;
33}
34.default_sectionTitle span,
35.default_sectionTitle a {
36 height: 35px;
37 background: white !important;
38 padding-right: 2%;
39 display: inline-block;
40 position: relative;
41 line-height: 35px;
42 text-align: center;
43 font-size: 22px;
44 font-weight: bold;
45 z-index: 99;
46}
47.default_sectionTitle a {
48 float: right !important;
49 padding-right: 0;
50 padding-left: 2%;
51}
52
53.default_category_header {
54 text-align: center;
55}
56
57.post-item .card .card-body {
58 height: 200px !important;
59}
60
61.card-img-top-wrapper {
62 height: 200px !important;
63}
64.card-img-top-wrapper .card-img-top {
65 width: 100%;
66 height: 100%;
67 object-fit: cover;
68}
69
70.pagination {justify-content: center;}
71
72.tooltip.right {margin-left: 10px !important;}
73
74.post-image {
75 height: 500px;
76 position: relative;
77}
78.post-image img {
79 width: 100%;
80 height: 100%;
81 object-fit: cover;
82}
83.post-image:before {
84 position: absolute;
85 content: "";
86 width: 100%;
87 height: 100%;
88 background: rgba(0, 0, 0, .2);
89 top: 0;
90 left: 0;
91}
92.post-info {
93 position: absolute;
94 bottom: 15%;
95 left: 5%;
96}
97.post-title {
98 color: white;
99 font-size: 35px;
100 font-weight: bold;
101 text-shadow: 0 0 5px black;
102}
103
104.author-avatar {
105 width: 50px !important;
106 height: 50px !important;
107 object-fit: cover;
108 display: inline-block;
109 border-radius: 100%;
110 border: 2px #252525 solid;
111}
112.name-avatar {
113 width: 50px;
114 height: 50px;
115 line-height: 50px;
116 border-radius: 100%;
117 display: inline-block;
118 text-align: center;
119 background: #ced4da;
120 color: #868e96;
121 font-weight: 600;
122 font-size: 20px;
123 position: relative;
124 top: 5px;
125 border: 2px #252525 solid;
126}
127.author-name {
128 display: inline-block;
129 position: relative;
130 top: 15px;
131 left: 10px;
132 color: white;
133 text-shadow: 0 0 5px black;
134}
135
136.post-content {
137 width: 60%;
138 margin: 0 auto;
139 text-align: justify;
140 font-size: 19px;
141 padding-top: 50px;
142}
143.post-tags {
144 width: 60%;
145 margin: 25px auto;
146}
147.post-tags span {
148 font-size: 0.75rem;
149 font-weight: 400;
150 background-color: #e9ecef;
151 border-radius: 3px;
152 padding: 0 .5rem;
153 line-height: 2em;
154 display: -ms-inline-flexbox;
155 display: inline-flex;
156}
157.post-tags span a {color: #6e7687;}
158.post-tags span:hover a {color: black;}
159
160.post-reaction i {
161 font-size: 20px;
162 cursor: pointer;
163}
164
165.post-comments,
166.post-add-comment {
167 width: 60%;
168 margin: 0 auto;
169}
170
171.comment-box {
172 width: 100%;
173 background: #efefef;
174 position: relative;
175 word-wrap: break-word;
176 box-shadow: 0 0 1px rgba(0, 0, 0, .5);
177 border-left: 2px #83f1c5 solid;
178}
179
180.comment-box:not(:first-of-type) {
181 margin-top: 15px;
182}
183
184.comment-box div:first-child span {
185 position: relative;
186 top: 50%;
187 transform: translate(0, -50%);
188}
189
190.comment-box .comment-owner {
191 font-size: 12px;
192 margin-top: 20px;
193}
194.comment-box div:last-child {
195
196}
197
198.card-profile .card-header {
199 height: 9rem;
200 background-size: cover;
201}
202
203.card-profile-img {
204 width: 100px;
205 height: 100px;
206 object-fit: cover;
207 max-width: 6rem;
208 margin-top: -5rem;
209 margin-bottom: 1rem;
210 border: 3px solid #fff;
211 border-radius: 100%;
212 box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
213}
214.card-profile-avatar {
215 margin-top: -5rem;
216 margin-bottom: 1rem;
217 border: 1px solid #fff;
218 box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
219}
220.avatar {
221 width: 2rem;
222 height: 2rem;
223 line-height: 2rem;
224 border-radius: 50%;
225 display: inline-block;
226 background: #ced4da no-repeat center/cover;
227 position: relative;
228 text-align: center;
229 color: #868e96;
230 font-weight: 600;
231 vertical-align: bottom;
232 font-size: .875rem;
233}
234.avatar-xxl {
235 width: 5rem;
236 height: 5rem;
237 line-height: 5rem;
238 font-size: 2rem;
239}
240.card-aside {
241 -ms-flex-direction: row;
242 flex-direction: row;
243}
244
245.card-aside-column {
246 min-width: 5rem;
247 width: 30%;
248 border-top-left-radius: 3px;
249 border-bottom-left-radius: 3px;
250 background: no-repeat center/cover;
251}
252.profile-card:not(:first-of-type) {
253 margin-top: 10px;
254}
255.card-profile .list-inline-item a {
256 width: 32px;
257 height: 32px;
258 background: #efefef;
259 line-height: 32px;
260 border-radius: 100%;
261 display: inline-block;
262}
263.card-profile .list-inline-item a:hover i.fa {
264 color: #4f5157;
265}
266.card-profile i.fa {
267 color: #9aa0ac;
268}
269/*=========================
270/ Home => Logo
271/=========================*/
272.logo {}
273.logo img {width: 100px;}
274
275/*=========================
276/ Global => Main Content Wrapper
277/=========================*/
278.mainContent {
279 width: 70%;
280 margin: 0 auto;
281}
282
283/*=========================
284/ Home => Welcome Slider
285/=========================*/
286.welcomeSlider {
287 width: 100%;
288 height: 500px !important;
289}
290.slide-img {
291 width: 100%;
292 height: 100%;
293 object-fit: cover;
294}
295.slide-title {
296 width: 100%;
297 background: linear-gradient(0deg, rgba(2,0,36,1) 0%, rgba(40,43,51,1) 50%, rgba(40,43,51,1) 50%);
298 position: absolute;
299 bottom: 5%;
300 left: 0;
301 text-align: left;
302}
303.slide-title p {
304 font-size: 25px;
305 font-weight: bold;
306 color: white;
307 margin-bottom: 8%;
308 margin-left: 5%;
309}
310
311.slider-post-wrapper {
312 width: 100%;
313 height: 100%;
314}
315
316.postCategory {
317 position: absolute;
318 top: 5%;
319 left: 5%;
320 color: white;
321 font-family: 'Open Sans', sans-serif;
322 font-size: 16px;
323 font-weight: bold;
324 padding: 10px 15px;
325 border-radius: 4px;
326}
327
328.slider-post-wrapper:hover .postOverlay {padding: 70px 0;}
329.slider-post-wrapper:hover .postOverlay span {
330 padding-top: 25px;
331 visibility: visible;
332 opacity: 1;
333 filter: alpha(opacity=100);
334}
335.slider-post-wrapper img {
336 width: 100%;
337 height: 100%;
338 object-fit: cover;
339}
340
341.postOverlay {
342 width: 100%;
343 padding: 40px 0;
344 background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(0, 0, 0, .7) 90%);
345 position: absolute;
346 bottom: 0;
347 transition: .2s;
348 font-family: 'Open Sans', sans-serif;
349}
350.postOverlay p {
351 /* background: blue; */
352 color: white;
353 font-size: 25px;
354 font-weight: bold;
355 position: relative;
356 padding-right: 25px;
357 left: 5%;
358}
359.postOverlay p a {color: white;}
360.postOverlay span {
361 display: block;
362 visibility: hidden;
363 opacity: 0;
364 filter: alpha(opacity=0);
365 color: white;
366 font-family: 'Open Sans', sans-serif;
367 font-size: 14px;
368 font-weight: bold;
369 transition: .2s;
370 position: relative;
371 left: 5%
372}
373.postOverlay span i {
374 font-weight: bold;
375 margin-bottom: 15px;
376}
377
378.welcomeSlider .swiper-pagination {
379 margin: 0 !important;
380 padding: 0 !important;
381 bottom: 0 !important;
382}
383.welcomeSlider .swiper-pagination span {
384 /* width: 10% !important; */
385 width: 20% !important;
386 height: 27px !important;
387 text-align: center;
388 line-height: 25px !important;
389 font-size: 14px;
390 font-weight: bold;
391 color: rgba(255, 255, 255, .8);
392 opacity: 1;
393 background: rgba(0, 0, 0, .2);
394 border-radius: 0px !important;
395 margin: 0 !important;
396}
397.welcomeSlider .swiper-pagination-bullet:not(.swiper-pagination-bullet-active):hover {
398 background: rgba(0, 0, 0, .4) !important;
399}
400.welcomeSlider .swiper-pagination-bullet-active {
401 color: #fff !important;
402 background: #007aff !important;
403}
404
405/*=========================
406/ About Us
407/=========================*/
408.aboutUsHeader {position: relative;}
409.aboutUsHeader:before,
410.aboutUsHeader:after {
411 position: absolute;
412 content: "";
413 width: 15px;
414 height: 1px;
415 background: white;
416}
417.aboutUsHeader:before {
418 bottom: -10px;
419 left: 49%;
420 transform: translate(-49%, 0);
421}
422.aboutUsHeader:after {
423 bottom: -14px;
424 left: 50%;
425 transform: translate(-50%, 0);
426}
427
428.aboutWelcome {
429 height: 100vh;
430 position: relative;
431 overflow: hidden;
432}
433
434.fullscreenBg {
435 width: 100%;
436 height: 100%;
437 background: blue;
438 position: relative;
439}
440
441.fullscreenBg:after {
442 position: absolute;
443 content: "";
444 width: 100%;
445 height: 100%;
446 background-image: linear-gradient(-225deg, rgba(44, 216, 213, .2) 0%, rgba(107, 141, 214, .8) 48%, rgba(142, 55, 215, 1) 100%);
447 top: 0;
448 left: 0;
449}
450
451.fullscreenBg video {
452 width: 100%;
453 height: 100%;
454 position: absolute;
455 top: 0;
456 left: 0;
457 object-fit: cover;
458}
459
460.aboutWelcomeContent {
461 position: absolute;
462 top: 35%;
463 left: 10%;
464 transform: translate(-10%, -35%);
465 z-index: 100;
466}
467
468.scrollArrow {
469 display: inline;
470 position: absolute;
471 background: white;
472 padding: 15px 20px;
473 font-size: 20px;
474 color: #aaa;
475 border-radius: 100%;
476 box-shadow: 0 0 5px #ddd;
477 cursor: pointer;
478}
479.scrollArrow:hover {color: #aaa !important;}
480.scrollDownArrow {
481 left: 50%;
482 bottom: 15%;
483 transform: translate(-50%, 0);
484 animation: aboutUsScrollDownBtnAnim .7s linear infinite;
485}
486.scrollUpArrow {
487 position: fixed;
488 right: 5%;
489 bottom: 5%;
490 z-index: 1000;
491}
492.scrollUpArrow i {transform: rotate(180deg);}
493
494.aboutInfo {
495 position: relative;
496 background: #232344;
497}
498.aboutInfo:after {
499 /* position: absolute;
500 content: "";
501 width: 332px;
502 height: 250px;
503 background: url(../images/rr.png);
504 background-size: cover;
505 top: 50%;
506 left: -5%;
507 transform: translate(0, -50%) rotate(60deg);
508 z-index: 1; */
509}
510.bottomBefore:before {
511 position: absolute;
512 content: "";
513 width: 100%;
514 height: 55px;
515 background: #232344;
516 bottom: -35px;
517 left: 0;
518 transform: skewY(1.5deg);
519}
520.aboutInfo:before {
521 position: absolute;
522 content: "";
523 width: 100%;
524 height: 55px;
525 background: #232344;
526 top: -35px;
527 left: 0;
528 transform: skewY(-1.5deg);
529}
530.aboutInfo p {
531 font-size: 17.5px;
532}
533
534.teamMemberRounded {
535 width: 250px;
536 height: 250px;
537 background: white;
538 border: 10px #232344 solid;
539 border-radius: 100%;
540 overflow: hidden;
541 position: relative;
542 left: 50%;
543 transform: translate(-50%, 0);
544}
545.teamMemberRounded:hover .teamMemberOverlay {
546 opacity: 1;
547 filter: alpha(opacity=100);
548 visibility: visible;
549}
550.teamMemberRounded img {
551 width: 190px;
552 position: absolute;
553 bottom: 0;
554 left: 50%;
555 transform: translate(-50%, 0);
556}
557.teamMemberOverlay {
558 width: 100%;
559 height: 100%;
560 background: rgba(0, 116, 225, .8);
561 position: absolute;
562 top: 0;
563 left: 0;
564 opacity: 0;
565 filter: alpha(opacity=0);
566 visibility: hidden;
567 transition: .2s;
568}
569.teamMemberOverlay p {
570 font-size: 16.5px;
571 position: relative;
572 top: 50%;
573 transform: translate(0, -50%);
574}
575
576.aboutContact {
577 background: #2d283e;
578 overflow: hidden;
579}
580
581.aboutContact form .col-md-4 * {font-size: 15px;}
582/*=========================
583/ Global => Footer
584/=========================*/
585.footerContainer {
586 margin-top: 65px;
587 overflow: hidden !important;
588 padding-bottom: 25px;
589}
590
591.verticalCentering {
592 /* background: lightblue; */
593 position: relative;
594 top: 50%;
595 transform: translate(0, -50%);
596}
597
598.footerLogo {display: block;}
599
600.footerNav {
601 width: 151px;
602 margin: 0 auto;
603}
604.footerNav a {
605 font-size: 16px;
606 font-weight: 700;
607 color: white;
608 padding: 5px 0;
609}
610
611.recentPostsList li {list-style: none;}
612
613.footerSocial a {
614 font-size: 19px;
615 color: white;
616 margin-top: 10px;
617}
618.footerSocial a:not(:first-of-type) {
619 margin-left: 20px;
620}
621
622.subscribe {
623 padding-top: 55px;
624}
625
626.copyrights {padding-top: 35px;}
627.copyrights p {
628 font-size: 15px;
629 color: white;
630 padding-top: 25px;
631 border-top: 1px rgba(255, 255, 255, .2) solid;
632}
633
634/*=========================
635/ Keyframes
636/=========================*/
637@keyframes aboutUsScrollDownBtnAnim
638{
639 0% {box-shadow: 0 0 5px 0 #ddd;}
640 40% {box-shadow: 0 0 5px 5px #ddd;}
641 50% {box-shadow: 0 0 5px 10px #ddd;}
642 60% {box-shadow: 0 0 5px 5px #ddd;}
643 100% {box-shadow: 0 0 5px 0 #ddd;}
644}
645
646/*=========================
647/ Media Queries
648/=========================*/
649
650@media only screen and (max-width: 992px) {
651
652 .mainContent {width: 90% !important;}
653
654 .aboutWelcomeContent {
655 top: 35%;
656 left: 50%;
657 transform: translate(-50%, -35%);
658 text-align: center !important;
659 }
660 .aboutWelcomeContent img {width: 150px !important;}
661 .aboutWelcomeContent span {font-size: 35px !important;}
662
663 .scrollArrow {
664 padding: 10px 15px;
665 font-size: 16.5px;
666 }
667
668 .aboutInfoContent {
669 width: 100% !important;
670 text-align: left !important;
671 }
672
673 .teamMemberRounded {
674 width: 200px;
675 height: 200px;
676 }
677 .teamMemberRounded img {width: 140px;}
678
679 .aboutContactContent {width: 90% !important;}
680}
Note: See TracBrowser for help on using the repository browser.