Learn CSS By Creating the Figma Logo in Pure CSS
One of the best ways to learn CSS is by creating something useful while you learn. I will show you how to use the following CSS items by creating the Figma logo:
What we will be creating
We will create the Figma logo in pure CSS. It will look like this:
Create our starter files
Let’s start by creating two files called index.html and style.css. In your index.html file add the following starter code:
In the style.css file add the following starter code:
body { padding: 0; margin: 0; height: 100vh; display: flex; justify-content: center; align-items: center; background-color: azure; }Flex-wrap
We will use Flexbox to create the image. Flexbox has a property called flex-wrap. By default, flex items will all try to fit onto one line. You can change that and let the items wrap as needed with this property.
We will want to have two design elements on both the first and second rows of the logo. There is a single design element on the 3rd row.
Update the index.html file with the following code inside the <body> tags:
