mirror of
https://github.com/miggymofongo/asteroid.git
synced 2024-10-18 13:41:47 +00:00
232 lines
4.5 KiB
CSS
232 lines
4.5 KiB
CSS
/**
|
|
* ===================================================================
|
|
*
|
|
* ResumeTemplate v1.0 Main ClearCareer
|
|
* url: clearcareer.ca
|
|
* 06-27-2016
|
|
* ------------------------------------------------------------------
|
|
*
|
|
* Timeline Tempalte by Bruno Rodriguez
|
|
*
|
|
* https://github.com/itbruno
|
|
* http://itbruno.com.br
|
|
* http://www.twitter.com/_brunoweb
|
|
*
|
|
* ===================================================================
|
|
*/
|
|
|
|
header:after, #timeline .timeline-item:after, header:before, #timeline .timeline-item:before {
|
|
content: '';
|
|
display: block;
|
|
width: 100%;
|
|
clear: both;
|
|
}
|
|
|
|
*, *:before, *:after {
|
|
box-sizing: border-box;
|
|
-webkit-box-sizing: border-box;
|
|
-moz-box-sizing: border-box;
|
|
}
|
|
|
|
body, html {
|
|
height: 100%;
|
|
}
|
|
|
|
body {
|
|
background: #f9f9f9;
|
|
background-size: cover;
|
|
margin: 0;
|
|
padding: 0;
|
|
font-family: helvetica, arial, tahoma, verdana;
|
|
line-height: 20px;
|
|
font-size: 14px;
|
|
color: #726f77;
|
|
}
|
|
|
|
img {
|
|
max-width: 100%;
|
|
}
|
|
|
|
a {
|
|
text-decoration: none;
|
|
}
|
|
|
|
.container {
|
|
max-width: 1100px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
h1, h2, h3, h4 {
|
|
font-family: "Dosis", arial, tahoma, verdana;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.project-name {
|
|
text-align: center;
|
|
padding: 10px 0;
|
|
}
|
|
|
|
header {
|
|
background: #1abc9c;
|
|
padding: 10px;
|
|
-webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.05);
|
|
-moz-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.05);
|
|
-ms-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.05);
|
|
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.05);
|
|
}
|
|
header .logo {
|
|
color: #1abc9c;
|
|
float: left;
|
|
font-family: "Dosis", arial, tahoma, verdana;
|
|
font-size: 22px;
|
|
font-weight: 500;
|
|
}
|
|
header .logo > span {
|
|
color: #f7aaaa;
|
|
font-weight: 300;
|
|
}
|
|
header .social {
|
|
float: right;
|
|
}
|
|
header .social .btn {
|
|
font-family: "Dosis";
|
|
font-size: 14px;
|
|
margin: 10px 5px;
|
|
}
|
|
|
|
|
|
.timelinedot {
|
|
margin: 13px;
|
|
color:white;
|
|
}
|
|
|
|
|
|
#timeline {
|
|
width: 100%;
|
|
margin: 30px auto;
|
|
position: relative;
|
|
padding: 0 10px;
|
|
-webkit-transition: all 0.4s ease;
|
|
-moz-transition: all 0.4s ease;
|
|
-ms-transition: all 0.4s ease;
|
|
transition: all 0.4s ease;
|
|
}
|
|
#timeline:before {
|
|
content: "";
|
|
width: 3px;
|
|
height: 100%;
|
|
background: #1abc9c;
|
|
left: 50%;
|
|
top: 0;
|
|
position: absolute;
|
|
}
|
|
#timeline:after {
|
|
content: "";
|
|
clear: both;
|
|
display: table;
|
|
width: 100%;
|
|
}
|
|
#timeline .timeline-item {
|
|
margin-bottom: 50px;
|
|
position: relative;
|
|
}
|
|
#timeline .timeline-item .timeline-icon {
|
|
background: #1abc9c;
|
|
width: 50px;
|
|
height: 50px;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 50%;
|
|
overflow: hidden;
|
|
margin-left: -23px;
|
|
-webkit-border-radius: 50%;
|
|
-moz-border-radius: 50%;
|
|
-ms-border-radius: 50%;
|
|
border-radius: 50%;
|
|
}
|
|
#timeline .timeline-item .timeline-icon svg {
|
|
position: relative;
|
|
top: 14px;
|
|
left: 14px;
|
|
}
|
|
#timeline .timeline-item .timeline-content {
|
|
width: 45%;
|
|
background: #fff;
|
|
padding: 20px;
|
|
-webkit-box-shadow: 0 3px 0 rgba(0, 0, 0, 0.1);
|
|
-moz-box-shadow: 0 3px 0 rgba(0, 0, 0, 0.1);
|
|
-ms-box-shadow: 0 3px 0 rgba(0, 0, 0, 0.1);
|
|
box-shadow: 0 3px 0 rgba(0, 0, 0, 0.1);
|
|
-webkit-border-radius: 5px;
|
|
-moz-border-radius: 5px;
|
|
-ms-border-radius: 5px;
|
|
border-radius: 5px;
|
|
-webkit-transition: all 0.3s ease;
|
|
-moz-transition: all 0.3s ease;
|
|
-ms-transition: all 0.3s ease;
|
|
transition: all 0.3s ease;
|
|
}
|
|
#timeline .timeline-item .timeline-content h2 {
|
|
padding: 15px;
|
|
background: #1abc9c;
|
|
color: #fff;
|
|
margin: -20px -20px 0 -20px;
|
|
font-weight: 300;
|
|
-webkit-border-radius: 3px 3px 0 0;
|
|
-moz-border-radius: 3px 3px 0 0;
|
|
-ms-border-radius: 3px 3px 0 0;
|
|
border-radius: 3px 3px 0 0;
|
|
}
|
|
|
|
#timeline .timeline-item .timeline-content p {
|
|
padding-top: 15px;
|
|
}
|
|
|
|
#timeline .timeline-item .timeline-content:before {
|
|
content: '';
|
|
position: absolute;
|
|
left: 45%;
|
|
top: 20px;
|
|
width: 0;
|
|
height: 0;
|
|
border-top: 7px solid transparent;
|
|
border-bottom: 7px solid transparent;
|
|
border-left: 7px solid #1abc9c;
|
|
}
|
|
#timeline .timeline-item .timeline-content.right {
|
|
float: right;
|
|
}
|
|
#timeline .timeline-item .timeline-content.right:before {
|
|
content: '';
|
|
right: 45%;
|
|
left: inherit;
|
|
border-left: 0;
|
|
border-right: 7px solid #1abc9c;
|
|
}
|
|
|
|
|
|
@media screen and (max-width: 768px) {
|
|
#timeline {
|
|
margin: 30px;
|
|
padding: 0px;
|
|
width: 90%;
|
|
}
|
|
#timeline:before {
|
|
left: 0;
|
|
}
|
|
#timeline .timeline-item .timeline-content {
|
|
width: 90%;
|
|
float: right;
|
|
}
|
|
#timeline .timeline-item .timeline-content:before, #timeline .timeline-item .timeline-content.right:before {
|
|
left: 10%;
|
|
margin-left: -6px;
|
|
border-left: 0;
|
|
border-right: 7px solid #1abc9c;
|
|
}
|
|
#timeline .timeline-item .timeline-icon {
|
|
left: 0;
|
|
}
|
|
}
|
|
|
|
|