0byt3m1n1
Path:
C:
/
wamp64
/
www
/
id
/
css
/
[
Home
]
File: style.css
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,700); * { box-sizing: border-box; } body { background-image: -webkit-linear-gradient(left, #034378, #2d4e68); background-image: linear-gradient(to right, #034378, #2d4e68); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; height: 100vh; font-family: "Open Sans", sans-serif; } a { text-decoration: none; } h1 { font-family: "Open Sans", sans-serif; font-weight: 300; } .row { max-width: 900px; margin: 50px auto 0; } .card { float: left; padding: 0 1.7rem; width: 50%; } .card .menu-content { margin: 0; padding: 0; list-style-type: none; } .card .menu-content::before, .card .menu-content::after { content: ''; display: table; } .card .menu-content::after { clear: both; } .card .menu-content li { display: inline-block; } .card .menu-content a { color: #fff; } .card .menu-content span { position: absolute; left: 50%; top: 0; font-size: 10px; font-weight: 700; font-family: 'Open Sans'; -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); } .card .wrapper { background-color: #fff; min-height: 540px; position: relative; overflow: hidden; box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.2); } .card .wrapper:hover .data { -webkit-transform: translateY(0); transform: translateY(0); } .card .data { position: absolute; bottom: 0; width: 100%; -webkit-transform: translateY(calc(70px + 1em)); transform: translateY(calc(70px + 1em)); -webkit-transition: -webkit-transform 0.3s; transition: -webkit-transform 0.3s; transition: transform 0.3s; transition: transform 0.3s, -webkit-transform 0.3s; } .card .data .content { padding: 1em; position: relative; z-index: 1; } .card .author { font-size: 12px; } .card .title { margin-top: 10px; } .card .text { height: 70px; margin: 0; } .card input[type='checkbox'] { display: none; } .card input[type='checkbox']:checked + .menu-content { -webkit-transform: translateY(-60px); transform: translateY(-60px); } .example-1 .wrapper { background: url(https://hd.unsplash.com/photo-1463415268136-e52a5af54519) center/cover repeat; border: solid 1px red; background: repeating-linear-gradient( 90deg, #fff, #fff 20px, #228B22 20px, #228B22 40px); height: 200px; } .example-1 .date { position: absolute; top: 0; left: 0; background-color: #FFFFFF; color: #fff; padding: 0.8em; margin-top:3%; } .example-1 .date span { display: block; text-align: center; } .example-1 .date .day { font-weight: 700; font-size: 24px; text-shadow: 2px 3px 2px rgba(0, 0, 0, 0.18); } .example-1 .date .month { text-transform: uppercase; } .example-1 .date .month, .example-1 .date .year { font-size: 12px; } .example-1 .content { background-color: #fff; box-shadow: 0 5px 30px 10px rgba(0, 0, 0, 0.3); } .example-1 .title a { color: gray; } .example-1 .menu-button { position: absolute; z-index: 999; top: 16px; right: 16px; width: 25px; text-align: center; cursor: pointer; } .example-1 .menu-button span { width: 5px; height: 5px; background-color: gray; color: gray; position: relative; display: inline-block; border-radius: 50%; } .example-1 .menu-button span::after, .example-1 .menu-button span::before { content: ''; display: block; width: 5px; height: 5px; background-color: currentColor; position: absolute; border-radius: 50%; } .example-1 .menu-button span::before { left: -10px; } .example-1 .menu-button span::after { right: -10px; } .example-1 .menu-content { text-align: center; position: absolute; top: 0; left: 0; width: 100%; z-index: -1; -webkit-transition: -webkit-transform 0.3s; transition: -webkit-transform 0.3s; transition: transform 0.3s; transition: transform 0.3s, -webkit-transform 0.3s; -webkit-transform: translateY(0); transform: translateY(0); } .example-1 .menu-content li { width: 33.333333%; float: left; background-color: #77d7b9; height: 60px; position: relative; } .example-1 .menu-content a { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); font-size: 24px; } .example-1 .menu-content span { top: -10px; } .example-2 .wrapper { background: url(images/logo.png) center/cover repeat; } .example-2 .wrapper:hover .menu-content span { -webkit-transform: translate(-50%, -10px); transform: translate(-50%, -10px); opacity: 1; } .example-2 .header { color: #fff; padding: 1em; } .example-2 .header::before, .example-2 .header::after { content: ''; display: table; } .example-2 .header::after { clear: both; } .example-2 .header .date { float: left; font-size: 12px; } .example-2 .menu-content { float: right; } .example-2 .menu-content li { margin: 0 5px; position: relative; } .example-2 .menu-content span { -webkit-transition: all 0.3s; transition: all 0.3s; opacity: 0; } .example-2 .data { color: #fff; -webkit-transform: translateY(calc(70px + 4em)); transform: translateY(calc(70px + 4em)); } .example-2 .title a { color: #fff; } .example-2 .button { display: block; width: 100px; margin: 2em auto 1em; text-align: center; font-size: 12px; color: #fff; line-height: 1; position: relative; font-weight: 700; } .example-2 .button::after { content: '\2192'; opacity: 0; position: absolute; right: 0; top: 50%; -webkit-transform: translate(0, -50%); transform: translate(0, -50%); -webkit-transition: all 0.3s; transition: all 0.3s; } .example-2 .button:hover::after { -webkit-transform: translate(5px, -50%); transform: translate(5px, -50%); opacity: 1; }