I am working on angular app and I am very new to html and css. I am trying to make a progress bar. I want to divide each section of this progress bar into two sub sections with different background color as shown here in the image below.
my code is as follows:
.wrap {
width: 100%;
height: 30px;
z-index: -2;
white-space: nowrap;
overflow: hidden;
}
.wrap div:first-child {
margin-left: -2%;
}
.progress {
margin: 0;
margin-left: 0.5%;
height: 30px;
width: 25%;
position: relative;
display: inline-block;
text-align: center;
line-height: 30px;
transition: all 0.8s;
}
.progress:before,
.progress:after {
content: "";
position: absolute;
transition: all 0.8s;
z-index: -1;
}
.progress:before {
height: 50%;
width: 100%;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.2);
transform: skew(45deg);
}
.progress:after {
height: 50%;
width: 100%;
top: 50%;
left: 0;
background: rgba(0, 0, 0, 0.2);
transform: skew(-45deg);
}
.progress:hover:before,
.progress:hover:after {
background: tomato;
}
<div class="wrap">
<div class="progress">
simple
</div>
<div class="progress">
as
</div>
<div class="progress">
complex
</div>
<div class="progress">
Web Development
</div>
</div>
How can I do this? Please help.
.wrap {
width: 100%;
height: 30px;
z-index: -2;
white-space: nowrap;
overflow: hidden;
}
.wrap div:first-child {
margin-left: -2%;
}
.progress {
margin: 0;
margin-left: 0.5%;
height: 30px;
width: 25%;
position: relative;
display: inline-block;
text-align: center;
line-height: 30px;
transition: all 0.8s;
}
.progress:before,
.progress:after {
content: "";
position: absolute;
transition: all 0.8s;
z-index: -1;
}
.progress:before {
height: 50%;
width: 100%;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.2);
transform: skew(45deg);
}
.progress:after {
height: 50%;
width: 100%;
top: 50%;
left: 0;
background: rgba(0, 0, 0, 0.2);
transform: skew(-45deg);
}
#div1{
width:60%;
}
#div2{
width:40%;
}
#div2:hover:before,#div2:hover:after
{
background: green !important;
}
#div1:hover:before,#div1:hover:after
{
background: orange; !important;
}
<div class="wrap">
<div class="progress">
<div class="progress" id="div1">simple</div>
<div class="progress" id="div2">simple</div>
</div>
<div class="progress">
as
</div>
<div class="progress">
complex
</div>
<div class="progress">
Web Development
</div>
</div>
.wrap {
width: 100%;
height: 30px;
z-index: -2;
white-space: nowrap;
overflow: hidden;
}
.wrap div:first-child {
margin-left: -2%;
}
.progress {
margin: 0;
margin-left: 0.5%;
height: 30px;
width: 25%;
position: relative;
display: inline-block;
text-align: center;
line-height: 30px;
transition: all 0.8s;
}
.progress:before,
.progress:after {
content: "";
position: absolute;
transition: all 0.8s;
z-index: -1;
}
.progress:before {
height: 50%;
width: 100%;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.2);
transform: skew(45deg);
}
.progress:after {
height: 50%;
width: 100%;
top: 50%;
left: 0;
background: rgba(0, 0, 0, 0.2);
transform: skew(-45deg);
}
#div1{
width:60%;
}
#div2{
width:40%;
}
#div2:hover:before,#div2:hover:after
{
background: green !important;
}
#div1:hover:before,#div1:hover:after
{
background: orange; !important;
}
<div class="wrap">
<div class="progress">
<div class="progress" id="div1">simple</div>
<div class="progress" id="div2">simple</div>
</div>
<div class="progress">
as
</div>
<div class="progress">
complex
</div>
<div class="progress">
Web Development
</div>
</div>
You could use a linear gradient, e.g.:
background: linear-gradient(90deg, rgba(0,212,255,1) 80%, rgba(0,0,0,0.2) 80%);
.wrap {
width: 100%;
height: 30px;
z-index: -2;
white-space: nowrap;
overflow: hidden;
}
.wrap div:first-child {
margin-left: -2%;
}
.progress {
margin: 0;
margin-left: 0.5%;
height: 30px;
width: 25%;
position: relative;
display: inline-block;
text-align: center;
line-height: 30px;
transition: all 0.8s;
}
.progress:before,
.progress:after {
content: "";
background: linear-gradient(90deg, rgba(0,212,255,1) 80%, rgba(0,0,0,0.2) 80%);
position: absolute;
transition: all 0.8s;
z-index: -1;
}
.progress:before {
height: 50%;
width: 100%;
top: 0;
left: 0;
transform: skew(45deg);
}
.progress:after {
height: 50%;
width: 100%;
top: 50%;
left: 0;
transform: skew(-45deg);
}
.progress:hover:before,
.progress:hover:after {
background: tomato;
}
<div class="wrap">
<div class="progress">
simple
</div>
<div class="progress">
<div style="display:inline-block;width:80%;">80%</div>
<div style="display:inline-block;width:20%;">20%</div>
</div>
<div class="progress">
complex
</div>
<div class="progress">
Web Development
</div>
</div>
Related
I am working on an angular app and making a progress bar using angular. I am facing two problems with my progress bar.
The 4th section of web development is titled from end. I want to make it straight same as first section
Text inside boxes coming in one after the other lines. I want them in one single line in parallel.
How can I resolve these issues?
.wrap {
width: 100%;
height: 30px;
z-index: -2;
white-space: nowrap;
overflow: hidden;
}
.wrap div:first-child {
margin-left: -2%;
}
.progress {
margin: 0;
margin-left: 0.5%;
height: 30px;
width: 25%;
position: relative;
display: inline-block;
text-align: center;
line-height: 30px;
transition: all 0.8s;
}
.progress:before,
.progress:after {
content: "";
position: absolute;
transition: all 0.8s;
z-index: -1;
}
.progress:before {
height: 50%;
width: 100%;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.2);
-webkit-transform: skew(45deg);
-moz-transform: skew(45deg);
transform: skew(45deg);
}
.progress:after {
height: 50%;
width: 100%;
top: 50%;
left: 0;
background: rgba(0, 0, 0, 0.2);
-webkit-transform: skew(-45deg);
-moz-transform: skew(-45deg);
transform: skew(-45deg);
}
.progress:hover:before,
.progress:hover:after {
background: tomato;
}
<div class="wrap">
<div class="progress">
<div>MyData</div>
<div>My Status</div>
</div>
<div class="progress">
<div>MyData</div>
<div>My Status</div>
</div>
<div class="progress">
<div>MyData</div>
<div>My Status</div>
</div>
<div class="progress">
<div>MyData</div>
<div>My Status</div>
</div>
</div>
Since you've put each label in a div element you might use flex layout on the parent. Otherwise, simply put both labels in the same div. Here I demonstrate both approaches.
.wrap {
width: 100%;
height: 30px;
z-index: -2;
white-space: nowrap;
overflow: hidden;
}
.wrap div:first-child {
margin-left: -2%;
}
.progress {
margin: 0;
margin-left: 0.5%;
height: 30px;
width: 25%;
position: relative;
display: inline-flex; /* updated */
justify-content: center; /* new */
gap: 8px; /* new */
text-align: center;
line-height: 30px;
transition: all 0.8s;
}
.progress:before,
.progress:after {
content: "";
position: absolute;
transition: all 0.8s;
z-index: -1;
}
.progress:before {
height: 50%;
width: 100%;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.2);
transform: skew(45deg);
}
.progress:after {
height: 50%;
width: 100%;
top: 50%;
left: 0;
background: rgba(0, 0, 0, 0.2);
-webkit-transform: skew(-45deg);
-moz-transform: skew(-45deg);
transform: skew(-45deg);
}
.progress:hover:before,
.progress:hover:after {
background: tomato;
}
<div class="wrap">
<div class="progress">
<div>MyData</div>
<div>My Status</div>
</div>
<div class="progress">
<div>MyData</div>
<div>My Status</div>
</div>
<div class="progress">
<div>MyData My Status</div>
</div>
<div class="progress">
<div>MyData My Status</div>
</div>
</div>
I was trying to participate in a CSS challenge when this occurred. Everything seems working as expected, however when clicking on the plus circle to display div#card the div.container loses it's top margin and I cannot understand why. Please if anyone can help me with this, I'd be really grateful - And maybe we can all learn from it ;)
Thanks!
Codepen: https://codepen.io/albertrf147/pen/LMKKeK
HTML
html,
body {
width: 100%;
height: 100%;
}
body {
margin: 0px;
overflow: hidden;
background: lightblue;
}
.container {
width: 400px;
height: 400px;
margin: 20px auto !important;
position: relative;
display: flex;
flex-wrap: wrap;
background: white;
padding: 2px;
}
.square {
box-sizing: border-box;
padding: 2px;
width: 50%;
height: 50%;
position: relative;
background: white;
}
.square>img {
height: 100%;
width: 100%;
object-fit: cover;
display: block;
margin: auto;
}
.onhover {
box-sizing: border-box;
width: 100%;
height: 100%;
position: absolute;
cursor: pointer;
transition: all .6s ease-in-out;
}
.onhover:hover {
background: rgba(0, 0, 0, 0.5);
}
.circle-aux {
position: relative;
width: 100%;
height: 100%;
transition: all .6s ease-in-out;
}
.circle-aux:hover .circle {
visibility: visible;
opacity: 1;
transform: scale(0.2);
transition: all .6s ease-in-out;
}
.circle {
visibility: hidden;
opacity: 0;
position: absolute;
border-radius: 50%;
width: 100%;
height: 100%;
background: salmon;
}
.circle:before {
content: "";
background: white;
height: 50%;
width: 6px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.circle:after {
content: "";
background: white;
height: 6px;
width: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.container-card {
visibility: hidden;
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
.container-card>img {
width: 100%;
height: 60%;
object-fit: cover;
}
.container-card:target {
visibility: visible;
}
.avatar {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
box-shadow: 0px 0px 20px black;
width: 25%;
height: 25%;
background: white;
z-index: 2;
text-align: center;
font-family: calibri;
font-weight: bold;
color: white;
font-size: 18px;
}
.avatar>img {
box-sizing: border-box;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: inherit;
padding: 4px;
}
.mini-circle {
display: inline-block;
width: 15%;
height: 15%;
border: 1px solid white;
border-radius: 50%;
margin-top: 12px;
}
.mini-circle:hover {
background: white;
cursor: pointer;
}
footer {
box-sizing: border-box;
position: absolute;
bottom: 0;
left: 0;
background: salmon;
height: 50%;
width: 100%;
z-index: 1;
padding: 2px;
}
.close {
position: absolute;
border-radius: 50%;
width: 8%;
height: 8%;
background: black;
transform: rotate(45deg);
right: 10px;
top: 10px;
cursor: pointer;
}
.close:before {
content: "";
background: white;
height: 60%;
width: 2px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.close:after {
content: "";
background: white;
height: 2px;
width: 60%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<main>
<div class="container">
<div class="square">
<div class="onhover">
<div class="circle-aux">
<a class="circle" href="#card"></a>
</div>
</div>
<img src="https://images.pexels.com/photos/305241/pexels-photo-305241.jpeg?auto=compress&cs=tinysrgb&h=650&w=940" />
</div>
<div class="square">
<div class="onhover">
<div class="circle-aux">
<div class="circle"></div>
</div>
</div>
<img src="https://images.pexels.com/photos/1546711/pexels-photo-1546711.jpeg?auto=compress&cs=tinysrgb&h=650&w=940" />
</div>
<div class="square">
<div class="onhover">
<div class="circle-aux">
<div class="circle"></div>
</div>
</div>
<img src="https://images.pexels.com/photos/1800433/pexels-photo-1800433.jpeg?auto=compress&cs=tinysrgb&h=650&w=940" />
</div>
<div class="square">
<div class="onhover">
<div class="circle-aux">
<div class="circle"></div>
</div>
</div>
<img src="https://images.pexels.com/photos/1757111/pexels-photo-1757111.jpeg?auto=compress&cs=tinysrgb&h=650&w=940" />
</div>
<div id="card" class="container-card">
<a class="close" href="#"></a>
<img src="https://images.pexels.com/photos/1769331/pexels-photo-1769331.jpeg?auto=compress&cs=tinysrgb&h=650&w=940" />
<div class="avatar">
<img src="https://images.pexels.com/photos/769772/pexels-photo-769772.jpeg?auto=compress&cs=tinysrgb&h=650&w=940" />
<span>David Craig</span>
<span>
<div class="mini-circle"></div>
<div class="mini-circle"></div>
<div class="mini-circle"></div>
</span>
</div>
<footer></footer>
</div>
</div>
</main>
Welcome to SO!
As the appearing container is position: absolute no margin takes effect.
You need to work with the top attribute to place it properly.
Check this out: https://codepen.io/anon/pen/pGzVyL
For more informations click here: https://www.w3schools.com/css/css_positioning.asp
Could some one bring me on track? How could I make that wave on the bottom of the header?
This is what I have so far: https://codepen.io/zimex/pen/XaQjZL
<header id="header">
<div class="container">
<div class="logo">
</div>
<div class="mobile-wrap">
<div class="inner">
<div class="user">
<div class="wrap">
<span>Hi</span>
</div>
</div>
<div class="nav">
<ul>
<li>Menu</li>
<li>Items</li>
<li>Are</li>
<li>Located</li>
<li>Here</li>
</ul>
</div>
</div>
</div>
<div class="burger">
<span></span>
</div>
</div>
</header>
1) you can use img for this - bad solution but work
2) check http://dev.wavemaker.com/wiki/bin/wmdoc_6.3/CSS
3)
html, body {
height: 100%;
}
html {
background: #eee;
}
body {
display: flex;
justify-content: center;
align-items: center;
}
.box {
width: 300px;
height: 300px;
border-radius: 5px;
box-shadow: 0 2px 30px rgba(black, .2);
background: lighten(#f0f4c3, 10%);
position: relative;
overflow: hidden;
transform: translate3d(0, 0, 0);
}
.wave {
opacity: .4;
position: absolute;
top: 3%;
left: 50%;
background: #0af;
width: 500px;
height: 500px;
margin-left: -250px;
margin-top: -250px;
transform-origin: 50% 48%;
border-radius: 43%;
animation: drift 3000ms infinite linear;
}
.wave.-three {
animation: drift 5000ms infinite linear;
}
.wave.-two {
animation: drift 7000ms infinite linear;
opacity: .1;
background: yellow;
}
.box:after {
content: '';
display: block;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: linear-gradient(to bottom, rgba(#e8a, 1), rgba(#def, 0) 80%, rgba(white, .5));
z-index: 11;
transform: translate3d(0, 0, 0);
}
.title {
position: absolute;
left: 0;
top: 0;
width: 100%;
z-index: 1;
line-height: 300px;
text-align: center;
transform: translate3d(0, 0, 0);
color: white;
text-transform: uppercase;
font-family: 'Playfair Display', serif;
letter-spacing: .4em;
font-size: 24px;
text-shadow: 0 1px 0 rgba(black, .1);
text-indent: .3em;
}
#keyframes drift {
from { transform: rotate(0deg); }
from { transform: rotate(360deg); }
}
sample
I'm having trouble with the code below.
I want the reflection of the windmill and all to be embedded inside the circle shape, but i'm unable to do so.
Please help me.
Thank you in advance.
Here is my html
body {
background-color: white;
}
#Circle {
background-color: #22304D;
background: linear-gradient(to bottom, #22304D, #5E7B9B);
width: 500px;
height: 500px;
border-radius: 100%;
margin: 0 auto;
overflow: hidden;
}
#Circle #cont {
background-color: transparent;
width: 500px;
height: 500px;
border-radius: 100%;
margin: 0 auto;
box-shadow: inset 0 0 100px black;
}
#Circle #cont .top {
height: 250px;
position: relative;
background-color: transparent;
border-top-left-radius: 900px;
border-top-right-radius: 900px;
}
.bottom {
display: inline-block;
position: relative;
margin-top: 390px;
opacity: 0.6;
filter: blur(2px);
transform: scaleY(-1);
}
.floor {
background-color: #1E2D49;
width: 468px;
margin-left: 16px;
position: absolute;
height: 20px;
margin-top: 320px;
z-index: 0;
}
.floor::after {
content: "";
background-color: #1E2D49;
width: 200px;
height: 50px;
position: absolute;
transform: rotateX(45deg);
margin-top: -30px;
margin-left: -3px;
border-radius: 90% 100% 0 0;
}
.floor::before {
content: "";
background-color: content:"";
background-color: #1E2D49;
width: 200px;
height: 50px;
position: absolute;
transform: rotateX(45deg);
border-radius: 90% 100% 0 0;
;
width: 347px;
height: 70px;
position: absolute;
transform: rotateX(45deg);
margin-left: 122px;
margin-top: -50px;
border-radius: 100% 100% 0 0;
}
.sky {}
.moon {
background-color: white;
width: 48px;
height: 48px;
z-index: 2;
border-radius: 100%;
position: absolute;
margin-left: 130px;
margin-top: 180px;
box-shadow: 0 0 5px white, 0 0 10px #1E2D49, 0 0 90px white;
}
.stars {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
display: block;
}
.stars {
background: url(http://www.script-tutorials.com/demos/360/images/stars.png) repeat top center;
z-index: 0;
}
.mill {
background-color: #1E2D49;
width: 50px;
height: 140px;
transform: perspective(12px) rotateX(3deg);
position: absolute;
z-index: 3;
margin-top: 150px;
margin-left: 330px;
}
.mill::before {
content: "";
background-color: #FDC500;
width: 20px;
height: 20px;
position: absolute;
margin-left: 15px;
margin-top: 35px;
}
.mill::after {
content: "";
background-color: #FDC500;
width: 20px;
height: 25px;
position: absolute;
margin-left: 15px;
margin-top: 70px;
}
.dome {
background-color: #1E2D49;
width: 35px;
height: 35px;
position: absolute;
transform-origin: 0 100%;
transform: rotate(45deg);
overflow: hidden;
margin-left: 330px;
margin-top: 125px;
z-index: 4;
}
.fan {
background-color: #37475E;
/*37475E */
width: 10px;
height: 10px;
border-radius: 100%;
position: absolute;
margin-top: 155px;
margin-left: 350px;
z-index: 7;
animation-name: rotate_fan;
animation-duration: 6s;
animation-iteration-count: infinite;
}
.fan_blade1,
.fan_blade2,
.fan_blade3,
.fan_blade4 {
background-color: #37475E;
width: 4px;
height: 60px;
position: absolute;
z-index: 6;
margin-left: 35px;
margin-top: -28px;
border-left: 1.5px solid black;
border-top: 1px solid black;
transform: rotate(90deg);
}
.fan_blade2 {
transform: rotate(180deg);
margin-left: 1px;
margin-top: 5px;
}
.fan_blade3 {
transform: rotate(360deg);
margin-left: 3px;
margin-top: -60px;
}
.fan_blade4 {
transform: rotate(270deg);
margin-top: -28px;
margin-left: -30px;
}
.fan_blade1::before,
.fan_blade2::before,
.fan_blade3::before,
.fan_blade4::before {
content: "";
background-color: transparent;
width: 20px;
height: 45px;
margin-left: 5px;
background-size: 10px 11px;
background-image: linear-gradient(to left, gray 2px, transparent 1px), linear-gradient(to bottom, gray 2px, transparent 1px), linear-gradient(to top, gray 1px, transparent 0px);
position: absolute;
}
#keyframes rotate_fan {
from {}
to {
transform: rotate(360deg);
}
}
<div id="Circle">
<div id="cont">
<div class="top">
<div class="dome"></div>
<div class="fan">
<div class="fan_blade1"></div>
<div class="fan_blade2"></div>
<div class="fan_blade3"></div>
<div class="fan_blade4"></div>
</div>
<div class="mill"></div>
<div class="sky">
<div class="stars"></div>
<div class="moon"></div>
</div>
<div class="floor">
</div>
</div>
<div class="bottom">
<div class="dome"></div>
<div class="fan">
<div class="fan_blade1"></div>
<div class="fan_blade2"></div>
<div class="fan_blade3"></div>
<div class="fan_blade4"></div>
</div>
<div class="mill"></div>
<div class="sky">
<div class="stars"></div>
<div class="moon"></div>
</div>
<div class="floor">
</div>
</div>
</div>
</div>
You can clip the circle like this:
body {
background-color: white;
}
#Circle {
-webkit-clip-path: inset(0 0 0 0 round 250px);
clip-path: inset(0 0 0 0 round 250px);
background-color: #22304D;
background: linear-gradient(to bottom, #22304D, #5E7B9B);
width: 500px;
height: 500px;
border-radius: 100%;
margin: 0 auto;
overflow: hidden;
}
#Circle #cont {
background-color: transparent;
width: 500px;
height: 500px;
border-radius: 100%;
margin: 0 auto;
box-shadow: inset 0 0 100px black;
}
#Circle #cont .top {
height: 250px;
position: relative;
background-color: transparent;
border-top-left-radius: 900px;
border-top-right-radius: 900px;
}
.bottom {
display: inline-block;
position: relative;
margin-top: 390px;
opacity: 0.6;
filter: blur(2px);
transform: scaleY(-1);
}
.floor {
background-color: #1E2D49;
width: 468px;
margin-left: 16px;
position: absolute;
height: 20px;
margin-top: 320px;
z-index: 0;
}
.floor::after {
content: "";
background-color: #1E2D49;
width: 200px;
height: 50px;
position: absolute;
transform: rotateX(45deg);
margin-top: -30px;
margin-left: -3px;
border-radius: 90% 100% 0 0;
}
.floor::before {
content: "";
background-color: content:"";
background-color: #1E2D49;
width: 200px;
height: 50px;
position: absolute;
transform: rotateX(45deg);
border-radius: 90% 100% 0 0;
;
width: 347px;
height: 70px;
position: absolute;
transform: rotateX(45deg);
margin-left: 122px;
margin-top: -50px;
border-radius: 100% 100% 0 0;
}
.sky {}
.moon {
background-color: white;
width: 48px;
height: 48px;
z-index: 2;
border-radius: 100%;
position: absolute;
margin-left: 130px;
margin-top: 180px;
box-shadow: 0 0 5px white, 0 0 10px #1E2D49, 0 0 90px white;
}
.stars {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
display: block;
}
.stars {
background: url(http://www.script-tutorials.com/demos/360/images/stars.png) repeat top center;
z-index: 0;
}
.mill {
background-color: #1E2D49;
width: 50px;
height: 140px;
transform: perspective(12px) rotateX(3deg);
position: absolute;
z-index: 3;
margin-top: 150px;
margin-left: 330px;
}
.mill::before {
content: "";
background-color: #FDC500;
width: 20px;
height: 20px;
position: absolute;
margin-left: 15px;
margin-top: 35px;
}
.mill::after {
content: "";
background-color: #FDC500;
width: 20px;
height: 25px;
position: absolute;
margin-left: 15px;
margin-top: 70px;
}
.dome {
background-color: #1E2D49;
width: 35px;
height: 35px;
position: absolute;
transform-origin: 0 100%;
transform: rotate(45deg);
overflow: hidden;
margin-left: 330px;
margin-top: 125px;
z-index: 4;
}
.fan {
background-color: #37475E;
/*37475E */
width: 10px;
height: 10px;
border-radius: 100%;
position: absolute;
margin-top: 155px;
margin-left: 350px;
z-index: 7;
animation-name: rotate_fan;
animation-duration: 6s;
animation-iteration-count: infinite;
}
.fan_blade1,
.fan_blade2,
.fan_blade3,
.fan_blade4 {
background-color: #37475E;
width: 4px;
height: 60px;
position: absolute;
z-index: 6;
margin-left: 35px;
margin-top: -28px;
border-left: 1.5px solid black;
border-top: 1px solid black;
transform: rotate(90deg);
}
.fan_blade2 {
transform: rotate(180deg);
margin-left: 1px;
margin-top: 5px;
}
.fan_blade3 {
transform: rotate(360deg);
margin-left: 3px;
margin-top: -60px;
}
.fan_blade4 {
transform: rotate(270deg);
margin-top: -28px;
margin-left: -30px;
}
.fan_blade1::before,
.fan_blade2::before,
.fan_blade3::before,
.fan_blade4::before {
content: "";
background-color: transparent;
width: 20px;
height: 45px;
margin-left: 5px;
background-size: 10px 11px;
background-image: linear-gradient(to left, gray 2px, transparent 1px), linear-gradient(to bottom, gray 2px, transparent 1px), linear-gradient(to top, gray 1px, transparent 0px);
position: absolute;
}
#keyframes rotate_fan {
from {}
to {
transform: rotate(360deg);
}
}
<div id="Circle">
<div id="cont">
<div class="top">
<div class="dome"></div>
<div class="fan">
<div class="fan_blade1"></div>
<div class="fan_blade2"></div>
<div class="fan_blade3"></div>
<div class="fan_blade4"></div>
</div>
<div class="mill"></div>
<div class="sky">
<div class="stars"></div>
<div class="moon"></div>
</div>
<div class="floor">
</div>
</div>
<div class="bottom">
<div class="dome"></div>
<div class="fan">
<div class="fan_blade1"></div>
<div class="fan_blade2"></div>
<div class="fan_blade3"></div>
<div class="fan_blade4"></div>
</div>
<div class="mill"></div>
<div class="sky">
<div class="stars"></div>
<div class="moon"></div>
</div>
<div class="floor">
</div>
</div>
</div>
</div>
Set position: relative; z-index: 1; to #Circle
body {
background-color: white;
}
#Circle {
position: relative;
z-index: 1;
background-color: #22304D;
background: linear-gradient(to bottom, #22304D, #5E7B9B);
width: 500px;
height: 500px;
border-radius: 100%;
margin: 0 auto;
overflow: hidden;
}
#Circle #cont {
background-color: transparent;
width: 500px;
height: 500px;
border-radius: 100%;
margin: 0 auto;
box-shadow: inset 0 0 100px black;
}
#Circle #cont .top {
height: 250px;
position: relative;
background-color: transparent;
border-top-left-radius: 900px;
border-top-right-radius: 900px;
}
.bottom {
display: inline-block;
position: relative;
margin-top: 390px;
opacity: 0.6;
filter: blur(2px);
transform: scaleY(-1);
}
.floor {
background-color: #1E2D49;
width: 468px;
margin-left: 16px;
position: absolute;
height: 20px;
margin-top: 320px;
z-index: 0;
}
.floor::after {
content: "";
background-color: #1E2D49;
width: 200px;
height: 50px;
position: absolute;
transform: rotateX(45deg);
margin-top: -30px;
margin-left: -3px;
border-radius: 90% 100% 0 0;
}
.floor::before {
content: "";
background-color: content:"";
background-color: #1E2D49;
width: 200px;
height: 50px;
position: absolute;
transform: rotateX(45deg);
border-radius: 90% 100% 0 0;
;
width: 347px;
height: 70px;
position: absolute;
transform: rotateX(45deg);
margin-left: 122px;
margin-top: -50px;
border-radius: 100% 100% 0 0;
}
.sky {}
.moon {
background-color: white;
width: 48px;
height: 48px;
z-index: 2;
border-radius: 100%;
position: absolute;
margin-left: 130px;
margin-top: 180px;
box-shadow: 0 0 5px white, 0 0 10px #1E2D49, 0 0 90px white;
}
.stars {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
display: block;
}
.stars {
background: url(http://www.script-tutorials.com/demos/360/images/stars.png) repeat top center;
z-index: 0;
}
.mill {
background-color: #1E2D49;
width: 50px;
height: 140px;
transform: perspective(12px) rotateX(3deg);
position: absolute;
z-index: 3;
margin-top: 150px;
margin-left: 330px;
}
.mill::before {
content: "";
background-color: #FDC500;
width: 20px;
height: 20px;
position: absolute;
margin-left: 15px;
margin-top: 35px;
}
.mill::after {
content: "";
background-color: #FDC500;
width: 20px;
height: 25px;
position: absolute;
margin-left: 15px;
margin-top: 70px;
}
.dome {
background-color: #1E2D49;
width: 35px;
height: 35px;
position: absolute;
transform-origin: 0 100%;
transform: rotate(45deg);
overflow: hidden;
margin-left: 330px;
margin-top: 125px;
z-index: 4;
}
.fan {
background-color: #37475E;
/*37475E */
width: 10px;
height: 10px;
border-radius: 100%;
position: absolute;
margin-top: 155px;
margin-left: 350px;
z-index: 7;
animation-name: rotate_fan;
animation-duration: 6s;
animation-iteration-count: infinite;
}
.fan_blade1,
.fan_blade2,
.fan_blade3,
.fan_blade4 {
background-color: #37475E;
width: 4px;
height: 60px;
position: absolute;
z-index: 6;
margin-left: 35px;
margin-top: -28px;
border-left: 1.5px solid black;
border-top: 1px solid black;
transform: rotate(90deg);
}
.fan_blade2 {
transform: rotate(180deg);
margin-left: 1px;
margin-top: 5px;
}
.fan_blade3 {
transform: rotate(360deg);
margin-left: 3px;
margin-top: -60px;
}
.fan_blade4 {
transform: rotate(270deg);
margin-top: -28px;
margin-left: -30px;
}
.fan_blade1::before,
.fan_blade2::before,
.fan_blade3::before,
.fan_blade4::before {
content: "";
background-color: transparent;
width: 20px;
height: 45px;
margin-left: 5px;
background-size: 10px 11px;
background-image: linear-gradient(to left, gray 2px, transparent 1px), linear-gradient(to bottom, gray 2px, transparent 1px), linear-gradient(to top, gray 1px, transparent 0px);
position: absolute;
}
#keyframes rotate_fan {
from {}
to {
transform: rotate(360deg);
}
}
<div id="Circle">
<div id="cont">
<div class="top">
<div class="dome"></div>
<div class="fan">
<div class="fan_blade1"></div>
<div class="fan_blade2"></div>
<div class="fan_blade3"></div>
<div class="fan_blade4"></div>
</div>
<div class="mill"></div>
<div class="sky">
<div class="stars"></div>
<div class="moon"></div>
</div>
<div class="floor">
</div>
</div>
<div class="bottom">
<div class="dome"></div>
<div class="fan">
<div class="fan_blade1"></div>
<div class="fan_blade2"></div>
<div class="fan_blade3"></div>
<div class="fan_blade4"></div>
</div>
<div class="mill"></div>
<div class="sky">
<div class="stars"></div>
<div class="moon"></div>
</div>
<div class="floor">
</div>
</div>
</div>
</div>
Like in similar questions (Overflow hidden with border radius not working in chrome), it seems that setting
#Circle {
position: relative;
z-index: 1;
}
will solve your issue.
increase width and height of #circle and #Circle #cont so its display properly
body {
background-color: white;
}
#Circle {
background-color: #22304D;
background: linear-gradient(to bottom, #22304D, #5E7B9B);
width: 570px;
height: 570px;
border-radius: 100%;
margin: 0 auto;
overflow: hidden;
z-index:-2px;
position:absolute;
}
#Circle #cont {
background-color: transparent;
width: 570px;
height: 570px;
border-radius: 100%;
margin: 0 auto;
box-shadow: inset 0 0 100px black;
}
#Circle #cont .top {
height: 250px;
position: relative;
background-color: transparent;
border-top-left-radius: 900px;
border-top-right-radius: 900px;
}
.bottom {
display: inline-block;
position: relative;
margin-top: 390px;
opacity: 0.6;
filter: blur(2px);
transform: scaleY(-1);
}
.floor {
background-color: #1E2D49;
width: 468px;
margin-left: 16px;
position: absolute;
height: 20px;
margin-top: 320px;
z-index: 0;
}
.floor::after {
content: "";
background-color: #1E2D49;
width: 200px;
height: 50px;
position: absolute;
transform: rotateX(45deg);
margin-top: -30px;
margin-left: -3px;
border-radius: 90% 100% 0 0;
}
.floor::before {
content: "";
background-color: content:"";
background-color: #1E2D49;
width: 200px;
height: 50px;
position: absolute;
transform: rotateX(45deg);
border-radius: 90% 100% 0 0;
;
width: 347px;
height: 70px;
position: absolute;
transform: rotateX(45deg);
margin-left: 122px;
margin-top: -50px;
border-radius: 100% 100% 0 0;
}
.sky {}
.moon {
background-color: white;
width: 48px;
height: 48px;
z-index: 2;
border-radius: 100%;
position: absolute;
margin-left: 130px;
margin-top: 180px;
box-shadow: 0 0 5px white, 0 0 10px #1E2D49, 0 0 90px white;
}
.stars {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
display: block;
}
.stars {
background: url(http://www.script-tutorials.com/demos/360/images/stars.png) repeat top center;
z-index: 0;
}
.mill {
background-color: #1E2D49;
width: 50px;
height: 140px;
transform: perspective(12px) rotateX(3deg);
position: absolute;
z-index: 3;
margin-top: 150px;
margin-left: 330px;
}
.mill::before {
content: "";
background-color: #FDC500;
width: 20px;
height: 20px;
position: absolute;
margin-left: 15px;
margin-top: 35px;
}
.mill::after {
content: "";
background-color: #FDC500;
width: 20px;
height: 25px;
position: absolute;
margin-left: 15px;
margin-top: 70px;
}
.dome {
background-color: #1E2D49;
width: 35px;
height: 35px;
position: absolute;
transform-origin: 0 100%;
transform: rotate(45deg);
overflow: hidden;
margin-left: 330px;
margin-top: 125px;
z-index: 4;
}
.fan {
background-color: #37475E;
/*37475E */
width: 10px;
height: 10px;
border-radius: 100%;
position: absolute;
margin-top: 155px;
margin-left: 350px;
z-index: 7;
animation-name: rotate_fan;
animation-duration: 6s;
animation-iteration-count: infinite;
}
.fan_blade1,
.fan_blade2,
.fan_blade3,
.fan_blade4 {
background-color: #37475E;
width: 4px;
height: 60px;
position: absolute;
z-index: 6;
margin-left: 35px;
margin-top: -28px;
border-left: 1.5px solid black;
border-top: 1px solid black;
transform: rotate(90deg);
}
.fan_blade2 {
transform: rotate(180deg);
margin-left: 1px;
margin-top: 5px;
}
.fan_blade3 {
transform: rotate(360deg);
margin-left: 3px;
margin-top: -60px;
}
.fan_blade4 {
transform: rotate(270deg);
margin-top: -28px;
margin-left: -30px;
}
.fan_blade1::before,
.fan_blade2::before,
.fan_blade3::before,
.fan_blade4::before {
content: "";
background-color: transparent;
width: 20px;
height: 45px;
margin-left: 5px;
background-size: 10px 11px;
background-image: linear-gradient(to left, gray 2px, transparent 1px), linear-gradient(to bottom, gray 2px, transparent 1px), linear-gradient(to top, gray 1px, transparent 0px);
position: absolute;
}
#keyframes rotate_fan {
from {}
to {
transform: rotate(360deg);
}
}
<div id="Circle">
<div id="cont">
<div class="top">
<div class="dome"></div>
<div class="fan">
<div class="fan_blade1"></div>
<div class="fan_blade2"></div>
<div class="fan_blade3"></div>
<div class="fan_blade4"></div>
</div>
<div class="mill"></div>
<div class="sky">
<div class="stars"></div>
<div class="moon"></div>
</div>
<div class="floor">
</div>
</div>
<div class="bottom">
<div class="dome"></div>
<div class="fan">
<div class="fan_blade1"></div>
<div class="fan_blade2"></div>
<div class="fan_blade3"></div>
<div class="fan_blade4"></div>
</div>
<div class="mill"></div>
<div class="sky">
<div class="stars"></div>
<div class="moon"></div>
</div>
<div class="floor">
</div>
</div>
</div>
</div>
I'm new in HTML, CSS. Also I'm still learn so please be understanding.
I'm trying to do some kind of art gallery which will be looks like this:
I create this squares with help of tutorial, but I want to upgrade thisand put an image instead squares, but I have no idea how to do this. Any tips ?
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background-color: #99CCFF;
}
.container {
max-width: 1070px;
padding: 0 30px;
margin: 0 auto;
}
.diamond {
width: 11.5%;
padding-bottom: 11.5%;
background-color: rgba(255, 255, 255, 0.3);
display: inline-block;
}
.diamond-big {
width: 25%;
padding-bottom: 25%;
background-color: rgba(255, 255, 255, 0.6);
display: inline-block;
}
.grid {
position: relative;
padding-bottom: 100%;
transform: rotate(45deg);
transform-origin: 39%;
}
.grid-section {
overflow: hidden;
padding-bottom: 200px;
}
#diamond1 {
position: absolute;
top: 25%;
left: 10.5%;
cursor: pointer;
}
#diamond2 {
position: absolute;
top: 25%;
left: 24%;
}
#diamond3 {
position: absolute;
top: 11.5%;
left: 37.5%;
}
#diamond4 {
position: absolute;
top: 38.5%;
left: 24%;
}
#diamond5 {
position: absolute;
top: 38.5%;
left: 51%;
}
#diamond6 {
position: absolute;
top: 52%;
left: 51%;
}
#diamond7 {
position: absolute;
top: 38.5%;
left: 64.5%;
}
#diamond8 {
position: absolute;
top: 65.5%;
left: 51%;
}
#diamond9 {
position: absolute;
top: 65.5%;
left: 64.5%;
}
<div class="container">
<section class="grid-section">
<div class="grid">
<div id="diamond1" class="diamond"></div>
<div id="diamond2" class="diamond"></div>
<div id="diamond3" class="diamond-big"></div>
<div id="diamond4" class="diamond-big"></div>
<div id="diamond5" class="diamond"></div>
<div id="diamond6" class="diamond"></div>
<div id="diamond7" class="diamond-big"></div>
<div id="diamond8" class="diamond"></div>
<div id="diamond9" class="diamond-big"></div>
</div>
</section>
</div>
If you want to make the images easy downloadable or don't want to use background-image in css, you can do something like this. I've added images inside the divs and added the following css:
.diamond {
width: 11.5%;
padding-bottom: 11.5%;
background-color: rgba(255, 255, 255, 0.3);
display: inline-block;
position:relative;
overflow:hidden;
}
.diamond img, .diamond-big img
{ position:absolute;
left:-25%;
top:-25%;
width:150%;
-ms-transform: rotate(-45deg); /* IE 9 */
-webkit-transform: rotate(-45deg); /* Chrome, Safari, Opera */
transform: rotate(-45deg);
}
.diamond-big {
width: 25%;
padding-bottom: 25%;
background-color: rgba(255, 255, 255, 0.6);
display: inline-block;
position:relative;
overflow:hidden;
}
this makes the images as large as the squares.
Full code snippet:
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background-color: #99CCFF;
}
.container {
max-width: 1070px;
padding: 0 30px;
margin: 0 auto;
}
.diamond {
width: 11.5%;
padding-bottom: 11.5%;
background-color: rgba(255, 255, 255, 0.3);
display: inline-block;
position:relative;
overflow:hidden;
}
.diamond img, .diamond-big img
{ position:absolute;
left:-25%;
top:-25%;
width:150%;
-ms-transform: rotate(-45deg); /* IE 9 */
-webkit-transform: rotate(-45deg); /* Chrome, Safari, Opera */
transform: rotate(-45deg);
}
.diamond-big {
width: 25%;
padding-bottom: 25%;
background-color: rgba(255, 255, 255, 0.6);
display: inline-block;
position:relative;
overflow:hidden;
}
.grid {
position: relative;
padding-bottom: 100%;
transform: rotate(45deg);
transform-origin: 39%;
}
.grid-section {
overflow: hidden;
padding-bottom: 200px;
}
#diamond1 {
position: absolute;
top: 25%;
left: 10.5%;
cursor: pointer;
}
#diamond2 {
position: absolute;
top: 25%;
left: 24%;
}
#diamond3 {
position: absolute;
top: 11.5%;
left: 37.5%;
}
#diamond4 {
position: absolute;
top: 38.5%;
left: 24%;
}
#diamond5 {
position: absolute;
top: 38.5%;
left: 51%;
}
#diamond6 {
position: absolute;
top: 52%;
left: 51%;
}
#diamond7 {
position: absolute;
top: 38.5%;
left: 64.5%;
}
#diamond8 {
position: absolute;
top: 65.5%;
left: 51%;
}
#diamond9 {
position: absolute;
top: 65.5%;
left: 64.5%;
}
<div class="container">
<section class="grid-section">
<div class="grid">
<div id="diamond1" class="diamond"><img src="http://placehold.it/400x400" alt="alter"/></div>
<div id="diamond2" class="diamond"><img src="http://placehold.it/400x400" alt="alter"/></div>
<div id="diamond3" class="diamond-big"><img src="http://placehold.it/400x400" alt="alter"/></div>
<div id="diamond4" class="diamond-big"><img src="http://placehold.it/400x400" alt="alter"/></div>
<div id="diamond5" class="diamond"><img src="http://placehold.it/400x400" alt="alter"/></div>
<div id="diamond6" class="diamond"><img src="http://placehold.it/400x400" alt="alter"/></div>
<div id="diamond7" class="diamond-big"><img src="http://placehold.it/400x400" alt="alter"/></div>
<div id="diamond8" class="diamond"><img src="http://placehold.it/400x400" alt="alter"/></div>
<div id="diamond9" class="diamond-big"><img src="http://placehold.it/400x400" alt="alter"/></div>
</div>
</section>
</div>
Try to add the property background-image to the diamond and diamond-big classes. For example:
.diamond {
width: 11.5%;
padding-bottom: 11.5%;
background-image: url("image.jpg");
background-color: rgba(255, 255, 255, 0.3);
display: inline-block;
}
If you don't see the image anyway, try to add height property too.
There are many ways to do this
One of the quickest is to swap out the <div> tags with <img> tags while keeping the class and id attributes
in your case you need to adjust some of you CSS to avoid unnecessary padding
here's a working example: (needs polishing)
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background-color: #99CCFF;
}
.container {
max-width: 1070px;
padding: 0 30px;
margin: 0 auto;
}
.diamond {
width: 11.5%;
padding: 0 auto;
background-color: rgba(255, 255, 255, 0.3);
display: inline-block;
}
.diamond-big {
width: 25%;
padding: 0 auto;
background-color: rgba(255, 255, 255, 0.6);
display: inline-block;
}
.grid {
position: relative;
padding-bottom: 100%;
transform: rotate(45deg);
transform-origin: 39%;
}
.grid-section {
overflow: hidden;
padding-bottom: 200px;
}
#diamond1 {
position: absolute;
top: 25%;
left: 10.5%;
cursor: pointer;
}
#diamond2 {
position: absolute;
top: 25%;
left: 24%;
}
#diamond3 {
position: absolute;
top: 11.5%;
left: 37.5%;
}
#diamond4 {
position: absolute;
top: 38.5%;
left: 24%;
}
#diamond5 {
position: absolute;
top: 38.5%;
left: 51%;
}
#diamond6 {
position: absolute;
top: 52%;
left: 51%;
}
#diamond7 {
position: absolute;
top: 38.5%;
left: 64.5%;
}
#diamond8 {
position: absolute;
top: 65.5%;
left: 51%;
}
#diamond9 {
position: absolute;
top: 65.5%;
left: 64.5%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Pokręcone Gridy</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
<script type="text/javascript" src="js/alert.js"></script>
</head>
<body>
<div class="container">
<section class="grid-section">
<div class="grid">
<img id="diamond1" src="http://images.fineartamerica.com/images-medium-large-5/blink-cat-square-art-michelle-wrighton.jpg" class="diamond">
<img id="diamond2" src="http://vastrevets.com/wp-content/uploads/2014/01/Cat-square-1-300x258.jpg" class="diamond">
<img id="diamond3" src="http://www.summitmobilevet.com/wp-content/uploads/2015/04/cat-square.jpg" class="diamond-big">
<img id="diamond4" src="http://1.bp.blogspot.com/-gMWmYwKZYZk/TvZFNMxEE0I/AAAAAAAAB1Q/Ka6cF95MCVA/s1600/mousecattoy1square.jpg" class="diamond-big">
<img id="diamond5" src="https://ae01.alicdn.com/kf/HTB13WWmIpXXXXbEXpXXq6xXFXXXy/DIY-Diamond-embroidery-font-b-Small-b-font-font-b-cat-b-font-square-drill-paste.jpg" class="diamond">
<img id="diamond6" src="http://fineartamerica.com/images/artworkimages/medium/1/orange-tabby-cat--square-jai-johnson.jpg" class="diamond">
<img id="diamond7" src="https://ae01.alicdn.com/kf/HTB1C339KVXXXXaGXpXXq6xXFXXX8/Needlework-Diamond-Embroidery-Home-Decoration-Diamond-Painting-Cross-Stitch-font-b-Laughing-b-font-Cat-Square.jpg" class="diamond-big">
<img id="diamond8" src="https://ae01.alicdn.com/kf/HTB1UsFCKpXXXXXPXXXXq6xXFXXXh/Diamond-embroidery-Three-font-b-small-b-font-font-b-cats-b-font-square-drill-paste.jpg" class="diamond">
<img id="diamond9" src="http://www.dhresource.com/0x0s/f2-albu-g1-M00-CD-F9-rBVaGVVN8-mAa_kSAACnesiYQsA716.jpg/diy-square-diamond-painting-cat-cartoon-animal.jpg" class="diamond-big">
</div>
</section>
</div>
</body>
</html>
The way I see it, you have two options:
Option 1: HTML and CSS (max-width)
You can just simply insert the img inside your div and set the max-width to 100%, like:
<div id="diamond2" class="diamond">
<img style="max-width: 100%" src="yourpicture.jpg">
</div>
If you do this, you have to make sure the divs are set to the right size for the picture (or at least the proportions), and use the max-width attribute.
Option 2: Using CSS
Set them as background on your CSS and use the right type of background-size (cover or contain):
#diamond6 {
background-image: url('yourpicture.jpg');
background-size: cover;
position: absolute;
top: 52%;
left: 51%;
}
I hope it helps!
Use background-image with background-size like
background-image: url('http://placehold.it/100');
background-size: 100% 100%;
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background-color: #99CCFF;
}
.container {
max-width: 1070px;
padding: 0 30px;
margin: 0 auto;
}
.diamond {
width: 11.5%;
padding-bottom: 11.5%;
background-color: rgba(255, 255, 255, 0.3);
display: inline-block;
background-image: url('http://placehold.it/100');
background-size: 100% 100%;
}
.diamond-big {
width: 25%;
padding-bottom: 25%;
background-color: rgba(255, 255, 255, 0.6);
display: inline-block;
}
.grid {
position: relative;
padding-bottom: 100%;
transform: rotate(45deg);
transform-origin: 39%;
}
.grid-section {
overflow: hidden;
padding-bottom: 200px;
}
#diamond1 {
position: absolute;
top: 25%;
left: 10.5%;
cursor: pointer;
}
#diamond2 {
position: absolute;
top: 25%;
left: 24%;
}
#diamond3 {
position: absolute;
top: 11.5%;
left: 37.5%;
}
#diamond4 {
position: absolute;
top: 38.5%;
left: 24%;
}
#diamond5 {
position: absolute;
top: 38.5%;
left: 51%;
}
#diamond6 {
position: absolute;
top: 52%;
left: 51%;
}
#diamond7 {
position: absolute;
top: 38.5%;
left: 64.5%;
}
#diamond8 {
position: absolute;
top: 65.5%;
left: 51%;
}
#diamond9 {
position: absolute;
top: 65.5%;
left: 64.5%;
}
<div class="container">
<section class="grid-section">
<div class="grid">
<div id="diamond1" class="diamond"></div>
<div id="diamond2" class="diamond"></div>
<div id="diamond3" class="diamond-big"></div>
<div id="diamond4" class="diamond-big"></div>
<div id="diamond5" class="diamond"></div>
<div id="diamond6" class="diamond"></div>
<div id="diamond7" class="diamond-big"></div>
<div id="diamond8" class="diamond"></div>
<div id="diamond9" class="diamond-big"></div>
</div>
</section>
</div>