flower power
Code
HTML
<div id="projContainer">
<div class="title">flower power</div>
<div class="flower">
<div class="center"></div>
<div class="petals">
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
</div>
</div>
<div class="flower">
<div class="center"></div>
<div class="petals">
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
</div>
</div>
<div class="flower">
<div class="center"></div>
<div class="petals">
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
</div>
</div>
<div class="flower">
<div class="center"></div>
<div class="petals">
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
</div>
</div>
<div class="flower">
<div class="center"></div>
<div class="petals">
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
</div>
</div>
<div class="flower">
<div class="center"></div>
<div class="petals">
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
</div>
</div>
<div class="flower">
<div class="center"></div>
<div class="petals">
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
</div>
</div>
<div class="flower">
<div class="center"></div>
<div class="petals">
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
</div>
</div>
<div class="flower">
<div class="m-center"></div>
<div class="mini">
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
</div>
</div>
<div class="flower">
<div class="m-center"></div>
<div class="mini">
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
</div>
</div>
<div class="flower">
<div class="m-center"></div>
<div class="mini">
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
</div>
</div>
<div class="flower">
<div class="m-center"></div>
<div class="mini">
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
</div>
</div>
<div class="flower">
<div class="m-center"></div>
<div class="mini">
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
</div>
</div>
<div class="flower">
<div class="m-center"></div>
<div class="mini">
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
</div>
</div>
<div class="flower">
<div class="m-center"></div>
<div class="mini">
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
</div>
</div>
</div>CSS
:root {
--deg: 30deg;
--unitScale: .05;
--posScale: 3vw;
--adjVer: 0vw;
--adjHor: 0vw;
--titleFont: 20vw;
}
#projContainer {
width: calc(var(--baseUnit)*30);
height: calc(var(--baseUnit)*30);
border-radius: 50%;
border: 5vw #70AD7C solid;
position: relative;
box-shadow: inset 0px 0px 0px calc(var(--baseUnit)*5) #87D196;
}
.title {
position: absolute;
font-family: 'Pacifico', cursive;
font-size: var(--titleFont);
color: rgba(255, 255, 255, 1);
line-height: 85%;
z-index: 10;
text-align: center;
user-select: none;
color: #eee;
text-shadow:
4px 3px 0px #555,
3px 0px 0px #555,
2px 0px 0px #777,
1px 0px 0px #777,
5px 5px 15px rgba(0,0,0, .8),
0px 4px 0px #555,
0px 3px 0px #555,
0px 2px 0px #777,
0px 1px 0px #666;
width: 100%;
height: 100%;
display: flex;
align-items: center;
}
.flower, .center, .petals, .petal, .petal::after, .mini, .m-center {
position: absolute;
}
.petal {
transform-origin: 0% 100%;
box-shadow: 0px 0px 10px rgba(0, 0, 0, .4);
}
.petal:nth-of-type(2) {transform: rotate(calc(var(--deg)*1));}
.petal:nth-of-type(3) {transform: rotate(calc(var(--deg)*2));}
.petal:nth-of-type(4) {transform: rotate(calc(var(--deg)*3));}
.petal:nth-of-type(5) {transform: rotate(calc(var(--deg)*4));}
.petal:nth-of-type(6) {transform: rotate(calc(var(--deg)*5));}
.petal:nth-of-type(7) {transform: rotate(calc(var(--deg)*6));}
.petal:nth-of-type(8) {transform: rotate(calc(var(--deg)*7));}
.petal:nth-of-type(9) {transform: rotate(calc(var(--deg)*8));}
.petal:nth-of-type(10) {transform: rotate(calc(var(--deg)*9));}
.petal:nth-of-type(11) {transform: rotate(calc(var(--deg)*10));}
.petal:nth-of-type(12) {transform: rotate(calc(var(--deg)*11));}
.petal:nth-of-type(odd) {z-index: 1;}
.petal:nth-of-type(even) {z-index: 2;}
.flower > .center {
box-shadow: 0px 0px 10px rgba(0, 0, 0, .4);
}
/*FLOWER1*/
.flower:nth-child(2) {
top: calc(var(--posScale)*1 + var(--adjVer));
left: calc(var(--posScale)*3 + var(--adjHor));
transform: scale(calc(var(--unitScale)*8));
}
.flower:nth-child(2) > .center,
.flower:nth-child(6) > .center {
width: 50px;
height: 50px;
top: 75px;
left: -25px;
background-color: #F8D095;
border-radius: 50%;
z-index: 3;
border: 2px #DBA042 solid;
}
.flower:nth-child(2) > .petals > .petal,
.flower:nth-child(6) > .petals > .petal,
.flower:nth-child(10) > .mini > .petal {
width: 100px;
height: 100px;
border-radius: 100% 0%;
background-color: #F67280;
border: 2px #A34C55 solid;
}
.flower:nth-child(2) > .petals > .petal::after,
.flower:nth-child(6) > .petals > .petal::after {
content: "";
width: 0px;
height: 90px;
border-right: 2px #A34C55 solid;
transform: rotate(45deg);
transform-origin: 0% 100%;
top: 10px;
}
/*FLOWER2*/
.flower:nth-child(3) {
top: calc(var(--posScale)*18 + var(--adjVer));
left: calc(var(--posScale)*20 + var(--adjHor));
transform: scale(calc(var(--unitScale)*9)) rotate(-50deg);
}
.flower:nth-child(3) > .center,
.flower:nth-child(7) > .center {
width: 80px;
height: 80px;
background-color: #F8C371;
border-radius: 50%;
left: -45px;
top: 60px;
z-index: 3;
border: 5px #f4970b solid;
}
.flower:nth-child(3) > .petals > .petal,
.flower:nth-child(7) > .petals > .petal,
.flower:nth-child(11) > .mini > .petal,
.flower:nth-child(13) > .mini > .petal,
.flower:nth-child(16) > .mini > .petal {
width: 100px;
height: 100px;
border-radius: 70% 0%;
background-color: #C06C84;
border: 2px #7F4858 solid;
}
.flower:nth-child(3) > .petals > .petal::after,
.flower:nth-child(7) > .petals > .petal::after {
content: "";
width: 0px;
height: 110px;
border-right: 2px #7F4858 solid;
transform: rotate(45deg);
transform-origin: 0% 100%;
top: -11px;
}
/*FLOWER3*/
.flower:nth-child(4) {
top: calc(var(--posScale)*3 + var(--adjVer));
left: calc(var(--posScale)*21 + var(--adjHor));
transform: scale(calc(var(--unitScale)*9)) rotate(-10deg);
z-index: 4;
}
.flower:nth-child(4) > .center,
.flower:nth-child(8) > .center {
width: 40px;
height: 40px;
background-color: #FFD46F;
border-radius: 50%;
left: -20px;
top: 80px;
z-index: 3;
border: 2px #D1AE5B solid;
}
.flower:nth-child(4) > .petals > .petal,
.flower:nth-child(8) > .petals > .petal,
.flower:nth-child(14) > .mini > .petal,
.flower:nth-child(15) > .mini > .petal {
width: 100px;
height: 100px;
border-radius: 50% 0% 100% 0% /
100% 0% 50% 0%;
background-color: #F8B195;
border: 2px #BA8570 solid;
}
.flower:nth-child(4) > .petals > .petal::after,
.flower:nth-child(8) > .petals > .petal::after {
content: "";
width: 0px;
height: 70px;
border-right: 2px #BA8570 solid;
transform: rotate(45deg);
transform-origin: 0% 100%;
top: 30px;
}
/*FLOWER4*/
.flower:nth-child(5) {
top: calc(var(--posScale)*9 + var(--adjVer));
left: calc(var(--posScale)*1 + var(--adjHor));
transform: scale(calc(var(--unitScale)*8)) rotate(-10deg);
z-index: 5;
}
.flower:nth-child(5) > .center,
.flower:nth-child(9) > .center {
width: 60px;
height: 60px;
background-color: #F7C916;
border-radius: 50%;
left: -30px;
top: 70px;
z-index: 3;
border: 2px #D1A810 solid;
}
.flower:nth-child(5) > .petals > .petal,
.flower:nth-child(9) > .petals > .petal,
.flower:nth-child(12) > .mini > .petal {
width: 100px;
height: 100px;
border-radius: 50% 50% 100% 0% /
100% 50% 50% 0%;
background-color:#947DA8;
border: 2px #5E4F6B solid;
}
.flower:nth-child(5) > .petals > .petal::after,
.flower:nth-child(9) > .petals > .petal::after {
content: "";
width: 0px;
height: 55px;
border-right: 2px #5E4F6B solid;
transform: rotate(45deg);
transform-origin: 0% 100%;
top: 45px;
}
/*FLOWER5*/
.flower:nth-child(6) {
top: calc(var(--posScale)*11 + var(--adjVer));
left: calc(var(--posScale)*22 + var(--adjHor));
transform: scale(calc(var(--unitScale)*8)) rotate(-30deg);
z-index: 5;
}
/*FLOWER6*/
.flower:nth-child(7) {
top: calc(var(--posScale)*-1 + var(--adjVer));
left: calc(var(--posScale)*11 + var(--adjHor));
transform: scale(calc(var(--unitScale)*8.5)) rotate(-25deg);
z-index: 4;
}
/*FLOWER7*/
.flower:nth-child(8) {
top: calc(var(--posScale)*18 + var(--adjVer));
left: calc(var(--posScale)*7 + var(--adjHor));
transform: scale(calc(var(--unitScale)*9)) rotate(25deg);
z-index: 4;
}
/*FLOWER8*/
.flower:nth-child(9) {
top: calc(var(--posScale)*21 + var(--adjVer));
left: calc(var(--posScale)*13 + var(--adjHor));
transform: scale(calc(var(--unitScale)*8.5)) rotate(-20deg);
z-index: 1;
}
/*HALF PETALS*/
.flower:nth-child(5) > .petals > .petal:nth-of-type(odd),
.flower:nth-child(6) > .petals > .petal:nth-of-type(odd),
.flower:nth-child(7) > .petals > .petal:nth-of-type(odd),
.flower:nth-child(8) > .petals > .petal:nth-of-type(odd),
.flower:nth-child(10) > .mini > .petal:nth-of-type(odd),
.flower:nth-child(11) > .mini > .petal:nth-of-type(odd),
.flower:nth-child(12) > .mini > .petal:nth-of-type(odd),
.flower:nth-child(13) > .mini > .petal:nth-of-type(odd),
.flower:nth-child(14) > .mini > .petal:nth-of-type(odd),
.flower:nth-child(15) > .mini > .petal:nth-of-type(odd),
.flower:nth-child(16) > .mini > .petal:nth-of-type(odd) {
display: none;
}
/*FLOWERS MINI*/
.m-center {
width: 50px;
height: 50px;
background-color: #F7C916;
border-radius: 50%;
left: -27px;
top: 77px;
z-index: 3;
border: 2px #D1A810 solid;
}
.flower:nth-child(10) {
top: calc(var(--posScale)*21 + var(--adjVer));
left: calc(var(--posScale)*18 + var(--adjHor));
transform: scale(calc(var(--unitScale)*3)) rotate(-25deg);
z-index: 10;
}
.flower:nth-child(11) {
top: calc(var(--posScale)*16 + var(--adjVer));
left: calc(var(--posScale)*0 + var(--adjHor));
transform: scale(calc(var(--unitScale)*4)) rotate(-40deg);
z-index: 10;
}
.flower:nth-child(12) {
top: calc(var(--posScale)*0 + var(--adjVer));
left: calc(var(--posScale)*18 + var(--adjHor));
transform: scale(calc(var(--unitScale)*4)) rotate(-15deg);
z-index: 10;
}
.flower:nth-child(13) {
top: calc(var(--posScale)*9 + var(--adjVer));
left: calc(var(--posScale)*25 + var(--adjHor));
transform: scale(calc(var(--unitScale)*3.5)) rotate(-35deg);
z-index: 10;
}
.flower:nth-child(14) {
top: calc(var(--posScale)*0 + var(--adjVer));
left: calc(var(--posScale)*7 + var(--adjHor));
transform: scale(calc(var(--unitScale)*4)) rotate(-20deg);
z-index: 10;
}
.flower:nth-child(15) {
top: calc(var(--posScale)*24 + var(--adjVer));
left: calc(var(--posScale)*19 + var(--adjHor));
transform: scale(calc(var(--unitScale)*3.5)) rotate(-0deg);
z-index: 10;
}
.flower:nth-child(16) {
top: calc(var(--posScale)*24 + var(--adjVer));
left: calc(var(--posScale)*10 + var(--adjHor));
transform: scale(calc(var(--unitScale)*4)) rotate(30deg);
z-index: 10;
}
/*CSS Breakpoints*/
@media only screen and (min-width: 500px) {
:root {
--unitScale: .08;
--titleFont: 25vw;
}
}
@media only screen and (min-width: 800px) {
:root {
--titleFont: 17vw;
--baseUnit: 2vw;
--posScale: 2vw;
}
main article {
grid-column: 1 / span 2;
border: 3px solid red;
}
main section {
grid-column: 3 / 4;
border: 2px solid green;
display: flex;
flex-flow: column nowrap;
}
main section section:last-child {
flex: auto;
}
}
@media only screen and (min-width: 1000px) {
:root {
--adjVer: -3.7rem;
--adjHor: -3rem;
--unitScale: .09;
--titleFont: 8rem;
--baseUnit: 1rem;
--posScale: 1rem;
}
}