Day 2 - Part 3

day-2-part-3.markdown

Day 2 - Part 3

A Pen by Samaila Malima Anthony on CodePen.

License.

index.html

<div class="inner-container">
  <div class="video-container">
    <h1>Heartless (Lyrics)</h1>
    <h4>Kanye West</h4>
    <div class="inner-video">
      <iframe width="400" height="315" src="https://www.youtube.com/embed/Co0tTeuUVhU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>
  </div>
  <div class="lyrics-container">
    <pre>
In the night I hear 'em talk
The coldest story ever told
Somewhere far along this road
He lost his soul to a woman so heartless

How could you be so heartless?
Oh, how could you be so heartless?

How could you be so, cold as the winter wind when it breeze, yo
Just remember that you talkin' to me though
You know need to watch the way you talkin' to me, yo
I mean after all the things that we've been through
I mean after all the things we got into
Hey yo, I know of some things that you ain't told me
Hey yo, I did some things but that's the old me
And now you wanna get me back and you goin' show me
So you walk around like you don't know me
You got a new friend, well I got homies
But in the end it's still so lonely
In the night I hear 'em talk
The coldest story ever told
Somewhere far along this road
He lost his soul to a woman so heartless
How could you be so heartless?
Oh, how could you be so heartless?
    </pre>
  </div>
</div>

style.css

html {
  background: url("https://assets.codepen.io/6060109/lyric-bg-2.png");
  background-size: cover;
  background-repeat: no-repeat;
  height: 100vh;
}

body {
  background: url("https://assets.codepen.io/6060109/music.png") no-repeat bottom left;
  height: 100%;
  color: white;
  display: flex;
  align-items: center;
  font-family: Montserrat;
}

pre {
  font-family: Montserrat;
  height: 95%;
  overflow: scroll;
}

h1 {
  font-size: 48px;
  margin: 10px 0;
}
h4 {
  font-size: 36px;
  margin: 0;
  padding: 0;
  font-weight: 400;
  opacity: 0.66;
}

.inner-container {
  height:75%;
  width: 90%;
  margin: auto;
  display: flex;
}
.video-container {
  width: 50%;
}
.inner-video {
  box-shadow: 10px 10px 50px rgba(0, 255, 255, 0.35);
  height: 300px;
  margin-top: 50px;
  width:85%;
}
.lyrics-container {
  height: 100%;
  background: rgba(0,0,0,.5);
  width: 40%;
  border: 1px solid white;
  border-radius: 5px;
  padding: 20px 30px;
  line-height: 35px;
}