Added dirocty from javascript to jquery
@@ -0,0 +1,24 @@
|
||||
<!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>
|
||||
<button id='button2' class="bottom_button">Button 2</button>
|
||||
<p id='para2' 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,53 @@
|
||||
|
||||
#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;
|
||||
}
|
||||
|
||||
|
||||
|
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,13 @@
|
||||
$(document).ready(function() {
|
||||
//
|
||||
// add your jQuery code here
|
||||
// hides/shows paragraphs when either button is clicked
|
||||
$("button").click(function() {
|
||||
$("p").hide(2000).show(2000);
|
||||
});
|
||||
|
||||
$("button").click(function(){
|
||||
$("p").fadeIn().fadeOut();
|
||||
});
|
||||
|
||||
});
|
||||