Created
January 5, 2021 16:26
-
-
Save azettl/1e64a24ae4981a56ded5fa617ff27319 to your computer and use it in GitHub Desktop.
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
CSS: | |
section:first-of-type{ | |
position:absolute; | |
bottom:0; | |
} | |
section:nth-of-type(2){ | |
break-before:always; | |
} | |
section{ | |
break-inside:avoid; | |
} | |
h1, h2, h3{ | |
font-family: 'Asul', sans-serif; | |
} | |
h2{ | |
background-color:black; | |
color:white; | |
display:inline-block; | |
padding:1mm; | |
text-transform:uppercase; | |
} | |
body{ | |
font-family: 'Open Sans', sans-serif; | |
} | |
.flex{ | |
display:flex; | |
} | |
.left{ | |
min-width:4cm; | |
} | |
.right p:first-of-type, | |
.right h3:first-of-type{ | |
margin-top:0; | |
} | |
.right p:first-of-type{ | |
margin-bottom:0; | |
} | |
HTML: | |
<section> | |
<h2>Profile</h2> | |
<div class="flex"> | |
<div class="left"></div> | |
<div class="right"> | |
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. A erat nam at lectus urna duis. Urna nec tincidunt praesent semper feugiat nibh sed pulvinar. Risus ultricies tristique nulla aliquet enim tortor at auctor urna. Justo donec enim diam vulputate ut pharetra sit amet aliquam. Eros donec ac odio tempor orci dapibus ultrices in. Libero enim sed faucibus turpis in eu mi bibendum.</p> | |
<p>Imperdiet nulla malesuada pellentesque elit eget gravida cum sociis. Pellentesque habitant morbi tristique senectus et netus et. Gravida in fermentum et sollicitudin ac. Ac odio tempor orci dapibus ultrices.</p> | |
<p>Nunc mattis enim ut tellus elementum. Diam quam nulla porttitor massa id neque aliquam. Auctor urna nunc id cursus metus aliquam. Nunc congue nisi vitae suscipit. Ut eu sem integer vitae justo eget. </p> | |
</div> | |
</div> | |
</section> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment