CodeNewbie Community 🌱

Cover image for How to make the BMW logo using HTML CSS
UI Assembly
UI Assembly

Posted on

How to make the BMW logo using HTML CSS

Hello dear developers, in this article we are going to make the BMW logo by using pure HTML and CSS.

HTML is a markup language, to make the web page skeletons and CSS is used for applying on it. CSS makes webpages beautiful.

First make an index.html page in your visual studio code editor, or if you are using browser based code editor you can start directly.
Now, make a parent container having class of outer-container and inside it make a child container having a class of inner-container. We are using classes to apply style using CSS.

Now inside the child container use span to write the three letter of BMW individually, so that we can apply style on them. Inside the same div, make another container having class container. And inside it make four div to make the four rounded squares.

After doing so, your code will look something like this.

<div class="outer-container">
        <div class="inner-container">
            <span class="letter-b">B</span>
            <span class="letter-m">M</span>
            <span class="letter-w">W</span>
            <div class="container">
                <div class="square square-blue"></div>
                <div class="square square-white"></div>
                <div class="square square-white"></div>
                <div class="square square-blue"></div>
            </div>
        </div>
    </div>
Enter fullscreen mode Exit fullscreen mode

Now coming to the CSS part.
Outer-container is the white circle in the background and inner-container is the black circle in front of it. Apply these style in these two containers. We are using border radius of 50% to make it rounded.

.outer-container {
            width: 29rem;
            height: 29rem;
            background-color: #fff;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .inner-container {
            position: relative;
            width: 27rem;
            height: 27rem;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #000000;
            border-radius: 50%;
        }
Enter fullscreen mode Exit fullscreen mode

Giving the inner-container position relative, so that we can apply absolute positioning for the individual letters.

Now apply these styles for the letters:

.inner-container span {
            position: absolute;
        }

        .letter-b {
            top: 32px;
            left: 29px;
            transform: rotate(307deg);
        }

        .letter-m {
            top: -6px;
            left: 106px;
        }

        .letter-w {
            top: 30px;
            right: 17px;
            transform: rotate(48deg);
        }
Enter fullscreen mode Exit fullscreen mode

Now make two columns in the third container having class of container by using grid property and apply background color for the inside four squares. At last apply overflow hidden property to the container to hide the overflowing parts.

Look at the code below:

.container {
            width: 16rem;
            height: 16rem;
            background-color: #ffffff;
            border-radius: 50%;
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            overflow: hidden;
        }

        .square {
            width: 50%;
        }

        .square-blue {
            background-color: #0166B1;
        }

        .square-white {
            background-color: #fff;
        }
Enter fullscreen mode Exit fullscreen mode

Now preview the output in the Brower. Your BMW logo is ready just made using pure HTML and CSS.

If you want to learn Frontend web development from very basics, I am making useful and practical tutorials in my YouTube Channel. Go and Subscribe to build your dev skills.

I hope you get some value from my article. Thanks for reading😃

Top comments (0)