Skip to content

Instantly share code, notes, and snippets.

@NimaBoscarino

NimaBoscarino/index.1.html

Created February 22, 2019 19:28
Show Gist options
  • Save NimaBoscarino/78e4cee6678c803621f6bd332952904e to your computer and use it in GitHub Desktop.
Save NimaBoscarino/78e4cee6678c803621f6bd332952904e to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.1.html
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" media="screen" href="main.css">
</head>
<body>
<div>
</div>
<div>
</div>
<div>
</div>
</body>
</html>
Raw
index.2.html
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" media="screen" href="main.css">
</head>
<body>
<div class="container">
<div id="rebecca">
Rebecca
</div>
<div id="roger">
Roger
</div>
<div id="magda">
Magda
</div>
</div>
</body>
</html>
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" media="screen" href="main.css">
</head>
<body>
<header>
</header>
<div class="chunk">
<aside></aside>
<article></article>
<aside></aside>
</div>
<footer>
</footer>
</body>
</html>
Raw
main.1.css
body {
background-color: purple;
}
div {
height: 100px;
width: 50%;
background-color: yellow;
margin: 10px;
}
@media screen and (max-width: 600px) {
div {
background-color: green;
width: 100%;
}
body {
background-color: papayawhip;
}
}
Raw
main.2.css
body {
background-color: burlywood;
}
.container {
background: palevioletred;
padding: 10px;
display: flex;
flex-direction: row;
}
.container div {
width: 150px;
height: 150px;
margin: 5px;
color: white;
font-size: 20px;
}
#rebecca {
background: aquamarine;
}
#roger {
background: chocolate;
}
#magda {
background: firebrick;
}
@media screen and (max-width: 600px) {
.container {
flex-direction: column;
}
}
Raw
main.css
/* Nima's reset */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
header {
height: 20%;
background: #E57A44;
}
.chunk {
height: 60%;
background: #D6DBB2;
display: flex;
flex-direction: row;
}
aside, article {
height: 100%;
}
aside {
width: 30%;
background: #E3D985;
}
article {
width: 40%;
background: #422040;
}
footer {
height: 20%;
background: #BCD8C1;
}
@media screen and (max-width: 600px) {
.chunk {
flex-direction: column;
}
aside, article {
width: 100%;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment