iubenda example #1 english

iubenda banner example with social network buttons.

by iSimone

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<head>
    <script type="text/javascript">
        var _iub = _iub || [];
        _iub.csConfiguration = {
            cookiePolicyId: 390522,
		    siteId: 390902,
		    lang: "en"
        };
        (function(w, d) {
            var loader = function() {
                var s = d.createElement("script"),
                    tag = d.getElementsByTagName("script")[0];
                s.src = "//cdn.iubenda.com/cookie_solution/iubenda_cs.js";
                tag.parentNode.insertBefore(s, tag);
            };
            if (w.addEventListener) {
                w.addEventListener("load", loader, false);
            } else if (w.attachEvent) {
                w.attachEvent("onload", loader);
            } else {
                w.onload = loader;
            }
        })(window, document);
    </script>
</head>
<body id="home">
      <section class="first parallax-section-1"> 
    	 <div class="container container-index">
            <div class="row row-index">
                <div class="col-lg-12 text-center">
                    <h1 class="home-title">iubenda example #1</h1>
    				        <h2 class="home-slogan">Social buttons, Google Adsense + Google Analytics</h2>
    	   			       <a href="#storia" class="storia">go to content</a>              
                </div>			
            </div>		
        </div>
      </section>
    	
      <section id="storia" class="white">
    		 <div class="container">
    		 	  <div class="row">
    			  	   <div class="col-md-8 col-md-offset-2">

                  <div>
                    <!-- Like button -->
                    <div class="social-button">
                      <div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-layout="standard" data-action="like" 
                      data-show-faces="true" data-share="true"></div>
                    </div>

                    <!-- Tweet...

CSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400, 700, 300);
 @import url(http://fonts.googleapis.com/css?family=Gentium+Book+Basic:400, 700);
 .parallax-section-1 {
    height: 400px;
    background: url("https://www.iubenda.com/blog/wp-content/uploads/2015/09/web-24IE0ZZeQ1.jpg") no-repeat center top fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover
}
.video {
    height:100%;
}
@media (max-width: 340px) {
    .video, #video, #video2, #video3, #video4, #video5, #video6, #video7 {
        height:300px !important;
    }
}
/*vertical align ---> */
 html, body {
    height: 100%;
    padding: 0;
}
.row-index {
    height: 100%;
    display: table-cell;
    vertical-align: middle;
}
.container-index {
    height: 94%;
    display: table;
    width: 100%;
    padding: 0;
}
/* <--- end of vertical align*/
 body {
    font-family:'Open Sans', sans-serif;
}
.home-title {
    font-family:'Open Sans', sans-serif;
    color:#fff;
    font-size:80px;
    text-align:center;
    font-weight:700
}
.home-slogan {
    font-family:'Open Sans', sans-serif;
    color: #fff;
    text-align:center;
    font-size:25px;
    font-weight:400;
    letter-spacing:2px;
    padding-bottom:10px
}
.ico {
    margin-right:10px;
}
.ico:hover {
    cursor: pointer;
}
p {
    font-family:'Gentium Book Basic', serif;
    color: #888;
    letter-spacing: 0.01rem;
    font-weight: 400;
    font-size: 22px;
    line-height: 1.6;
    text-align:justify
}
@media (max-width: 768px) {
    .home-title {
        font-size:30px;
    }
    .home-slogan {
        font-size: 20px
    }
    section {
        padding-bottom:0px !important;
    }
    .logo {
        max-width: 50px !important
    }
    p {
        font-size: 18px;
        line-height: 1.4
    }
    .parallax-section-1 {
        height: auto;
        background-position: 50% 0% !important;
        padding-bottom: 25px !important
    }
   ...