Skip to content

Instantly share code, notes, and snippets.

@HeinPauwelyn
Forked from michielzyde96/index
Last active January 4, 2017 12:10
Show Gist options
  • Save HeinPauwelyn/7b6596a40ab920d59eaf8a5d862d32ad to your computer and use it in GitHub Desktop.
Save HeinPauwelyn/7b6596a40ab920d59eaf8a5d862d32ad to your computer and use it in GitHub Desktop.
.seriescontainer {
padding: 0;
overflow: hidden;
float: left;
position: relative; }
@media (min-width: 768px) {
.seriescontainer {
width: 50%; } }
@media (min-width: 992px) {
.seriescontainer {
width: 33.333333333%; } }
@media (min-width: 1200px) {
.seriescontainer {
width: 25%; } }
.seriescontainer.seriescontainer-big {
width: 50%; }
@media (max-width: 768px) {
.seriescontainer.seriescontainer-big {
width: 100%; } }
.seriescontainer .seriescontainer_wrapper img {
width: 100%;
height: 100%;
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
-webkit-filter: blur(0);
filter: blur(0); }
.seriescontainer .seriescontainer_wrapper img:hover {
-webkit-transform: scale(1.1);
transform: scale(1.1);
opacity: 1; }
.seriescontainer .seriescontainer_content {
position: absolute;
width: 100%;
background-color: rgba(0, 0, 0, 0.5);
bottom: 0px; }
.seriescontainer .seriescontainer_content h3, .seriescontainer .seriescontainer_content p {
margin: 20px 5px;
padding: 0; }
.seriescontainer .seriescontainer_content h3 {
text-align: center;
text-transform: uppercase;
width: 70%;
float: left; }
.seriescontainer .seriescontainer_content p {
width: 20%;
float: right;
font-size: 1.5em;
text-align: right; }
.seriescontainer .seriescontainer_content p span {
margin: 0 5px; }
.submenu {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-pack: distribute;
justify-content: space-around; }
.submenu div {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column; }
@media (max-width: 768px) {
.submenu {
font-size: 0.6em; } }
.submenu .submenu-item_active,
.submenu .active {
border-bottom: 3px solid #92CDCF; }
.submenu a {
padding: 10px 0;
position: relative;
display: inline-block;
margin: 15px 25px;
color: #EEEFF7;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 2em;
text-align: center;
cursor: pointer; }
.submenu a .shadow-submenu_counter {
display: inline-block;
padding: 2px 5px;
font-size: 0.9em;
font-weight: 600;
line-height: 1;
color: #666;
background-color: #eee;
border-radius: 20px; }
@media (max-width: 768px) {
.submenu a .shadow-submenu_counter {
font-size: 12px; } }
.submenu a:not(.submenu-item_active)::after, .submenu a:not(.active)::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 2px;
background: #92CDCF;
opacity: 0;
-webkit-transform: translateY(5px);
transform: translateY(5px);
-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
transition: opacity 0.3s, -webkit-transform 0.3s;
transition: transform 0.3s, opacity 0.3s;
transition: transform 0.3s, opacity 0.3s, -webkit-transform 0.3s;
pointer-events: none; }
.submenu a:not(.submenu-item_active):hover::after, .submenu a:not(.submenu-item_active):focus::after, .submenu a:not(.active):hover::after, .submenu a:not(.active):focus::after {
opacity: 1;
-webkit-transform: translateY(0px);
transform: translateY(0px); }
.row {
margin: 0; }
.row.bodybackground {
background-color: #31353D; }
.container-fluid {
padding: 0; }
.container-fluid .bg-splice {
height: 450px; }
.container-fluid .bg-splice img {
width: 100%;
height: 100%;
position: absolute;
z-index: -1; }
@media (max-width: 1200px) {
.container-fluid .bg-splice {
height: 400px; } }
.shadow {
background-color: rgba(0, 0, 0, 0.5);
margin-top: 40px; }
.container-profile {
text-align: center;
position: absolute;
top: 140px;
margin: 0 auto;
width: 100%;
left: 0;
z-index: 1;
overflow: hidden; }
.container-profile h4 {
margin-bottom: 20px; }
.container-profile img {
border: 5px solid #92CDCF;
border-radius: 50%;
width: 200px;
height: 200px; }
.achievementscontainer {
padding: 0 40px;
float: left;
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center; }
@media (min-width: 768px) {
.achievementscontainer {
width: 50%; } }
@media (min-width: 992px) {
.achievementscontainer {
width: 33.333333333%; } }
@media (min-width: 1200px) {
.achievementscontainer {
width: 25%; } }
.achievementscontainer p {
text-align: center; }
.bold {
font-weight: bold; }
svg {
width: 200px; }
.bronze {
fill: #D1A684; }
.silver {
fill: #B4B8BC; }
.gold {
fill: #FFCC01; }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment