See this video :- Impress Your Crush Using Html, CSS and JS
This conflict specifies the document type and interpretation of the HTML you're using. The original marker indicates the morning of the HTML document, and lang = " en" specifies that the language of the document is English. This section contains meta information and navigation for the web runner, which isn't directly visible to the user. Sets character garbling to UTF- 8, icing that the Web cybersurfer can display numerous characters and symbols. Specify that the runner should use theback-most interpretation of Internet Adventurer( in" Edge" mode). Sets viewport preferences for responsive web layouts, which render the runner rightly on different screen sizes. Impress Your Crush Defines the title of the web runner, which will appear in Cybersurfer's title bar or tab. It includes CSS( Slinging Style Waste) to baptize the web runner. This section defines CSS rules for baptizing the content. also the main CSS parcel is described- rotate defines a custom CSS property called"- rotate", which will be used to control the gyration of the card. The root element defines CSS variables, similar as-- card- height and-- card- range, which are used throughout the stylesheet to set the border of the card. Styling for the element sets the background color, centers the content horizontally and vertically using flexbox, and adds padding around the body for distance. This section contains the visible content of the web runner. Defines a special card element with the class" card". transformRotate( var(-- rotate)); The style rotates the card grounded on the value of the custom CSS property"-- rotate". Inside the element this is where the card content goes. In this case, it says" Surprise your crush!".
Download
view Code
<!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">
<title>Impress Your Crush</title>
<style>
/* Custom CSS property for rotating the card */
@property --rotate {
syntax: "<angle>";
initial-value: 0deg;
}
/* Define default CSS variables */
:root {
--card-height: 300px;
--card-width: 200px;
}
/* Styling for the body */
body {
background-color: #f0f0f0; /* Set background color */
display: flex; /* Display content as a flex container */
justify-content: center; /* Center content horizontally */
align-items: center; /* Center content vertically */
padding: 20px; /* Add padding around the body */
}
</style>
</head>
<body>
<!-- Special card element -->
<div class="card" style="transform: rotate(var(--rotate));">
<!-- Card content goes here -->
Surprise Your Crush!
</div>
</body>
</html>
.png)
0 Comments