How to import the number from google sheet ...?
I have some number in google sheet and wants to populate in HTML web app.
below is the HTML code, help with some tips
I am sharing the google sheet for reference and also attached the HTML page view (image) for better understanding.
Google Sheet
<!DOCTYPE html>
<html>
<title>W3.CSS Template</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
html,body,h1,h2,h3,h4,h5 {font-family: "Raleway", sans-serif}
</style>
<body class="w3-light-grey">
<!-- Top container -->
<div class="w3-bar w3-top w3-black w3-large" style="z-index:4">
<button class="w3-bar-item w3-button w3-hide-large w3-hover-none w3-hover-text-light-grey" onclick="w3_open();"><i class="fa fa-bars"></i> Menu</button>
<span class="w3-bar-item w3-right">Supplier Management Team</span>
</div>
<!-- Sidebar/menu -->
<nav class="w3-sidebar w3-collapse w3-white w3-animate-left" style="z-index:3;width:300px;" id="mySidebar"><br>
<div class="w3-container w3-row">
<div class="w3-col s4">
</div>
<span>Welcome, <strong><h5 id="email"></h5></strong></span><br>
<head>
<base target="_top">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(function() {
google.script.run
.withSuccessHandler(dispEmail)
.getCurrentUserEmail();
});//runs after dom is loaded
function dispEmail(data)
{
$('#email').text(data.email);//put's email into h1 tag
}
console.log('My Code');
</script>
</head>
<body>
<h5 id="email"></h5>
<hr>
<i class="fa fa-envelope"></i>
<i class="fa fa-user"></i>
<i class="fa fa-cog"></i>
</div>
<hr>
<div class="w3-container">
<h5>Dashboard</h5>
</div>
<div class="w3-bar-block">
<i class="fa fa-remove fa-fw"></i> Close Menu
<i class="fa fa-users fa-fw"></i> Overview
</div>
</nav>
<!-- Overlay effect when opening sidebar on small screens -->
<div class="w3-overlay w3-hide-large w3-animate-opacity" onclick="w3_close()" style="cursor:pointer" title="close side menu" id="myOverlay"></div>
<!-- !PAGE CONTENT! -->
<div class="w3-main" style="margin-left:300px;margin-top:43px;">
<!-- Header -->
<header class="w3-container" style="padding-top:22px">
<h5><b><i class="fa fa-dashboard"></i> My Dashboard</b></h5>
</header>
<div class="w3-row-padding w3-margin-bottom">
<div class="w3-quarter">
<div class="w3-container w3-red w3-padding-16">
<div class="w3-left"><i class=""></i></div>
<div class="w3-right">
<h3>52</h3>
</div>
<div class="w3-clear"></div>
<h4>Open</h4>
</div>
</div>
<div class="w3-quarter">
<div class="w3-container w3-blue w3-padding-16">
<div class="w3-left"><i class=""></i></div>
<div class="w3-right">
<h3>99</h3>
</div>
<div class="w3-clear"></div>
<h4>Hold</h4>
</div>
</div>
<div class="w3-quarter">
<div class="w3-container w3-teal w3-padding-16">
<div class="w3-left"><i class=""></i></div>
<div class="w3-right">
<h3>23</h3>
</div>
<div class="w3-clear"></div>
<h4>WIP</h4>
</div>
</div>
<div class="w3-quarter">
<div class="w3-container w3-orange w3-text-white w3-padding-16">
<div class="w3-left"><i class=""></i></div>
<div class="w3-right">
<h3>50</h3>
</div>
<div class="w3-clear"></div>
<h4>Closed</h4>
</div>
</div>
</div>
<!-- Footer -->
<footer class="w3-container w3-padding-16 w3-light-grey">
<h6> Internal Application</h6>
</footer>
<!-- End page content -->
</div>
<script>
// Get the Sidebar
var mySidebar = document.getElementById("mySidebar");
// Get the DIV with overlay effect
var overlayBg = document.getElementById("myOverlay");
// Toggle between showing and hiding the sidebar, and add overlay effect
function w3_open() {
if (mySidebar.style.display === 'block') {
mySidebar.style.display = 'none';
overlayBg.style.display = "none";
} else {
mySidebar.style.display = 'block';
overlayBg.style.display = "block";
}
}
// Close the sidebar with the close button
function w3_close() {
mySidebar.style.display = "none";
overlayBg.style.display = "none";
}
</script>
</body>
</html>
This is a simple example of how to get data in the spreadsheet into a simple html file. I used an object to move the data from the server to the client. I've also included the doGet if you wish to make it a web app.
Code.gs file:
function getVals(range)
{
var ss=SpreadsheetApp.getActiveSpreadsheet();
var sht=ss.getActiveSheet();
var rng=sht.getRange(range);
var rngA=rng.getValues();
var data = {};
for(var i=0;i<rngA.length;i++)
{
data[rngA[i][0]]=rngA[i][1];
}
return data;
}
function displayThisDialog()
{
var userInterface=HtmlService.createHtmlOutputFromFile('index10').setWidth(400).setHeight(450);
SpreadsheetApp.getUi().showModelessDialog(userInterface, 'Get Vals');
}
function doGet()
{
var html = HtmlService.createHtmlOutputFromFile('index10');
return html.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL)
}
index10.html file:
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(function() {
google.script.run
.withSuccessHandler(dispVals)
.getVals('A1:B4');
});
function dispVals(data)
{
$('#val0').text('WIP= ' + data.WIP);
$('#val1').text('Open= ' + data.Open);
$('#val2').text('Closed= ' + data.Closed);
$('#val3').text('Hold= ' + data.Hold);
}
console.log('My Code');
</script>
</head>
<body>
<h1 id="val0"></h1>
<h1 id="val1"></h1>
<h1 id="val2"></h1>
<h1 id="val3"></h1>
</body>
</html>
Related
I'm developing a web-audio player, and I'm new to Bootstrap. At the moment, my player looks like this:
This is my source code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>wavesurfer - Intro</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
</head>
<body>
<div class="container-fluid">
<!-- Waveform -->
<div id="waveform"></div>
<!-- Progress -->
<div class="row">
<div id="progress" class="col-md-6">Loading audio...</div>
<div id="duration" class="col-md-6" style="text-align: right;"></div>
</div>
<br>
<div class="row">
<!-- Backward 5 s -->
<button id="bwd" class="col-md-3" type="button" disabled="disabled">
<i class="fa fa-backward"></i>
<div>Backward 5 s</div>
</button>
<!-- Play/Pause -->
<button id="btn-play-pause" class="btn btn-primary col-md-4" type="button" disabled="disabled">
<i id="icon-play-pause" class="fa fa-play"></i>
<div id="text-play-pause">Play</div>
</button>
<!-- Forward 5 s -->
<button id="fwd" class="col-md-3" type="button" disabled="disabled">
<i class="fa fa-forward"></i>
<div>Forward 5 s</div>
</button>
<!-- Stop -->
<button id="btn-stop" class="col-md-2" type="button" value="Stop" disabled="disabled">
<i class="fa fa-stop"></i>
<div>Stop</div>
</button>
</div>
<br>
<div class="row">
<div class="col-md-6">
<!-- Audio rate -->
<i class="fas fa-tachometer-alt"></i>
<input id="audio-rate" type="range" min="0.25" max="2" value="1" step="0.25">
<div id="audio-rate_value" style="display: inline;">1x</div>
</div>
<div class="col-md-6" style="text-align: right;">
<!-- Volume -->
<i id="icon-volume" class="fas fa-volume-down"></i>
<input id="volume" type="range" min="0" max="2" value="1" step="0.1">
</div>
</div>
<div class="row">
<div class="col-md-6">
<!-- Loop -->
<button id="loop" class="btn btn-outline-primary">Loop</button>
</div>
<div class="col-md-6" style="text-align: right;">
<!-- Low-pass filter -->
<button id="lowpass-filter" class="btn btn-outline-primary">Low-pass filter</button>
</div>
</div>
</div>
<script src="bundle.js"></script>
</body>
</html>
I've stumbled upon several issues.
The volume icon - It changes depending on the volume level, but in a "bad way":
How can I keep it fixed?
Shrinking the screen width - This is what happens when I shrink my window (I've drawn red rectangles to make the problem clearer):
How can I keep two elements inside the same row?
EDIT #1 - This is the code for changing the volume icon:
var controls = {
...
volume: document.getElementById("volume"),
...
}
controls.volume.addEventListener("input", function () {
let volume = controls.volume.value;
wavesurfer.setVolume(volume);
// Change volume icon
document.getElementById("icon-volume").classList = "";
if(volume == 0){
document.getElementById("icon-volume").classList = "fas fa-volume-off";
}
else if (volume > 0 && volume <= 1){
document.getElementById("icon-volume").classList = "fas fa-volume-down";
}
else{
document.getElementById("icon-volume").classList = "fas fa-volume-up";
}
});
I eventually managed to solve Issue #2 by adding the width attribute to the icon tag style:
<i id="icon-volume" class="fas fa-volume-down" style="text-align: justify; width: 18px;"></i>
I'm trying to integrate the slide into my navigation. Here is the slide that I am trying to integrate.
Here is the code I'm working on and the website is rosannalui.com. I'm a bit stumped what I'm doing wrong and any help would be greatly appreciated. Thank you so much!
<html>
<head>
<title>Rosanna Lui</title>
<link href="https://fonts.googleapis.com/css?family=Lora:400" rel="stylesheet">
<link href="https://fonts.go``ogleapis.com/css?family=Montserrat:400,500" rel="stylesheet">
<link href="style.css?v=1" rel="stylesheet">
<meta name="viewport" content="width=700">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
body {
position: relative;
}
#section1 {padding-top:50px;height:500px;color: #fff; background-color: #9E88E5;}
#section2 {padding-top:50px;height:500px;color: #fff; background-color: #673ab7;}
#section3 {padding-top:50px;height:500px;color: #fff; background-color: #ff9800;}
</style>
</head>
———
<div class="container-fluid">
——
<body class="bodyhome">
<!-- Menu -->
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class='container-fluid'>
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li><a class =“menuhello” href="#">Hello</a></li>
<li><a class =“menuwork” href=“#work”>Work</a></li>
<li><a class =“menucontact” href=“#contact”>Contact</a></li>
</ul>
</div>
</div>
</div>
</nav>
<div id="section1" class="container-fluid">
<!-- Hello -->
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<div id="hello" class="darkgray">
<div id="hellotext">
<h1>I'm Rosanna, a visual and UX designer, and I am passionate about making <span class="bluetext">delightful</span> experiences.</h1>
</div>
</div>
<!-- Dots -->
<script>
particlesJS.load('hello', 'particles.json', function() {
console.log('hello#rosannalui.com');
});
</script>
</div>
<div id="section2" class="container-fluid">
<!-- Work -->
<a name="work"></a>
<div class="grid">
<div class="work work1">
<a href="./bee/">
<h2>Bee Adventurous</h2>
<h3>Augmented Reality Game</h3>
</a>
</div>
<div class="work work2">
<a href="./husky">
<h2>Husky Checkout</h2>
<h3>Equipment Rental Application</h3>
</a>
</div>
<div class="work work3">
<a href="./chord">
<h2>Chordinate</h2>
<h3>Networking App for Musicians</h3>
</a>
</div>
<div class="work work4">
<a href="./design">
<h2>Design Work</h2>
<h3>Illustration and Design</h3>
</a>
</div>
</div>
</div>
<div id="section3" class="container-fluid">
<!-- Contact -->
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<a name="contact"></a>
<div class="lightgray contact content">
<img src="images/rosanna.png" style="margin-top: -3vw" />
<div>
<h3>Rosanna Lui</h3>
<p>
I am a recent Interactive Media Design graduate at the University of Washington. Inspired by my background as a daughter of immigrants, I believe that it is important to design with the user in mind and to create content that is accessible to everyone.
I am always looking for new projects and opportunities to collaborate with others.
</p>
<p>
Email me: hello#rosannalui.com
</p>
</div>
</div>
</div>
<script>
$(document).ready(function(){
// Add scrollspy to <body>
$('body').scrollspy({target: ".navbar", offset: 50});
// Add smooth scrolling on all links inside the navbar
$("#myNavbar a").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
});
</script>
</body>
</html>
For a quick and dirty solution use:
html{
scroll-behavior: smooth;
}
Note that not all browsers support this.
Another quick way is to use jump.js.
Add this to your head:
<script src="https://rawgit.com/jumpjs/jumpjs/master/dist/jumpjs.min.js"></script>
I just started playing around with materializecss framework. After going through the form page. I decided to try a simple example shown below:
<!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"/>
<link rel="shortcut icon" href="images/icon.png" type="image/png">
<title>form example</title>
<!-- CSS -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<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>
<div class="navbar-fixed">
<nav class="blue darken-4" role="navigation">
<ul id="slide-out" class="side-nav">
<li><div class="userView">
<div class="background blue darken-3">
<!--<img src="images/background3.jpg">-->
</div>
</div>
</li>
</ul>
<i class="material-icons">menu</i>
<div class="nav-wrapper">
<a id="logo-container" href="index.php" class="brand-logo"><img src="images/icon.png">Form</a>
<ul class="right hide-on-med-and-down">
<li><div class="right"><a class="waves-effect waves-light btn red modal-trigger tooltipped" data-position="bottom" data-delay="50" data-tooltip="Click to login or register " href="login.php" >Login</a></div></li>
</ul>
</div>
</nav>
</div>
<form id="uploadimage" class="col s12" method="post" action="" enctype="multipart/form-data" >
<div class="form-container">
<div class="row">
<div class="file-field input-field col s12">
<div class="btn waves-effect waves-light blue darken-3">
<span>browse</span>
<input type="file" id="image" name="image" accept="image/x-png,image/jpeg, image/jpg">
</div>
<div class="file-path-wrapper">
<input id="imagef1" name="imagef1" class="file-path validate" placeholder="Image 1: Product Front View" type="text">
</div>
</div>
</div>
<center>
<input type="button" id="postform" onclick="return check(this.form, this.form.image);" class="btn waves-effect waves-light red" value="Post Product" name="postform" />
</center>
</div>
</form>
<div id="modal5" class="modal bottom-sheet">
<div class="modal-content">
<p align="center">You must provide all the requested details. Please try again</p>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$("#image").change(function(){
alert("file upload changed");
});
});
function check(form, image) {
//Check each field has a value
if (image.value == '' ) {
$('#modal5').openModal();
//alert('You must provide all the requested details. Please try again');
return false;
}
}
</script>
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/materialize.min.js"></script>
</body>
</html>
After clicking on the browse button, the jquery code on change does not execute. What am i doing wrong here?
I was able to fix the problem via help from #wackychocolatefactory from materializecss github page. The answer lies in the order of my JavaScript files. That is moving the script of jquery and materializecss above that of $(document).ready(function(){});
so I should put it in this order
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/materialize.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#image").change(function(){
alert("file upload changed");
});
});
function check(form, image) {
//Check each field has a value
if (image.value == '' ) {
$('#modal5').openModal();
//alert('You must provide all the requested details. Please try again');
return false;
}
}
</script>
which is used to listing book and when user clicks on "Edit" button need to show book details in model-fade form.
Am tried but new values are not showing in model.
var rootApp = angular.module('profileApp', ['bookList','EditBook']);
// menu bar items
var firstApp = angular.module('bookList', []);
firstApp.controller('bookListController',function($scope, $http,productService) {
//here am getting data from service
var obj1 = {Book_Title:"book1",Book_Category: "Comdedy"};
var obj2 = {Book_Title:"book2",Book_Category: "story"};
var totalArray=[];
totalArray.push(obj1);
totalArray.push(obj2);
$scope.UserBookList = totalArray;
//funcion call get from html directly
$scope.bookItemEditIndex = function(idx){
$("#EditBookModal").modal();
$scope.temp = $scope.UserBookList[idx];
productService.addProduct($scope.temp);
console.log( $scope.temp);
console.log( productService.getProducts()[0]);
}
});
//Edit book
var secondApp = angular.module('EditBook', []);
secondApp.controller('EditBookController', function($scope,productService) {
var products = productService.getProducts()[0];
console.log(products);
$scope.NGE_bookTitle = $scope.products;
});
rootApp.service('productService', function() {
var productList = [];
var addProduct = function(newObj) {
productList.push(newObj);
};
var getProducts = function(){
return productList;
};
return {
addProduct: addProduct,
getProducts: getProducts
};
});
<!DOCTYPE html>
<html lang="en" ng-app="profileApp">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Boostrap Validator</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.3/js/bootstrapValidator.min.js"> </script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.3/css/bootstrapValidator.min.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<style type="text/css">
.navbar{
}
.modal-dialog {
width: 100%;
height: auto;
padding: 0;
margin:0;
}
#mid-containeer{
border: 1px #e4e4e4 solid;
height: 10%;
}
#footer-containeer{
height: 100px;
width:100%;
}
</style>
<script type="text/javascript" src="indexservice.js"></script>
</head>
<body>
<!-- user book list -->
<div class="container">
<h1 class="page-header">Book Details </h1>
<p>The table having your book deails</p>
<div ng-controller="bookListController" id="bookListControllerID">
<table class="table table-bordered table table-striped css-serial">
<thead>
<tr>
<th>Book Name</th>
<th>Edit</th>
</tr>
</thead>
<tbody ng-repeat="book in UserBookList">
<tr>
<td> {{book.Book_Title}} </td>
<td><a class="btn mini blue-stripe btn-info" href="#" data-toggle="modal" data-target="" ng-click="bookItemEditIndex($index)">Edit</a></td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- edit book module -->
<div class="modal fade " id="EditBookModal" tabindex="-1" role="dialog" aria-labelledby="Login" aria-hidden="true" data-backdrop="true">
<div ng-controller="EditBookController" id="EditBookControllerID">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h5 class="modal-title">Book</h5>
</div>
<div class="modal-body">
<div class="modal-body">
<div class="container" style="padding: 0px;">
<h1 class="page-header">Book Profile</h1>
<div class="row">
<!-- left column -->
<!-- edit form column -->
<div class="col-md-8 col-sm-6 col-xs-12 personal-info">
<div class="alert alert-info alert-dismissable">
<a class="panel-close close" data-dismiss="alert">×</a>
<i class="fa fa-coffee"></i>
You can edit your <strong>Book</strong> here.
</div>
<h3>Edit book info</h3>
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="col-lg-3 control-label">Book title:</label>
<div class="col-lg-8">
<input class="form-control" value="jahn" type="text" name="E_bookTitle" ng-model="NGE_bookTitle">
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label"></label>
<div class="col-md-8">
<input class="btn btn-primary" value="Save" type="submit" >
<span></span>
<input class="btn btn-default" value="Cancel" type="reset">
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</html>
thanks advance.
I am coding a website using onepage-scroll, and I'm encountering a very strange issue. In my last section (fourth), I added some content (notify me!), it displayed perfectly, and now I did something else (added scripts) and all the content disappeared.
Demo here: https://opencubes.github.io/
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>OpenCubes</title>
<link rel="stylesheet" href="stylesheets/styles.css">
...
<script type="text/javascript" src="//cdn.firebase.com/js/client/1.0.17/firebase.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<script>
$(document).ready(function () {
$(".main").onepage_scroll({
sectionContainer: "section",
...
direction: "vertical"
});
$('a.notify').on('click', function () {
...
});
});
</script>
</head>
<body>
<div class="main">
<section class="first-page">
<div class="description">
<h1>The Minecraft Mod Marketplace</h1>
<div>
OpenCubes...
</div>
</div>
<a href="#" class="scroll-down">
<i class="fa fa-chevron-circle-down"></i> Scroll Down
</a>
</section>
<section class="second-page">
<div class="description">
<h1>Browse mods</h1>
<div>
With OpenCubes,...
</div>
</div>
<img src="images/browse.png" />
<a href="#" class="scroll-down">
<i class="fa fa-chevron-circle-down"></i> Keep scrolling...
</a>
</section>
<section class="third-page">
<div class="features">
<div class="feature-spotlight sl-1">
<div>
<h2>Comment and vote</h2>
...
</div>
<img src="images/comments.png" />
</div>
<div class="feature-spotlight sl-2">
<img src="images/files.png" />
<div>
<h2>Files and version manager</h2>
In OpenCubes,...
</div>
</div>
</div>
</section>
<section class="fourth-page">
<div class="main">
<h1>OpenCubes is still in development.</h1>
<div class="send">
<h2>Enter your email here to be notified when it's ready</h2>
<input class="email" type="email"/>
Notify me!
</div>
</div>
</section>
</div>
<!--[if !IE]><script>fixScale(document);</script><![endif]-->
</body>
</html>