#PureCSS - Responsive DigitalOcean Logo

FEATURED

In this example below you will see how to do a #PureCSS - Responsive DigitalOcean Logo with some HTML / CSS and Javascript

Responsive DigitalOcean Logo using CSS

Thumbnail
This awesome code was written by Asyraf Hussin, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Asyraf Hussin ©
  • HTML
  • CSS
  • JavaScript
    <div class="logo">
	<div class="circle">
		<div class="box">
			<div class="box-small"></div>
		</div>
	</div>
</div>
<p class="title">DigitalOcean</p>

/*Downloaded from https://www.codeseek.co/AsyrafHussin/purecss-responsive-digitalocean-logo-YvVKaX */
    // colors
$bg-color: #105df5;
$bg-gradient-color: radial-gradient(circle, #105df5 30%, #233df5);
$logo-color: #fff;

// fonts
@import url("https://fonts.googleapis.com/css?family=Montserrat:400,600");
$montserrat-font: 'Montserrat', sans-serif;

// mixins
@mixin center {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}

@mixin pseudo($position: absolute, $content: "") {
    content: $content;
    position: $position;
}

html, body{
  width: 100%;
  height: 100%;
}

body{
  background: $bg-gradient-color;
  overflow: hidden;
}

.logo{
  @include center;

  .circle{
    @include center;
    z-index: 1;
    top: -20vmin;
    width: 23vmin;
    height: 23vmin;
    border: 7.5vmin solid $logo-color;
    border-radius: 50%;
    background: transparent;

    .box{
      @include center;
      top: 20vmin;
      left: -20vmin;
      width: 20vmin;
      height: 20vmin;
      border-bottom-left-radius: 50%;
      background: $bg-color;

      .box-small{
        @include center;
        top: -4.3vmin;
        left: 12.7vmin;
        width: 7.35vmin;
        height: 7.35vmin;
        background: $logo-color;

        &:before{
          @include pseudo;
          top: 7.3vmin;
          left: -5.5vmin;
          width: 5.5vmin;
          height: 5.7vmin;
          background: $logo-color;
        }

        &:after{
          @include pseudo;
          top: 2.6vmin;
          left: -10.2vmin;
          width: 4.7vmin;
          height: 4.7vmin;
          background: $logo-color;
        }
      }
    }
  }
}

.title{
  margin-top: 65vh;
  text-align: center;
  font-family: $montserrat-font;
  font-size: 12vmin;
  color: $logo-color;
  font-weight: 600;
}



/*Downloaded from https://www.codeseek.co/AsyrafHussin/purecss-responsive-digitalocean-logo-YvVKaX */
    

Comments