A Pen by Marie Hekel on CodePen.
DM Elysium mhekel
This file contains hidden or 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
| * | |
| { | |
| box-sizing: border-box; | |
| } | |
| body { | |
| overflow: auto; | |
| background: #000; | |
| width: 100%; height: 800px; border: 5px solid white; | |
| } |
This file contains hidden or 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
| @import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap'); | |
| @import url('https://fonts.googleapis.com/css2?family=Fontdiner+Swanky&display=swap'); | |
| @import url('https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap'); | |
| * { | |
| box-sizing: border-box; | |
| } |
This file contains hidden or 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
| @import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap'); | |
| @import url('https://fonts.googleapis.com/css2?family=Fontdiner+Swanky&display=swap'); | |
| @import url('https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap'); | |
| * { | |
| box-sizing: border-box; | |
| } |
This file contains hidden or 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="mdc-components"> | |
| <div class="mdc-components__section"> | |
| <div class="mdc-components__column"> | |
| <div> | |
| <div class="mdc-component mdc-component__buttons"> | |
| <p>Buttons</p> | |
| <div class="mdc-component__section"> | |
| <div class="mdc-component__containers"> | |
| <div class="mdc-component__containers__primary"> | |
| <p>Primary</p><button class="mdc-fab material-icons" aria-label="Add"><span class="mdc-fab__icon">add</span></button> <button class="mdc-fab material-icons mdc-fab--plain" aria-label="Add"><span class="mdc-fab__icon">add</span></button> |
This file contains hidden or 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
| <body> | |
| <div class="container"> | |
| <div class="grid-container"> | |
| <div class="item-1"> | |
| <h1 data-splitting="lines">Overlap image & text using CSS grid</h1> | |
| </div> | |
| <div class="item-2"> | |
| <img src="https://images.pexels.com/photos/1029844/pexels-photo-1029844.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260"> |
This file contains hidden or 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
| <body> | |
| <div class="container"> | |
| <div class="grid-container"> | |
| <div class="item-1"> | |
| <h1 data-splitting="lines">Overlap image & text using CSS grid</h1> | |
| </div> | |
| <div class="item-2"> | |
| <img src="https://images.pexels.com/photos/1029844/pexels-photo-1029844.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260"> |
This file contains hidden or 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
| <body> | |
| <div class="container"> | |
| <div class="grid-container"> | |
| <div class="item-1"> | |
| <h1 data-splitting="lines">Overlap image & text using CSS grid</h1> | |
| </div> | |
| <div class="item-2"> | |
| <img src="https://images.pexels.com/photos/1029844/pexels-photo-1029844.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260"> |
A Pen by Marie Hekel on CodePen.
This file contains hidden or 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
| <!DOCTYPE html> | |
| <html lang="en" > | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>CodePen - A Pen by Marie Hekel</title> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2&;family=Cinzel+Decorative:wght@400;700;900&display=swap" rel="stylesheet"> |