Last active
December 28, 2015 15:13
-
-
Save TheOpenDevProject/91d495a98b02cbcef5e9 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE HTML> | |
<head> | |
<title>HTML5 Generators - RootZero</title> | |
<!--NO-CACHE-VERSIONING--> | |
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script> | |
<link rel="stylesheet" href="/core/style.css?v=0.1"/> | |
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> | |
<meta charset="UTF8"> | |
</head> | |
<style> | |
body{ | |
margin:0; | |
padding:0; | |
} | |
.container{ | |
display: flex; | |
flex-direction:column; | |
} | |
.header{ | |
border-bottom-style: solid; | |
border-bottom-width: 1px; | |
border-bottom-color: #eee; | |
display: flex; | |
flex-direction:row; | |
} | |
.flex-split{ | |
width: 50%; | |
} | |
.j-c-end{ | |
text-align: right; | |
} | |
.big-text{ | |
font-size: 2em; | |
padding:1em 0; | |
} | |
.menu{ | |
display: flex; | |
list-style: none; | |
justify-content: flex-end; | |
} | |
.full-width-menu{ | |
border-bottom-style: solid; | |
border-bottom-width: 1px; | |
border-bottom-color: #eee; | |
} | |
.menu li{ | |
margin-right: 0.9em; | |
} | |
footer{ | |
display: flex; | |
flex-direction:row; | |
background-color: #E0E0E0; | |
} | |
footer img{ | |
width: 200px; | |
height: 175px; | |
} | |
.content{ | |
display: flex; | |
flex-direction:row; | |
} | |
.card{ | |
font-family: "Open Sans",sans-serif; | |
margin:1em; | |
padding: 2em; | |
background-color: #FFF; | |
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.12), 0px 1px 2px rgba(0, 0, 0, 0.24); | |
border-radius: 3px; | |
} | |
</style> | |
<body> | |
<div class="container"> | |
<div class="header"> | |
<div class="flex-split"> | |
<img src="http://ciubotaru-optics.webatu.com/Images/ru.bmp" class="b-img"/> | |
<img src="http://ciubotaru-optics.webatu.com/Images/ru.bmp" class="b-img"/> | |
<img src="http://ciubotaru-optics.webatu.com/Images/ru.bmp" class="b-img"/> | |
</div> | |
<div class="flex-split j-c-end big-text">אופטיקה צ'יבוטרו</div> | |
</div> | |
<div class="full-width-menu"> | |
<ul class="menu"> | |
<li>Sample</li> | |
<li>Sample</li> | |
<li>Sample</li> | |
</ul> | |
</div> | |
<div class="content"> | |
<div class="card"> | |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ut tortor eros. In interdum nunc quis tellus rhoncus interdum. Nunc auctor turpis vitae faucibus consectetur. Nulla luctus efficitur imperdiet. Praesent vitae tempus nulla, a tempus turpis. Phasellus velit libero, aliquam sed pretium id, tristique et lacus. Phasellus tortor est, eleifend id lobortis in, mattis ut nibh. Aenean eu semper lectus. Curabitur quis fermentum nulla. Nulla vel bibendum justo. Suspendisse non sagittis nulla. Aenean feugiat mauris faucibus, volutpat diam eu, varius urna. | |
Aliquam erat volutpat. Duis vitae ipsum vel metus laoreet suscipit. Nullam in urna purus. Pellentesque orci ipsum, fringilla a purus eu, tincidunt cursus erat. Sed libero arcu, interdum quis placerat at, eleifend at augue. Curabitur lacus massa, lobortis eu congue id, suscipit eget neque. Etiam porttitor, tortor vitae fermentum tincidunt, massa orci mattis nisl, convallis blandit sem turpis quis enim. Donec congue magna sed bibendum bibendum. Curabitur sed finibus lacus. Donec luctus metus non tempus pulvinar. Fusce interdum ultricies turpis, vitae efficitur dui. Phasellus molestie felis mattis, ornare odio id, consectetur odio. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. | |
Fusce sagittis sapien sit amet sagittis vehicula. Curabitur vulputate, ex ac bibendum tincidunt, augue nulla eleifend nisi, quis finibus massa purus vel ligula. Nam enim felis, pretium in mauris sed, imperdiet rhoncus ex. Integer consequat at est vitae tristique. Quisque augue purus, consectetur id orci at, pellentesque faucibus lorem. Maecenas a enim sed quam accumsan iaculis. Phasellus ac arcu sed arcu efficitur pulvinar id quis erat. Nunc elit quam, hendrerit iaculis mauris et, auctor efficitur felis. Pellentesque scelerisque maximus pulvinar. Sed pulvinar faucibus faucibus. Duis justo nisi, imperdiet ut est vel, venenatis maximus mauris. | |
Praesent a magna eget arcu sodales pellentesque. Nullam hendrerit orci bibendum dignissim lobortis. Maecenas tempor eleifend semper. Mauris ut sem at ante malesuada elementum vitae ac lacus. Ut feugiat feugiat sem, sed faucibus sem rutrum eget. Nulla luctus pharetra lacinia. Donec id est et dui feugiat accumsan. Vestibulum ut eros lorem. Vivamus et metus accumsan, faucibus erat vitae, sagittis leo. Proin quis interdum ex, imperdiet posuere augue. Integer et sagittis lorem, luctus rhoncus leo. Curabitur auctor dapibus tellus, ac convallis mauris mattis et. Cras pulvinar nibh eu leo bibendum, et porttitor augue finibus. Pellentesque nec molestie lacus. Fusce ac enim posuere, egestas mauris at, aliquet tellus. Maecenas sit amet metus ac est convallis luctus id vitae leo. | |
Nunc convallis placerat metus at malesuada. Sed suscipit placerat varius. Donec vitae tortor id urna posuere tristique. Suspendisse dignissim eros semper enim blandit volutpat. Sed mattis lectus ac massa mattis molestie. Pellentesque hendrerit eget lacus quis iaculis. Nam egestas finibus semper. Aliquam consequat, sem non interdum pretium, ipsum diam aliquam ex, luctus rhoncus arcu massa quis nunc. Pellentesque augue leo, mattis id egestas eget, facilisis sit amet purus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla ornare tempus erat quis tincidunt. Vestibulum fringilla velit vel sem congue tempus. Etiam facilisis sagittis euismod. Aliquam et commodo enim, a laoreet mi. | |
</div> | |
<div class="card"> | |
<h1>Stuff We Do</h1> | |
<ul> | |
<li>Item</li> | |
<li>Item</li> | |
<li>Item</li> | |
<li>Item</li> | |
<li>Item</li> | |
<li>Item</li> | |
<li>Item</li> | |
<li>Item</li> | |
<li>Item</li> | |
<li>Item</li> | |
<li>Item</li> | |
</ul> | |
</div> | |
</div> | |
</div> | |
</body> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment