All geek questions in one place

How to put a circle into a square square in css?

I have a webpage created in HTML and CSS in which I want to put a circle in a square square. Below is the fiddle for the webpage.

At this point, I can make a square containing a few words, but I cannot put a circle in a square square. Here is a pictorial image of what I want.

The HTML and CSS codes that I use for square squares are:

<div class="rectangles">
            <div class="rectangle">

                <p class="ceo">Will profile, CEO</p>
                <p class="ceo-words">Say something inspiring will</p>
            </div>

            <div class="rectangle">

                <p class="cfo">Jacks Profile, CFO</p>
                <p class="cfo-words">Say something inspiring jack</p>
            </div>

            <div class="rectangle">

                <p class="cto">Zeeshan, CTO</p>
                <p class="cto-words">Say something inspiring </p>
            </div>

            <div class="rectangle">

                <p class="future">Whoever yall hire next</p>
                <p class="future-words">Say something inspiring </p>
            </div>
        </div>
+4
source share
4 answers

Add a new element and style using css. This way you can include content and images in it.

.rectangles .rectangle {
    border-radius: 10px;
    display: inline-block;
    margin-bottom: 30px;
    margin-right: 5px;
    width: 350px;
    height: 100px;
    border: 1px solid #000;
    background-color: white;
    padding: 10px 10px 10px 100px;
    position: relative;
}

.rectangles .rectangle .circle {
  background: #aaa;
  border-radius: 100%;
  height: 60px;
  width: 60px;
  position: absolute;
  top: 20px;
  left: 20px;
}
<div class="rectangles">
    <div class="rectangle">
        <div class="circle"></div>
        <p class="ceo">Will profile, CEO</p>
        <p class="ceo-words">Say something inspiring will</p>
    </div>

    <div class="rectangle">
        <div class="circle"></div>
        <p class="cfo">Jacks Profile, CFO</p>
        <p class="cfo-words">Say something inspiring jack</p>
    </div>

    <div class="rectangle">
        <div class="circle"></div>
        <p class="cto">Zeeshan, CTO</p>
        <p class="cto-words">Say something inspiring </p>
    </div>

    <div class="rectangle">
        <div class="circle"></div>
        <p class="future">Whoever yall hire next</p>
        <p class="future-words">Say something inspiring </p>
    </div>
</div>
Run codeHide result
0

:

.rectangle:before{
    content: '';
    width: 50px;
    height: 50px;
    border-radius: 100%;
    position: absolute;
    background-color: #ccc;
    top: 50%;
    transform: translateY(-50%);
}


.rectangle {
    box-sizing: border-box;
    display: inline-block;
    width: 40%;
    border:1px solid #ccc;
    border-radius: 5px;
    margin-bottom: 5px;
    position: relative;
} 

.rectangle:before{
    content: '';
    width: 50px;
    height: 50px;
    border-radius: 100%;
    position: absolute;
    background-color: #ccc;
    top: 50%;
    transform: translateY(-50%);
} 

p {
    padding-left: 60px;
}
<div class="rectangles">
    <div class="rectangle">
        <p class="ceo">Will profile, CEO</p>
        <p class="ceo-words">Say something inspiring will</p>
    </div>

    <div class="rectangle">
        <p class="cfo">Jacks Profile, CFO</p>
        <p class="cfo-words">Say something inspiring jack</p>
    </div>

    <div class="rectangle">
        <p class="cto">Zeeshan, CTO</p>
        <p class="cto-words">Say something inspiring </p>
    </div>

    <div class="rectangle">
        <p class="future">Whoever yall hire next</p>
        <p class="future-words">Say something inspiring </p>
    </div>
</div>
Hide result
+1

- :before, .

.rectangle {    
    border-radius: 10px;
    display: inline-block;
    margin-bottom: 30px;
    margin-right: 5px;
    width: 350px;
    height: 100px;
    border: 1px solid #000;
    background-color: white;
    padding-left: 70px;
}
.rectangle:before {
    display: block;
    position: absolute;
    left: 15px;
    top: 30px;
    content: '';
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #eee;
}
<div class="rectangle">
    <p class="ceo">Will profile, CEO</p>
    <p class="ceo-words">Say something inspiring will</p>
