Skip to content

Instantly share code, notes, and snippets.

@hini-manan

hini-manan/index.html

Created December 14, 2016 20:46
Show Gist options
  • Save hini-manan/fb119de59393568b5a3ff782e10a2b73 to your computer and use it in GitHub Desktop.
Save hini-manan/fb119de59393568b5a3ff782e10a2b73 to your computer and use it in GitHub Desktop.
Download ZIP
Exported from Popcode. Click to import: https://popcode.org/?gist=fb119de59393568b5a3ff782e10a2b73
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Cuatro boxes</title>
</head>
<body>
<div id="redbox"></div>
<div id="greenbox"></div>
<div id="bluebox"></div>
<div id="yellowbox"></div>
<div id="tealbox"></div>
<div id="turquoisebox"></div>
<div id="pinkbox"></div>
<div id="purplebox"></div>
</body>
</html>
Raw
styles.css
#redbox{
background: linear-gradient(teal, yellow);
width: 300px;
height: 300px;
float: left;
}
#greenbox{
background: linear-gradient(teal, yellow);
width: 300px;
height: 300px;
float: left;
}
#bluebox{
background: linear-gradient(teal, yellow);
width: 300px;
height: 300px;
float: left;
}
#yellowbox{
background: linear-gradient(teal, yellow);
width: 300px;
height: 300px;
float: left;
}
#tealbox{
background: linear-gradient(yellow, #98281D);
width: 300px;
height: 300px;
float: right;
}
#turquoisebox{
background: linear-gradient(yellow, #98281D);
width: 300px;
height: 300px;
float: right;
}
#pinkbox{
background: linear-gradient(yellow, #98281D);
width: 300px;
height: 300px;
float: right;
}
#purplebox{
background: linear-gradient(yellow, #98281D);
width: 300px;
height: 300px;
float: right;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment