Skip to content

Instantly share code, notes, and snippets.

@abidibo

abidibo/tazebao-campaign-template-1-mobile.html

Last active September 23, 2016 10:56
Show Gist options
  • Save abidibo/5d0e61ff1f68db38784a9c01831d9a09 to your computer and use it in GitHub Desktop.
Save abidibo/5d0e61ff1f68db38784a9c01831d9a09 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
tazebao-campaign-template-1-mobile.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 table {
width: 100%;
}
header nav {
box-sizing: border-box;
display: block;
border-bottom: 5px solid #ff9900;
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;
padding: 10px;
border-bottom: 5px dotted #5387bd;
}
.col2 {
box-sizing: border-box;
padding: 10px;
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;
}
.img-responsive {
max-width: 100%;
display: block;
}
</style>
<body style="background: #f6f6f6;font-family: 'Josefin Sans', sans-serif;">
<div class="container" style="max-width: 800px;padding: 40px;background: #fff;margin: auto;">
<header>
<table style="width: 100%;">
<tr style="vertical-align: top;">
<td style="padding: 10px;">
<img class="logo" src="http://lorempixel.com/60/60/abstract/" alt="logo" style="border-radius: 50%;">
</td>
<td style="padding: 10px;">
<nav style="box-sizing: border-box;display: block;border-bottom: 5px solid #ff9900;text-align: right;padding-bottom: 10px;"><a href="#" style="text-decoration: none;color: #094481;">Vedi online</a></nav>
</td>
</tr>
</table>
</header>
<h1 style="font-family: 'Fjalla One', sans-serif;text-align: center;">La mia Campagna</h1>
<img class="splash" src="http://lorempixel.com/800/200/people/" alt="img" style="max-width: 100%;margin-bottom: 20px;display: block;">
<div class="col1" style="box-sizing: border-box;padding: 10px;border-bottom: 5px dotted #5387bd;">
<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" style="margin: 16px 0;border-bottom: 5px solid #ffdb64;"></div>
<table>
<tr style="vertical-align: top;">
<td style="padding: 10px;">
<img class="spash" src="http://lorempixel.com/120/120/people/" alt="img">
</td>
<td style="padding: 10px;">
<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="#" style="text-decoration: none;color: #fff;background: #1b128a;padding: 5px 10px;display: inline-block;margin-top: 10px;">scopri di più »</a>
</p>
</td>
</tr>
<tr style="vertical-align: top;">
<td style="padding: 10px;">
<img class="spash" src="http://lorempixel.com/120/120/technics/" alt="img">
</td>
<td style="padding: 10px;">
<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="#" style="text-decoration: none;color: #fff;background: #1b128a;padding: 5px 10px;display: inline-block;margin-top: 10px;">scopri di più »</a>
</p>
</td>
</tr>
</table>
</div>
<div class="col2" style="box-sizing: border-box;padding: 10px;margin-top: 10px;">
<div class="sidebar" style="margin: 0 0 8px;background: #094481;color: #fff;padding: 8px;">
<img class="img-responsive" src="http://lorempixel.com/800/100/nature/" alt="img" style="max-width: 100%;display: block;margin: auto;">
<h2 style="text-align: center;border-bottom: 2px solid #fff;">Wooooooaaaaa</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" style="clear: both;"></div>
<div class="separator" style="margin: 16px 0;border-bottom: 5px solid #ffdb64;"></div>
<ul class="footer-nav" style="list-style-type: none;padding-left: 0;margin-top: 20px;">
<li style="display: inline-block;margin-right: 20px;"><a href="" style="text-decoration: none;color: #094481;">MySite.com</a></li>
<li style="display: inline-block;margin-right: 20px;"><a href="" style="text-decoration: none;color: #094481;">Contatti</a></li>
<li style="display: inline-block;margin-right: 20px;"><a href="" style="text-decoration: none;color: #094481;">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