</div>
Hide result
0

:

  • First of all jQuery, tetherjs files must be defined before bootstrapthey work correctly.

  • Added circleusing the :beforepsuedo element in rectangle- see the styles I added:

    .rectangles .rectangle {
  border-radius: 10px;
  display: inline-block;
  margin-bottom: 30px;
  margin-right: 5px;
  width: 350px;
  height: 100px;
  border: 1px solid #000;
  background-color: white;
  position: relative; /* ADDED THIS */
  padding: 15px 0 0 90px; /* ADDED THIS */
}
.rectangles .rectangle:before { /* ADDED THIS */
    display: block;
    position: absolute;
    top: 50%;
    left: 20px;
    transform: translateY(-50%);
    content: '';
    width: 50px;
    height: 50px;
    border-radius: 100%;
    background-color: #eee;
}

Updated here as well as demo below: jsfiddle

html,
body {
  border: 0;
  margin: 0;
  height: 100%;
  min-height: 100%;
}


/**************Nav Bar Start **************/

.bg-faded {
  background-color: #1072B8;
}

.navbar-light .navbar-nav .nav-link {
  color: white !important;
}

.nav-item-insurance {
  color: white !important;
  margin-left: 20px;
  padding-top: 2px;
  font-size: 0.875em;
}

.nav-item-ourstory {
  color: white !important;
  margin-left: 20px;
  padding-top: 2px;
  font-size: 0.875em;
}

.nav-item-login-signup {
  font-size: 0.875em;
  color: white !important;
  margin-left: 20px;
  padding-top:
}

.nav-item-getcovered {
  border-color: #EF7440;
  margin-left: 10px;
  border-style: solid;
  color: white;
  padding-left: 4px;
  padding-bottom: 2.5px;
  padding-right: 4px;
  font-size: 0.750em;
  padding-top: 4.5px;
  letter-spacing: .30em;
  font-family: Adelle PE;
}

@media screen and (max-width: 991px) {
  .nav-item {
    font-family: AvantGarde;
    letter-spacing: .30em;
    color: white !important;
    margin-left: 80px;
  }
  .nav-item-getcovered {
    border-style: solid;
    border-width: 5px;
    padding-left: 40px;
    padding-right: 40px;
    width: 195px;
    border-color: #EF7440;
    margin-left: 70px;
  }
}


/**************Nav Bar Finish **************/

.container {
  width: 100% !important;
}

.col-lg-6 {
  height: 850px;
}

.sections a {
  text-decoration: none;
  position: relative;
  display: inline-block;
  color: #EF7440;
  font-family: "AvantGarde";
  font-size: 2.625em;
  font-weight: bold;
  letter-spacing: .24em;
}

.sections a:after {
  content: "";
  height: 5px;
  width: 50%;
  background-color: #EF7440;
  position: absolute;
  bottom: -.7em;
  left: 50%;
  transform: translate(-50%);
}

#insurance {
  display: flex;
  align-items: center;
  background-size: 100% 100%;
  justify-content: center;
  background-image: url(../assets/img/Uploads/insurance.png);
}

#our-story {
  display: flex;
  background-size: 100% 100%;
  align-items: center;
  justify-content: center;
  background-image: url(../assets/img/Uploads/our%20story.png);
}

#insurance:hover {
  display: flex;
  color: #EF7440;
  font-style: italic;
  align-items: center;
  justify-content: center;
  background-image: url(../assets/img/Uploads/insurance-colour.png);
  background-size: 100% 100%;
}

#insurance a:hover {
  color: #EF7440;
  text-decoration: none;
}

#our-story a:hover {
  color: #EF7440;
  text-decoration: none;
}

#our-story:hover {
  display: flex;
  color: #EF7440;
  font-style: italic;
  align-items: center;
  justify-content: center;
  background-image: url(../assets/img/Uploads/our%20story-colour.png);
  background-size: 100% 100%;
}


/*Athletes (Start) */

.athletes h1 {
  text-transform: uppercase;
  font-weight: bold;
  font-style: italic;
  font-size: 1.250em;
  font-family: "Adelle PE";
  letter-spacing: 0.300em;
  padding-top: 40px;
  padding-bottom: 5px;
}

