forked from technolyceum/g11-m2
added dom
This commit is contained in:
@@ -0,0 +1,61 @@
|
||||
.container{
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
font-size: 0px;
|
||||
}
|
||||
.theButton {
|
||||
height: 80px;
|
||||
width: 266px;
|
||||
border-radius: 8px;
|
||||
text-align: center;
|
||||
background-color: #555;
|
||||
color: #FFF;
|
||||
font-family: dosis;
|
||||
font-size: 30px;
|
||||
padding-top: 30px;
|
||||
/* display: none;*/
|
||||
border: solid 2px #fff; /* border used to stop jump when border is applied*/
|
||||
}
|
||||
.superButton {
|
||||
height: 80px;
|
||||
width: 100%;
|
||||
border-radius: 8px;
|
||||
text-align: center;
|
||||
background-color: #555;
|
||||
color: #FFF;
|
||||
font-family: dosis;
|
||||
font-size: 30px;
|
||||
padding-top: 30px;
|
||||
/* display: none;*/
|
||||
border: solid 2px #fff; /* border used to stop jump when border is applied*/
|
||||
}
|
||||
|
||||
p{
|
||||
font-family: dosis;
|
||||
font-size: 20px;
|
||||
margin-left: 10px;
|
||||
width:240px;
|
||||
}
|
||||
.makeBlue{
|
||||
background-color: #81BBC9;
|
||||
}
|
||||
|
||||
.makeBorder{
|
||||
border: solid 2px #000;
|
||||
}
|
||||
.makeTextBlack{
|
||||
color: #000;
|
||||
}
|
||||
.green{
|
||||
background-color: green;
|
||||
}
|
||||
.red{
|
||||
background-color: red;
|
||||
}
|
||||
.blue{
|
||||
background-color: blue;
|
||||
}
|
||||
.selected{
|
||||
background-color: #F07D00;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,3 @@
|
||||
$(document).ready(function() {
|
||||
// put your code here
|
||||
});
|
||||
@@ -0,0 +1,147 @@
|
||||
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;
|
||||
}
|
||||
|
||||
#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;
|
||||
}
|
||||
}
|
||||
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,8 @@
|
||||
//wait until page is ready
|
||||
$(document).ready(function() {
|
||||
//sets <a> element within paragraph to yellow
|
||||
$("p").click(function(){
|
||||
$(this).children("a").css("background-color", "yellow"); /* returns all the <a> child elements that are
|
||||
within this paragraph*/
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,73 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>jQuery Traversing Mt Dom</title>
|
||||
<link href="css/style.css" rel="stylesheet">
|
||||
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>
|
||||
<link href='https://fonts.googleapis.com/css?family=Dosis' rel='stylesheet'>
|
||||
</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="images/3.png" alt="code icon">
|
||||
<div class="card_bottom">
|
||||
<h2 class="card_head">HTML</h2>
|
||||
<p class="card_para">Once you join a <a href="#">Code Institute</a> Bootcamp you will be taken on an accelerated <a href="#">contextualised</a> 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 <a href="#">expanded</a> upon, within the next unit.The outputs of each stream will be a project. </p>
|
||||
<button class="bottom_button">Button</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card stream3">
|
||||
<img class="card_image" src="images/1.png" alt="code icon">
|
||||
<h2 class="card_head">MySql</h2>
|
||||
<p class="card_para">If you have questions about your <a href="#">career</a> in coding or simply want to meet the Code Institute team, then come along to our next Careers Open Evening in Dublin</p>
|
||||
<button class="bottom_button">Button</button>
|
||||
</div>
|
||||
|
||||
<div class="card stream2">
|
||||
<img class="card_image" src="images/2.png" alt="code icon">
|
||||
<h2 class="card_head">Python</h2>
|
||||
<p class="card_para">If you have <a href="#">questions</a> about your career in coding or simply want to meet the Code Institute team, then come along to our next <a href="#">Careers</a> Open Evening in Dublin</p>
|
||||
<button class="bottom_button">Button</button>
|
||||
</div>
|
||||
<div class="card stream1">
|
||||
<img class="card_image" src="images/3.png" alt="code 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 <a href="#">streams</a>. Nothing is learned in isolation.We contextualise the content so that the knowledge and skills gained in each <a href="#">learning</a> unit feeds into, and is expanded upon, within the next unit.The outputs of each stream will be a project. </p>
|
||||
<button class="bottom_button">Button</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card stream3">
|
||||
<img class="card_image" src="images/4.png" alt="code 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 <a href="#">snapshop</a> of what skills you will come away with. Feel free to contact us for more detail on what you will learn.</p>
|
||||
<button class="bottom_button">Button</button>
|
||||
</div>
|
||||
<div class="card stream1">
|
||||
<img class="card_image" src="images/1.png" alt="code icon">
|
||||
<h2 class="card_head">CSS</h2>
|
||||
<p class="card_para">The <a href="#">syllabus</a> 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 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="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,147 @@
|
||||
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;
|
||||
}
|
||||
|
||||
#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;
|
||||
}
|
||||
}
|
||||
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,73 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>jQuery Traversing Mt Dom</title>
|
||||
<link href="css/style.css" rel="stylesheet">
|
||||
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>
|
||||
<link href='https://fonts.googleapis.com/css?family=Dosis' rel='stylesheet'>
|
||||
</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="images/3.png" alt="code icon">
|
||||
<div class="card_bottom">
|
||||
<h2 class="card_head">HTML</h2>
|
||||
<p class="card_para">Once you join a <a href="#">Code Institute</a> Bootcamp you will be taken on an accelerated <a href="#">contextualised</a> 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 <a href="#">expanded</a> upon, within the next unit.The outputs of each stream will be a project. </p>
|
||||
<button class="bottom_button">Button</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card stream3">
|
||||
<img class="card_image" src="images/1.png" alt="code icon">
|
||||
<h2 class="card_head">MySql</h2>
|
||||
<p class="card_para">If you have questions about your <a href="#">career</a> in coding or simply want to meet the Code Institute team, then come along to our next Careers Open Evening in Dublin</p>
|
||||
<button class="bottom_button">Button</button>
|
||||
</div>
|
||||
|
||||
<div class="card stream2">
|
||||
<img class="card_image" src="images/2.png" alt="code icon">
|
||||
<h2 class="card_head">Python</h2>
|
||||
<p class="card_para">If you have <a href="#">questions</a> about your career in coding or simply want to meet the Code Institute team, then come along to our next <a href="#">Careers</a> Open Evening in Dublin</p>
|
||||
<button class="bottom_button">Button</button>
|
||||
</div>
|
||||
<div class="card stream1">
|
||||
<img class="card_image" src="images/3.png" alt="code 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 <a href="#">streams</a>. Nothing is learned in isolation.We contextualise the content so that the knowledge and skills gained in each <a href="#">learning</a> unit feeds into, and is expanded upon, within the next unit.The outputs of each stream will be a project. </p>
|
||||
<button class="bottom_button">Button</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card stream3">
|
||||
<img class="card_image" src="images/4.png" alt="code 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 <a href="#">snapshop</a> of what skills you will come away with. Feel free to contact us for more detail on what you will learn.</p>
|
||||
<button class="bottom_button">Button</button>
|
||||
</div>
|
||||
<div class="card stream1">
|
||||
<img class="card_image" src="images/1.png" alt="code icon">
|
||||
<h2 class="card_head">CSS</h2>
|
||||
<p class="card_para">The <a href="#">syllabus</a> 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 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="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,13 @@
|
||||
//wait until page is ready
|
||||
$(document).ready(function() {
|
||||
//sets <a> element within paragraph to yellow
|
||||
$("p").click(function(){
|
||||
$(this).children("a").css("background-color", "yellow"); /* returns all the <a> child elements that are
|
||||
within this paragraph*/
|
||||
});
|
||||
|
||||
// Toggle the visibility of the paragraph when a button is clicked
|
||||
$("button").click(function(){
|
||||
$(this).next().slideToggle('slow');
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,148 @@
|
||||
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;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#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;
|
||||
}
|
||||
|
||||
#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;
|
||||
}
|
||||
}
|
||||
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,81 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>jQuery Traversing Mt Dom</title>
|
||||
<link href="css/style.css" rel="stylesheet">
|
||||
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>
|
||||
<link href='https://fonts.googleapis.com/css?family=Dosis' rel='stylesheet'>
|
||||
</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="images/3.png" alt="code icon">
|
||||
<div class="card_bottom">
|
||||
<h2 class="card_head">HTML</h2>
|
||||
<p class="card_para">Once you join a <a href="#">Code Institute</a> Bootcamp you will be taken on an accelerated <a href="#">contextualised</a> 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 <a href="#">expanded</a> upon, within the next unit.The outputs of each stream will be a project. </p>
|
||||
<button class="bottom_button">Button</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card stream3">
|
||||
<img class="card_image" src="images/1.png" alt="code icon">
|
||||
<div class="card_bottom">
|
||||
<h2 class="card_head">MySql</h2>
|
||||
<p class="card_para">If you have questions about your <a href="#">career</a> in coding or simply want to meet the Code Institute team, then come along to our next Careers Open Evening in Dublin</p>
|
||||
<button class="bottom_button">Button</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card stream2">
|
||||
<img class="card_image" src="images/2.png" alt="code icon">
|
||||
<div class="card_bottom">
|
||||
<h2 class="card_head">Python</h2>
|
||||
<p class="card_para">If you have <a href="#">questions</a> about your career in coding or simply want to meet the Code Institute team, then come along to our next <a href="#">Careers</a> Open Evening in Dublin</p>
|
||||
<button class="bottom_button">Button</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card stream1">
|
||||
<img class="card_image" src="images/3.png" alt="code 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 <a href="#">streams</a>. Nothing is learned in isolation.We contextualise the content so that the knowledge and skills gained in each <a href="#">learning</a> unit feeds into, and is expanded upon, within the next unit.The outputs of each stream will be a project. </p>
|
||||
<button class="bottom_button">Button</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card stream3">
|
||||
<img class="card_image" src="images/4.png" alt="code icon">
|
||||
<div class="card_bottom">
|
||||
<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 <a href="#">snapshop</a> of what skills you will come away with. Feel free to contact us for more detail on what you will learn.</p>
|
||||
<button class="bottom_button">Button</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card stream1">
|
||||
<img class="card_image" src="images/1.png" alt="code icon">
|
||||
<div class="card_bottom">
|
||||
<h2 class="card_head">CSS</h2>
|
||||
<p class="card_para">The <a href="#">syllabus</a> 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 class="bottom_button">Button</button>
|
||||
</div>
|
||||
</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="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,18 @@
|
||||
//wait until page is ready
|
||||
$(document).ready(function() {
|
||||
//sets <a> element within paragraph to yellow
|
||||
$("p").click(function(){
|
||||
$(this).children("a").css("background-color", "yellow"); /* returns all the <a> child elements that are
|
||||
within this paragraph*/
|
||||
});
|
||||
|
||||
// Toggle the visibility of the paragraph when a button is clicked
|
||||
$("button").click(function(){
|
||||
$(this).prev().slideToggle('slow');
|
||||
});
|
||||
|
||||
// Open the paragraph once the image is clicked
|
||||
$("img").click(function() {
|
||||
$(this).next().children("p").slideDown();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,152 @@
|
||||
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;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#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{
|
||||
background-color: pink;
|
||||
}
|
||||
|
||||
#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;
|
||||
}
|
||||
}
|
||||
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,81 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>jQuery Traversing Mt Dom</title>
|
||||
<link href="css/style.css" rel="stylesheet">
|
||||
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>
|
||||
<link href='https://fonts.googleapis.com/css?family=Dosis' rel='stylesheet'>
|
||||
</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="images/3.png" alt="code icon">
|
||||
<div class="card_bottom">
|
||||
<h2 class="card_head">HTML</h2>
|
||||
<p class="card_para">Once you join a <a href="#">Code Institute</a> Bootcamp you will be taken on an accelerated <a href="#">contextualised</a> 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 <a href="#">expanded</a> upon, within the next unit.The outputs of each stream will be a project. </p>
|
||||
<button class="bottom_button">Button</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card stream3">
|
||||
<img class="card_image" src="images/1.png" alt="code icon">
|
||||
<div class="card_bottom">
|
||||
<h2 class="card_head">MySql</h2>
|
||||
<p class="card_para">If you have questions about your <a href="#">career</a> in coding or simply want to meet the Code Institute team, then come along to our next Careers Open Evening in Dublin</p>
|
||||
<button class="bottom_button">Button</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card stream2">
|
||||
<img class="card_image" src="images/2.png" alt="code icon">
|
||||
<div class="card_bottom">
|
||||
<h2 class="card_head">Python</h2>
|
||||
<p class="card_para">If you have <a href="#">questions</a> about your career in coding or simply want to meet the Code Institute team, then come along to our next <a href="#">Careers</a> Open Evening in Dublin</p>
|
||||
<button class="bottom_button">Button</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card stream1">
|
||||
<img class="card_image" src="images/3.png" alt="code 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 <a href="#">streams</a>. Nothing is learned in isolation.We contextualise the content so that the knowledge and skills gained in each <a href="#">learning</a> unit feeds into, and is expanded upon, within the next unit.The outputs of each stream will be a project. </p>
|
||||
<button class="bottom_button">Button</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card stream3">
|
||||
<img class="card_image" src="images/4.png" alt="code icon">
|
||||
<div class="card_bottom">
|
||||
<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 <a href="#">snapshop</a> of what skills you will come away with. Feel free to contact us for more detail on what you will learn.</p>
|
||||
<button class="bottom_button">Button</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card stream1">
|
||||
<img class="card_image" src="images/1.png" alt="code icon">
|
||||
<div class="card_bottom">
|
||||
<h2 class="card_head">CSS</h2>
|
||||
<p class="card_para">The <a href="#">syllabus</a> 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 class="bottom_button">Button</button>
|
||||
</div>
|
||||
</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="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,22 @@
|
||||
//wait until page is ready
|
||||
$(document).ready(function() {
|
||||
//sets <a> element within paragraph to yellow
|
||||
$("p").click(function(){
|
||||
$(this).children("a").css("background-color", "yellow"); /* returns all the <a> child elements that are
|
||||
within this paragraph*/
|
||||
});
|
||||
|
||||
// Toggle the visibility of the paragraph when a button is clicked
|
||||
$("button").click(function(){
|
||||
$(this).prev().slideToggle('slow');
|
||||
});
|
||||
|
||||
// Open the paragraph once the image is clicked
|
||||
$("img").click(function() {
|
||||
$(this).next().children("p").slideDown();
|
||||
});
|
||||
|
||||
$(".card").click(function() {
|
||||
$(this).toggleClass("highlight");
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,152 @@
|
||||
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;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#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{
|
||||
background-color: pink;
|
||||
}
|
||||
|
||||
#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;
|
||||
}
|
||||
}
|
||||
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,83 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>jQuery Traversing Mt Dom</title>
|
||||
<link href="css/style.css" rel="stylesheet">
|
||||
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>
|
||||
<link href='https://fonts.googleapis.com/css?family=Dosis' rel='stylesheet'>
|
||||
</head>
|
||||
<body>
|
||||
<div id="container">
|
||||
<nav>
|
||||
<ul>
|
||||
<li id="logoNav">CODE INSTITUTE</li>
|
||||
<li id="all_btn">All</li>
|
||||
<li id="stream1_btn">Stream 1</li>
|
||||
<li id="stream2_btn">Stream 2</li>
|
||||
<li id="stream3_btn">Stream 3</li>
|
||||
<li id="select_btn">Select</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="card stream1">
|
||||
<img class="card_image" src="images/3.png" alt="code icon">
|
||||
<div class="card_bottom">
|
||||
<h2 class="card_head">HTML</h2>
|
||||
<p class="card_para">Once you join a <a href="#">Code Institute</a> Bootcamp you will be taken on an accelerated <a href="#">contextualised</a> 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 <a href="#">expanded</a> upon, within the next unit.The outputs of each stream will be a project. </p>
|
||||
<button class="bottom_button">Button</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card stream3">
|
||||
<img class="card_image" src="images/1.png" alt="code icon">
|
||||
<div class="card_bottom">
|
||||
<h2 class="card_head">MySql</h2>
|
||||
<p class="card_para">If you have questions about your <a href="#">career</a> in coding or simply want to meet the Code Institute team, then come along to our next Careers Open Evening in Dublin</p>
|
||||
<button class="bottom_button">Button</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card stream2">
|
||||
<img class="card_image" src="images/2.png" alt="code icon">
|
||||
<div class="card_bottom">
|
||||
<h2 class="card_head">Python</h2>
|
||||
<p class="card_para">If you have <a href="#">questions</a> about your career in coding or simply want to meet the Code Institute team, then come along to our next <a href="#">Careers</a> Open Evening in Dublin</p>
|
||||
<button class="bottom_button">Button</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card stream1">
|
||||
<img class="card_image" src="images/3.png" alt="code 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 <a href="#">streams</a>. Nothing is learned in isolation.We contextualise the content so that the knowledge and skills gained in each <a href="#">learning</a> unit feeds into, and is expanded upon, within the next unit.The outputs of each stream will be a project. </p>
|
||||
<button class="bottom_button">Button</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card stream3">
|
||||
<img class="card_image" src="images/4.png" alt="code icon">
|
||||
<div class="card_bottom">
|
||||
<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 <a href="#">snapshop</a> of what skills you will come away with. Feel free to contact us for more detail on what you will learn.</p>
|
||||
<button class="bottom_button">Button</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card stream1">
|
||||
<img class="card_image" src="images/1.png" alt="code icon">
|
||||
<div class="card_bottom">
|
||||
<h2 class="card_head">CSS</h2>
|
||||
<p class="card_para">The <a href="#">syllabus</a> 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 class="bottom_button">Button</button>
|
||||
</div>
|
||||
</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="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,32 @@
|
||||
//wait until page is ready
|
||||
$(document).ready(function() {
|
||||
//sets <a> element within paragraph to yellow
|
||||
$("p").click(function(){
|
||||
$(this).children("a").css("background-color", "yellow"); /* returns all the <a> child elements that are
|
||||
within this paragraph*/
|
||||
});
|
||||
|
||||
// Toggle the visibility of the paragraph when a button is clicked
|
||||
$("button").click(function(){
|
||||
$(this).prev().slideToggle('slow');
|
||||
});
|
||||
|
||||
// Open the paragraph once the image is clicked
|
||||
$("img").click(function() {
|
||||
$(this).next().children("p").slideDown();
|
||||
});
|
||||
|
||||
$(".card").click(function() {
|
||||
$(this).toggleClass("highlight");
|
||||
});
|
||||
|
||||
// All cards that are not currently selected will be hidden when `select_btn` is clicked
|
||||
$("#select_btn").click(function() {
|
||||
$(".card:not(.highlight)").hide();
|
||||
});
|
||||
|
||||
// Select all cards
|
||||
$("#all_btn").click(function(){
|
||||
$(".card").show();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,68 @@
|
||||
.container {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
font-size: 0px;
|
||||
}
|
||||
|
||||
.theButton {
|
||||
height: 80px;
|
||||
width: 266px;
|
||||
border-radius: 8px;
|
||||
text-align: center;
|
||||
background-color: #555;
|
||||
color: #FFF;
|
||||
font-family: dosis;
|
||||
font-size: 30px;
|
||||
padding-top: 30px;
|
||||
border: solid 2px #fff; /* border used to stop jump when border is applied*/
|
||||
}
|
||||
|
||||
.superButton {
|
||||
height: 80px;
|
||||
width: 100%;
|
||||
border-radius: 8px;
|
||||
text-align: center;
|
||||
background-color: #555;
|
||||
color: #FFF;
|
||||
font-family: dosis;
|
||||
font-size: 30px;
|
||||
padding-top: 30px;
|
||||
/* display: none;*/
|
||||
border: solid 2px #fff; /* border used to stop jump when border is applied*/
|
||||
}
|
||||
|
||||
p {
|
||||
font-family: dosis;
|
||||
font-size: 20px;
|
||||
margin-left: 10px;
|
||||
width:240px;
|
||||
}
|
||||
|
||||
.makeBlue {
|
||||
background-color: #81BBC9;
|
||||
}
|
||||
|
||||
.makeBorder {
|
||||
border: solid 2px #000;
|
||||
}
|
||||
|
||||
.green {
|
||||
background-color: #008000;
|
||||
}
|
||||
|
||||
.red {
|
||||
background-color: #FF0000;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background-color: #0000FF;
|
||||
}
|
||||
|
||||
.selected {
|
||||
background-color: #F07D00;
|
||||
}
|
||||
|
||||
/*make sure to add after all other color classes to advoid cascade issues*/
|
||||
.makeBlack {
|
||||
background-color: #000000;
|
||||
}
|
||||
@@ -0,0 +1,53 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Challenge A</title>
|
||||
<!--add css here-->
|
||||
<link rel='stylesheet' href='css/style.css'/>
|
||||
<script
|
||||
src="https://code.jquery.com/jquery-3.2.1.js"
|
||||
integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
|
||||
crossorigin="anonymous"></script>
|
||||
<link href='https://fonts.googleapis.com/css?family=Dosis' rel='stylesheet'>
|
||||
</head>
|
||||
<body>
|
||||
<div class="superButton makeBlue">Reset</div>
|
||||
|
||||
<div id="panel">
|
||||
<div class="container">
|
||||
|
||||
<div class="container">
|
||||
<div class="theButton makeBlue red"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="theButton makeBlue green"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="theButton makeBlue blue"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="theButton makeBlue blue"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="theButton makeBlue red"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="theButton makeBlue green"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="theButton makeBlue red"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="theButton makeBlue green"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="theButton makeBlue blue"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="theButton makeBlue green"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div> <!--ensures page has loaded when scripts placed at body bottom-->
|
||||
<script src="js/script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,34 @@
|
||||
//waits until page is ready
|
||||
$(document).ready(function(){
|
||||
|
||||
//will need to comment out some code when trying to view effects on theeir own
|
||||
//hides all panels when a panel is clicked
|
||||
$(".theButton").click(function(){
|
||||
$("#panel .container").siblings().hide();
|
||||
});
|
||||
|
||||
//hides only the panel that was clicked
|
||||
$(".theButton").click(function(){
|
||||
$(this).hide();
|
||||
})
|
||||
|
||||
//adds a fadeTo to all panels when a panel is clicked
|
||||
$(".theButton").click(function(){
|
||||
$("#panel .container").siblings().fadeTo(1000, .5);
|
||||
});
|
||||
|
||||
//restores all panels to full opacity when reset button clicked
|
||||
$(".superButton").click(function(){
|
||||
$("#panel .container").siblings().fadeTo(1000,1);
|
||||
});
|
||||
|
||||
//turns panel background black on mouseenter
|
||||
$(".theButton").mouseenter(function(){
|
||||
$(this).addClass("makeBlack");
|
||||
});
|
||||
|
||||
//returns to original colour on mouseout
|
||||
$(".theButton").mouseout(function(){
|
||||
$(this).removeClass("makeBlack");
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,86 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Challenge B</title>
|
||||
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>
|
||||
<script
|
||||
src="https://code.jquery.com/jquery-3.2.1.js"
|
||||
integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
|
||||
crossorigin="anonymous"></script>
|
||||
<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;
|
||||
}
|
||||
/*class to be added to jquery function to change row colors*/
|
||||
.selection{
|
||||
background-color: #c65353;
|
||||
}
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<!--create a table-->
|
||||
<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>Broccoli</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>
|
||||
<!--add your own jquery files here-->
|
||||
<script src="js/script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,9 @@
|
||||
//will wait until page ready
|
||||
$(document).ready(function() {
|
||||
/*when table header is clicked , removes selection class from all other table rows and
|
||||
adds the selection class to this table headers row only*/
|
||||
$("th").click(function(){
|
||||
$("tr").children().removeClass("selection");
|
||||
$(this).siblings().addClass("selection");
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,67 @@
|
||||
.container {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
font-size: 0px;
|
||||
}
|
||||
|
||||
.theButton {
|
||||
height: 80px;
|
||||
width: 266px;
|
||||
border-radius: 8px;
|
||||
text-align: center;
|
||||
background-color: #555;
|
||||
color: #FFF;
|
||||
font-family: dosis;
|
||||
font-size: 30px;
|
||||
padding-top: 30px;
|
||||
border: solid 2px #fff; /* border used to stop jump when border is applied*/
|
||||
}
|
||||
|
||||
.superButton {
|
||||
height: 80px;
|
||||
width: 100%;
|
||||
border-radius: 8px;
|
||||
text-align: center;
|
||||
background-color: #555;
|
||||
color: #FFF;
|
||||
font-family: dosis;
|
||||
font-size: 30px;
|
||||
padding-top: 30px;
|
||||
/* display: none;*/
|
||||
border: solid 2px #fff; /* border used to stop jump when border is applied*/
|
||||
}
|
||||
|
||||
p {
|
||||
font-family: dosis;
|
||||
font-size: 20px;
|
||||
margin-left: 10px;
|
||||
width:240px;
|
||||
}
|
||||
|
||||
.makeBlue {
|
||||
background-color: #81BBC9;
|
||||
}
|
||||
|
||||
.makeBorder {
|
||||
border: solid 2px #000;
|
||||
}
|
||||
|
||||
.green {
|
||||
background-color: #008000;
|
||||
}
|
||||
.red {
|
||||
background-color: #FF0000;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background-color: #0000FF;
|
||||
}
|
||||
|
||||
.selected{
|
||||
background-color: #F07D00;
|
||||
}
|
||||
|
||||
/*make sure to add after all other color classes to advoid cascade issues*/
|
||||
.makeBlack {
|
||||
background-color: #000000;
|
||||
}
|
||||
@@ -0,0 +1,53 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Challenge A</title>
|
||||
<!--add css here-->
|
||||
<link rel='stylesheet' href='css/style.css'/>
|
||||
<script
|
||||
src="https://code.jquery.com/jquery-3.2.1.js"
|
||||
integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
|
||||
crossorigin="anonymous"></script>
|
||||
<link href='https://fonts.googleapis.com/css?family=Dosis' rel='stylesheet'>
|
||||
</head>
|
||||
<body>
|
||||
<div class="superButton makeBlue">Reset</div>
|
||||
|
||||
<div id="panel">
|
||||
<div class="container">
|
||||
|
||||
<div class="container">
|
||||
<div class="theButton makeBlue red"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="theButton makeBlue green"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="theButton makeBlue blue"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="theButton makeBlue blue"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="theButton makeBlue red"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="theButton makeBlue green"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="theButton makeBlue red"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="theButton makeBlue green"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="theButton makeBlue blue"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="theButton makeBlue green"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div> <!--ensures page has loaded when scripts placed at body bottom-->
|
||||
<script src="js/script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,8 @@
|
||||
//waits until page is ready
|
||||
$(document).ready(function(){
|
||||
//will display rgb value of selected panel in the reset panel
|
||||
$(".theButton").click(function() {
|
||||
var col = $(this).css('background-color');
|
||||
$('.superButton').text( col);
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user