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

west-midland 2-Adepeju Lawson-HTML/CSS-Week 1 #20

Closed
Adepeju18 wants to merge 1 commit into from
Closed

west-midland 2-Adepeju Lawson-HTML/CSS-Week 1 #20

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
3 changes: 3 additions & 0 deletions .vscode/settings.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"liveServer.settings.port": 5501
}
49 changes: 49 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,52 @@
* for example: General styles, Navigation styles, Hero styles, Footer etc.
*
*/
header{
padding: 20px;
text-align: center;
background: chartreuse;
font-size: 20px;
color: darkblue;
}
body {
background-color:rosybrown;
}
h2 {
color: darkslategray;
font-family: Courier;
font-size: 300%;
border: 2px;
padding: 30px;

}
p {
color: forestgreen;
font-family: sans-serif;
font-size: 160%;
}
ul{
list-style: none;
margin: 6px;
padding: 0%;
}
a:link{
background-color: yellow;
}
a:hover{
background-color: violet;
}
footer{
text-align: center;
padding: 3px;
background-color: hotpink;
color: ivory;
}
article :first-child{
color: royalblue;
font-style: italic;
background: salmon;
}




34 changes: 34 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,40 @@
</head>
<body>
<!-- Add your HTML markup here -->
<header>
<h1>lorem ipsum</h1>
<p>Designers use Lorem Ipsum as a dummy text, something to cover the fact that content is missing from the design. </br>“Lorem Ipsum” is followed by more Latin text, making it easy for users or other designers to ignore it and imagine something more familiar or relevant in its place.</br>

Even before the internet was a thing, people already used Lorem Ipsum as a filler in printing tests. </p>
</header>
<main>
<article>
<h2>Nietzsche Ipsum: The birth of tragically cool filler text</h2>
<p>If Monty Python is too childish for you, here is another cool alternative to Lorem Ipsum: Nietzsche Ipsum. </br>The German philosopher from 1800s is still very relevant today.</br> Regardless of how you feel towards his philosophy, there is no denying that his words are elegant and still have impact.</p>


<h2>Batman Ipsum: WHERE is the cool text?</h2>
<p>Batman has been a beloved hero across the world for decades, his grip on our hearts having only increased with the Dark Knight Trilogy. </br>Even if you’re not a big Batman fan, surely you can still appreciate that the screenwriters did a great job. </br>Talk about deep dialogues for a superhero movie!</p>


<h2>Obama Ipsum: yes we can (have awesome text)!</h2>
<p>No matter what your political opinions of Obama are, very few people out there can say his speeches were poorly written. </br>The man knew how to make a speech! Always bringing in emotion, making a moral stand or inspiring unity – Obama’s speeches had it all.</br>

So, why not use his wise words instead of Lorem Ipsum? </br>Obama Ipsum is bound to make your product feel more real, as it will include current issues and debates that are still on-going, even with the radical change in administration.</p>
</article>
</main>
<nav>
<li>
<ul><a href="Nietzsche">http://nietzsche-ipsum.com/</a></ul>
<ul><a href="Batman">http://batman-ipsum.com/</a></ul>
<ul><a href="Obama">https://obamaipsum.com/</a></ul>
</li>

</nav>
<footer>
justinmind
© 2020 Justinmind
</footer>
<!-- Remember: Use semantic HTML tags like <header>, <main>, <nav>, <footer>, <section> etc -->
</body>
</html>