In this blog, This webpage is an HTML document that creates a webpage with a floating text effect. The webpage consists of a single heading element “h1” containing the text “CODE HACK” which is place at the center of the webpage. The webpage starts with <!DOCTYPE> declaration, which specifies the version of HTML used. The <html> element is used to define the entire webpage, and the “lang” attribute is set to “en” for English.
The <head> element contains meta information about the webpage, such as the character set and the title of the webpage “Floating Text”. It also includes a link to a CSS stylesheet “style.css”, which is use to style the webpage.
The <body> element contains the main content of the webpage, which is the heading element “h1” containing the text “CODE HACK”. The CSS stylesheet is use to set the background color of the webpage, position the heading element at the center of the webpage and give it a floating effect.
The CSS stylesheet defines several properties for the “h1” element, such as text-align, color, font-family, font-size, and letter-spacing, which all contribute to giving the text a clear and legible look. A text-shadow is also add to the text to give it a 3D effect.
The animation property is use to create the floating effect. It uses the @keyframes rule to define the animation and it rotates the text to give it a floating effect. The animation is use to repeat infinitely and changes direction after each iteration.
Video Tutorial of Floating Text Animation
To see a live demonstration of the Floating Text Animation, Click Here. For a complete video guide on how the generator works, check out the accompanying YouTube video.
Floating Text Animation
HTML:
Create a new file with the name “index.html” and add the provide code to it. Ensure the file has a “.html” extension.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Floating Text</title>
</head>
<body>
<h1>CODE <br>HACK<br></h1>
</body>
</html>
The body element is one of the most important elements in an HTML document. It is the container for all the content that is visible on a webpage. This includes text, images, videos, and any other media that you want to display to your users. The body element is defined by the opening <body> tag and closing </body> tag in the HTML code.
In the code snippet provided, we can see that the body element contains only one child element: an h1 heading. This heading contains the text “CODE HACK” written across two lines. It’s important to note that whatever elements are place within the body element will be visible on the webpage, so it’s crucial to structure your content properly.
CSS:
Create a new CSS file name “style.css” and copy the provide code into it. Ensure that the file has a “.css” extension.
body{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: #26de81;
overflow: hidden;
}
h1{
text-align: center;
color: #fff;
font-family: Arial, Helvetica, sans-serif;
font-size: 100px;
line-height: 100px;
letter-spacing: 15px;
text-shadow: 0 1px 0 #efefef,
0 2px 0 #efefef,
0 3px 0 #efefef,
0 4px 0 #efefef,
0 30px 5px rgba(0,0,0,0.1);
animation: float 3s linear infinite;
animation-direction: alternate;
}
@keyframes float{
from{
transform: rotate(5deg);
}
to{
transform: rotate(-5deg);
}
}
This is CSS code that styles a webpage. The code applies styles to the body and h1 elements of the HTML document. The body element has a display of flex, which makes the child elements within it aligned horizontally and vertically at the center. The background color is use to #26de81. The h1 element text is align at the center and its color is use to white. The font-family is use to Arial, Helvetica, sans-serif. The font-size and line-height are use to 100px. The text-shadow and animation properties are also use for the h1 element. The animation makes the h1 element rotate between 5 degrees and -5 degrees infinitely.
Summary:
In summary, this code creates a simple but effective webpage that uses a combination of HTML and CSS to create an attractive and visually appealing webpage with a floating text effect. The webpage is design to be minimalistic and clean, making it easy to read and understand. The animation property is use to create a sense of movement, adding an interactive element to the webpage. The text is clear, legible and easy to read, making it easy for users to understand the message of the webpage. Overall, this code is a great example of how a few lines of code can be use to create an engaging and interactive webpage.
