The Pyramide: Not as challenging as the real pyramids in Egypt, but the shadow path is not easy.
Project Structure
The project consists of 2 main files
- index.html - the HTML structure.
- style.css - for styling.
HTML Structure
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam posuere erat at mi sagittis ultricies. Aenean cursus libero vitae odio congue volutpat.
<div class="frame">
<div class="center">
<div class="circle">
<div class="sun-container">
<div class="sun">
</div>
</div>
<div class="triangle-1"></div>
<div class="triangle-2"></div>
<div class="shadow"></div>
<div class="sand"></div>
</div>
</div>
</div>CSS Styling
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam posuere erat at mi sagittis ultricies. Aenean cursus libero vitae odio congue volutpat.
@import url(https://fonts.googleapis.com/css?family=Open+Sans:700,300);
.frame {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
top: 50%;
left: 50%;
width: 400px;
height: 400px;
margin-top: -200px;
margin-left: -200px;
border-radius: 2px;
box-shadow: 4px 8px 16px 0 rgba(0, 0, 0, 0.1);
overflow: hidden;
background-color: #272c34;
color: #333;
font-family: "Open Sans", Helvetica, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.circle {
position: relative;
height: 180px;
width: 180px;
background-color: #7ddffc;
border-radius: 50%;
overflow: hidden;
animation: darken 4s linear infinite;
}
.sun-container {
position: absolute;
width: 200px;
height: 200px;
top: 20px;
left: -10px;
animation: spin 4s linear infinite;
}
.sun {
position: absolute;
top: 50%;
left: 0%;
width: 30px;
height: 30px;
border-radius: 50%;
background-color: #ffef00;
box-sjadow: 0 0 10px #ffef00;
}
.triangle-1 {
position: absolute;
width: 100%;
height: 100%;
top: -10px;
background-color: #dedbdb;
clip-path: polygon(50% 50%, 0 100%, 75% 100%);
}
.triangle-2 {
position: absolute;
width: 100%;
height: 100%;
top: -10px;
background-color: white;
clip-path: polygon(50% 50%, 100% 100%, 75% 100%);
}
.shadow {
position: absolute;
width: 53%;
height: 50%;
top: 70%;
left: 23%;
clip-path: polygon(100% 0, 0 0, 100% 0%);
background-color: #c0b25e;
z-index: 1;
animation: shadow-animation 4s linear infinite;
}
.sand {
position: absolute;
width: 100%;
height: 30%;
background-color: #f0de75;
bottom: 0;
}
@keyframes spin {
100% {
transform: rotate(360deg);
}
}
@keyframes shadow-animation {
0% {
clip-path: polygon(100% 0, 0 0, 100% 0%);
}
25% {
clip-path: polygon(100% 0, 0 0, 100% 50%);
}
40% {
clip-path: polygon(100% 0, 0 0, 5% 75%);
}
60% {
clip-path: polygon(100% 0, 5% 0, 0 100%);
}
65% {
clip-path: polygon(100% 0, 5% 0, 0 0);
}
}
@keyframes darken {
0% {
opacity: 0;
}
30% {
opacity: 1;
}
70% {
opacity: 0;
}
}