.athletes h2 {
  font-style: italic;
  line-height: 0.89;
  font-size: 1.250em;
  font-family: "Adelle PE";
  color: white;
  letter-spacing: 0.300em;
  padding-top: 5px;
  padding-bottom: 5px;
}

.athletes p {
  line-height: 1.379;
  font-size: 0.875em;
  font-family: "Adelle PE";
  letter-spacing: 0.300em;
  padding-top: 80px;
  padding-bottom: 70px;
}

@media screen and (max-width: 991px) {
  .athletes p {
    padding-bottom: 40px;
  }
}

.athletes h1,
.athletes h2,
.athletes p {
  margin: 0px !important;
  color: white;
}

.chris-d {
  background-image: url(../assets/img/Uploads/chris-davenport.png);
  background-size: cover;
  background-repeat: no-repeat;
  height: 384px;
}

.leticia {
  background-image: url(../assets/img/Uploads/leticia-bufoni.png);
  background-size: cover;
  background-repeat: no-repeat;
  height: 384px;
}

.leticia p,
.nfl p {
  padding-right: 650px;
}

@media screen and (max-width: 991px) {
  .nfl p {
    padding-right: 400px;
  }
}

@media screen and (max-width: 991px) {
  .leticia p {
    padding-right: 350px;
  }
}

.leticia h1,
.nfl h1,
.leticia h2,
.nfl h2,
.leticia p,
.nfl p {
  margin-left: 25px !important;
}

.chris-g {
  background-image: url(../assets/img/Uploads/chris-gunnarson.png);
  background-size: cover;
  background-repeat: no-repeat;
  height: 384px;
}

.chris-d p,
.chris-g p {
  text-align: right;
}

.chris-d h1,
.chris-g h1,
.chris-d h2,
.chris-g h2 {
  text-align: right;
}

.chris-g h1,
.chris-d h2,
.chris-g h2,
.chris-g p {
  padding-left: 740px;
  padding-right: 30px;
}

.chris-d h1 {
  padding-top: 45px;
  padding-right: 30px;
}

@media screen and (max-width: 991px) {
  .chris-g p {
    padding-left: 340px;
    padding-right: 30px;
  }
}

@media screen and (max-width: 991px) {
  .chris-g h1 {
    padding-left: 0px;
  }
}

@media screen and (max-width: 991px) {
  .chris-d h1 {
    padding-left: 0px;
  }
}

.chris-d p {
  padding-top: 40px;
  padding-left: 840px;
  padding-bottom: 40px;
  padding-right: 30px;
}

.chris-d #readmore-button-right {
  font-family: "Adelle PE";
  font-style: normal;
  width: 550px;
  float: right;
  margin-top: -10px !important;
  border-width: 3px;
  text-transform: uppercase;
  padding-top: 7px;
  padding-bottom: 7px;
  border-color: white;
  margin-right: 30px !important;
  border-style: solid;
  padding-left: 200px;
  padding-right: 200px;
  line-height: 2.109;
  font-size: 16px;
  text-align: center;
}

.chris-d #readmore-button-right:hover {
  font-style: italic;
  font-weight: bold;
}

@media screen and (max-width: 991px) {
  .chris-d p {
    padding-left: 500px;
    width: 950px;
    padding-top: 40px;
    padding-bottom: 25px;
    padding-right: 30px;
  }
}

#watch-ted-talk {
  padding-top: 10px;
  padding-bottom: 50px;
}

.marketplace-background {
  background-image: url(../assets/img/Uploads/nfl-athlete.png);
  background-size: cover;
  color: white;
  font-size: 30px;
  font-weight: bold;
  background-repeat: no-repeat;
  height: 384px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#rtm {
  text-align: center;
}


/***** Searchbar Start *****/

.form-wrapper {
  background-color: #f6f6f6;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#f6f6f6), to(#eae8e8));
  background-image: -webkit-linear-gradient(top, #f6f6f6, #eae8e8);
  background-image: -moz-linear-gradient(top, #f6f6f6, #eae8e8);
  background-image: -ms-linear-gradient(top, #f6f6f6, #eae8e8);
  background-image: -o-linear-gradient(top, #f6f6f6, #eae8e8);
  background-image: linear-gradient(top, #f6f6f6, #eae8e8);
  border-color: #dedede #bababa #aaa #bababa;
  border-style: solid;
  border-width: 1px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  -webkit-box-shadow: 0 3px 3px rgba(255, 255, 255, .1), 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 5px #444;
  -moz-box-shadow: 0 3px 3px rgba(255, 255, 255, .1), 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 5px #444;
  box-shadow: 0 3px 3px rgba(255, 255, 255, .1), 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 5px #444;
  margin-left: auto;
  overflow: hidden;
  margin-top: 40px;
  margin-right: auto;
  padding: 8px;
  width: 450px;
}

.form-wrapper #search {
  border: 1px solid #CCC;
  -webkit-box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #FFF;
  -moz-box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #FFF;
  box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #FFF;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  color: #999;
  float: left;
  font: 16px Lucida Sans, Trebuchet MS, Tahoma, sans-serif;
  height: 50px;
  padding: 10px;
  width: 320px;
}

.form-wrapper #search:focus {
  border-color: #aaa;
  -webkit-box-shadow: 0 1px 1px #bbb inset;
  -moz-box-shadow: 0 1px 1px #bbb inset;
  box-shadow: 0 1px 1px #bbb inset;
  outline: 0;
}

.form-wrapper #search:-moz-placeholder,
.form-wrapper #search:-ms-input-placeholder,
.form-wrapper #search::-webkit-input-placeholder {
  color: #999;
  font-weight: normal;
}

.form-wrapper #submit {
  background-color: #0483a0;
  border-radius: 10px;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#31b2c3), to(#0483a0));
  background-image: -webkit-linear-gradient(top, #31b2c3, #0483a0);
  background-image: -moz-linear-gradient(top, #31b2c3, #0483a0);
  background-image: -ms-linear-gradient(top, #31b2c3, #0483a0);
  background-image: -o-linear-gradient(top, #31b2c3, #0483a0);
  background-image: linear-gradient(top, #31b2c3, #0483a0);
  border: 1px solid #00748f;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #FFF;
  -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #FFF;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #FFF;
  color: #fafafa;
  cursor: pointer;
  height: 48px;
  float: right;
  font: 15px Arial, Helvetica;
  padding: 0;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .3);
  width: 100px;
}

.form-wrapper #submit:hover,
.form-wrapper #submit:focus {
  background-color: #31b2c3;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#0483a0), to(#31b2c3));
  background-image: -webkit-linear-gradient(top, #0483a0, #31b2c3);
  background-image: -moz-linear-gradient(top, #0483a0, #31b2c3);
  background-image: -ms-linear-gradient(top, #0483a0, #31b2c3);
  background-image: -o-linear-gradient(top, #0483a0, #31b2c3);
  background-image: linear-gradient(top, #0483a0, #31b2c3);
}

.form-wrapper #submit:active {
  -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
  -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
  outline: 0;
}

.form-wrapper #submit::-moz-focus-inner {
  border: 0;
}


/***** Searchbar Finish *****/


/**** Sections Start ****/

.sections {
  background-color: black;
}


/**** Contents start ****/


/**** About Homesail start ****/

.contents {
  background-color: black;
}

.about-homesail .headline-text:before {
  border-top: 1px solid #1072B8;
  display: block;
  position: relative;
  top: -25px;
  margin: 0 auto;
  width: 50%;
  content: "";
}

.about-homesail .headline-text {
  text-align: center;
  font-size: 24px;
  color: #1072B8;
  padding-top: 60px;
  font-weight: bold;
}

.about-homesail .company-info {
  padding-left: 100px;
  padding-right: 100px;
  padding-top: 100px;
  font-style: italic;
  font-size: 20px;
  color: #1072B8;
}

.rectangles {
  margin-left: 300px;
  margin-right: 334px;
}

.rectangles .rectangle {
  border-radius: 10px;
  display: inline-block;
  margin-bottom: 30px;
  margin-right: 5px;
  width: 350px;
  height: 100px;
  border: 1px solid #000;
  background-color: white;
  position: relative; /* ADDED THIS */
  padding: 15px 0 0 90px; /* ADDED THIS */
}
.rectangles .rectangle:before { /* ADDED THIS */
    display: block;
    position: absolute;
    top: 50%;
    left: 20px;
    transform: translateY(-50%);
    content: '';
    width: 50px;
    height: 50px;
    border-radius: 100%;
    background-color: #eee;
}


/**** About Homesail finish ****/


/**** Departments Start *****/

.departments .headline-text:before {
  border-top: 1px solid #1072B8;
  display: block;
  position: relative;
  top: -25px;
  margin: 0 auto;
  width: 50%;
  content: "";
}

.departments .headline-text {
  text-align: center;
  font-size: 24px;
  color: #1072B8;
  padding-top: 60px;
  font-weight: bold;
}


/**** Departments Finish *****/


/**** University students start ****/

.university-students .headline-text:after {
  border-top: 1px solid #1072B8;
  display: block;
  position: relative;
  top: 40px;
  margin: 0 auto;
  width: 50%;
  content: "";
}

.university-students .headline-text {
  text-align: center;
  font-size: 24px;
  color: #1072B8;
  padding-top: 60px;
  font-weight: bold;
}

.university-students .company-info {
  padding-left: 250px;
  padding-right: 250px;
  padding-top: 100px;
  font-style: italic;
  font-size: 20px;
  color: #1072B8;
}


/**** University Students finish ****/


/**** Contents Finish ****/
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Northman | Insurance for the Wild</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
  <link rel="stylesheet" href="css/career.css">
   <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
  
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

</head>

<body>
  <div class="header">

    <nav class="navbar navbar-toggleable-md navbar-light bg-faded">
      <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>


      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item-insurance">
            <a class="nav-link" href="#">About </a>
          </li>
          <li class="nav-item-ourstory">
            <a class="nav-link" href="#">Departments</a>
          </li>
          <li class="nav-item-login-signup">
            <a class="nav-link" href="#">Students</a>
          </li>

        </ul>

      </div>
    </nav>

  </div>
  <div class="marketplace-background">
    <div class="container">

      <div class="row">
        <div class="col-lg-12" id="rtm">Rethinking the marketplace </div>
      </div>
      <form class="form-wrapper">
        <input type="text" id="search" placeholder="Search for your future" required>
        <input type="submit" value="Search" id="submit">
      </form>
    </div>

  </div>

  <div class="contents">
    <div class="about-homesail">
      <p class="headline-text">About HomeSail</p>
      <p class="company-info">aha hahahah ahahahhaha hahhahhahh hahahhh hhhahah hha hahhha hahhhah ahhhhahah ahhhhhhahq ieihfiefpje hahahahhaha ahahahhaha hahhahhahh hahahhh hhhahah hha hahhha hahhhah ahhhhahah ahhhhhhahqabcded hahaha ahahahhahaaaaaasde hahhahhahh hahahhh hhhahah
        hha hahhha hahhhah ahhhhahah ahhhhhhahq hahahah ahahahhaha hahhahhahh hahahhhaefgh hhhahah hha hahhha hahhhah ahhhhahah ahhhhhhahq hahahah ahahahhaha hahhahhahh
      </p>

    </div>

    <div class="rectangles">
      <div class="rectangle">

        <p class="ceo">Will profile, CEO</p>
        <p class="ceo-words">Say something inspiring will</p>
      </div>

      <div class="rectangle">

        <p class="cfo">Jacks Profile, CFO</p>
        <p class="cfo-words">Say something inspiring jack</p>
      </div>

      <div class="rectangle">

        <p class="cto">Zeeshan, CTO</p>
        <p class="cto-words">Say something inspiring </p>
      </div>

      <div class="rectangle">

        <p class="future">Whoever yall hire next</p>
        <p class="future-words">Say something inspiring </p>
      </div>
    </div>



    <div class="departments">
      <p class="headline-text">Departments</p>
    </div>


    <div class="university-students">
      <p class="headline-text">University Students</p>
      <p class="company-info">Homesail was the brainchild of two university students, that why here at HomeSail we understand the value of ... blah blah write whatever you want here More text you get the idea make yourselves look good and soo on
      </p>

    </div>
  </div>
</body>
</html>
Run codeHide result
0
source

Source: https://habr.com/ru/post/1683720/

More articles:


All Articles