How design layout navigation main footer - angular-material

I am using angular material design layout to design my application layout.
The page consist of three scope, navigation, main and footer. Here what I did until now
What I want is, that the footer should be always on the bottom and the main part, that start with lorem ipsum should be filled the available height space.
The html code is:
<!DOCTYPE html>
<html ng-app="demoApp">
<head>
<meta charset="UTF-8">
<title>CodePen - Using md-gridlist with md-icon Avatars</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=RobotoDraft:400,500,700,400italic">
<link rel='stylesheet prefetch' href='http://rawgit.com/angular/bower-material/master/angular-material.min.css'>
<link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.css'>
<link rel="stylesheet" href="css/style.css">
<script src="js/modernizr.js"></script>
</head>
<body layout="column" layout-align="start center" ng-controller="DemoController">
<div style="width:100%;border:1px solid red;margin-top:5px;" layout="column" layout-align="center center">
<div style="width:100%;" layout="row" flex="45" layout-align="center center">
<md-toolbar flex="45">
<h2 class="md-toolbar-tools">
<span>Navi1</span>
</h2>
</md-toolbar>
</div>
<div style="width:100%;" layout="row" flex="45" layout-align="center center">
<md-toolbar flex="45">
<h2 class="md-toolbar-tools">
<span>Navi2</span>
</h2>
</md-toolbar>
</div>
</div>
<main style="width:100%;border:1px solid red;" layout="column">
<div style="width:100%;" layout="row" layout-align="center start">
<md-toolbar flex="45">
<md-toolbar class="md-warn" layout="row">
<div class="md-toolbar-tools">
<span class="md-flex">Title</span>
</div>
</md-toolbar>
</md-toolbar>
</div>
<div style="width:100%;" layout="row" layout-align="center start">
<md-content class="md-padding" flex="45">
Lorem ipsum dolor sit amet, ne quod novum mei. Sea omnium invenire mediocrem at, in lobortis conclusionemque nam. Ne deleniti appetere reprimique pro, inani labitur disputationi te sed. At vix sale omnesque, id pro labitur reformidans accommodare, cum labores honestatis eu. Nec quem lucilius in, eam praesent reformidans no. Sed laudem aliquam ne.
<p>
Facete delenit argumentum cum at. Pro rebum nostrum contentiones ad. Mel exerci tritani maiorum at, mea te audire phaedrum, mel et nibh aliquam. Malis causae equidem vel eu. Noster melius vis ea, duis alterum oporteat ea sea. Per cu vide munere fierent.
</p>
<p>
Ad sea dolor accusata consequuntur. Sit facete convenire reprehendunt et. Usu cu nonumy dissentiet, mei choro omnes fuisset ad. Te qui docendi accusam efficiantur, doming noster prodesset eam ei. In vel posse movet, ut convenire referrentur eum, ceteros singulis intellegam eu sit.
</p>
<p>
Sit saepe quaestio reprimique id, duo no congue nominati, cum id nobis facilisi. No est laoreet dissentias, idque consectetuer eam id. Clita possim assueverit cu his, solum virtute recteque et cum. Vel cu luptatum signiferumque, mel eu brute nostro senserit. Blandit euripidis consequat ex mei, atqui torquatos id cum, meliore luptatum ut usu. Cu zril perpetua gubergren pri. Accusamus rationibus instructior ei pro, eu nullam principes qui, reque justo omnes et quo.
</p>
<p>
Sint unum eam id. At sit fastidii theophrastus, mutat senserit repudiare et has. Atqui appareat repudiare ad nam, et ius alii incorrupte. Alii nullam libris his ei, meis aeterno at eum. Ne aeque tincidunt duo. In audire malorum mel, tamquam efficiantur has te.
</p>
<p>
Qui utamur tacimates quaestio ad, quod graece omnium ius ut. Pri ut vero debitis interpretaris, qui cu mentitum adipiscing disputationi. Voluptatum mediocritatem quo ut. Fabulas dolorem ei has, quem molestie persequeris et sit.
</p>
</md-content>
</div>
</main>
<div style="width:100%;" layout="row" layout-align="center start">
<md-toolbar class="md-medium-tall" flex="45">
<div layout="row" layout-align="center center" flex>
<span>FOOTER</span>
</div>
</md-toolbar>
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/hammer.js/1.1.3/hammer.min.js'></script><script src='http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.4/angular.js'></script><script src='http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.4/angular-animate.js'></script><script src='http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.4/angular-aria.js'></script><script src='http://rawgit.com/angular/bower-material/master/angular-material.js'></script><script src='http://cdnjs.cloudflare.com/ajax/libs/gsap/1.15.0/TweenMax.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
And javascript
angular
.module('demoApp', ['ngMaterial'])
.controller("DemoController", function($scope){
})
The css file is empty.
My question is, how to design a layout with navigation, main and footer?


I've got what I want
<!DOCTYPE html>
<html lang="en">
<head>
<title>Angular Material - Starter App</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"/>
<link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Roboto:400,700'>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/0.8.3/angular-material.css"/>
<link rel="stylesheet" href="./style.css"/>
</head>
<body ng-app="starterApp" layout="column">
<div id="navbar" layout="column">
<div id="home" layout="row" layout-align="center start">
<md-toolbar flex-gt-md="40" flex-lg="40" flex-gt-lg="40" layout="row">
<h1>Navi1</h1>
</md-toolbar>
</div>
<div id="home" layout="row" layout-align="center start">
<md-toolbar flex-gt-md="40" flex-lg="40" flex-gt-lg="40" layout="row">
<h1>Navi2</h1>
</md-toolbar>
</div>
</div>
<div flex layout="column">
<div layout="row" layout-align="center start">
<md-toolbar flex-gt-md="40" flex-lg="40" flex-gt-lg="40">
<h1>Title</h1>
</md-toolbar>
</div>
<div flex layout="row" style="border:1px solid blue;" layout-align="center">
<md-content flex id="content" flex-gt-md="40" flex-lg="40" flex-gt-lg="40" md-scroll-y>
<h2>Lia Luogo</h2>
<p>
I love cheese, especially airedale queso. Cheese and biscuits halloumi cauliflower cheese cottage cheese
swiss boursin fondue caerphilly. Cow port-salut camembert de normandie macaroni cheese feta who moved my
cheese babybel boursin. Red leicester roquefort boursin squirty cheese jarlsberg blue castello caerphilly
chalk and cheese. Lancashire.
</p>
<p>
I love cheese, especially airedale queso. Cheese and biscuits halloumi cauliflower cheese cottage cheese
swiss boursin fondue caerphilly. Cow port-salut camembert de normandie macaroni cheese feta who moved my
cheese babybel boursin. Red leicester roquefort boursin squirty cheese jarlsberg blue castello caerphilly
chalk and cheese. Lancashire.
</p>
<p>
I love cheese, especially airedale queso. Cheese and biscuits halloumi cauliflower cheese cottage cheese
swiss boursin fondue caerphilly. Cow port-salut camembert de normandie macaroni cheese feta who moved my
cheese babybel boursin. Red leicester roquefort boursin squirty cheese jarlsberg blue castello caerphilly
chalk and cheese. Lancashire.
</p>
<p>
I love cheese, especially airedale queso. Cheese and biscuits halloumi cauliflower cheese cottage cheese
swiss boursin fondue caerphilly. Cow port-salut camembert de normandie macaroni cheese feta who moved my
cheese babybel boursin. Red leicester roquefort boursin squirty cheese jarlsberg blue castello caerphilly
chalk and cheese. Lancashire.
</p>
<p>
I love cheese, especially airedale queso. Cheese and biscuits halloumi cauliflower cheese cottage cheese
swiss boursin fondue caerphilly. Cow port-salut camembert de normandie macaroni cheese feta who moved my
cheese babybel boursin. Red leicester roquefort boursin squirty cheese jarlsberg blue castello caerphilly
chalk and cheese. Lancashire.
</p>
<p>
I love cheese, especially airedale queso. Cheese and biscuits halloumi cauliflower cheese cottage cheese
swiss boursin fondue caerphilly. Cow port-salut camembert de normandie macaroni cheese feta who moved my
cheese babybel boursin. Red leicester roquefort boursin squirty cheese jarlsberg blue castello caerphilly
chalk and cheese. Lancashire.
</p>
<p>
I love cheese, especially airedale queso. Cheese and biscuits halloumi cauliflower cheese cottage cheese
swiss boursin fondue caerphilly. Cow port-salut camembert de normandie macaroni cheese feta who moved my
cheese babybel boursin. Red leicester roquefort boursin squirty cheese jarlsberg blue castello caerphilly
chalk and cheese. Lancashire.
</p>
<p>
I love cheese, especially airedale queso. Cheese and biscuits halloumi cauliflower cheese cottage cheese
swiss boursin fondue caerphilly. Cow port-salut camembert de normandie macaroni cheese feta who moved my
cheese babybel boursin. Red leicester roquefort boursin squirty cheese jarlsberg blue castello caerphilly
chalk and cheese. Lancashire.
</p>
<p>
I love cheese, especially airedale queso. Cheese and biscuits halloumi cauliflower cheese cottage cheese
swiss boursin fondue caerphilly. Cow port-salut camembert de normandie macaroni cheese feta who moved my
cheese babybel boursin. Red leicester roquefort boursin squirty cheese jarlsberg blue castello caerphilly
chalk and cheese. Lancashire.
</p>
<p>
I love cheese, especially airedale queso. Cheese and biscuits halloumi cauliflower cheese cottage cheese
swiss boursin fondue caerphilly. Cow port-salut camembert de normandie macaroni cheese feta who moved my
cheese babybel boursin. Red leicester roquefort boursin squirty cheese jarlsberg blue castello caerphilly
chalk and cheese. Lancashire.
</p>
<p>
I love cheese, especially airedale queso. Cheese and biscuits halloumi cauliflower cheese cottage cheese
swiss boursin fondue caerphilly. Cow port-salut camembert de normandie macaroni cheese feta who moved my
cheese babybel boursin. Red leicester roquefort boursin squirty cheese jarlsberg blue castello caerphilly
chalk and cheese. Lancashire.
</p>
<p>
I love cheese, especially airedale queso. Cheese and biscuits halloumi cauliflower cheese cottage cheese
swiss boursin fondue caerphilly. Cow port-salut camembert de normandie macaroni cheese feta who moved my
cheese babybel boursin. Red leicester roquefort boursin squirty cheese jarlsberg blue castello caerphilly
chalk and cheese. Lancashire.
</p>
<p>
I love cheese, especially airedale queso. Cheese and biscuits halloumi cauliflower cheese cottage cheese
swiss boursin fondue caerphilly. Cow port-salut camembert de normandie macaroni cheese feta who moved my
cheese babybel boursin. Red leicester roquefort boursin squirty cheese jarlsberg blue castello caerphilly
chalk and cheese. Lancashire.
</p>
<p>
I love cheese, especially airedale queso. Cheese and biscuits halloumi cauliflower cheese cottage cheese
swiss boursin fondue caerphilly. Cow port-salut camembert de normandie macaroni cheese feta who moved my
cheese babybel boursin. Red leicester roquefort boursin squirty cheese jarlsberg blue castello caerphilly
chalk and cheese. Lancashire.
</p>
</md-content>
</div>
</div>
<div layout="row" layout-align="center start">
<md-toolbar flex-gt-md="40" flex-lg="40" flex-gt-lg="40" layout="row">
<h1>Footer</h1>
</md-toolbar>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular-animate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular-aria.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/0.8.3/angular-material.js"></script>
<script type="text/javascript">
angular
.module('starterApp', ['ngMaterial'])
.run(function ($log) {
$log.debug("starterApp + ngMaterial running...");
});
</script>
</body>
</html>

