<div class="sea layout-box">
<div class="container version-a">
<div class="images">
<div class="grid image-grid-3-m4">
<img class="image-0 " src="https://images.unsplash.com/photo-1523837006673-1ad9ddfcbc0c?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2000&q=80">
<img class="image-1" src="https://images.unsplash.com/photo-1530053969600-caed2596d242?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1374&q=80">
<img class="image-2 " src="https://images.unsplash.com/photo-1520302659201-7ecf4ae863d0?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1772&q=80">
<img class="image-3 " src="https://images.unsplash.com/photo-1489615705977-faf56742020e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=735&q=80">
</div>
</div>
<div class="numbering">
<div class="numbering-box ">
<div class="numbering-no-wrapper"><span class="numbering-no-text">NO.</span></div>
<div class="numbering-text-text">1</div>
</div>
</div>
<div class="text">
<h2>UNDER THE SEA</h2>
<p>Lorem ipsum dolor sit amet , consetetur sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore
et dolore magna aliquyam erat, sed diam voluptua. </p>
<p>FISH, CORRALS, SHARKS, JELLYFISH</p>
</div>
<div class="single-image">
<img class="image-5" src="https://images.unsplash.com/photo-1489615705977-faf56742020e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=735&q=80">
</div>
</div>
</div>
<div class="savanna layout-box">
<div class="container version-b">
<div class="images">
<div class="grid image-grid-4">
<img class="image-0 " src="https://images.unsplash.com/photo-1547471080-7cc2caa01a7e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80">
<img class="image-1 "src="https://images.unsplash.com/photo-1566273929481-74d2b81bda4e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2000&q=80">
<img class="image-2 " src="https://images.unsplash.com/photo-1605479828548-d25b2c6b5f55?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2000&q=80">
<img class="image-3 " src="https://images.unsplash.com/photo-1565279718211-6c048f3e4f3a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2000&q=80">
</div>
</div>
<div class="numbering">
<div class="numbering-box ">
<div class="numbering-no-wrapper"><span class="numbering-no-text">NO.</span></div>
<div class="numbering-text-text">2</div>
</div>
</div>
<div class="text">
<h2>In the hot sun</h2>
<p>Lorem ipsum dolor sit amet , consetetur sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore
et dolore magna aliquyam erat, sed diam voluptua. </p>
<p>LION, TREES, GRAS, WATERHOLE</p>
</div>
<div class="single-image"></div>
</div>
</div>
<div class="rainforest layout-box">
<div class="container version-a">
<div class="images">
<div class="grid image-grid-3-m4">
<img class="image-0 " src="https://images.unsplash.com/photo-1612712191126-863ff61b57d2?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1287&q=80">
<img class="image-1" src="https://images.unsplash.com/photo-1604213410393-89f141bb96b8?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2670&q=80">
<img class="image-2 " src="https://images.unsplash.com/photo-1428572184420-7d1092d8c6c6?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2670&q=80">
<img class="image-3 " src="https://images.unsplash.com/photo-1530835073691-99f1d729027a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1780&q=80">
</div>
</div>
<div class="numbering">
<div class="numbering-box ">
<div class="numbering-no-wrapper"><span class="numbering-no-text">NO.</span></div>
<div class="numbering-text-text">3</div>
</div>
</div>
<div class="text">
<h2>Falling Rain</h2>
<p>Lorem ipsum dolor sit amet , consetetur sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore
et dolore magna aliquyam erat, sed diam voluptua. </p>
<p>MANGROVES, MONKEYS, WATERFALLS, BIRDS</p>
</div>
<div class="single-image">
<img class="image-5 " src="https://images.unsplash.com/photo-1530835073691-99f1d729027a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1780&q=80">
</div>
</div>
</div>
<div class="artic layout-box">
<div class="container version-b">
<div class="images">
<div class="grid image-grid-4">
<img class="image-0 " src="https://images.unsplash.com/photo-1475318401083-79254d9ce15d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2000&q=80">
<img class="image-1 "src="https://images.unsplash.com/photo-1482878603463-6092a522e6e5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2000&q=80">
<img class="image-2 " src="https://images.unsplash.com/photo-1531504060587-e6811129c0f2?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2000&q=80">
<img class="image-3 " src="https://images.unsplash.com/photo-1443926818681-717d074a57af?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1780&q=80">
</div>
</div>
<div class="numbering">
<div class="numbering-box ">
<div class="numbering-no-wrapper"><span class="numbering-no-text">NO.</span></div>
<div class="numbering-text-text">4</div>
</div>
</div>
<div class="text">
<h2>Eternal Ice</h2>
<p>Lorem ipsum dolor sit amet , consetetur sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore
et dolore magna aliquyam erat, sed diam voluptua. </p>
<p>ICE; BEARS, FOXES, SNOW</p>
</div>
<div class="single-image"></div>
</div>
</div>/*
Initial layout is mobile first, with changes done for desktop afterward.
The CSS Code is ordered by template area, so there are mutltiple media queries throughout
*/
* {
box-sizing: border-box;
font-family: 'Ranade', sans-serif;
font-weight: 300;
font-size: 16px;
line-height: 1.25;
word-break: break-all;
word-break: break-word;
}
:root {
--bg-color: #79e3f6;
}
h2 {
font-family: 'Archivo', sans-serif;
}
p {
font-size: 20px;
}
img {
object-fit: cover;
height: 100%;
width: 100%;
}
// defining a background color variable per section
.sea {
--bg-color: #79e3f6;
}
.savanna {
--bg-color: #f9e6d1;
}
.rainforest {
--bg-color: #d1f9d7;
}
.arctic {
--bg-color: #d1dcf9;
}
.layout-box {
background-color: var(--bg-color);
}
/*
Initial layout for the mobile view of the component
*/
.container {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: repeat(2, min-content);
gap: 1.2rem;
grid-auto-flow: row;
grid-template-areas:
"numerology"
"text";
padding-bottom: 10px;
width: 100%;
margin-right: auto;
margin-left: auto;
}
@media(min-width: 1024px){
.container {
padding-top: 2.25rem;
}
}
@media (min-width: 1320px) {
.container {
max-width: 1320px;
}
}
@media (min-width: 1920px) {
.container {
max-width: 1920px;
}
}
.images {
grid-area: numerology;
}
.numbering {
grid-area: numerology;
}
.text {
grid-area: text;
}
.single-image {
display: none;
}
@media (min-width: 1024px) {
.container {
grid-template-columns: repeat(14, minmax(0, 1fr));
}
.images {
grid-area: images;
}
.numbering {
grid-area: numbering;
}
// there are two versions for the layout on desktop - version-a and version-b
.version-a {
grid-template-areas:
"images images images images images . numbering numbering numbering single-image single-image single-image single-image single-image"
"images images images images images . text text text single-image single-image single-image single-image single-image";
}
.version-a .single-image {
grid-area: single-image;
display: block;
}
.version-b {
grid-template-areas:
". numbering numbering numbering . . images images images images images images images images"
". text text text . . images images images images images images images images";
}
}
@media (min-width: 1700px) {
.version-a {
grid-template-areas:
"images images images images images images . numbering numbering numbering single-image single-image single-image single-image"
"images images images images images images . text text text single-image single-image single-image single-image";
.text {
padding-right: 6rem;
}
}
.version-b {
grid-template-areas:
". numbering numbering numbering . . images images images images images images images images"
". text text text . . images images images images images images images images";
.text {
padding-right: 6rem;
}
}
}
.grid {
display: grid;
}
// grid for the part with 3 images on desktop and 4 on mobile
.image-grid-3-m4 {
grid-template-rows: repeat(7, 1fr);
grid-template-columns: repeat(14, 1fr);
gap: 0.5rem;
.image-0 {
grid-column: 1 / span 6;
grid-row: 1 / span 4;
}
.image-1 {
grid-column: 7 / span 6;
grid-row: 2 / span 2;
aspect-ratio: 1/1;
}
.image-2 {
grid-column: 1 / span 6;
grid-row: 5 / span 2;
padding-left: 1rem;
}
.image-3 {
grid-column: 7 / span 8;
grid-row: 4 / span 4;
}
}
@media (min-width: 1024px) {
.image-grid-3-m4 {
grid-template-rows: repeat(11, 63px);
grid-template-columns: repeat(8, minmax(0, 1fr));
row-gap: 1rem;
.image-0 {
grid-column: 1 / span 4;
grid-row: 1 / span 8;
}
.image-1 {
grid-column: 5 / span 4;
grid-row: 2 / span 5;
padding-right: 45px;
}
.image-2 {
grid-column: 2 / span 3;
grid-row: 9 / span 3;
padding-left: 0;
}
.image-3 {
display: none;
}
}
}
// grid for the part with 4 images on desktop and mobile
.image-grid-4 {
grid-template-rows: repeat(12, 1fr);
grid-template-columns: repeat(12, 1fr);
gap: 0.5rem;
.image-0 {
grid-column: 1 / span 7;
grid-row: 1 / span 6;
}
.image-1 {
grid-column: 7 / span 5;
grid-row: 3 / span 5;
padding-right: 10px;
}
.image-2 {
grid-column: 1 / span 6;
grid-row: 7 / span 5;
padding-left: 2rem;
}
.image-3 {
grid-column: 7 / span 5;
grid-row: 8 / span 5;
}
&.image-grid-4-left-top {
.image-0 {
z-index: 10;
}
}
}
@media (min-width: 1024px) {
.image-grid-4 {
grid-template-rows: repeat(11, 73px);
grid-template-columns: repeat(8, minmax(0, 1fr));
row-gap: 1rem;
column-gap: 1rem;
.image-0 {
grid-column: 1 / span 6;
grid-row: 1 / span 5;
margin-left: -45px;
padding-right: 45px;
}
.image-1 {
grid-column: 6 / span 3;
grid-row: 3 / span 4;
padding-right: 0;
}
.image-2 {
grid-column: 1 / span 5;
grid-row: 6 / span 4;
padding-left: 45px;
}
.image-3 {
grid-column: 6 / span 3;
grid-row: 7 / span 4;
padding-right: 45px;
}
}
}
// code for setting up the number in its white box; re-using the background variable
.numbering {
justify-self: center;
align-self: center;
}
.numbering-box {
width: 140px;
height: 140px;
background: white;
display: flex;
flex-direction: row;
align-items: center;
font-family: "Times New Roman";
}
.numbering-no-wrapper {
display: flex;
flex-direction: column;
color: var(--bg-color);
padding-bottom: 25px;
align-self: stretch;
justify-content: flex-end;
}
.numbering-no-text {
transform: rotate(-90deg);
font-size: 1.65rem;
font-family: "Times New Roman";
}
.numbering-text-text {
color: var(--bg-color);
font-weight: 700;
line-height: 0.5;
font-size: 154px;
font-family: "Times New Roman";
}
@media (min-width: 1024px) {
.numbering {
align-self: end;
justify-self: auto;
}
}
// the single image on the right is only visible on desktop, so defining here
@media (min-width: 1024px) {
.single-image {
grid-area: single-image;
aspect-ratio: 1/1;
padding-left: 3.75rem;
align-self: center;
}
.image-5 {
max-width: none;
aspect-ratio: 1/1;
width: 100%;
}
}
// some css for making the text look right
.text {
align-self: top;
padding-right: 1rem;
margin-left: 2.25rem;
margin-right: 2.25rem;
h2 {
font-size: 2.45rem;
font-weight: 400;
text-transform: uppercase;
margin-bottom: 1rem;
margin-top: 2rem;
}
}
.version-a .text {
padding-right: 2rem;
}
@media (min-width: 1024px) {
.text {
margin-left: 0;
margin-right: 0;
h2 {
margin-bottom: 1.25rem;
padding-top: 0.5rem;
}
}
}
@media (min-width: 1320px) {
.text h2 {
font-size: 48px;
}
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.