Skip to content

Instantly share code, notes, and snippets.

@brunoguerra

brunoguerra/Html cardboard fase 1.html

Last active November 17, 2019 20:30
Show Gist options
  • Save brunoguerra/3d725af4139b3d38f880af6dbdabde5b to your computer and use it in GitHub Desktop.
Save brunoguerra/3d725af4139b3d38f880af6dbdabde5b to your computer and use it in GitHub Desktop.
Download ZIP
Cardboard Plain Js
Raw
Html cardboard fase 1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
<link rel="stylesheet" href="style.css">
<style>
* {
padding: 0px;
margin: 0px;
}
html, body {
height: 100%;
}
*, *::before, *::after {
box-sizing: border-box;
}
.board {
flex: 1;
display: flex;
flex-direction: row;
background-color: SlateGray;
height: 100%;
overflow: hidden;
}
.list, .card .title {
border-top-left-radius: 0.5rem;
border-top-right-radius: 0.5rem;
}
.list, .card .content {
border-bottom-left-radius: 0.5rem;
border-bottom-right-radius: 0.5rem;
}
.list {
display: flex;
flex-direction: column;
border: white 1px solid;
padding: 0.5rem;
margin: 0.3rem;
background-color: Wheat;
min-width: 20rem;
max-width: 60rem;
}
.card {
display: flex;
flex-direction: column;
max-height: 15rem;
padding: 2px;
}
.card .title {
font-family: 'Bebas Neue', cursive;
display: flex;
align-items: center;
min-height: 3rem;
background-color: orangered;
padding: 0.4rem;
}
.card .content {
font-family: 'Kulim Park', sans-serif;
min-height: 10rem;
background-color: orange;
padding: 0.4rem;
}
</style>
</head>
<body>
<div class="board" id="boardjsplain">
<div class="list">
<div class="card">
<div class="title">
Meu super card
</div>
<div class="content">
Content
</div>
</div>
<div class="card">
<div class="title">
Card 2
</div>
<div class="content">
Content
</div>
</div>
</div>
<div class="list">
</div>
<div class="list">
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment