school logo png(design with html and css)

#html #css #devops

How I design schoool logo with `html` and `css` only.

many had been wondering how one could design beautiful logo with just htm and css. well this are the steps
**step1:**
open your html code and open 11 div tags so that each one of them is inscribe in another like the following:

<div>
  <div>
    <div>
      <div>
        <div>
          <div>
            <div>
              <div>
                <div></div>
              </div>
            </div>
          </div>
      </div>
    </div>
  </div>
</div>

**step2:**
Now give each of the div tag class name to be container1,2...9 where the outermost and innermost class is 'main' and "circlein" respectively so that you have something like the following.

<div class="main"> 
<div class="container1">
  <div class="container2">
    <div class="container3">
      <div class="container4">
        <div class="container5">
          <div class="container6">
           <div class="container7">
             <div class="container8">
              <div class="container9">
                <div class="circlein">
                  </div>>
         </div>
     </div>
 </div> 
</div>
</div>
</div>
</div>
</div>
</div>
</div>

**step3:**
it is time to give them style or css so write the following codes inside your style tag or css.

<style type="text/css">
  body {
    background-color: #000;
    color:red;
    font-size: 35px;   
}
/*this is the main css */
.main{position: relative;
    width: 340px;
    height: 340px;
    text-align: center;  
    top: 20vh;
    left: 22%;
    border: red solid 4px;
    padding: 73px;
    background: white;  
}
.container1,.container2,.container3,.container4,.container5,.container6,.container7,.container8,.container9{
    width:300px;
    height:300px;
    transform: rotate(40deg);
    border: red solid 3px;
    background: black;
}

Now run the code you should see a beautiful squares in amazing way.
step4: we need more code to give each of the container color instead of only red. so we write the following code.

.container1{
    border: 3px solid red ;
}
.container2{
    border: 3px solid orange ;
}
.container3{
    border: 3px solid yellow ;
}
.container4{
    border: 3px solid #00ff00 ;
}
.container5{
    border: 3px solid #0000ff ;
    }
.container6{  
    border: 3px solid indigo;
}
.container7{
    border: 3px solid  violet;
}
.container8{border: 3px solid cyan ;
}
.container9{border: 3px solid red;
}

Run the code again you should see different color.
step5: we need to inscribe circle inside it with the following codes:

.circlein{border: 3px solid yellow;
border-radius: 50%;
height:280px;
width: 280px;
margin: 3%;
text-align: center;}

Reload it can you see we have almost done with the logo? Now let's try to write something inside it.
step6: write the following code inside your inner most div tag with the class name "circlein" like this

<div class="circlein">
<h6>ﻣدرسة  اﳌحجة البيضاء</h6>
                  <h2>Clear Path College</h2>
                  <h5>Ibadan</h5>
                  <h5>&nbsp;21<sup>st</sup></h5>
                  <h5> &nbsp;Century-</h5>
                  <h5>School</h5>
        </div>

step7: now give each of the headings tags inside the div id so that you can add css to them.

<div class="circlein">
<h6>ﻣدرسة  اﳌحجة البيضاء</h6>
<h2>Clear Path College</h2>
<h5>Ibadan</h5>
<h5 id="date">&nbsp;21<sup>st</sup></h5>
<h5 id="century"> &nbsp;Century-</h5>
<h5 id="school">School</h5>

if you run the code you should notice that some of the text is not inside the circle so what do we do? umh? yeah we add margin-top.
step8: add the following codes to your css.

h5{
margin-top:-44px;/*move top*/}
h2{margin-top: -63px;/*move top*/
color: white}
#date{margin-top:-80px;color: white;*move top*/
  margin-left: -190px;transform: rotate(60deg);}
  /*bend the text*/
#century{margin-left: -30px; /*shift to right side*/
margin-top: -42px;
color: white}
#school{margin-left: 165px;
transform: rotate(-40deg);
margin-top: -110px;color: white;}

Now run your codes or click here to see the full code again what did you see? school logoooooooo!

Now you have your design but what if you are someone who loves much colors then you can give each of the container different background corresponding to the their border color while the circlein is black like the following.
step9:give each of the container background

.container1{
    border: 3px solid red ;
    background: red;
}
.container2{
    border: 3px solid orange ;
    background: orange;
}
.container3{
    border: 3px solid yellow ;
    background: yellow;
}
.container4{
    border: 3px solid #00ff00 ;
    background: green;
}
.container5{
    border: 3px solid #0000ff ;
    background: blue;
    }
.container6{  
    border: 3px solid indigo;
    background: indigo;
}
.container7{
    border: 3px solid  violet;
    background: violet;
}
.container8{border: 3px solid cyan ;
  background: cyan;
}
.container9{border: 3px solid red;
  background: #5544aa;
}
.circlein{border: 3px solid yellow;
border-radius: 50%;
height:280px;
width: 280px;
margin: 3%;
background: black;
text-align: center;}