This is HTML-code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Welcome</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<div class="container-fluid">
<header>
<div id="menu" class="row no-gutter menu">
<div class="col-md-3 offset-md-1">
<img src="img/logo.png">
</div>
<div class="col-md-8">
<nav class="d-flex flex-row-reverse">
<ul class="p-2">
<li>
Improves
</li>
<li>
Projects
</li>
<li>
<a id="about" href="">About</a>
</li>
<li>
Home
</li>
</ul>
</nav>
</div>
</div>
<div class="row no-gutter">
<div class="hellopage">
<div class="col-md-10 offset-md-1 hello">
<font>
Hello.
</font>
<br>
<div class="mynameis">
My name is
<div class="name">
DENIS,
</div>
</div>
<div class="whoami">
I am a web-desihner, and front-end developer, and a person, who interested in IT.
</div>
<div class="quality">
Quality is a main parametr for me.
</div>
<div class="classcol-md-5 offset-md-4">
<button class="bnative1" id="button">
FOLLOW ME
</button>
</div>
</div>
</div>
</div>
</header>
<!-- Второй блок -->
<div class="container-fluid">
<div id="sb" class="row no-gutter sb">
<div class="col-md-6 offset-md-3 text-center whatcani">
What can I offer for you?
</div>
<div class="col-md-3 offset-md-1 pic1 ">
<img src="img/adopt.png">
<div class="txt1">
<div class="top1">Adaptive Web-Design</div>
<div>I always use adaptive</div>
<div>design.Usually,web-site</div>
<div>is an advertisment</div>
<div>for big set of companies.</div>
<div>It have to be focused on</div>
<div>client and must be</div>
<div>correctly displayed in all</div>
<div>devices</div>
</div>
</div>
<div class="col-md-3 offset-md-1 pic2">
<img src="img/hands.png">
<div class="txt2">
<div class="top2">Indivigual aproach</div>
<div>I always interact with</div>
<div>the customer and ready</div>
<div>to give some advice,</div>
<div>based on my experience</div>
<div>to make web-site better</div>
<div>and user-friendly</div>
</div>
</div>
<div class="col-md-3 offset-md-1 pic3">
<img src="img/calendar.png">
<div class="txt3">
<div class="top3">Completion on time</div>
<div>The project will be</div>
<div>compleated on time,</div>
<div>and a work plan will be</div>
<div>provided for the</div>
<div>customer</div>
</div>
</div>
<div class="col-md-8 offset-md-2 line">
<hr>
</div>
</div>
</div>
<!-- Третий блок -->
<div id="me" class="row no-gutter tb">
<div class="col-md-3 offset-md-4 text-center aboutme">
About me
</div>
<div class="col-md-10 offset-md-1 txtab">
<div>I started my career as a system administrator(2016). At work I</div>
<div>recieved a lot of skills, that helps me to deal every issue. Because</div>
<div>there are exist an issues, that you can't solve by using internet. For</div>
<div>example I worked with special software for MRI.</div>
</div>
<div class="col-md-4 offset-md-1 whiteone">
<img src="img/white.png">
</div>
<div class="col-md-6 nowi">
Now I am <span class="wd">WEB DESIGNER</span>
</div>
<div class="col-md-9 offset-md-1 person">
And a person, who ready to make <span class="cool">COOL</span> web-site for you.
</div>
<div class="col-md-4 offset-md-7 d-flex flex-row-reverse">
<img class="whitetwo" src="img/white.png">
</div>
</div>
<!-- Четвертый блок -->
<div class="row no-gutter fob">
<div class="col-md-5 offset-md-3 text-center inmy">
In my projects I use
</div>
<div class="col-md-4 offset-md-1 desone">
<img src="img/gapps.png">
<div class="tech1">
<div>I use graphical applications to</div>
<div>make a template for your website.</div>
<div>This is the first step. Here we can</div>
<div>coose a colors, that will be used</div>
<div>in web-site</div>
</div>
</div>
<div class="col-md-6 destwo">
<img src="img/site.png">
<div class="tech1">
<div>To make web-page, I use HTML,CSS, JS, Less. Here I</div>
<div>can make animation, that can make your website</div>
<div>alive.</div>
</div>
</div>
<div class="col-md-10 offset-md-1 technologies">
<div>I always <span class="devmy">DEVELOPE</span> myself, learn new technologies and</div>
</div>
<div class="col-md-4 offset-md-7 inmy"><span class="use">USE</span> it in my projects</div>
</div>
<!-- Футер -->
<div class="row no-gutter foot">
<div class="col-md-4 offset-md-1 social">
<img src="img/email.png">
den_lupanov#mail.ru
<div class="fb">
<img src="img/facebook.png">
https://www.facebook.com/den.necris
</div>
</div>
<div class="col-md-1 offset-md-5 gototop">
<img id="up" src="img/up.png">
</div>
</div>
</div>
</div>
</body>
</html>
'''
I have a code:
window.onload = function(){
// Изменение цвета при наведении на кнопку
var button = document.getElementById("button");
button.addEventListener("mouseenter", function(){
button.classList.remove("bnative1");
button.classList.add("buttonclass1");
});
button.addEventListener("mouseleave", function(){
button.classList.remove("buttonclass1");
button.classList.add("bnative1");
})
// Scroll to the first element(Works ok)
document.getElementById("button").addEventListener("click", scrollToElement);
function scrollToElement(e){
element = document.getElementById("sb");
element.scrollIntoView({behavior: 'smooth', block: "start",});
}
//Scroll to another element(ERROR)
document.getElementById("up").addEventListener("click", scrollToTop);
function scrollToTop(e){
top = document.getElementById("menu");
top.scrollIntoView({behavior: 'smooth', block: "start"});
}
}
'''
Finally, when I click on the second element for scrolling, in debugger I recieve an error:"Uncaught TypeError: top.scrollIntoView is not a function
at HTMLImageElement.scrollToTop (script.js:22)". It should works properly, but I don't understand why it doen not working
you just needed to define "top". add var and your code works!
window.onload = function(){
}
// Изменение цвета при наведении на кнопку
var button = document.getElementById("button");
button.addEventListener("mouseenter", function(){
button.classList.remove("bnative1");
button.classList.add("buttonclass1");
});
button.addEventListener("mouseleave", function(){
button.classList.remove("buttonclass1");
button.classList.add("bnative1");
})
// Scroll to the first element(Works ok)
document.getElementById("button").addEventListener("click", scrollToElement);
function scrollToElement(e){
element = document.getElementById("sb");
element.scrollIntoView({behavior: 'smooth', block: "start",});
}
//Scroll to another element(ERROR)
document.getElementById("up").addEventListener("click", scrollToTop);
function scrollToTop(e){
var top = document.getElementById("menu");
top.scrollIntoView({behavior: 'smooth', block: "start"});
}
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Welcome</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<div class="container-fluid">
<header>
<div id="menu" class="row no-gutter menu">
<div class="col-md-3 offset-md-1">
<img src="img/logo.png">
</div>
<div class="col-md-8">
<nav class="d-flex flex-row-reverse">
<ul class="p-2">
<li>
Improves
</li>
<li>
Projects
</li>
<li>
<a id="about" href="">About</a>
</li>
<li>
Home
</li>
</ul>
</nav>
</div>
</div>
<div class="row no-gutter">
<div class="hellopage">
<div class="col-md-10 offset-md-1 hello">
<font>
Hello.
</font>
<br>
<div class="mynameis">
My name is
<div class="name">
DENIS,
</div>
</div>
<div class="whoami">
I am a web-desihner, and front-end developer, and a person, who interested in IT.
</div>
<div class="quality">
Quality is a main parametr for me.
</div>
<div class="classcol-md-5 offset-md-4">
<button class="bnative1" id="button">
FOLLOW ME
</button>
</div>
</div>
</div>
</div>
</header>
<!-- Второй блок -->
<div class="container-fluid">
<div id="sb" class="row no-gutter sb">
<div class="col-md-6 offset-md-3 text-center whatcani">
What can I offer for you?
</div>
<div class="col-md-3 offset-md-1 pic1 ">
<img src="img/adopt.png">
<div class="txt1">
<div class="top1">Adaptive Web-Design</div>
<div>I always use adaptive</div>
<div>design.Usually,web-site</div>
<div>is an advertisment</div>
<div>for big set of companies.</div>
<div>It have to be focused on</div>
<div>client and must be</div>
<div>correctly displayed in all</div>
<div>devices</div>
</div>
</div>
<div class="col-md-3 offset-md-1 pic2">
<img src="img/hands.png">
<div class="txt2">
<div class="top2">Indivigual aproach</div>
<div>I always interact with</div>
<div>the customer and ready</div>
<div>to give some advice,</div>
<div>based on my experience</div>
<div>to make web-site better</div>
<div>and user-friendly</div>
</div>
</div>
<div class="col-md-3 offset-md-1 pic3">
<img src="img/calendar.png">
<div class="txt3">
<div class="top3">Completion on time</div>
<div>The project will be</div>
<div>compleated on time,</div>
<div>and a work plan will be</div>
<div>provided for the</div>
<div>customer</div>
</div>
</div>
<div class="col-md-8 offset-md-2 line">
<hr>
</div>
</div>
</div>
<!-- Третий блок -->
<div id="me" class="row no-gutter tb">
<div class="col-md-3 offset-md-4 text-center aboutme">
About me
</div>
<div class="col-md-10 offset-md-1 txtab">
<div>I started my career as a system administrator(2016). At work I</div>
<div>recieved a lot of skills, that helps me to deal every issue. Because</div>
<div>there are exist an issues, that you can't solve by using internet. For</div>
<div>example I worked with special software for MRI.</div>
</div>
<div class="col-md-4 offset-md-1 whiteone">
<img src="img/white.png">
</div>
<div class="col-md-6 nowi">
Now I am <span class="wd">WEB DESIGNER</span>
</div>
<div class="col-md-9 offset-md-1 person">
And a person, who ready to make <span class="cool">COOL</span> web-site for you.
</div>
<div class="col-md-4 offset-md-7 d-flex flex-row-reverse">
<img class="whitetwo" src="img/white.png">
</div>
</div>
<!-- Четвертый блок -->
<div class="row no-gutter fob">
<div class="col-md-5 offset-md-3 text-center inmy">
In my projects I use
</div>
<div class="col-md-4 offset-md-1 desone">
<img src="img/gapps.png">
<div class="tech1">
<div>I use graphical applications to</div>
<div>make a template for your website.</div>
<div>This is the first step. Here we can</div>
<div>coose a colors, that will be used</div>
<div>in web-site</div>
</div>
</div>
<div class="col-md-6 destwo">
<img src="img/site.png">
<div class="tech1">
<div>To make web-page, I use HTML,CSS, JS, Less. Here I</div>
<div>can make animation, that can make your website</div>
<div>alive.</div>
</div>
</div>
<div class="col-md-10 offset-md-1 technologies">
<div>I always <span class="devmy">DEVELOPE</span> myself, learn new technologies and</div>
</div>
<div class="col-md-4 offset-md-7 inmy"><span class="use">USE</span> it in my projects</div>
</div>
<!-- Футер -->
<div class="row no-gutter foot">
<div class="col-md-4 offset-md-1 social">
<img src="img/email.png">
den_lupanov#mail.ru
<div class="fb">
<img src="img/facebook.png">
https://www.facebook.com/den.necris
</div>
</div>
<div class="col-md-1 offset-md-5 gototop">
<img id="up" src="img/up.png">
</div>
</div>
</div>
Other than using it like that it might be better to make it one function and use it in the HTML.
The following code should work like a charm:
function scrollSmoothTo(elementId) {
var element = document.getElementById(elementId);
element.scrollIntoView({ block: 'start', behavior: 'smooth' });
}
And, in HTML use it like that:
<a class="btn-outline-light" onclick="scrollSmoothTo('work')">See our work</a>
Related
I have a one page template that i am trying to modify so that on clicking particular links the user goes to a new page rather than scroll to a different section. I still want to keep the scroll to a section navigation but I have call to action buttons in those sections that need to go to different pages. The website is a wordpress site
Here is my js code:
$(document).ready(function() {
if ($("a" != ".external")){
$("a").on('click', function(event) {
if ((this.hash !== "/membership-form/") && (this.hash !== "#wood-grain") && (this.hash !== "#gifting") && (this.hash !== "#non-slip") && (this.hash !== "#wpcf7-f4-o1") && (this.hash !== "#carousel-control-next") && (this.hash !== "#carousel-control-prev") && (this.hash !== "#carouselExampleControls")) {
event.preventDefault();
var hash = this.hash;
$('html, body').animate({
scrollTop: $(hash).offset().top - 100
}, 800, function() {});
}
});
}
});
So on this line if ($("a" != ".external")) I added a class called external to the <a> tags that need to leave the page. I also tried this.hash !== "/membership-form/" to try and target particular <a> tags but it only seems to work with my forms and image gallery that have # references.
How can I get the site to navigate away from the home page to my other pages?
Thanks
UPDATED JS CODE
AOS.init();
var $ = jQuery;
$(document).ready(function() {
$("a").on('click', function(event) {
if (!($(location).attr('href', '/BDWest/membership-form/'))){
if ((this.hash !== "/membership-form/") && (this.hash !== "#wood-grain") && (this.hash !== "#gifting") && (this.hash !== "#non-slip") && (this.hash !== "#wpcf7-f4-o1") && (this.hash !== "#carousel-control-next") && (this.hash !== "#carousel-control-prev") && (this.hash !== "#carouselExampleControls")) {
event.preventDefault();
var hash = this.hash;
$('html, body').animate({
scrollTop: $(hash).offset().top - 100
}, 800, function() {});
}
}
});
});
UPDATED WITH THE PHP CODE
HEADER.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title><?php bloginfo('name');?> | <?php wp_title(); ?></title>
<link rel="pingback" href="<?php bloginfo('pingback_url');?>" />
<!-- Bootstrap core CSS -->
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div class="loader">
<img alt="first image" src="<?php print IMAGES;?>/3.gif">
</div>
<div class ="parallax-full" id="soon">
<div class="banner-center">
<div class="sticky-top">
<img src="https://via.placeholder.com/468x60?text=Advert" class="img-fluid"/>
</div>
</div>
<div class="hero-textBG">
<div class="logo">
<h1>CLUB BD WEST</h1>
<h2>Logo can be here</h2>
<a class="external" href="/membership-form/"><button type="button" class="btn btn-default">Register Today</button></a>
</div>
<div data-aos="fade-up" data-aos-offset="0">
<div class="scroll-button">
<a href="#home">
<img class="img-fluid" alt="scroll-button" src="<?php print IMAGES;?>/button-down.png">
</a>
<h6>Scroll down</h6>
</div>
</div>
</div>
</div>
navigation.php
<!-- Navigation -->
<nav class="navbar sticky-top navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#home"> <img src="https://via.placeholder.com/70x40?text=Very+Small+Logo" class="img-fluid"/> </a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#home">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#section2">Our Story</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#section3">Events</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#section4">Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#section5">Contact Us</a>
</li>
</ul>
</div>
</div>
</nav>
index.php
<!-- Header --><?php get_header(); ?><!--Menu -->
<?php get_template_part('navigation');?><!--Home Section -->
<div class ="parallax" id="BG-2">
<div class="container-fluid">
<div id="home">
<div class="row">
<div class="col-sm-12 text-center">
<div class="content">
<div class="mt-2 col-md-12">
<div data-aos="fade-up">
<h1 class="mt-1">CLUB BD WEST</h1>
<p class="lead">There are no winners or losers, ours is a philosophy of enjoyment through participation and we have organized a range of activities to suit all ages, fitness levels and activity choices.</p>
</div>
</div>
</div>
</div>
</div>
<div class="w-100"> </div>
<section class="top-section">
<div data-aos="fade-up">
<div class="container">
<div class="row">
<div class="col text-center">
<img class="icon" src="<?php PRINT IMAGES;?>/weights-icon.png"></img>
<h3>Badminton</h3>
</div>
<div class="col text-center">
<img class="icon" src="<?php PRINT IMAGES;?>/staff-icon.png"></img>
<h3>Football</h3>
</div>
<div class="col text-center">
<img class="icon" src="<?php PRINT IMAGES;?>/aerobics-icon.png"></img>
<h3>Cricket</h3>
</div>
<div class="col text-center">
<img class="icon" src="<?php PRINT IMAGES;?>/spinning-icon.png"></img>
<h3>Recreational Cycling</h3>
</div>
<div class="col text-center">
<img class="icon" src="<?php PRINT IMAGES;?>/aerobics-icon.png"></img>
<h3>Kayaking</h3>
</div>
<div class="col text-center">
<img class="icon" src="<?php PRINT IMAGES;?>/spinning-icon.png"></img>
<h3>Nature rambling</h3>
</div>
</div>
<div class="row">
<div class="col text-center">
<img src="https://via.placeholder.com/500x60?text=Call+to+action+Club+Sports" class="img-fluid"/>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12 text-center">
<div class="content">
<div class="mt-2 col-md-12">
<div data-aos="fade-up">
<p class="lead">The list of activities is growing, fueled by suggestions from our members. It’s your club and responds to your needs..</p>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col text-center">
<h3>Our Goals</h3>
<p>To build an online social platform bringing together a diversity of people sharing a common purpose of interaction through sport and recreation.</p>
</div>
<div class="col text-center">
<h3>Our Mission</h3>
<p>To continue growth of both membership and activities developing a multicultural community with a social conscience. </p>
</div>
<div class="col text-center">
<h3>Our Vision</h3>
<p>To add to the quality of life, build cohesion in communities and enrich society.</p>
</div>
</div>
</div>
</section>
</div>
</div><!-- Container End -->
<hr class="content-seperator"></hr>
<div id="section2">
<div data-aos="fade-up">
<div class="container">
<div class="row">
<div class="col-sm-12 text-center">
<h1>Our Story</h1>
<p>It all started when a group of friends got together for an impromptu game of badminton. The shared love of the game and the company of friends was a compelling mix and very quickly these random get togethers developed into a regular event.</p> <p>The group began to grow rapidly, first from within the circle of friends and later extending to others that were exposed to the group and drawn to it. At this point it was evident that a structure was required to communicate with group members and so BD West was formed.</p> <p>BD West is now a not for profit social club with over 200 members and plans to grow into a multicultural community of like-minded people brought together by the love of sport, recreation and the harmony of social connection. </p>
</div>
</div>
<br>
<div class="row">
<div class="col-sm-12 text-center">
<h2>Our Management Team</h2>
</div>
<div class="col-sm-12 text-center">
<img src="https://via.placeholder.com/500x60?text=Call+to+action+Management+Team" class="img-fluid"/>
</div>
</div>
</div>
</div>
</div>
<hr class="content-seperator"></hr>
</div><!-- BG End -->
<div class ="parallax" id="BG-3"> <div class="col-sm text-center"> <img src="https://via.placeholder.com/468x60?text=Advert" class="img-fluid"/> </div>
<div id="section3">
<div class="container">
<div class="row">
<div class="col-lg-12 mb-sm-0 text-center">
<div class="content">
<div data-aos="fade-up">
<h3 class="mt-2">Events</h3>
<p class="lead">Here are some of our latest events</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12 text-center">
</div>
</div>
</div><!--./container -->
</div> <!-- ./section3 -->
<hr class="content-seperator"></hr>
</div><!--./ BG3 --> <!-- Pricing Table -->
<div class ="parallax" id="BG-1">
<div class="container">
<div class="row">
<div class="col-lg-12 mb-3 mb-sm-0 text-center">
<div id="section4">
<div class="content">
<div data-aos="fade-up">
<h3 class="mt-2">Gallery</h3>
</div>
</div>
</div>
</div>
</div>
</div>
<hr class="content-seperator-yellow"></hr>
</div> <!-- Contact Form and Location -->
<div class ="parallax" id="BG-2">
<div id="section5">
<div class="container">
<div class="row">
<div class="col-12 text-center">
<div data-aos="fade-up">
<div class="content">
<h3 class="mt-2">Contact Us</h3>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12 text-center">
<div data-aos="fade-up">
<?php echo do_shortcode('[contact-form-7 id="16" title="Contact Us"]');?>
</div>
</div>
</div>
<div class="row">
<div class="col-12 text-center">
<div data-aos="fade-up">
<p class="lead">BD West Incorporated</p>
</div>
</div>
</div>
<div class="row">
<div class="col-12 text-center">
<div data-aos="fade-up">
<div class="content">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--Footer Section -->
<?php get_footer();?>
if you want to link through jQuery it would be like this:
$(location).attr('href', 'http://stackoverflow.com')
But it is highly recommended to do this with pure Javascript it best simulates an HTTP redirect, and it would go like this:
// similar behavior as an HTTP redirect
window.location.replace("http://stackoverflow.com");
// similar behavior as clicking on a link
window.location.href = "http://stackoverflow.com";
It's better to use window.location.replace(...), because the replace() doesn't keep the page they'd come from in the session history, which avoids having the users stuck in a never-ending back-button loop.
There is a site (http://f0347217.xsph.ru/about.html) on which, when first run at resolutions above 1920, the layout at the first load is displayed incorrectly - the font, leading, and distance between objects are reduced. At the same time, when you move around the site for a while and return to the original page, everything returns to normal. The site is written in fullpage js. codepen link https://codepen.io/RukUndead/pen/xxxzEKZ
<!DOCTYPE html>
<html xmlns=http://www.w3.org/1999/xhtml>
<head>
<meta http-equiv=Content-Type content="text/html; charset=UTF-8">
<meta charset=UTF-8>
<meta name=viewport content="width=device-width, initial-scale=1">
<meta http-equiv=Content-Type content="text/html; charset=utf-8" />
<script type=text/javascript src=https://ajax.googleapis.com/ajax/libs/jquery//2.2.0/jquery.min.js></script>
<link rel=stylesheet id=six_mainstyle-css href=./artfiles/mainbig.css type=text/css media=all>
<link rel=icon href=favicon.ico type=image/x-icon>
<link rel="shortcut icon" href=favicon.ico type=image/x-icon>
<link rel=stylesheet href=https://use.fontawesome.com/releases/v5.0.13/css/all.css integrity=sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp crossorigin=anonymous>
<link rel=stylesheet href=https://unpkg.com/swiper/css/swiper.min.css>
<link rel=stylesheet href=./artfiles/fullpage.css>
<link rel=stylesheet href=https://cdnjs.cloudflare.com/ajax/libs/animsition/4.0.2/css/animsition.min.css>
<title>About</title>
<style media=screen>.bg-init,.animsition-overlay-slide{background:#f3f2ed;z-index:9999}.overlay-slide-in-left{background:#f3f2ed;z-index:9999}</style>
</head>
<body class=bg-init id=clrmen>
<div class=animsition-overlay>
<nav class="l-nav pushy pushy-left">
<ol>
<ul id=menu-primary-menu class=l-nav__menu>
<p><li id=linkin><a id=linkinclr4 class=animsition-link href=gallery.html data-animsition-out-class=overlay-slide-out-left><div class=ml>Gallery</div></a></li></p>
<p><li id=linkin><a id=linkinclr2 class=animsition-link href=about.html data-animsition-out-class=overlay-slide-out-left><div class=ml>About</div></a></li></p>
<p><li id=linkin><a id=linkinclr3 class=animsition-link href=courses.html data-animsition-out-class=overlay-slide-out-left><div class=ml>Courses</div></a></li></</p>
<p><li id=menu-item-615 class="js-site-underlay-trigger menu-item menu-item-type-post_type menu-item-object-page menu-item-615"><a href=https://www.artimpress.com/about.html/><div class=ml>Contact</div></a></li></p>
</ul>
<ul class="l-nav__menu l-nav__menu--secondary">
<div class=l-nav__logo>
<img src=./img/artlogom.png></div>
</li>
</ul>
</nav>
<div class="site-burger site-burger--left [ menu-btn ]" data-pushy-dir=left>
<span></span>
<span></span>
<span></span>
</div>
<div class=site-transition></div>
<div class=site-transition__inner>
</div>
<div class=site-overlay></div>
<div class=site-underlay>
<div class=site-underlay__close>
<div class=c-close><span></span><span></span></div>
</div>
<div class=site-underlay__content>
<div class=row>
<div class="columns small-20 medium-offset-9 medium-11 xlarge-offset-8 xlarge-12 xlarge-offset-11 xlarge-9 xxlarge-offset-13 xxlarge-7">
<div class=m-page>
<ul>
<p style=font-family:Thin><strong>Address</strong></p>
<p>Saint-Peterburg,</p>
<p>Mokhovaya str. 42</p>
<p> Metro st. Gostiny Dvor</strong></p>
<div class=cont><p style=font-family:Thin><strong>Contact</strong></p>
<p>impress.art#yandex.ru </p></div>
<div class="circle-effect circle-effect-1a"><div class=block010>
</i></div>
</i></i></div>
<div class=circle><i class="fab fa-instagram"></i></div>
</i></div>
</i></i></div>
</i></i></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class=site-mark>
</div>
</div>
</div>
<div id="myContainer">
<div class="section">
<div class="slide"><div class="txtblock1">
<div class="textline"></div>
<div class="fadeInM1"><h1> About</h1></div>
<div class="fadeInM2"><h3>Direction</h3></div>
<div class="fadeInM3"><p>The Art Impress is a private international art school where you can get knowledge and skills in classical visual arts:</p>
<ul><li>• Academic drawing;</li>
<li>• Academic painting;</li>
<li>• Academic sculpture;</li>
<li>• Analogue photography<br>   and cinematography.</li></ul></div>
</div><div class="nmrblock2"><div class="fadeInM3" style="color: #cdccc8;">01</div></div>
<div class="fadeInM3"><div class="imgblock1">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="./img/about-01.jpg" ></div>
<div class="swiper-slide"><img src="./img/about-01.2.jpg" ></div>
</div>
<div class="swiper-pagination"></div>
</div>
</div></div>
</div></div>
<div class="section" >
<div class="slide"><div class="txtblock" >
<div class="textline"></div>
<h1> About</h1>
<h3>Tutors</h3>
<p> During your studies in The Art Impress you can develop your artistic skills and rapidly upgrade your professional art competencies in our powerful environment consisted of well-trained students and highly qualified tutors. Our tutors are graduates of The Saint-Petersburg State Repin Academic Institute of Painting, Sculpture and Architecture.</p>
</div><div class="nmrblock2">02</div>
<div class="imgblock">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="./img/about-02.jpg" ></div>
<div class="swiper-slide"><img src="./img/about-02.2.jpg" ></div>
</div>
<div class="swiper-pagination"></div>
</div>
</div></div>
<div class="slide"><div class="txtblock">
<div class="textline"></div>
<h1> About</h1>
<h3>Objective</h3>
<p>Our mission is valuable knowledge transfer from professional instructor to student in face-to-face communication.</p>
</div><div class="nmrblock2">03</div>
<div class="imgblock">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="./img/about-3.2.jpg" ></div>
<div class="swiper-slide"><img src="./img/about-3.3.jpg" ></div>
</div>
<div class="swiper-pagination"></div>
</div>
</div></div>
<div class="slide"><div class="txtblock">
<div class="textline"></div>
<h1> About</h1>
<h3>Education</h3>
<p>Every syllabus is tailor-made, it depends on your goals and level of training:</p>
<ul>
<li>• Advanced training</li>
<li>• Requalification</li>
<li>• Hobby for your soul</li>
<li>• Entrance exam preparation <br>   for institutes of fine arts</li></ul>
</div><div class="nmrblock2">04</div>
<div class="imgblock">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="./img/about-04.jpg" ></div>
<div class="swiper-slide"><img src="./img/about-4.2.jpg" ></div>
</div>
<div class="swiper-pagination"></div>
</div>
</div></div>
</div>
<div class="section"><div class="fadeInM1">
<div class="slide"><div class="txtblock4">
<div class="textline"></div>
<h1> About</h1>
<h3></h3>
<p>In The Art Impress there are classes on regular bases and also intensive sessions are available if you come to Saint-Petersburg from other regions of Russia or from abroad for a limited time. Classes take place in our studio, museums of Saint-Petersburg and plein air. In The Art Impress you study with complete immersion in creative educational environment and gain considerable experience in fine arts.</p>
</div><div class="nmrblock3">05</div>
<div class="imgblock3">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="./img/about-05.jpg" ></div>
<div class="swiper-slide"><img src="./img/about-5.2.jpg" ></div>
</div>
<div class="swiper-pagination"></div>
</div>
</div></div>
<div class="slide">
<div class="imgblock3">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="./img/about-01.3.jpg" ></div>
</div>
<div class="swiper-pagination"></div>
</div>
</div>
<div class="fadeInM2"><div class="txtblock3">
<div class="fl1">To be cultured,</div><div class="fl2">Is to be relevant</div>
<div class="fl3"> Saint-Peterburg
<br>
Mokhovaya str. 42 <br>Metro st. Gostiny Dvor <br><br>impress.art#yandex.ru</div>
<div class="l-nav__logo2">
<img src="./img/artlogo.png " >
</div>
<p></p>
<div class="circle-effect circle-effect-1a"><div class="icons">
<div class="circle"><i class="fab fa-twitter"></i></div>
<div class="circle"><i class="fab fa-facebook-f"></i></i></div>
<div class="circle"><i class="fab fa-instagram"></i></div>
<div class="circle"><i class="fab fa-youtube" ></i></div>
<div class="circle"><i class="fab fa-vk"></i></i></div>
<div class="circle"><i class="fab fa-telegram-plane"></i></i></div></div>
</div>
</div>
</div>
</div>
<script type=text/javascript src=fullpage.scrollHorizontally.min.js></script>
<script type=text/javascript src=https://unpkg.com/fullpage.js/dist/fullpage.extensions.min.js></script>
<script type=text/javascript>new fullpage("#myContainer",{sectionsColor:["#f3f2ed","#5c5d62","#5c5d62","#5c5d62","#5c5d62","#f3f2ed"],anchors:["firstPage","secondPage","3rdPage","4thpage"],menu:"#menu",slidesNavigation:false,scrollBar:false,licenseKey:"INSERT YOUR FULLPAGE LICENSE KEY HERE",controlArrows:false,keyboardScrolling:false,scrollHorizontally:true,scrollHorizontallyKey:"71E55697-D9CA4722-B12417FB-6467B0C3",normalScrollElements:".scrollable-content",});</script>
<script type=text/javascript src=./artfiles/mainbig.js></script>
<script src=https://cdnjs.cloudflare.com/ajax/libs/animsition/4.0.2/js/animsition.min.js integrity="sha256-8y2mv4ETTGZLMlggdrgmCzthTVCNXGUdCQe1gd8qkyM=" crossorigin=anonymous></script>
<script src=https://unpkg.com/swiper/js/swiper.min.js></script>
<script>var swiper=new Swiper(".swiper-container",{speed:3600,pagination:{el:".swiper-pagination",},autoplay:{delay:5000,},});</script>
<script>$(document).ready(function(){$(".animsition-overlay").animsition({inClass:"overlay-slide-in-left",outClass:"overlay-slide-out-left",overlay:true,overlayClass:"animsition-overlay-slide",overlayParentElement:"body"}).one("animsition.inStart",function(){$("body").removeClass("bg-init");$(this).find(".item").append('<h2 class="target">Callback: Start</h2>');console.log("event -> inStart")}).one("animsition.inEnd",function(){$(".target",this).html("Callback: End");console.log("event -> inEnd")})});</script><script>
$(document).ready(function() {
$('.animsition-overlay').animsition({
inClass: 'overlay-slide-in-left',
overlay : false,
overlayClass : 'animsition-overlay-slide',
overlayParentElement : 'body'
})
.one('animsition.inStart',function(){
$('body').removeClass('bg-init');
$(this)
.find('.item')
.append('<h2 class="target">Callback: Start</h2>');
console.log('event -> inStart');
})
.one('animsition.inEnd',function(){
$('.target', this).html('Callback: End');
console.log('event -> inEnd');
});
});
</script>
<script>
$( "#linkinclr" ).click(function( event ) {
event.preventDefault();
$( "#clrmen" ).fadeOut(900);
});
$( "#linkinclr2" ).click(function( event ) {
event.preventDefault();
$( "#clrmen" ).fadeOut(900);
});
$( "#linkinclr3" ).click(function( event ) {
event.preventDefault();
$( "#clrmen" ).fadeOut(900);
});
$( "#linkinclr4" ).click(function( event ) {
event.preventDefault();
$( "#clrmen" ).fadeOut(900);
});
</script>
</body>
</html>
Please check the sequence of file gets load.
Make sure your css should load first and at last you can load your js files
I got a site form my html teacher, he asked me to check it and fix any problems if they are there. While I fixted some, there is still one big one that I can't figure out. It takes a long time (around 30 seconds) to load the site completly. Everything loads correctly, exapt the navigation menu and a youtube video. I found the source of the problem, it has something to do with the JavaScript code. I don't understand JavaScripy, so I can't figure out the problem. When I delete the JavaScript code, the site loads, but the navigation menu and the video don't, not at all to be exact. There is another JavaScript file, but I don't think it has anything to do with this, and it's to long to post here, so you can download the file here. Here is the css file.
The last 10 lines of JavaScript code is the problem.
Here is the code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Magic-Fire® by Safretti - Home - Safretti Magic-Fire</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="keywords" content="">
<link rel="shortcut icon" type="image/png" href="./assets/images/favicon.png">
<link rel="stylesheet" href="./assets/css/style.css?v=1501504031">
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o) [0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-1301951-24', 'auto');
ga('send', 'pageview');
</script>
</head>
<body>
<div id="viewport">
<div class="page" id="page-18027">
<header class="block-4-1 v-0" data-sticky="sticky"><div class="container">
<div class="row">
<div class="col">
<div class="middle">
<div class="logo">
<a class="media-1" href="./index.html"><img src="./assets/images/safretti-magicfire-fireplaces-logo-white.svg"></a>
</div>
<div class="menu">
<a class="handler" href="#">
<div></div>
<div></div>
<div></div>
</a>
<div class="mobile-menu block-4-1-mobile-menu v-0">
<div class="outer">
<div class="inner">
<div class="menu-1 menu-menu-1"><ul> <li class="active">Home</li><li>Magic-Fire?</li><li class="">Mistero<ul class="" style="height: 179px;"><li>Mistero 500</li><li>Mistero 1000</li><li>Mistero 1500</li><li>Mistero 2000</li><li>Mistero customized</li></ul> </li><li class="">Incanto<ul class="" style="height: 179px;"><li>Incanto 1000</li><li>Incanto 1500</li><li>Incanto 2000</li><li>Incanto 2500</li><li>Incanto customized</li></ul></li><li>Customized</li><li>References</li><li>About Safretti</li><li>Contact</li></ul></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div></header>
<section id="block-39-848428" class="v-35">
<div class="media-4" data-size="1920x0"><iframe src="//www.youtube.com/embed/U5RHhah4poI?enablejsapi=1&wmode=transparent" allowfullscreen></iframe>
<div class="container">
<div class="row">
<div class="col">
<div class="box">
</div>
</div>
</div>
</div>
</section>
<section id="block-51-848431" class="v-35">
<div class="media-4" data-size="1920x0"><iframe src="https://www.youtube.com/embed/U5RHhah4poI?rel=0&autoplay=1&controls=0&showinfo=0" allowfullscreen></iframe>
</div>
<div class="container">
<div class="row">
<div class="col">
<div class="box">
</div>
</div>
</div>
</div>
</section>
<section id="block-76-206454" class="v-35">
<div class="container">
<div class="row">
<div class="col">
<div class="box">
<h1 class="heading-2">The greatest contrast in the world brought together by state of the art technique.</h1>
</div>
</div>
</div>
</div>
</section>
<section id="block-36-219665" class="v-0">
<div class="container">
<div class="row equalize">
<div class="col col-md-6">
<a class="media-2" data-size="480x0" href="./what-is-magic-fire-/incanto-old/index.html">
<img src="./assets/images/home-1c.480x0.jpg">
</a>
<h3 class="heading-3">INCANTO</h3>
<div class="text-2"><p>Incanto is the Magic-Fire Mistero (see description Mistero) provided with a housing so it can be easily integrated in several projects.
</p></div>
<a class="button-2" href="./incanto/index.html">more info ></a>
</div>
<div class="col col-md-6">
<a class="media-2" data-size="480x0" data-position="center-middle" href="./what-is-magic-fire-/mistero-old/index.html">
<img src="./assets/images/home-1b.480x0.jpg">
</a>
<h3 class="heading-3">MISTERO</h3>
<div class="text-2">
<p>Mistero is an electrical fire. The Magic-Fires are equipped with water reservoirs. An evapor<span style="color: #999999;">ator turns t</span>he water into fine water mist. By illuminating the mist you will get a truly realistic and lively smoke / flame effect.</p>
</div>
<a class="button-2" href="./mistero/index.html">Available in the following sizes</a>
</div>
</div>
</div>
</section>
<section id="block-76-956792" class="v-35">
<div class="container">
<div class="row">
<div class="col">
<div class="box">
<h2 class="heading-2">
<span style="font-family: raleway-thin; color: #ffffff;">ON DEMAND - CUSTOM MADE</span>
</h2>
<div class="text-2">
<p><span style="font-family: raleway-regular; color: #ffffff; font-size: 12px;"><span style="color: #999999;">The Magic-Fire firespaces are also available in on demand custom made solutions. Specialy for you as furniture or interior designer or architect if you want something unique for your project. Interested? </span><br /><span style="color: #999999;">Please</span><span style="font-family: raleway-bold;"><strong><span style="color: #ffffff;"> click here</span></strong></span><span style="color: #999999;"> for more information or</span> <strong><span style="font-family: raleway-bold;"><span style="color: #ffffff;">contact</span></span></strong> <span style="color: #999999;">us for more information.</span></span></p>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="block-8-2 v-0">
<div class="container">
<div class="row">
<div class="col">
<h3 class="heading-3">Safretti BV - Metaalstraat 3a/3c - 7483 PD Haaksbergen - The Netherlands - ICC nr.: 08130256 - VAT nr.: NL8138.45.245.B01</h3>
</div>
</div>
</div>
</section>
<section class="block-55-1 v-0">
<div class="container">
<div class="row">
<div class="col">
<div class="middle">
<div>
<div>
<div class="media-1">
<img src="./assets/images/icon-phone.svg">
</div>
<div class="text-6"><p>0031 (0)53 574 2554
</p></div>
</div>
<div>
<div class="media-1">
<img src="./assets/images/icon-email.svg">
</div>
<div class="text-6"><p><u>info#safretti.com</u>
</p></div>
</div>
</div>
<div>
<div>
<a class="media-1" href="http://www.facebook.com/safretti" target="_blank">
<img src="./assets/images/icon-facebook.svg">
</a>
<a class="media-1" href="http://nl.linkedin.com/in/safretti-bv-23172931" target="_blank">
<img src="./assets/images/icon-linkedin.svg">
</a>
<a class="media-1" href="http://nl.pinterest.com/safretti/" target="_blank">
<img src="./assets/images/icon-pinterest.svg">
</a>
<a class="media-1" href="http://www.youtube.com/channel/UCkN0NWaLeQts786gy6XkSkQ" target="_blank">
<img src="./assets/images/icon-youtube.svg">
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
<script src="./assets/js/script.js?v=1501504031"></script>
<script src="//maps.googleapis.com/maps/api/js? key=AIzaSyAdxtgr_gHrZ7E8t2aSZ_-eTAbIr_zc478"></script>
<script>$(window).on('load', function() {
new Menu({selector: '#page-18027 .block-4-1 .menu, [data-page_id="page- 18027"] .block-4-1 .menu'});
new Cover({selector: '#page-18027 #block-51-848431 .media-4, [data- page_id="page-18027"] #block-51-848431 .media-4'});
new Sticky({selector: '#page-18027 [data-sticky], [data-page_id="page- 18027"] [data-sticky]'});
new Scale({selector: '#page-18027 [class*="heading-"], [data-page_id="page-18027"] [class*="heading-"], #page-18027 [class*="text-"], [data-page_id="page-18027"] [class*="text-"]'});
new Anchor({selector: '#page-18027 a[href^="#"], [data-page_id="page-18027"] a[href^="#"]'});
new Popup({selector: '#page-18027 .block-55-1 a[href][target="popup"], [data-page_id="page-18027"] .block-55-1 a[href][target="popup"]'});
new Equalize({selector: '#page-18027 #block-36-219665 .equalize, [data- page_id="page-18027"] #block-36-219665 .equalize'});
new Video({selector: '#page-18027 #block-51-848431 video, [data- page_id="page-18027"] #block-51-848431 video, #page-18027 #block-51-848431 iframe, [data-page_id="page-18027"] #block-51-848431 iframe'});
});
</script>
</body>
Check your style.css if you have many imports. That is something that can cause long loading times. Otherwise if your hosting it localy try to move it to somewhere else. Or check if you have many animations (js).
Edit: Actually the pageloaded very fast on my side. I mean I hadnt the CSS but it lokks like its not the html/js code. Could you post the CSS code too inside your question?
get rid of the large space in the URL in this line.
<script src="//maps.googleapis.com/maps/api/js? key=AIzaSyAdxtgr_gHrZ7E8t2aSZ_-eTAbIr_zc478"></script>
change to
<script src="//maps.googleapis.com/maps/api/js?key=AIzaSyAdxtgr_gHrZ7E8t2aSZ_-eTAbIr_zc478"></script>
it is best practice to not have spaces in URL
see Google Maps API Best Practices
I am trying to make simple demo as given in image ![enter image description here][1]
I am able to display contend in view .But I am facing few issue in making this page
how to add background image in contend .I don't have same background image but I have similar background image in this url
how to make text align left in application .The end character in a sigle line .how to make all label left align.
how to add separator line in grid view .Actually In all row separator are present.
here is my code
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Tabs Example</title>
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
</head>
<body>
</body>
<ion-view>
<ion-header-bar align-title="center" class="bar-balanced">
<div class="buttons" style="font-size:20px ;padding:3px">
<i style="font-size:30px;" class='icon ion-chevron-left'></i>
</div>
<h1 class="title">Account</h1>
</ion-header-bar>
<ion-content>
<div class="button-bar">
<a class="button button-small" ui-sref="a" ui-sref-active="button-balanced">Account Details</a>
<a class="button button-small" ui-sref="l" ui-sref-active="button-balanced">Related</a>
<a class="button button-small" ui-sref="dinner" ui-sref-active="button-balanced">d</a>
<a class="button button-small" ui-sref="dinner" ui-sref-active="button-balanced">Notes</a>
</div>
<div>
<h4 class="headerTitle">Account Information</h4>
<div class="row rowoffset">
<div class="col gey_label_font">Number:</div>
<div class="col">0981234165</div>
<div class="col"></div>
<div class="col gey_label_font">Name:</div>
<div class="col">Girish Padhve</div>
</div>
<div class="row rowoffset">
<div class="col gey_label_font">Owner:</div>
<div class="col">Girish</div>
<div class="col"></div>
<div class="col gey_label_font">Total AR:</div>
<div class="col">345</div>
</div>
<div class="row rowoffset">
<div class="col gey_label_font">Last:</div>
<div class="col">123</div>
<div class="col"></div>
<div class="col gey_label_font">Last ] Amount:</div>
<div class="col">9891234165</div>
</div>
<div class="row rowoffset">
<div class="col gey_label_font"> Net Collectible:</div>
<div class="col">123</div>
<div class="col"></div>
<div class="col gey_label_font">Past Due:</div>
<div class="col">9891234165</div>
</div>
<div class="row rowoffset">
<div class="col gey_label_font"> Total Past Due:</div>
<div class="col">123</div>
<div class="col"></div>
<div class="col gey_label_font">Total Promised:</div>
<div class="col">9891234165</div>
</div>
<div class="row rowoffset">
<div class="col gey_label_font">Total Disputed:</div>
<div class="col">123</div>
<div class="col"></div>
<div class="col gey_label_font">Limit:</div>
<div class="col">9891234165</div>
</div>
<div class="row rowoffset">
<div class="col gey_label_font">Remaining:</div>
<div class="col">123</div>
<div class="col gey_label_font"></div>
<div class="col">Credit Score:</div>
<div class="col">9891234165</div>
</div>
</div>
</ion-content>
</ion-view>
</html>
The columns in your codepen already look aligned left to me, so I assume you worked that out. As for the background image and the separator lines, you can use these css rules: http://codepen.io/anon/pen/YXNVvv
#wrapper {
background-image: url(https://dl.dropboxusercontent.com/s/nz1fzunlqzzz7uo/login_bg.png?dl=0);
}
.rowoffset{
border-top: 1px solid gray;
}
.gey_label_font{
text-align: right;
}
I am trying to use a div instead of an image for the item and content but it won't set with the width correctly. I want it to work like the images do.
http://jsfiddle.net/ququat29/ example code
<div class="ContentFlow">
<div class="loadIndicator">
<div class="indicator"></div>
</div>
<div class="flow">
<img class="item" src="http://cdnll.reallygoodstuff.com/images/xl/161170_a.jpg" title="Your_Image_Title" />
<img class="item" src="https://tse1.mm.bing.net/th?id=HN.607994144777177645&pid=1.7" />
<img class="item" src="http://cdnll.reallygoodstuff.com/images/xl/161170_a.jpg" title="Your_Image_Title" />
<!-- Add as many items as you like. -->
</div>
<div class="globalCaption"></div>
<div class="scrollbar">
<div class="slider">
<div class="position"></div>
</div>
</div>
</div>
<div class="ContentFlow">
<div class="flow">
<div class="item more-width">
<div class="center-block club-card content" style="background-color: blue;">
<div class="club-info-wrapper ">
<div class="club-info ">
<h1 class=" club-name ">coffee</h1>
<p class="lead club-location "><strong>name</strong>
</p>
</div>
</div>
</div>
</div>
<div class="item more-width">
<div class="center-block club-card content" style="background-color: red; ">
<div class="club-info-wrapper ">
<div class="club-info ">
<h1 class=" club-name ">car wash</h1>
<p class="lead club-location "><strong>name</strong>
</p>
</div>
</div>
</div>
</div>
<div class="item more-width">
<div class="center-block club-card content" style="background-color: yellow;">
<div class="club-info-wrapper ">
<div class="club-info ">
<h1 class=" club-name ">foutain</h1>
<p class="lead club-location "><strong>name</strong>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
http://www.jacksasylum.eu/ContentFlow/index.php