Skip to content

Instantly share code, notes, and snippets.

@andrefqms
Created January 4, 2019 20:34
Show Gist options
  • Save andrefqms/2b7ec0bb9fabea3253a1fe5c6e0d5fa0 to your computer and use it in GitHub Desktop.
Save andrefqms/2b7ec0bb9fabea3253a1fe5c6e0d5fa0 to your computer and use it in GitHub Desktop.
Tribute Page
<html>
<body>
<div id="main">
<h1 id="title">David Bowie</h1><br>
<h3>The Man Who Changed the World</h3><br>
<div id="img-div">
<img id="image" src="http://s2.glbimg.com/k5IKICtlGoumIt5t4ALP9OOcOX0=/e.glbimg.com/og/ed/f/original/2017/07/03/16260046973_ab3d3329a8_k.jpg" alt = "David Bowie">
<div id="img-caption">Image from the album Aladdin Sane, which is the sixth studio album by David Bowie, released by RCA Records on 13 April 1973.</div><br>
</div>
<div id="tribute-info">
<p><br>
David Robert Jones (8 January 1947 – 10 January 2016), known professionally as David Bowie, was an English singer, songwriter and actor. He was a leading figure in the music industry and is considered one of the most influential musicians of the 20th century, acclaimed by critics and musicians, particularly for his innovative work during the 1970s. His career was marked by reinvention and visual presentation, with his music and stagecraft having a significant impact on popular music. During his lifetime, his record sales, estimated at 140 million albums worldwide, made him one of the world's best-selling music artists. In the UK, he was awarded ten platinum album certifications, eleven gold and eight silver, and released eleven number-one albums. In the US, he received five platinum and nine gold certifications. He was inducted into the Rock and Roll Hall of Fame in 1996.
</p>
<p>
Born in Brixton, South London, Bowie developed an interest in music as a child, eventually studying art, music and design before embarking on a professional career as a musician in 1963. "Space Oddity" became his first top-five entry on the UK Singles Chart after its release in July 1969. After a period of experimentation, he re-emerged in 1972 during the glam rock era with his flamboyant and androgynous alter ego Ziggy Stardust. The character was spearheaded by the success of his single "Starman" and album The Rise and Fall of Ziggy Stardust and the Spiders from Mars, which won him widespread popularity. In 1975, Bowie's style shifted radically towards a sound he characterised as "plastic soul", initially alienating many of his UK devotees but garnering him his first major US crossover success with the number-one single "Fame" and the album Young Americans. In 1976, Bowie starred in the cult film The Man Who Fell to Earth, directed by Nicolas Roeg, and released Station to Station. The following year, he further confounded musical expectations with the electronic-inflected album Low (1977), the first of three collaborations with Brian Eno that came to be known as the "Berlin Trilogy". "Heroes" (1977) and Lodger (1979) followed; each album reached the UK top five and received lasting critical praise.
</p>
<p>
After uneven commercial success in the late 1970s, Bowie had UK number ones with the 1980 single "Ashes to Ashes", its parent album Scary Monsters (and Super Creeps), and "Under Pressure", a 1981 collaboration with Queen. He reached his commercial peak in 1983 with Let's Dance; the album's title track topped both UK and US charts. Throughout the 1990s and 2000s, Bowie continued to experiment with musical styles, including industrial and jungle. He also continued acting; his roles included Major Jack Celliers in Merry Christmas, Mr. Lawrence (1983), Jareth the Goblin King in Labyrinth (1986), Pontius Pilate in The Last Temptation of Christ (1988), and Nikola Tesla in The Prestige (2006), among other film and television appearances and cameos. He stopped touring after 2004 and his last live performance was at a charity event in 2006. In 2013, Bowie returned from a decade-long recording hiatus with The Next Day. He remained musically active until he died of liver cancer two days after the release of his final album, Blackstar (2016).
</p>
</div><br>
</div>
<section>
<p>"The other thing I would say is that if you feel safe in the area you're working in, you're not working in the right area. Always go a little further into the water than you feel you're capable of being in. Go a little bit out of your depth, and when you don't feel that your feet are quite touching the bottom, you're just about in the right place to do something exciting." - David Bowie</p>
</section>
<h4>To know more about his history and what he influenced, <a id="tribute-link" href="https://en.wikipedia.org/wiki/David_Bowie" target="_blank">click here</a>.</h4>
</body>
</html>
// !! IMPORTANT README:
// You may add additional external JS and CSS as needed to complete the project, however the current external resource MUST remain in place for the tests to work. BABEL must also be left in place.
/***********
INSTRUCTIONS:
- Select the project you would
like to complete from the dropdown
menu.
- Click the "RUN TESTS" button to
run the tests against the blank
pen.
- Click the "TESTS" button to see
the individual test cases.
(should all be failing at first)
- Start coding! As you fulfill each
test case, you will see them go
from red to green.
- As you start to build out your
project, when tests are failing,
you should get helpful errors
along the way!
************/
// PLEASE NOTE: Adding global style rules using the * selector, or by adding rules to body {..} or html {..}, or to all elements within body or html, i.e. h1 {..}, has the potential to pollute the test suite's CSS. Try adding: * { color: red }, for a quick example!
// Once you have read the above messages, you can delete all comments.
body,html{
font-family:"Trebuchet MS", Helvetica, sans-serif;
text-align: center;
background: lightgray;
margin:10px;
color: black;
}
#image{
padding-top:10px;
padding-bottom: 20px;
display: flex;
margin-left: auto;
margin-right: auto;
max-width: 100%;
width: 60%;
}
#img-div{
margin: 0%;
margin-top:20px;
width:100%;
border:5px solid white;
background:white;
}
section{
font-style: italic;
}
h4,section{
font-size: 16.3px;
background: white;
padding:10px;
margin: 0px;
}

Tribute Page

Build a Tribute Page Objective: Build a CodePen.io app that is functional. Fulfilling the user stories and get all of the tests to pass. Can use HTML, JavaScript, and CSS to complete this project.

A Pen by Andre Filipe Queiroz de Melo on CodePen.

License.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment