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

WestMidlands Class 3 - Peter Ahern - HTML/CSS - Week 1 #96

Closed
PeterAhern wants to merge 1 commit into from
Closed

WestMidlands Class 3 - Peter Ahern - HTML/CSS - Week 1 #96

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
}
75 changes: 75 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,78 @@
* for example: General styles, Navigation styles, Hero styles, Footer etc.
*
*/

html {
font-size: 1.5rem;
}

#title {
height: 6rem;
text-align: center;
font-size: 5rem;
color:#F9BA4C;
font-family: Jazz LET, fantasy;
text-decoration: underline;
}

body {
background-color: #372B29;
color: #F9F5F4;
}

article:first-child {
background-color:orangered;
}


img {
display: block;
max-width: 100%;
height: auto;
margin: 0 auto;
}

.quote {
text-align: center;
border-radius: 3px;
font-style: italic;
text-align: center;
padding: 1rem 1.2rem;
width: 60%;
color: #4a4a4a;
margin: 1rem auto 2rem;
color: #4a4a4a;
background: #F9BA4C;
}

#img-caption {
text-align: center;
font-family: Bookman, URW Bookman L, serif;
font-size: 1.5rem;
margin: 1rem;
}

h2 {
text-decoration: underline;
text-align: center;
color:#F9BA4C;
}

#tribute-info, #facts, p {
text-align: left;
line-height: 3rem;
padding: 3rem;
width: 70%;
margin:auto;
}

#imag-dock {
max width: 100%;
width: 30%;
height: auto;
margin: 0 auto;
}

#image1 {
padding: 4rem;
}
58 changes: 57 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>Otis Redding</title>
<link
href="//fonts.googleapis.com/css?family=Roboto:400,500,300"
rel="stylesheet"
Expand All @@ -18,5 +18,61 @@
<body>
<!-- Add your HTML markup here -->
<!-- Remember: Use semantic HTML tags like <header>, <main>, <nav>, <footer>, <section> etc -->
<main id="main">
<h1 id="title">Otis Redding<h1>
<h2>A page dedicated to the legendary Soul singer Otis Redding</h2>
<div id="img-div">
<img id="image" src="https://liveforlivemusic.com/wp-content/uploads/2018/12/Otis-Redding-Death-740x390.jpg" alt="Otis Redding performing live with his band"/>
<figcaption id="img-caption">Otis Redding performing live with his band
</figcaption>
</div>
<section id="article-section">
<article id="tribute-info" class="articles">
<h2>The Voice of Soul</h2>For many people, Otis Redding is considered one of the greatest singers to have ever lived. With his unique, heart-wrenching soulful voice, he could make you dance, make you cry, make you fall in love, sometimes all at once. This is a dedication to his voice, his soul, his legacy.
Find out about an excellent biography on Otis Redding
<a id="tribute-link" target="_blank" href="https://www.rollingstone.com/music/music-news/epic-new-otis-redding-biography-sheds-light-on-the-singers-life-and-times-194536/">here</a>.
</article>

<img id="image1" src="https://ep00.epimg.net/cultura/imagenes/2015/09/23/actualidad/1443023884_784640_1443024695_noticia_normal.jpg"/>

<article id="facts" class="articles">
<h2>Freaky Facts about Otis</h2>
<ul>
<li>While Otis had the voice of a sweet angel, he was built like a brick house. Otis stood 6’2″ tall and weighed over 220 lbs. To compare, that would make him about the same size as four-time world heavyweight boxing champion Evander “The Real Deal” Holyfield.</li>
<li>When he was a teenager, he won a local talent competition (and the $5 cash prize) 15 TIMES IN A ROW! After his 15th consecutive victory the organizers asked him to stop competing so other people would have a chance to win.</li>
<li>As a youngster, Otis would earn $6 for his family by singing gospel tunes every Sunday on Macon, Georgia radio station WIBB.</li>
<li>Otis was so popular in England that he ended Elvis Presley’s eight-year reign as “world’s best male vocalist” on Melody Maker’s annual poll in 1967. When he arrived in England for his 1967 tour he was greeted by The Beatles’ personal limo.</li>
<li>On March 16, 1968, Redding’s recording of “(Sittin’ On) The Dock Of The Bay” became the first posthumous #1 hit in the Billboard chart history.</li>
</ul>
</article>

<article id="song-info" class="articles">
<h2>Sitting at the dock of the Bay</h2>

<div id="imgdoc-div">

<img id="imag-dock" src="https://playingforchange.com/wp-content/uploads/2018/12/Otis-Redding-dock.jpg"/>

<figcaption id="img-caption">Otis watching the ships roll in...
</figcaption>
<p> It did not take long before Otis found his rhythm, first through his recordings of popular ballads, and later by writing, recording, and performing his own songs. Some of his greatest work includes, “These Arms of Mine,” “Try A Little Tenderness,” “Respect” (yes, that Respect), “Mr. Pitiful,” and “(Sittin’ On) The Dock of the Bay.” At the height of his career, “Dock of the Bay” would become Otis Redding‘s most successful song, with its final version recorded just days before his untimely death at the age of 26. “Dock of the Bay” marked a transition in Otis’ career that was highlighted by his masterful expression of soul, coupled with the gentle despair of the blues.
</p>
</div>
</article>
</section>

<figure class="quote">
<blockquote>
“There is beauty in simplicity whether you are talking about architecture, art or music.”
</blockquote>
<figcaption>
&mdash; Otis Redding </figcaption>
</figure>
</div>
</main>
<footer>
<p>Author: Peter Ahern</p>
<p><a href="mailto:otisreddingfacts@example.com">otisreddingfacts@example.com</a></p>
</footer>
</body>
</html>