Welcome to mervicks

by Andrey Izman

HTML

<div class="animated-banner">
        <div class="min-height-600px home_page_header_banner" data-pg-collapsed="">
            <div class="container text-center clear">
                <div class="banner_heading">
                    <h1>Welcome to mervicks</h1>
                </div>
                <div class="c6 circles">
                    <div class="node fadeChange ng-scope">
                        <div class="link-icon source-icon c100">
                            <div class="slice">
                                <div class="bar"></div>
                                <div class="fill"></div>
                            </div>
                            <img src="https://buffercode.com/images/social/css3.png" class="anti_close_wise" alt="css3">
                        </div>
                        <p>CSS3</p>
                    </div>
                    <div class="node fadeChange ng-scope">
                        <div class="link-icon source-icon c100 ">
                            <div class="slice">
                                <div class="bar"></div>
                                <div class="fill"></div>
                            </div>
                            <img alt="HTML5" src="https://buffercode.com/images/social/html5.png" class="close_wise">
                        </div>
                        <p>HTML5</p>
                    </div>
                    <div class="node fadeChange ng-scope">
                        <div class="link-icon source-icon c100 ">
                            <div class="slice">
                                <div class="bar"></div>
                                <div class="fill"></div>
                            </div>
                            <img alt="Laravel" src="https://buffercode.com/images/social/laravel.png" class="anti_close_wise">
                        </div>
                        <p>Laravel</p>
                    </div>
                    <div class="node fadeChange...

SCSS

body {
  background: #fff;
  padding: 20px;
  font-family: Helvetica;
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
}

.min-height-600px {
  min-height: 600px !important;
}

.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

.text-center {
  text-align: center;
}

.clear {

  &:after,
  &:before {
    display: table;
    content: " ";
  }
}

.c6 {
  position: relative;
  width: 400px;
  height: 400px;
  font-size: 24px;
  padding: 0;
  border-radius: 50%;
  list-style: none;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  margin: 100px auto;
  text-align: center;
  vertical-align: middle;
  border: 2px dotted #dddddd;
}

.c6>* {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2.5em;
  height: 2.5em;
  line-height: 2.5em;
  margin: -1.25em;
  border-radius: 50%;
}

.c6>*:nth-of-type(1) {
  -moz-transform: rotate(180deg) translate(200px) rotate(-180deg);
  -ms-transform: rotate(180deg) translate(200px) rotate(-180deg);
  -webkit-transform: rotate(180deg) translate(200px) rotate(-180deg);
  transform: rotate(180deg) translate(200px) rotate(-180deg);
}
.c6 > *:nth-of-type(2) {
    -moz-transform: rotate(240deg) translate(200px) rotate(-240deg);
    -ms-transform: rotate(240deg) translate(200px) rotate(-240deg);
    -webkit-transform: rotate(240deg) translate(200px) rotate(-240deg);
    transform: rotate(240deg) translate(200px) rotate(-240deg);
}
.c6 > *:nth-of-type(3) {
    -moz-transform: rotate(300deg) translate(200px) rotate(-300deg);
    -ms-transform: rotate(300deg) translate(200px) rotate(-300deg);
    -webkit-transform: rotate(300deg) translate(200px) rotate(-300deg);
    transform: rotate(300deg) translate(200px) rotate(-300deg);
}
.c6 > *:nth-of-type(4) {
    -moz-transform: rotate(360deg) translate(200px) rotate(-360deg);
    -ms-transform: rotate(360deg) translate(200px) rotate(-360deg);
    -webkit-transform:...