Responsive circle, background image and text

In this example below you will see how to do a Responsive circle, background image and text with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by NadGu, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright NadGu ©
  • HTML
  • CSS
  • JavaScript
    <div class="container">
  <div class="circle"></div>
  <div class="title">
    <h5>All is responsive, here <i class="fas fa-leaf"></i></h5>
  </div>
 </div>

/*Downloaded from https://www.codeseek.co/NadGu/responsive-circle-background-image-and-text-GyOGjJ */
    body {
  margin: 0;
  padding: 0;
}

.container {
  height: auto;
  width: 50vw;
  margin: 0 auto;
  background-color: aliceblue;
  padding: 20px;
  box-shadow: 1px 3px 5px 0px rgba(171,171,171,1);
  margin-top: 10vh;
  text-align: center;
  font-family: 'Macondo', cursive;
  border-radius: 10px;
}

/* RESPONSIVE TEXT: NO MEDIA QUERY NEEDED */
.title {
  color: #244A57;
  font-size: 5vw;
}

.circle {
  position: relative;
  border-radius: 50%;
  padding-top: 100%;
  width: 100%;
  height: auto;
  background-image: url("https://static.pexels.com/photos/36764/marguerite-daisy-beautiful-beauty.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right;;

/*   border: 5px solid transparent;
  box-shadow: inset 0 0 0 1px white;  */
}

/* /*make sure your padding top is the same as your width and make your height auto.*/



/*Downloaded from https://www.codeseek.co/NadGu/responsive-circle-background-image-and-text-GyOGjJ */
    

Comments