Skip to content
Snippets Groups Projects
Commit 4f049f19 authored by Jonathon Stadon's avatar Jonathon Stadon
Browse files

worksheet 2 added

parent 2e04036b
No related branches found
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
Showing
with 199 additions and 0 deletions
.DS_Store
+ 0
− 0
View file @ 4f049f19
No preview for this file type
Ability_Sports/images/image1.jpg 0 → 100644
+ 0
− 0
View file @ 4f049f19
Ability_Sports/images/image1.jpg

105 KiB

Ability_Sports/images/image2.jpg 0 → 100644
+ 0
− 0
View file @ 4f049f19
Ability_Sports/images/image2.jpg

73.2 KiB

Ability_Sports/images/image3.jpg 0 → 100644
+ 0
− 0
View file @ 4f049f19
Ability_Sports/images/image3.jpg

103 KiB

Ability_Sports/images/image4.jpg 0 → 100644
+ 0
− 0
View file @ 4f049f19
Ability_Sports/images/image4.jpg

9.05 KiB

Ability_Sports/images/logo.png 0 → 100644
+ 0
− 0
View file @ 4f049f19
Ability_Sports/images/logo.png

8.51 KiB

Ability_Sports/index.html 0 → 100644
+ 92
− 0
View file @ 4f049f19
<!DOCTYPE html>
<html lang="en">
<head> <!-- browser configuration -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ability Sports - Grids examples</title>
<link rel="stylesheet" href="styles/main.css">
</head>
<body> <!-- viewable space-->
<header>
<div id="header_logo-tag"> <!-- logo and tag line-->
<p id="tagline">tag line...</p>
<img id="logo" src="images/logo.png" alt="logo" srcset="">
</div>
<nav> <!-- nagivation bar-->
<ul>
<li><a href="home.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="events.html">Events</a></li>
</ul>
</nav>
</header>
<main>
<section>
<article> <!-- images of previous events-->
</article>
</section>
<section> <!--hightlights bottom of page-->
<article id="stories">
<div id="story 1" class="story">
<img id="story1_img" src="images/image1.jpg" alt="red" srcset="">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt
orci sed turpis commodo, ac convallis sem tincidunt. Phasellus ac ultricies
odio. Aliquam libero purus, auctor vitae sodales non, efficitur eget urna.
Etiam iaculis condimentum justo a pellentesque. Donec bibendum ante augue,
ut ultricies ligula tristique non. Donec id ante id mi accumsan maximus at a
odio. Nam malesuada, nunc nec ultrices ultrices, metus sapien malesuada ante,
eu lacinia ligula elit non neque. ,<a href="story1-more.html">more</a></p>
</div>
<div id="story 2" class="story">
<img id="story2_img" src="images/image2.jpg" alt="potter" srcset="">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt
orci sed turpis commodo, ac convallis sem tincidunt. Phasellus ac ultricies
odio. Aliquam libero purus, auctor vitae sodales non, efficitur eget urna.
Etiam iaculis condimentum justo a pellentesque. Donec bibendum ante augue,
ut ultricies ligula tristique non. Donec id ante id mi accumsan maximus at a
odio. Nam malesuada, nunc nec ultrices ultrices, metus sapien malesuada ante,
eu lacinia ligula elit non neque. ,<a href="story1-more.html">more</a></p>
</div>
<div id="story 3" class="story">
<img id="story3_img" src="images/image3.jpg" alt="boo" srcset="">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt
orci sed turpis commodo, ac convallis sem tincidunt. Phasellus ac ultricies
odio. Aliquam libero purus, auctor vitae sodales non, efficitur eget urna.
Etiam iaculis condimentum justo a pellentesque. Donec bibendum ante augue,
ut ultricies ligula tristique non. Donec id ante id mi accumsan maximus at a
odio. Nam malesuada, nunc nec ultrices ultrices, metus sapien malesuada ante,
eu lacinia ligula elit non neque. ,<a href="story1-more.html">more</a></p>
</div>
<div id="story 4" class="story">
<img id="story4_img" src="images/image4.jpg" alt="toy story" srcset="">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt
orci sed turpis commodo, ac convallis sem tincidunt. Phasellus ac ultricies
odio. Aliquam libero purus, auctor vitae sodales non, efficitur eget urna.
Etiam iaculis condimentum justo a pellentesque. Donec bibendum ante augue,
ut ultricies ligula tristique non. Donec id ante id mi accumsan maximus at a
odio. Nam malesuada, nunc nec ultrices ultrices, metus sapien malesuada ante,
eu lacinia ligula elit non neque. ,<a href="story1-more.html">more</a></p>
</div>
</article>
</section>
</main>
<footer>
<p>Made my Jon in a hurry!!</p>
</footer>
</body>
</html>
\ No newline at end of file
Ability_Sports/styles/main.css 0 → 100644
+ 46
− 0
View file @ 4f049f19
body{
width: 90%;
margin: auto;
display: grid;
grid-template-columns: repeat(3,1fr);
grid-template-rows: auto;
grid-template-areas:
"nav nav nav"
"section section section"
"background-info hobbies summary"
}
nav{
grid-area: nav;
background-color: deeppink;
}
section{
grid-area: section;
background-color: darksalmon;
}
#background-info{
grid-area: background-info;
background-color: blueviolet;
}
#hobbies{
grid-area: hobbies;
background-color: crimson;
}
#summary{
grid-area: summary;
background-color: darkolivegreen;
}
ul, li {
display: inline;
padding: 2%;
margin: 2%;
}
a{
text-decoration: none;
color: black;
}
a:hover{
background-color: pink;
color: green;
}
\ No newline at end of file
Ability_Sports/worksheet2.html 0 → 100644
+ 61
− 0
View file @ 4f049f19
<!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.0">
<title>worksheet 2</title>
<link rel="stylesheet" href="styles/main.css">
</head>
<body>
<nav>
<ul>
<li><a href="home">Home</a></li>
<li><a href="about.html">about</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt
orci sed turpis commodo, ac convallis sem tincidunt. Phasellus ac ultricies
odio. Aliquam libero purus, auctor vitae sodales non, efficitur eget urna.
Etiam iaculis condimentum justo a pellentesque. Donec bibendum ante augue,
ut ultricies ligula tristique non. Donec id ante id mi accumsan maximus at a
odio. Nam malesuada, nunc nec ultrices ultrices, metus sapien malesuada ante,
eu lacinia ligula elit non neque. ,<a href="story1-more.html">more</a></p>
</section>
<div id="background-info">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt
orci sed turpis commodo, ac convallis sem tincidunt. Phasellus ac ultricies
odio. Aliquam libero purus, auctor vitae sodales non, efficitur eget urna.
Etiam iaculis condimentum justo a pellentesque. Donec bibendum ante augue,
ut ultricies ligula tristique non. Donec id ante id mi accumsan maximus at a
odio. Nam malesuada, nunc nec ultrices ultrices, metus sapien malesuada ante,
eu lacinia ligula elit non neque. ,<a href="story1-more.html">more</a></p>
</div>
<div id="hobbies">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt
orci sed turpis commodo, ac convallis sem tincidunt. Phasellus ac ultricies
odio. Aliquam libero purus, auctor vitae sodales non, efficitur eget urna.
Etiam iaculis condimentum justo a pellentesque. Donec bibendum ante augue,
ut ultricies ligula tristique non. Donec id ante id mi accumsan maximus at a
odio. Nam malesuada, nunc nec ultrices ultrices, metus sapien malesuada ante,
eu lacinia ligula elit non neque. ,<a href="story1-more.html">more</a></p>
</div>
<div id="summary">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt
orci sed turpis commodo, ac convallis sem tincidunt. Phasellus ac ultricies
odio. Aliquam libero purus, auctor vitae sodales non, efficitur eget urna.
Etiam iaculis condimentum justo a pellentesque. Donec bibendum ante augue,
ut ultricies ligula tristique non. Donec id ante id mi accumsan maximus at a
odio. Nam malesuada, nunc nec ultrices ultrices, metus sapien malesuada ante,
eu lacinia ligula elit non neque. ,<a href="story1-more.html">more</a></p>
</div>
</body>
</html>
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment