0byt3m1n1
Path:
C:
/
wamp64
/
www
/
id
/
scss
/
[
Home
]
File: style.scss
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,700); // Variables $regal-blue: #034378; $san-juan: #2d4e68; $bermuda: #77d7b9; $white: #fff; $black: #000; $open-sans: 'Open Sans', sans-serif; // clear-fix mixin @mixin cf { &::before, &::after { content: ''; display: table; } &::after { clear: both; } } * { box-sizing: border-box; } body { background-image: linear-gradient(to right, $regal-blue, $san-juan); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; height: 100vh; font-family: $open-sans; } a { text-decoration: none; } h1 { font-family: $open-sans; font-weight: 300; } .row { max-width: 900px; margin: 50px auto 0; } // Base styles .card { float: left; padding: 0 1.7rem; width: 50%; .menu-content { @include cf; margin: 0; padding: 0; list-style-type: none; li { display: inline-block; } a { color: $white; } span { position: absolute; left: 50%; top: 0; font-size: 10px; font-weight: 700; font-family: 'Open Sans'; transform: translate(-50%, 0); } } .wrapper { background-color: $white; min-height: 540px; position: relative; overflow: hidden; box-shadow: 0 19px 38px rgba($black, 0.3), 0 15px 12px rgba($black, 0.2); &:hover { .data { transform: translateY(0); } } } .data { position: absolute; bottom: 0; width: 100%; transform: translateY(calc(70px + 1em)); transition: transform 0.3s; .content { padding: 1em; position: relative; z-index: 1; } } .author { font-size: 12px; } .title { margin-top: 10px; } .text { height: 70px; margin: 0; } input[type='checkbox'] { display: none; } input[type='checkbox']:checked + .menu-content { transform: translateY(-60px); } } // First example styles .example-1 { .wrapper { background: url(https://hd.unsplash.com/photo-1463415268136-e52a5af54519) center / cover no-repeat; } .date { position: absolute; top: 0; left: 0; background-color: $bermuda; color: $white; padding: 0.8em; span { display: block; text-align: center; } .day { font-weight: 700; font-size: 24px; text-shadow: 2px 3px 2px rgba($black, 0.18); } .month { text-transform: uppercase; } .month, .year { font-size: 12px; } } .content { background-color: $white; box-shadow: 0 5px 30px 10px rgba($black, 0.3); } .title { a { color: lighten($black, 50%); } } .menu-button { position: absolute; z-index: 999; top: 16px; right: 16px; width: 25px; text-align: center; cursor: pointer; span { width: 5px; height: 5px; background-color: lighten($black, 50%); color: lighten($black, 50%); position: relative; display: inline-block; border-radius: 50%; &::after, &::before { content: ''; display: block; width: 5px; height: 5px; background-color: currentColor; position: absolute; border-radius: 50%; } &::before { left: -10px; } &::after { right: -10px; } } } .menu-content { text-align: center; position: absolute; top: 0; left: 0; width: 100%; z-index: -1; transition: transform 0.3s; transform: translateY(0); li { width: 33.333333%; float: left; background-color: $bermuda; height: 60px; position: relative; } a { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 24px; } span { top: -10px; } } } // Second example styles .example-2 { .wrapper { background: url(https://tvseriescritic.files.wordpress.com/2016/10/stranger-things-bicycle-lights-children.jpg) center / cover no-repeat; &:hover { .menu-content { span { transform: translate(-50%, -10px); opacity: 1; } } } } .header { @include cf; color: $white; padding: 1em; .date { float: left; font-size: 12px; } } .menu-content { float: right; li { margin: 0 5px; position: relative; } span { transition: all 0.3s; opacity: 0; } } .data { color: $white; transform: translateY(calc(70px + 4em)); } .title { a { color: $white; } } .button { display: block; width: 100px; margin: 2em auto 1em; text-align: center; font-size: 12px; color: $white; line-height: 1; position: relative; font-weight: 700; &::after { content: '\2192'; opacity: 0; position: absolute; right: 0; top: 50%; transform: translate(0, -50%); transition: all 0.3s; } &:hover { &::after { transform: translate(5px, -50%); opacity: 1; } } } }