mirror of
https://github.com/google/material-design-lite.git
synced 2024-10-26 13:11:30 +03:00
Implement cards
This commit is contained in:
Alexander Surma
parent
dc55919517
commit
d760292427
@ -29,54 +29,20 @@
|
||||
<link href='//fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&lang=en' rel='stylesheet' type='text/css'>
|
||||
<link rel="stylesheet" href="material.min.css">
|
||||
<link rel="stylesheet" href="../spacing.css">
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
<style>
|
||||
#view-source {
|
||||
position: fixed;
|
||||
display: block;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
margin-right: 20px;
|
||||
margin-bottom: 20px;
|
||||
margin-right: 40px;
|
||||
margin-bottom: 40px;
|
||||
z-index: 900;
|
||||
}
|
||||
body {
|
||||
font-family: 'Roboto';
|
||||
}
|
||||
header.wsk-layout__header {
|
||||
height: 40vh;
|
||||
width: 100%;
|
||||
max-height: 400px;
|
||||
background: url('http://placekitten.com/2048/700') center center;
|
||||
background-size: cover;
|
||||
flex-shrink: 0;
|
||||
position: relative;
|
||||
}
|
||||
.wsk-layout__tab-bar-container {
|
||||
overflow: visible;
|
||||
height: 96px;
|
||||
}
|
||||
.wsk-layout__tab-bar-button {
|
||||
display: none;
|
||||
}
|
||||
.wsk-layout__tab-bar {
|
||||
overflow: visible;
|
||||
position: static;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
.wsk-layout__tab-bar a {
|
||||
height: 100%;
|
||||
line-height: 96px;
|
||||
}
|
||||
#mail {
|
||||
position: absolute;
|
||||
right: 40px;
|
||||
top: -28px;
|
||||
z-index: 999;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<body class="wsk-color--blue-grey-700">
|
||||
<div class="wsk-layout wsk-js-layout">
|
||||
<header class="wsk-layout__header wsk-layout__header--scroll">
|
||||
</header>
|
||||
@ -89,7 +55,40 @@
|
||||
</div>
|
||||
<main class="wsk-layout__content">
|
||||
<div class="wsk-layout__tab-panel is-active" id="about-panel">
|
||||
<h1>About</h1>
|
||||
<header>
|
||||
<h1>Call of the Wild</h1>
|
||||
<h2>Experience the new</h2>
|
||||
</header>
|
||||
<section class="squares">
|
||||
<div class="square">
|
||||
<footer class="wsk-color--blue-grey-700">
|
||||
<button class="wsk-button wsk-js-button wsk-button--icon wsk-js-ripple-effect"><span class="wsk-icon wsk-icon--arrow-forward"></span></button>
|
||||
<h3>Escape</h3>
|
||||
<p>Lorem commodo do eiusmod anim quis.</p>
|
||||
</footer>
|
||||
</div>
|
||||
<div class="square">
|
||||
<footer class="wsk-color--blue-grey-700">
|
||||
<button class="wsk-button wsk-js-button wsk-button--icon wsk-js-ripple-effect"><span class="wsk-icon wsk-icon--arrow-forward"></span></button>
|
||||
<h3>Action</h3>
|
||||
<p>Lorem commodo do eiusmod anim quis.</p>
|
||||
</footer>
|
||||
</div>
|
||||
<div class="square">
|
||||
<footer class="wsk-color--blue-grey-700">
|
||||
<button class="wsk-button wsk-js-button wsk-button--icon wsk-js-ripple-effect"><span class="wsk-icon wsk-icon--arrow-forward"></span></button>
|
||||
<h3>Nature</h3>
|
||||
<p>Lorem commodo do eiusmod anim quis.</p>
|
||||
</footer>
|
||||
</div>
|
||||
<div class="square">
|
||||
<footer class="wsk-color--blue-grey-700">
|
||||
<button class="wsk-button wsk-js-button wsk-button--icon wsk-js-ripple-effect"><span class="wsk-icon wsk-icon--arrow-forward"></span></button>
|
||||
<h3>Discovery</h3>
|
||||
<p>Lorem commodo do eiusmod anim quis.</p>
|
||||
</footer>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<div class="wsk-layout__tab-panel" id="experience-panel">
|
||||
<h1>Experience</h1>
|
||||
|
||||
95
templates/general/styles.css
Normal file
95
templates/general/styles.css
Normal file
@ -0,0 +1,95 @@
|
||||
body {
|
||||
font-family: 'Roboto';
|
||||
color: white;
|
||||
}
|
||||
header.wsk-layout__header {
|
||||
height: 40vh;
|
||||
width: 100%;
|
||||
max-height: 400px;
|
||||
background: url('http://placehold.it/2048x700/263238/FFFFFF') center center;
|
||||
background-size: cover;
|
||||
flex-shrink: 0;
|
||||
position: relative;
|
||||
}
|
||||
.wsk-layout__tab-bar-container {
|
||||
overflow: visible;
|
||||
height: 96px;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
.wsk-layout__tab-bar-button {
|
||||
display: none;
|
||||
}
|
||||
.wsk-layout__tab-bar {
|
||||
overflow: visible;
|
||||
position: static;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
.wsk-layout__tab-bar a {
|
||||
height: 100%;
|
||||
line-height: 96px;
|
||||
}
|
||||
#mail {
|
||||
position: absolute;
|
||||
right: 40px;
|
||||
top: -28px;
|
||||
z-index: 999;
|
||||
}
|
||||
main > .wsk-layout__tab-panel > header {
|
||||
width: 100%;
|
||||
padding: 72px;
|
||||
}
|
||||
main > .wsk-layout__tab-panel > header > *:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.squares {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
align-content: flex-start;
|
||||
}
|
||||
.squares > .square {
|
||||
width: 25vw;
|
||||
min-height: 25vw;
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-end;
|
||||
}
|
||||
.squares > .square:nth-child(1) {
|
||||
background: url('http://placehold.it/500/D81B60/FFFFFF') center center;
|
||||
background-size: cover;
|
||||
}
|
||||
.squares > .square:nth-child(2) {
|
||||
background: url('http://placehold.it/500/C2185B/FFFFFF') center center;
|
||||
background-size: cover;
|
||||
}
|
||||
.squares > .square:nth-child(3) {
|
||||
background: url('http://placehold.it/500/AD1457/FFFFFF') center center;
|
||||
background-size: cover;
|
||||
}
|
||||
.squares > .square:nth-child(4) {
|
||||
background: url('http://placehold.it/500/880E4F/FFFFFF') center center;
|
||||
background-size: cover;
|
||||
}
|
||||
.square > footer {
|
||||
position: relative;
|
||||
height: 20%;
|
||||
width: 100%;
|
||||
opacity: 0.7;
|
||||
padding: 20px;
|
||||
}
|
||||
.square > footer > button {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;;
|
||||
}
|
||||
.square > footer h3 {
|
||||
font-size: 1.1em;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.square > footer > *:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
@ -9,8 +9,6 @@ h1, h2, h3 {
|
||||
p {
|
||||
margin-bottom: 20px;
|
||||
letter-spacing: .1px;
|
||||
-webkit-column-count: 2;
|
||||
-webkit-column-gap: 30px;
|
||||
}
|
||||
|
||||
.demo-layout__content {
|
||||
|
||||
@ -58,7 +58,10 @@
|
||||
.wsk-layout__header.is-compact #my_text_changes:after {
|
||||
content: " \0000a0 > \0000a0 Starter Template";
|
||||
}
|
||||
|
||||
p {
|
||||
-webkit-column-count: 2;
|
||||
-webkit-column-gap: 30px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user