For some reason, Smooth scroll is not working. I believe that there is something in my HTML causing the problem. Click on Food delivery or anything in that list to test it, in the code. I appreciate any extra eyes on this :)
$(document).ready(function() {
/* For the sticky navigation */
$('.js--section-features').waypoint(function(direction) {
if (direction == "down") {
$('nav').addClass('sticky');
} else {
$('nav').removeClass('sticky');
}
}, {
offset: '60px;'
});
/* Scroll on buttons*/
$('.js--scroll-to-plans').click(function() {
$('html, body').animate({
scrollTop: $('.js--section-plans').offset().top
}, 1000);
});
$('.js--scroll-to-start').click(function() {
$('html, body').animate({
scrollTop: $('.js--section-features').offset().top
}, 1000);
});
/* Navigation scroll*/
$('a[href*="#"]:not([href="#"])').click(function() {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('html, body').animate({
scrollTop: target.offset().top
}, 2000);
return false;
}
}
});
/* Animations on scroll */
$('.js--wp-1').waypoint(function(direction) {
$('.js--wp-1').addClass('animated fadeIn');
}, {
offset: '50%'
});
$('.js--wp-2').waypoint(function(direction) {
$('.js--wp-2').addClass('animated fadeInUp');
}, {
offset: '50%'
});
$('.js--wp-3').waypoint(function(direction) {
$('.js--wp-3').addClass('animated fadeIn');
}, {
offset: '50%'
});
$('.js--wp-4').waypoint(function(direction) {
$('.js--wp-4').addClass('animated pulse');
}, {
offset: '50%'
});
/* Map */
var map = new GMaps({
div: '.map',
lat: 38.7436266,
lng: -9.07,
zoom: 12
});
map.addMarker({
lat: 38.7436266,
lng: -9.1602037,
title: 'Lima',
infoWindow: {
content: '<p>Our Lisbon Headquarters</p>'
}
});
});
<!Doctype HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Healthy foods is the #1 meal prep company in 2017!">
<link rel="stylesheet" type="text/css" href="css/v/normalize.css">
<link rel="stylesheet" type="text/css" href="css/v/grid.css">
<link rel="stylesheet" type="text/css" href="css/v/ionicons.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<link rel="stylesheet" type="text/css" href="css/r/style.css">
<link rel="stylesheet" type="text/css" href="css/r/queries.css">
<link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,300italic' rel='stylesheet' type='text/css'>
<!-- Favicons -->
<link rel="apple-touch-icon" sizes="180x180" href="/img/favicons/apple-touch-icon.png">
<link rel="icon" type="image/png" href="/img/favicons/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/img/favicons/favicon-16x16.png" sizes="16x16">
<link rel="manifest" href="/img/favicons/manifest.json">
<link rel="mask-icon" href="/img/favicons/safari-pinned-tab.svg">
<link rel="shortcut icon" href="/img/favicons/favicon.ico">
<meta name="msapplication-config" content="/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#ffffff">
<!-- Favicons -->
<!-- Goolge Analytics -->
<!-- Goolge Analytics -->
<title>Healthy Foods</title>
</head>
<body>
<header>
<nav>
<div class="row">
<img src="img/logo-white.png" alt="Omni Food Logo" class="logo">
<img src="img/logo.png" alt="Omni Food Logo" class="logo-black">
<ul class="main-nav">
<li>Food delivery
</li>
<li>How it works
</li>
<li>Our cities
</li>
<li>Sign up
</li>
<li>Conact Us
</li>
</ul>
</div>
</nav>
<div class="hero-text-box">
<h1>Goodbye junk food.<br>Hello super healthy meals.</h1>
<a class="btn btn-full js--scroll-to-plans" href="#plans">I'm hungry</a>
<a class="btn btn-ghost js--scroll-to-start" href="#features">Show me more</a>
</div>
</header>
<!-- Food Fast Section Title -->
<section class="js--section-features" id="features">
<div class="row">
<center>
<h2>Get food fast — not fast food.</h2>
</center>
<p class="long-copy">
Hello, we’re Omnifood, your new premium food delivery service. We know you’re always busy. No time for cooking. So let us take care of that, we’re really good at it, we promise!
</div>
<!-- Get Food Fast Section Content -->
<br>
<div class="row js--wp-1">
<div class="col span-1-of-4 box">
<i class="ion-calendar icon-big"></i>
<h3>Up to 365 days/year</h3>
<p class="section-content">Never cook again! We really mean that. Our subscription plans include up to 365 days/year coverage. You can also choose to order more flexibly if that's your style.
</p>
</div>
<div class="col span-1-of-4 box">
<i class="ion-clock icon-big"></i>
<h3>Ready in 20 minutes</h3>
<p class="section-content">You're only twenty minutes away from your delicious and super healthy meals delivered right to your home. We work with the best chefs in each town to ensure that you're 100% happy.
</p>
</div>
<div class="col span-1-of-4 box">
<i class="ion-ios-nutrition icon-big"></i>
<h3>100% organic</h3>
<p class="section-content">All our vegetables are fresh, organic and local. Animals are raised without added hormones or antibiotics. Good for your health, the environment, and it also tastes better!
</p>
</div>
<div class="col span-1-of-4 box">
<i class="ion-android-cart icon-big"></i>
<h3>Order anything</h3>
<p class="section-content">We don't limit your creativity, which means you can order whatever you feel like. You can also choose from our menu containing over 100 delicious meals. It's up to you!
</p>
</div>
</div>
</section>
<!-- Get Food Fast Section Content -->
<!-- Favorite Meals Section -->
<section class="section-meals">
<!-- Row 1 -->
<ul class="meals-showcase clearfix">
<li>
<figure class="meal-photo">
<img src="img/1.jpg" alt="Korean bibimbap with egg and vegetables">
</figure>
</li>
<li>
<figure class="meal-photo">
<img src="img/2.jpg" alt="Simple italian pizza with cherry tomatoes">
</figure>
</li>
<li>
<figure class="meal-photo">
<img src="img/3.jpg" alt="Chicken breast steak with vegetables">
</figure>
</li>
<li>
<figure class="meal-photo">
<img src="img/4.jpg" alt="Autumn pumpkin soup">
</figure>
</li>
</ul>
<!-- Row 2 -->
<ul class="meals-showcase clearfix">
<li>
<figure class="meal-photo">
<img src="img/5.jpg" alt="Paleo beef steak with vegetables">
</figure>
</li>
<li>
<figure class="meal-photo">
<img src="img/6.jpg" alt="Healthy baguette with egg and vegetables">
</figure>
</li>
<li>
<figure class="meal-photo">
<img src="img/7.jpg" alt="Burger with cheddar and bacon">
</figure>
</li>
<li>
<figure class="meal-photo">
<img src="img/8.jpg" alt="Granola with cherries and strawberries">
</figure>
</li>
</ul>
</section>
<!-- Favorite Meals Section End -->
<!-- How it works Section -->
<section class="section-steps" id="works">
<div class="row">
<h2>How it works - Simple as 1, 2, 3</h2>
</div>
<div class="row">
<div class="col span-1-of-2 steps-box">
<img src="img/app-iPhone.png" alt="Omifood app on iPhone" class="app-screen js--wp-2">
</div>
<div class="col span-1-of-2 steps-box">
<div class="work-step">
<div>1</div>
<p>Choose the subscription plan that best fits your needs and sign up today.</p>
</div>
<div class="work-step">
<div>2</div>
<p>Order your delicious meal using our mobile app or website. Or you can even call us!</p>
</div>
<div class="work-step">
<div>3</div>
<p>Enjoy your meal after less than 20 minutes. See you the next time!</p>
</div>
<a href="#" class="btn-app">
<img src="img/download-app-android.png" alt="Play Store Button">
</a>
<a href="#" class="btn-app">
<img src="img/download-app-android.png" alt="Play Store Button">
</a>
</div>
</div>
<!-- How it works Section End -->
<section class="section-cities js--wp-3" id="cities">
<div class="row">
<h2>We're currently in these cities</h2>
</div>
<!-- Lisbon -->
<div class="row">
<div class="col span-1-of-4 box">
<img src="img/lisbon-3.jpg" alt="Lisbon">
<h3>Lisbon</h3>
<div class="city-feature">
<i class="ion-person icon-small"></i>
1600+ happy eaters
</div>
<div class="city-feature">
<i class="ion-ios-star icon-small"></i>
60+ top chefs
</div>
<div class="city-feature">
<i class="ion-social-twitter icon-small"></i>
#omnifood_lx
</div>
</div>
<!-- San Francisco -->
<div class="col span-1-of-4 box">
<img src="img/san-francisco.jpg" alt="San Francisco">
<h3>San Francisco</h3>
<div class="city-feature">
<i class="ion-person icon-small"></i>
+3700 happy eaters
</div>
<div class="city-feature">
<i class="ion-ios-star icon-small"></i>
160+ top chefs
</div>
<div class="city-feature">
<i class="ion-social-twitter icon-small"></i>
#omnifood_sf
</div>
</div>
<!-- Berlin -->
<div class="col span-1-of-4 box">
<img src="img/berlin.jpg" alt="Berlin">
<h3>Berlin</h3>
<div class="city-feature">
<i class="ion-person icon-small"></i>
+2300 happy eaters
</div>
<div class="city-feature">
<i class="ion-ios-star icon-small"></i>
110+ top chefs
</div>
<div class="city-feature">
<i class="ion-social-twitter icon-small"></i>
#omnifood_berlin
</div>
</div>
<!-- London -->
<div class="col span-1-of-4 box">
<img src="img/london.jpg" alt="London">
<h3>Berlin</h3>
<div class="city-feature">
<i class="ion-person icon-small"></i>
+1200 happy eaters
</div>
<div class="city-feature">
<i class="ion-ios-star icon-small"></i>
50+ top chefs
</div>
<div class="city-feature">
<i class="ion-social-twitter icon-small"></i>
#omnifood_london
</div>
</div>
</div>
</section>
<!-- Cities Section End -->
<!-- Testimonials Section Start -->
<section class="section-testimonials">
<div class="row">
<h2>Our customers can't live without us</h2>
</div>
<div class="row">
<div class="col span-1-of-3">
<blockquote>
Omnifood is just awesome! I just launched a startup which leaves me with no time for cooking, so Omnifood is a life-saver. Now that I got used to it, I couldn't live without my daily meals!
<cite><img src="img/customer-1.jpg" alt="Customer 1">Alberto Duncan</cite>
</blockquote>
</div>
<div class="col span-1-of-3">
<blockquote>
Inexpensive, healthy and great-tasting meals, delivered right to my home. We have lots of food delivery here in Lisbon, but no one comes even close to Omifood. Me and my family are so in love!
<cite><img src="img/customer-2.jpg" alt="Customer 2">Joana Silva</cite>
</blockquote>
</div>
<div class="col span-1-of-3">
<blockquote>
I was looking for a quick and easy food delivery service in San Franciso. I tried a lot of them and ended up with Omnifood. Best food delivery service in the Bay Area. Keep up the great work!
<cite><img src="img/customer-3.jpg" alt="Customer 3">Milton Chapman</cite>
</blockquote>
</div>
</div>
</section>
<!-- Testimonials Section End -->
<!-- Signup Section Start -->
<section class="section-plans js--section-plans" id="plans">
<div class="row">
<h2>Start eating healthy today</h2>
</div>
<div class="row">
<div class="col span-1-of-3">
<div class="plan-box js--wp-4">
<div>
<h3>Premium</h3>
<p class="plan-price">$399 <span>/ month</span>
</p>
<p class="plan-price-meal">That's only 13.30$ per meal</p>
</div>
<div>
<ul>
<li><i class="ion-ios-checkmark-empty icon-small"></i>1 meal every day</li>
<li><i class="ion-ios-checkmark-empty icon-small"></i>Order 24/7</li>
<li><i class="ion-ios-checkmark-empty icon-small"></i>Access to newest creations</li>
<li><i class="ion-ios-checkmark-empty icon-small"></i>Free delivery</li>
</ul>
</div>
<div>
Sign up now
</div>
</div>
</div>
<div class="col span-1-of-3">
<div class="plan-box js--wp-4">
<div>
<h3>Pro</h3>
<p class="plan-price">$149 <span>/ month</span>
</p>
<p class="plan-price-meal">That's only 14.90$ per meal</p>
</div>
<div>
<ul>
<li><i class="ion-ios-checkmark-empty icon-small"></i>1 meal 10 days/month</li>
<li><i class="ion-ios-checkmark-empty icon-small"></i>Order 24/7</li>
<li><i class="ion-ios-checkmark-empty icon-small"></i>Access to newest creations</li>
<li><i class="ion-ios-checkmark-empty icon-small"></i>Free delivery</li>
</ul>
</div>
<div>
Sign up now
</div>
</div>
</div>
<div class="col span-1-of-3">
<div class="plan-box js--wp-4">
<div>
<h3>Starter</h3>
<p class="plan-price">19$ <span>/ meal</span>
</p>
<p class="plan-price-meal"> </p>
</div>
<div>
<ul>
<li><i class="ion-ios-checkmark-empty icon-small"></i>1 meal</li>
<li><i class="ion-ios-checkmark-empty icon-small"></i>Order from 8 am to 12 pm</li>
<li><i class="ion-ios-close-empty icon-small"></i>
</li>
<li><i class="ion-ios-checkmark-empty icon-small"></i>Free delivery</li>
</ul>
</div>
<div>
Sign up now
</div>
</div>
</div>
</div>
</section>
<!-- Signup Section End -->
<!-- Form Section Section -->
<div class="map-box">
<div class="map"></div>
<div class="form-box" id="contact">
<div class="row">
<h2>We're happy to hear from you</h2>
</div>
<div class="row">
<form method="post" action="#" class="contact-form">
<div class="row">
<div class="col span-1-of-3">
<label for="name">Name</label>
</div>
<div class="col span-2-of-3">
<input type="text" name="name" id="name" placeholder="Your name" required>
</div>
</div>
<div class="row">
<div class="col span-1-of-3">
<label for="email">Email</label>
</div>
<div class="col span-2-of-3">
<input type="email" name="email" id="email" placeholder="Your email" required>
</div>
</div>
<div class="row">
<div class="col span-1-of-3">
<label for="find-us">How did you find us?</label>
</div>
<div class="col span-2-of-3">
<select name="find-us" id="find-us">
<option value="friends" selected>Friends</option>
<option value="search">Search engine</option>
<option value="ad">Advertisement</option>
<option value="other">Other</option>
</select>
</div>
</div>
<div class="row">
<div class="col span-1-of-3">
<label>Newsletter?</label>
</div>
<div class="col span-2-of-3">
<input type="checkbox" name="news" id="news" checked>Yes, please
</div>
</div>
<div class="row">
<div class="col span-1-of-3">
<label>Drop us a line</label>
</div>
<div class="col span-2-of-3">
<textarea name="message" placeholder="Your message"></textarea>
</div>
</div>
<div class="row">
<div class="col span-1-of-3">
<label> </label>
</div>
<div class="col span-2-of-3">
<input type="submit" value="Send it!">
</div>
</div>
</form>
</div>
</div>
</div>
<!-- Form Section End -->
<!-- Footer Start -->
<footer>
<div class="row">
<div class="col span-1-of-2">
<ul class="footer-nav">
<li>About us
</li>
<li>Blog
</li>
<li>Press
</li>
<li>iOS App
</li>
<li>Android App
</li>
</ul>
</div>
<div class="col span-1-of-2">
<ul class="social-icons">
<li><i class="ion-social-facebook"></i>
</li>
<li><i class="ion-social-twitter"></i>
</li>
<li><i class="ion-social-googleplus"></i>
</li>
<li><i class="ion-social-instagram"></i>
</li>
</ul>
</div>
</div>
<div class="row">
<p>
Healthy Foods © 2016-2017
</p>
</div>
</footer>
<!-- Footer End -->
<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>-->
<script src="js/jquery-3.1.1.slim.min.js"></script>
<script src="http://maps.google.com/maps/api/js"></script>
<script src="js/jquery.waypoints.min.js"></script>
<script src="js/gmaps.js"></script>
<script src="js/script.js"></script>
</body>
</html>
Please find below snippet just uncomment
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
this min js it'll required to other js work.
$(document).ready(function() {
debugger;
$('.js--section-features').waypoint(function(direction) {
if (direction == "down") {
$('nav').addClass('sticky');
} else {
$('nav').removeClass('sticky');
}
}, {
offset: '60px;'
});
/* Scroll on buttons*/
$('.js--scroll-to-plans').click(function() {
$('html, body').animate({
scrollTop: $('.js--section-plans').offset().top
}, 1000);
});
$('.js--scroll-to-start').click(function() {
$('html, body').animate({
scrollTop: $('.js--section-features').offset().top
}, 1000);
});
/* Navigation scroll*/
$('a[href*="#"]:not([href="#"])').click(function() {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('html, body').animate({
scrollTop: target.offset().top
}, 2000);
return false;
}
}
});
/* Animations on scroll */
$('.js--wp-1').waypoint(function(direction) {
$('.js--wp-1').addClass('animated fadeIn');
}, {
offset: '50%'
});
$('.js--wp-2').waypoint(function(direction) {
$('.js--wp-2').addClass('animated fadeInUp');
}, {
offset: '50%'
});
$('.js--wp-3').waypoint(function(direction) {
$('.js--wp-3').addClass('animated fadeIn');
}, {
offset: '50%'
});
$('.js--wp-4').waypoint(function(direction) {
$('.js--wp-4').addClass('animated pulse');
}, {
offset: '50%'
});
});
<script src="//code.jquery.com/jquery-3.1.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.min.js"></script>
<div class="row">
<img src="img/logo-white.png" alt="Omni Food Logo" class="logo">
<img src="img/logo.png" alt="Omni Food Logo" class="logo-black">
<ul class="main-nav">
<li>Food delivery
</li>
<li>How it works
</li>
<li>Our cities
</li>
<li>Sign up
</li>
<li>Conact Us
</li>
</ul>
</div>
</nav>
<div class="hero-text-box">
<h1>Goodbye junk food.<br>Hello super healthy meals.</h1>
<a class="btn btn-full js--scroll-to-plans" href="#plans">I'm hungry</a>
<a class="btn btn-ghost js--scroll-to-start" href="#features">Show me more</a>
</div>
</header>
<!-- Food Fast Section Title -->
<section class="js--section-features" id="features">
<div class="row">
<center>
<h2>Get food fast — not fast food.</h2>
</center>
<p class="long-copy">
Hello, we’re Omnifood, your new premium food delivery service. We know you’re always busy. No time for cooking. So let us take care of that, we’re really good at it, we promise!
</div>
<!-- Get Food Fast Section Content -->
<br>
<div class="row js--wp-1">
<div class="col span-1-of-4 box">
<i class="ion-calendar icon-big"></i>
<h3>Up to 365 days/year</h3>
<p class="section-content">Never cook again! We really mean that. Our subscription plans include up to 365 days/year coverage. You can also choose to order more flexibly if that's your style.
</p>
</div>
<div class="col span-1-of-4 box">
<i class="ion-clock icon-big"></i>
<h3>Ready in 20 minutes</h3>
<p class="section-content">You're only twenty minutes away from your delicious and super healthy meals delivered right to your home. We work with the best chefs in each town to ensure that you're 100% happy.
</p>
</div>
<div class="col span-1-of-4 box">
<i class="ion-ios-nutrition icon-big"></i>
<h3>100% organic</h3>
<p class="section-content">All our vegetables are fresh, organic and local. Animals are raised without added hormones or antibiotics. Good for your health, the environment, and it also tastes better!
</p>
</div>
<div class="col span-1-of-4 box">
<i class="ion-android-cart icon-big"></i>
<h3>Order anything</h3>
<p class="section-content">We don't limit your creativity, which means you can order whatever you feel like. You can also choose from our menu containing over 100 delicious meals. It's up to you!
</p>
</div>
</div>
</section>
<!-- Get Food Fast Section Content -->
<!-- Favorite Meals Section -->
<section class="section-meals">
<!-- Row 1 -->
<ul class="meals-showcase clearfix">
<li>
<figure class="meal-photo">
<img src="img/1.jpg" alt="Korean bibimbap with egg and vegetables">
</figure>
</li>
<li>
<figure class="meal-photo">
<img src="img/2.jpg" alt="Simple italian pizza with cherry tomatoes">
</figure>
</li>
<li>
<figure class="meal-photo">
<img src="img/3.jpg" alt="Chicken breast steak with vegetables">
</figure>
</li>
<li>
<figure class="meal-photo">
<img src="img/4.jpg" alt="Autumn pumpkin soup">
</figure>
</li>
</ul>
<!-- Row 2 -->
<ul class="meals-showcase clearfix">
<li>
<figure class="meal-photo">
<img src="img/5.jpg" alt="Paleo beef steak with vegetables">
</figure>
</li>
<li>
<figure class="meal-photo">
<img src="img/6.jpg" alt="Healthy baguette with egg and vegetables">
</figure>
</li>
<li>
<figure class="meal-photo">
<img src="img/7.jpg" alt="Burger with cheddar and bacon">
</figure>
</li>
<li>
<figure class="meal-photo">
<img src="img/8.jpg" alt="Granola with cherries and strawberries">
</figure>
</li>
</ul>
</section>
<!-- Favorite Meals Section End -->
<!-- How it works Section -->
<section class="section-steps" id="works">
<div class="row">
<h2>How it works - Simple as 1, 2, 3</h2>
</div>
<div class="row">
<div class="col span-1-of-2 steps-box">
<img src="img/app-iPhone.png" alt="Omifood app on iPhone" class="app-screen js--wp-2">
</div>
<div class="col span-1-of-2 steps-box">
<div class="work-step">
<div>1</div>
<p>Choose the subscription plan that best fits your needs and sign up today.</p>
</div>
<div class="work-step">
<div>2</div>
<p>Order your delicious meal using our mobile app or website. Or you can even call us!</p>
</div>
<div class="work-step">
<div>3</div>
<p>Enjoy your meal after less than 20 minutes. See you the next time!</p>
</div>
<a href="#" class="btn-app">
<img src="img/download-app-android.png" alt="Play Store Button">
</a>
<a href="#" class="btn-app">
<img src="img/download-app-android.png" alt="Play Store Button">
</a>
</div>
</div>
<!-- How it works Section End -->
<section class="section-cities js--wp-3" id="cities">
<div class="row">
<h2>We're currently in these cities</h2>
</div>
<!-- Lisbon -->
<div class="row">
<div class="col span-1-of-4 box">
<img src="img/lisbon-3.jpg" alt="Lisbon">
<h3>Lisbon</h3>
<div class="city-feature">
<i class="ion-person icon-small"></i>
1600+ happy eaters
</div>
<div class="city-feature">
<i class="ion-ios-star icon-small"></i>
60+ top chefs
</div>
<div class="city-feature">
<i class="ion-social-twitter icon-small"></i>
#omnifood_lx
</div>
</div>
<!-- San Francisco -->
<div class="col span-1-of-4 box">
<img src="img/san-francisco.jpg" alt="San Francisco">
<h3>San Francisco</h3>
<div class="city-feature">
<i class="ion-person icon-small"></i>
+3700 happy eaters
</div>
<div class="city-feature">
<i class="ion-ios-star icon-small"></i>
160+ top chefs
</div>
<div class="city-feature">
<i class="ion-social-twitter icon-small"></i>
#omnifood_sf
</div>
</div>
<!-- Berlin -->
<div class="col span-1-of-4 box">
<img src="img/berlin.jpg" alt="Berlin">
<h3>Berlin</h3>
<div class="city-feature">
<i class="ion-person icon-small"></i>
+2300 happy eaters
</div>
<div class="city-feature">
<i class="ion-ios-star icon-small"></i>
110+ top chefs
</div>
<div class="city-feature">
<i class="ion-social-twitter icon-small"></i>
#omnifood_berlin
</div>
</div>
<!-- London -->
<div class="col span-1-of-4 box">
<img src="img/london.jpg" alt="London">
<h3>Berlin</h3>
<div class="city-feature">
<i class="ion-person icon-small"></i>
+1200 happy eaters
</div>
<div class="city-feature">
<i class="ion-ios-star icon-small"></i>
50+ top chefs
</div>
<div class="city-feature">
<i class="ion-social-twitter icon-small"></i>
#omnifood_london
</div>
</div>
</div>
</section>
<!-- Cities Section End -->
<!-- Testimonials Section Start -->
<section class="section-testimonials">
<div class="row">
<h2>Our customers can't live without us</h2>
</div>
<div class="row">
<div class="col span-1-of-3">
<blockquote>
Omnifood is just awesome! I just launched a startup which leaves me with no time for cooking, so Omnifood is a life-saver. Now that I got used to it, I couldn't live without my daily meals!
<cite><img src="img/customer-1.jpg" alt="Customer 1">Alberto Duncan</cite>
</blockquote>
</div>
<div class="col span-1-of-3">
<blockquote>
Inexpensive, healthy and great-tasting meals, delivered right to my home. We have lots of food delivery here in Lisbon, but no one comes even close to Omifood. Me and my family are so in love!
<cite><img src="img/customer-2.jpg" alt="Customer 2">Joana Silva</cite>
</blockquote>
</div>
<div class="col span-1-of-3">
<blockquote>
I was looking for a quick and easy food delivery service in San Franciso. I tried a lot of them and ended up with Omnifood. Best food delivery service in the Bay Area. Keep up the great work!
<cite><img src="img/customer-3.jpg" alt="Customer 3">Milton Chapman</cite>
</blockquote>
</div>
</div>
</section>
<!-- Testimonials Section End -->
<!-- Signup Section Start -->
<section class="section-plans js--section-plans" id="plans">
<div class="row">
<h2>Start eating healthy today</h2>
</div>
<div class="row">
<div class="col span-1-of-3">
<div class="plan-box js--wp-4">
<div>
<h3>Premium</h3>
<p class="plan-price">$399 <span>/ month</span>
</p>
<p class="plan-price-meal">That's only 13.30$ per meal</p>
</div>
<div>
<ul>
<li><i class="ion-ios-checkmark-empty icon-small"></i>1 meal every day</li>
<li><i class="ion-ios-checkmark-empty icon-small"></i>Order 24/7</li>
<li><i class="ion-ios-checkmark-empty icon-small"></i>Access to newest creations</li>
<li><i class="ion-ios-checkmark-empty icon-small"></i>Free delivery</li>
</ul>
</div>
<div>
Sign up now
</div>
</div>
</div>
<div class="col span-1-of-3">
<div class="plan-box js--wp-4">
<div>
<h3>Pro</h3>
<p class="plan-price">$149 <span>/ month</span>
</p>
<p class="plan-price-meal">That's only 14.90$ per meal</p>
</div>
<div>
<ul>
<li><i class="ion-ios-checkmark-empty icon-small"></i>1 meal 10 days/month</li>
<li><i class="ion-ios-checkmark-empty icon-small"></i>Order 24/7</li>
<li><i class="ion-ios-checkmark-empty icon-small"></i>Access to newest creations</li>
<li><i class="ion-ios-checkmark-empty icon-small"></i>Free delivery</li>
</ul>
</div>
<div>
Sign up now
</div>
</div>
</div>
<div class="col span-1-of-3">
<div class="plan-box js--wp-4">
<div>
<h3>Starter</h3>
<p class="plan-price">19$ <span>/ meal</span>
</p>
<p class="plan-price-meal"> </p>
</div>
<div>
<ul>
<li><i class="ion-ios-checkmark-empty icon-small"></i>1 meal</li>
<li><i class="ion-ios-checkmark-empty icon-small"></i>Order from 8 am to 12 pm</li>
<li><i class="ion-ios-close-empty icon-small"></i>
</li>
<li><i class="ion-ios-checkmark-empty icon-small"></i>Free delivery</li>
</ul>
</div>
<div>
Sign up now
</div>
</div>
</div>
</div>
</section>
<!-- Signup Section End -->
<!-- Form Section Section -->
<div class="map-box">
<div class="map"></div>
<div class="form-box" id="contact">
<div class="row">
<h2>We're happy to hear from you</h2>
</div>
<div class="row">
<form method="post" action="#" class="contact-form">
<div class="row">
<div class="col span-1-of-3">
<label for="name">Name</label>
</div>
<div class="col span-2-of-3">
<input type="text" name="name" id="name" placeholder="Your name" required>
</div>
</div>
<div class="row">
<div class="col span-1-of-3">
<label for="email">Email</label>
</div>
<div class="col span-2-of-3">
<input type="email" name="email" id="email" placeholder="Your email" required>
</div>
</div>
<div class="row">
<div class="col span-1-of-3">
<label for="find-us">How did you find us?</label>
</div>
<div class="col span-2-of-3">
<select name="find-us" id="find-us">
<option value="friends" selected>Friends</option>
<option value="search">Search engine</option>
<option value="ad">Advertisement</option>
<option value="other">Other</option>
</select>
</div>
</div>
<div class="row">
<div class="col span-1-of-3">
<label>Newsletter?</label>
</div>
<div class="col span-2-of-3">
<input type="checkbox" name="news" id="news" checked>Yes, please
</div>
</div>
<div class="row">
<div class="col span-1-of-3">
<label>Drop us a line</label>
</div>
<div class="col span-2-of-3">
<textarea name="message" placeholder="Your message"></textarea>
</div>
</div>
<div class="row">
<div class="col span-1-of-3">
<label> </label>
</div>
<div class="col span-2-of-3">
<input type="submit" value="Send it!">
</div>
</div>
</form>
</div>
</div>
</div>
<!-- Form Section End -->
<!-- Footer Start -->
<footer>
<div class="row">
<div class="col span-1-of-2">
<ul class="footer-nav">
<li>About us
</li>
<li>Blog
</li>
<li>Press
</li>
<li>iOS App
</li>
<li>Android App
</li>
</ul>
</div>
<div class="col span-1-of-2">
<ul class="social-icons">
<li><i class="ion-social-facebook"></i>
</li>
<li><i class="ion-social-twitter"></i>
</li>
<li><i class="ion-social-googleplus"></i>
</li>
<li><i class="ion-social-instagram"></i>
</li>
</ul>
</div>
</div>
<div class="row">
<p>
Healthy Foods © 2016-2017
</p>
</div>
</footer>
Related
I'm using bootstrap to position some cards one near another but i'm not really able to do it because it always places the cards one under another.
<div class="container">
<div class="row">
<div class="col-8">
<div class="col-sm-2">
<div class='card' style='width:20rem;'>
<img class='card-img-top' src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTtjjCv9pQRtLSNn-zjQrsdKnCFWVe-WSH7Rf_qJnXm99mrHTZL"
alt='Card image cap'>
<div class='card-body text-center'>
<p class='card-text text-center' style='color: black'> Car</p>
<ul class='list-group list-group-flush'>
<li class='list-group-item'>
<div class='row'>
<div class='col-md-6'>
<i class='material-icons'></i><span> Price </span>
</div>
<div class='col-md-6'>
<i class='material-icons'></i><span>City</span>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="col-sm-2">
<div class="card" style='width:20rem;'>
<img class='card-img-top' src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTtjjCv9pQRtLSNn-zjQrsdKnCFWVe-WSH7Rf_qJnXm99mrHTZL"
alt='Card image cap'>
<div class='card-body text-center'>
<p class='card-text text-center' style='color: black'> Car</p>
<ul class='list-group list-group-flush'>
<li class='list-group-item'>
<div class='row'>
<div class='col-md-6'>
<i class='material-icons'></i><span> Price </span>
</div>
<div class='col-md-6'>
<i class='material-icons'></i><span>City</span>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-4 offset-1">
</div>
</div>
</div>
Basically i need those 2 cards to be on the same row and one after another but i don't understand what's wrong.Are those cards too big?
The problem is your inline style definition for your cards: width: 20rem. Essentially, you're giving the card 2/12 of the grid to work with (col-sm-2) and then giving a hard definition of the card to have a width of 20rem, which forces the next card to take up the next line.
Also, you need to specify another row after your col-8 declaration. Here's my code:
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-8">
<div class="row">
<div class="col-sm-6">
<div class='card'>
<img class='card-img-top' src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTtjjCv9pQRtLSNn-zjQrsdKnCFWVe-WSH7Rf_qJnXm99mrHTZL" alt='Card image cap'>
<div class='card-body text-center'>
<p class='card-text text-center' style='color: black'> Car</p>
<ul class='list-group list-group-flush'>
<li class='list-group-item'>
<div class='row'>
<div class='col-md-6'>
<i class='material-icons'></i><span> Price </span>
</div>
<div class='col-md-6'>
<i class='material-icons'></i><span>City</span>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card">
<img class='card-img-top' src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTtjjCv9pQRtLSNn-zjQrsdKnCFWVe-WSH7Rf_qJnXm99mrHTZL" alt='Card image cap'>
<div class='card-body text-center'>
<p class='card-text text-center' style='color: black'> Car</p>
<ul class='list-group list-group-flush'>
<li class='list-group-item'>
<div class='row'>
<div class='col-md-6'>
<i class='material-icons'></i><span> Price </span>
</div>
<div class='col-md-6'>
<i class='material-icons'></i><span>City</span>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="col-4 offset-1">
</div>
</div>
</div>
I'm attempting to create a profile website.
However I seem to have hit a brick wall; I'm unable to figure out a way of making my carousel center itself in my section.
Does anyone have any advice on what I could do?
Here is a codepen with the code:
https://codepen.io/Todai/pen/RRPGwZ
And here is my .html:
<html>
<head>
<link rel="stylesheet" href="resources/font-awesome-4.6.3/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="resources/css/flipCardCSS.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
<body>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/>
<div class="container-fluid">
<header id="banner">
<div class="container">
<div class="col-md-2">
<!-- <span id="link"> -F </span> -->
<img src="http://res.cloudinary.com/todai/image/upload/v1464873431/146487352498428_v9sob9.gif" id="bannerImg">
</div>
<div class="col-md-10">
<button type="button" data-toggle="collapse" data-target="#navbar" aria-expanded="false" class="navbar-toggle collapsed">
<span class="sr-only"> Toggle navigation </span>
<span class="icon-bar"> </span>
<span class="icon-bar"> </span>
<span class="icon-bar"> </span>
</button>
<nav id="navbar" role="navigation" class="collapse navbar-collapse" aria-expanded="false">
<ul class="nav navbar-nav navbar-right">
<li class="active">
About
</li>
<li class>
Portfolio
</li>
<li class>
Contact
</li>
</ul>
</nav>
</div>
<a id="top" name="home"> </a>
</header>
<main >
<header class="row customClass">
<div class="intro-text col-md-8" >
<p class="text-right">
My name is <strong> J</strong>oakim <strong>K</strong>akaei, I'm a Software Engineer with knowledge of most main-stream languages as well as some more obscure. I have experience working with c++, c#, java amongst many other; working knowledge of project management and methodologies.
</p>
<hr class="star-bright">
</hr>
<span class="skills">
Software Engineer - Web Developer - Security Hobbyist
</span>
</div>
<div class="col-md-4">
<img src="http://res.cloudinary.com/todai/image/upload/v1464900561/12976795_10208023281372738_6826518550098825642_o_e2brh3.jpg" alt>
</div>
</header>
<section id="Portfolio">
<h2> Portfolio </h2>
<hr class="star-dark"/>
<div class="container center">
<div class="prev">Prev</div>
<div class="carousel">
<div class="item a">
<div id="f1_container">
<div id="f1_card" class="shadow">
<div class="front face">
<img src="http://res.cloudinary.com/todai/image/upload/v1469565942/geostocks-transparent_pyxgvj.png"/>
</div>
<div class="back face center">
<p>A distributed software built in Erlang, using a MSSQL instance and
a C# Web Api end-point.</p>
<p>I was in charge with working on the Android and web front-end.</p>
<span> <i class="fa fa-github fa-2x"> </i> </span>
</div>
</div>
</div>
</div>
<div class="item b">
<div id="f1_container">
<div id="f1_card" class="shadow">
<div class="front face">
<img src="http://res.cloudinary.com/todai/image/upload/c_scale,h_200,w_250/v1469535266/Screen-Shot-2011-12-11-at-9.39.26-PM_twyfwy.png"/>
</div>
<div class="back face center">
<p>A distributed software built in Erlang, using a MSSQL instance and
a C# Web Api end-point.</p>
<p>I was in charge with working on the Android and web front-end.</p>
<span> <i class="fa fa-github fa-2x"> </i> </span>
</div>
</div>
</div>
</div>
<div class="item c">
<div id="f1_container">
<div id="f1_card" class="shadow">
<div class="front face">
<img src="http://res.cloudinary.com/todai/image/upload/c_scale,h_200,w_250/v1469535260/podcast-ac-new_2_hbplwk.jpg"/>
</div>
<div class="back face center">
<p>A distributed software built in Erlang, using a MSSQL instance and
a C# Web Api end-point.</p>
<p>I was in charge with working on the Android and web front-end.</p>
<span> <i class="fa fa-github fa-2x"> </i> </span>
</div>
</div>
</div>
</div>
<div class="item d">
<div id="f1_container">
<div id="f1_card" class="shadow">
<div class="front face">
<img src="http://res.cloudinary.com/todai/image/upload/c_scale,h_200,w_250/v1469535260/podcast-ac-new_2_hbplwk.jpg"/>
</div>
<div class="back face center">
<p>A distributed software built in Erlang, using a MSSQL instance and
a C# Web Api end-point.</p>
<p>I was in charge with working on the Android and web front-end.</p>
<span> <i class="fa fa-github fa-2x"> </i> </span>
</div>
</div>
</div>
</div>
<div class="item e">
<div id="f1_container">
<div id="f1_card" class="shadow">
<div class="front face">
<img src="http://res.cloudinary.com/todai/image/upload/c_scale,h_200,w_250/v1469535260/podcast-ac-new_2_hbplwk.jpg"/>
</div>
<div class="back face center">
<p>A distributed software built in Erlang, using a MSSQL instance and
a C# Web Api end-point.</p>
<p>I was in charge with working on the Android and web front-end.</p>
<span> <i class="fa fa-github fa-2x"> </i> </span>
</div>
</div>
</div>
</div>
<div class="item f">
<div id="f1_container">
<div id="f1_card" class="shadow">
<div class="front face">
<img src="http://res.cloudinary.com/todai/image/upload/c_scale,h_200,w_250/v1469535260/podcast-ac-new_2_hbplwk.jpg"/>
</div>
<div class="back face center">
<p>A distributed software built in Erlang, using a MSSQL instance and
a C# Web Api end-point.</p>
<p>I was in charge with working on the Android and web front-end.</p>
<span> <i class="fa fa-github fa-2x"> </i> </span>
</div>
</div>
</div>
</div>
</div>
<div class="next">Next</div>
</div>
</section>
</main>
</div>
</div>
</div>
</body>
</html>
<script src="resources/scripts/carousel.js"> </script>
This is an easy way to horizontally center a relatively positioned element:
.carousel {
position: relative;
margin: 0 auto;
}
I am building a page using Ionic and Angular. I'm including the stylesheet at the top as you can see, but when the page loads, the styles are completely messed up, until I refresh the page. I am not sure what I'm doing wrong. Thanks in advance.
<link rel="stylesheet" type="text/css" href="css/event-nba.css">
<div ng-repeat="events in eventsList" class="events-bg">
<a>
<div class="event-box" ng-style="{'background-image':'url({{events.backgroundImage}})'}">
<div class="nba-event-team">
<span><img class="logos logo-margin" src="{{events.logo1}}"></span>
<span><img class="logos" src="{{events.logo2}}"></span>
</div>
<div class="nba-event-team">
<span class="team">{{events.eventDate}}</span>
</div>
<div class="nba-event-team">
<span class="team">{{events.eventLocation}}</span>
</div>
<div class="nba-event-team">
<img class="network-logo" src="{{events.networkLogo}}"></img>
</div>
<div class="nba-event-team">
<button class="button button-assertive bth-red">
TICKETS
</button>
</div>
</div>
<div class="preview-box">
<span class="preview-text">{{events.eventPreview}}</span>
</div>
<div class="gear-title-box">
<span class="gear-title-text">PICK UP GEAR FOR THE GAME</span>
</div>
<div class="row">
<div class="col col-45 card card-margin home-product-border">
<a href="#/tab/product-jacket">
<div class="item item-body">
<img class="full-image" src="img/nikesweatshirt200.png">
<p class="shop-product-box-text-margin">
Clothing
</p>
<h3 class="shop-product-box-text-margin">Nike Jacket <br>Elite Sports - Men's $79.99</h3>
</span>
<span><h3 class="shop-product-box-text-margin" style="color:red">Ships Free!
</h3></span>
</div>
</a>
</div>
<div class="col col-45 card card-margin home-product-border">
<a href="#/tab/product">
<div class="item item-body">
<img class="full-image" src="img/kobe xi.jpeg">
<p class="shop-product-box-text-margin">
Shoes
</p>
<h3 class="shop-product-box-text-margin">Nike Kobe 11 <br>Elite Low - Men's $199.99</h3>
</span>
<span><h3 class="shop-product-box-text-margin" style="color:red">Ships Free!
</h3></span>
</div>
</a>
</div>
</div>
<div class="row">
<div class="col col-45 card card-margin home-product-border">
<a href="#/tab/product-uptime">
<div class="item item-body">
<img class="full-image" src="img/uptimebottle.png">
<p class="shop-product-box-text-margin">
Sport Supplements
</p>
<h3 class="shop-product-box-text-margin">UPTIME Energy <br>Original $4.39</h3>
</span>
<span><h3 class="shop-product-box-text-margin" style="color:red">Ships Free!
</h3></span>
</div>
</a>
</div>
<div class="col col-45 card card-margin home-product-border">
<a href="#/tab/product-nba">
<div class="item item-body">
<img class="full-image" src="img/lavinjersey.jpeg">
<p class="shop-product-box-text-margin">
Clothing
</p>
<h3 class="shop-product-box-text-margin">Lavine Jersery <br>NBA Black - Men's $99.99</h3>
</span>
<span><h3 class="shop-product-box-text-margin" style="color:red">Ships Free!
</h3></span>
</div>
</a>
</div>
</div>
</a>
So I found the answer. This stylesheet was using a few class names from a previous page, and that stylesheet had different css for those classes. The classes weren't being dumped before this page was loading, thus inheriting the other styles.
Recently i switched to materialize (it's based on Bootstrap i guess) and i'm trying to make modal work. it just doesn't show up. the button is there but it triggers nothing. I'm using starter template from Materialize website.
All i did was copy and paste modal code from Materialize modal page. I put the code in starter template but it doesn't work. i also tested it on another theme based on materialize but that didn't work either.
also jQuery is loaded properly.
edit: it's index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"/>
<title>Starter Template - Materialize</title>
<!-- CSS -->
<link href="css/materialize.css" type="text/css" rel="stylesheet" media="screen,projection"/>
<link href="css/style.css" type="text/css" rel="stylesheet" media="screen,projection"/>
</head>
<body>
<nav class="light-blue lighten-1" role="navigation">
<div class="container">
<div class="nav-wrapper"><a id="logo-container" href="#" class="brand-logo">Logo</a>
<ul class="right">
<li>Navbar Link</li>
</ul>
<ul id="nav-mobile" class="side-nav">
<li>Navbar Link</li>
</ul>
<i class="mdi-navigation-menu"></i>
</div>
</div>
</nav>
<div class="section no-pad-bot" id="index-banner">
<div class="container">
<br><br>
<h1 class="header center orange-text">Starter Template</h1>
<div class="row center">
<h5 class="header col s12 light">A modern responsive front-end framework based on Material Design</h5>
</div>
<div class="row center">
<button data-target="#modal1" class="btn modal-trigger">Modal</button>
</div>
<!-- Modal Structure -->
<div id="modal1" class="modal modal-fixed-footer">
<div class="modal-content">
<h4>Modal Header</h4>
<p>A bunch of text</p>
</div>
<div class="modal-footer">
Agree
</div>
</div>
<br><br>
</div>
</div>
<div class="container">
<div class="section">
<!-- Icon Section -->
<div class="row">
<div class="col s12 m4">
<div class="icon-block">
<h2 class="center light-blue-text"><i class="mdi-image-flash-on"></i></h2>
<h5 class="center">Speeds up development</h5>
<p class="light">We did most of the heavy lifting for you to provide a default stylings that incorporate our custom components. Additionally, we refined animations and transitions to provide a smoother experience for developers.</p>
</div>
</div>
<div class="col s12 m4">
<div class="icon-block">
<h2 class="center light-blue-text"><i class="mdi-social-group"></i></h2>
<h5 class="center">User Experience Focused</h5>
<p class="light">By utilizing elements and principles of Material Design, we were able to create a framework that incorporates components and animations that provide more feedback to users. Additionally, a single underlying responsive system across all platforms allow for a more unified user experience.</p>
</div>
</div>
<div class="col s12 m4">
<div class="icon-block">
<h2 class="center light-blue-text"><i class="mdi-action-settings"></i></h2>
<h5 class="center">Easy to work with</h5>
<p class="light">We have provided detailed documentation as well as specific code examples to help new users get started. We are also always open to feedback and can answer any questions a user may have about Materialize.</p>
</div>
</div>
</div>
</div>
<br><br>
<div class="section">
</div>
</div>
<footer class="page-footer orange">
<div class="container">
<div class="row">
<div class="col l6 s12">
<h5 class="white-text">Company Bio</h5>
<p class="grey-text text-lighten-4">We are a team of college students working on this project like it's our full time job. Any amount would help support and continue development on this project and is greatly appreciated.</p>
</div>
<div class="col l3 s12">
<h5 class="white-text">Settings</h5>
<ul>
<li><a class="white-text" href="#!">Link 1</a></li>
<li><a class="white-text" href="#!">Link 2</a></li>
<li><a class="white-text" href="#!">Link 3</a></li>
<li><a class="white-text" href="#!">Link 4</a></li>
</ul>
</div>
<div class="col l3 s12">
<h5 class="white-text">Connect</h5>
<ul>
<li><a class="white-text" href="#!">Link 1</a></li>
<li><a class="white-text" href="#!">Link 2</a></li>
<li><a class="white-text" href="#!">Link 3</a></li>
<li><a class="white-text" href="#!">Link 4</a></li>
</ul>
</div>
</div>
</div>
<div class="footer-copyright">
<div class="container">
Made by <a class="orange-text text-lighten-3" href="http://materializecss.com">Materialize</a>
</div>
</div>
</footer>
<!-- Scripts-->
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="js/materialize.js"></script>
<script src="js/init.js"></script>
<script> $(document).ready(function(){
// the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
$('.modal-trigger').leanModal();
});</script>
</body>
</html>
modal code:
<!-- Modal Trigger -->
<a class="waves-effect waves-light btn modal-trigger" href="#modal1">Modal</a>
<!-- Modal Structure -->
<div id="modal1" class="modal">
<div class="modal-content">
<h4>Modal Header</h4>
<p>A bunch of text</p>
</div>
<div class="modal-footer">
Agree
</div>
</div>
Here's a demo of Starter template
Here's download link of template
In the version v0.97.8 (October 30th, 2016) modal plugin has been refactored according to the updates from github. Now, the initialization of the plugin is done differently, like in the example below.
$(document).ready(function(){
// the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
$('.modal').modal();
});
I think you forgot to attach the plugin to the button.
$(document).ready(function() {
$('.modal-trigger').leanModal();
});
Also change this line data-target="#modal1"
<button data-target="#modal1" class="btn modal-trigger">Modal</button>
In to this line data-target="modal1", you inserted # by mistake, a loudy error noticed me in console.
<button data-target="modal1" class="btn modal-trigger">Modal</button>
See the snippet below for working example.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/js/materialize.min.js"></script>
<nav class="light-blue lighten-1" role="navigation">
<div class="container">
<div class="nav-wrapper"><a id="logo-container" href="#" class="brand-logo">Logo</a>
<ul class="right">
<li>Navbar Link</li>
</ul>
<ul id="nav-mobile" class="side-nav">
<li>Navbar Link</li>
</ul>
<i class="mdi-navigation-menu"></i>
</div>
</div>
</nav>
<div class="section no-pad-bot" id="index-banner">
<div class="container">
<br><br>
<h1 class="header center orange-text">Starter Template</h1>
<div class="row center">
<h5 class="header col s12 light">A modern responsive front-end framework based on Material Design</h5>
</div>
<div class="row center">
<button data-target="modal1" class="btn modal-trigger">Modal</button>
</div>
<!-- Modal Structure -->
<div id="modal1" class="modal modal-fixed-footer">
<div class="modal-content">
<h4>Modal Header</h4>
<p>A bunch of text</p>
</div>
<div class="modal-footer">
Agree
</div>
</div>
<br><br>
</div>
</div>
<div class="container">
<div class="section">
<!-- Icon Section -->
<div class="row">
<div class="col s12 m4">
<div class="icon-block">
<h2 class="center light-blue-text"><i class="mdi-image-flash-on"></i></h2>
<h5 class="center">Speeds up development</h5>
<p class="light">We did most of the heavy lifting for you to provide a default stylings that incorporate our custom components. Additionally, we refined animations and transitions to provide a smoother experience for developers.</p>
</div>
</div>
<div class="col s12 m4">
<div class="icon-block">
<h2 class="center light-blue-text"><i class="mdi-social-group"></i></h2>
<h5 class="center">User Experience Focused</h5>
<p class="light">By utilizing elements and principles of Material Design, we were able to create a framework that incorporates components and animations that provide more feedback to users. Additionally, a single underlying responsive system across all platforms allow for a more unified user experience.</p>
</div>
</div>
<div class="col s12 m4">
<div class="icon-block">
<h2 class="center light-blue-text"><i class="mdi-action-settings"></i></h2>
<h5 class="center">Easy to work with</h5>
<p class="light">We have provided detailed documentation as well as specific code examples to help new users get started. We are also always open to feedback and can answer any questions a user may have about Materialize.</p>
</div>
</div>
</div>
</div>
<br><br>
<div class="section">
</div>
</div>
<footer class="page-footer orange">
<div class="container">
<div class="row">
<div class="col l6 s12">
<h5 class="white-text">Company Bio</h5>
<p class="grey-text text-lighten-4">We are a team of college students working on this project like it's our full time job. Any amount would help support and continue development on this project and is greatly appreciated.</p>
</div>
<div class="col l3 s12">
<h5 class="white-text">Settings</h5>
<ul>
<li><a class="white-text" href="#!">Link 1</a></li>
<li><a class="white-text" href="#!">Link 2</a></li>
<li><a class="white-text" href="#!">Link 3</a></li>
<li><a class="white-text" href="#!">Link 4</a></li>
</ul>
</div>
<div class="col l3 s12">
<h5 class="white-text">Connect</h5>
<ul>
<li><a class="white-text" href="#!">Link 1</a></li>
<li><a class="white-text" href="#!">Link 2</a></li>
<li><a class="white-text" href="#!">Link 3</a></li>
<li><a class="white-text" href="#!">Link 4</a></li>
</ul>
</div>
</div>
</div>
<div class="footer-copyright">
<div class="container">
Made by <a class="orange-text text-lighten-3" href="http://materializecss.com">Materialize</a>
</div>
</div>
</footer>
<script>
$(document).ready(function() {
// the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
$('.modal-trigger').leanModal();
});
</script>
For updated code you should initialize
$(document).ready(function() {
$('.modal').modal();
});
I am using twitter bootstrap version 3 and for some reason the width of the columns don't add up right.
Take a look at this shot: http://i.imgur.com/LhgqL12.png
The right column doesn't line up with the end of the carousel and I cannot figure out why!
Here's the html for the page:
<!-- navbar -->
<div class="col-md-12">
<div class="container">
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<ul class="nav navbar-nav">
<li><span class="glyphicon glyphicon-home"></span></li>
<li>Donate</li>
<li>Sales</li>
<li>Submit Tip</li>
<li>Gaming Wiki</li>
<li>About Us</li>
<li class="dropdown">
Community <b class="caret"></b>
<ul class="dropdown-menu">
<li>Forum</li>
<li>IRC Chat</li>
<li>Twitter</li>
<li>Sales Twitter</li>
<li>Google+</li>
<li>Links</li>
</ul>
</li>
<li class="dropdown">
<span class="glyphicon glyphicon-user"></span> liamdawe <b class="caret"></b>
<ul class="dropdown-menu">
<li>View Profile</li>
<li>User CP</li>
<li>Private Messages</li>
<li>Admin CP <span class="badge badge-important">3</span></li>
<li>Logout</li>
</ul>
</li>
</ul>
<form method="get" action="/index.php?module=search" class="navbar-form navbar-right" role="search">
<input type="hidden" name="module" value="search">
<input type="text" class="form-control" name="q" placeholder="Search Articles">
<input type="submit" style="position: absolute; left: -9999px; width: 1px; height: 1px;"/>
</form>
</nav>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12">
<!-- logo -->
<img src="/templates/default/images/logo.png" height="120" width="600" alt="logo" class="logo-center" />
</div>
</div>
<div class="row">
<!-- image carousel -->
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="/uploads/carousel/1294630814id6gol.jpg" class="logo-center" alt="" />
<div class="carousel-caption">
<h3>Join our Minecraft server!</h3>
</div>
</div><div class="item">
<img src="/uploads/carousel/882399500id7gol.jpg" class="logo-center" alt="" />
<div class="carousel-caption">
<h3>Natural Selection 2 Out on the 30th for Linux!</h3>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div><!-- /.carousel -->
</div>
<!-- main content -->
<div class="row">
<!-- Articles -->
<div class="col-md-9">
<!-- notification -->
<div class="row">
<div class="alert alert-warning text-center">
You have <span class="badge badge-important">3</span> admin items needing review!
</div>
</div>
<!-- new sales -->
<div class="row">
<div class="alert alert-success text-center">
<strong>Latest Games On Sale:</strong> <span class="label label-info">Steam</span> Sparkle 2 Evo, <span class="label label-info">Steam</span> Shadow Warrior Classic Redux, <span class="label label-info">Steam</span> Redshirt, <span class="label label-info">Steam</span> Gravity Badgers - See all
</div>
</div>
<ul class="nav nav-tabs">
<li class="active">Our News</li>
<li >Featured Videos</li>
<li >News Elsewhere</li>
</ul>
<div id="maincontent">
<!-- Article -->
<div class="row gol-news-article">
<!-- Image -->
<div class="col-md-5">
<a href="/articles/sdasd-asdasdasdasdasdasdasdasd.2121" class="thumbnail">
<img data-src="holder.js/350x220" alt="article-image" src="/uploads/articles/topimages/549850194id2121gol.jpg">
</a>
</div>
<!-- Text -->
<div class="col-md-5">
<h4>Sdasd Asdasdasdasdasdasdasdasd</h4>
<p class="small muted">by liamdawe January 17, 2014 at 1:56 pm</p>
<p>
Your text here, use the uploader for an image!Your text here, use the uploader for an image!Your text here, use the uploader for an image!
<p class="small muted">In: <span class="label label-info">Interview</span> </p>
<i class="icon-pencil"></i><strong>Edit</strong> <i class="icon-heart"></i><strong>Make Editors Pick</strong>
</p>
<p class="small muted"><span class="glyphicon glyphicon-comment"></span> 1 Comments</p>
</div>
</div>
<div class="seperator"></div>
<!-- Article -->
<div class="row gol-news-article">
<!-- Image -->
<div class="col-md-5">
<a href="/articles/test-hhhhhhhhhhhhhhhhhhhh.2120" class="thumbnail">
<img data-src="holder.js/350x220" alt="article-image" src="/uploads/articles/topimages/5407865id2120gol.">
</a>
</div>
<!-- Text -->
<div class="col-md-5">
<h4>Test Hhhhhhhhhhhhhhhhhhhh</h4>
<p class="small muted">by liamdawe January 17, 2014 at 1:52 pm</p>
<p>
Your text here, use the uploader for an image!Your text here, use the uploader for an image!Your text here, use the uploader for an image!
<p class="small muted">In: <span class="label label-info">Interview</span> </p>
<i class="icon-pencil"></i><strong>Edit</strong> <i class="icon-heart"></i><strong>Make Editors Pick</strong>
</p>
<p class="small muted"><span class="glyphicon glyphicon-comment"></span> 0 Comments</p>
</div>
</div>
<div class="seperator"></div>
</div>
<div class="row">
<div class="span3">
<div class="pagination">
<ul><li class="disabled previouspage">Prev</li><li class="disabled">1</li><li class="disabled">/</li><li>99</li><li class="nextpage">Next</li></ul></div></div>
<div class="span2" style="padding-top: 18px; padding-bottom: 18px;">
<form name="form2" class="form-inline">
Pick Page: <select class="input-mini" name="jumpmenu" onchange="window.open(this.options[this.selectedIndex].value, '_self')"><option value="/home/page=1">1</option><option value="/home/page=2">2</option><option value="/home/page=3">3</option><option value="/home/page=4">4</option><option value="/home/page=5">5</option><option value="/home/page=6">6</option><option value="/home/page=7">7</option><option value="/home/page=8">8</option><option value="/home/page=9">9</option><option value="/home/page=10">10</option><option value="/home/page=11">11</option><option value="/home/page=12">12</option><option value="/home/page=13">13</option><option value="/home/page=14">14</option><option value="/home/page=15">15</option><option value="/home/page=16">16</option><option value="/home/page=17">17</option><option value="/home/page=18">18</option><option value="/home/page=19">19</option><option value="/home/page=20">20</option><option value="/home/page=21">21</option><option value="/home/page=22">22</option><option value="/home/page=23">23</option><option value="/home/page=24">24</option><option value="/home/page=25">25</option><option value="/home/page=26">26</option><option value="/home/page=27">27</option><option value="/home/page=28">28</option><option value="/home/page=29">29</option><option value="/home/page=30">30</option><option value="/home/page=31">31</option><option value="/home/page=32">32</option><option value="/home/page=33">33</option><option value="/home/page=34">34</option><option value="/home/page=35">35</option><option value="/home/page=36">36</option><option value="/home/page=37">37</option><option value="/home/page=38">38</option><option value="/home/page=39">39</option><option value="/home/page=40">40</option><option value="/home/page=41">41</option><option value="/home/page=42">42</option><option value="/home/page=43">43</option><option value="/home/page=44">44</option><option value="/home/page=45">45</option><option value="/home/page=46">46</option><option value="/home/page=47">47</option><option value="/home/page=48">48</option><option value="/home/page=49">49</option><option value="/home/page=50">50</option><option value="/home/page=51">51</option><option value="/home/page=52">52</option><option value="/home/page=53">53</option><option value="/home/page=54">54</option><option value="/home/page=55">55</option><option value="/home/page=56">56</option><option value="/home/page=57">57</option><option value="/home/page=58">58</option><option value="/home/page=59">59</option><option value="/home/page=60">60</option><option value="/home/page=61">61</option><option value="/home/page=62">62</option><option value="/home/page=63">63</option><option value="/home/page=64">64</option><option value="/home/page=65">65</option><option value="/home/page=66">66</option><option value="/home/page=67">67</option><option value="/home/page=68">68</option><option value="/home/page=69">69</option><option value="/home/page=70">70</option><option value="/home/page=71">71</option><option value="/home/page=72">72</option><option value="/home/page=73">73</option><option value="/home/page=74">74</option><option value="/home/page=75">75</option><option value="/home/page=76">76</option><option value="/home/page=77">77</option><option value="/home/page=78">78</option><option value="/home/page=79">79</option><option value="/home/page=80">80</option><option value="/home/page=81">81</option><option value="/home/page=82">82</option><option value="/home/page=83">83</option><option value="/home/page=84">84</option><option value="/home/page=85">85</option><option value="/home/page=86">86</option><option value="/home/page=87">87</option><option value="/home/page=88">88</option><option value="/home/page=89">89</option><option value="/home/page=90">90</option><option value="/home/page=91">91</option><option value="/home/page=92">92</option><option value="/home/page=93">93</option><option value="/home/page=94">94</option><option value="/home/page=95">95</option><option value="/home/page=96">96</option><option value="/home/page=97">97</option><option value="/home/page=98">98</option><option value="/home/page=99">99</option></select></form></div></div>
</div>
<!-- Sidebar -->
<div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation">
<!-- Articles Sidebar -->
<ul class="list-group">
<li class="list-group-item"><i class="icon-heart"></i> Editor's Picks</li>
<li class="list-group-item"><i class="icon-star"></i> Popular this week</li>
<li class="list-group-item"><i class="icon-th-large"></i> View by Category</li>
<li class="list-group-item">
<form name="form1">
<select onchange="window.open(this.options[this.selectedIndex].value, '_self')" class="form-control">
<option>Pick One</option>
<option value="/articles/category/17">Coming Soon</option>
<option value="/articles/category/14">Competition</option>
<option value="/articles/category/7">Crowdfunding</option>
<option value="/articles/category/13">Desura</option>
<option value="/articles/category/1">Editorial</option>
<option value="/articles/category/20">FPS</option>
<option value="/articles/category/16">First Look</option>
<option value="/articles/category/9">Free Game</option>
<option value="/articles/category/8">Game Bundle</option>
<option value="/articles/category/4">Game Sale</option>
<option value="/articles/category/6">Indie Game</option>
<option value="/articles/category/18">Indie Game</option>
<option value="/articles/category/3">Interview</option>
<option value="/articles/category/10">MMO</option>
<option value="/articles/category/0">No Category</option>
<option value="/articles/category/11">Open Source</option>
<option value="/articles/category/21">RTS</option>
<option value="/articles/category/2">Review</option>
<option value="/articles/category/5">Steam</option>
<option value="/articles/category/12">Unity3D</option>
<option value="/articles/category/15">Wine</option>
</select>
</form>
</li>
<li class="list-group-item">Article Search</li>
<li class="list-group-item">Submit Article</li>
</ul>
<!-- twitter Sidebar -->
<div class="well well-sm">
<a class="twitter-timeline" href="https://twitter.com/gamingonlinux" data-widget-id="381375312019218432" height="400">Tweets by #gamingonlinux</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>
</div>
<!-- Footer -->
<div class="row">
<div class="col-md-12">
<div class="well text-center">
<strong>GamingOnLinux</strong> the Linux Games website, Copyright © GamingOnLinux.com 2009-2014.
<br />Page generated in 0.025 seconds, MySQL queries: 10<br />
</div>
</div>
</div>
</div>
</div>
What I want is for the right panels width to extend to the end of the carousel, currently it falls short as you can see there is a gap on the right of blank space after the sidebar.
I think that the problem is not the right hand panel but a couple of other things.
First, the carousel is inside a .row but not inside a .col-md-12 mean there'll be a negative margin to the sides, but no padding on the col to negate that.
So add that in here:
<div class="row">
<div class="col-md-12">
<!-- image carousel -->
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
...
</div>
</div>
</div>
Second, you've nested some rows (.row) for your alert boxes. That's causing them to be pulled out of line because of the negative margin that rows have. You either need to add a col-md-12 around each alert (because the padding on cols negates the rows negative margin) or you remove the .row completely. That works because the div is just 100% width of the parent column which is fine.
So remove the row below:
<!-- notification -->
<div class="row"> <!-- REMOVE THIS -->
<div class="alert alert-warning text-center">
You have <span class="badge badge-important">3</span> admin items needing review!
</div>
</div> <!-- REMOVE THIS CLOSING DIV TOO -->
Demo
Try to define your col-md-3 boostrap is a grid of 12, you have defined mid to be 9
also to avoid the padding of container / row create a .nopadding { padding:0 !important }