Overviews
Hello readers, today in this blog you are going to learn how to create a YouTube logo using only HTML and CSS. Logo are consistent and should be taken care of throughout your business. It provides a convenient way for potential clients to showcase your business while also allowing you to expand your skills/experiences and services.
Nowadays people go to free logo maker sites, put some shapes or vectors and embed their link name. It is clear that people who follow these lines are crushing the future of their association. The emblem is part of the Association's Advanced Arms Reserve, which handles your engagement 24/7, likewise in places you can't even imagine. Making a master order is a smart move. Exactly when a client goes to an expert logo designer like you, you will need these logo mockups to discreetly show your structures to the client. So for now let's check out YouTube Logo CSS Animation along with the source code. In case you know Youtube, you should know how the logo is similar. Be that as it may, in this structure, the manufacturer added a small impact to the logo.
YouTube logo HTML CSS
--- Source Codes ---
To create this logo (YouTube logo), you need to create two files: an HTML file and a CSS file. After creating these files, just paste the following codes into your file.
1. HTML
First, create an HTML file named index.html and paste the given code into your HTML file. Remember that you must create a file with a .html extension and the images used on this website will not appear. You have to download the files from the given download button to use the images as well.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>YouTube-logo || Codewithzan</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="youtube-logo">
<div class="logo">
</div>
</div>
<div class="youtube">
<p>
YouTube
</p>
</div>
</body>
</html>2. CSS
* {
margin: 0;
padding: 0;
background-color: #e9e7fe;
font-family: Arial;
box-sizing: border-box;
outline: none;
}
body {
height: 100vh;
justify-content: center;
align-items: center;
display: flex;
}
.youtube-logo {
display: flex;
border-radius: 45px;
box-shadow: 5px 5px 12px #6957f2;
padding: 40px 75px;
background-color: #b50c38;
}
.logo {
height: 0px;
width: 0px;
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
border-left: 50px solid #f9f8ff;
background-color: #b50c38;
}
.youtube {
margin: 30px;
background-color: #f1f1fe;
}
.youtube p {
font-size: 140px;
font-weight: bold;
color: #060416;
text-shadow: 5px 5px 12px #6957f2;
}