`This is a submission for Frontend Challenge v24.04.17, CSS Art: June.
Inspiration
Lagos, Nigeria, is a vibrant metropolis teeming with life and energy, often hailed as the "City of Dreams." This bustling cityscape is a melting pot of cultures, innovation, and ambition. With its stunning skyline, iconic landmarks like the Third Mainland Bridge, and the shimmering Atlantic coastline, Lagos symbolizes the promise of opportunity and the spirit of resilience.
From the rich history of its markets and the artistic flair of its streets to the ever-evolving tech and business hubs, Lagos is a beacon of hope and progress for millions in Africa. This CSS art captures the essence of Lagos—a city where dreams are nurtured and futures are forged.
Demo
`
<!DOCTYPE html>
CSS Art - Lagos, Nigeria
body {
margin: 0;
background: linear-gradient(to bottom, #87CEEB 0%, #87CEEB 50%, #009688 50%, #009688 100%);
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-family: Arial, sans-serif;
}
.lagos-container {
position: relative;
width: 80%;
height: 70%;
background: linear-gradient(to bottom, #FFA500, #FF4500);
border-radius: 0 0 50% 50%;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.sun {
position: absolute;
top: 10%;
left: 75%;
width: 100px;
height: 100px;
background: radial-gradient(circle, #FFD700 60%, transparent 60%);
border-radius: 50%;
}
.bridge {
position: absolute;
bottom: 20%;
left: 0;
width: 100%;
height: 20px;
background: #4B0082;
}
.bridge::before {
content: '';
position: absolute;
top: -40px;
left: 10%;
width: 80%;
height: 40px;
background: #4B0082;
border-radius: 50%;
}
.bridge-line {
position: absolute;
top: -20px;
left: 10%;
width: 80%;
height: 4px;
background: #FFFFFF;
}
.bridge-pillar {
position: absolute;
bottom: 20px;
width: 8px;
height: 60px;
background: #4B0082;
}
.bridge-pillar:nth-child(1) {
left: 15%;
}
.bridge-pillar:nth-child(2) {
left: 30%;
}
.bridge-pillar:nth-child(3) {
left: 45%;
}
.bridge-pillar:nth-child(4) {
left: 60%;
}
.bridge-pillar:nth-child(5) {
left: 75%;
}
.water {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 20%;
background: #0000CD;
}
.building {
position: absolute;
bottom: 20%;
width: 40px;
height: 100px;
background: #2F4F4F;
box-shadow: 5px 5px 0 0 #2F4F4F, 10px 10px 0 0 #2F4F4F, 15px 15px 0 0 #2F4F4F;
display: flex;
flex-wrap: wrap;
}
.building:nth-child(2) {
left: 10%;
height: 120px;
}
.building:nth-child(3) {
left: 30%;
height: 80px;
}
.building:nth-child(4) {
left: 50%;
height: 140px;
}
.building:nth-child(5) {
left: 70%;
height: 100px;
}
.window {
width: 8px;
height: 8px;
background: yellow;
margin: 2px;
}
.text {
position: absolute;
top: 5%;
left: 50%;
transform: translateX(-50%);
font-size: 24px;
color: white;
font-weight: bold;
text-align: center;
}
Lagos - The City of
Dreams
`
Journey
When I saw the challenge to create CSS art inspired by the month of June, my mind immediately drifted to Lagos, Nigeria. June in Lagos is a time of warmth and vibrancy, mirroring the dynamic spirit of the city itself. I chose Lagos because it represents a fusion of tradition and modernity, where the old and the new coexist in a harmonious yet bustling symphony.
The city's iconic landmarks, such as the Third Mainland Bridge, its striking skyline, and the beautiful sunset over the Atlantic Ocean, provided a wealth of inspiration. I wanted to capture not just the physical beauty of Lagos but also its essence as a city of dreams—a place where ambitions are pursued with passion and resilience.
SOCIAL SHARE CARD GENERATOR