DEV Community

loading...
Cover image for school logo png(design with html and css)

school logo png(design with html and css)

oladejo abdullahi
I am web developer and data scientist
Updated on ・3 min read

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>
Enter fullscreen mode Exit fullscreen mode

**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>
Enter fullscreen mode Exit fullscreen mode

**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;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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;}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>  
Enter fullscreen mode Exit fullscreen mode

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;}
Enter fullscreen mode Exit fullscreen mode

Now run your codes or click here to see the full code again what did you see? school logoooooooo!
Alt Text
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;}
Enter fullscreen mode Exit fullscreen mode

Now run it and see what did you see here? Yeah another beautiful logoooo!Alt Text
don't forget to like and comment below.

Discussion (3)

Collapse
hassan_k_a profile image
.

looks wonderful.

Collapse
maxwizardth profile image
oladejo abdullahi Author

check it again it is even more than that.

Collapse
hassan_k_a profile image
.

it is really looks better

Forem Open with the Forem app