Skip to content

Instantly share code, notes, and snippets.

@cesine

cesine/index.html

Created November 6, 2016 16:21
Show Gist options
  • Save cesine/b46eefd62cc8ac7e8b339c2fcf59fe43 to your computer and use it in GitHub Desktop.
Save cesine/b46eefd62cc8ac7e8b339c2fcf59fe43 to your computer and use it in GitHub Desktop.
Download ZIP
Exported from Popcode. Click to import: https://popcode.org/?gist=b46eefd62cc8ac7e8b339c2fcf59fe43
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Position</title>
</head>
<body>
<div class='full-sundae'>
<div id="top-cherry" class='cherry'></div>
<div class='whipped-cream'></div>
<div class='ice-cream-scoop'></div>
<div class='ice-cream-scoop'></div>
<div class='glass'>
<div class='ice-cream-scoop'></div>
<div class='ice-cream-scoop'></div>
<div class='ice-cream-scoop'></div>
</div>
</div>
</body>
</html>
Raw
styles.css
div {
border-style: solid;
border-width: 1px;
height: 1em;
width: 100px;
}
#top-cherry {
position: relative;
left: 40%;
}
.cherry {
background-color: red;
border-radius: 50px;
height: 20px;
width: 20px;
}
.whipped-cream {
background-color: yellow;
border-radius: 50px;
height:20%;
}
.full-sundae {
height:500px;
position: static;
border-width: 0px;
}
.full-sundae > .ice-cream-scoop{
height:100px;
/* display: none; */
}
.glass {
border-color: green;
border-width: 5px;
position:relative;
height:60%;
border-radius: 0px 0px 30px 30px;
}
.glass .ice-cream-scoop{
height: 33.3%;
position: relative;
}
.ice-cream-scoop {
border-color: blue;
border-radius: 50px;
}
@cesine
Copy link
Author

cesine commented Nov 6, 2016

Ice Cream Sundae css positioning tutorial

https://medium.freecodecamp.com/css-positioning-explained-by-building-an-ice-cream-sundae-831cb884bfa9#.7mwdiphfe

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment