248 lines
3.8 KiB
CSS
248 lines
3.8 KiB
CSS
/*
|
|
* This portfolio theme is derived from the template
|
|
* 'Developer - Responsive Website Template for Developers' version: 1.5
|
|
* developed by Xiaoying Riley (@3rdwave_themes) under 'Creative Commons
|
|
* Attribution 3.0 License'
|
|
*/
|
|
|
|
/* Only need few styles from Bootstrap */
|
|
|
|
.row {
|
|
margin-left: -15px;
|
|
margin-right: -15px;
|
|
}
|
|
|
|
.col-xs-12 {
|
|
width: 100%;
|
|
}
|
|
|
|
.col-sm-4,
|
|
.col-md-4,
|
|
.col-sm-8,
|
|
.col-md-8,
|
|
.col-xs-12 {
|
|
min-height: 1px;
|
|
padding-left: 15px;
|
|
padding-right: 15px;
|
|
position: relative;
|
|
}
|
|
|
|
@media (min-width: 992px) {
|
|
.col-md-4,
|
|
.col-md-8 {
|
|
float: left;
|
|
}
|
|
.col-md-8 {
|
|
width: 66.66666667%;
|
|
}
|
|
.col-md-4 {
|
|
width: 33.33333333%;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
.col-sm-8 {
|
|
width: 66.66666667%;
|
|
}
|
|
}
|
|
|
|
.portfolio-container {
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
max-width: 38rem;
|
|
padding-left: 1rem;
|
|
padding-right: 1rem;
|
|
}
|
|
|
|
.portfolio-content {
|
|
padding-bottom: 2rem;
|
|
padding-top: 2rem;
|
|
}
|
|
|
|
@media (min-width: 48em) {
|
|
.portfolio-content {
|
|
margin-left: 20rem;
|
|
margin-right: 2rem;
|
|
max-width: 38rem;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 64em) {
|
|
.portfolio-content {
|
|
margin-left: 20rem;
|
|
margin-right: 2rem;
|
|
max-width: 44rem;
|
|
}
|
|
}
|
|
|
|
.btn {
|
|
font-weight: bold;
|
|
padding: 8px 16px;
|
|
-moz-transition: all 0.4s ease-in-out;
|
|
-ms-transition: all 0.4s ease-in-out;
|
|
-o-transition: all 0.4s ease-in-out;
|
|
-webkit-transition: all 0.4s ease-in-out;
|
|
}
|
|
|
|
.btn:focus {
|
|
color: #fff;
|
|
}
|
|
|
|
.btn-cta-secondary {
|
|
background: #479FC8;
|
|
border: 1px solid #479FC8;
|
|
color: #fff;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.btn-cta-secondary:hover {
|
|
background: #3893bd;
|
|
border: 1px solid #3893bd;
|
|
color: #fff;
|
|
}
|
|
|
|
.text-left {
|
|
text-align: left;
|
|
}
|
|
|
|
/* ======= Sections======= */
|
|
|
|
.section {
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.section .section-inner {
|
|
background: #fff;
|
|
padding: 30px;
|
|
}
|
|
|
|
.section .heading {
|
|
margin-top: 0;
|
|
margin-bottom: 30px;
|
|
color: #303030;
|
|
font-size: 2.125rem;
|
|
}
|
|
|
|
.item {
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.item .title {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.item .title a {
|
|
color: #303030;
|
|
}
|
|
|
|
.item .title a:hover {
|
|
color: #5f6b77;
|
|
}
|
|
|
|
.item .project-image:hover {
|
|
-webkit-opacity: 0.8;
|
|
-moz-opacity: 0.8;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.divider {
|
|
margin-bottom: 60px;
|
|
}
|
|
|
|
.featured {
|
|
margin-bottom: 60px;
|
|
}
|
|
|
|
.featured .title {
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.featured .summary,
|
|
.desc .summary {
|
|
margin-bottom: 30px;
|
|
color: #778492;
|
|
}
|
|
|
|
.desc .summary {
|
|
font-style: italic;
|
|
}
|
|
|
|
.featured img {
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.featured .desc {
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.featured-image {
|
|
position: relative;
|
|
}
|
|
|
|
.featured-image .text {
|
|
background: #3AAA64;
|
|
color: #fff;
|
|
}
|
|
|
|
.featured-image .ribbon {
|
|
position: absolute;
|
|
top: -4px;
|
|
right: -4px;
|
|
width: 110px;
|
|
height: 110px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.featured-image .ribbon .text {
|
|
position: relative;
|
|
left: -8px;
|
|
top: 18px;
|
|
width: 158px;
|
|
padding: 10px 10px;
|
|
font-size: 15px;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
text-transform: uppercase;
|
|
color: #fff;
|
|
background-color: #479FC8;
|
|
-webkit-transform: rotate(45deg) translate3d(0, 0, 0);
|
|
-moz-transform: rotate(45deg) translate3d(0, 0, 0);
|
|
-ms-transform: rotate(45deg) translate3d(0, 0, 0);
|
|
-o-transform: rotate(45deg) translate3d(0, 0, 0);
|
|
transform: rotate(45deg) translate3d(0, 0, 0);
|
|
}
|
|
|
|
.featured-image .ribbon .text:before,
|
|
.featured-image .ribbon .text:after {
|
|
border-left: 5px solid transparent;
|
|
border-right: 5px solid transparent;
|
|
border-top: 5px solid #276582;
|
|
bottom: -5px;
|
|
content: '';
|
|
position: absolute;
|
|
}
|
|
|
|
.featured-image .ribbon .text:before {
|
|
left: 0;
|
|
}
|
|
|
|
.featured-image .ribbon .text:after {
|
|
right: 0;
|
|
}
|
|
|
|
/* Extra small devices (phones, less than 768px) */
|
|
|
|
@media (max-width: 767px) {
|
|
.project-image {
|
|
margin-bottom: 15px;
|
|
}
|
|
}
|
|
|
|
/* Medium devices (desktops, 992px and up) */
|
|
|
|
@media (min-width: 992px) {
|
|
.portfolio-container {
|
|
width: 1360px;
|
|
}
|
|
}
|