Related

Cards stacked vertically on two columns of fixed height

I have a certain number of cards. I want to display them in two columns of fixed height in the following way: first I want to fill col number 1; when the end of col1 is reached, start filling col2 (see image).
How can I do that with Bootstrap 5?
cards stacked vertically on two columns
UPDATE
Here is my code:
<div class="container-lg">
<h2 class="">Technology Portal</h2>
<div class="row row-cols-md-2">
<div class="col col-links">
<div class="card text-left">
<div class="card-body">
<p class="imp-title">Card 1</p>
...
</div>
</div>
</div>
<div class="col col-links">
<div class="card text-left">
<div class="card-body">
<p class="imp-title">Card 2</p>
...
</div>
</div>
</div>
<div class="col col-links">
<div class="card text-left">
<div class="card-body">
<p class="imp-title">Card 3</p>
...
</div>
</div>
</div>
<div class="col col-links">
<div class="card text-left">
<div class="card-body">
<p class="imp-title">Card 4</p>
...
</div>
</div>
</div>
<div class="col col-links">
<div class="card text-left">
<div class="card-body">
<p class="imp-title">Card 5</p>
...
</div>
</div>
</div>
...
</div>
</div>
SOLUTION
Gahan Vig helped me to find the solution.
Here it is:
<style>
.masonry { /* Masonry container */
column-count: 2;
column-gap: 1em;
}
.item { /* Masonry bricks or child elements */
background-color: #eee;
display: inline-block;
margin: 0 0 1em;
width: 100%;
}
</style>
<div class="masonry">
<div class="card item">
<h1>card1</h1>
</div>
<div class="card item">
<h1>card2</h1>
</div>
<div class="card item">
<h1>card3</h1>
</div>
<div class="card item">
<h1>card4</h1>
</div>
<div class="card item">
<h1>card5</h1>
</div>
<div class="card item">
<h1>card6</h1>
</div>
<div class="card item">
<h1>card7</h1>
</div>
<div class="card item">
<h1>card8</h1>
</div>
<div class="card item">
<h1>card9</h1>
</div>
<div class="card item">
<h1>card10</h1>
</div>
</div>
More information here:
https://w3bits.com/css-masonry/

Such type of layout is known as masonry layout. Visit this stackoverflow link to know more how to createa vertical masonry layout
Your finished code after creating the layout will look something like this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<style>
.col-links{
display: inline-block;
margin: 0 0 20px;
page-break-inside: avoid;
break-inside: avoid;
width: 50%;
}
.row{
column-count: 2;
column-gap: 20px;
column-fill: balance;
margin: 20px auto 0;
padding: 2rem;
}
</style>
</head>
<body>
<div class="container-lg">
<h2 class="">Technology Portal</h2>
<div class="row row-cols-md-2 w-100">
<div class="col col-links">
<div class="card text-left">
<div class="card-body">
<p class="imp-title">Card 1</p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus sequi optio explicabo delectus quaerat recusandae consectetur illo eius tempora, aperiam inventore sint fuga eum, error cum corrupti eos iure neque veniam repellat consequatur iusto quae dolor maiores. Similique quisquam nam ducimus ipsum sit quidem consectetur eaque sequi optio non cumque atque eius rerum vitae reprehenderit perferendis, sed eligendi modi inventore architecto sunt labore! Repellat magni eos officia ducimus mollitia vero necessitatibus harum accusantium perferendis explicabo. Dicta quo, sapiente fugit cumque voluptatibus ipsum neque atque, deleniti, debitis tenetur in dolore saepe molestias eum. Eius, error incidunt hic obcaecati vero ipsum nobis.
</div>
</div>
</div>
<div class="col col-links">
<div class="card text-left">
<div class="card-body">
<p class="imp-title">Card 2</p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus maiores corporis placeat magnam laboriosam fugiat ut assumenda, aperiam sequi rerum reprehenderit vitae animi quasi neque error, amet nulla quae ea. Eius, consequuntur enim architecto incidunt facere fuga, nam modi ea, maxime labore nisi nobis eveniet deleniti quia expedita cum blanditiis?
</div>
</div>
</div>
<div class="col col-links">
<div class="card text-left">
<div class="card-body">
<p class="imp-title">Card 3</p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit, dolorum.
</div>
</div>
</div>
<div class="col col-links">
<div class="card text-left">
<div class="card-body">
<p class="imp-title">Card 4</p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sequi provident facilis voluptatem voluptate neque illum temporibus sit beatae, eum id iste possimus eveniet inventore ad quaerat hic, asperiores repellendus quia error debitis mollitia culpa, in delectus rem. Dignissimos voluptates voluptatem ut! Eum adipisci illo aliquam officiis hic doloribus quos odit accusantium dolorem sapiente, esse facilis exercitationem asperiores! Quas, consectetur, corporis eum similique earum quibusdam aliquam maxime temporibus animi, odio ratione nesciunt quaerat. Odit quos atque sit porro quod perspiciatis deleniti!
</div>
</div>
</div>
<div class="col col-links">
<div class="card text-left">
<div class="card-body">
<p class="imp-title">Card 5</p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio labore numquam culpa qui hic id libero soluta illo corporis inventore, deserunt porro corrupti nihil repudiandae.
</div>
</div>
</div>
...
</div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</html>

Mechanize check all radio buttons before form submit

For a school project, I'm trying to scrape the content of multiple choices questions (to study for French SATs.
screenshot of the webpage that I want to scrape
My scraper works. However, the page uses javascript to get the first 5 questions then you need to answer each question and click on a next button then you have access to the 5-10 questions.
In the inspector, I compared the two html doc (before and after clicking on the radiobuttons + next button), I put both files at the end of the post (the first html doc has a form of type="get" while the second has a form of type "post")
Thus, I used the gem Mechanize and tried to click on all inputs and then the button.
Sadly, it doesn't work and I seem to have the same html file before and after running my code using Mechanize.
require 'open-uri'
require 'nokogiri'
require 'json'
require 'mechanize'
url = 'https://www.letudiant.fr/quiz/bac/histoire-geographie/quiz-bac-histoire-geographie-l-es-s-l-asie-du-sud-et-de-l-est-les-enjeux-de-la-croissance/question.html'
agent = Mechanize.new
page = agent.get(url)
form = agent.page.form_with(:class => "c-form")
form.radiobuttons.each do |button|
button.check
end
# check if button.checked?
puts "============"
form.radiobuttons.each do |button|
puts button.checked?
end
puts "============"
puts "************"
page = agent.submit(form)
puts page.parser.text
puts "************"
This returns this in the console: meaning that Mechanize clicked on every radiobutton (each question has 3 radiobuttons, thus mechanize clicks on all of them but only the last one remained clicked (for each question), explaining the false - false - true repetition for each question)like here
============
false
false
true
false
false
true
false
false
true
false
false
true
false
false
true
============
************
#<Mechanize::Page:0x00007fb942c50e38>
Test Quiz Bac L/ES/S - Histoire-Géographie - L'Asie du Sud et de l'Est - L'Etudiant
Quiz Bac Quiz Bac L/ES/S - Histoire-Géographie - L'Asie du Sud et de l'Est Étape 1 Étape 2 1) Mumbai est : Veuillez sélectionner une réponse. a) la capitale politique de l’Union indienne. b) la capitale économique et culturelle de l’Union indienne. c) la capitale culturelle de l’Union indienne. 2) Que sont les slums ? Veuillez sélectionner une réponse. a) Le nom des bidonvilles en Inde. b) Le nom des quartiers aisés en Inde. c) Le nom des décharges en Inde. 3) Comment évolue la population de l’agglomération de Mumbai ? Veuillez sélectionner une réponse. a) Une croissance lente. b) Une stagnation. c) Une croissance rapide. 4) Quelle est la part de la population de l’Asie du Sud et de l’Est dans la population mondiale ? Veuillez sélectionner une réponse. a) 2/3. b) 1/4. c) 1/2. 5) Que signifie « PMA » ? Veuillez sélectionner une réponse. a) Pays mal avancés. b) Pays les moins avancés. c) Pays mal adaptés.
##################
Attention ! Veuillez répondre à toutes les questions.
#######################
Étape suivante Articles les plus lus Bac S 2018 : tous les sujets et corrigés Grand oral du nouveau bac : ce qui vous attend On connaît la liste des œuvres au programme du bac de français 2020 Pourquoi prendre latin ou grec en option en terminale ? Complémentaires ou expertes, à quoi ressembleront les options maths en terminale ? Bac STMG 2018 : tous les sujets et corrigés Nouveau bac : vous aurez les résultats des E3C le 15 mars Que se passera-t-il si vous ratez votre bac en 2020 ? Bac 2019 : les citations à (bien) utiliser à l’épreuve de philo E3C : ce que vous risquez si vous les manquez window._taboola = window._taboola || []; _taboola.push({ mode: 'thumbnails-right-rail', container: 'taboola-right-rail-thumbnails', placement: 'Right Rail Thumbnails', target_type: 'mix' });
Quiz Bac L/ES/S - Histoire-Géographie - L'Asie du Sud et de l'Est
************
The sentence "Attention ! Veuillez répondre à toutes les questions." between ###### in the console, means that Mechanize tried to submit the form but had not clicked on every radiobutton Like here when I try to click without having clicked on the radiobuttons
Here is the code (found in the inspector) before clicking on every radiobutton and clicking on the next button:
<form class="c-form has-error" method="post" data-frm="quiz" data-frm-legacy-final-step-action="/test/quiz/validation.html?time=1583184886" data-frm-init="1">
<div data-sln-scrollnav="" data-eng-scrollable="" class="c-scrollnav has-more-on-right">
<nav class="c-simple-nav c-scrollnav__scroller" data-sln-scroller="">
<ul class=" c-simple-nav__list c-simple-nav__list--progress " data-sln-inner="">
<li class="c-simple-nav__item"> <a class=" c-simple-nav__link is-active is-clickable " href="#" data-frm-legacy-multi-step="Etape 1"> Étape 1 </a> </li>
<li class="c-simple-nav__item"> <a class=" c-simple-nav__link " href="#" data-frm-legacy-multi-step="Etape 2"> Étape 2 </a> </li>
</ul>
</nav>
</div>
<ol class="c-quiz__question-list">
<li class="c-quiz-question has-error" data-frm-validate="[ 'required' ]">
<h5 class="c-quiz-question__title"> 1) Mumbai est : </h5>
<div class="c-block-error">
<div class="c-block-error__title">
<div class="c-block-bubble c-block-bubble--error">
<svg class="c-icon-svg" aria-hidden="true">
<use xlink:href="/svg/etu.sprite.svg#icon-exclamation"></use>
</svg>
</div>
Veuillez sélectionner une réponse.
</div>
</div>
<div class="c-quiz-question__options">
<label class=" c-radio-label u-themed ">
<input type="radio" name="question_21887" value="66881"> <span class="c-radio-label__label"> a) la capitale politique de l’Union indienne. </span>
<div class="c-radio__indicator"></div>
</label>
<label class=" c-radio-label u-themed ">
<input type="radio" name="question_21887" value="66883"> <span class="c-radio-label__label"> b) la capitale économique et culturelle de l’Union indienne. </span>
<div class="c-radio__indicator"></div>
</label>
<label class=" c-radio-label u-themed ">
<input type="radio" name="question_21887" value="66885"> <span class="c-radio-label__label"> c) la capitale culturelle de l’Union indienne. </span>
<div class="c-radio__indicator"></div>
</label>
</div>
</li>
<li class="c-quiz-question has-error" data-frm-validate="[ 'required' ]">
<h5 class="c-quiz-question__title"> 2) Que sont les slums ? </h5>
<div class="c-block-error">
<div class="c-block-error__title">
<div class="c-block-bubble c-block-bubble--error">
<svg class="c-icon-svg" aria-hidden="true">
<use xlink:href="/svg/etu.sprite.svg#icon-exclamation"></use>
</svg>
</div>
Veuillez sélectionner une réponse.
</div>
</div>
<div class="c-quiz-question__options">
<label class=" c-radio-label u-themed ">
<input type="radio" name="question_21889" value="66887"> <span class="c-radio-label__label"> a) Le nom des bidonvilles en Inde. </span>
<div class="c-radio__indicator"></div>
</label>
<label class=" c-radio-label u-themed ">
<input type="radio" name="question_21889" value="66889"> <span class="c-radio-label__label"> b) Le nom des quartiers aisés en Inde. </span>
<div class="c-radio__indicator"></div>
</label>
<label class=" c-radio-label u-themed ">
<input type="radio" name="question_21889" value="66891"> <span class="c-radio-label__label"> c) Le nom des décharges en Inde. </span>
<div class="c-radio__indicator"></div>
</label>
</div>
</li>
<li class="c-quiz-question has-error" data-frm-validate="[ 'required' ]">
<h5 class="c-quiz-question__title"> 3) Comment évolue la population de l’agglomération de Mumbai ? </h5>
<div class="c-block-error">
<div class="c-block-error__title">
<div class="c-block-bubble c-block-bubble--error">
<svg class="c-icon-svg" aria-hidden="true">
<use xlink:href="/svg/etu.sprite.svg#icon-exclamation"></use>
</svg>
</div>
Veuillez sélectionner une réponse.
</div>
</div>
<div class="c-quiz-question__options">
<label class=" c-radio-label u-themed ">
<input type="radio" name="question_21891" value="66893"> <span class="c-radio-label__label"> a) Une croissance lente. </span>
<div class="c-radio__indicator"></div>
</label>
<label class=" c-radio-label u-themed ">
<input type="radio" name="question_21891" value="66895"> <span class="c-radio-label__label"> b) Une stagnation. </span>
<div class="c-radio__indicator"></div>
</label>
<label class=" c-radio-label u-themed ">
<input type="radio" name="question_21891" value="66897"> <span class="c-radio-label__label"> c) Une croissance rapide. </span>
<div class="c-radio__indicator"></div>
</label>
</div>
</li>
<li class="c-quiz-question has-error" data-frm-validate="[ 'required' ]">
<h5 class="c-quiz-question__title"> 4) Quelle est la part de la population de l’Asie du Sud et de l’Est dans la population mondiale ? </h5>
<div class="c-block-error">
<div class="c-block-error__title">
<div class="c-block-bubble c-block-bubble--error">
<svg class="c-icon-svg" aria-hidden="true">
<use xlink:href="/svg/etu.sprite.svg#icon-exclamation"></use>
</svg>
</div>
Veuillez sélectionner une réponse.
</div>
</div>
<div class="c-quiz-question__options">
<label class=" c-radio-label u-themed ">
<input type="radio" name="question_21893" value="66899"> <span class="c-radio-label__label"> a) 2/3. </span>
<div class="c-radio__indicator"></div>
</label>
<label class=" c-radio-label u-themed ">
<input type="radio" name="question_21893" value="66901"> <span class="c-radio-label__label"> b) 1/4. </span>
<div class="c-radio__indicator"></div>
</label>
<label class=" c-radio-label u-themed ">
<input type="radio" name="question_21893" value="66903"> <span class="c-radio-label__label"> c) 1/2. </span>
<div class="c-radio__indicator"></div>
</label>
</div>
</li>
<li class="c-quiz-question has-error" data-frm-validate="[ 'required' ]">
<h5 class="c-quiz-question__title"> 5) Que signifie « PMA » ? </h5>
<div class="c-block-error">
<div class="c-block-error__title">
<div class="c-block-bubble c-block-bubble--error">
<svg class="c-icon-svg" aria-hidden="true">
<use xlink:href="/svg/etu.sprite.svg#icon-exclamation"></use>
</svg>
</div>
Veuillez sélectionner une réponse.
</div>
</div>
<div class="c-quiz-question__options">
<label class=" c-radio-label u-themed ">
<input type="radio" name="question_21895" value="66905"> <span class="c-radio-label__label"> a) Pays mal avancés. </span>
<div class="c-radio__indicator"></div>
</label>
<label class=" c-radio-label u-themed ">
<input type="radio" name="question_21895" value="66907"> <span class="c-radio-label__label"> b) Pays les moins avancés. </span>
<div class="c-radio__indicator"></div>
</label>
<label class=" c-radio-label u-themed ">
<input type="radio" name="question_21895" value="66909"> <span class="c-radio-label__label"> c) Pays mal adaptés. </span>
<div class="c-radio__indicator"></div>
</label>
</div>
</li>
</ol>
<div class="c-form__errors">
<div class="c-block-error">
<div class="c-block-error__title">
<div class="c-block-bubble c-block-bubble--error">
<svg class="c-icon-svg" aria-hidden="true">
<use xlink:href="/svg/etu.sprite.svg#icon-exclamation"></use>
</svg>
</div>
Attention ! Veuillez répondre à toutes les questions.
</div>
</div>
</div>
<input type="hidden" data-frm-legacy-multi-step-input="" name="step"> <input type="hidden" name="previousStep" value=""> <input type="hidden" name="nextStep" value="2"> <input type="hidden" name="idOrigine" value="1"> <input type="hidden" name="legacyFinalStepAction" value="/quiz/bac/histoire-geographie/quiz-bac-histoire-geographie-l-es-s-l-asie-du-sud-et-de-l-est-les-enjeux-de-la-croissance/conclusion.html?time=1583184886" ?="">
<div class="c-quiz__actions">
<button class="c-button c-button--medium c-button--rounded c-button--light-border u-themed is-active u-typo--upper" type="button" data-frm-legacy-multi-step="next">
<span>Étape suivante</span>
<svg class="c-icon-svg">
<use xlink:href="/svg/etu.sprite.svg#icon-chevron-right"></use>
</svg>
</button>
</div>
</form>
Here is the html code that I want to get (found in the inspector after having clicked on every radiobutton and clicking on the next button:
<form class="c-form" method="post" data-frm="quiz" data-frm-legacy-final-step-action="/test/quiz/validation.html?time=1583187387" data-frm-init="1">
<div data-sln-scrollnav="" data-eng-scrollable="" class="c-scrollnav has-more-on-right">
<nav class="c-simple-nav c-scrollnav__scroller" data-sln-scroller="">
<ul class=" c-simple-nav__list c-simple-nav__list--progress " data-sln-inner="">
<li class="c-simple-nav__item"> <a class=" c-simple-nav__link is-clickable " href="#" data-frm-legacy-multi-step="Etape 1"> Étape 1 </a> </li>
<li class="c-simple-nav__item"> <a class=" c-simple-nav__link is-active is-clickable " href="#" data-frm-legacy-multi-step="Etape 2"> Étape 2 </a> </li>
</ul>
</nav>
</div>
<ol class="c-quiz__question-list">
<li class="c-quiz-question" data-frm-validate="[ 'required' ]">
<h5 class="c-quiz-question__title"> 6) Parmi ces trois États, quel est celui dont la population croît la plus vite ? </h5>
<div class="c-block-error">
<div class="c-block-error__title">
<div class="c-block-bubble c-block-bubble--error">
<svg class="c-icon-svg" aria-hidden="true">
<use xlink:href="/svg/etu.sprite.svg#icon-exclamation"></use>
</svg>
</div>
Veuillez sélectionner une réponse.
</div>
</div>
<div class="c-quiz-question__options">
<label class=" c-radio-label u-themed ">
<input type="radio" name="question_21897" value="66911"> <span class="c-radio-label__label"> a) L’Inde. </span>
<div class="c-radio__indicator"></div>
</label>
<label class=" c-radio-label u-themed ">
<input type="radio" name="question_21897" value="66913"> <span class="c-radio-label__label"> b) Le Japon. </span>
<div class="c-radio__indicator"></div>
</label>
<label class=" c-radio-label u-themed ">
<input type="radio" name="question_21897" value="66915"> <span class="c-radio-label__label"> c) La Chine. </span>
<div class="c-radio__indicator"></div>
</label>
</div>
</li>
<li class="c-quiz-question" data-frm-validate="[ 'required' ]">
<h5 class="c-quiz-question__title"> 7) Lequel de ces États est une démocratie ? </h5>
<div class="c-block-error">
<div class="c-block-error__title">
<div class="c-block-bubble c-block-bubble--error">
<svg class="c-icon-svg" aria-hidden="true">
<use xlink:href="/svg/etu.sprite.svg#icon-exclamation"></use>
</svg>
</div>
Veuillez sélectionner une réponse.
</div>
</div>
<div class="c-quiz-question__options">
<label class=" c-radio-label u-themed ">
<input type="radio" name="question_21899" value="66917"> <span class="c-radio-label__label"> a) La Chine. </span>
<div class="c-radio__indicator"></div>
</label>
<label class=" c-radio-label u-themed ">
<input type="radio" name="question_21899" value="66919"> <span class="c-radio-label__label"> b) L’Inde. </span>
<div class="c-radio__indicator"></div>
</label>
<label class=" c-radio-label u-themed ">
<input type="radio" name="question_21899" value="66921"> <span class="c-radio-label__label"> c) La Corée du Nord. </span>
<div class="c-radio__indicator"></div>
</label>
</div>
</li>
<li class="c-quiz-question" data-frm-validate="[ 'required' ]">
<h5 class="c-quiz-question__title"> 8) Les relations économiques entre la Chine et le Japon se caractérisent par : </h5>
<div class="c-block-error">
<div class="c-block-error__title">
<div class="c-block-bubble c-block-bubble--error">
<svg class="c-icon-svg" aria-hidden="true">
<use xlink:href="/svg/etu.sprite.svg#icon-exclamation"></use>
</svg>
</div>
Veuillez sélectionner une réponse.
</div>
</div>
<div class="c-quiz-question__options">
<label class=" c-radio-label u-themed ">
<input type="radio" name="question_21901" value="66923"> <span class="c-radio-label__label"> a) des conflits. </span>
<div class="c-radio__indicator"></div>
</label>
<label class=" c-radio-label u-themed ">
<input type="radio" name="question_21901" value="66925"> <span class="c-radio-label__label"> b) de la concurrence. </span>
<div class="c-radio__indicator"></div>
</label>
<label class=" c-radio-label u-themed ">
<input type="radio" name="question_21901" value="66927"> <span class="c-radio-label__label"> c) de la complémentarité. </span>
<div class="c-radio__indicator"></div>
</label>
</div>
</li>
<li class="c-quiz-question" data-frm-validate="[ 'required' ]">
<h5 class="c-quiz-question__title"> 9) À quelle instance la Chine refuse-t-elle la candidature du Japon ? </h5>
<div class="c-block-error">
<div class="c-block-error__title">
<div class="c-block-bubble c-block-bubble--error">
<svg class="c-icon-svg" aria-hidden="true">
<use xlink:href="/svg/etu.sprite.svg#icon-exclamation"></use>
</svg>
</div>
Veuillez sélectionner une réponse.
</div>
</div>
<div class="c-quiz-question__options">
<label class=" c-radio-label u-themed ">
<input type="radio" name="question_21903" value="66929"> <span class="c-radio-label__label"> a) L’ONU. </span>
<div class="c-radio__indicator"></div>
</label>
<label class=" c-radio-label u-themed ">
<input type="radio" name="question_21903" value="66931"> <span class="c-radio-label__label"> b) L’OMC. </span>
<div class="c-radio__indicator"></div>
</label>
<label class=" c-radio-label u-themed ">
<input type="radio" name="question_21903" value="66933"> <span class="c-radio-label__label"> c) Le Conseil de sécurité de l’ONU. </span>
<div class="c-radio__indicator"></div>
</label>
</div>
</li>
<li class="c-quiz-question" data-frm-validate="[ 'required' ]">
<h5 class="c-quiz-question__title"> 10) Quel État est chargé d’assurer la protection militaire du Japon ? </h5>
<div class="c-block-error">
<div class="c-block-error__title">
<div class="c-block-bubble c-block-bubble--error">
<svg class="c-icon-svg" aria-hidden="true">
<use xlink:href="/svg/etu.sprite.svg#icon-exclamation"></use>
</svg>
</div>
Veuillez sélectionner une réponse.
</div>
</div>
<div class="c-quiz-question__options">
<label class=" c-radio-label u-themed ">
<input type="radio" name="question_21905" value="66935"> <span class="c-radio-label__label"> a) Le Royaume-Uni. </span>
<div class="c-radio__indicator"></div>
</label>
<label class=" c-radio-label u-themed ">
<input type="radio" name="question_21905" value="66937"> <span class="c-radio-label__label"> b) Les États-Unis. </span>
<div class="c-radio__indicator"></div>
</label>
<label class=" c-radio-label u-themed ">
<input type="radio" name="question_21905" value="66939"> <span class="c-radio-label__label"> c) La Chine. </span>
<div class="c-radio__indicator"></div>
</label>
</div>
</li>
</ol>
<div class="c-form__errors">
<div class="c-block-error">
<div class="c-block-error__title">
<div class="c-block-bubble c-block-bubble--error">
<svg class="c-icon-svg" aria-hidden="true">
<use xlink:href="/svg/etu.sprite.svg#icon-exclamation"></use>
</svg>
</div>
Attention ! Veuillez répondre à toutes les questions.
</div>
</div>
</div>
Edit: I added some code and details to be more precise, I hope my problem is easier to understand.

I discovered and used Selenium to act as browser and thus perform the actions I asked it to do. It kind of works, and I managed to have access to the rest of the page:
require "selenium-webdriver"
driver = Selenium::WebDriver.for :chrome
url = "https://www.letudiant.fr/quiz/bac/histoire-geographie/quiz-bac-histoire-geographie-l-es-s-l-asie-du-sud-et-de-l-est-les-enjeux-de-la-croissance/question.html"
driver.navigate.to url
driver.manage.window.maximize
sleep(3)
wait = Selenium::WebDriver::Wait.new(:timeout => 30)
name = wait.until {
container = driver.find_elements(:class, "c-quiz-question")
container.each do |element|
puts element.text
end
puts "=========="
radio_buttons = driver.find_elements(:class, "c-radio-label")
radio_buttons.each do |button|
button.click
end
puts "========="
driver.find_element(:class, "c-button").click
}
These are the results in the console:
1) Mumbai est :
a) la capitale politique de l’Union indienne.
b) la capitale économique et culturelle de l’Union indienne.
c) la capitale culturelle de l’Union indienne.
2) Que sont les slums ?
a) Le nom des bidonvilles en Inde.
b) Le nom des quartiers aisés en Inde.
c) Le nom des décharges en Inde.
3) Comment évolue la population de l’agglomération de Mumbai ?
a) Une croissance lente.
b) Une stagnation.
c) Une croissance rapide.
4) Quelle est la part de la population de l’Asie du Sud et de l’Est dans la population mondiale ?
a) 2/3.
b) 1/4.
c) 1/2.
5) Que signifie « PMA » ?
a) Pays mal avancés.
b) Pays les moins avancés.
c) Pays mal adaptés.
==========
=========
6) Parmi ces trois États, quel est celui dont la population croît la plus vite ?
a) L’Inde.
b) Le Japon.
c) La Chine.
7) Lequel de ces États est une démocratie ?
a) La Chine.
b) L’Inde.
c) La Corée du Nord.
8) Les relations économiques entre la Chine et le Japon se caractérisent par :
a) des conflits.
b) de la concurrence.
c) de la complémentarité.
9) À quelle instance la Chine refuse-t-elle la candidature du Japon ?
a) L’ONU.
b) L’OMC.
c) Le Conseil de sécurité de l’ONU.
10) Quel État est chargé d’assurer la protection militaire du Japon ?
a) Le Royaume-Uni.
b) Les États-Unis.
c) La Chine.
==========
However, to do so I had to manually close a pop-up that appears in the Selenium browser and if I don't close it manually, I have a ElementClickInterceptedError that kills my program.
Is there any way to close this pop up with Ruby inside Selenium?
element click intercepted: Element <label class=" c-radio-label u-themed ">...</label> is not clickable at point (476, 499). Other element would receive the click: <div class="sd-cmp-39-hc" style="color: rgb(51, 51, 51);">...</div> (Selenium::WebDriver::Error::ElementClickInterceptedError)

There are more checkboxes on page 2.
The resulting page source code shows 5 answers and 15 checkboxes, but I visited the page and saw 10 questions with 30 checkboxes in total. That's the reason for the French error message that not all checkboxes are ticked.
Check page 1 using the following code:
agent = Mechanize.new
page = agent.get('https://www.letudiant.fr/quiz/bac/histoire-geographie/quiz-bac-histoire-geographie-l-es-s-l-asie-du-sud-et-de-l-est-les-enjeux-de-la-croissance/question.html')
form = agent.page.form_with(:class => "c-form")
puts form.inspect
There are two different forms on the page as you can see if you loop over page.forms and form.fields:
agent = Mechanize.new
page = agent.get('https://www.letudiant.fr/quiz/bac/histoire-geographie/quiz-bac-histoire-geographie-l-es-s-l-asie-du-sud-et-de-l-est-les-enjeux-de-la-croissance/question.html')
agent.page.forms.each do |form|
pp form
form.fields.each do |field|
pp field
end
end
"Getting Started With Mechanize" will help.
You need to click the button on the bottom and then repeat the same action on page 2 before submitting the form.
There does not seem to be an option as the form changes using JavaScript.

Buttom alignment of pictures in af row with different hight

I'm using the part with the 8 images of this template as a photogallery.
Template
But if my images has different heights, they will be aligned so the top of the images will fit each other. I need them to be aligned, so the bottom of the images are aligned.
How can I do that?

