Created
February 8, 2021 15:17
-
-
Save cyruslk/a9088909c5730f5f044323cbc90795f3 to your computer and use it in GitHub Desktop.
// source https://jsbin.com
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
<style> | |
.container { | |
width: 400px; | |
} | |
.lines { | |
width: 400px; | |
display: flex; | |
align-items: center; | |
justify-content: center; | |
} | |
.lines_inner { | |
width: 300px; | |
border-bottom: 3px dotted; | |
padding-top: 10px; | |
padding-bottom: 10px; | |
} | |
.lines h1 { | |
font-size: 30px; | |
} | |
.lines h2 { | |
font-size: 30px; | |
font-style: italic; | |
} | |
.lines h3, | |
.lines h4 { | |
font-size: 20px; | |
} | |
.lines h1, | |
.lines h2, | |
.lines h3, | |
.lines h4 { | |
margin: 0; | |
text-align: center; | |
} | |
.information { | |
width: 100%; | |
display: flex; | |
align-items: center; | |
justify-content: center; | |
padding-top: 10px; | |
padding-bottom: 10px; | |
} | |
.left { | |
width: 80%; | |
padding-right: 15px; | |
} | |
.left p { | |
font-size: 20px; | |
margin: 0; | |
} | |
.right { | |
width: 20%; | |
} | |
.right h1, | |
.right h2 { | |
margin: 0; | |
} | |
.right h1 { | |
font-size: 30px; | |
} | |
.right h2 { | |
font-size: 20px; | |
} | |
.logo { | |
width: 100%; | |
background-color: black; | |
border-radius: 9px; | |
} | |
.logo h1 { | |
color: white; | |
margin: 0; | |
padding: 10px; | |
text-align: center; | |
} | |
</style> | |
<div class="container"> | |
<div class="lines"> | |
<div class="lines_inner"> | |
<h1>Artist Name</h1> | |
<h2>'Release Title'</h2> | |
</div> | |
</div> | |
<div class="lines"> | |
<div class="lines_inner"> | |
<h3>Label Name - Cat#</h3> | |
<h4>Genre, Style, Info</h4> | |
</div> | |
</div> | |
<div class="information"> | |
<div class="left"> | |
<p>Information from Public Comments section. | |
Hot tip awesome! Wow deep. So fresh for 2021. | |
</p> | |
</div> | |
<div class="right"> | |
<h1>23.00</h1> | |
<h2>tx. incl</h2> | |
</div> | |
</div> | |
<div class="logo"> | |
<h1>Disques La Rama Montréal</h1> | |
</div> | |
<div> | |
</style> | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment