Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save azettl/1e64a24ae4981a56ded5fa617ff27319 to your computer and use it in GitHub Desktop.
Save azettl/1e64a24ae4981a56ded5fa617ff27319 to your computer and use it in GitHub Desktop.
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