A Pen by Samaila Malima Anthony on CodePen.
Created
January 26, 2022 14:38
-
-
Save DevRelMalima/8e24c7a177ccfeb00a4c5f070041641f to your computer and use it in GitHub Desktop.
Day 2 - Part 3
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment