Skip to content

Instantly share code, notes, and snippets.

@eunicekokor

eunicekokor/index.html

Created October 20, 2014 17:44
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save eunicekokor/1de07e445ecf50f7d751 to your computer and use it in GitHub Desktop.
Save eunicekokor/1de07e445ecf50f7d751 to your computer and use it in GitHub Desktop.
Download ZIP
TraderBae // source http://jsbin.com/hohaw
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TraderBae</title>
<style id="jsbin-css">
body {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
}
#header {
background: url('http://i.imgur.com/QIBNaDY.png');
background-size: 100% 100%;
width: inherit;
height: 100vh;
background-repeat:no-repeat;
top: 0;
margin-top: 0;
}
.nav {
width: 100%;
height: 50px;
background: yellow;
top: 0;
left: 0;
position: fixed;
}
.item {
margin-top: 0;
float: left;
display: inline-block;
width: 33.3333333%;
height: 33%;
position: relative;
border: .5px;
border-style: solid;
border-color: yellow;
}
.three {
top: 10px;
position: relative;
margin: 10px auto;
width: 600px;
height: 200px;
border-style: solid;
border-color: pink;
}
.content {
width: 100%;
height: 100%;
background: red;
}
#item {
display: block;
max-width: 125px;
max-height: 125px;
background-size: cover;
}
p {
margin-top: 0.3125rem;
font-weight: 400;
font-size: .8rem;
line-height: .8rem;
}
</style>
</head>
<body>
<div class="nav">hello world
<div id="header"></div></div>
<div class = "content">
<div class = "three">
<div class= "item">
item1name
<img id ="item" src="http://cdn4.purseblog.com/images/2014/04/Fendi-2Jours-Small-Shopper-Bag.jpg"></img>
</div>
<div class= "item">
item2 test to see if it does weird theings when it is too big
<img id ="item" src="http://ecx.images-amazon.com/images/I/418lFVKrE-L._SX190_CR0,0,190,246_.jpg"></img>
<p>testing shit because I am not sure how this is twerking</p>
</div>
<div class= "item">
item 3 because I am super cool and roqq
</div>
</div>
<div class = "three">
<div class= "item">
item 4!
</div>
<div class= "item">
item 5!
</div>
<div class= "item">
item 6!
</div>
</div>
<div class = "three">
<div class= "item">
</div>
<div class= "item">
</div>
<div class= "item">
</div>
</div>
</div>
<script id="jsbin-source-css" type="text/css">body {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
}
#header {
background: url('http://i.imgur.com/QIBNaDY.png');
background-size: 100% 100%;
width: inherit;
height: 100vh;
background-repeat:no-repeat;
top: 0;
margin-top: 0;
}
.nav {
width: 100%;
height: 50px;
background: yellow;
top: 0;
left: 0;
position: fixed;
}
.item {
margin-top: 0;
float: left;
display: inline-block;
width: 33.3333333%;
height: 33%;
position: relative;
border: .5px;
border-style: solid;
border-color: yellow;
}
.three {
top: 10px;
position: relative;
margin: 10px auto;
width: 600px;
height: 200px;
border-style: solid;
border-color: pink;
}
.content {
width: 100%;
height: 100%;
background: red;
}
#item {
display: block;
max-width: 125px;
max-height: 125px;
background-size: cover;
}
p {
margin-top: 0.3125rem;
font-weight: 400;
font-size: .8rem;
line-height: .8rem;
}
</script>
</body>
</html>
Raw
jsbin.hohaw.css
body {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
}
#header {
background: url('http://i.imgur.com/QIBNaDY.png');
background-size: 100% 100%;
width: inherit;
height: 100vh;
background-repeat:no-repeat;
top: 0;
margin-top: 0;
}
.nav {
width: 100%;
height: 50px;
background: yellow;
top: 0;
left: 0;
position: fixed;
}
.item {
margin-top: 0;
float: left;
display: inline-block;
width: 33.3333333%;
height: 33%;
position: relative;
border: .5px;
border-style: solid;
border-color: yellow;
}
.three {
top: 10px;
position: relative;
margin: 10px auto;
width: 600px;
height: 200px;
border-style: solid;
border-color: pink;
}
.content {
width: 100%;
height: 100%;
background: red;
}
#item {
display: block;
max-width: 125px;
max-height: 125px;
background-size: cover;
}
p {
margin-top: 0.3125rem;
font-weight: 400;
font-size: .8rem;
line-height: .8rem;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment