Added dirocty from javascript to jquery
@@ -0,0 +1,22 @@
|
||||
<!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="css/style.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<div id="container">
|
||||
<div class='card'>
|
||||
<button id='button1' class="bottom_button">Button 1</button>
|
||||
<p id='para1' 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>
|
||||
</div>
|
||||
</div>
|
||||
<script src="https://code.jquery.com/jquery-3.2.1.js"
|
||||
integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
|
||||
crossorigin="anonymous"></script>
|
||||
<script src="js/script.js"></script> <!-- Scripts located at the bottom of the body to insure page is fully loaded before execution -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,59 @@
|
||||
|
||||
#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;
|
||||
}
|
||||
.bottom_button{
|
||||
display: flex;
|
||||
box-sizing:border-box;
|
||||
border-radius: 4px;
|
||||
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{
|
||||
flex:1; /* */
|
||||
display: flex; /* make the contents controllable by flexbox*/
|
||||
flex-flow:column; /* */
|
||||
max-width: 240px; /**/
|
||||
margin: 10px;
|
||||
padding: 20px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
|
||||
/*************************
|
||||
Navigation
|
||||
|
||||
**************************/
|
||||
|
||||
|
||||
.underline{
|
||||
text-decoration:underline;
|
||||
}
|
||||
.border{
|
||||
border: solid 5px #ccc;
|
||||
}
|
||||
|
||||
.makeRed{
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
.makeBorder{
|
||||
border:2px;
|
||||
}
|
||||
|
After Width: | Height: | Size: 78 KiB |
|
After Width: | Height: | Size: 64 KiB |
|
After Width: | Height: | Size: 77 KiB |
|
After Width: | Height: | Size: 93 KiB |
|
After Width: | Height: | Size: 204 KiB |
|
After Width: | Height: | Size: 32 KiB |
|
After Width: | Height: | Size: 28 KiB |
|
After Width: | Height: | Size: 34 KiB |
|
After Width: | Height: | Size: 36 KiB |
@@ -0,0 +1,12 @@
|
||||
$(document).ready(function() {
|
||||
//
|
||||
// add your jQuery code here
|
||||
$("#button1").mouseenter(function(){
|
||||
$('#button1').removeClass("makeRed").addClass("makeBorder");
|
||||
});
|
||||
|
||||
$("#button1").mouseleave(function(){
|
||||
$("#button1").removeClass("makeBorder").addClass("makeRed");
|
||||
});
|
||||
|
||||
});
|
||||
@@ -0,0 +1,22 @@
|
||||
<!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="css/style.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<div id="container">
|
||||
<div class='card'>
|
||||
<button id='button1' class="bottom_button">Button 1</button>
|
||||
<p id='para1' 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>
|
||||
</div>
|
||||
</div>
|
||||
<script src="https://code.jquery.com/jquery-3.2.1.js"
|
||||
integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
|
||||
crossorigin="anonymous"></script>
|
||||
<script src="js/script.js"></script> <!-- Scripts located at the bottom of the body to insure page is fully loaded before execution -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,59 @@
|
||||
|
||||
#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;
|
||||
}
|
||||
.bottom_button{
|
||||
display: flex;
|
||||
box-sizing:border-box;
|
||||
border-radius: 4px;
|
||||
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{
|
||||
flex:1; /* */
|
||||
display: flex; /* make the contents controllable by flexbox*/
|
||||
flex-flow:column; /* */
|
||||
max-width: 240px; /**/
|
||||
margin: 10px;
|
||||
padding: 20px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
|
||||
/*************************
|
||||
Navigation
|
||||
|
||||
**************************/
|
||||
|
||||
|
||||
.underline{
|
||||
text-decoration:underline;
|
||||
}
|
||||
.border{
|
||||
border: solid 5px #ccc;
|
||||
}
|
||||
|
||||
.makeRed{
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
.makeBorder{
|
||||
border:2px;
|
||||
}
|
||||
|
After Width: | Height: | Size: 78 KiB |
|
After Width: | Height: | Size: 64 KiB |
|
After Width: | Height: | Size: 77 KiB |
|
After Width: | Height: | Size: 93 KiB |
|
After Width: | Height: | Size: 204 KiB |
|
After Width: | Height: | Size: 32 KiB |
|
After Width: | Height: | Size: 28 KiB |
|
After Width: | Height: | Size: 34 KiB |
|
After Width: | Height: | Size: 36 KiB |
@@ -0,0 +1,6 @@
|
||||
$(document).ready(function() {
|
||||
|
||||
|
||||
|
||||
|
||||
});
|
||||
@@ -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 id="par1" 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>
|
||||
<button id="button_effects1" class="bottom_button">Button</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card stream3">
|
||||
<img class="card_image" src="img/1.png" alt="coding icon">
|
||||
<h2 class="card_head">MySql</h2>
|
||||
<p id="par2" 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>
|
||||
<button id="button_effects2" class="bottom_button">Button</button>
|
||||
</div>
|
||||
|
||||
<div class="card stream2">
|
||||
<img class="card_image" src="img/2.png" alt="coding icon">
|
||||
<h2 class="card_head">Python</h2>
|
||||
<p id="par3" 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>
|
||||
<button id="button_effects3" class="bottom_button">Button</button>
|
||||
</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 id="par4" 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>
|
||||
<button id="button_effects4" class="bottom_button">Button</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card stream3">
|
||||
<img class="card_image" src="img/4.png" alt="coding icon">
|
||||
<h2 class="card_head">Django</h2>
|
||||
<p id="par5" 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>
|
||||
<button id="button_effects5" class="bottom_button">Button</button>
|
||||
</div>
|
||||
<div class="card stream1">
|
||||
<img class="card_image" src="img/1.png" alt="coding icon">
|
||||
<h2 class="card_head">CSS</h2>
|
||||
<p id="par6" 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>
|
||||
<button id="button_effects6" class="bottom_button">Button</button>
|
||||
</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>
|
||||
|
After Width: | Height: | Size: 78 KiB |
|
After Width: | Height: | Size: 64 KiB |
|
After Width: | Height: | Size: 77 KiB |
|
After Width: | Height: | Size: 93 KiB |
|
After Width: | Height: | Size: 204 KiB |
|
After Width: | Height: | Size: 32 KiB |
|
After Width: | Height: | Size: 28 KiB |
|
After Width: | Height: | Size: 34 KiB |
|
After Width: | Height: | Size: 36 KiB |
@@ -0,0 +1,70 @@
|
||||
$(document).ready(function() {
|
||||
// Create the slideToggle effects each of the paragraphs and
|
||||
// buttons
|
||||
$("#button_effects1").click(function(){
|
||||
$('#par1').slideToggle('1000');
|
||||
});
|
||||
$("#button_effects2").click(function(){
|
||||
$('#par2').slideToggle('1000');
|
||||
});
|
||||
$("#button_effects3").click(function(){
|
||||
$('#par3').slideToggle('1000');
|
||||
});
|
||||
$("#button_effects4").click(function(){
|
||||
$('#par4').slideToggle('1000');
|
||||
});
|
||||
$("#button_effects5").click(function(){
|
||||
$('#par5').slideToggle('1000');
|
||||
});
|
||||
$("#button_effects6").click(function(){
|
||||
$('#par6').slideToggle('1000');
|
||||
});
|
||||
|
||||
// Use the fadeTo effect when the mouse hovers over a specific button
|
||||
// and fadeTo again when the mouse is no longer hovering over the button
|
||||
$("#button_effects1").mouseenter(function(){
|
||||
$('#button_effects1').fadeTo(1000, 0.5);
|
||||
});
|
||||
$("#button_effects1").mouseleave(function(){
|
||||
$('#button_effects1').fadeTo(1000, 1);
|
||||
});
|
||||
|
||||
$("#button_effects2").mouseenter(function(){
|
||||
$('#button_effects2').fadeTo(1000, 0.5);
|
||||
});
|
||||
$("#button_effects2").mouseleave(function(){
|
||||
$('#button_effects2').fadeTo(1000, 1);
|
||||
});
|
||||
|
||||
$("#button_effects3").mouseenter(function(){
|
||||
$('#button_effects3').fadeTo(1000, 0.5);
|
||||
});
|
||||
$("#button_effects3").mouseleave(function(){
|
||||
$('#button_effects3').fadeTo(1000, 1);
|
||||
});
|
||||
|
||||
$("#button_effects4").mouseenter(function(){
|
||||
$('#button_effects4').fadeTo(1000, 0.5);
|
||||
});
|
||||
$("#button_effects4").mouseleave(function(){
|
||||
$('#button_effects4').fadeTo(1000, 1);
|
||||
});
|
||||
|
||||
$("#button_effects5").mouseenter(function(){
|
||||
$('#button_effects5').fadeTo(1000, 0.5);
|
||||
});
|
||||
$("#button_effects5").mouseleave(function(){
|
||||
$('#button_effects5').fadeTo(1000, 1);
|
||||
});
|
||||
|
||||
$("#button_effects6").mouseenter(function(){
|
||||
$('#button_effects6').fadeTo(1000, 0.5);
|
||||
});
|
||||
$("#button_effects6").mouseleave(function(){
|
||||
$('#button_effects6').fadeTo(1000, 1);
|
||||
});
|
||||
|
||||
$("#myButton").removeClass("blueBox").addClass("border");
|
||||
$("p").css("color", "blue").slideUp(2000).slideDown(2000);
|
||||
$("a").attr("href", "http://www.example.com");
|
||||
});
|
||||
@@ -0,0 +1,156 @@
|
||||
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;
|
||||
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;
|
||||
}
|
||||
}
|
||||