Line 1: | Line 1: | ||
− | body { | + | *{ |
− | + | margin:0; | |
− | + | padding:0; | |
− | + | } | |
− | + | ||
− | + | body{ | |
− | } | + | background: #000; |
+ | font: 15px/400 Constantia, Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif; | ||
+ | color: #aa3e03; | ||
+ | overflow-y: scroll;/*这个很重要*/ | ||
+ | overflow-x: hidden;/*这个很重要*/ | ||
+ | } | ||
a, button { | a, button { |
Revision as of 08:13, 4 October 2018
- {
margin:0; padding:0; } body{ background: #000; font: 15px/400 Constantia, Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif; color: #aa3e03; overflow-y: scroll;/*这个很重要*/ overflow-x: hidden;/*这个很重要*/ }
a, button { transition: all 0.3s ease; color: #FFFFFF; }
button:focus {
outline: none;
}
a:hover { color: #FFFF00; text-decoration: underline; } a:focus { text-decoration: none; outline: none; }
h1 { color: #FFFFFF; font-size: 4rem; }
p { color: #FFFFFF; }
- particles-js {
position: absolute; top: 0; left: 0; z-index: 1000; width: 100%; height: 99%;
}
.cb-slideshow-text-container {
height: 100vh; display: flex; align-items: center;
}
.tm-content {
z-index: 1001;
}
.form-control::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: white;
} .form-control::-moz-placeholder { /* Firefox 19+ */
color: white;
} .form-control:-ms-input-placeholder { /* IE 10+ */
color: white;
} .form-control:-moz-placeholder { /* Firefox 18- */
color: white;
}
.form-control::placeholder {
color: white;
}
.form-control {
color: #FFFFFF; border-radius: .5rem; background-color: transparent; border: 1px solid #FFFFFF; padding-top: 10px; padding-bottom: 10px; font-size: 1.4rem; font-weight: 300; padding: 0.75rem 1.2rem;
}
.form-section {
color: #FFFFFF; background-color: transparent; margin-bottom: 100px;
}
.contact_email { color: #FFFFFF; } .tm-btn-subscribe { background-color: #006699; border-radius: .5rem;
border-color: white;
padding: 0.75rem 1.6rem;
font-weight: 300; font-size: 1.4rem; cursor: pointer;
}
.tm-btn-subscribe:hover {
background-color: #055278;
}
.tm-social-icons-container {
margin: 10px;
}
.tm-social-link {
border-color: #FFFFFF; color: black; display: inline-block; width: 50px; height: 50px; text-align: center;
}
.fa {
color: #FFFFFF;
}
.footer-link {
margin: 20px;
font-size: 18px;
position: absolute; bottom: 0; left: 0; color: white; text-align:center; width:100%; z-index: 1001;
}
/* Animation */ .cb-slideshow, .cb-slideshow:after {
position: fixed; width: 100%; height: 100%; top: 0px; left: 0px; z-index: 0;
}
.cb-slideshow li {
width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; color: transparent; background-size: cover; background-position: 50% 50%; background-repeat: none; opacity: 0; z-index: 0; -webkit-backface-visibility: hidden; -webkit-animation: imageAnimation 20s linear infinite 0s; -moz-animation: imageAnimation 20s linear infinite 0s; -o-animation: imageAnimation 20s linear infinite 0s; -ms-animation: imageAnimation 20s linear infinite 0s; animation: imageAnimation 20s linear infinite 0s;
}
.cb-slideshow li:nth-child(1) {
background-image: url("")
} .cb-slideshow li:nth-child(2) {
background-image: url(""); -webkit-animation-delay: 4s; -moz-animation-delay: 4s; -o-animation-delay: 4s; -ms-animation-delay: 4s; animation-delay: 4s;
} .cb-slideshow li:nth-child(3) {
background-image: url(""); -webkit-animation-delay: 8s; -moz-animation-delay: 8s; -o-animation-delay: 8s; -ms-animation-delay: 8s; animation-delay: 8s;
} .cb-slideshow li:nth-child(4) {
background-image: url(""); animation-delay: 12s;
} .cb-slideshow li:nth-child(5) {
background-image: url(""); animation-delay: 16s;
} .cb-slideshow li:nth-child(6) {
background-image: url(""); animation-delay: 20s;
}
@keyframes imageAnimation {
0% {
opacity: 0;
animation-timing-function: ease-in;
}
8% {
opacity: 1;
transform: scale(1.15);
animation-timing-function: ease-out;
}
17% {
opacity: 1;
transform: scale(1.20);
}
25% {
opacity: 0;
transform: scale(1.40);
}
100% { opacity: 0 }
}
@media screen and (max-width: 1140px) {
.cb-slideshow li div h3 { font-size: 140px }
} @media screen and (max-width: 600px) {
.cb-slideshow li div h3 { font-size: 80px }
.tm-content { margin-top: 80px; } }
@media screen and (max-width: 576px) {
.cb-slideshow li div h3 { font-size: 80px }
.tm-btn-subscribe { margin-top: 20px; } }