Hey! I am going to show you how to make a simple CSS - HTML (mostly CSS) logo.
First, simply make an HTML file with this code in it:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>DEV logo</title>
</head>
<body>
<main>
<p>DEV</p>
</main>
</body>
</html>
Here we will just get "DEV" printed out on our webpage.
Next, we have to make a file called style.css (we linked "style.css" before) and add some properties to form the text.
First, we have to remove all automatically added margins, because it can scramble our code:
*{
margin: 0;
}
Now we can work on the text itself, we have to make it thick with the font-weight operator, make the text bigger with the font-size operator and I found a font family that's similar to the DEV logo's style, so we can add that as well:
p{
font-family: 'Trebuchet MS';
font-weight: 900;
font-size: 50px;
}
After that, we can put a rounded box around the text with the following code:
p{
border: 5px solid black;
border-radius: 10px;
background-color: black;
color: white;
}
And in the end we can put the logo in the middle of the screen:
body {
text-align: center;
}
main{
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
width: 100vw;
}
So the whole style.css would look like this:
*{
margin: 0;
}
body {
text-align: center;
}
main{
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
width: 100vw;
}
p {
font-family: 'Trebuchet MS';
font-weight: 900;
font-size: 50px;
padding: 21px 5px;
border: 5px solid black;
border-radius: 10px;
background-color: black;
color: white;
}
And here is the finished DEV logo:
Top comments (0)