CODEWITHSUNDEEP
jqueryhtmlwordpresscss
DP TechRocket
DP TechRocket

Reputation: 114

Make half circle with content

I just wanted to make like this image. i have a word press site. i could not find any plugin for this kind of design. i tried it with CSS, JQUERY, html but "NO SUCCESS". how can i make this kind of design with content and image and icon?

<img src="https://i.sstatic.net/8IeQV.png">

Upvotes: 0

Views: 527

Answers (1)

Prasad Kothavale
Prasad Kothavale

Reputation: 444

I liked the design hence created snippet which might help you. You can use it as template just change image urls and text in html file. Feel free to adjust the components in css file :)

.yellow-semi-circle {
  border-top-left-radius: 400px;
  border-top-right-radius: 400px;
  background: #FFEB3B;
  width: 800px;
  height: 400px;
}

.white-semi-circle {
  border-top-left-radius: 250px;
  border-top-right-radius: 250px;
  background: #FFF;
  width: 500px;
  height: 250px;
  position: relative;
  top: -250px;
  left: 150px;
}

.line-1 {
  border-color: #fff;
  border-style: solid;
  border-width: thick;
  position: relative;
  -ms-transform: rotate(30deg);
  -webkit-transform: rotate(30deg);
  transform: rotate(30deg);
  width: 400px;
  top: -355px;
  left: 20px;
}

.line-2 {
  border-color: #fff;
  border-style: solid;
  border-width: thick;
  position: relative;
  -ms-transform: rotate(60deg);
  -webkit-transform: rotate(60deg);
  transform: rotate(60deg);
  width: 400px;
  top: -450px;
  left: 100px;
}

.line-3 {
  border-color: #fff;
  border-style: solid;
  border-width: thick;
  position: relative;
  -ms-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  width: 400px;
  top: -500px;
  left: 200px;
}

.line-4 {
  border-color: #fff;
  border-style: solid;
  border-width: thick;
  position: relative;
  -ms-transform: rotate(120deg);
  -webkit-transform: rotate(120deg);
  transform: rotate(120deg);
  width: 400px;
  top: -480px;
  left: 300px;
}

.line-5 {
  border-color: #fff;
  border-style: solid;
  border-width: thick;
  position: relative;
  -ms-transform: rotate(150deg);
  -webkit-transform: rotate(150deg);
  transform: rotate(150deg);
  width: 400px;
  top: -415px;
  left: 380px;
}

.image-1 {
  width: 75px;
  height: 75px;
  position: absolute;
  top: 309px;
  left: 130px;
}

.image-2 {
  width: 75px;
  height: 75px;
  position: absolute;
  top: 193px;
  left: 191px;
}

.image-3 {
  width: 75px;
  height: 75px;
  position: absolute;
  top: 123px;
  left: 317px;
}

.image-4 {
  width: 75px;
  height: 75px;
  position: absolute;
  top: 123px;
  left: 447px;
}

.image-5 {
  width: 75px;
  height: 75px;
  position: absolute;
  top: 193px;
  left: 556px;
}

.image-6 {
  width: 75px;
  height: 75px;
  position: absolute;
  top: 309px;
  left: 623px;
}

.main-image {
  width: 300px;
  height: 300px;
  position: absolute;
  top: 183px;
  left: 264px;
}

.text-1 {
  position: absolute;
  top: 288px;
  width: 100px;
  left: 36px;
}

.text-2 {
  position: absolute;
  top: 136px;
  width: 100px;
  left: 116px;
}

.text-3 {
  position: absolute;
  top: 44px;
  width: 100px;
  left: 283px;
}

.text-4 {
  position: absolute;
  top: 44px;
  width: 100px;
  left: 450px;
}

.text-5 {
  position: absolute;
  top: 136px;
  width: 100px;
  left: 615px;
}

.text-6 {
  position: absolute;
  top: 288px;
  width: 100px;
  left: 699px;
}
<div class=container>
  <div class="yellow-semi-circle"></div>
  <div class="white-semi-circle"></div>

  <!-- White Lines -->
  <div class="line-1"></div>
  <div class="line-2"></div>
  <div class="line-3"></div>
  <div class="line-4"></div>
  <div class="line-5"></div>

  <!-- Icons -->
  <img class="image-1" src="http://icons.iconarchive.com/icons/designbolts/free-multimedia/1024/Photo-icon.png" />
  <img class="image-2" src="http://icons.iconarchive.com/icons/designbolts/free-multimedia/1024/Photo-icon.png" />
  <img class="image-3" src="http://icons.iconarchive.com/icons/designbolts/free-multimedia/1024/Photo-icon.png" />
  <img class="image-4" src="http://icons.iconarchive.com/icons/designbolts/free-multimedia/1024/Photo-icon.png" />
  <img class="image-5" src="http://icons.iconarchive.com/icons/designbolts/free-multimedia/1024/Photo-icon.png" />
  <img class="image-6" src="http://icons.iconarchive.com/icons/designbolts/free-multimedia/1024/Photo-icon.png" />

  <!-- Center Image -->
  <img class="main-image" src="https://images.vexels.com/media/users/3/130342/isolated/preview/d6de6adeed24d5339ba865e05e7cfa6b-flat-cloud-icon-by-vexels.png" />

  <!-- Text -->
  <div class="text-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
  <div class="text-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
  <div class="text-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
  <div class="text-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
  <div class="text-5">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
  <div class="text-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>

</div>

Upvotes: 2

Related Questions