diff --git a/Ability_Sports/index.html b/Ability_Sports/index.html
deleted file mode 100644
index e97aa50dfe73a9915b0ea8edc67680ac3d60abc5..0000000000000000000000000000000000000000
--- a/Ability_Sports/index.html
+++ /dev/null
@@ -1,89 +0,0 @@
-<!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/ability.main.css">
-</head>
-
-<body> <!-- viewable space-->
- <header>
-
-
- <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
diff --git a/Ability_Sports/styles/ability.main.css b/Ability_Sports/styles/ability.main.css
deleted file mode 100644
index e2c2700ce607e4dba866effb7d57aed262804411..0000000000000000000000000000000000000000
--- a/Ability_Sports/styles/ability.main.css
+++ /dev/null
@@ -1,22 +0,0 @@
-body{
- display: grid;
-
- grid-template-columns: repeat(4,1fr);
- grid-template-rows: auto;
- grid-template-areas:
- "header header header"
- "main main main"
- "footer footer footer"
-}
-
-header> nav{
- grid-area:header;
-}
-
-main{
- grid-area: main;
-}
-
-footer{
- grid-area: footer;
-}
\ No newline at end of file
diff --git a/Ability_Sports/styles/image1.jpg b/Ability_Sports/styles/image1.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..2dfbe26bf0d649bcdd32618a33b2b5e4b8ebfba4
Binary files /dev/null and b/Ability_Sports/styles/image1.jpg differ
diff --git a/Ability_Sports/styles/main.css b/Ability_Sports/styles/main.css
index 9636622f85edf3e688b04b6ddb1cab400d76c279..e78c2da57900b736dd73e00d32cabc926ed1ce4e 100644
--- a/Ability_Sports/styles/main.css
+++ b/Ability_Sports/styles/main.css
@@ -1,20 +1,44 @@
body{
- width: 90%;
+/* width: 90%;
margin: auto;
+*/
+ margin: 0px;/*webkits put in a margin*/
display: grid;
-
- grid-template-columns: repeat(3,1fr);
+ grid-template-columns: 33.33% 33.33% 33.33%; /* could be repeat(3,1fr) */
grid-template-rows: auto;
grid-template-areas:
"nav nav nav"
"section section section"
- "background-info hobbies summary"
+ "background-info hobbies summary";
+
+ background-image: url("image1.jpg"); /* backgroun images*/
+ background-repeat: no-repeat;
+ background-size: cover;
+ opacity: 0.3; /* image transparent*/
}
+
+/* to adjust for mobile i would just change the grids and template areas
+body{
+ /* width: 90%;
+ margin: auto;
+
+ margin: 0px;/*webkits put in a margin
+
+ display: grid;
+ grid-template-columns: 100%;
+ grid-template-rows: auto;
+ grid-template-areas:
+ "nav"
+ "section "
+ "background-info"
+ "hobbies"
+ "summary"
+ } by reducing the number of columns to 1 and grid areas you can keep the design
+ */
nav{
grid-area: nav;
- background-color: deeppink;
- grid-area: nav;
+ background-color: #ff1493;
display: flex; /* can be used to configure the navigation menu*/
flex-direction: row;
@@ -24,34 +48,42 @@ nav{
.item{
flex-basis: auto;
align-self: auto;
-
}
+#active{
+ background-color: #000000;
+ color: rgb(252, 253, 252);
+}
+
section{
grid-area: section;
- background-color: darksalmon;
+ background-color: #e9967a;
}
#background-info{
grid-area: background-info;
- background-color: blueviolet;
+ background-color: #8a2be2;
}
#hobbies{
grid-area: hobbies;
- background-color: crimson;
+ background-color: #dc143c;
}
#summary{
grid-area: summary;
- background-color: darkolivegreen;
-}
-ul, li {
- display: inline;
- padding: 2%;
- margin: 2%;
+ background-color: #556b2f;
}
-a{
+nav>a{
text-decoration: none;
color: black;
}
-a:hover{
- background-color: pink;
- color: green;
+nav> a:hover{
+ background-color: #ffc0cb;
+ color: #008000;
+}
+p{
+ padding: 0 2% 0 2%;
+}
+
+table, th, td{
+ border: black;
+ border-width: 2px;
+ border-style: solid;
}
\ No newline at end of file
diff --git a/Ability_Sports/worksheet2.html b/Ability_Sports/worksheet2.html
index 892054c6a994db1613224d15fe33f8af5903bb04..3e4cd96b3c29c66ce3db8e504f18f36cf1f77345 100644
--- a/Ability_Sports/worksheet2.html
+++ b/Ability_Sports/worksheet2.html
@@ -9,19 +9,24 @@
</head>
<body>
<nav>
- <a class="item" id="acive" href="home">Home</a>
+ <a class="item" id="active" href="home">Home</a>
<a class="item"href="about.html">about</a>
<a class="item" href="contact.html">Contact</a>
</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>
+
+ <table>
+ <tr>
+ <th>Film</th>
+ <th>year</th>
+ </tr>
+ <tr>
+ <td>Hoodwinked</td>
+ <td>1995</td>
+ </tr>
+ </table>
+
</section>