Skip to content

Instantly share code, notes, and snippets.

@abidibo

abidibo/tazebao-campaign-template-1.html

Last active September 23, 2016 09:15
Show Gist options
  • Save abidibo/1429d3225631bd6d6043591e843d7847 to your computer and use it in GitHub Desktop.
Save abidibo/1429d3225631bd6d6043591e843d7847 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
tazebao-campaign-template-1.html
<html>
<head>
<title>La mia campagna</title>
<meta charset="utf-8" />
<link href="https://fonts.googleapis.com/css?family=Fjalla+One|Josefin+Sans:100,300,300i,400,400i,600,700" rel="stylesheet">
</head>
<style>
body {
background: #f6f6f6;
font-family: 'Josefin Sans', sans-serif;
}
.container {
max-width: 800px;
padding: 40px;
background: #fff;
margin: auto;
}
header:after {
content: '';
display: block;
clear: both;
}
header img {
float: left;
width: 8%;
}
header nav {
box-sizing: border-box;
float: right;
border-bottom: 5px solid #ff9900;
margin-left: 2%;
width: 90%;
text-align: right;
padding-bottom: 10px;
}
a {
text-decoration: none;
color: #094481;
}
.logo {
border-radius: 50%;
}
h1 {
font-family: 'Fjalla One', sans-serif;
text-align: center;
}
.splash {
max-width: 100%;
margin-bottom: 20px;
display: block;
}
.col1 {
box-sizing: border-box;
float: left;
width: 70%;
padding: 10px 20px 20px 0;
border-right: 5px dotted #5387bd;
}
.col2 {
box-sizing: border-box;
float: right;
width: 30%;
padding: 10px 0 20px 20px;
margin-top: 10px;
}
.clear {
clear: both;
}
.separator {
margin: 16px 0;
border-bottom: 5px solid #ffdb64;
}
table tr {
vertical-align: top;
}
td {
padding: 10px;
}
.sidebar {
margin: 0 0 8px;
background: #094481;
color: #fff;
padding: 8px;
}
.sidebar img {
display: block;
margin: auto;
max-width: 100%;
}
.sidebar h2 {
text-align: center;
border-bottom: 2px solid #fff;
}
.btn {
background: #1b128a;
color: #fff;
padding: 5px 10px;
display: inline-block;
margin-top: 10px;
}
.footer-nav {
list-style-type: none;
padding-left: 0;
margin-top: 20px;
}
.footer-nav li {
display: inline-block;
margin-right: 20px;
}
</style>
<body>
<div class="container">
<header>
<img class="logo" src="http://lorempixel.com/60/60/abstract/" alt="logo" />
<nav><a href="#">Vedi online</a></nav>
</header>
<h1>La mia Campagna</h1>
<img class="splash" src="http://lorempixel.com/800/200/people/" alt="img" />
<div class="col1">
<h2>Argomento Principale</h2>
<p>
Cras tempus dui diam, quis eleifend lectus vehicula in. Vivamus quis varius nisl. Ut facilisis purus nisi, et commodo sem molestie et. Proin elementum gravida vulputate. In scelerisque ante non metus faucibus pellentesque. Suspendisse fermentum auctor urna eget ultricies? Suspendisse dignissim, est vitae facilisis dictum; ex purus suscipit magna, nec interdum tellus mauris porta turpis.
</p>
<div class="separator"></div>
<table>
<tr>
<td>
<img class="spash" src="http://lorempixel.com/120/120/people/" alt="img" />
</td>
<td>
<h3>Lorem ipsum</h3>
<p>
Nunc iaculis augue vel nulla suscipit, ut fermentum quam sollicitudin. Fusce accumsan nisl a commodo egestas. Donec porta odio vitae diam sodales, id sollicitudin arcu pulvinar. Sed fringilla metus nec ante rhoncus varius.<br />
<a class="btn" href="#">scopri di più »</a>
</p>
</td>
</tr>
<tr>
<td>
<img class="spash" src="http://lorempixel.com/120/120/technics/" alt="img" />
</td>
<td>
<h3>Dolor sin amet</h3>
<p>
Cras non facilisis nisl. Proin quis tellus metus. Integer tempor posuere faucibus. Vestibulum viverra commodo felis at venenatis. Morbi euismod ante sed accumsan gravida.<br />
<a class="btn" href="#">scopri di più »</a>
</p>
</td>
</tr>
</table>
</div>
<div class="col2">
<div class="sidebar">
<img src="http://lorempixel.com/200/200/nature/" alt="img" />
<h2>Sibebar Rulez</h2>
<p>
Praesent id consectetur velit. Etiam venenatis in arcu eu porttitor. Ut sed metus eu magna faucibus consequat id quis ipsum. Duis elit mauris, ullamcorper sed tortor id, ornare pellentesque metus. Fusce auctor egestas elit ut rutrum. Sed congue pharetra quam in elementum.
</p>
</div>
</div>
<div class="clear"></div>
<div class="separator"></div>
<ul class="footer-nav">
<li><a href="">MySite.com</a></li>
<li><a href="">Contatti</a></li>
<li><a href="">Cancellami</a></li>
</ul>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment