added dom
This commit is contained in:
Binary file not shown.
BIN
FromJavaScriptTojQuery-master/.DS_Store
vendored
Normal file
BIN
FromJavaScriptTojQuery-master/.DS_Store
vendored
Normal file
Binary file not shown.
BIN
FromJavaScriptTojQuery-master/01-FromJavaScriptTojQuery/.DS_Store
vendored
Normal file
BIN
FromJavaScriptTojQuery-master/01-FromJavaScriptTojQuery/.DS_Store
vendored
Normal file
Binary file not shown.
BIN
FromJavaScriptTojQuery-master/01-FromJavaScriptTojQuery/03-manipulating_the_dom/.DS_Store
vendored
Normal file
BIN
FromJavaScriptTojQuery-master/01-FromJavaScriptTojQuery/03-manipulating_the_dom/.DS_Store
vendored
Normal file
Binary file not shown.
@@ -0,0 +1,53 @@
|
||||
<!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">
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
|
||||
|
||||
<style type="text/css">
|
||||
/* It's usually bad practice to include css like this but for demos it's ok. */
|
||||
.container {
|
||||
margin-top: 20px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container">
|
||||
<nav class="navbar navbar-default">
|
||||
<div class="container-fluid">
|
||||
<div class="navbar-header">
|
||||
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
|
||||
<span class="sr-only">Toggle navigation</span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</button>
|
||||
<a class="navbar-brand" href="#">Nav</a>
|
||||
</div>
|
||||
<div id="navbar" class="navbar-collapse collapse">
|
||||
<ul class="nav navbar-nav">
|
||||
<li class="active"><a href="#">One</a></li>
|
||||
<li><a href="#">Two</a></li>
|
||||
<li><a href="#">Three</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<article id="home-page">
|
||||
<section class="jumbotron">
|
||||
<h1>The DOM</h1>
|
||||
<p>The good, the bad and the ugly.</p>
|
||||
</section>
|
||||
<section class='content'>
|
||||
<p class="lead">Manipulating the DOM with Javascript.</p>
|
||||
</section>
|
||||
</article>
|
||||
</div>
|
||||
<script type="text/javascript" src="js/app.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1 @@
|
||||
console.log('Hello World');
|
||||
@@ -0,0 +1,106 @@
|
||||
/****************************************
|
||||
* This is the set of JavaScript statements that we execute inside of the
|
||||
* console against the `index.html` file.
|
||||
****************************************/
|
||||
|
||||
/*
|
||||
* Selecting elements.
|
||||
*/
|
||||
|
||||
// Returns a single element. This is because we can't every have more than
|
||||
// one element with the same id. Note that we don't include a '#' for the id
|
||||
var article = document.getElementById('home-page');
|
||||
|
||||
// Returns a list of elements. This is because we can have a number
|
||||
// of <section> elements on the page
|
||||
var sections = article.getElementsByTagName('section');
|
||||
|
||||
// Also returns a list of elements that match the class name. This is because
|
||||
// unlike the ids, we can have numerous instances of elements with the same
|
||||
// class names. Note that we don't include a '.' for the class
|
||||
var leads = document.getElementsByClassName('lead');
|
||||
|
||||
// Let's look at the text content of the .lead element
|
||||
var lead = leads[0];
|
||||
lead.textContent;
|
||||
|
||||
// Very flexible way of finding elements in the DOM. Returns first element found
|
||||
var article = document.querySelector('#home-page');
|
||||
var section = document.querySelector('section');
|
||||
var lead = document.querySelector('.lead');
|
||||
|
||||
// Can get all matched results. This returns a list
|
||||
var sections = document.querySelectorAll('section');
|
||||
|
||||
// Let's look at an individual node and see it's children and it's parent
|
||||
var article = document.getElementById('home-page');
|
||||
|
||||
article.children;
|
||||
article.parentElement;
|
||||
article.nextElementSibling
|
||||
article.firstElementChild;
|
||||
article.lastElementChild;
|
||||
|
||||
let section = article.firstElementChild;
|
||||
|
||||
/*
|
||||
* Creating new elements
|
||||
*/
|
||||
|
||||
// Create a new li to go in the nav
|
||||
var li = document.createElement('li');
|
||||
|
||||
// Give it a class name
|
||||
li.classList.add('last');
|
||||
|
||||
|
||||
// Change its CSS
|
||||
li.style.backgroundColor = 'pink';
|
||||
|
||||
// Create an anchor link to go in the new li
|
||||
var a = document.createElement('a');
|
||||
|
||||
// Give is some text
|
||||
a.textContent = "Four";
|
||||
|
||||
a.style.color = 'white';
|
||||
|
||||
// Insert the anchor link into the li
|
||||
li.appendChild(a);
|
||||
|
||||
|
||||
/*
|
||||
* Modifying the DOM
|
||||
*/
|
||||
|
||||
// Find the ul element
|
||||
var uls = document.getElementsByTagName('ul');
|
||||
|
||||
var ul = uls[0];
|
||||
|
||||
// Insert the new li element into our ul
|
||||
ul.appendChild(li);
|
||||
|
||||
// Let's try move it up to the top of the list
|
||||
var firstLi = ul.getElementsByTagName('li');
|
||||
ul.insertBefore(li, firstLi);
|
||||
|
||||
firstLi.classList.remove('active');
|
||||
// Starting to get messy
|
||||
|
||||
/*
|
||||
* Updating a list of elements
|
||||
* - this is where it gets painful
|
||||
*/
|
||||
var lis = ul[0].getElementByTagName('li');
|
||||
var ul = document.getElementsByTagName('ul');
|
||||
var li;
|
||||
for (var i = 0; i < lis.length; i++) {
|
||||
lis[i].style.backgroundColor = 'pink';
|
||||
}
|
||||
|
||||
// Wouldn't it be great if we could do something like ...
|
||||
|
||||
ul.find('li').removeClass('active').addClass('inactive').css('background-color', 'pink');
|
||||
|
||||
// without having to write big for loops
|
||||
BIN
FromJavaScriptTojQuery-master/02-jQueryIntroduction/.DS_Store
vendored
Normal file
BIN
FromJavaScriptTojQuery-master/02-jQueryIntroduction/.DS_Store
vendored
Normal file
Binary file not shown.
@@ -0,0 +1,70 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>jQuery</title>
|
||||
<link href="style.css" rel="stylesheet">
|
||||
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
|
||||
<link href='https://fonts.googleapis.com/css?family=Dosis' rel='stylesheet' type='text/css'>
|
||||
</head>
|
||||
<body>
|
||||
<div id="container">
|
||||
<nav>
|
||||
<ul>
|
||||
<li id="logoNav">CODE INSTITUTE</li>
|
||||
<li id="stream1_btn">Stream 1</li>
|
||||
<li id="stream2_btn">Stream 2</li>
|
||||
<li id="stream3_btn">Stream 3</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="card stream1">
|
||||
<img class="card_image" src="img/3.png" alt="coding icon">
|
||||
<div class="card_bottom">
|
||||
<h2 class="card_head">HTML</h2>
|
||||
<p class="card_para">Once you join a Code Institute Bootcamp you will be taken on an accelerated contextualised learning path across 3 streams. Nothing is learned in isolation.We contextualise the content so that the knowledge and skills gained in each learning unit feeds into, and is expanded upon, within the next unit.The outputs of each stream will be a project. </p>
|
||||
<a href="" class="bottom_button">Button</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card stream3">
|
||||
<img class="card_image" src="img/1.png" alt="coding icon">
|
||||
<h2 class="card_head">MySql</h2>
|
||||
<p class="card_para">If you have questions about your career in coding or simply want to meet the Code Institute team, then come along to our next Careers Open Evening in Dublin</p>
|
||||
<a href="" class="bottom_button">Button</a>
|
||||
</div>
|
||||
|
||||
<div class="card stream2">
|
||||
<img class="card_image" src="img/2.png" alt="coding icon">
|
||||
<h2 class="card_head">Python</h2>
|
||||
<p class="card_para">If you have questions about your career in coding or simply want to meet the Code Institute team, then come along to our next Careers Open Evening in Dublin</p>
|
||||
<a href="" class="bottom_button">Button</a>
|
||||
</div>
|
||||
<div class="card stream1">
|
||||
<img class="card_image" src="img/3.png" alt="coding icon">
|
||||
<div class="card_bottom">
|
||||
<h2 class="card_head">jQuery</h2>
|
||||
<p class="card_para">Once you join a Code Institute Bootcamp you will be taken on an accelerated contextualised learning path across 3 streams. Nothing is learned in isolation.We contextualise the content so that the knowledge and skills gained in each learning unit feeds into, and is expanded upon, within the next unit.The outputs of each stream will be a project. </p>
|
||||
<a href="" class="bottom_button">Button</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card stream3">
|
||||
<img class="card_image" src="img/4.png" alt="coding icon">
|
||||
<h2 class="card_head">Django</h2>
|
||||
<p class="card_para">The syllabus has been developed to help you transform your career. The summarised syllabus, below, provides you with a snapshop of what skills you will come away with. Feel free to contact us for more detail on what you will learn.</p>
|
||||
<a href="" class="bottom_button">Button</a>
|
||||
</div>
|
||||
<div class="card stream1">
|
||||
<img class="card_image" src="img/1.png" alt="coding icon">
|
||||
<h2 class="card_head">CSS</h2>
|
||||
<p class="card_para">The syllabus has been developed to help you transform your career. The summarised syllabus, below, provides you with a snapshop of what skills you will come away with. Feel free to contact us for more detail on what you will learn.</p>
|
||||
<a href="" class="bottom_button">Button</a>
|
||||
</div>
|
||||
<div id="my_footer">
|
||||
<p id="copyright">Copyright Infomation</p>
|
||||
</div>
|
||||
</div>
|
||||
<script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
|
||||
<script src="script.js"></script> <!-- Scripts located at the bottom of the body to insure page is fully loaded before execution -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 78 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 64 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 77 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 93 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 204 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
@@ -0,0 +1,20 @@
|
||||
$(document).ready(function() {
|
||||
$("#stream1_btn").on("click", function() {
|
||||
$(".stream1").removeClass('highlight_stream');
|
||||
$(".stream2").removeClass('highlight_stream');
|
||||
$(".stream3").removeClass('highlight_stream');
|
||||
$(".stream1").addClass('highlight_stream');
|
||||
});
|
||||
$("#stream2_btn").on("click", function() {
|
||||
$(".stream1").removeClass('highlight_stream');
|
||||
$(".stream2").removeClass('highlight_stream');
|
||||
$(".stream3").removeClass('highlight_stream');
|
||||
$(".stream2").addClass('highlight_stream');
|
||||
});
|
||||
$("#stream3_btn").on("click", function() {
|
||||
$(".stream1").removeClass('highlight_stream');
|
||||
$(".stream2").removeClass('highlight_stream');
|
||||
$(".stream3").removeClass('highlight_stream');
|
||||
$(".stream3").addClass('highlight_stream');
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,157 @@
|
||||
body {
|
||||
font-family: 'Roboto', sans-serif;
|
||||
/*background-image: url(img/code-institute.jpg);
|
||||
background-size: cover;
|
||||
color: #ffffff;*/
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
h1{
|
||||
font-size: 3em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1em;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: .9rem;
|
||||
}
|
||||
|
||||
div {
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.card_image {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.bottom_button {
|
||||
display: flex;
|
||||
box-sizing:border-box;
|
||||
border-radius: 4px;
|
||||
display: block;
|
||||
width: 100%;
|
||||
background-color:rgba(129, 187, 201,.85);
|
||||
text-align: center;
|
||||
padding: 1em .75em;
|
||||
text-decoration: none;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.card_bottom {
|
||||
display: flex;
|
||||
flex-flow:column;
|
||||
}
|
||||
|
||||
.card_head {
|
||||
flex:0;
|
||||
}
|
||||
|
||||
.card_para {
|
||||
flex:1 0 auto;
|
||||
}
|
||||
|
||||
#container {
|
||||
display: flex; /* makes container a flexbox*/
|
||||
flex-flow: row wrap; /* layout the boxes in rows and wrap them*/
|
||||
box-sizing:border-box;
|
||||
margin-right:auto;
|
||||
margin-left:auto;
|
||||
max-width:1050px;
|
||||
}
|
||||
|
||||
#logo {
|
||||
width: 800px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.card {
|
||||
flex:1; /* */
|
||||
display: flex; /* make the contents controllable by flexbox*/
|
||||
flex-flow:column; /* */
|
||||
min-width: 240px; /**/
|
||||
margin: 10px;
|
||||
padding: 20px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.highlight_stream {
|
||||
background-color: #EB5255;
|
||||
}
|
||||
|
||||
#my_footer {
|
||||
width:100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#copyright {
|
||||
margin-top:10px;
|
||||
margin-bottom:10px;
|
||||
}
|
||||
|
||||
/*************************
|
||||
Navigation
|
||||
**************************/
|
||||
|
||||
nav {
|
||||
font-family: roboto;
|
||||
background-color: #eee;
|
||||
margin: 30px auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
ul {
|
||||
display: flex;
|
||||
justify-content:space-between;
|
||||
flex-flow: row;
|
||||
/*flex-flow: row-reverse;*/
|
||||
/*justify-content:flex-end;*/
|
||||
/*justify-content:space-around;*/
|
||||
/*align-items:flex-start;*/
|
||||
align-items:baseline;
|
||||
border-radius: 10px;
|
||||
list-style-type: none; /*Remove Bullets*/
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
flex:1;
|
||||
height: 30px;
|
||||
/*width:10%;*/
|
||||
/*border:2px solid #000;*/
|
||||
/*background-color: #81BBC9;*/
|
||||
/*border-radius: 10px;*/
|
||||
font-family: Dosis;
|
||||
padding:20px 20px 20px 20px;
|
||||
text-align: center;
|
||||
font-size: 1.3em;
|
||||
}
|
||||
|
||||
#logoNav {
|
||||
flex:6;
|
||||
text-align: left;
|
||||
font-size: 2em;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.underline {
|
||||
text-decoration:underline;
|
||||
}
|
||||
|
||||
.border {
|
||||
border: solid 5px #ccc;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 700px) {
|
||||
ul {
|
||||
flex-flow: column;
|
||||
align-items:center;
|
||||
}
|
||||
|
||||
li {
|
||||
font-size: 2em;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,70 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>jQuery</title>
|
||||
<link href="style.css" rel="stylesheet">
|
||||
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
|
||||
<link href='https://fonts.googleapis.com/css?family=Dosis' rel='stylesheet' type='text/css'>
|
||||
</head>
|
||||
<body>
|
||||
<div id="container">
|
||||
<nav>
|
||||
<ul>
|
||||
<li id="logoNav">CODE INSTITUTE</li>
|
||||
<li id="stream1_btn">Stream 1</li>
|
||||
<li id="stream2_btn">Stream 2</li>
|
||||
<li id="stream3_btn">Stream 3</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="card stream1">
|
||||
<img class="card_image" src="img/3.png" alt="coding icon">
|
||||
<div class="card_bottom">
|
||||
<h2 class="card_head">HTML</h2>
|
||||
<p class="card_para">Once you join a Code Institute Bootcamp you will be taken on an accelerated contextualised learning path across 3 streams. Nothing is learned in isolation.We contextualise the content so that the knowledge and skills gained in each learning unit feeds into, and is expanded upon, within the next unit.The outputs of each stream will be a project. </p>
|
||||
<a href="" class="bottom_button">Button</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card stream3">
|
||||
<img class="card_image" src="img/1.png" alt="coding icon">
|
||||
<h2 class="card_head">MySql</h2>
|
||||
<p class="card_para">If you have questions about your career in coding or simply want to meet the Code Institute team, then come along to our next Careers Open Evening in Dublin</p>
|
||||
<a href="" class="bottom_button">Button</a>
|
||||
</div>
|
||||
|
||||
<div class="card stream2">
|
||||
<img class="card_image" src="img/2.png" alt="coding icon">
|
||||
<h2 class="card_head">Python</h2>
|
||||
<p class="card_para">If you have questions about your career in coding or simply want to meet the Code Institute team, then come along to our next Careers Open Evening in Dublin</p>
|
||||
<a href="" class="bottom_button">Button</a>
|
||||
</div>
|
||||
<div class="card stream1">
|
||||
<img class="card_image" src="img/3.png" alt="coding icon">
|
||||
<div class="card_bottom">
|
||||
<h2 class="card_head">jQuery</h2>
|
||||
<p class="card_para">Once you join a Code Institute Bootcamp you will be taken on an accelerated contextualised learning path across 3 streams. Nothing is learned in isolation.We contextualise the content so that the knowledge and skills gained in each learning unit feeds into, and is expanded upon, within the next unit.The outputs of each stream will be a project. </p>
|
||||
<a href="" class="bottom_button">Button</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card stream3">
|
||||
<img class="card_image" src="img/4.png" alt="coding icon">
|
||||
<h2 class="card_head">Django</h2>
|
||||
<p class="card_para">The syllabus has been developed to help you transform your career. The summarised syllabus, below, provides you with a snapshop of what skills you will come away with. Feel free to contact us for more detail on what you will learn.</p>
|
||||
<a href="" class="bottom_button">Button</a>
|
||||
</div>
|
||||
<div class="card stream1">
|
||||
<img class="card_image" src="img/1.png" alt="coding icon">
|
||||
<h2 class="card_head">CSS</h2>
|
||||
<p class="card_para">The syllabus has been developed to help you transform your career. The summarised syllabus, below, provides you with a snapshop of what skills you will come away with. Feel free to contact us for more detail on what you will learn.</p>
|
||||
<a href="" class="bottom_button">Button</a>
|
||||
</div>
|
||||
<div id="my_footer">
|
||||
<p id="copyright">Copyright Infomation</p>
|
||||
</div>
|
||||
</div>
|
||||
<script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
|
||||
<script src="script.js"></script> <!-- Scripts located at the bottom of the body to insure page is fully loaded before execution -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 78 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 64 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 77 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 93 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 204 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
@@ -0,0 +1,20 @@
|
||||
$(document).ready(function() {
|
||||
$("#stream1_btn").on("click", function() {
|
||||
$(".stream1").removeClass('highlight_stream');
|
||||
$(".stream2").removeClass('highlight_stream');
|
||||
$(".stream3").removeClass('highlight_stream');
|
||||
$(".stream1").addClass('highlight_stream');
|
||||
});
|
||||
$("#stream2_btn").on("click", function() {
|
||||
$(".stream1").removeClass('highlight_stream');
|
||||
$(".stream2").removeClass('highlight_stream');
|
||||
$(".stream3").removeClass('highlight_stream');
|
||||
$(".stream2").addClass('highlight_stream');
|
||||
});
|
||||
$("#stream3_btn").on("click", function() {
|
||||
$(".stream1").removeClass('highlight_stream');
|
||||
$(".stream2").removeClass('highlight_stream');
|
||||
$(".stream3").removeClass('highlight_stream');
|
||||
$(".stream3").addClass('highlight_stream');
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,31 @@
|
||||
/**
|
||||
* The set of statements that are executed in the browser console to try out
|
||||
* jQuery selectors
|
||||
*/
|
||||
|
||||
// Get all img elements on the page
|
||||
$("img");
|
||||
|
||||
// Get all elements with a class of `card_image`
|
||||
$(".card_image");
|
||||
|
||||
// Get the footer by its ID
|
||||
$('#my_footer');
|
||||
|
||||
// All paragrapgh elements in the `footer`
|
||||
$("footer p");
|
||||
|
||||
// Get all header elements (h1-h6)
|
||||
$(":header");
|
||||
|
||||
// Get first element on the page
|
||||
$(":first");
|
||||
|
||||
// Get the last `div` on the page
|
||||
$("div:last")
|
||||
|
||||
// Get the last `img` on the page
|
||||
$("img:last");
|
||||
|
||||
// Get all elements that have an attribute of `href`
|
||||
$("[href]")
|
||||
@@ -0,0 +1,157 @@
|
||||
body {
|
||||
font-family: 'Roboto', sans-serif;
|
||||
/*background-image: url(img/code-institute.jpg);
|
||||
background-size: cover;
|
||||
color: #ffffff;*/
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
h1{
|
||||
font-size: 3em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1em;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: .9rem;
|
||||
}
|
||||
|
||||
div {
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.card_image {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.bottom_button {
|
||||
display: flex;
|
||||
box-sizing:border-box;
|
||||
border-radius: 4px;
|
||||
display: block;
|
||||
width: 100%;
|
||||
background-color:rgba(129, 187, 201,.85);
|
||||
text-align: center;
|
||||
padding: 1em .75em;
|
||||
text-decoration: none;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.card_bottom {
|
||||
display: flex;
|
||||
flex-flow:column;
|
||||
}
|
||||
|
||||
.card_head {
|
||||
flex:0;
|
||||
}
|
||||
|
||||
.card_para {
|
||||
flex:1 0 auto;
|
||||
}
|
||||
|
||||
#container {
|
||||
display: flex; /* makes container a flexbox*/
|
||||
flex-flow: row wrap; /* layout the boxes in rows and wrap them*/
|
||||
box-sizing:border-box;
|
||||
margin-right:auto;
|
||||
margin-left:auto;
|
||||
max-width:1050px;
|
||||
}
|
||||
|
||||
#logo {
|
||||
width: 800px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.card {
|
||||
flex:1; /* */
|
||||
display: flex; /* make the contents controllable by flexbox*/
|
||||
flex-flow:column; /* */
|
||||
min-width: 240px; /**/
|
||||
margin: 10px;
|
||||
padding: 20px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.highlight_stream {
|
||||
background-color: #EB5255;
|
||||
}
|
||||
|
||||
#my_footer {
|
||||
width:100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#copyright {
|
||||
margin-top:10px;
|
||||
margin-bottom:10px;
|
||||
}
|
||||
|
||||
/*************************
|
||||
Navigation
|
||||
**************************/
|
||||
|
||||
nav {
|
||||
font-family: roboto;
|
||||
background-color: #eee;
|
||||
margin: 30px auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
ul {
|
||||
display: flex;
|
||||
justify-content:space-between;
|
||||
flex-flow: row;
|
||||
/*flex-flow: row-reverse;*/
|
||||
/*justify-content:flex-end;*/
|
||||
/*justify-content:space-around;*/
|
||||
/*align-items:flex-start;*/
|
||||
align-items:baseline;
|
||||
border-radius: 10px;
|
||||
list-style-type: none; /*Remove Bullets*/
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
flex:1;
|
||||
height: 30px;
|
||||
/*width:10%;*/
|
||||
/*border:2px solid #000;*/
|
||||
/*background-color: #81BBC9;*/
|
||||
/*border-radius: 10px;*/
|
||||
font-family: Dosis;
|
||||
padding:20px 20px 20px 20px;
|
||||
text-align: center;
|
||||
font-size: 1.3em;
|
||||
}
|
||||
|
||||
#logoNav {
|
||||
flex:6;
|
||||
text-align: left;
|
||||
font-size: 2em;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.underline {
|
||||
text-decoration:underline;
|
||||
}
|
||||
|
||||
.border {
|
||||
border: solid 5px #ccc;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 700px) {
|
||||
ul {
|
||||
flex-flow: column;
|
||||
align-items:center;
|
||||
}
|
||||
|
||||
li {
|
||||
font-size: 2em;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,70 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>jQuery</title>
|
||||
<link href="style.css" rel="stylesheet">
|
||||
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
|
||||
<link href='https://fonts.googleapis.com/css?family=Dosis' rel='stylesheet' type='text/css'>
|
||||
</head>
|
||||
<body>
|
||||
<div id="container">
|
||||
<nav>
|
||||
<ul>
|
||||
<li id="logoNav">CODE INSTITUTE</li>
|
||||
<li id="stream1_btn">Stream 1</li>
|
||||
<li id="stream2_btn">Stream 2</li>
|
||||
<li id="stream3_btn">Stream 3</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="card stream1">
|
||||
<img class="card_image" src="img/3.png" alt="coding icon">
|
||||
<div class="card_bottom">
|
||||
<h2 class="card_head">HTML</h2>
|
||||
<p class="card_para">Once you join a Code Institute Bootcamp you will be taken on an accelerated contextualised learning path across 3 streams. Nothing is learned in isolation.We contextualise the content so that the knowledge and skills gained in each learning unit feeds into, and is expanded upon, within the next unit.The outputs of each stream will be a project. </p>
|
||||
<a href="" class="bottom_button">Button</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card stream3">
|
||||
<img class="card_image" src="img/1.png" alt="coding icon">
|
||||
<h2 class="card_head">MySql</h2>
|
||||
<p class="card_para">If you have questions about your career in coding or simply want to meet the Code Institute team, then come along to our next Careers Open Evening in Dublin</p>
|
||||
<a href="" class="bottom_button">Button</a>
|
||||
</div>
|
||||
|
||||
<div class="card stream2">
|
||||
<img class="card_image" src="img/2.png" alt="coding icon">
|
||||
<h2 class="card_head">Python</h2>
|
||||
<p class="card_para">If you have questions about your career in coding or simply want to meet the Code Institute team, then come along to our next Careers Open Evening in Dublin</p>
|
||||
<a href="" class="bottom_button">Button</a>
|
||||
</div>
|
||||
<div class="card stream1">
|
||||
<img class="card_image" src="img/3.png" alt="coding icon">
|
||||
<div class="card_bottom">
|
||||
<h2 class="card_head">jQuery</h2>
|
||||
<p class="card_para">Once you join a Code Institute Bootcamp you will be taken on an accelerated contextualised learning path across 3 streams. Nothing is learned in isolation.We contextualise the content so that the knowledge and skills gained in each learning unit feeds into, and is expanded upon, within the next unit.The outputs of each stream will be a project. </p>
|
||||
<a href="" class="bottom_button">Button</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card stream3">
|
||||
<img class="card_image" src="img/4.png" alt="coding icon">
|
||||
<h2 class="card_head">Django</h2>
|
||||
<p class="card_para">The syllabus has been developed to help you transform your career. The summarised syllabus, below, provides you with a snapshop of what skills you will come away with. Feel free to contact us for more detail on what you will learn.</p>
|
||||
<a href="" class="bottom_button">Button</a>
|
||||
</div>
|
||||
<div class="card stream1">
|
||||
<img class="card_image" src="img/1.png" alt="coding icon">
|
||||
<h2 class="card_head">CSS</h2>
|
||||
<p class="card_para">The syllabus has been developed to help you transform your career. The summarised syllabus, below, provides you with a snapshop of what skills you will come away with. Feel free to contact us for more detail on what you will learn.</p>
|
||||
<a href="" class="bottom_button">Button</a>
|
||||
</div>
|
||||
<div id="my_footer">
|
||||
<p id="copyright">Copyright Infomation</p>
|
||||
</div>
|
||||
</div>
|
||||
<script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
|
||||
<script src="script.js"></script> <!-- Scripts located at the bottom of the body to insure page is fully loaded before execution -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 78 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 64 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 77 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 93 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 204 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
@@ -0,0 +1,20 @@
|
||||
$(document).ready(function() {
|
||||
$("#stream1_btn").on("click", function() {
|
||||
$(".stream1").removeClass('highlight_stream');
|
||||
$(".stream2").removeClass('highlight_stream');
|
||||
$(".stream3").removeClass('highlight_stream');
|
||||
$(".stream1").addClass('highlight_stream');
|
||||
});
|
||||
$("#stream2_btn").on("click", function() {
|
||||
$(".stream1").removeClass('highlight_stream');
|
||||
$(".stream2").removeClass('highlight_stream');
|
||||
$(".stream3").removeClass('highlight_stream');
|
||||
$(".stream2").addClass('highlight_stream');
|
||||
});
|
||||
$("#stream3_btn").on("click", function() {
|
||||
$(".stream1").removeClass('highlight_stream');
|
||||
$(".stream2").removeClass('highlight_stream');
|
||||
$(".stream3").removeClass('highlight_stream');
|
||||
$(".stream3").addClass('highlight_stream');
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,38 @@
|
||||
/**
|
||||
* The set of statements that are executed in the browser console to try out
|
||||
* jQuery selectors
|
||||
*/
|
||||
|
||||
// Select all of the anchor elements on the page using the `$` as shorthand
|
||||
// for the `jQuery` function
|
||||
$("a");
|
||||
|
||||
// The long version of the function
|
||||
jQuery("a");
|
||||
|
||||
// Get all elements that contain a class of `card_image`
|
||||
$(".card_image");
|
||||
|
||||
// Get all elements that contain an ID of `logoNav`
|
||||
$("#logoNav");
|
||||
|
||||
// Get all anchors that are direct children of paragraphs
|
||||
$("p>a");
|
||||
|
||||
// Get all anchor elements that are descendants of paragraphs
|
||||
$("p a");
|
||||
|
||||
// Get all list item elements that are direct children of unordered lists
|
||||
$("ul>li");
|
||||
|
||||
// Get all list item elements that are descendants of unordered lists
|
||||
$("ul li");
|
||||
|
||||
// Get the first anchor element from the DOM
|
||||
$("a:first");
|
||||
|
||||
// Get the last anchor element from the DOM
|
||||
$("a:last");
|
||||
|
||||
// Select all header elements (h1, h2, h3, h4, h5, h6)
|
||||
$(":header");
|
||||
@@ -0,0 +1,157 @@
|
||||
body {
|
||||
font-family: 'Roboto', sans-serif;
|
||||
/*background-image: url(img/code-institute.jpg);
|
||||
background-size: cover;
|
||||
color: #ffffff;*/
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
h1{
|
||||
font-size: 3em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1em;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: .9rem;
|
||||
}
|
||||
|
||||
div {
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.card_image {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.bottom_button {
|
||||
display: flex;
|
||||
box-sizing:border-box;
|
||||
border-radius: 4px;
|
||||
display: block;
|
||||
width: 100%;
|
||||
background-color:rgba(129, 187, 201,.85);
|
||||
text-align: center;
|
||||
padding: 1em .75em;
|
||||
text-decoration: none;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.card_bottom {
|
||||
display: flex;
|
||||
flex-flow:column;
|
||||
}
|
||||
|
||||
.card_head {
|
||||
flex:0;
|
||||
}
|
||||
|
||||
.card_para {
|
||||
flex:1 0 auto;
|
||||
}
|
||||
|
||||
#container {
|
||||
display: flex; /* makes container a flexbox*/
|
||||
flex-flow: row wrap; /* layout the boxes in rows and wrap them*/
|
||||
box-sizing:border-box;
|
||||
margin-right:auto;
|
||||
margin-left:auto;
|
||||
max-width:1050px;
|
||||
}
|
||||
|
||||
#logo {
|
||||
width: 800px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.card {
|
||||
flex:1; /* */
|
||||
display: flex; /* make the contents controllable by flexbox*/
|
||||
flex-flow:column; /* */
|
||||
min-width: 240px; /**/
|
||||
margin: 10px;
|
||||
padding: 20px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.highlight_stream {
|
||||
background-color: #EB5255;
|
||||
}
|
||||
|
||||
#my_footer {
|
||||
width:100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#copyright {
|
||||
margin-top:10px;
|
||||
margin-bottom:10px;
|
||||
}
|
||||
|
||||
/*************************
|
||||
Navigation
|
||||
**************************/
|
||||
|
||||
nav {
|
||||
font-family: roboto;
|
||||
background-color: #eee;
|
||||
margin: 30px auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
ul {
|
||||
display: flex;
|
||||
justify-content:space-between;
|
||||
flex-flow: row;
|
||||
/*flex-flow: row-reverse;*/
|
||||
/*justify-content:flex-end;*/
|
||||
/*justify-content:space-around;*/
|
||||
/*align-items:flex-start;*/
|
||||
align-items:baseline;
|
||||
border-radius: 10px;
|
||||
list-style-type: none; /*Remove Bullets*/
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
flex:1;
|
||||
height: 30px;
|
||||
/*width:10%;*/
|
||||
/*border:2px solid #000;*/
|
||||
/*background-color: #81BBC9;*/
|
||||
/*border-radius: 10px;*/
|
||||
font-family: Dosis;
|
||||
padding:20px 20px 20px 20px;
|
||||
text-align: center;
|
||||
font-size: 1.3em;
|
||||
}
|
||||
|
||||
#logoNav {
|
||||
flex:6;
|
||||
text-align: left;
|
||||
font-size: 2em;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.underline {
|
||||
text-decoration:underline;
|
||||
}
|
||||
|
||||
.border {
|
||||
border: solid 5px #ccc;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 700px) {
|
||||
ul {
|
||||
flex-flow: column;
|
||||
align-items:center;
|
||||
}
|
||||
|
||||
li {
|
||||
font-size: 2em;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,70 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>jQuery</title>
|
||||
<link href="style.css" rel="stylesheet">
|
||||
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
|
||||
<link href='https://fonts.googleapis.com/css?family=Dosis' rel='stylesheet' type='text/css'>
|
||||
</head>
|
||||
<body>
|
||||
<div id="container">
|
||||
<nav>
|
||||
<ul>
|
||||
<li id="logoNav">CODE INSTITUTE</li>
|
||||
<li id="stream1_btn">Stream 1</li>
|
||||
<li id="stream2_btn">Stream 2</li>
|
||||
<li id="stream3_btn">Stream 3</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="card stream1">
|
||||
<img class="card_image" src="img/3.png" alt="coding icon">
|
||||
<div class="card_bottom">
|
||||
<h2 class="card_head">HTML</h2>
|
||||
<p class="card_para">Once you join a Code Institute Bootcamp you will be taken on an accelerated contextualised learning path across 3 streams. Nothing is learned in isolation.We contextualise the content so that the knowledge and skills gained in each learning unit feeds into, and is expanded upon, within the next unit.The outputs of each stream will be a project. </p>
|
||||
<a href="" class="bottom_button">Button</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card stream3">
|
||||
<img class="card_image" src="img/1.png" alt="coding icon">
|
||||
<h2 class="card_head">MySql</h2>
|
||||
<p class="card_para">If you have questions about your career in coding or simply want to meet the Code Institute team, then come along to our next Careers Open Evening in Dublin</p>
|
||||
<a href="" class="bottom_button">Button</a>
|
||||
</div>
|
||||
|
||||
<div class="card stream2">
|
||||
<img class="card_image" src="img/2.png" alt="coding icon">
|
||||
<h2 class="card_head">Python</h2>
|
||||
<p class="card_para">If you have questions about your career in coding or simply want to meet the Code Institute team, then come along to our next Careers Open Evening in Dublin</p>
|
||||
<a href="" class="bottom_button">Button</a>
|
||||
</div>
|
||||
<div class="card stream1">
|
||||
<img class="card_image" src="img/3.png" alt="coding icon">
|
||||
<div class="card_bottom">
|
||||
<h2 class="card_head">jQuery</h2>
|
||||
<p class="card_para">Once you join a Code Institute Bootcamp you will be taken on an accelerated contextualised learning path across 3 streams. Nothing is learned in isolation.We contextualise the content so that the knowledge and skills gained in each learning unit feeds into, and is expanded upon, within the next unit.The outputs of each stream will be a project. </p>
|
||||
<a href="" class="bottom_button">Button</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card stream3">
|
||||
<img class="card_image" src="img/4.png" alt="coding icon">
|
||||
<h2 class="card_head">Django</h2>
|
||||
<p class="card_para">The syllabus has been developed to help you transform your career. The summarised syllabus, below, provides you with a snapshop of what skills you will come away with. Feel free to contact us for more detail on what you will learn.</p>
|
||||
<a href="" class="bottom_button">Button</a>
|
||||
</div>
|
||||
<div class="card stream1">
|
||||
<img class="card_image" src="img/1.png" alt="coding icon">
|
||||
<h2 class="card_head">CSS</h2>
|
||||
<p class="card_para">The syllabus has been developed to help you transform your career. The summarised syllabus, below, provides you with a snapshop of what skills you will come away with. Feel free to contact us for more detail on what you will learn.</p>
|
||||
<a href="" class="bottom_button">Button</a>
|
||||
</div>
|
||||
<div id="my_footer">
|
||||
<p id="copyright">Copyright Infomation</p>
|
||||
</div>
|
||||
</div>
|
||||
<script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
|
||||
<script src="script.js"></script> <!-- Scripts located at the bottom of the body to insure page is fully loaded before execution -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 78 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 64 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 77 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 93 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 204 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
@@ -0,0 +1,20 @@
|
||||
$(document).ready(function() {
|
||||
$("#stream1_btn").on("click", function() {
|
||||
$(".stream1").removeClass('highlight_stream');
|
||||
$(".stream2").removeClass('highlight_stream');
|
||||
$(".stream3").removeClass('highlight_stream');
|
||||
$(".stream1").addClass('highlight_stream');
|
||||
});
|
||||
$("#stream2_btn").on("click", function() {
|
||||
$(".stream1").removeClass('highlight_stream');
|
||||
$(".stream2").removeClass('highlight_stream');
|
||||
$(".stream3").removeClass('highlight_stream');
|
||||
$(".stream2").addClass('highlight_stream');
|
||||
});
|
||||
$("#stream3_btn").on("click", function() {
|
||||
$(".stream1").removeClass('highlight_stream');
|
||||
$(".stream2").removeClass('highlight_stream');
|
||||
$(".stream3").removeClass('highlight_stream');
|
||||
$(".stream3").addClass('highlight_stream');
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,7 @@
|
||||
/**
|
||||
* The set of statements that are executed in the browser console to try out
|
||||
* jQuery selectors
|
||||
*/
|
||||
|
||||
// Modify the contents of all of the paragraph elements on the page
|
||||
$("p").text("New text");
|
||||
@@ -0,0 +1,157 @@
|
||||
body {
|
||||
font-family: 'Roboto', sans-serif;
|
||||
/*background-image: url(img/code-institute.jpg);
|
||||
background-size: cover;
|
||||
color: #ffffff;*/
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
h1{
|
||||
font-size: 3em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1em;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: .9rem;
|
||||
}
|
||||
|
||||
div {
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.card_image {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.bottom_button {
|
||||
display: flex;
|
||||
box-sizing:border-box;
|
||||
border-radius: 4px;
|
||||
display: block;
|
||||
width: 100%;
|
||||
background-color:rgba(129, 187, 201,.85);
|
||||
text-align: center;
|
||||
padding: 1em .75em;
|
||||
text-decoration: none;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.card_bottom {
|
||||
display: flex;
|
||||
flex-flow:column;
|
||||
}
|
||||
|
||||
.card_head {
|
||||
flex:0;
|
||||
}
|
||||
|
||||
.card_para {
|
||||
flex:1 0 auto;
|
||||
}
|
||||
|
||||
#container {
|
||||
display: flex; /* makes container a flexbox*/
|
||||
flex-flow: row wrap; /* layout the boxes in rows and wrap them*/
|
||||
box-sizing:border-box;
|
||||
margin-right:auto;
|
||||
margin-left:auto;
|
||||
max-width:1050px;
|
||||
}
|
||||
|
||||
#logo {
|
||||
width: 800px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.card {
|
||||
flex:1; /* */
|
||||
display: flex; /* make the contents controllable by flexbox*/
|
||||
flex-flow:column; /* */
|
||||
min-width: 240px; /**/
|
||||
margin: 10px;
|
||||
padding: 20px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.highlight_stream {
|
||||
background-color: #EB5255;
|
||||
}
|
||||
|
||||
#my_footer {
|
||||
width:100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#copyright {
|
||||
margin-top:10px;
|
||||
margin-bottom:10px;
|
||||
}
|
||||
|
||||
/*************************
|
||||
Navigation
|
||||
**************************/
|
||||
|
||||
nav {
|
||||
font-family: roboto;
|
||||
background-color: #eee;
|
||||
margin: 30px auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
ul {
|
||||
display: flex;
|
||||
justify-content:space-between;
|
||||
flex-flow: row;
|
||||
/*flex-flow: row-reverse;*/
|
||||
/*justify-content:flex-end;*/
|
||||
/*justify-content:space-around;*/
|
||||
/*align-items:flex-start;*/
|
||||
align-items:baseline;
|
||||
border-radius: 10px;
|
||||
list-style-type: none; /*Remove Bullets*/
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
flex:1;
|
||||
height: 30px;
|
||||
/*width:10%;*/
|
||||
/*border:2px solid #000;*/
|
||||
/*background-color: #81BBC9;*/
|
||||
/*border-radius: 10px;*/
|
||||
font-family: Dosis;
|
||||
padding:20px 20px 20px 20px;
|
||||
text-align: center;
|
||||
font-size: 1.3em;
|
||||
}
|
||||
|
||||
#logoNav {
|
||||
flex:6;
|
||||
text-align: left;
|
||||
font-size: 2em;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.underline {
|
||||
text-decoration:underline;
|
||||
}
|
||||
|
||||
.border {
|
||||
border: solid 5px #ccc;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 700px) {
|
||||
ul {
|
||||
flex-flow: column;
|
||||
align-items:center;
|
||||
}
|
||||
|
||||
li {
|
||||
font-size: 2em;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,70 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>jQuery</title>
|
||||
<link href="style.css" rel="stylesheet">
|
||||
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
|
||||
<link href='https://fonts.googleapis.com/css?family=Dosis' rel='stylesheet' type='text/css'>
|
||||
</head>
|
||||
<body>
|
||||
<div id="container">
|
||||
<nav>
|
||||
<ul>
|
||||
<li id="logoNav">CODE INSTITUTE</li>
|
||||
<li id="stream1_btn">Stream 1</li>
|
||||
<li id="stream2_btn">Stream 2</li>
|
||||
<li id="stream3_btn">Stream 3</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="card stream1">
|
||||
<img class="card_image" src="img/3.png" alt="coding icon">
|
||||
<div class="card_bottom">
|
||||
<h2 class="card_head">HTML</h2>
|
||||
<p class="card_para">Once you join a Code Institute Bootcamp you will be taken on an accelerated contextualised learning path across 3 streams. Nothing is learned in isolation.We contextualise the content so that the knowledge and skills gained in each learning unit feeds into, and is expanded upon, within the next unit.The outputs of each stream will be a project. </p>
|
||||
<a href="" class="bottom_button">Button</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card stream3">
|
||||
<img class="card_image" src="img/1.png" alt="coding icon">
|
||||
<h2 class="card_head">MySql</h2>
|
||||
<p class="card_para">If you have questions about your career in coding or simply want to meet the Code Institute team, then come along to our next Careers Open Evening in Dublin</p>
|
||||
<a href="" class="bottom_button">Button</a>
|
||||
</div>
|
||||
|
||||
<div class="card stream2">
|
||||
<img class="card_image" src="img/2.png" alt="coding icon">
|
||||
<h2 class="card_head">Python</h2>
|
||||
<p class="card_para">If you have questions about your career in coding or simply want to meet the Code Institute team, then come along to our next Careers Open Evening in Dublin</p>
|
||||
<a href="" class="bottom_button">Button</a>
|
||||
</div>
|
||||
<div class="card stream1">
|
||||
<img class="card_image" src="img/3.png" alt="coding icon">
|
||||
<div class="card_bottom">
|
||||
<h2 class="card_head">jQuery</h2>
|
||||
<p class="card_para">Once you join a Code Institute Bootcamp you will be taken on an accelerated contextualised learning path across 3 streams. Nothing is learned in isolation.We contextualise the content so that the knowledge and skills gained in each learning unit feeds into, and is expanded upon, within the next unit.The outputs of each stream will be a project. </p>
|
||||
<a href="" class="bottom_button">Button</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card stream3">
|
||||
<img class="card_image" src="img/4.png" alt="coding icon">
|
||||
<h2 class="card_head">Django</h2>
|
||||
<p class="card_para">The syllabus has been developed to help you transform your career. The summarised syllabus, below, provides you with a snapshop of what skills you will come away with. Feel free to contact us for more detail on what you will learn.</p>
|
||||
<a href="" class="bottom_button">Button</a>
|
||||
</div>
|
||||
<div class="card stream1">
|
||||
<img class="card_image" src="img/1.png" alt="coding icon">
|
||||
<h2 class="card_head">CSS</h2>
|
||||
<p class="card_para">The syllabus has been developed to help you transform your career. The summarised syllabus, below, provides you with a snapshop of what skills you will come away with. Feel free to contact us for more detail on what you will learn.</p>
|
||||
<a href="" class="bottom_button">Button</a>
|
||||
</div>
|
||||
<div id="my_footer">
|
||||
<p id="copyright">Copyright Infomation</p>
|
||||
</div>
|
||||
</div>
|
||||
<script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
|
||||
<script src="script.js"></script> <!-- Scripts located at the bottom of the body to insure page is fully loaded before execution -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 78 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 64 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 77 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 93 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 204 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
@@ -0,0 +1,20 @@
|
||||
$(document).ready(function() {
|
||||
$("#stream1_btn").on("click", function() {
|
||||
$(".stream1").removeClass('highlight_stream');
|
||||
$(".stream2").removeClass('highlight_stream');
|
||||
$(".stream3").removeClass('highlight_stream');
|
||||
$(".stream1").addClass('highlight_stream');
|
||||
});
|
||||
$("#stream2_btn").on("click", function() {
|
||||
$(".stream1").removeClass('highlight_stream');
|
||||
$(".stream2").removeClass('highlight_stream');
|
||||
$(".stream3").removeClass('highlight_stream');
|
||||
$(".stream2").addClass('highlight_stream');
|
||||
});
|
||||
$("#stream3_btn").on("click", function() {
|
||||
$(".stream1").removeClass('highlight_stream');
|
||||
$(".stream2").removeClass('highlight_stream');
|
||||
$(".stream3").removeClass('highlight_stream');
|
||||
$(".stream3").addClass('highlight_stream');
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,38 @@
|
||||
/**
|
||||
* The set of statements that are executed in the browser console to try out
|
||||
* jQuery selectors
|
||||
*/
|
||||
|
||||
// Get the `background-color` of all paragraphs
|
||||
$("p").css("background-color");
|
||||
|
||||
// Get the `font-family` of all paragraphs
|
||||
$("p").css("font-family");
|
||||
|
||||
// Change the color of the text of all list item elements
|
||||
$("li").css("color", "red");
|
||||
|
||||
// Underline all h2 elements
|
||||
$("h2").css("text-decoration", "underline");
|
||||
|
||||
// Add a solid border of 1px and a color of `#ccc` to all unordered lists
|
||||
$("ul").css("border", "solid 1px #ccc");
|
||||
|
||||
// Get the HTML contained within an element with an ID of `my_footer`
|
||||
$("#my_footer").html();
|
||||
|
||||
// Get the HTML contained within an element called `body`
|
||||
$("body").html();
|
||||
|
||||
// Add a h1 to the `body` element
|
||||
$("body").html("<h1>This is my fancy new content. Thanks jQuery, you're the best!</h1>");
|
||||
|
||||
// Add new text to the footer
|
||||
$("#my_footer").text("This is my fancy new text. Thanks again jQuery");
|
||||
|
||||
// Append a new element to the end of all of the elements contained in the
|
||||
// element that has an ID of `myElement`
|
||||
$("#myElement").append("<p>This is a new element</p>");
|
||||
|
||||
// Append a span containing the copyright to the footer
|
||||
$("my_footer").append("<span>© 2017.</span>")
|
||||
@@ -0,0 +1,157 @@
|
||||
body {
|
||||
font-family: 'Roboto', sans-serif;
|
||||
/*background-image: url(img/code-institute.jpg);
|
||||
background-size: cover;
|
||||
color: #ffffff;*/
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
h1{
|
||||
font-size: 3em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1em;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: .9rem;
|
||||
}
|
||||
|
||||
div {
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.card_image {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.bottom_button {
|
||||
display: flex;
|
||||
box-sizing:border-box;
|
||||
border-radius: 4px;
|
||||
display: block;
|
||||
width: 100%;
|
||||
background-color:rgba(129, 187, 201,.85);
|
||||
text-align: center;
|
||||
padding: 1em .75em;
|
||||
text-decoration: none;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.card_bottom {
|
||||
display: flex;
|
||||
flex-flow:column;
|
||||
}
|
||||
|
||||
.card_head {
|
||||
flex:0;
|
||||
}
|
||||
|
||||
.card_para {
|
||||
flex:1 0 auto;
|
||||
}
|
||||
|
||||
#container {
|
||||
display: flex; /* makes container a flexbox*/
|
||||
flex-flow: row wrap; /* layout the boxes in rows and wrap them*/
|
||||
box-sizing:border-box;
|
||||
margin-right:auto;
|
||||
margin-left:auto;
|
||||
max-width:1050px;
|
||||
}
|
||||
|
||||
#logo {
|
||||
width: 800px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.card {
|
||||
flex:1; /* */
|
||||
display: flex; /* make the contents controllable by flexbox*/
|
||||
flex-flow:column; /* */
|
||||
min-width: 240px; /**/
|
||||
margin: 10px;
|
||||
padding: 20px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.highlight_stream {
|
||||
background-color: #EB5255;
|
||||
}
|
||||
|
||||
#my_footer {
|
||||
width:100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#copyright {
|
||||
margin-top:10px;
|
||||
margin-bottom:10px;
|
||||
}
|
||||
|
||||
/*************************
|
||||
Navigation
|
||||
**************************/
|
||||
|
||||
nav {
|
||||
font-family: roboto;
|
||||
background-color: #eee;
|
||||
margin: 30px auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
ul {
|
||||
display: flex;
|
||||
justify-content:space-between;
|
||||
flex-flow: row;
|
||||
/*flex-flow: row-reverse;*/
|
||||
/*justify-content:flex-end;*/
|
||||
/*justify-content:space-around;*/
|
||||
/*align-items:flex-start;*/
|
||||
align-items:baseline;
|
||||
border-radius: 10px;
|
||||
list-style-type: none; /*Remove Bullets*/
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
flex:1;
|
||||
height: 30px;
|
||||
/*width:10%;*/
|
||||
/*border:2px solid #000;*/
|
||||
/*background-color: #81BBC9;*/
|
||||
/*border-radius: 10px;*/
|
||||
font-family: Dosis;
|
||||
padding:20px 20px 20px 20px;
|
||||
text-align: center;
|
||||
font-size: 1.3em;
|
||||
}
|
||||
|
||||
#logoNav {
|
||||
flex:6;
|
||||
text-align: left;
|
||||
font-size: 2em;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.underline {
|
||||
text-decoration:underline;
|
||||
}
|
||||
|
||||
.border {
|
||||
border: solid 5px #ccc;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 700px) {
|
||||
ul {
|
||||
flex-flow: column;
|
||||
align-items:center;
|
||||
}
|
||||
|
||||
li {
|
||||
font-size: 2em;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,70 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>jQuery</title>
|
||||
<link href="style.css" rel="stylesheet">
|
||||
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
|
||||
<link href='https://fonts.googleapis.com/css?family=Dosis' rel='stylesheet' type='text/css'>
|
||||
</head>
|
||||
<body>
|
||||
<div id="container">
|
||||
<nav>
|
||||
<ul>
|
||||
<li id="logoNav">CODE INSTITUTE</li>
|
||||
<li id="stream1_btn">Stream 1</li>
|
||||
<li id="stream2_btn">Stream 2</li>
|
||||
<li id="stream3_btn">Stream 3</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="card stream1">
|
||||
<img class="card_image" src="img/3.png" alt="coding icon">
|
||||
<div class="card_bottom">
|
||||
<h2 class="card_head">HTML</h2>
|
||||
<p class="card_para">Once you join a Code Institute Bootcamp you will be taken on an accelerated contextualised learning path across 3 streams. Nothing is learned in isolation.We contextualise the content so that the knowledge and skills gained in each learning unit feeds into, and is expanded upon, within the next unit.The outputs of each stream will be a project. </p>
|
||||
<a href="" class="bottom_button">Button</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card stream3">
|
||||
<img class="card_image" src="img/1.png" alt="coding icon">
|
||||
<h2 class="card_head">MySql</h2>
|
||||
<p class="card_para">If you have questions about your career in coding or simply want to meet the Code Institute team, then come along to our next Careers Open Evening in Dublin</p>
|
||||
<a href="" class="bottom_button">Button</a>
|
||||
</div>
|
||||
|
||||
<div class="card stream2">
|
||||
<img class="card_image" src="img/2.png" alt="coding icon">
|
||||
<h2 class="card_head">Python</h2>
|
||||
<p class="card_para">If you have questions about your career in coding or simply want to meet the Code Institute team, then come along to our next Careers Open Evening in Dublin</p>
|
||||
<a href="" class="bottom_button">Button</a>
|
||||
</div>
|
||||
<div class="card stream1">
|
||||
<img class="card_image" src="img/3.png" alt="coding icon">
|
||||
<div class="card_bottom">
|
||||
<h2 class="card_head">jQuery</h2>
|
||||
<p class="card_para">Once you join a Code Institute Bootcamp you will be taken on an accelerated contextualised learning path across 3 streams. Nothing is learned in isolation.We contextualise the content so that the knowledge and skills gained in each learning unit feeds into, and is expanded upon, within the next unit.The outputs of each stream will be a project. </p>
|
||||
<a href="" class="bottom_button">Button</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card stream3">
|
||||
<img class="card_image" src="img/4.png" alt="coding icon">
|
||||
<h2 class="card_head">Django</h2>
|
||||
<p class="card_para">The syllabus has been developed to help you transform your career. The summarised syllabus, below, provides you with a snapshop of what skills you will come away with. Feel free to contact us for more detail on what you will learn.</p>
|
||||
<a href="" class="bottom_button">Button</a>
|
||||
</div>
|
||||
<div class="card stream1">
|
||||
<img class="card_image" src="img/1.png" alt="coding icon">
|
||||
<h2 class="card_head">CSS</h2>
|
||||
<p class="card_para">The syllabus has been developed to help you transform your career. The summarised syllabus, below, provides you with a snapshop of what skills you will come away with. Feel free to contact us for more detail on what you will learn.</p>
|
||||
<a href="" class="bottom_button">Button</a>
|
||||
</div>
|
||||
<div id="my_footer">
|
||||
<p id="copyright">Copyright Infomation</p>
|
||||
</div>
|
||||
</div>
|
||||
<script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
|
||||
<script src="script.js"></script> <!-- Scripts located at the bottom of the body to insure page is fully loaded before execution -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 78 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 64 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 77 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 93 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 204 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
@@ -0,0 +1,20 @@
|
||||
$(document).ready(function() {
|
||||
$("#stream1_btn").on("click", function() {
|
||||
$(".stream1").removeClass('highlight_stream');
|
||||
$(".stream2").removeClass('highlight_stream');
|
||||
$(".stream3").removeClass('highlight_stream');
|
||||
$(".stream1").addClass('highlight_stream');
|
||||
});
|
||||
$("#stream2_btn").on("click", function() {
|
||||
$(".stream1").removeClass('highlight_stream');
|
||||
$(".stream2").removeClass('highlight_stream');
|
||||
$(".stream3").removeClass('highlight_stream');
|
||||
$(".stream2").addClass('highlight_stream');
|
||||
});
|
||||
$("#stream3_btn").on("click", function() {
|
||||
$(".stream1").removeClass('highlight_stream');
|
||||
$(".stream2").removeClass('highlight_stream');
|
||||
$(".stream3").removeClass('highlight_stream');
|
||||
$(".stream3").addClass('highlight_stream');
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,13 @@
|
||||
/**
|
||||
* The set of statements that are executed in the browser console to try out
|
||||
* jQuery selectors
|
||||
*/
|
||||
|
||||
// Append a span to every paragraph
|
||||
$("p").append("<span>lorem ipsum</span>");
|
||||
|
||||
// Remove all links using the remove function
|
||||
$("a").remove();
|
||||
|
||||
// Empty all div elements that have a class of card
|
||||
$("div.card").empty();
|
||||
@@ -0,0 +1,157 @@
|
||||
body {
|
||||
font-family: 'Roboto', sans-serif;
|
||||
/*background-image: url(img/code-institute.jpg);
|
||||
background-size: cover;
|
||||
color: #ffffff;*/
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
h1{
|
||||
font-size: 3em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1em;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: .9rem;
|
||||
}
|
||||
|
||||
div {
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.card_image {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.bottom_button {
|
||||
display: flex;
|
||||
box-sizing:border-box;
|
||||
border-radius: 4px;
|
||||
display: block;
|
||||
width: 100%;
|
||||
background-color:rgba(129, 187, 201,.85);
|
||||
text-align: center;
|
||||
padding: 1em .75em;
|
||||
text-decoration: none;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.card_bottom {
|
||||
display: flex;
|
||||
flex-flow:column;
|
||||
}
|
||||
|
||||
.card_head {
|
||||
flex:0;
|
||||
}
|
||||
|
||||
.card_para {
|
||||
flex:1 0 auto;
|
||||
}
|
||||
|
||||
#container {
|
||||
display: flex; /* makes container a flexbox*/
|
||||
flex-flow: row wrap; /* layout the boxes in rows and wrap them*/
|
||||
box-sizing:border-box;
|
||||
margin-right:auto;
|
||||
margin-left:auto;
|
||||
max-width:1050px;
|
||||
}
|
||||
|
||||
#logo {
|
||||
width: 800px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.card {
|
||||
flex:1; /* */
|
||||
display: flex; /* make the contents controllable by flexbox*/
|
||||
flex-flow:column; /* */
|
||||
min-width: 240px; /**/
|
||||
margin: 10px;
|
||||
padding: 20px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.highlight_stream {
|
||||
background-color: #EB5255;
|
||||
}
|
||||
|
||||
#my_footer {
|
||||
width:100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#copyright {
|
||||
margin-top:10px;
|
||||
margin-bottom:10px;
|
||||
}
|
||||
|
||||
/*************************
|
||||
Navigation
|
||||
**************************/
|
||||
|
||||
nav {
|
||||
font-family: roboto;
|
||||
background-color: #eee;
|
||||
margin: 30px auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
ul {
|
||||
display: flex;
|
||||
justify-content:space-between;
|
||||
flex-flow: row;
|
||||
/*flex-flow: row-reverse;*/
|
||||
/*justify-content:flex-end;*/
|
||||
/*justify-content:space-around;*/
|
||||
/*align-items:flex-start;*/
|
||||
align-items:baseline;
|
||||
border-radius: 10px;
|
||||
list-style-type: none; /*Remove Bullets*/
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
flex:1;
|
||||
height: 30px;
|
||||
/*width:10%;*/
|
||||
/*border:2px solid #000;*/
|
||||
/*background-color: #81BBC9;*/
|
||||
/*border-radius: 10px;*/
|
||||
font-family: Dosis;
|
||||
padding:20px 20px 20px 20px;
|
||||
text-align: center;
|
||||
font-size: 1.3em;
|
||||
}
|
||||
|
||||
#logoNav {
|
||||
flex:6;
|
||||
text-align: left;
|
||||
font-size: 2em;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.underline {
|
||||
text-decoration:underline;
|
||||
}
|
||||
|
||||
.border {
|
||||
border: solid 5px #ccc;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 700px) {
|
||||
ul {
|
||||
flex-flow: column;
|
||||
align-items:center;
|
||||
}
|
||||
|
||||
li {
|
||||
font-size: 2em;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,43 @@
|
||||
/**
|
||||
* Loading jQuery on a website and using it to manipulate the DOM
|
||||
*/
|
||||
|
||||
|
||||
/**
|
||||
* eir.ie
|
||||
*/
|
||||
// Create a new script element
|
||||
var script = document.createElement('script');
|
||||
|
||||
// Set the `src` attribute of the new script element
|
||||
script.src = "//code.jquery.com/jquery-latest.min.js";
|
||||
|
||||
// Append the new script element to the head element of the page
|
||||
document.head.appendChild(script);
|
||||
|
||||
// Find out the `font-family` of all paragraphs
|
||||
$("p").css("font-family");
|
||||
|
||||
// Find out the `font-family` of all `h2` elements
|
||||
$("h2").css("font-family");
|
||||
|
||||
// Change the text of each paragraph element to you name
|
||||
$("p").text("Aaron");
|
||||
|
||||
/**
|
||||
* Stack Overflow
|
||||
*/
|
||||
// Create a new script element
|
||||
var script = document.createElement('script');
|
||||
|
||||
// Set the `src` attribute of the new script element
|
||||
script.src = "//code.jquery.com/jquery-latest.min.js";
|
||||
|
||||
// Append the new script element to the head element of the page
|
||||
document.head.appendChild(script);
|
||||
|
||||
// Change the `background-color` of all paragraph elements
|
||||
$("p").css("background-color", "#000");
|
||||
|
||||
// Change the `font-family` of all paragraph elements
|
||||
$("p").css("font-family", "Verdana");
|
||||
@@ -0,0 +1,4 @@
|
||||
$(document).ready(function() {
|
||||
$("tr:odd").addClass("odd");
|
||||
$("tr:even").addClass("even");
|
||||
});
|
||||
@@ -0,0 +1,79 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Table</title>
|
||||
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
|
||||
|
||||
<style>
|
||||
td, th {
|
||||
width: 5rem;
|
||||
height: 2rem;
|
||||
border: 1px solid #ccc;
|
||||
text-align: center;
|
||||
}
|
||||
th {
|
||||
background: lightblue;
|
||||
border-color: white;
|
||||
}
|
||||
body {
|
||||
padding: 1rem;
|
||||
font-family: Roboto;
|
||||
}
|
||||
.odd {
|
||||
background-color: #E84610;
|
||||
}
|
||||
.even {
|
||||
background-color: #C65353;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<table>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th>Country</th>
|
||||
<th>Price</th>
|
||||
<th>Nutrition</th>
|
||||
<th>Category</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Spinach</th>
|
||||
<td>America</td>
|
||||
<td>28</td>
|
||||
<td>90</td>
|
||||
<td>Veg</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Carrots</th>
|
||||
<td>France</td>
|
||||
<td>56</td>
|
||||
<td>75</td>
|
||||
<td>Veg</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Brocolli</th>
|
||||
<td>Bulgaria</td>
|
||||
<td>12</td>
|
||||
<td>70</td>
|
||||
<td>Veg</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Orange</th>
|
||||
<td>Morocco</td>
|
||||
<td>15</td>
|
||||
<td>50</td>
|
||||
<td>Fruit</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Tangerine</th>
|
||||
<td>Cyprus</td>
|
||||
<td>12</td>
|
||||
<td>25</td>
|
||||
<td>Fruit</td>
|
||||
</tr>
|
||||
</table>
|
||||
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
|
||||
<script src="js/myscript.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,3 @@
|
||||
$(document).ready(function() {
|
||||
|
||||
});
|
||||
@@ -0,0 +1,55 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Table</title>
|
||||
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
|
||||
|
||||
<style>
|
||||
td, th {
|
||||
width: 5rem;
|
||||
height: 2rem;
|
||||
border: 1px solid #ccc;
|
||||
text-align: center;
|
||||
}
|
||||
th {
|
||||
background: lightblue;
|
||||
border-color: white;
|
||||
}
|
||||
body {
|
||||
padding: 1rem;
|
||||
font-family: Roboto;
|
||||
}
|
||||
.odd {
|
||||
background-color: #000;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<table>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th>Country</th>
|
||||
<th>Price</th>
|
||||
<th>Nutrition</th>
|
||||
<th>Category</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Spinach</th>
|
||||
<td>America</td>
|
||||
<td>28</td>
|
||||
<td>90</td>
|
||||
<td>Veg</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Carrots</th>
|
||||
<td>France</td>
|
||||
<td>56</td>
|
||||
<td>75</td>
|
||||
<td>Veg</td>
|
||||
</tr>
|
||||
</table>
|
||||
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
|
||||
<script src="js/myscript.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
BIN
FromJavaScriptTojQuery-master/03-jQueryEvents/.DS_Store
vendored
Normal file
BIN
FromJavaScriptTojQuery-master/03-jQueryEvents/.DS_Store
vendored
Normal file
Binary file not shown.
@@ -0,0 +1,75 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>jQuery</title>
|
||||
<link href="style.css" rel="stylesheet">
|
||||
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
|
||||
<link href='https://fonts.googleapis.com/css?family=Dosis' rel='stylesheet' type='text/css'>
|
||||
</head>
|
||||
<body>
|
||||
<div id="container">
|
||||
<nav>
|
||||
<ul>
|
||||
<li id="logoNav">CODE INSTITUTE</li>
|
||||
<li id="stream1_btn">Stream 1</li>
|
||||
<li id="stream2_btn">Stream 2</li>
|
||||
<li id="stream3_btn">Stream 3</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="card stream1">
|
||||
<img class="card_image" src="img/3.png" alt="html image">
|
||||
<div class="card_bottom">
|
||||
<h2 id="hr_html" class="card_head" >HTML</h2>
|
||||
<p class="card_para">Once you join a Code Institute Bootcamp you will be taken on an accelerated contextualised learning path across 3 streams. Nothing is learned in isolation.We contextualise the content so that the knowledge and skills gained in each learning unit feeds into, and is expanded upon, within the next unit.The outputs of each stream will be a project.
|
||||
</p>
|
||||
<a href="" class="bottom_button">Button</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card stream3">
|
||||
<img class="card_image" src="img/1.png" alt="mysql image">
|
||||
<h2 id="hr_mysql" class="card_head">MySql</h2>
|
||||
<p class="card_para">If you have questions about your career in coding or simply want to meet the Code Institute team, then come along to our next Careers Open Evening in Dublin</p>
|
||||
<a href="" class="bottom_button">Button</a>
|
||||
</div>
|
||||
|
||||
<div class="card stream2">
|
||||
<img class="card_image" src="img/2.png" alt="python image">
|
||||
<h2 id="hr_python" class="card_head">Python</h2>
|
||||
<p class="card_para">If you have questions about your career in coding or simply want to meet the Code Institute team, then come along to our next Careers Open Evening in Dublin</p>
|
||||
<a href="" class="bottom_button">Button</a>
|
||||
</div>
|
||||
<div class="card stream1">
|
||||
<img class="card_image" src="img/3.png" alt="jquery image">
|
||||
<div class="card_bottom">
|
||||
<h2 id="hr_jquery" class="card_head">jQuery</h2>
|
||||
<p class="card_para">Once you join a Code Institute Bootcamp you will be taken on an accelerated contextualised learning path across 3 streams. Nothing is learned in isolation.We contextualise the content so that the knowledge and skills gained in each learning unit feeds into, and is expanded upon, within the next unit.The outputs of each stream will be a project. </p>
|
||||
<a href="" class="bottom_button">Button</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card stream3">
|
||||
<img class="card_image" src="img/4.png" alt="django image">
|
||||
<h2 id="hr_django" class="card_head">Django</h2>
|
||||
<p class="card_para">The syllabus has been developed to help you transform your career. The summarised syllabus, below, provides you with a snapshop of what skills you will come away with. Feel free to contact us for more detail on what you will learn.</p>
|
||||
<a href="" class="bottom_button">Button</a>
|
||||
</div>
|
||||
<div class="card stream1">
|
||||
<img class="card_image" src="img/1.png" alt="css image">
|
||||
<h2 id="hr_css" class="card_head">CSS</h2>
|
||||
<p class="card_para">The syllabus has been developed to help you transform your career. The summarised syllabus, below, provides you with a snapshop of what skills you will come away with. Feel free to contact us for more detail on what you will learn.</p>
|
||||
<a href="" class="bottom_button">Button</a>
|
||||
</div>
|
||||
<div id="my_footer">
|
||||
<p id="copyright">Copyright Infomation</p>
|
||||
</div>
|
||||
</div>
|
||||
<script
|
||||
src="https://code.jquery.com/jquery-3.2.1.js"
|
||||
integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
|
||||
crossorigin="anonymous"></script>
|
||||
|
||||
<script src="script.js"></script> <!-- Scripts located at the bottom of the body to insure page is fully loaded before execution -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 78 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 64 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 77 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 93 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 204 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user