forked from technolyceum/g11-m2
added dom
This commit is contained in:
@@ -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();
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user