Skip to content
This repository was archived by the owner on Jan 14, 2024. It is now read-only.

London class 9 -Mickey Haile - HTM/CSS -week 1 #243

Open
mickeyhaile2 wants to merge 5 commits into
base: master
Choose a base branch
from
Open

London class 9 -Mickey Haile - HTM/CSS -week 1 #243

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
8235535
update 1
mickeyhaile2 Oct 26, 2022
26fad80
update 2
mickeyhaile2 Oct 26, 2022
9878564
updated 3
mickeyhaile2 Oct 26, 2022
43852aa
title
mickeyhaile2 Oct 28, 2022
5643cdf
color
mickeyhaile2 Oct 29, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 15 additions & 0 deletions .vscode/launch.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}"
}
]
}
71 changes: 71 additions & 0 deletions css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,3 +6,74 @@
* for example: General styles, Navigation styles, Hero styles, Footer etc.
*
*/
.footer {
text-align: center;
}
h1 {
font-size: 100px;
text-align: center;
padding-left: 20px;
padding-right: 20px;
font-size: 18px;
}
p{
float: left;
}


.hello{
font-size: 100px;

@JDysiewicz JDysiewicz Oct 29, 2022

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

100px is very large for a font size 😅

text-align: center;
padding-left: 20px;
padding-right: 20px;
font-size: 18px;

}
.hello1{
font-size: 100px;
text-align: center;
padding-left: 20px;
padding-right: 20px;
font-size: 18px;


}
Comment on lines +32 to +40

@JDysiewicz JDysiewicz Oct 29, 2022

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

instead of repeating the same stylings for multiple different classes, you can apply the styling to a single class, and apply multiple classes to an element (e.g. <div class="mystyling hello1">)

.arty{
font-size: 100px;
text-align: center;
padding-left: 20px;
padding-right: 20px;
font-size: 18px;

}
.main {
margin-left: 30px;
display: flex;
flex-direction: column;
}

.learn {
font-size: 100px;
text-align: center;
padding-left: 20px;
padding-right: 20px;
font-size: 18px;
}
.frame {


text-align: center;

}
.links {
color: brown;
}
h2 {
color: brown;
}
.arty2 {
color: brown;
}
footer {
color: brown;
}
73 changes: 72 additions & 1 deletion index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<title>My Blog</title>
<title>Rabbit</title>
<link
href="//fonts.googleapis.com/css?family=Roboto:400,500,300"
rel="stylesheet"
Expand All @@ -17,6 +17,77 @@
</head>
<body>
<!-- Add your HTML markup here -->
<main class="main">

<section>
<div class="links">
<h2>Rabbits</h2>
<img src="https://www.humanesociety.org/sites/default/files/styles/2000x850/public/2019/03/rabbit-475261_0.jpg?h=c855054e&itok=8wBMy7-t" alt="Rabbit" width="500" height="300">


</div>
</section>
<div class="learns">
<p>Rabbits, also known as bunnies or bunny rabbits, are small mammals in the family Leporidae
(which also contains the hares) of the order Lagomorpha (which also contains the pikas).
Oryctolagus cuniculus includes the European rabbit species and its descendants, the world's 305 breeds[1] of domestic rabbit.
Sylvilagus includes 13 wild rabbit species, among them the seven types of cottontail.
The European rabbit, which has been introduced on every continent except Antarctica,
is familiar throughout the world as a wild prey animal and as a domesticated form of livestock and pet.
With its widespread effect on ecologies and cultures, the rabbit is, in many areas of the world,
a part of daily life—as food, clothing, a companion, and a source of artistic inspiration.</p>


<div class="links">
<a href="https://www.google.com/search?q=why+art+is+important&oq=why+art+is+important&aqs=chrome..69i57j0i512l9.10168j0j9&sourceid=chrome&ie=UTF-8">Learn more</a>
</div>
</div>

<div class="frame">

<iframe width="695" height="391" src="https://youtu.be/XF4TimSeGiU"
title="Thing you need to know about rabbits" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
Comment on lines +48 to +50

@JDysiewicz JDysiewicz Oct 29, 2022

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nice use of an iframe to make the site a bit more dynamic


</div>

<br>
<div class="hello">
<ul class="arty2">Fun Facts About Rabbits</ul>


<Li>To express happiness, bunnies will sometimes jump around and flick their heads and feet. ...</li>
<li>Like deer, a female rabbit is called a “doe” and a male rabbit is called a “buck.”</li>
<li> bunny's big ears aren't just for listening! ...</li>
<li> those amazing ears can also be rotated almost a full circle to 270 degrees.</li>
Comment on lines +56 to +62

@JDysiewicz JDysiewicz Oct 29, 2022

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

your ul should wrap your list items to make the structure easier to parse - e.g.

<ul class="arty2">
   <li>Some text</li>
   <li>some other text</li>
</ul>

</div>
<div class="learn">
<a href="https://www.google.com/search?q=rabbit&sxsrf=ALiCzsbWiomUQgyVRNn5zi_jWh7G11karw%3A1666496921113&source=hp&ei=mblUY6LRBOqdhbIPj7ydsAI&iflsig=AJiK0e8AAAAAY1THqfcu_qflUJu1IJpVpPjiK-2AmQbr&ved=0ahUKEwjigYDouPX6AhXqTkEAHQ9eByYQ4dUDCAo&uact=5&oq=rabbit&gs_lcp=Cgdnd3Mtd2l6EAMyBQgAEJECMgcIABBDEIsDMgcIABBDEIsDMgcIABCxAxBDMgQIABBDMgsILhCABBDHARCvATIICAAQgAQQsQMyCwgAEIAEELEDEMkDMhQILhCxAxDHARCvARCLAxCoAxCmAzILCC4QgAQQsQMQ1AI6BwgjEOoCECc6BAgjECc6EQguEIAEELEDEIMBEMcBENEDOg4ILhCABBCxAxCDARDUAjoLCC4QgAQQsQMQgwE6DgguEIAEELEDEMcBENEDOhQILhCABBCxAxCDARCLAxCbAxCoAzoICC4Q1AIQkQI6BAguEEM6CggAELEDEIMBEEM6CgguEMcBENEDEEM6EwguENQCEEMQiwMQqAMQmgMQmAM6CggAELEDEEMQiwM6CgguELEDEEMQiwM6BwguEEMQiwM6FAguEIAEELEDEIMBEMcBENEDEIsDOhQILhCABBCxAxCLAxCaAxCbAxCoAzoUCC4QsQMQxwEQrwEQiwMQpgMQqANQ2A1Y5hZg2hpoAXAAeACAAXuIAY8EkgEDNC4ymAEAoAEBsAEKuAED&sclient=gws-wiz">Learn more</a>

</div>

<br>
<div class="arty">
<h2 class=" links">Summary</h2>
<article>When you look at the rabbits they inspire us to look after our enviroment therefore we must protect this precious species <br>as they

@JDysiewicz JDysiewicz Oct 29, 2022

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nice use of an article here, although you need to add a couple more article tags, and use the pseudo selector first child to style the first one

are very vital components of our planet and infact if we look after rabbits they could certainly benefit humanity by <br>supporting humans with products like clothing and food.</article>
</div>
<div class="learn">
<a href="https://www.google.com/search?q=rabbit&sxsrf=ALiCzsY1O6LoJ1bZG4oksVNbYRh7-WfP5Q%3A1666496926541&ei=nrlUY9bUIIe6gAbIsqHQBw&ved=0ahUKEwjWm83quPX6AhUHHcAKHUhZCHoQ4dUDCA8&uact=5&oq=rabbit&gs_lcp=Cgdnd3Mtd2l6EAMyDQgAEEcQ1gQQsAMQyQMyCggAEEcQ1gQQsAMyCggAEEcQ1gQQsAMyCggAEEcQ1gQQsAMyCggAEEcQ1gQQsAMyCggAEEcQ1gQQsAMyCggAEEcQ1gQQsAMyCggAEEcQ1gQQsAMyCAgAEJIDELADMgcIABCwAxBDMgcIABCwAxBDMgoIABCwAxBDEIsDMg0IABDkAhDWBBCwAxgBMg0IABDkAhDWBBCwAxgBMg0IABDkAhDWBBCwAxgBMhgILhDUAhDIAxCwAxBDEIsDEKgDEJ4DGAIyEgguENQCEMgDELADEEMQiwMYAjIPCC4Q1AIQyAMQsAMQQxgCMhgILhDUAhDIAxCwAxBDEIsDEKgDEJ4DGAJKBAhNGAFKBAhBGABKBAhGGAFQAFgAYN4FaAFwAXgAgAEAiAEAkgEAmAEAyAETuAEBwAEB2gEGCAEQARgJ2gEGCAIQARgI&sclient=gws-wiz">Learn more</a>
</div>

</section>
</main>

<footer class="footer">
<div>
<h3>For more info click at</h3>
<a href="https://www.google.com/search?q=why+rabbit+is+important&sxsrf=ALiCzsZQtGf_9d4N-KpE5abJCENzgF41lA%3A1666623063235&ei=V6ZWY675DYqigAbOnrVQ&ved=0ahUKEwjugKLdjvn6AhUKEcAKHU5PDQoQ4dUDCBA&uact=5&oq=why+rabbit+is+important&gs_lcp=Cgdnd3Mtd2l6EAMyBQgAEIAEMggIABAIEAcQHjIICAAQCBAHEB4yCAgAEAgQBxAeMggIABAIEAcQHjIICAAQCBAHEB4yCAgAEAgQBxAeMgYIABAIEB4yBggAEAgQHjIGCAAQCBAeOgoIABBHENYEELADOgcIABCwAxBDOg0IABDkAhDWBBCwAxgBOhIILhDHARDRAxDIAxCwAxBDGAI6DwguENQCEMgDELADEEMYAjoGCAAQBxAeOgoIABCABBANEIsDOgkIABAHEB4QiwM6BwgAEIAEEA06BQgAEIYDSgQIQRgASgQIRhgBUIsGWMUfYIopaAJwAXgAgAF3iAGcBJIBAzYuMZgBAKABAcgBELgBAsABAdoBBggBEAEYCdoBBggCEAEYCA&sclient=gws-wiz">Why Rabbits are important</a>
<address>
contact: tremah26@gmail.com
</address>
</div>
</footer>
<!-- Remember: Use semantic HTML tags like <header>, <main>, <nav>, <footer>, <section> etc -->
</body>
</html>
Empty file added pesronal webpage
View file
Open in desktop
Empty file.