Skip to content
This repository was archived by the owner on Oct 26, 2020. It is now read-only.

Leroy douglas week1 blog #28

Open
leroy-douglas wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Leroy douglas week1 blog #28

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f3efba1
setup initial tag structure
leroy-douglas May 5, 2020
dbee37b
Addedd images, updated style.css and index.html
leroy-douglas May 10, 2020
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
166 changes: 166 additions & 0 deletions week1/3-website/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,3 +6,169 @@
* for example: General styles, Navigation styles, Hero styles, Footer etc.
*
*/
/*
Reset padding & margin jsut for those elemnts thatt are being used
*/

html, body, p, img, h1, h2, footer {
padding: 0;
margin: 0;
}
/*
set edfault background, text colour and font-family
*/
body{
background: #222e3f;
color: #B5ADB3;
font-family: 'Montserrat', sans-serif;
}

/*
default heading values...
*/
h1{
font-size: 6rem;
text-align: center;
}

h2 {
border-radius: 15px 15px 0 0;
background: #2b1d23;
padding: 0.2em;
}

h1, h2 {
font-family: 'Gravitas One', cursive;
}

/*
define our layout to be centred
*/
#container{
width: 80%;
margin: 0 auto;
}

/*
Header elements
*/
header {
background: #bc4123;
border-radius: 0px 0px 20px 20px;
padding-top: 1em;
}

header h1 {
color: #222e3f;
}

header, main{
margin: 0 auto 3em;
}

blockquote{
width: 55%;
height: 0.8em;
margin: 0 auto 0;
margin-top: 1.5em;
padding-top: 0.6em;
background: #222e3f;
text-align: center;
font-size: 1.3em;
border-radius: 20px 20px 0 0;
color: #bc4123;
/* border-bottom: 2px solid #bc4123; */
}

/*
Section elements
*/
section {
width: 840px; /* matches the width of the images...Hmmm, not quite responsive */
margin: 0 auto;
margin-bottom: 3em;
}

section img {
width: 100%;
border-radius: 0px 0px 20px 20px;
}

section h2 {
font-size: 2em;
}

/*
selectors to target the first Article
*/
section > :first-child{
padding: 0.5em 1.5em 2em;
border-radius: 20px;
background: #2b1d23;
}

section > :first-child img{
margin: 0 auto;
border-radius: 20px;
}

section > :first-child p{
font-size: 1.5rem;
color: #bc4123;
}

section > :first-child a {
color: #b5adb3;
}

section p {
margin: 1em 0;
font-size: 1.2em;
}

/*
Article elements
*/
article {
margin-bottom: 5em;
}

.more-content {
font-size: 1.1em;
text-align: right;
}

/*
Article elements
*/
iframe {
margin-bottom: 1em;
width: 100%;
border-radius: 20px;
}

a {
color: #b5adb3;
}

/*
Footer elements
*/
footer {
background: #bc4123;
height: 1em;
font-size: 1.2em;
text-align: right;
padding: 1.5em 0;
border-radius: 20px 20px 0 0;
clear: both;
}

footer p{
height: 0.8em;
background: #222e3f;
}




Binary file added week1/3-website/images/questLoveDrums.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added week1/3-website/images/questloveProfile.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added week1/3-website/images/questloveSupreme.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
65 changes: 64 additions & 1 deletion week1/3-website/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,17 +6,80 @@
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<title>My Blog</title>
<title>?uestlove</title>
<link
href="//fonts.googleapis.com/css?family=Roboto:400,500,300"
rel="stylesheet"
type="text/css"
/>
<link
href="https://fonts.googleapis.com/css2?family=Gravitas+One&family=Montserrat&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="css/style.css" />
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
</head>
<body>
<!-- Add your HTML markup here -->
<!-- Remember: Use semantic HTML tags like <header>, <main>, <nav>, <footer>, <section> etc -->
<div id="container">
<header>
<h1>
?uestlove
</h1>
<blockquote>
"When you live your life through records, the records are a record of your life"
</blockquote>
</header>
<main>
<section>
<article> <!---------- Article 1 ---------->
<h2 id="questloveBio" >Biography </h2>
<img src="images/questloveProfile.jpg" alt="Ahmir Khalib Thompson" title="Ahmir Khalib Thompson AKA Questlove">
<p>
Ahmir Khalib Thompson (born January 20, 1971), known professionally as Questlove (stylized as ?uestlove), is an American
musician and music journalist. He is the drummer and joint frontman (with Black Thought) for the hip hop band, the Roots.
The Roots has been serving as the in-house band for The Tonight Show Starring Jimmy Fallon since February 17, 2014.
Questlove is also one of the producers of the cast album of the Broadway musical Hamilton. He is the co-founder of the
websites Okayplayer and OkayAfrica. Additionally, he is an adjunct instructor at the Clive Davis Institute of Recorded
Music at New York University.
</p>
<div class="more-content"><a href="#questloveBio">Continue reading...</a></div>
</article>
<article> <!---------- Article 2 ---------->
<h2 id="questLoveCareer">Career</h2>
<img src="images/questLoveDrums.jpg" alt="Questove playing the drums" title="Questove playing the drums">
<p>
The Roots originated in Philadelphia with Ahmir "Questlove" Thompson and Tariq "Black Thought" Trotter while they
were both attending the Philadelphia High School for the Creative and Performing Arts. They would busk out on the
street corners with Questlove playing bucket drums and Tariq rapping over his rhythms. Their first organized gig was a
talent show in 1989 at the school where they used the name Radio Activity, which began a series of name changes that
progressed through Black to the Future and then The Square Roots. Another MC, Malik B., and a permanent bass
player, Leonard "Hub" Hubbard, were added to the band before the release of their first album. In 1992, they dropped
the "Square" from "Square Roots" because a local folk group had claim to the name.
</p>
<div class="more-content"><a href="#questLoveCareer">Continue reading...</a></div>
</article>
<article> <!---------- Article 3 ---------->
<h2 id="supremePodcast">Supreme Podcasts</h2>
<!-- <img src="images/discography.jpg" alt="Questlove on the decks" title="Questlove on the decks"> --->
<img src="images/questloveSupreme.png" alt="Questlove on the decks" title="Questlove Supreme Podcast Logo">
<p>
Questlove Supreme is a fun, irreverent and educational weekly podcast that digs deep into the stories of musical legends and
cultural icons in a way that only Questlove and Team Supreme can deliver. This is about legends and legends in the making
bringing their legacy to life in their own words. Previous guests have included Usher, Michelle Obama, Chris Rock,
Steve Miller, Maya Rudolph, Weird Al, Chaka Khan, Babyface and many more.
</p>
<iframe style="max-width:100%;" allow="autoplay" src="https://www.iheart.com/podcast/1119-questlove-supreme-53194211/episode/introducing-questlove-supreme-55050381/?embed=true" frameborder="0"></iframe>
<br>
<div class="more-content"><a href="#supremePodcast">More podcasts...</a></div>
</article>
</section>
</main>
<footer>
<p>
<strong>- [<em>A 22nd Century darkPixel design</em> ] -</strong>
</p>
</footer>
</div>
</body>
</html>