Created
January 25, 2019 01:38
-
-
Save sorie/f0c10e43d4146169d38c85b104c344f7 to your computer and use it in GitHub Desktop.
JS Bin // source https://jsbin.com/yopirik
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<meta name="viewport" content="width=device-width"> | |
<meta name="viewport" content="width=device-width, initial-scale=1"> | |
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,600" rel="stylesheet"> | |
<link href="https://cdnjs.cloudflare.com/ajax/libs/tachyons/4.9.0/tachyons.css" rel="stylesheet"> | |
<title>JS Bin</title> | |
<style id="jsbin-css"> | |
.container * { | |
/* outline: 1px solid red; */ | |
} | |
body { | |
font-family: 'Montserrat', sans-serif; | |
} | |
img { | |
display: block; | |
} | |
.container { | |
margin-top: 32px; | |
margin-bottom: 32px; | |
display: grid; | |
grid-template-columns: 100px 1fr 1fr 150px; | |
grid-template-rows: repeat(3, minmax(100px, max-content)); | |
grid-gap: 16px; | |
grid-template-areas: 'h h h i' | |
't p p i' | |
't b b b' | |
} | |
.header { | |
grid-area: h; | |
} | |
.trophies { | |
grid-area: t; | |
img { | |
width: 36px; | |
} | |
} | |
.info { | |
grid-area: i; | |
} | |
.photo { | |
grid-area: p; | |
} | |
.bio { | |
grid-area: b; | |
} | |
</style> | |
</head> | |
<body> | |
<div class="container measure-wide center fw3"> | |
<div class="header pv4"> | |
<h2 class="mt0 fw4 f5 mb0">Santiago, Chile</h2> | |
<h1 class="mv0 fw4 f2">Kiara</h1> | |
</div> | |
<div class="trophies flex flex-column justify-around items-center ba b--black-40 bw1 br2 pa3"> | |
<img class="mb3" src="https://www.dropbox.com/s/pxnehrc69ve1se9/004-care.svg?raw=1" alt="care"> | |
<img class="mb3" src="https://www.dropbox.com/s/n2kc6kr322pp0wq/001-medal.svg?raw=1" alt="star"> | |
<img class="mb3" src="https://www.dropbox.com/s/fzxgnbwdbta0ip3/002-bone.svg?raw=1" alt="bone"> | |
<img class="mb3" src="https://www.dropbox.com/s/gjxrsw44cmqgf7a/006-pet-house.svg?raw=1" alt="pet house"> | |
<img class="mb3" src="https://www.dropbox.com/s/ldjxz3gir0sciqo/005-dog-food.svg?raw=1" alt="food"> | |
<img src="https://www.dropbox.com/s/vj2nnx5nlhm9udz/003-elizabethan-collar.svg?raw=1" alt="collar"> | |
</div> | |
<div class="info flex pl3 ba b--black-40 bw1 br2"> | |
<dl class="flex flex-column justify-around"> | |
<div><dt class="ttu tracked f7 fw6 black-80 mb1">Gender</dt> | |
<dd class="ml0">Feminine</dd> | |
</div> | |
<div><dt class="ttu tracked f7 fw6 black-80 mb1">Breed</dt> | |
<dd class="ml0">Yorkshire</dd> | |
</div> | |
<div><dt class="ttu tracked f7 fw6 black-80 mb1">Age</dt> | |
<dd class="ml0">8 Years</dd> | |
</div> | |
<div><dt class="ttu tracked f7 fw6 black-80 mb1">Family</dt> | |
<dd class="ml0">Henriquez</dd> | |
</div> | |
</dl> | |
</div> | |
<div class="photo br2"> | |
<img src="https://www.dropbox.com/s/qpvv9rkvtbpw3p0/kiaraYyo.jpg?raw=1" alt="Kiara and me" class='br2'> | |
</div> | |
<div class="bio bg-purple pa3 br2"> | |
<p class="lh-copy f5 white mv0">Kiara enjoys long naps on the beach (or any other place, really, she's not very demanding on that matter). Likes to to sunbath a lot. She's friendly with other dogs and very patient. She's a furry, chubby princess.</p> | |
</div> | |
</div> | |
<script id="jsbin-source-css" type="text/css">.container * { | |
/* outline: 1px solid red; */ | |
} | |
body { | |
font-family: 'Montserrat', sans-serif; | |
} | |
img { | |
display: block; | |
} | |
.container { | |
margin-top: 32px; | |
margin-bottom: 32px; | |
display: grid; | |
grid-template-columns: 100px 1fr 1fr 150px; | |
grid-template-rows: repeat(3, minmax(100px, max-content)); | |
grid-gap: 16px; | |
grid-template-areas: 'h h h i' | |
't p p i' | |
't b b b' | |
} | |
.header { | |
grid-area: h; | |
} | |
.trophies { | |
grid-area: t; | |
img { | |
width: 36px; | |
} | |
} | |
.info { | |
grid-area: i; | |
} | |
.photo { | |
grid-area: p; | |
} | |
.bio { | |
grid-area: b; | |
}</script> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.container * { | |
/* outline: 1px solid red; */ | |
} | |
body { | |
font-family: 'Montserrat', sans-serif; | |
} | |
img { | |
display: block; | |
} | |
.container { | |
margin-top: 32px; | |
margin-bottom: 32px; | |
display: grid; | |
grid-template-columns: 100px 1fr 1fr 150px; | |
grid-template-rows: repeat(3, minmax(100px, max-content)); | |
grid-gap: 16px; | |
grid-template-areas: 'h h h i' | |
't p p i' | |
't b b b' | |
} | |
.header { | |
grid-area: h; | |
} | |
.trophies { | |
grid-area: t; | |
img { | |
width: 36px; | |
} | |
} | |
.info { | |
grid-area: i; | |
} | |
.photo { | |
grid-area: p; | |
} | |
.bio { | |
grid-area: b; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment