Difference between revisions of "Template:KUAS Korea/head"
Garten Choi (Talk | contribs) |
Garten Choi (Talk | contribs) |
||
| Line 15: | Line 15: | ||
<!-- OUR CSS --> | <!-- OUR CSS --> | ||
<style> | <style> | ||
| − | + | @charset "utf-8"; | |
::-webkit-scrollbar-track { | ::-webkit-scrollbar-track { | ||
-webkit-box-shadow: inset 0 0 6px rgba(40,39,44, 0.1); | -webkit-box-shadow: inset 0 0 6px rgba(40,39,44, 0.1); | ||
| Line 49: | Line 49: | ||
#content{width:100%;padding:0;color:#28272c;margin:0;background-color:#f6f8f1;} | #content{width:100%;padding:0;color:#28272c;margin:0;background-color:#f6f8f1;} | ||
#HQ_page{margin:-30px 0 -40px;} | #HQ_page{margin:-30px 0 -40px;} | ||
| − | + | a { | |
color: #a54040; | color: #a54040; | ||
transition: 0.5s; | transition: 0.5s; | ||
} | } | ||
| − | + | a:hover, a:active, a:focus { | |
color: #582d32; | color: #582d32; | ||
outline: none; | outline: none; | ||
text-decoration: none; | text-decoration: none; | ||
} | } | ||
| − | + | p{ | |
font-family:"Open Sans",sans-serif;font-size:13px;text-align:left; | font-family:"Open Sans",sans-serif;font-size:13px;text-align:left; | ||
padding: 0; | padding: 0; | ||
margin: 0 0 30px 0; | margin: 0 0 30px 0; | ||
} | } | ||
| − | + | h1,h2,h3,h4,h5{ | |
font-family: "Montserrat", sans-serif; | font-family: "Montserrat", sans-serif; | ||
font-weight: 400; | font-weight: 400; | ||
| Line 70: | Line 70: | ||
} | } | ||
/* Back to top button */ | /* Back to top button */ | ||
| − | + | .back-to-top { | |
position: fixed; | position: fixed; | ||
display: none; | display: none; | ||
| Line 88: | Line 88: | ||
} | } | ||
| − | + | .back-to-top i { | |
padding-top: 16px; | padding-top: 16px; | ||
color: #f6f8f1; | color: #f6f8f1; | ||
} | } | ||
| − | + | .sc-bwzfXH {right:24px!important;} | |
| − | + | #header { | |
padding: 30px 0; | padding: 30px 0; | ||
height: 92px; | height: 92px; | ||
| Line 105: | Line 105: | ||
} | } | ||
| − | + | #header.header-scrolled { | |
background: #28272c; | background: #28272c; | ||
padding: 20px 0; | padding: 20px 0; | ||
| Line 112: | Line 112: | ||
} | } | ||
| − | + | #header #logo { | |
float: left; | float: left; | ||
} | } | ||
@media (min-width: 1024px) { | @media (min-width: 1024px) { | ||
| − | + | #header #logo { | |
padding-left: 60px; | padding-left: 60px; | ||
} | } | ||
} | } | ||
| − | + | #header #logo h1 { | |
font-size: 34px; | font-size: 34px; | ||
margin: 0; | margin: 0; | ||
| Line 132: | Line 132: | ||
} | } | ||
| − | + | #header #logo h1 a, #header #logo h1 a:hover { | |
color: #f6f8f1; | color: #f6f8f1; | ||
padding-left: 10px; | padding-left: 10px; | ||
| Line 138: | Line 138: | ||
} | } | ||
| − | + | #header #logo img { | |
padding: 0; | padding: 0; | ||
margin: 0; | margin: 0; | ||
| Line 144: | Line 144: | ||
@media (max-width: 768px) { | @media (max-width: 768px) { | ||
| − | + | #header #logo h1 { | |
font-size: 28px; | font-size: 28px; | ||
} | } | ||
| − | + | #header #logo img { | |
max-height: 40px; | max-height: 40px; | ||
} | } | ||
} | } | ||
| − | + | #intro-title{display:table;width:100%;height:300px;background:#28272c;} | |
| − | + | #intro-title .section-header h3 { | |
color: #f6f8f1; | color: #f6f8f1; | ||
margin-top: 30px; | margin-top: 30px; | ||
| Line 158: | Line 158: | ||
font-weight: 700; | font-weight: 700; | ||
} | } | ||
| − | + | #intro { | |
display: table; | display: table; | ||
width: 100%; | width: 100%; | ||
| Line 165: | Line 165: | ||
} | } | ||
| − | + | #intro .carousel-item { | |
width: 100%; | width: 100%; | ||
height: 100vh; | height: 100vh; | ||
| Line 173: | Line 173: | ||
} | } | ||
| − | + | #intro .carousel-item::before { | |
content: ''; | content: ''; | ||
background-color: rgba(40,39,44, 0.7); | background-color: rgba(40,39,44, 0.7); | ||
| Line 185: | Line 185: | ||
} | } | ||
| − | + | #intro .carousel-container { | |
display: flex; | display: flex; | ||
justify-content: center; | justify-content: center; | ||
| Line 196: | Line 196: | ||
} | } | ||
| − | + | #intro .carousel-content { | |
text-align: center; | text-align: center; | ||
} | } | ||
| − | + | #intro h2 { | |
color: #f6f8f1; | color: #f6f8f1; | ||
margin-bottom: 30px; | margin-bottom: 30px; | ||
| Line 208: | Line 208: | ||
@media (max-width: 768px) { | @media (max-width: 768px) { | ||
| − | + | #intro h2 { | |
font-size: 28px; | font-size: 28px; | ||
} | } | ||
} | } | ||
| − | + | #intro p { | |
width: 80%; | width: 80%; | ||
margin: 0 auto 30px auto; | margin: 0 auto 30px auto; | ||
| Line 220: | Line 220: | ||
@media (min-width: 1024px) { | @media (min-width: 1024px) { | ||
| − | + | #intro p { | |
width: 60%; | width: 60%; | ||
} | } | ||
} | } | ||
| − | + | #intro .carousel-fade .carousel-inner .carousel-item { | |
-webkit-transition-property: opacity; | -webkit-transition-property: opacity; | ||
transition-property: opacity; | transition-property: opacity; | ||
} | } | ||
| − | + | #intro .carousel-fade .carousel-inner .carousel-item, | |
| − | + | #intro .carousel-fade .carousel-inner .active.carousel-item-left, | |
| − | + | #intro .carousel-fade .carousel-inner .active.carousel-item-right { | |
opacity: 0; | opacity: 0; | ||
} | } | ||
| − | + | #intro .carousel-fade .carousel-inner .active, | |
| − | + | #intro .carousel-fade .carousel-inner .carousel-item-next.carousel-item-left, | |
| − | + | #intro .carousel-fade .carousel-inner .carousel-item-prev.carousel-item-right { | |
opacity: 1; | opacity: 1; | ||
transition: 0.5s; | transition: 0.5s; | ||
} | } | ||
| − | + | #intro .carousel-fade .carousel-inner .carousel-item-next, | |
| − | + | #intro .carousel-fade .carousel-inner .carousel-item-prev, | |
| − | + | #intro .carousel-fade .carousel-inner .active.carousel-item-left, | |
| − | + | #intro .carousel-fade .carousel-inner .active.carousel-item-right { | |
left: 0; | left: 0; | ||
-webkit-transform: translate3d(0, 0, 0); | -webkit-transform: translate3d(0, 0, 0); | ||
| Line 252: | Line 252: | ||
} | } | ||
| − | + | #intro .carousel-control-prev, #intro .carousel-control-next { | |
width: 10%; | width: 10%; | ||
} | } | ||
@media (min-width: 1024px) { | @media (min-width: 1024px) { | ||
| − | + | #intro .carousel-control-prev, #intro .carousel-control-next { | |
width: 5%; | width: 5%; | ||
} | } | ||
} | } | ||
| − | + | #intro .carousel-control-next-icon, #intro .carousel-control-prev-icon { | |
background: none; | background: none; | ||
font-size: 32px; | font-size: 32px; | ||
| Line 268: | Line 268: | ||
} | } | ||
| − | + | #intro .carousel-indicators li { | |
cursor: pointer; | cursor: pointer; | ||
} | } | ||
| − | + | #intro .btn-get-started { | |
font-family: "Montserrat", sans-serif; | font-family: "Montserrat", sans-serif; | ||
font-weight: 500; | font-weight: 500; | ||
| Line 286: | Line 286: | ||
} | } | ||
| − | + | #intro .btn-get-started:hover { | |
background: #f6f8f1; | background: #f6f8f1; | ||
color: #a54040; | color: #a54040; | ||
| Line 292: | Line 292: | ||
/*-------------------------------------------------------------- | /*-------------------------------------------------------------- | ||
| − | + | # Navigation Menu | |
--------------------------------------------------------------*/ | --------------------------------------------------------------*/ | ||
/* Nav Menu Essentials */ | /* Nav Menu Essentials */ | ||
| Line 535: | Line 535: | ||
} | } | ||
| − | + | .section-header h3 { | |
font-size: 32px; | font-size: 32px; | ||
color: #28272c; | color: #28272c; | ||
| Line 545: | Line 545: | ||
} | } | ||
| − | + | .section-header h3::before { | |
content: ''; | content: ''; | ||
position: absolute; | position: absolute; | ||
| Line 556: | Line 556: | ||
} | } | ||
| − | + | .section-header h3::after { | |
content: ''; | content: ''; | ||
position: absolute; | position: absolute; | ||
| Line 567: | Line 567: | ||
} | } | ||
| − | + | .section-header p { | |
text-align: center; | text-align: center; | ||
padding-bottom: 30px; | padding-bottom: 30px; | ||
| Line 573: | Line 573: | ||
} | } | ||
| − | + | .section-bg { | |
background: #eae7e7; | background: #eae7e7; | ||
} | } | ||
| − | + | #about { | |
background: url("/template/img/about-bg.jpg") center top no-repeat fixed; | background: url("/template/img/about-bg.jpg") center top no-repeat fixed; | ||
background-size: cover; | background-size: cover; | ||
| Line 584: | Line 584: | ||
} | } | ||
| − | + | #about::before { | |
content: ''; | content: ''; | ||
position: absolute; | position: absolute; | ||
| Line 595: | Line 595: | ||
} | } | ||
| − | + | #about .container { | |
position: relative; | position: relative; | ||
z-index: 10; | z-index: 10; | ||
} | } | ||
| − | + | #about .about-col { | |
background: #f6f8f1; | background: #f6f8f1; | ||
border-radius: 0 0 4px 4px; | border-radius: 0 0 4px 4px; | ||
| Line 607: | Line 607: | ||
} | } | ||
| − | + | #about .about-col .img { | |
position: relative; | position: relative; | ||
} | } | ||
| − | + | #about .about-col .img img { | |
border-radius: 4px 4px 0 0; | border-radius: 4px 4px 0 0; | ||
} | } | ||
| − | + | #about .about-col .icon { | |
width: 64px; | width: 64px; | ||
height: 64px; | height: 64px; | ||
| Line 630: | Line 630: | ||
} | } | ||
| − | + | #about .about-col i { | |
font-size: 36px; | font-size: 36px; | ||
line-height: 1; | line-height: 1; | ||
| Line 637: | Line 637: | ||
} | } | ||
| − | + | #about .about-col:hover .icon { | |
background-color: #f6f8f1; | background-color: #f6f8f1; | ||
} | } | ||
| − | + | #about .about-col:hover i { | |
color: #a54040; | color: #a54040; | ||
} | } | ||
| − | + | #about .about-col h2 { | |
color: #28272c; | color: #28272c; | ||
text-align: center; | text-align: center; | ||
| Line 654: | Line 654: | ||
} | } | ||
| − | + | #about .about-col h2 a { | |
color: #28272c; | color: #28272c; | ||
} | } | ||
| − | + | #about .about-col h2 a:hover { | |
color: #a54040; | color: #a54040; | ||
} | } | ||
| − | + | #about .about-col p { | |
font-size: 14px; | font-size: 14px; | ||
line-height: 24px; | line-height: 24px; | ||
| Line 669: | Line 669: | ||
padding: 0 20px 20px 20px; | padding: 0 20px 20px 20px; | ||
} | } | ||
| − | + | #call-to-action { | |
background: linear-gradient(rgba(0, 142, 99, 0.1), rgba(40,39,44, 0.1)), url(/template/img/call-to-action-bg.jpg) fixed center center; | background: linear-gradient(rgba(0, 142, 99, 0.1), rgba(40,39,44, 0.1)), url(/template/img/call-to-action-bg.jpg) fixed center center; | ||
background-size: cover; | background-size: cover; | ||
| Line 675: | Line 675: | ||
} | } | ||
| − | + | #call-to-action h3 { | |
color: #f6f8f1; | color: #f6f8f1; | ||
font-size: 28px; | font-size: 28px; | ||
| Line 681: | Line 681: | ||
} | } | ||
| − | + | #call-to-action p { | |
color: #f6f8f1; | color: #f6f8f1; | ||
} | } | ||
| − | + | #call-to-action .cta-btn { | |
font-family: "Montserrat", sans-serif; | font-family: "Montserrat", sans-serif; | ||
text-transform: uppercase; | text-transform: uppercase; | ||
| Line 700: | Line 700: | ||
} | } | ||
| − | + | #call-to-action .cta-btn:hover { | |
background: #a54040; | background: #a54040; | ||
border: 2px solid #a54040; | border: 2px solid #a54040; | ||
| Line 707: | Line 707: | ||
/* Clients Section | /* Clients Section | ||
--------------------------------*/ | --------------------------------*/ | ||
| − | + | #clients { | |
padding: 60px 0; | padding: 60px 0; | ||
} | } | ||
| − | + | #clients img { | |
max-width: 100%; | max-width: 100%; | ||
opacity: 0.5; | opacity: 0.5; | ||
| Line 718: | Line 718: | ||
} | } | ||
| − | + | #clients img:hover { | |
opacity: 1; | opacity: 1; | ||
} | } | ||
| − | + | #clients .owl-nav, #clients .owl-dots { | |
margin-top: 5px; | margin-top: 5px; | ||
text-align: center; | text-align: center; | ||
} | } | ||
| − | + | #clients .owl-dot { | |
display: inline-block; | display: inline-block; | ||
margin: 0 5px; | margin: 0 5px; | ||
| Line 736: | Line 736: | ||
} | } | ||
| − | + | #clients .owl-dot.active { | |
background-color: #a54040; | background-color: #a54040; | ||
} | } | ||
| Line 742: | Line 742: | ||
/* Contact Section | /* Contact Section | ||
--------------------------------*/ | --------------------------------*/ | ||
| − | + | #contact { | |
padding: 60px 0; | padding: 60px 0; | ||
} | } | ||
| − | + | #contact .contact-info { | |
margin-bottom: 20px; | margin-bottom: 20px; | ||
text-align: center; | text-align: center; | ||
} | } | ||
| − | + | #contact .contact-info i { | |
font-size: 48px; | font-size: 48px; | ||
display: inline-block; | display: inline-block; | ||
| Line 758: | Line 758: | ||
} | } | ||
| − | + | #contact .contact-info address, #contact .contact-info p { | |
margin-bottom: 0; | margin-bottom: 0; | ||
color: #28272c; | color: #28272c; | ||
} | } | ||
| − | + | #contact .contact-info h3 { | |
font-size: 18px; | font-size: 18px; | ||
margin-bottom: 15px; | margin-bottom: 15px; | ||
| Line 771: | Line 771: | ||
} | } | ||
| − | + | #contact .contact-info a { | |
color: #28272c; | color: #28272c; | ||
} | } | ||
| − | + | #contact .contact-info a:hover { | |
color: #a54040; | color: #a54040; | ||
} | } | ||
| − | + | #contact .contact-address, #contact .contact-phone, #contact .contact-email { | |
margin-bottom: 20px; | margin-bottom: 20px; | ||
} | } | ||
@media (min-width: 768px) { | @media (min-width: 768px) { | ||
| − | + | #contact .contact-address, #contact .contact-phone, #contact .contact-email { | |
padding: 20px 0; | padding: 20px 0; | ||
} | } | ||
| Line 790: | Line 790: | ||
@media (min-width: 768px) { | @media (min-width: 768px) { | ||
| − | + | #contact .contact-phone { | |
border-left: 1px solid #c2bcb9; | border-left: 1px solid #c2bcb9; | ||
border-right: 1px solid #c2bcb9; | border-right: 1px solid #c2bcb9; | ||
| Line 796: | Line 796: | ||
} | } | ||
| − | + | #contact .form #sendmessage { | |
color: #a54040; | color: #a54040; | ||
border: 1px solid #a54040; | border: 1px solid #a54040; | ||
| Line 806: | Line 806: | ||
} | } | ||
| − | + | #contact .form #errormessage { | |
color: red; | color: red; | ||
display: none; | display: none; | ||
| Line 816: | Line 816: | ||
} | } | ||
| − | + | #contact .form #sendmessage.show, #contact .form #errormessage.show, #contact .form .show { | |
display: block; | display: block; | ||
} | } | ||
| − | + | #contact .form .validation { | |
color: red; | color: red; | ||
display: none; | display: none; | ||
| Line 828: | Line 828: | ||
} | } | ||
| − | + | #contact .form input, #contact .form textarea { | |
padding: 10px 14px; | padding: 10px 14px; | ||
border-radius: 0; | border-radius: 0; | ||
| Line 835: | Line 835: | ||
} | } | ||
| − | + | .btn-red { | |
background: #a54040; | background: #a54040; | ||
padding: 10px 30px; | padding: 10px 30px; | ||
| Line 841: | Line 841: | ||
} | } | ||
| − | + | .btn-red:hover { | |
background: #582d32; | background: #582d32; | ||
color: #c2bcb9; | color: #c2bcb9; | ||
} | } | ||
| − | + | #footer{ | |
text-align:left; | text-align:left; | ||
background: #28272c; | background: #28272c; | ||
| Line 852: | Line 852: | ||
font-size: 14px; | font-size: 14px; | ||
} | } | ||
| − | + | #footer li{display:block;margin:0;} | |
| − | + | #footer .footer-top { | |
background: #28272c; | background: #28272c; | ||
padding: 60px 0 30px 0; | padding: 60px 0 30px 0; | ||
} | } | ||
| − | + | #footer .footer-top .footer-info { | |
margin-bottom: 30px; | margin-bottom: 30px; | ||
} | } | ||
| − | + | #footer .footer-top .footer-info h3 { | |
font-size: 34px; | font-size: 34px; | ||
margin: 0 0 20px 0; | margin: 0 0 20px 0; | ||
| Line 874: | Line 874: | ||
} | } | ||
| − | + | #footer .footer-top .footer-info p { | |
font-size: 14px; | font-size: 14px; | ||
line-height: 24px; | line-height: 24px; | ||
| Line 882: | Line 882: | ||
} | } | ||
| − | + | #footer .footer-top .social-links a { | |
font-size: 18px; | font-size: 18px; | ||
display: inline-block; | display: inline-block; | ||
| Line 897: | Line 897: | ||
} | } | ||
| − | + | #footer .footer-top .social-links a:hover { | |
background: #a54040; | background: #a54040; | ||
color: #f6f8f1; | color: #f6f8f1; | ||
} | } | ||
| − | + | #footer .footer-top h4 { | |
font-size: 14px; | font-size: 14px; | ||
font-weight: bold; | font-weight: bold; | ||
| Line 911: | Line 911: | ||
} | } | ||
| − | + | #footer .footer-top h4::before, #footer .footer-top h4::after { | |
content: ''; | content: ''; | ||
position: absolute; | position: absolute; | ||
| Line 919: | Line 919: | ||
} | } | ||
| − | + | #footer .footer-top h4::before { | |
right: 0; | right: 0; | ||
background: #c2bcb9; | background: #c2bcb9; | ||
} | } | ||
| − | + | #footer .footer-top h4::after { | |
background: #a54040; | background: #a54040; | ||
width: 60px; | width: 60px; | ||
} | } | ||
| − | + | #footer .footer-top .footer-links { | |
margin-bottom: 30px; | margin-bottom: 30px; | ||
} | } | ||
| − | + | #footer .footer-top .footer-links ul { | |
list-style: none; | list-style: none; | ||
padding: 0; | padding: 0; | ||
| Line 939: | Line 939: | ||
} | } | ||
| − | + | #footer .footer-top .footer-links ul i { | |
padding-right: 8px; | padding-right: 8px; | ||
color: #c2bcb9; | color: #c2bcb9; | ||
} | } | ||
| − | + | #footer .footer-top .footer-links ul li { | |
border-bottom: 1px solid #28272c; | border-bottom: 1px solid #28272c; | ||
padding: 10px 0; | padding: 10px 0; | ||
} | } | ||
| − | + | #footer .footer-top .footer-links ul li:first-child { | |
padding-top: 0; | padding-top: 0; | ||
} | } | ||
| − | + | #footer .footer-top .footer-links ul a { | |
color: #eae7e7; | color: #eae7e7; | ||
} | } | ||
| − | + | #footer .footer-top .footer-links ul a:hover { | |
color: #a54040; | color: #a54040; | ||
} | } | ||
| − | + | #footer .footer-top .footer-contact { | |
margin-bottom: 30px; | margin-bottom: 30px; | ||
} | } | ||
| − | + | #footer .footer-top .footer-contact p { | |
line-height: 26px; | line-height: 26px; | ||
} | } | ||
| − | + | #footer .footer-top .footer-newsletter { | |
margin-bottom: 30px; | margin-bottom: 30px; | ||
} | } | ||
| − | + | #footer .footer-top .footer-newsletter input[type="email"] { | |
border: 0; | border: 0; | ||
padding: 6px 8px; | padding: 6px 8px; | ||
| Line 979: | Line 979: | ||
} | } | ||
| − | + | #footer .footer-top .footer-newsletter input[type="submit"] { | |
background: #a54040; | background: #a54040; | ||
border: 0; | border: 0; | ||
| Line 990: | Line 990: | ||
} | } | ||
| − | + | #footer .footer-top .footer-newsletter input[type="submit"]:hover { | |
background: #28272c; | background: #28272c; | ||
} | } | ||
| − | + | #footer .copyright { | |
text-align: center; | text-align: center; | ||
padding-top: 30px; | padding-top: 30px; | ||
} | } | ||
| − | + | #footer .credits { | |
text-align: center; | text-align: center; | ||
font-size: 13px; | font-size: 13px; | ||
color: #c2bcb9; | color: #c2bcb9; | ||
} | } | ||
| + | |||
</style> | </style> | ||
</html> | </html> | ||
Revision as of 08:14, 5 August 2018