Mandarin Template

by Luca De Nardi

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container-fluid">
<img id="mainImage" class="editable edit-image col-xs-12 col-sm-12 col-md-12 col-lg-12" src="https://elmaris.it/wp-content/uploads/2017/04/woman-804068_1280.jpg">
  <div class="row">
    <h4 id="subtitle" class="editable edit-text col-xs-10 col-sm-4 col-md-4 col-lg-4 col-xs-offset-1 col-sm-offset-4 col-md-offset-4 col-lg-offset-4">NOME DEL BRAND</h4>
    </div>
      <div class="row" style="margin-top: 15px">
        <h3 id="discount" class="serif editable edit-text">30%</h3>
      </div>
      <div class="row" style="margin-top: 15px">
        <h3 id="title" class="serif editable edit-text col-xs-offset-1 col-sm-offset-1 col-md-offset-1 col-lg-offset-1"><span>Titolo buono sconto del negozio</span></h3>
     <div class="row" style="margin-top: 150px">
        <a href="#" id="button" class="editable edit-link btn btn-lg col-xs-6 col-xs-offset-3 col-sm-6 col-sm-offset-3 col-md-6 col-md-offset-3 col-lg-6 col-lg-offset-3">LINK AL FORM</a>
</div>

CSS

body, html{
	height: 100%;
}
body{
	background: transparent !important;
}
h3{
	margin-top: 0;margin-bottom: 30px;
}
h1, h3{
	text-align: center;
}
.space-above{
	margin-top: 20px;
}
.bottom-spacer{
	height: 50px;
}
.btn{
	white-space: normal;
}
.edit-image-icon.icon-light{
	filter: invert(100%);
}
.edit-image-icon{
	width: 100%;
	height: 50px;
	background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAEL0lEQVR4Xt2b2c9ORxzHP5S22ipqSaPtlYoKggixxF6K0EpFqK1xp5YriQt/hpRLadC0pWKrpbVWiFQ0bTT2JZZai6JVW4t8mznyevKe55k5Z868Z8ztO/PMfD7nN/u8jXg+0gvAQmAW0BrYC8wHfq2F16hWhgj+LvgvgUkVbf0bGA3sqcYQu4A0+IS5poSYBdSCt5IQqwBb+JoSYhTgCl9VQmwCssKnSohNwKfAFzlnpmcGxtgEiP1zYI4vCTEK8ClhYKwCfEnYXmYBM4FewDzgcUrILwZm5+gOd8sqQIPdUqAxsASYW5CEs2UUMN2M9IJPUlESFpRNwFRgmfnylZEtCdVGf9fusBKYXCYBnwDLAS120lI1CWLRFGkzJuwERgEPyiJAW1ltaavB1+0OaZFgI+EgMBC4rR8sg4CJwFeW8LYS1B0+qyeMzgL9gYvJ3xpawATga6BJhqlMkJod6kviqpRwAxgAHK1boCEFfAx8kxE+YbCVcBcYDuyrtNVQAsYDGoWbZvjylUVqSVgEbAXWp4WKhzY4/cSHwLee4G0ioWrjQkfAWGA18KKTMrvMmgK1bHZKIQWMAdYUBJ9AO0sIJUCLjrXAS06fJ1vmaWZNYVU6hIAPgHWB4FcA2kg9sqIPsBAaYUbfl20blCOfVpIzXOCLXglq3t0ANMsBZVtUK0ntIv+zLZDkK6oLDAO+CwSv9cSULPBFRcAQYCPwiuvXyJB/lYH/N0PZ/4v4joBBwCbg1awNciin9cRkIDO8bwHaYm4OBK/1hLbQDx2E1ZvVVwRol7UFeC1vgyzKa0rVFjo3vK8I6Ad8DzS3aHzeLJpVtIX2Au9DQF8D/3peMovyGli1hX5gkdc6S54u0MdsM0PAa2AV/H1rMsuMWQX0NvAtLOvJk01ji84PvMNn7QK6rdkGtMxDZVn2B+Aj4J5lfudsrhHQE9gOtHKuyb2ATnF0eFIYvGsE9DDwb7izOJeQ5HGAzvIKTbYR0N3A6w1e0UmXFjo5+qfoimwjoBuwA2gToEE/Ajo5CgJvI6CrgW8bAH63gb8ToK6nVVTrAl0AhWMIeL3m1KtOvd8JmtIEdAZ2Ae0CtEbvenVmGBw+rQu8Z778mwHgdVOjM8O/AtRVbxWVEdDJfPkQ8D8BI5Nb2jII6Gjg2wdozH4DfytAXVWrSCLgXQP/VoAGHQDeBxocPhkDOhj4twPA/2zgbwaoy6oKRcA54B2r3Pky/WKuqP/M9zN+S0tA2hs8nzXpX1d0T6BHCqVKIQToTY7uCa6Xitw0pmgBvxn4a2WETwbBorrAIWAo8EdZ4YsUcNjAXy0zfFECjhj4K2WHL0LAMUB3g5djgPct4LiBvxQLvE8BJwz80xeYsUjwMQ2eNPAXYoGu2868Ak4Z+N9jhM/bBU4b+POxwucRcAYYbDZSMfPzBF2SynnGHqnLAAAAAElFTkSuQmCC');
	position: relative;
	background-repeat: no-repeat;
	background-size: 18px 18px;
	background-position:...