Html
<section class="offer-section">
<div class="auto-container">
<div class="sec-title">
<h2 class="sec-title">Contactez-nous</h2>
<div class="text">What We Provide For You check now and deside it<br> do you want now this</div>
</div>
<div class="row-form">
<div class="column is-6 form-column">
<div class="inner-column">
<div class="discount-form">
<div class="text">Remplissez le formulaire, notre responsable vous contactera pour plus de détails.</div>
<form action="#" method="post" id="email-form">
<div class="form-group">
<div class="response"></div>
</div>
<div class="form-group">
<input type="text" name="username" class="username" placeholder="Your Name *">
</div>
<div class="form-group">
<input type="email" name="email" class="email" placeholder="Your Email *">
</div>
<div class="form-group">
<textarea name="contact_message" class="message" placeholder="Text Message"></textarea>
</div>
<div class="form-group">
<button class="theme-btn btn-style-wood" type="button" id="submit" name="submit-form">
<span class="btn-title">Envoyer</span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</button>
</div>
</form>
</div>
</div>
</div>
<div class="column is-6 content-column">
<div class="inner-column">
<span class="title">Offre spécial</span>
<h2>Comment économisé <span class="discount">50%</span> <br>d'argent dans les répérations</h2>
<div class="text">Not everyone Knows and where but there are 10 very importent tips, how each it is to save up to 50% on repairs, and on the money saved to buy new applicances.</div>
<div class="fact-counter">
<div class="row-form">
<div class="counter-column wow fadeInUp">
<div class="inner-column">
<span class="icon flaticon-carpentry"></span>
<div class="count-box"><span class="count-text" data-speed="3000" data-stop="10">0</span></div>
<h4 class="counter-title">Years of Carpenting <br>Experience</h4>
</div>
</div>
<div class="counter-column wow fadeInUp" data-wow-delay="300ms">
<div class="inner-column">
<span class="icon flaticon-door-1"></span>
<div class="count-box"><span class="count-text" data-speed="3000" data-stop="58">0</span></div>
<h4 class="counter-title">Local Branches in <br>City New York</h4>
</div>
</div>
<div class="counter-column wow fadeInUp" data-wow-delay="600ms">
<div class="inner-column">
<span class="icon flaticon-team"></span>
<div class="count-box"><span class="count-text" data-speed="3000" data-stop="8">0</span>k</div>
<h4 class="counter-title">Happy Customer <br>with our work</h4>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
Css
.sec-title h2 {
position: relative;
display: inline-block;
font-size: 60px;
color: #353535;
line-height: 1em;
font-weight: 600;
cursor: default;
-webkit-text-stroke: 1px #353535;
}
.row-form {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
justify-content: center;
margin-right: -15px;
margin-left: -15px;
}
.offer-section{
position: relative;
padding: 120px 0 70px;
overflow: hidden;
background-position: center top;
background-repeat: no-repeat;
background-size: 100% auto;
background-color: #fafafa;
}
.offer-section:before {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
background-color: #ffffff;
opacity: .10;
content: "";
}
.offer-section:after{
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
background-repeat: repeat;
content: "";
opacity: .40;
}
.offer-section .content-column{
position: relative;
margin-bottom: 50px;
z-index: 1;
}
.offer-section .content-column > .inner-column{
position: relative;
padding: 50px 30px 30px;
box-shadow: 0 0 30px rgba(0,0,0,0.05);
margin-left: -80px;
padding-left: 100px;
background: #fff;
margin-top: 30px;
}
.offer-section .content-column .title{
position: relative;
display: inline-block;
font-size: 16px;
line-height: 30px;
color: #ffffff;
font-weight: 500;
padding: 0 15px;
background-color: #ab7442;
text-transform: uppercase;
margin-bottom: 20px;
}
.offer-section .content-column .title:before{
position: absolute;
top: 0;
left: 100%;
border-right: 20px solid transparent;
border-top: 30px solid #ab7442;
content: "";
}
.offer-section .content-column h2{
position: relative;
display: block;
font-size: 32px;
line-height: 1.4em;
color: #353535;
font-weight: 500;
text-transform: capitalize;
margin-bottom: 20px;
}
.offer-section .content-column h2 .discount{
position: relative;
display: inline-block;
font-size: 48px;
line-height: 1em;
color: #ab7442;
font-weight: 500;
}
.offer-section .content-column .text{
position: relative;
margin-bottom: 30px;
}
.offer-section .fact-counter{
position: relative;
}
.offer-section .fact-counter .counter-column{
position:relative;
margin-bottom: 30px;
}
.offer-section .fact-counter .counter-column .inner-column{
position: relative;
text-align: center;
box-shadow: none;
margin: 10px;
}
.offer-section .fact-counter .icon{
position: relative;
display: block;
font-size: 50px;
text-align: center;
color: #ab7442;
margin-bottom: 10px;
line-height: 1em;
}
.offer-section .fact-counter .count-box{
position: relative;
display: block;
font-size:40px;
line-height: 1em;
font-weight:700;
color:#353535;
margin-bottom: 10px;
}
.offer-section .fact-counter .count-box .count-text{
position:relative;
font-size:40px;
line-height: 1em;
font-weight:700;
color:#353535;
}
.offer-section .fact-counter .counter-title{
position: relative;
display: block;
font-size:16px;
line-height:24px;
font-weight:400;
color:#353535;
}
.offer-section .form-column{
position: relative;
z-index: 9;
margin-bottom: 50px;
}
.offer-section .form-column .inner-column{
position: relative;
padding-right: 40px;
}
.offer-section .form-column .text{
position: relative;
display: block;
font-weight: 500;
padding: 15px 30px;
font-size: 16px;
background: #ffffff;
border:1px solid #dddddd;
margin-bottom: 30px;
}
.offer-section .discount-form{
position: relative;
background-color: #cccccc;
padding: 50px 30px 30px;
border: 10px solid #ffffff;
box-shadow: 0px 0px 30px rgba(0,0,0,0.15);
}
.discount-form .form-group{
position:relative;
margin-bottom:20px;
}
.discount-form .form-group input[type="text"],
.discount-form .form-group input[type="email"],
.discount-form .form-group input[type="url"],
.discount-form .form-group textarea,
.discount-form .form-group select{
position: relative;
display: block;
width: 100%;
font-size: 14px;
color: #353535;
line-height: 20px;
padding: 14px 20px;
background-color: rgba(255,255,255,1);
border: 1px solid #dddddd;
font-weight: 400;
border-radius: 5px;
-webkit-transition: all 300ms ease;
-moz-transition: all 300ms ease;
-ms-transition: all 300ms ease;
-o-transition: all 300ms ease;
transition: all 300ms ease;
outline: none;
}
.discount-form .form-group input:focus,
.discount-form .form-group select:focus,
.discount-form .form-group textarea:focus{
border-color:#ab7442;
}
.discount-form .form-group textarea{
height: 160px;
resize: none;
padding-top: 20px;
}
.discount-form .form-group button{
}
.theme-btn{
display:inline-block;
text-align: center;
text-transform: uppercase;
-webkit-transition:all 0.5s ease;
-moz-transition:all 0.5s ease;
-ms-transition:all 0.5s ease;
-o-transition:all 0.5s ease;
transition:all 0.5s ease;
cursor: pointer;
border: none;
outline: none;
}
.theme-btn .btn-title{
position: relative;
z-index: 9;
color: inherit;
}
.theme-btn span:not(.btn-title){
position: absolute;
left: 0;
bottom: 0;
width: 20%;
height: 100%;
border-radius: 50%;
transform: translateY(150%);
transition: all 500ms ease;
background-color: #ab7442;
z-index: 0;
}
.theme-btn span:nth-child(2){
left: 20%;
transition-delay: 100ms;
}
.theme-btn span:nth-child(3){
left: 40%;
transition-delay: 200ms;
}
.theme-btn span:nth-child(4){
left: 60%;
transition-delay: 300ms;
}
.theme-btn span:nth-child(5){
left: 80%;
transition-delay: 400ms;
}
.theme-btn:hover span{
transform: translateY(0) scale(2);
}
.btn-style-wood{
position: relative;
font-size: 16px;
line-height: 30px;
color: #ffffff;
padding: 11px 30px 9px;
font-weight: 600;
border-radius: 5px;
background-color: #ab7442;
overflow: hidden;
}
.btn-style-wood:hover{
color: #ab7442;
box-shadow: 0 10px 20px rgba(0,0,0,0.10);
}
.btn-style-wood span:not(.btn-title){
background-color: #ffffff !important;
}
.centered{
text-align:center !important;
}
@media screen and (max-width: 768px) {
.row-form {
display: flex;
flex-flow: column-reverse;
}
.offer-section .form-column .inner-column{
padding-right: 0;
}
}
JavaScript
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
(Crée un fichier appear.js et mettre le code ci dessous dans le fichier appear.js)
<script src="appear.js">
/*
* jQuery.appear
* https://github.com/bas2k/jquery.appear/
* http://code.google.com/p/jquery-appear/
* http://bas2k.ru/
*
* Copyright (c) 2009 Michael Hixson
* Copyright (c) 2012-2014 Alexander Brovikov
* Licensed under the MIT license (http://www.opensource.org/licenses/mit-license.php)
*/
(function($) {
$.fn.appear = function(fn, options) {
var settings = $.extend({
//arbitrary data to pass to fn
data: undefined,
//call fn only on the first appear?
one: true,
// X & Y accuracy
accX: 0,
accY: 0
}, options);
return this.each(function() {
var t = $(this);
//whether the element is currently visible
t.appeared = false;
if (!fn) {
//trigger the custom event
t.trigger('appear', settings.data);
return;
}
var w = $(window);
//fires the appear event when appropriate
var check = function() {
//is the element hidden?
if (!t.is(':visible')) {
//it became hidden
t.appeared = false;
return;
}
//is the element inside the visible window?
var a = w.scrollLeft();
var b = w.scrollTop();
var o = t.offset();
var x = o.left;
var y = o.top;
var ax = settings.accX;
var ay = settings.accY;
var th = t.height();
var wh = w.height();
var tw = t.width();
var ww = w.width();
if (y + th + ay >= b &&
y <= b + wh + ay &&
x + tw + ax >= a &&
x <= a + ww + ax) {
//trigger the custom event
if (!t.appeared) t.trigger('appear', settings.data);
} else {
//it scrolled out of view
t.appeared = false;
}
};
//create a modified fn with some additional logic
var modifiedFn = function() {
//mark the element as visible
t.appeared = true;
//is this supposed to happen only once?
if (settings.one) {
//remove the check
w.unbind('scroll', check);
var i = $.inArray(check, $.fn.appear.checks);
if (i >= 0) $.fn.appear.checks.splice(i, 1);
}
//trigger the original fn
fn.apply(this, arguments);
};
//bind the modified fn to the element
if (settings.one) t.one('appear', settings.data, modifiedFn);
else t.bind('appear', settings.data, modifiedFn);
//check whenever the window scrolls
w.scroll(check);
//check whenever the dom changes
$.fn.appear.checks.push(check);
//check now
(check)();
});
};
//keep a queue of appearance checks
$.extend($.fn.appear, {
checks: [],
timeout: null,
//process the queue
checkAll: function() {
var length = $.fn.appear.checks.length;
if (length > 0) while (length--) ($.fn.appear.checks[length])();
},
//check the queue asynchronously
run: function() {
if ($.fn.appear.timeout) clearTimeout($.fn.appear.timeout);
$.fn.appear.timeout = setTimeout($.fn.appear.checkAll, 20);
}
});
//run checks when these methods are called
$.each(['append', 'prepend', 'after', 'before', 'attr',
'removeAttr', 'addClass', 'removeClass', 'toggleClass',
'remove', 'css', 'show', 'hide'], function(i, n) {
var old = $.fn[n];
if (old) {
$.fn[n] = function() {
var r = old.apply(this, arguments);
$.fn.appear.run();
return r;
}
}
});
})(jQuery);
</script>
<script>
(function($) {
if($('.count-box').length){
$('.count-box').appear(function(){
var $t = $(this),
n = $t.find(".count-text").attr("data-stop"),
r = parseInt($t.find(".count-text").attr("data-speed"), 10);
if (!$t.hasClass("counted")) {
$t.addClass("counted");
$({
countNum: $t.find(".count-text").text()
}).animate({
countNum: n
}, {
duration: r,
easing: "linear",
step: function() {
$t.find(".count-text").text(Math.floor(this.countNum));
},
complete: function() {
$t.find(".count-text").text(this.countNum);
}
});
}
},{accY: 0});
}
function enableMasonry() {
if($('.sortable-masonry').length){
var winDow = $(window);
// Needed variables
var $container=$('.sortable-masonry .items-container');
var $filter=$('.filter-btns');
$container.isotope({
filter:'*',
masonry: {
columnWidth : 1
},
animationOptions:{
duration:500,
easing:'linear'
}
});
$filter.find('li').on('click', function(){
var selector = $(this).attr('data-filter');
try {
$container.isotope({
filter : selector,
animationOptions: {
duration: 500,
easing : 'linear',
queue : false
}
});
} catch(err) {
}
return false;
});
winDow.on('resize', function(){
var selector = $filter.find('li.active').attr('data-filter');
$container.isotope({
filter : selector,
animationOptions: {
duration: 500,
easing : 'linear',
queue : false
}
});
});
var filterItemA = $('.filter-btns li');
filterItemA.on('click', function(){
var $this = $(this);
if ( !$this.hasClass('active')) {
filterItemA.removeClass('active');
$this.addClass('active');
}
});
}
}
})(window.jQuery);
</script>
À placer avant la fermeture du body.
Compteur js seul
Html
<section class="offer-section">
<div class="column is-6 content-column">
<div class="inner-column"><span class="title">Offre spécial</span>
<h2>Comment économisé <span class="discount">50%</span><br>d'argent dans les répérations</h2>
<div class="text">Not everyone Knows and where but there are 10 very importent tips, how each it is to save up to 50% on repairs, and on the money saved to buy new applicances.</div>
<div class="fact-counter">
<div class="row-form">
<div class="counter-column wow fadeInUp">
<div class="inner-column"><span class="icon flaticon-carpentry"></span>
<div class="count-box"><span class="count-text" data-speed="3000" data-stop="10">0</span></div>
<h4 class="counter-title">Years of Carpenting <br>Experience</h4>
</div>
</div>
<div class="counter-column wow fadeInUp" data-wow-delay="300ms">
<div class="inner-column"><span class="icon flaticon-door-1"></span>
<div class="count-box"><span class="count-text" data-speed="3000" data-stop="58">0</span></div>
<h4 class="counter-title">Local Branches in <br>City New York</h4>
</div>
</div>
<div class="counter-column wow fadeInUp" data-wow-delay="600ms">
<div class="inner-column"><span class="icon flaticon-team"></span>
<div class="count-box"><span class="count-text" data-speed="3000" data-stop="8">0</span>k</div>
<h4 class="counter-title">Happy Customer <br>with our work</h4>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
Formulaire de contact seul
Html
<section class="offer-section">
<div class="auto-container">
<div class="sec-title">
<h2 class="sec-title">Contactez-nous</h2>
<div class="text">What We Provide For You check now and deside it<br> do you want now this</div>
</div>
<div class="row-form">
<div class="column is-6 form-column">
<div class="inner-column">
<div class="discount-form">
<div class="text">Remplissez le formulaire, notre responsable vous contactera pour plus de détails.</div>
<form action="#" method="post" id="email-form">
<div class="form-group">
<div class="response"></div>
</div>
<div class="form-group">
<input type="text" name="username" class="username" placeholder="Your Name *">
</div>
<div class="form-group">
<input type="email" name="email" class="email" placeholder="Your Email *">
</div>
<div class="form-group">
<textarea name="contact_message" class="message" placeholder="Text Message"></textarea>
</div>
<div class="form-group">
<button class="theme-btn btn-style-wood" type="button" id="submit" name="submit-form">
<span class="btn-title">Envoyer</span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</section>