Dheeraj Yadav
This code is an HTML document with a basic structure.
<!DOCTYPE html>: This line declares that this is an HTML5 document.<html>: This element is the root element of the page and contains all other elements on the page.<head>: This element contains metadata about the document such as its title, linked stylesheets, scripts, etc.<title>: This element sets the title of the page which is displayed in the browser’s title bar or tab.<link>: This element is used to link external resources such as stylesheets. In this case, it links a stylesheet called “style.css”.<body>: This element contains the visible content of the document that is displayed in the browser window.<section>: This element defines a section of the document.<div>: This element is a generic container for content on the page.
Within the body, there are two <div> elements with classes “shadow” and “bowl”. These elements likely contain CSS styling information within the linked “style.css” file. The third <div> element within the “bowl” div has a class of “liquid”, suggesting that it will contain some sort of liquid graphic or animation.
<!DOCTYPE html>
<html>
<head>
<title>Colorful Glowing Liquid</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<section>
<div class="shadow"></div>
<div class="bowl">
<div class="liquid"></div>
</div>
</section>
</body>
</html>
This is a CSS code that styles an HTML document with the code provided earlier
The first part, *, is a selector that selects all HTML elements on the page.
- The
marginandpaddingproperties are set to 0, so there is no padding or margin around any of the elements. - The
box-sizingproperty is used to ensure that the sizing of elements includes border and padding dimensions
The section selector styles a section element.
display: flex;sets the display type to flex, which allows for easy centering of elements.justify-content: center;centers the content horizontally.align-items: center;centers the content vertically.min-height: 100vh;sets the minimum height of the section to 100% of the viewport height.background: #121212;sets the background color of the section.
The .bowl selector styles a div element with a class of bowl.
position: relative;sets the position of the element to relative.width: 300px;sets the width of the element to 300 pixels.height: 300px;sets the height of the element to 300 pixels.background: rgba(255,255,255,0.1);sets a white color with opacity.border-radius: 50%;creates a circular shape.border: 8px solid transparent;sets a border around the element.transform-origin: bottom center;sets the origin of the transformation.animation: animate 5s linear infinite;applies an animation with name ‘animate’ that lasts 5 seconds, has a linear timing function, and repeats indefinitely.-webkit-animation: animate 5s linear infinite;applies the same animation in webkit browsers.
The @keyframes animate rule defines the keyframes for the animation.
- Sets the filter and transform property for each animation percentage.
The .bowl::before selector styles the pseudo-element ::before.
content: '';inserts empty content before the element.position: absolute;positions the element absolutely.top: -15px;sets a top position of -15px.left: 50%;sets a left position of 50%.transform: translateX(-50%);translates the element on the x-axis by half its own width.width: 40%;sets the width of the element to 40% of its parent element.height: 30px;sets the height of the element to 30 pixels.border: 15px solid #444;sets a border around the element.border-radius: 50%;creates a circular shape.box-shadow: 0 10px #222;adds a shadow effect to the element.
The .bowl::after selector styles the pseudo-element ::after
content: '';inserts empty content after the element.position: absolute;positions the element absolutely.top: 40%;sets a top position of 40%.left: 50%;sets a left position of 50%.transform: translate(-50%,-50%);translates the element to its left and up by half of the element’s width and height respectively.border-radius: 50%;creates a circular shape.width: 150px;sets the width of the element to 150 pixels.height: 80px;sets the height of the element to 80 pixels.background: rgba(255,255,255,0.05);sets a white color with opacity.
The .liquid selector styles a div element with a class of liquid.
position: absolute;positions the element absolutely.top: 50%;sets a top position of 50%.left: 5px;sets a left position of 5 pixels.right: 5px;sets a right position of 5 pixels.bottom: 5px;sets a bottom position of 5 pixels.background: #41c1fb;sets the background color of the element.border-bottom-left-radius: 150px;creates a rounded edge at the bottom-left corner.border-bottom-right-radius: 150px;creates a rounded edge at the bottom-right corner.- `filter: drop-shadow(0
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
}
section
{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #121212;
}
.bowl
{
position: relative;
width: 300px;
height: 300px;
background: rgba(255,255,255,0.1);
border-radius: 50%;
border: 8px solid transparent;
transform-origin: bottom center;
animation: animate 5s linear infinite;
-webkit-animation: animate 5s linear infinite;
}
@keyframes animate
{
0%
{
filter: hue-rotate(0deg);
transform: rotate(0deg);
}
25%
{
transform: rotate(15deg);
}
50%
{
transform: rotate(0deg);
}
75%
{
transform: rotate(-15deg);
}
100%
{
filter: hue-rotate(360deg);
transform: rotate(0deg);
}
}
.bowl::before
{
content: '';
position: absolute;
top: -15px;
left: 50%;
transform: translateX(-50%);
width: 40%;
height: 30px;
border: 15px solid #444;
border-radius: 50%;
box-shadow: 0 10px #222;
}
.bowl::after
{
content: '';
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%,-50%);
border-radius: 50%;
width: 150px;
height: 80px;
background: rgba(255,255,255,0.05);
}
.liquid
{
position: absolute;
top: 50%;
left: 5px;
right: 5px;
bottom: 5px;
background: #41c1fb;
border-bottom-left-radius: 150px;
border-bottom-right-radius: 150px;
filter: drop-shadow(0 0 80px #41c1fb);
transform-origin: top center;
animation: animateLiquid 5s linear infinite;
}
@keyframes animateLiquid
{
0%
{
transform: rotate(0deg);
}
25%
{
transform: rotate(-20deg);
}
50%
{
transform: rotate(0deg);
}
75%
{
transform: rotate(20deg);
}
100%
{
transform: rotate(0deg);
}
}
.liquid::before
{
content: '';
position: absolute;
top: -10px;
width: 100%;
height: 20px;
background: #1fa4e0;
border-radius: 50%;
filter: drop-shadow(0 0 80px #41c1fb);
}
.shadow
{
position: absolute;
top: calc(50% + 150px);
left: 50%;
transform: translate(-50%,-50%);
width: 300px;
height: 30px;
background: rgba(0,0,0,0.5);
border-radius: 50%;
}
