<section class="dl-blurbs">
<dl>
<dt>Design</dt>
<dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.</dd>
<dt>Develop</dt>
<dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.</dd>
<dt>Test</dt>
<dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.</dd>
</dl>
<dl>
<dt>Deliver</dt>
<dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.</dd>
<dt>Rinse</dt>
<dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.</dd>
<dt>Repeat</dt>
<dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.</dd>
</dl>
</section>
//- Google Fonts
$font-google-primary: 'https://fonts.googleapis.com/css2?family=Abril+Fatface&display=swap';
$font-google-secondary: 'https://fonts.googleapis.com/css2?family=Montserrat&display=swap';
//- @type List
$abril-fatface: 'Abril Fatface', cursive;
$montserrat: 'Montserrat', sans-serif;
//- Typography
$base-font-family: $montserrat;
$heading-font-family: $abril-fatface;
$font-size-small: 0.875em;
/*- Screen Sizes*/
$tablet-width: 768px;
$desktop-width: 1024px;
/* COLOR HEX */
$cadet: #4f6d7aff;
$maximum-blue: #5ea5b8ff;
$columbia-blue: #c0d6dfff;
$platinum: #eaeaeaff;
$cultured: #f3f3f3ff;
$nero: #444444;
/* COLOR Gradient */
$dl-gradient-right: linear-gradient(90deg, rgba(0,0,0,0.04) 20%, rgba(255,255,255,0) 0%);
$body-background-color: $platinum;
$body-text-color: $nero;
//- Global Functions
/*import fonts*/
@if variable-exists(font-google-primary) {
@import url($font-google-primary);
}
@if variable-exists(font-google-secondary) {
@import url($font-google-secondary);
}
//- Global Mixins
/*media queries*/
@mixin tablet {
@media (min-width: #{$tablet-width}) and (max-width: #{$desktop-width - 1px}) {
@content;
}
}
@mixin desktop {
@media (min-width: #{$desktop-width}) {
@content;
}
}
@mixin tablet-up {
@media (min-width: #{$tablet-width}) {
@content;
}
}
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
body {
background-color: $body-background-color;
font-family: $base-font-family;
font-size: $font-size-small;
color: $body-text-color;
line-height: 1.5;
}
.dl-blurbs {
display: grid;
@include tablet-up {
grid-template-columns: repeat(2, 1fr);
gap: 2vw;
}
}
/* LIST */
dl {
counter-reset: count;
background: $dl-gradient-right;
padding-left: 4vw; //default is smartphone
padding-right: 4vw;
margin: 0;
@include tablet-up {padding-left: 2vw;}
@include desktop {
padding-top: 3vw;
padding-bottom: 3vw;
}
}
dl + dl {
counter-reset: counter 4;
}
dt {
counter-increment: count;
color: $cadet;
font-family: $base-font-family;
font-size: 4vw;
text-transform: uppercase;
}
dt::before {
content: counter(count, decimal-leading-zero)".";
font-family: $heading-font-family;
color: $maximum-blue;
margin-left: -1vw;
padding-right: 12px;
}
dd {
margin-left: 5vw;
margin-bottom: 2vh;
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.