Difference between revisions of "Team:Nankai/Practices/templatemo-style"
Line 103: | Line 103: | ||
background-position: center; | background-position: center; | ||
background-size: cover; | background-size: cover; | ||
− | margin-top: | + | margin-top: 0px; |
width: 100%; | width: 100%; | ||
height: 550px; | height: 550px; |
Revision as of 02:26, 13 September 2015
@import url(http://fonts.useso.com/css?family=Raleway:400,300,500,600,700,800,900);
@import url(http://fonts.useso.com/css?family=Roboto+Slab:400,700,300,100);
@import url(http://fonts.useso.com/css?family=Dosis:200,300,400,500,600,700,800);
html {
box-sizing: border-box;
}
- , *:before, *:after {
box-sizing: inherit; text-align: center; }
.blue { color:#06F; font-weight:normal; }
.green { color:#0A0; font-weight:normal; }
- top {
margin-top: -50px;
}
.navbar-default {
background-color: #98d361; border-color: transparent;
}
.navbar-brand p {
font-family: 'Dosis'; font-size: 32px; font-weight: 600; color: #fff; text-transform: uppercase;
}
.navbar-brand em {
font-size: 26px; font-style: normal;
}
.nav .navbar-nav {
text-align: center;
}
.navbar-right a {
font-family: 'Dosis'; font-size: 16px; color: #eaffd6 !important; text-transform: uppercase; ; padding: 0; line-height: 50px; position: relative; z-index: 211; -webkit-transition: all 350ms ease-in-out; -moz-transition: all 350ms ease-in-out; -o-transition: all 350ms ease-in-out; transition: all 350ms ease-in-out;
}
.navbar-right a:hover {
/*background-color: #fff !important;*/ /*color: #8bc655 !important;*/;
}
.navbar-right li {
height: 50px; position: relative; z-index: 210;
}
.navbar-right li span {
position: absolute; width: 0; height: 100%; background-color: #fff; -webkit-transition: all 250ms ease-in-out; -moz-transition: all 250ms ease-in-out; -o-transition: all 250ms ease-in-out; transition: all 250ms ease-in-out; top: 0; left: 0; z-index: 200;
}
.navbar-right li:hover span {
width: 100%;
}
.navbar-right li:hover a {
color: #7cb14a !important;
}
- big-banner {
background-image: url(); background-position: center; background-size: cover; margin-top: 0px; width: 100%; height: 550px; background-repeat: no-repeat; }
- big-banner .main-icons {
text-align: center; margin-top: 180px;
}
- big-banner .main-icons li {
list-style: none; display: inline-block; margin-right: 90px;
}
- big-banner .main-icons i {
font-size: 72px; color: #fff; display: block; padding-bottom: 20px;
}
- big-banner .main-icons i:hover {
color: #8bc655 !important;
}
- big-banner .main-icons a {
display: block; font-family: 'Dosis'; font-size: 22px; color: #fff; text-decoration: none; font-weight: 600; text-transform: uppercase; margin-top: 40px;
}
.heading {
border-bottom: 4px solid #98d361; border-top: 4px solid #98d361; width: 100%; padding-top: 40px; padding-bottom: 40px;
}
.heading h2 {
font-family: 'Dosis'; font-size: 32px; text-transform: uppercase; text-align: center; padding-top: 10px; margin-bottom: 30px;
}
.triangle {
margin-left: 45%; width: 0; height: 0; border-left: 60px solid transparent; border-right: 60px solid transparent; border-top: 45px solid #98d361;
}
.cd-container {
width: 90%; max-width: 1170px; margin: 0 auto;
} .copyrights{text-indent:-9999px;height:0;line-height:0;font-size:0;overflow:hidden;} .cd-container::after {
content: ; display: table; clear: both;
}
- cd-timeline, #cd-timeline-2 {
position: relative; padding: 2em 0; margin-top: 2em; margin-bottom: 2em;
}
- cd-timeline::before, #cd-timeline-2::before {
content: ; position: absolute; top: 0; left: 18px; height: 100%; width: 4px; background: #ccc;
}
@media only screen and (min-width: 1170px) {
#cd-timeline, #cd-timeline-2 { margin-top: 3em; margin-bottom: 3em; }
#cd-timeline::before, #cd-timeline-2::before { left: 50%; margin-left: -2px; }
}
.cd-timeline-block {
position: relative; margin: 2em 0;
}
.cd-timeline-block:after {
content: ""; display: table; clear: both;
}
.cd-timeline-block:first-child {
margin-top: 0;
}
.cd-timeline-block:last-child {
margin-bottom: 0;
}
@media only screen and (min-width: 1170px) {
.cd-timeline-block { margin: -3em 0; }
#cd-timeline-2 .cd-timeline-block {
margin: -12em 0; }
#cd-timeline-2 .cd-timeline-block:first-child {
margin-top: 0; }
#cd-timeline-2 .cd-timeline-block:last-child {
margin-bottom: 0; }
.cd-timeline-block:first-child { margin-top: 0; }
.cd-timeline-block:last-child { margin-bottom: 0; }
}
.cd-container .projects {
margin-left: 40px;
}
.cd-timeline-img {
position: absolute; top: 0; left: 0; width: 40px; height: 40px; border-radius: 50%; border: 4px solid #fff; background-color: #eee;
}
.cd-timeline-img img {
display: block; width: 24px; height: 24px; position: relative; left: 50%; top: 50%; margin-left: -12px; margin-top: -12px;
}
.cd-timeline-img:hover {
background-color: #98d361; cursor: pointer;
}
@media only screen and (min-width: 1170px) {
.cd-timeline-img { width: 60px; height: 60px; left: 50%; margin-left: -30px; /* Force Hardware Acceleration in WebKit */ -webkit-transform: translateZ(0); -webkit-backface-visibility: hidden; }
.cssanimations .cd-timeline-img.is-hidden { visibility: hidden; }
.cssanimations .cd-timeline-img.bounce-in { visibility: visible; -webkit-animation: cd-bounce-1 0.6s; -moz-animation: cd-bounce-1 0.6s; animation: cd-bounce-1 0.6s; }
}
@-webkit-keyframes cd-bounce-1 {
0% { opacity: 0; -webkit-transform: scale(0.5); }
60% { opacity: 1; -webkit-transform: scale(1.2); }
100% { -webkit-transform: scale(1); }
}
@-moz-keyframes cd-bounce-1 {
0% { opacity: 0; -moz-transform: scale(0.5); }
60% { opacity: 1; -moz-transform: scale(1.2); }
100% { -moz-transform: scale(1); }
}
@keyframes cd-bounce-1 {
0% { opacity: 0; -webkit-transform: scale(0.5); -moz-transform: scale(0.5); -ms-transform: scale(0.5); -o-transform: scale(0.5); transform: scale(0.5); }
60% { opacity: 1; -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2); }
100% { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); }
}
.cd-container .projects {
position: relative; float: left; background-color: transparent !important;
}
.cd-timeline-content {
position: relative; margin-left: 60px; background-color: #eee; border-radius: 0.50em;
}
.cd-timeline-content:after {
content: ""; display: table; clear: both;
}
.cd-timeline-content h2 {
font-family: 'Dosis'; font-size: 22px !important; font-weight: 600; color: #333; margin-top: 0; padding-bottom: 10px; text-transform: uppercase;
}
.cd-timeline-content .cd-read-more, .cd-timeline-content .cd-date {
display: inline-block;
}
.cd-timeline-content p {
font-family: 'Dosis'; font-size: 16px !important; color: #333; line-height: 24px;
}
.projects img {
border: 4px solid #eee; max-width: 100%;
}
.project-content {
position: absolute; z-index: 999; background-color: #eee; opacity: 0.9; top: 0; left: 0; width: 100%;
}
.project-content h2 {
padding-top: 15px; padding-left: 15px; padding-right: 15px; padding-bottom: 10px;
}
.project-content span {
font-family: 'Dosis'; font-size: 12px; text-transform: uppercase; color: #777; margin-left: 15px; margin-top: -15px; padding-bottom: 10px; display: block;
}
.cd-timeline-content::before {
content: ; position: absolute; top: 16px; right: 100%; height: 0; width: 0; border: 7px solid transparent; border-right: 7px solid white;
}
@media only screen and (min-width: 768px) { }
@media only screen and (min-width: 1170px) {
.projects img { border: 4px solid #eee; max-width: 100%; }
.cd-timeline-content { margin-left: 0; width: 45%; }
.cd-timeline-content::before { display: none; }
.cd-timeline-block:nth-child(even) .cd-timeline-content { float: right; }
.cd-timeline-block:nth-child(even) .cd-timeline-content::before { top: 24px; left: auto; right: 100%; border-color: transparent; border-right-color: white; }
.cd-timeline-block:nth-child(even) .cd-timeline-content .cd-read-more { float: right; }
.cd-timeline-block:nth-child(even) .cd-timeline-content .cd-date { left: auto; right: 122%; text-align: right; }
.cssanimations .cd-timeline-content.is-hidden { visibility: hidden; }
.cssanimations .cd-timeline-content.bounce-in { visibility: visible; -webkit-animation: cd-bounce-2 0.6s; -moz-animation: cd-bounce-2 0.6s; animation: cd-bounce-2 0.6s; }
}
@media only screen and (min-width: 1170px) {
/* inverse bounce effect on even content blocks */ .cssanimations .cd-timeline-block:nth-child(even) .cd-timeline-content.bounce-in { -webkit-animation: cd-bounce-2-inverse 0.6s; -moz-animation: cd-bounce-2-inverse 0.6s; animation: cd-bounce-2-inverse 0.6s; }
}
@-webkit-keyframes cd-bounce-2 {
0% { opacity: 0; -webkit-transform: translateX(-100px); }
60% { opacity: 1; -webkit-transform: translateX(20px); }
100% { -webkit-transform: translateX(0); }
}
@-moz-keyframes cd-bounce-2 {
0% { opacity: 0; -moz-transform: translateX(-100px); }
60% { opacity: 1; -moz-transform: translateX(20px); }
100% { -moz-transform: translateX(0); }
}
@keyframes cd-bounce-2 {
0% { opacity: 0; -webkit-transform: translateX(-100px); -moz-transform: translateX(-100px); -ms-transform: translateX(-100px); -o-transform: translateX(-100px); transform: translateX(-100px); }
60% { opacity: 1; -webkit-transform: translateX(20px); -moz-transform: translateX(20px); -ms-transform: translateX(20px); -o-transform: translateX(20px); transform: translateX(20px); }
100% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); }
}
@-webkit-keyframes cd-bounce-2-inverse {
0% { opacity: 0; -webkit-transform: translateX(100px); }
60% { opacity: 1; -webkit-transform: translateX(-20px); }
100% { -webkit-transform: translateX(0); }
}
@-moz-keyframes cd-bounce-2-inverse {
0% { opacity: 0; -moz-transform: translateX(100px); }
60% { opacity: 1; -moz-transform: translateX(-20px); }
100% { -moz-transform: translateX(0); }
}
@keyframes cd-bounce-2-inverse {
0% { opacity: 0; -webkit-transform: translateX(100px); -moz-transform: translateX(100px); -ms-transform: translateX(100px); -o-transform: translateX(100px); transform: translateX(100px); }
60% { opacity: 1; -webkit-transform: translateX(-20px); -moz-transform: translateX(-20px); -ms-transform: translateX(-20px); -o-transform: translateX(-20px); transform: translateX(-20px); }
100% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); }
}
- cta {
background-image: url(); background-size: cover; background-repeat: no-repeat; width: 100%; height: 280px;
}
.cd-timeline-block .projects {
padding-bottom: 60px;
}
- cta h4 {
margin-top: 100px; font-family: Dosis; font-size: 42px; text-align: center; text-transform: uppercase; font-weight: 500; color: #000000; }
- cta p {
font-family: Dosis; font-size: 22px; text-align: center; text-transform: uppercase; font-weight: 400; color: #000000; }
- map {
background-image: url(../images/map-bg.png); background-size: cover; background-repeat: no-repeat; width: 100%; height: 680px;
}
- map h4 {
margin-top: 100px; font-family: 'Dosis'; font-size: 42px; text-align: center; text-transform: uppercase; font-weight: 500; color: #fff;
}
- map p {
font-family: 'Dosis'; font-size: 22px; text-align: center; text-transform: uppercase; font-weight: 400; color: #fff;
}
.map-content {
margin-top: 50px;
}
form {
margin-top: 40px; margin-right: 15px; margin-left: 15px;
}
input, textarea {
font-family: 'Dosis'; font-size: 13px; padding: 10px; border: 3px solid #eee; width: 100%; margin-bottom: 25px; background-color: #fff; outline: none;
}
textarea {
height: 220px; max-height: 220px; max-width: 100%; line-height: 18px; width: 100%;
}
.submit input {
font-family: 'Dosis'; font-size: 17px; font-weight: 600; text-transform: uppercase; border: 3px solid #b1e67f; width: 160px; height: 45px; display: block; line-height: 22px; text-align: center; color: #fff; text-decoration: none; background-color: #98d361;
}
.submit input:hover {
background-color: #b1e67f; border-color: #98d361;
}
form {
margin-top: 60px;
}
.contact-discription {
margin-top: 60px;
}
.contact-discription h4 {
font-family: 'Dosis'; font-size: 22px; font-weight: 600; color: #333; text-transform: uppercase;
}
.contact-discription p {
margin-top: 22px; font-family: 'Dosis'; font-size: 16px; color: #333; font-weight: 500; line-height: 20px;
}
- templatemo-map {
width: 100%; height: 380px;
}
footer {
background-color: #98d361; margin-top: 40px;
}
.copyright-text {
margin-top: 25px;
}
.copyright-text p {
font-family: 'Dosis'; font-size: 14px; color: #fff;
}
.copyright-text a {
color: #fff;
}
.copyright-text em {
font-style: normal; color: #fff;
}
.back-to-top {
margin-top: 15px; margin-left: 25%; width: 170px; height: 34px; text-align: center; display: inline-block;
}
.back-to-top a {
font-family: 'Dosis'; font-size: 17px; font-weight: 600; text-transform: uppercase; border: 3px solid #b1e67f; width: 170px; height: 40px; display: inline-block; line-height: 35px; text-align: center; color: #fff; text-decoration: none; background-color: #98d361;
}
.back-to-top a:hover { background-color: #98d361; border-color: #8bc655; text-align: center; }
.social-icons ul {
text-align: right; margin-top: 15px;
}
.social-icons li {
list-style: none; display: inline-block;
}
.social-icons a {
color: #fff; font-size: 18px; text-decoration: none; width: 40px; height: 40px; display: block; text-align: center; line-height: 35px; background-color: #98d361; border: 4px solid #b1e67f;
}
.social-icons a:hover {
background-color: #98d361; border-color: #8bc655;
}
@media (max-width:992px) {
footer { text-align: center; }
.back-to-top { display: inline-block; margin-left: 0%; }
.social-icons ul { margin-top: 30px; padding-bottom: 15px; display: inline-block; margin-left: 0px; margin-right: 40px; }
}
@media (max-width:1170px) {
.cd-timeline-block .projects { padding-bottom: 200px; }
#map { margin-top: 40px; }
}
@media (max-width:767px) {
.navbar-default .navbar-toggle { border-color: #8bc655; color: #fff; }
.navbar-default .navbar-toggle:hover { background-color: #98e361; color: #fff; }
.navbar-default .navbar-nav>li>a { padding-bottom: 13px; text-align: center; border-color: #8bc655; border-top: 1px solid #8bc655; }
.contact { border-bottom: 1px solid #8bc655; }
}
@media (max-width:992px) {
#big-banner .main-icons { text-align: center; margin-top: 180px; }
#big-banner .main-icons li { list-style: none; display: inline-block; margin-right: 60px; }
#big-banner .main-icons i { font-size: 42px; color: #fff; display: block; padding-bottom: 20px; }
#big-banner .main-icons i:hover {
color: #FD0004 !important;
}
#big-banner .main-icons a {
display: block; font-size: 16px; color: #FFFDFD; text-decoration: none; font-weight: 600; text-transform: uppercase; /* [disabled]margin-top: 0px; */
}
}
@media (max-width:676px) {
#big-banner .main-icons { text-align: center; margin-top: 180px; }
#big-banner .main-icons li { list-style: none; display: inline-block; margin-right: 30px; }
#big-banner .main-icons i { font-size: 42px; color: #fff; display: block; padding-bottom: 20px; }
#big-banner .main-icons i:hover { color: #8bc655 !important; }
#big-banner .main-icons a { display: block; font-family: 'Dosis'; font-size: 14px; color: #fff; text-decoration: none; font-weight: 600; text-transform: uppercase; margin-top: 40px; }
}
.service-box-content {
padding: 20px;
}
.cd-timeline-content {
margin-left: 0;
}
.cd-timeline-block {
overflow: hidden;
}
.cd-timeline-block .projects {
max-width: 100%; overflow: hidden; margin: 0; position: relative;
}
.cd-timeline-block .projects img {
width: 100%;
}
@media (max-width:768px) {
.cd-timeline-content, .cd-timeline-block .projects { margin-top: 60px; padding-bottom: 40px; }
#big-banner .main-icons { text-align: center; margin-top: 120px; }
}
@media (max-width:1170px) {
.cd-timeline-content, .cd-timeline-block .projects { margin-top: 60px; padding-bottom: 40px; }
}
@media (max-width:360px) {
#big-banner .main-icons { text-align: center; margin-top: 40px; }
#big-banner .main-icons i { font-size: 42px; color: #fff; display: block; padding-bottom: 10px; }
}
@media (max-width:360px) {
#big-banner .main-icons { text-align: center; margin-top: 120px; }
}