Day 2 - Part 2

day-2-part-2.markdown

Day 2 - Part 2

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">

    </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?
How could be so Dr. Evil
You bringin' out a side of me that I don't know
I decided we weren't goin' speak so
Why we up three A.M. on the phone
Why does she be so mad at me for
Homie I don't know, she's hot and cold
I won't stop, I won't mess my groove up
Cause I already know how this thing go
You run and tell your friends that you're leaving me
They say that they don't see what you see in me
You wait a couple months then you gon' see
You'll never find nobody better than me
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?
Talkin', talkin', talkin', talk
Baby let's just knock it off
They don't know what we been through
They don't know 'bout me and you
So I got something new to see
And you just goin' keep hatin' me
And we just goin' be enemies
I know you can't believe
I could just leave it wrong
And you can't make it right
I'm goin' take off tonight
Into the night
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>

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%;
}

/* [1]
  Add 
  Full height
  Half width
  A small white border
  Padding
*/
.lyrics-container {
  background: rgba(0,0,0,.5);
  border-radius: 5px;
  line-height: 35px;
  height: 100%;
  width: 50%;
  border: 1px solid white;
}