My link is showing both code and the templates I use:-) The problem with this code is the vertical align of the 8 images, if they have different hights. They will be aligned so the top of the images fit each other. What I need, is that the 8 images is buttom aligned to each other.
<!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=Karma">
<style>
body,h1,h2,h3,h4,h5,h6 {font-family: "Karma", sans-serif}
.w3-bar-block .w3-bar-item {padding:20px}
</style>
<body>
<!-- Sidebar (hidden by default) -->
<nav class="w3-sidebar w3-bar-block w3-card w3-top w3-xlarge w3-animate- left" style="display:none;z-index:2;width:40%;min-width:300px" id="mySidebar">
<a href="javascript:void(0)" onclick="w3_close()"
class="w3-bar-item w3-button">Close Menu</a>
Food
About
</nav>
<!-- Top menu -->
<div class="w3-top">
<div class="w3-white w3-xlarge" style="max-width:1200px;margin:auto">
<div class="w3-button w3-padding-16 w3-left" onclick="w3_open()">☰</div>
<div class="w3-right w3-padding-16">Mail</div>
<div class="w3-center w3-padding-16">My Food</div>
</div>
</div>
<!-- !PAGE CONTENT! -->
<div class="w3-main w3-content w3-padding" style="max-width:1200px;margin-top:100px">
<!-- First Photo Grid-->
<div class="w3-row-padding w3-padding-16 w3-center" id="food">
<div class="w3-quarter">
<img src="/w3images/sandwich.jpg" alt="Sandwich" style="width:100%">
<h3>The Perfect Sandwich, A Real NYC Classic</h3>
<p>Just some random text, lorem ipsum text praesent tincidunt ipsum lipsum.</p>
</div>
<div class="w3-quarter">
<img src="/w3images/steak.jpg" alt="Steak" style="width:100%">
<h3>Let Me Tell You About This Steak</h3>
<p>Once again, some random text to lorem lorem lorem lorem ipsum text praesent tincidunt ipsum lipsum.</p>
</div>
<div class="w3-quarter">
<img src="/w3images/cherries.jpg" alt="Cherries" style="width:100%">
<h3>Cherries, interrupted</h3>
<p>Lorem ipsum text praesent tincidunt ipsum lipsum.</p>
<p>What else?</p>
</div>
<div class="w3-quarter">
<img src="/w3images/wine.jpg" alt="Pasta and Wine" style="width:100%">
<h3>Once Again, Robust Wine and Vegetable Pasta</h3>
<p>Lorem ipsum text praesent tincidunt ipsum lipsum.</p>
</div>
</div>
<!-- Second Photo Grid-->
<div class="w3-row-padding w3-padding-16 w3-center">
<div class="w3-quarter">
<img src="/w3images/popsicle.jpg" alt="Popsicle" style="width:100%">
<h3>All I Need Is a Popsicle</h3>
<p>Lorem ipsum text praesent tincidunt ipsum lipsum.</p>
</div>
<div class="w3-quarter">
<img src="/w3images/salmon.jpg" alt="Salmon" style="width:100%">
<h3>Salmon For Your Skin</h3>
<p>Once again, some random text to lorem lorem lorem lorem ipsum text praesent tincidunt ipsum lipsum.</p>
</div>
<div class="w3-quarter">
<img src="/w3images/sandwich.jpg" alt="Sandwich" style="width:100%">
<h3>The Perfect Sandwich, A Real Classic</h3>
<p>Just some random text, lorem ipsum text praesent tincidunt ipsum lipsum.</p>
</div>
<div class="w3-quarter">
<img src="/w3images/croissant.jpg" alt="Croissant" style="width:100%">
<h3>Le French</h3>
<p>Lorem lorem lorem lorem ipsum text praesent tincidunt ipsum lipsum.</p>
</div>
</div>
<!-- Pagination -->
<div class="w3-center w3-padding-32">
<div class="w3-bar">
«
1
2
3
4
»
</div>
</div>
<hr id="about">
<!-- About Section -->
<div class="w3-container w3-padding-32 w3-center">
<h3>About Me, The Food Man</h3><br>
<img src="/w3images/chef.jpg" alt="Me" class="w3-image" style="display:block;margin:auto" width="800" height="533">
<div class="w3-padding-32">
<h4><b>I am Who I Am!</b></h4>
<h6><i>With Passion For Real, Good Food</i></h6>
<p>Just me, myself and I, exploring the universe of unknownment. I have a heart f love and an interest of lorem ipsum and mauris neque quam blog. I want to share my world with you. Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla. Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.</p>
</div>
</div>
<hr>
<!-- Footer -->
<footer class="w3-row-padding w3-padding-32">
<div class="w3-third">
<h3>FOOTER</h3>
<p>Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.</p>
<p>Powered by w3.css</p>
</div>
<div class="w3-third">
<h3>BLOG POSTS</h3>
<ul class="w3-ul w3-hoverable">
<li class="w3-padding-16">
<img src="/w3images/workshop.jpg" class="w3-left w3-margin-right" style="width:50px">
<span class="w3-large">Lorem</span><br>
<span>Sed mattis nunc</span>
</li>
<li class="w3-padding-16">
<img src="/w3images/gondol.jpg" class="w3-left w3-margin-right" style="width:50px">
<span class="w3-large">Ipsum</span><br>
<span>Praes tinci sed</span>
</li>
</ul>
</div>
<div class="w3-third w3-serif">
</footer>
<!-- End page content -->
</div>
<script>
// Script to open and close sidebar
function w3_open() {
document.getElementById("mySidebar").style.display = "block";
}
function w3_close() {
document.getElementById("mySidebar").style.display = "none";
}
</script>
</body>
</html>enter code here

WP - Links unclickable IE8 in widget area

I've got links in the simple text widget in my wordpress site. No problem with any browser, except IE8 ( which MUST be massively used in my 1940 company's computer bay ).
I searched. Lot. Can't figure why IE doesn't see it.
Here is the code of the page. It is long. You can find the page there: santemonteregie.net/connivence
Thanks for your help.
<!DOCTYPE html>
<!--[if IE 7]>
<html class="ie ie7" lang="fr-FR">
<![endif]-->
<!--[if IE 8]>
<html class="ie ie8" lang="fr-FR">
<![endif]-->
<!--[if !(IE 7) | !(IE 8) ]><!-->
<html lang="fr-FR">
<!--<![endif]-->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>V-6 No-18 | 16 juin 2014 | Connivence - Le Webzine de la Montérégie</title>
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="http://santemonteregie.net/connivence/xmlrpc.php">
<!--[if lt IE 9]>
<link rel="stylesheet" href="http://www.santemonteregie.net/connivence/style-ie.css">
<script src="http://santemonteregie.net/connivence/wp-content/themes/twentythirteen/js/html5.js"></script>
<![endif]-->
<meta name='robots' content='noindex,follow' />
<link rel="alternate" type="application/rss+xml" title="Connivence - Le Webzine de la Montérégie » Flux" href="http://santemonteregie.net/connivence/feed/" />
<link rel="alternate" type="application/rss+xml" title="Connivence - Le Webzine de la Montérégie » Flux des commentaires" href="http://santemonteregie.net/connivence/comments/feed/" />
<link rel="alternate" type="application/rss+xml" title="Connivence - Le Webzine de la Montérégie » Flux de la catégorie V-6 No-18 | 16 juin 2014" href="http://santemonteregie.net/connivence/category/16juin2014/feed/" />
<link rel='stylesheet' id='twentythirteen-fonts-css' href='//fonts.googleapis.com/css?family=Source+Sans+Pro%3A300%2C400%2C700%2C300italic%2C400italic%2C700italic%7CBitter%3A400%2C700&subset=latin%2Clatin-ext' type='text/css' media='all' />
<link rel='stylesheet' id='genericons-css' href='http://santemonteregie.net/connivence/wp-content/themes/twentythirteen/fonts/genericons.css?ver=2.09' type='text/css' media='all' />
<link rel='stylesheet' id='twentythirteen-style-css' href='http://santemonteregie.net/connivence/wp-content/themes/twentythirteenchild/style.css?ver=2013-07-18' type='text/css' media='all' />
<!--[if lt IE 9]>
<link rel='stylesheet' id='twentythirteen-ie-css' href='http://santemonteregie.net/connivence/wp-content/themes/twentythirteen/css/ie.css?ver=2013-07-18' type='text/css' media='all' />
<![endif]-->
<script type='text/javascript' src='http://santemonteregie.net/connivence/wp-includes/js/jquery/jquery.js?ver=1.11.0'></script>
<script type='text/javascript' src='http://santemonteregie.net/connivence/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1'></script>
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://santemonteregie.net/connivence/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://santemonteregie.net/connivence/wp-includes/wlwmanifest.xml" />
<meta name="generator" content="WordPress 3.9.1" />
<style type="text/css" id="twentythirteen-header-css">
.site-header {
background: url(http://santemonteregie.net/connivence/wp-content/uploads/2014/07/cropped-header6.jpg) no-repeat scroll top;
background-size: 1600px auto;
}
.site-title,
.site-description {
position: absolute;
clip: rect(1px 1px 1px 1px); /* IE7 */
clip: rect(1px, 1px, 1px, 1px);
}
</style>
</head>
<body class="archive category category-16juin2014 category-12 single-author sidebar">
<div style="width:100%; max-width:1600px; min-width:300px;"> <img src="http://www.santemonteregie.net/connivence/images/header-principal.jpg" style="width:100%; height:auto;"> </div>
<div id="page" class="hfeed site">
<header id="masthead" class="site-header" role="banner" style="background-size:auto auto;">
<div id="navbar" class="navbar">
<nav id="site-navigation" class="navigation main-navigation" role="navigation">
<h3 class="menu-toggle">Menu</h3>
<a class="screen-reader-text skip-link" href="#content" title="Aller au contenu principal">Aller au contenu principal</a>
<div class="menu-menu1-container"><ul id="menu-menu1" class="nav-menu"><li id="menu-item-123" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item menu-item-123">Édition courante</li>
<li id="menu-item-117" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-117">Archives</li>
<li id="menu-item-213" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-213">Abonnez-vous</li>
</ul></div> <form role="search" method="get" class="search-form" action="http://santemonteregie.net/connivence/">
<label>
<span class="screen-reader-text">Recherche pour :</span>
<input type="search" class="search-field" placeholder="Recherche…" value="" name="s" title="Recherche pour :" />
</label>
<input type="submit" class="search-submit" value="Rechercher" />
</form> </nav><!-- #site-navigation -->
</div><!-- #navbar -->
</header><!-- #masthead -->
<div id="main" class="site-main">
<style type="text/css" media="all">
.wp-caption-text{
display: none;
}
</style>
<div id="primary" class="content-area">
<div id="content" class="site-content" role="main">
<header>
<center><h2 ><p>Volume 6, numéro 18 – 16 juin 2014</p>
</h2></center>
<!--
<div class="archive-meta"></div>
-->
</header><!-- .archive-header -->
<!-- Début des background selon les catégories -->
<div style="background-color:#e4e3f3;">
<!-- Fin des background selon les catégories -->
<article id="post-107" class="post-107 post type-post status-publish format-standard hentry category-pdg category-16juin2014">
<header class="entry-header">
<h1 class="entry-title">
<!-- Début des en-têtes de catégories -->
<img src="http://santemonteregie.net/connivence/images/PDG3.png" style="width:100%; max-width:600;"><br>
<!-- Fin des en-têtes de catégories -->
Le financement du réseau montérégien : la force du NOUS!
</h1>
<div class="entry-meta">
</div><!-- .entry-meta -->
</header><!-- .entry-header -->
<div class="entry-content">
<p style="color: #333333;">Avant la pause estivale, il m’apparaît important de faire le point sur la situation financière de notre réseau. Nous sommes tous conscients de traverser une crise importante en matière de finances publiques et il ne faut pas être surpris des nouvelles compressions financières imposées à l’ensemble des ministères. Lire la suite →</p>
</div><!-- .entry-content -->
<footer class="entry-meta">
</footer><!-- .entry-meta -->
</article><!-- #post -->
<!-- Fermeture de la div pour les background de catégories -->
</div>
<article><header class="entry-header"><h1 style="color:#eeb111;">Nouvelles</h1></header></article><!-- Début des background selon les catégories -->
<!-- Fin des background selon les catégories -->
<article id="post-103" class="post-103 post type-post status-publish format-standard hentry category-16juin2014">
<header class="entry-header">
<h1 class="entry-title">
<!-- Début des en-têtes de catégories -->
<!-- Fin des en-têtes de catégories -->
Programme pour les grands utilisateurs de l’urgence au CSSS Pierre-Boucher
</h1>
<div class="entry-meta">
</div><!-- .entry-meta -->
</header><!-- .entry-header -->
<!-- Here I took some article off the code to make it shorter -->
<div class="entry-content">
<p style="color: #333333;">Le 5 juin dernier avait lieu la 2e édition du colloque en santé mentale sous le thème « Des idées plein la tête ». Le colloque qui s’est déroulé au Collège de Valleyfield a réuni près de 150 participants issus de tous les milieux (communautaire, institutionnel, municipal, etc.). Lire la suite →</p>
</div><!-- .entry-content -->
<footer class="entry-meta">
</footer><!-- .entry-meta -->
</article><!-- #post -->
<!-- Fermeture de la div pour les background de catégories -->
<!-- Début des background selon les catégories -->
<!-- Fin des background selon les catégories -->
<article id="post-81" class="post-81 post type-post status-publish format-standard hentry category-16juin2014">
<header class="entry-header">
<h1 class="entry-title">
<!-- Début des en-têtes de catégories -->
<!-- Fin des en-têtes de catégories -->
Des jeunes de l’INLB participent à un programme pour faciliter les choix de carrière
</h1>
<div class="entry-meta">
</div><!-- .entry-meta -->
</header><!-- .entry-header -->
<div class="entry-content">
<p style="color: #333333;">Montréal Relève a accepté d’intégrer les jeunes de l’Institut Nazareth et Louis-Braille (INLB) au <a style="color: #525252;" href="http://www.projetclassesaffaires.ca/">Programme classes affaires</a>.</p>
<p style="color: #333333;"></p>
<p style="color: #333333;"> Lire la suite →</p>
</div><!-- .entry-content -->
<footer class="entry-meta">
</footer><!-- .entry-meta -->
</article><!-- #post -->
<!-- Fermeture de la div pour les background de catégories -->
<!-- Début des background selon les catégories -->
<!-- Fin des background selon les catégories -->
<article id="post-79" class="post-79 post type-post status-publish format-standard hentry category-16juin2014">
<header class="entry-header">
<h1 class="entry-title">
<!-- Début des en-têtes de catégories -->
<!-- Fin des en-têtes de catégories -->
Une intégration à la maternelle plus facile grâce à l’INLB
</h1>
<div class="entry-meta">
</div><!-- .entry-meta -->
</header><!-- .entry-header -->
<div class="entry-content">
<p style="color: #333333;">Afin de favoriser une entrée harmonieuse à la maternelle, le Programme enfance-jeunesse propose un groupe de préparation à l’intégration scolaire, pour les enfants fonctionnellement voyants, ainsi que leurs parents. Lire la suite →</p>
</div><!-- .entry-content -->
<footer class="entry-meta">
</footer><!-- .entry-meta -->
</article><!-- #post -->
<!-- Fermeture de la div pour les background de catégories -->
<!-- Début des background selon les catégories -->
<!-- Fin des background selon les catégories -->
<article id="post-76" class="post-76 post type-post status-publish format-standard hentry category-16juin2014">
<header class="entry-header">
<h1 class="entry-title">
<!-- Début des en-têtes de catégories -->
<!-- Fin des en-têtes de catégories -->
Certificat de conformité de l’Office québécois de la langue française délivré au CRDITED SRSOR
</h1>
<div class="entry-meta">
</div><!-- .entry-meta -->
</header><!-- .entry-header -->
<div class="entry-content">
<p style="color: #333333;"></p>
<p style="color: #333333;">C’est avec une grande fierté que le CRDITED Les Services de Réadaptation du Sud-Ouest et du Renfort a reçu le certificat de conformité de l’Office québécois de la langue française. Lire la suite →</p>
</div><!-- .entry-content -->
<footer class="entry-meta">
</footer><!-- .entry-meta -->
</article><!-- #post -->
<!-- Fermeture de la div pour les background de catégories -->
<!-- Début des background selon les catégories -->
<!-- Fin des background selon les catégories -->
<article id="post-73" class="post-73 post type-post status-publish format-standard hentry category-16juin2014">
<header class="entry-header">
<h1 class="entry-title">
<!-- Début des en-têtes de catégories -->
<!-- Fin des en-têtes de catégories -->
La journée mondiale de lutte contre la maltraitance envers les personnes aînées soulignée en Montérégie
</h1>
<div class="entry-meta">
</div><!-- .entry-meta -->
</header><!-- .entry-header -->
<div class="entry-content">
<p class="wp-caption-text">Source : http//:maltraitanceaines.gouv.qc.ca</p>
<p style="color: #333333;">Des travailleurs œuvrant dans les établissements de santé et de services sociaux, au sein des corps policiers, de groupes communautaires et d’associations d’aînés ont porté le ruban mauve le 15 juin dernier afin de dénoncer la maltraitance envers les aînés Lire la suite →</p>
</div><!-- .entry-content -->
<footer class="entry-meta">
</footer><!-- .entry-meta -->
</article><!-- #post -->
<!-- Fermeture de la div pour les background de catégories -->
<!-- Début des background selon les catégories -->
<!-- Fin des background selon les catégories -->
<article id="post-71" class="post-71 post type-post status-publish format-standard hentry category-16juin2014">
<header class="entry-header">
<h1 class="entry-title">
<!-- Début des en-têtes de catégories -->
<!-- Fin des en-têtes de catégories -->
Une route sans fin au Centre jeunesse de la Montérégie : 10 ans déjà!
</h1>
<div class="entry-meta">
</div><!-- .entry-meta -->
</header><!-- .entry-header -->
<div class="entry-content">
<p style="color: #333333;">Le 1er juin dernier, c’est sous un soleil rayonnant que plus de 250 jeunes et intervenants du Centre jeunesse de la Montérégie ont participé à la 10e édition d’Une route sans fin. Lire la suite →</p>
</div><!-- .entry-content -->
<footer class="entry-meta">
</footer><!-- .entry-meta -->
</article><!-- #post -->
<!-- Fermeture de la div pour les background de catégories -->
<!-- Début des background selon les catégories -->
<!-- Fin des background selon les catégories -->
<article id="post-68" class="post-68 post type-post status-publish format-standard hentry category-16juin2014">
<header class="entry-header">
<h1 class="entry-title">
<!-- Début des en-têtes de catégories -->
<!-- Fin des en-têtes de catégories -->
Bonnes vacances!
</h1>
<div class="entry-meta">
</div><!-- .entry-meta -->
</header><!-- .entry-header -->
<div class="entry-content">
<p style="color: #333333;">Connivence fait relâche pour la période estivale. Lire la suite →</p>
</div><!-- .entry-content -->
<footer class="entry-meta">
</footer><!-- .entry-meta -->
</article><!-- #post -->
<!-- Fermeture de la div pour les background de catégories -->
</div><!-- #content -->
</div><!-- #primary -->
<div id="tertiary" class="sidebar-container" role="complementary">
<div class="sidebar-inner">
<div class="widget-area">
<aside id="text-13" class="widget widget_text"> <div class="textwidget"><div style="z-index:100000000;" class="widget2"> <img src="http://www.santemonteregie.net/connivence/images/evenements.png"></center><ul class="display-posts-listing"><li class="listing-item"><a class="title" href="http://santemonteregie.net/connivence/visite-guidee-des-fermes-de-la-monteregie/"><span style="z-index:1000;">Visite guidée des fermes de la Montérégie<br><p>Une journée spéciale dédiée aux fermes montérégiennes a été organisée pas l’Agence de la santé et des services sociaux de la Montérégie. Lire la suite -></p>
</span></a></li><li class="listing-item"><a class="title" href="http://santemonteregie.net/connivence/colloque-drmg2014/"><span style="z-index:1000;">Colloque DRMG 2014<br><p>Le colloque DRMG 2014 aura lieu, encore une fois, dans une foule de gens très intéressés. Lire la suite -></p>
</span></a></li></ul></div></div>
</aside><aside id="text-12" class="widget widget_text"> <div class="textwidget"><div style="z-index:100000000;" class="widget2"> <img src="http://www.santemonteregie.net/connivence/images/BP-widget.png"></center><ul class="display-posts-listing"><li class="listing-item"><a class="title" href="http://santemonteregie.net/connivence/les-tiques/"><span style="z-index:1000;">Les tiques !<br><p>Il est généralement important de garder les tiques lorsque nous les trouvons. Par contre, pour des raisons hors de notre contrôle ( sic), la procédure ne peut pas être faite correctement. Lire la suite -></p>
</span></a></li></ul></div></div>
</aside><aside id="text-11" class="widget widget_text"> <div class="textwidget"><div style="z-index:100000000;" class="widget2"> <img src="http://www.santemonteregie.net/connivence/images/PR-widget.png"></center><ul class="display-posts-listing"><li class="listing-item"><a class="title" href="http://santemonteregie.net/connivence/grand-projet-514-450/"><span style="z-index:1000;">Grand projet 514-450<br><p>Comme vous le savez peut-être, le grand projet 514-450 bat son plein en ce moment. Lire la suite -></p>
</span></a></li></ul></div></div>
</aside><aside id="text-10" class="widget widget_text"> <div class="textwidget"><div class="widget2">
<img src="http://www.santemonteregie.net/connivence/images/COMM-widget.png">
<table border="0">
<tr>
<td><form name="form1" method="post" action="send_contact.php">
<table border="0">
<tr>
<td>Nom</td>
<td>:</td>
<td><input name="name" type="text" id="name" size="18"></td>
</tr>
<tr>
<td>Courriel</td>
<td>:</td>
<td><input name="customer_mail" type="text" id="customer_mail" size="18"></td>
</tr>
<tr>
<td>Message</td>
<td>:</td>
<td><textarea name="detail" cols="18" rows="4" id="detail"></textarea></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td><input type="submit" name="Submit" value="Envoyer"></td>
</tr>
</table>
</form>
</td>
</tr>
</table>
</div></div>
</aside> </div><!-- .widget-area -->
</div><!-- .sidebar-inner -->
</div><!-- #tertiary -->
</div><!-- #main -->
<footer id="colophon" class="site-footer" role="contentinfo">
<div id="secondary" class="sidebar-container" role="complementary">
<div class="widget-area">
<aside id="newsletterwidget-2" class="widget widget_newsletterwidget"><h3 class="widget-title">Abonnez-vous à Connivence</h3>
<script type="text/javascript">
//<![CDATA[
if (typeof newsletter_check !== "function") {
window.newsletter_check = function (f) {
var re = /^([a-zA-Z0-9_\.\-\+])+\#(([a-zA-Z0-9\-]{1,})+\.)+([a-zA-Z0-9]{2,})+$/;
if (!re.test(f.elements["ne"].value)) {
alert("Le courriel n\'est pas valide");
return false;
}
if (f.elements["nn"] && (f.elements["nn"].value == "" || f.elements["nn"].value == f.elements["nn"].defaultValue)) {
alert("Le nom n\'es pas valide");
return false;
}
if (f.elements["ny"] && !f.elements["ny"].checked) {
alert("Vous devez accepter les règlements de confidentialité");
return false;
}
return true;
}
}
//]]>
</script>
<div class="newsletter newsletter-widget">
<script type="text/javascript">
//<![CDATA[
if (typeof newsletter_check !== "function") {
window.newsletter_check = function (f) {
var re = /^([a-zA-Z0-9_\.\-\+])+\#(([a-zA-Z0-9\-]{1,})+\.)+([a-zA-Z0-9]{2,})+$/;
if (!re.test(f.elements["ne"].value)) {
alert("Le courriel n\'est pas valide");
return false;
}
if (f.elements["nn"] && (f.elements["nn"].value == "" || f.elements["nn"].value == f.elements["nn"].defaultValue)) {
alert("Le nom n\'es pas valide");
return false;
}
if (f.elements["ny"] && !f.elements["ny"].checked) {
alert("Vous devez accepter les règlements de confidentialité");
return false;
}
return true;
}
}
//]]>
</script>
<form action="http://santemonteregie.net/connivence/wp-content/plugins/newsletter/do/subscribe.php" onsubmit="return newsletter_check(this)" method="post"><input type="hidden" name="nr" value="widget"/><p><input class="newsletter-firstname" type="text" name="nn" value="Nom" onclick="if (this.defaultValue==this.value) this.value=''" onblur="if (this.value=='') this.value=this.defaultValue"/></p><p><input class="newsletter-email" type="email" required name="ne" value="Courriel" onclick="if (this.defaultValue==this.value) this.value=''" onblur="if (this.value=='') this.value=this.defaultValue"/></p><p><input class="newsletter-profile newsletter-profile-1" type="text" name="np1" value="Établissement" onclick="if (this.defaultValue==this.value) this.value=''" onblur="if (this.value=='') this.value=this.defaultValue"/></p><p><input class="newsletter-profile newsletter-profile-2" type="text" name="np2" value="Fonction" onclick="if (this.defaultValue==this.value) this.value=''" onblur="if (this.value=='') this.value=this.defaultValue"/></p><p><input class="newsletter-submit" type="submit" value="Envoyer"/></p></form></div></aside><aside id="text-2" class="widget widget_text"><h3 class="widget-title">À propos de Connivence</h3> <div class="textwidget"><p>Connivence paraît tous les deux lundis<br />
Tombée : le mardi précédant la parution</p>
<p>Suggestion de sujets ou commentaires : chantal.vallee.agence16#ssss.gouv.qc.ca </p>
<p>Toute reproduction des textes est encouragée à condition de mentionner la source. </p>
</div>
</aside><aside id="text-8" class="widget widget_text"> <div class="textwidget"><p><br><br />
Éditeur : Agence de la santé et des services sociaux de la Montérégie<br />
Rédactrice en chef : Christine Daniel<br />
Coordonnatrice à la rédaction : Chantal Vallée<br />
Correction des textes : Lynn Provost</p>
</div>
</aside> </div><!-- .widget-area -->
</div><!-- #secondary -->
<div class="site-info">
Fièrement propulsé par WordPress
</div><!-- .site-info -->
</footer><!-- #colophon -->
</div><!-- #page -->
<script type='text/javascript' src='http://santemonteregie.net/connivence/wp-includes/js/masonry.min.js?ver=3.1.2'></script>
<script type='text/javascript' src='http://santemonteregie.net/connivence/wp-includes/js/jquery/jquery.masonry.min.js?ver=3.1.2'></script>
<script type='text/javascript' src='http://santemonteregie.net/connivence/wp-content/themes/twentythirteen/js/functions.js?ver=2013-07-18'></script>
</body>
</html>

Rails page asset stylesheets not loading

I have recently completed the One Month Rails tutorial and wanted to start customizing my design. I went ahead and purchase a theme off WrapBootstrap and have completed the following:
Added Javascript/CSS to Vendor folder
Included all images needed in Vendor folder
Updated manifest file to include any new javascript or stylesheets
For whatever reason it appears bootstrap is not being loaded properly when I attempt to access any page besides the index page.
For example: my users/sign up page which I customized the Devise View no longer inherits any of the styling previously used. What I want to accomplish is to have the index page load the WrapBootstrap theme and then for my other pages to load just as they previously did prior to messing with anything.
I understand that Heroku has special ways in handing the asset pipeline and hard coding assets is not the proper way of doing things. However, my styling is not functional on my local environment either.
Application.css:
/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
* or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the top of the
* compiled file, but it's generally better to create a new file per style scope.
*
*= require_self
*= require 'masonry/transitions'
*= require 'style.css'
*= require 'bootstrap.css'
*= require 'bootstrap.min.css'
*= require 'overwrite.css'
*= require 'animate.css'
*= require 'font-awesome.min.css'
*= require 'theme.css'
*= require 'simpletextrotator.css'
*= require 'default.css'
*= require_tree .
Application.js
// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file.
//
// Read Sprockets README (https://github.com/sstephenson/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require jquery.turbolinks
//= require turbolinks
//= require masonry/jquery.masonry
//= require jquery.js
//= require bootstrap.min.js
//= require custom.js
//= require wow.min.js
//= require mb.bgndGallery.js
//= require jquery.simple-text-rotator.min.js
//= require jquery.scrollTo.js
//= require jquery.nav.js
//= require modernizr.custom.js
//= require grid.js
//= require stellar.js
//= require_tree .
Home Page View:
<!DOCTYPE html>
<html>
<head>
<title>Alstar - Bootstrap 3 one page template</title>
<meta charset="utf-8" />
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<!-- css -->
<link href="/assets//bootstrap.min.css" rel="stylesheet" media="screen">
<link href="/assets/style.css" rel="stylesheet" media="screen">
</head>
<body>
<!-- intro area -->
<div id="intro">
<div class="intro-text">
<div class="container">
<div class="col-md-12">
<div id="rotator">
<h1><span class="1strotate">We are changing the World.</span></h1>
<div class="line-spacer"></div>
<p><span class="2ndrotate">We connect brands with donation opportunities that empower their users.</span></p>
</div>
<div class="arrow-wrap"><a class="arrow-down scroll" href="#home-top"></a></div>
<br>
<br>
</div>
</div>
</div>
</div>
<!-- Services -->
<section id="services" class="home-section bg-white">
<div class="container">
<div class="row">
<div style="width: 100%;">
<div style="float: left; width: 33%;"><p><%= link_to "I'm a Charity", new_user_registration_path, class: "btn-primary-red btn-lg" %></p></div>
<div style="float: left; width: 33%;"><p><%= link_to "I'm a Donor", new_user_registration_path, class: "btn-primary-red btn-lg" %></p></div>
<div style="float: left; width: 33%;"><p><a class="btn-primary-red btn-lg" href="#about" role="button">I'm a Merchant</a></p></div>
<br style="clear: left;" />
</div>
<br>
<br>
<div class="col-md-offset-2 col-md-8">
<div class="section-heading">
<h2>Services</h2>
<div class="heading-line"></div>
<p>We’ve been building unique digital products, platforms, and experiences for the past 6 years.</p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div id="carousel-service" class="service carousel slide">
<!-- slides -->
<div class="carousel-inner">
<div class="item active">
<div class="row">
<div class="col-sm-12 col-md-offset-1 col-md-6">
<div class="wow bounceInLeft">
<h4>Website Design</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</p>
</div>
</div>
<div class="col-sm-12 col-md-5">
<div class="screenshot wow bounceInRight">
<img src="/assets/screenshots/1.png" class="img-responsive" alt="" />
</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-sm-12 col-md-offset-1 col-md-6">
<div class="wow bounceInLeft">
<h4>Brand Identity</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</p>
</div>
</div>
<div class="col-sm-12 col-md-5">
<div class="screenshot wow bounceInRight">
<img src="/assets/screenshots/2.png" class="img-responsive" alt="" />
</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-sm-12 col-md-offset-1 col-md-6">
<div class="wow bounceInLeft">
<h4>Web & Mobile Apps</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</p>
</div>
</div>
<div class="col-sm-12 col-md-5">
<div class="screenshot wow bounceInRight">
<img src="/assets/screenshots/3.png" class="img-responsive" alt="" />
</div>
</div>
</div>
</div>
</div>
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-service" data-slide-to="0" class="active"></li>
<li data-target="#carousel-service" data-slide-to="1"></li>
<li data-target="#carousel-service" data-slide-to="2"></li>
</ol>
</div>
</div>
</div>
</div>
</section>
<!-- About -->
<section id="about" class="home-section bg-red">
<div class="container">
<div class="row">
<div class="col-md-offset-2 col-md-8">
<div class="section-heading">
<br>
<br>
<br>
<h2>About us</h2>
<div class="heading-line"></div>
<p>We’ve been building a beutiful checkout process that connects merchants with their loyal customers.</p>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-3 col-md-3 col-lg-3">
<div class="box-team wow bounceInDown" data-wow-delay="0.1s">
<img src="/assets/team/1.jpg" alt="" class="img-circle img-responsive" />
<h4>Dominique Vroslav</h4>
<p>Art Director</p>
</div>
</div>
<div class="col-xs-12 col-sm-3 col-md-3 col-lg-3" data-wow-delay="0.3s">
<div class="box-team wow bounceInDown">
<img src="/assets/team/2.jpg" alt="" class="img-circle img-responsive" />
<h4>Thomas Jeffersonn</h4>
<p>Web Designer</p>
</div>
</div>
<div class="col-xs-12 col-sm-3 col-md-3 col-lg-3" data-wow-delay="0.5s">
<div class="box-team wow bounceInDown">
<img src="/assets/team/3.jpg" alt="" class="img-circle img-responsive" />
<h4>Nola Maurin</h4>
<p>Illustrator</p>
</div>
</div>
<div class="col-xs-12 col-sm-3 col-md-3 col-lg-3" data-wow-delay="0.7s">
<div class="box-team wow bounceInDown">
<img src="/assets/team/4.jpg" alt="" class="img-circle img-responsive" />
<h4>Mira Ladovic</h4>
<p>Typographer</p>
</div>
</div>
</div>
</div>
</section>
<!-- Parallax 1 -->
<section id="parallax1" class="home-section parallax" data-stellar-background-ratio="0.5">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="color-light">
<h2 class="wow bounceInDown" data-wow-delay="1s">Details are the key for perfection</h2>
<p class="lead wow bounceInUp" data-wow-delay="2s">We mix all detailed things together</p>
</div>
</div>
</div>
</div>
</section>
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-service" data-slide-to="0" class="active"></li>
<li data-target="#carousel-service" data-slide-to="1"></li>
<li data-target="#carousel-service" data-slide-to="2"></li>
</ol>
</div>
</div>
</div>
</div>
</section>
<!-- Works -->
<section id="portfolio" class="home-section bg-gray">
<div class="container">
<div class="row">
<div class="col-md-offset-2 col-md-8">
<div class="section-heading">
<h2>Works</h2>
<div class="heading-line"></div>
<p>We’ve been building unique digital products, platforms, and experiences for the past 6 years.</p>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<ul id="og-grid" class="og-grid">
<li>
<a href="#" data-largesrc="/assets/works/1.jpg" data-title="Portfolio title" data-description="Duo te dico volutpat, unum elit oblique per id. Ne duo mollis sapientem intellegebat. Per at augue vidisse percipit, pri vocibus assueverit interesset ut, no dolore luptatum incorrupte nec. In mentitum forensibus nec, nibh eripuit ut pri, tale illud voluptatum ut sea. Sed oratio repudiare ei, cum an magna labitur, eu atqui augue mei. Pri consul detracto eu, solet nusquam accusam ex vim, an movet interesset necessitatibus mea.">
<img src="/assets/works/thumbs/1.jpg" alt=""/>
</a>
</li>
<li>
<a href="#" data-largesrc="/assets/works/2.jpg" data-title="Portfolio title" data-description="Mea an eros periculis dignissim, quo mollis nostrum elaboraret et. Id quem perfecto mel, no etiam perfecto qui. No nisl legere recusabo nam, ius an tale pericula evertitur, dicat phaedrum qui in. Usu numquam legendos in, voluptaria sadipscing ut vel. Eu eum mandamus volutpat gubergren, eos ad detracto nominati, ne eum idque elitr aliquam.">
<img src="/assets/works/thumbs/2.jpg" alt=""/>
</a>
</li>
<li>
<a href="#" data-largesrc="/assets/works/3.jpg" data-title="Portfolio title" data-description="Vim ad persecuti appellantur. Eam ignota deterruisset eu, in omnis fierent convenire sed. Ne nulla veritus vel, liber euripidis in eos. Postea comprehensam vis in, detracto deseruisse mei ea. Ex sadipscing deterruisset concludaturque quo.">
<img src="/assets/works/thumbs/3.jpg" alt="img01"/>
</a>
</li>
<li>
<a href="#" data-largesrc="/assets/works/4.jpg" data-title="Portfolio title" data-description="In mentitum forensibus nec, nibh eripuit ut pri, tale illud voluptatum ut sea. Sed oratio repudiare ei, cum an magna labitur, eu atqui augue mei. Pri consul detracto eu, solet nusquam accusam ex vim, an movet interesset necessitatibus mea.">
<img src="/assets/works/thumbs/4.jpg" alt="img01"/>
</a>
</li>
<li>
<a href="#" data-largesrc="assets/works/5.jpg" data-title="Portfolio title" data-description="Duo te dico volutpat, unum elit oblique per id. Ne duo mollis sapientem intellegebat. Per at augue vidisse percipit, pri vocibus assueverit interesset ut, no dolore luptatum incorrupte nec. In mentitum forensibus nec, nibh eripuit ut pri, tale illud voluptatum ut sea">
<img src="assets/works/thumbs/5.jpg" alt="img01"/>
</a>
</li>
<li>
<a href="#" data-largesrc="assets/works/6.jpg" data-title="Portfolio title" data-description="Id elit saepe pro. In atomorum constituam definitionem quo, at torquatos sadipscing eum, ut eum wisi meis mentitum. Probo feugiat ea duo. An usu platonem instructior, qui dolores inciderint ad. Te elit essent mea, vim ne atqui legimus invenire, ad dolor vitae sea.">
<img src="assets/works/thumbs/6.jpg" alt="img01"/>
</a>
</li>
<li>
<a href="#" data-largesrc="assets/works/7.jpg" data-title="Portfolio title" data-description="Duo te dico volutpat, unum elit oblique per id. Ne duo mollis sapientem intellegebat. Per at augue vidisse percipit, pri vocibus assueverit interesset ut, no dolore luptatum incorrupte nec. In mentitum forensibus nec, nibh eripuit ut pri, tale illud voluptatum ut sea. Sed oratio repudiare ei, cum an magna labitur, eu atqui augue mei.">
<img src="assets/works/thumbs/7.jpg" alt="img01"/>
</a>
</li>
<li>
<a href="#" data-largesrc="asssets/works/8.jpg" data-title="Portfolio title" data-description="No nisl legere recusabo nam, ius an tale pericula evertitur, dicat phaedrum qui in. Usu numquam legendos in, voluptaria sadipscing ut vel. Eu eum mandamus volutpat gubergren, eos ad detracto nominati, ne eum idque elitr aliquam.">
<img src="assets/works/thumbs/8.jpg" alt="img01"/>
</a>
</li>
<li>
<a href="#" data-largesrc="assets/works/9.jpg" data-title="Portfolio title" data-description="Lorem ipsum dolor sit amet, ex pri quod ferri fastidii. Mazim philosophia eum ad, facilisis laboramus te est. Eam magna fabellas ut. Ne vis diceret accumsan salutandi, pro in impedit accusamus dissentias, ut nonumy eloquentiam ius.">
<img src="assets/works/thumbs/9.jpg" alt="img01"/>
</a>
</li>
<li>
<a href="#" data-largesrc="assets/works/10.jpg" data-title="Portfolio title" data-description="Duo te dico volutpat, unum elit oblique per id. Ne duo mollis sapientem intellegebat. Per at augue vidisse percipit, pri vocibus assueverit interesset ut, no dolore luptatum incorrupte nec. In mentitum forensibus nec, nibh eripuit ut pri, tale illud voluptatum ut sea. Sed oratio repudiare ei, cum an magna labitur, eu atqui augue mei. Pri consul detracto eu, solet nusquam accusam ex vim.">
<img src="assets/works/thumbs/10.jpg" alt="img01"/>
</a>
</li>
<li>
<a href="#" data-largesrc="assets/works/11.jpg" data-title="Portfolio title" data-description="Vim ad persecuti appellantur. Eam ignota deterruisset eu, in omnis fierent convenire sed. Ne nulla veritus vel, liber euripidis in eos. Postea comprehensam vis in, detracto deseruisse mei ea. Ex sadipscing deterruisset concludaturque quo.">
<img src="assets/works/thumbs/11.jpg" alt="img01"/>
</a>
</li>
<li>
<a href="#" data-largesrc="assets/works/12.jpg" data-title="Portfolio title" data-description="Mea an eros periculis dignissim, quo mollis nostrum elaboraret et. Id quem perfecto mel, no etiam perfecto qui. No nisl legere recusabo nam, ius an tale pericula evertitur, dicat phaedrum qui in. Usu numquam legendos in, voluptaria sadipscing ut vel. Eu eum mandamus volutpat gubergren, eos ad detracto nominati, ne eum idque elitr aliquam.">
<img src="assets/works/thumbs/12.jpg" alt="img01"/>
</a>
</li>
</ul>
</div>
</div>
</div>
</section>
<!-- Parallax 2 -->
<section id="parallax2" class="home-section parallax" data-stellar-background-ratio="0.5">
<div class="container">
<div class="row">
<div class="col-md-12">
<ul class="clients">
<li class="wow fadeInDown" data-wow-delay="0.3s"><img src="assets/clients/1.png" alt="" /></li>
<li class="wow fadeInDown" data-wow-delay="0.6s"><img src="assets/clients/2.png" alt="" /></li>
<li class="wow fadeInDown" data-wow-delay="0.9s"><img src="assets/clients/3.png" alt="" /></li>
<li class="wow fadeInDown" data-wow-delay="1.1s"><img src="assets/clients/4.png" alt="" /></li>
</ul>
</div>
</div>
</div>
</section>
<!-- Contact -->
<section id="contact" class="home-section bg-white">
<div class="container">
<div class="row">
<div class="col-md-offset-2 col-md-8">
<div class="section-heading">
<h2>Contact us</h2>
<div class="heading-line"></div>
<p>If you have any question or just want to say 'hello' to Alstar web studio please
fill out form below and we will be get in touch with you within 24 hours. </p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-offset-2 col-md-8">
<form class="form-horizontal" role="form">
<div class="form-group">
<div class="col-md-offset-2 col-md-8">
<input type="text" class="form-control" id="inputName" placeholder="Name">
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-8">
<input type="email" class="form-control" id="inputEmail" placeholder="Email">
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-8">
<input type="text" class="form-control" id="inputSubject" placeholder="Subject">
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-8">
<textarea name="message" class="form-control" rows="3" placeholder="Message"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-8">
<button type="button" class="btn btn-theme btn-lg btn-block">Send message</button>
</div>
</div>
</form>
</div>
</div>
</div>
</section>
<!-- Footer
================================================== -->
<footer id="contact" class="footer">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="col-sm-3 col-md-3">
<div class="footer-logo">
<h2>Prestige</h2>
<p>1024 Main Street, Vancouver BC<br>+1 (123) 456-7890</p>
<br>
<p class="muted">© 2013 Prestige Inc.</p>
Terms of Service
Privacy
</div>
</div>
<div class="col-sm-3 col-md-3">
<h3>Product</h3>
<ul class="list-unstyled">
<li>Product for iOS</li>
<li>Product for Android</li>
<li>Product for Windows</li>
</ul>
</div>
<div class="col-sm-3 col-md-3">
<h3>Company</h3>
<ul class="list-unstyled">
<li>About Us</li>
<li>Our Team</li>
<li>Jobs <span class="label label-info">We're hiring!</span></li>
</ul>
</div>
<div class="col-sm-3 col-md-3">
<h3>Documentation</h3>
<ul class="list-unstyled">
<li>Product Help</li>
<li>Developer API</li>
<li>Product Markdown</li>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12 text-center">
<a class="icon" href="http://www.twitter.com/dparrelli" target="_blank"><i class="fa fa-twitter"></i></a>
<a class="icon" href="#" target="_blank"><i class="fa fa-facebook"></i></a>
<a class="icon" href="http://www.dribbble.com/dparrelli" target="_blank"><i class="fa fa-dribbble"></i></a>
<a class="icon" href="http://www.workingnomads.co" target="_blank"><i class="fa fa-globe"></i></a>
</div>
</div>
</div>
</footer>
<!-- js -->
<script src="/assets/jquery.js"></script>
<script src="/assets/bootstrap.min.js"></script>
<script src="/assets/wow.min.js"></script>
<script src="/assets/mb.bgndGallery.js"></script>
<script src="/assets/mb.bgndGallery.effects.js"></script>
<script src="/assets/jquery.simple-text-rotator.min.js"></script>
<script src="/assets/jquery.scrollTo.js"></script>
<script src="/assets/jquery.nav.js"></script>
<script src="/assets/modernizr.custom.js"></script>
<script src="/assets/grid.js"></script>
<script src="/assets/stellar.js"></script>
<script src="/assets/custom.js"></script>
</html>
Any ideas what is getting mixed up here? Should I be putting the page.css under page.css.scss instead of in the application.css files? Thank you!

you should add your css and javascript files to assests/stylesheets and assests/javascripts respectively. and add these to head of your views/layout/application.html.erb or any other layout you are using:
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
I hope that will work.

Resources