Chocolate Day | 9 Feb Special In Htm, CSS | by #untoldCoding
Chocolate Day | 9 Feb Special In Htm, CSS | by #untoldCoding
1st HTML File
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>UntoldCoding</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="discontinued"></div>
<div class="main">
<p>I have Something <a href="new.html">Click Here</a></p>
</div>
</body>
</html>
1st CSS File
div,
div:before,
div:after {
display: block;
content: "";
position: absolute;
box-sizing: border-box;
}
body {
height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
background: url(https://i.postimg.cc/RFvH4Fk2/chocolate-183543-1280.jpg);
background-size: cover;
background-repeat: no-repeat;
}
div.discontinued {
width: 100vmin;
height: 100vmin;
display: flex;
transform: scale(1.2);
position: relative;
justify-content: center;
align-items: center;
margin: 0 auto;
background: radial-gradient(
ellipse at 50% 120%,
transparent 2.6vmin,
#7a311e 2.6vmin,
#7a311e 3vmin,
transparent 3vmin
)
calc(-5vmin + 34vmin) calc(-10vmin + 38vmin) / 20vmin 10vmin no-repeat,
radial-gradient(
ellipse at 50% 120%,
transparent 2.6vmin,
#7a311e 2.6vmin,
#7a311e 3vmin,
transparent 3vmin
)
calc(-5vmin + 54vmin) calc(-10vmin + 38vmin) / 20vmin 10vmin no-repeat,
radial-gradient(ellipse, #512014 2vmin, transparent 2vmin)
calc(-5vmin + 38vmin) calc(-10vmin + 45vmin) / 12vmin 12vmin no-repeat,
radial-gradient(ellipse, #512014 2vmin, transparent 2vmin)
calc(-5vmin + 58vmin) calc(-10vmin + 45vmin) / 12vmin 12vmin no-repeat,
radial-gradient(ellipse, #d9aa82 2.5vmin, transparent 2.5vmin)
calc(-5vmin + 31vmin) calc(-10vmin + 50vmin) / 20vmin 12vmin no-repeat,
radial-gradient(ellipse, #d9aa82 2.5vmin, transparent 2.5vmin)
calc(-5vmin + 57vmin) calc(-10vmin + 50vmin) / 20vmin 12vmin no-repeat,
radial-gradient(ellipse, #f8c2bb 2.5vmin, transparent 2.5vmin)
calc(-5vmin + 44vmin) calc(-10vmin + 53vmin) / 20vmin 10vmin no-repeat,
radial-gradient(ellipse, #512014 4vmin, transparent 2.5vmin)
calc(-5vmin + 44vmin) calc(-10vmin + 46vmin) / 20vmin 20vmin no-repeat,
linear-gradient(25deg, #bda293 1vmin, transparent 0.5vmin)
calc(-5vmin + 27.5vmin) calc(-10vmin + 41vmin) / 1.5vmin 1vmin no-repeat,
linear-gradient(75deg, #bda293 1vmin, transparent 0.5vmin)
calc(-5vmin + 32.5vmin) calc(-10vmin + 46vmin) / 1.5vmin 1vmin no-repeat,
linear-gradient(25deg, #bda293 1vmin, transparent 0.5vmin)
calc(-5vmin + 57.5vmin) calc(-10vmin + 31vmin) / 1.5vmin 1vmin no-repeat,
linear-gradient(75deg, #bda293 1vmin, transparent 0.5vmin)
calc(-5vmin + 82.5vmin) calc(-10vmin + 46vmin) / 1.5vmin 1vmin no-repeat,
linear-gradient(25deg, #bda293 1vmin, transparent 0.5vmin)
calc(-5vmin + 74vmin) calc(-10vmin + 41vmin) / 1.5vmin 1vmin no-repeat,
linear-gradient(75deg, #bda293 1vmin, transparent 0.5vmin)
calc(-5vmin + 82.5vmin) calc(-10vmin + 54vmin) / 1.5vmin 1vmin no-repeat,
linear-gradient(25deg, #bda293 1vmin, transparent 0.5vmin)
calc(-5vmin + 34vmin) calc(-10vmin + 39vmin) / 1.5vmin 1vmin no-repeat,
linear-gradient(75deg, #bda293 1vmin, transparent 0.5vmin)
calc(-5vmin + 62.5vmin) calc(-10vmin + 34vmin) / 1.5vmin 1vmin no-repeat,
linear-gradient(25deg, #bda293 1vmin, transparent 0.5vmin)
calc(-5vmin + 54vmin) calc(-10vmin + 36vmin) / 1.5vmin 1vmin no-repeat,
linear-gradient(95deg, #bda293 1vmin, transparent 0.5vmin)
calc(-5vmin + 42.5vmin) calc(-10vmin + 34vmin) / 1.5vmin 1vmin no-repeat,
linear-gradient(35deg, #bda293 1vmin, transparent 0.5vmin)
calc(-5vmin + 37vmin) calc(-10vmin + 35vmin) / 1.5vmin 1vmin no-repeat,
linear-gradient(75deg, #bda293 1vmin, transparent 0.5vmin)
calc(-5vmin + 40vmin) calc(-10vmin + 40vmin) / 1.5vmin 1vmin no-repeat,
linear-gradient(15deg, #bda293 1vmin, transparent 0.5vmin)
calc(-5vmin + 47vmin) calc(-10vmin + 35vmin) / 1.5vmin 1vmin no-repeat,
linear-gradient(75deg, #bda293 1vmin, transparent 0.5vmin)
calc(-5vmin + 50vmin) calc(-10vmin + 32vmin) / 1.5vmin 1vmin no-repeat,
linear-gradient(15deg, #bda293 1vmin, transparent 0.5vmin)
calc(-5vmin + 67vmin) calc(-10vmin + 35vmin) / 1.5vmin 1vmin no-repeat,
linear-gradient(75deg, #bda293 1vmin, transparent 0.5vmin)
calc(-5vmin + 72vmin) calc(-10vmin + 36vmin) / 1.5vmin 1vmin no-repeat,
linear-gradient(15deg, #bda293 1vmin, transparent 0.5vmin)
calc(-5vmin + 78vmin) calc(-10vmin + 50vmin) / 1.5vmin 1vmin no-repeat,
linear-gradient(75deg, #bda293 1vmin, transparent 0.5vmin)
calc(-5vmin + 84vmin) calc(-10vmin + 60vmin) / 1.5vmin 1vmin no-repeat,
radial-gradient(
ellipse at 90% 110%,
transparent 1.8vmin,
#c78f74 1.8vmin,
#c78f74 2vmin,
transparent 1vmin
)
calc(-5vmin + 20.5vmin) calc(-10vmin + 42.5vmin) / 6vmin 10vmin no-repeat,
radial-gradient(
ellipse at 90% 110%,
transparent 1.8vmin,
#865036 1.8vmin,
#865036 2vmin,
transparent 1vmin
)
calc(-5vmin + 16vmin) calc(-10vmin + 48vmin) / 6vmin 10vmin no-repeat,
radial-gradient(
ellipse at 10% 10%,
transparent 1.8vmin,
#865036 1.8vmin,
#c78f74 2vmin,
transparent 1vmin
)
calc(-5vmin + 24vmin) calc(-10vmin + 54vmin) / 6vmin 10vmin no-repeat,
radial-gradient(
ellipse at 90% 10%,
transparent 1.8vmin,
#865036 1.8vmin,
#865036 2vmin,
transparent 1vmin
)
calc(-5vmin + 19vmin) calc(-10vmin + 51vmin) / 6vmin 10vmin no-repeat,
radial-gradient(
ellipse at 20% -20%,
transparent 1.5vmin,
#c78f74 1.5vmin,
#c78f74 1.7vmin,
transparent 1.7vmin
)
calc(-5vmin + 21vmin) calc(-10vmin + 59vmin) / 6vmin 10vmin no-repeat,
radial-gradient(
ellipse at 20% -20%,
transparent 1.5vmin,
#865036 1.5vmin,
#865036 1.7vmin,
transparent 1.7vmin
)
calc(-5vmin + 26vmin) calc(-10vmin + 52vmin) / 6vmin 10vmin no-repeat,
radial-gradient(
ellipse at 20% 110%,
transparent 1.8vmin,
#865036 1.8vmin,
#865036 2vmin,
transparent 1vmin
)
calc(-5vmin + 25vmin) calc(-10vmin + 41vmin) / 6vmin 10vmin no-repeat,
radial-gradient(ellipse, #fdfdf9 3.2vmin, transparent 1vmin)
calc(-5vmin + 22vmin) calc(-10vmin + 44vmin) / 8vmin 15vmin no-repeat,
radial-gradient(ellipse, #fdfdf9 4vmin, transparent 1vmin)
calc(-5vmin + 19.75vmin) calc(-10vmin + 46.75vmin) / 9vmin 14vmin
no-repeat,
radial-gradient(ellipse, #fdfdf9 3.25vmin, transparent 1vmin)
calc(-5vmin + 17.5vmin) calc(-10vmin + 51vmin) / 9vmin 14vmin no-repeat,
radial-gradient(ellipse at 0% 0%, #fdfdf9 4.5vmin, transparent 1vmin)
calc(-5vmin + 22vmin) calc(-10vmin + 53vmin) / 5vmin 10vmin no-repeat,
radial-gradient(ellipse, #865036 4vmin, transparent 1vmin)
calc(-5vmin + 78.75vmin) calc(-10vmin + 51.5vmin) / 12vmin 14vmin
no-repeat,
radial-gradient(ellipse, #865036 4.5vmin, transparent 1vmin)
calc(-5vmin + 73.5vmin) calc(-10vmin + 41.5vmin) / 13vmin 15vmin no-repeat,
radial-gradient(ellipse, #865036 4.5vmin, transparent 1vmin)
calc(-5vmin + 78vmin) calc(-10vmin + 44.5vmin) / 9vmin 15vmin no-repeat,
radial-gradient(ellipse, #865036 4vmin, transparent 1vmin)
calc(-5vmin + 73vmin) calc(-10vmin + 40vmin) / 12vmin 9vmin no-repeat,
radial-gradient(ellipse, #865036 5vmin, transparent 1vmin)
calc(-5vmin + 69vmin) calc(-10vmin + 37.5vmin) / 12vmin 9vmin no-repeat,
radial-gradient(ellipse, #865036 3vmin, transparent 1vmin)
calc(-5vmin + 71vmin) calc(-10vmin + 35vmin) / 9vmin 9vmin no-repeat,
radial-gradient(ellipse, #865036 4vmin, transparent 1vmin)
calc(-5vmin + 67vmin) calc(-10vmin + 33.5vmin) / 9vmin 9vmin no-repeat,
radial-gradient(ellipse, #865036 4.5vmin, transparent 1vmin)
calc(-5vmin + 60vmin) calc(-10vmin + 31vmin) / 15vmin 9vmin no-repeat,
radial-gradient(ellipse, #865036 7vmin, transparent 1vmin)
calc(-5vmin + 44vmin) calc(-10vmin + 31vmin) / 15vmin 9vmin no-repeat,
radial-gradient(ellipse, #865036 6vmin, transparent 1vmin)
calc(-5vmin + 54vmin) calc(-10vmin + 30vmin) / 15vmin 9vmin no-repeat,
radial-gradient(ellipse, #865036 4.5vmin, transparent 1vmin)
calc(-5vmin + 47vmin) calc(-10vmin + 29vmin) / 15vmin 9vmin no-repeat,
radial-gradient(ellipse, #865036 3.75vmin, transparent 1vmin)
calc(-5vmin + 52vmin) calc(-10vmin + 29.25vmin) / 12vmin 6vmin no-repeat,
radial-gradient(ellipse, #865036 3.75vmin, transparent 1vmin)
calc(-5vmin + 47vmin) calc(-10vmin + 30vmin) / 11vmin 4vmin no-repeat,
radial-gradient(ellipse, #865036 3.75vmin, transparent 1vmin)
calc(-5vmin + 43vmin) calc(-10vmin + 31vmin) / 8vmin 4vmin no-repeat,
radial-gradient(ellipse at left top, #865036 3.75vmin, transparent 1vmin)
calc(-5vmin + 29vmin) calc(-10vmin + 43vmin) / 8vmin 11vmin no-repeat,
radial-gradient(ellipse, #865036 4.5vmin, transparent 1vmin)
calc(-5vmin + 35vmin) calc(-10vmin + 32vmin) / 10vmin 8vmin no-repeat,
radial-gradient(ellipse, #865036 3.5vmin, transparent 1vmin)
calc(-5vmin + 38vmin) calc(-10vmin + 31.5vmin) / 10vmin 8vmin no-repeat,
radial-gradient(ellipse, #865036 4.5vmin, transparent 1vmin)
calc(-5vmin + 34vmin) calc(-10vmin + 36vmin) / 10vmin 8vmin no-repeat,
radial-gradient(ellipse, #865036 3.5vmin, transparent 1vmin)
calc(-5vmin + 35vmin) calc(-10vmin + 33vmin) / 10vmin 8vmin no-repeat,
radial-gradient(ellipse, #865036 3vmin, transparent 1vmin)
calc(-5vmin + 32vmin) calc(-10vmin + 36vmin) / 8vmin 10vmin no-repeat,
radial-gradient(ellipse at bottom right, #865036 5vmin, transparent 1vmin)
calc(-5vmin + 21vmin) calc(-10vmin + 34vmin) / 8vmin 14vmin no-repeat,
radial-gradient(ellipse, #865036 4vmin, transparent 1vmin)
calc(-5vmin + 27vmin) calc(-10vmin + 38vmin) / 8vmin 14vmin no-repeat,
radial-gradient(ellipse at left top, #865036 3vmin, transparent 1vmin)
calc(-5vmin + 27vmin) calc(-10vmin + 48vmin) / 6vmin 14vmin no-repeat,
radial-gradient(ellipse, #865036 4vmin, transparent 1vmin)
calc(-5vmin + 17.5vmin) calc(-10vmin + 44vmin) / 12vmin 18vmin no-repeat,
radial-gradient(ellipse at left, #865036 4vmin, transparent 1vmin)
calc(-5vmin + 27vmin) calc(-10vmin + 44vmin) / 6vmin 18vmin no-repeat,
radial-gradient(ellipse, #865036 4vmin, transparent 1vmin)
calc(-5vmin + 16vmin) calc(-10vmin + 49vmin) / 12vmin 18vmin no-repeat,
radial-gradient(ellipse at left, #865036 3vmin, transparent 1vmin)
calc(-5vmin + 25vmin) calc(-10vmin + 48.5vmin) / 6vmin 18vmin no-repeat,
repeating-linear-gradient(
80deg,
#c78347 0vmin,
#c78347 0.5vmin,
transparent 0.5vmin,
transparent 3vmin
)
calc(-5vmin + 30vmin) calc(-10vmin + 40vmin) / 17vmin 22vmin no-repeat,
repeating-linear-gradient(
80deg,
#c78347 0vmin,
#c78347 0.5vmin,
transparent 0.5vmin,
transparent 3vmin
)
calc(-5vmin + 45.25vmin) calc(-10vmin + 36vmin) / 26vmin 26vmin no-repeat,
repeating-linear-gradient(
-10deg,
#c78347 0vmin,
#c78347 0.5vmin,
transparent 0.5vmin,
transparent 3vmin
)
calc(-5vmin + 30vmin) calc(-10vmin + 40vmin) / 47vmin 22vmin no-repeat,
radial-gradient(ellipse at 50% 100%, #cd905b 30vmin, transparent 1vmin)
calc(-5vmin + 16vmin) calc(-10vmin + 22vmin) / 80vmin 40vmin no-repeat,
radial-gradient(ellipse at 46% 100%, #865036 34vmin, transparent 1vmin)
calc(-5vmin + 16vmin) calc(-10vmin + 22vmin) / 80vmin 40vmin no-repeat;
}
div.discontinued:after {
width: 100vmin;
height: 100vmin;
left: -1vmin;
text-align: center;
z-index: 99;
padding-top: 55vmin;
font-size: 12vmin;
font-weight: 900;
transform: scale(1);
z-index: 999;
color: #74452f;
text-shadow: 0 2px 2px #fae385;
line-height: 0.9;
text-transform: uppercase;
white-space: pre-wrap;
font-family: "Oswald", sans-serif;
content: "FOr My ";
}
div.discontinued:before {
width: 100vmin;
height: 100vmin;
left: -1vmin;
text-align: center;
z-index: 99;
padding-top: 67vmin;
font-size: 7.15vmin;
font-weight: 400;
transform: scale(1);
z-index: 999;
color: #a86a33;
line-height: 0.9;
text-transform: uppercase;
white-space: pre-wrap;
font-family: "Oswald", sans-serif;
content: "Chocolate";
text-shadow: 0 2px 2px #ffffff;
}
.main {
color: #ffffff;
position: absolute;
bottom: 5%;
font-weight: 600;
font-size: 35px;
font-family: "Oswald", sans-serif;
text-shadow: 0 2px 2px #512014;
}
.main a {
color: white;
text-shadow: 0 2px 2px #512014;
}
.main a:hover {
color: rgb(230, 47, 47);
text-shadow: 0 2px 2px #ffffff;
}
Now explanation
This a part of the code sets the display belongings of the div, div:before, and div:after to dam, which means they will each display as a block-level element.
The content assets is set to an empty string, which means there is no content for these elements.
They are placed virtually and have field-sizing set to frame-field, which incorporates padding and border inside the detail's overall width and top.
Css
This component patterns the body element, setting its peak and width to one hundred% of the viewport peak and width.
It makes use of flexbox to center its contents each horizontally and vertically.
The heritage belongings sets a history image of chocolate, protecting the complete viewport and making sure it would not repeat.
This selector objectives a div detail with a class of "discontinued" and applies the subsequent patterns to it.
Css
Copy code
div.Discontinued:earlier than
/* Styles for the :before pseudo-element of the discontinued div */
This selector goals the pseudo-element before the discontinued div and applies styles to it.
Css
Copy code
div.Discontinued:after
/* Styles for the :after pseudo-element of the discontinued div */
This selector objectives the pseudo-element after the discontinued div and applies patterns to it.
The rest of the CSS code carries quite a few complex history gradients and radial gradients used to create a visually appealing historical past pattern akin to chocolate. Additionally, there are styles carried out to the primary content of the page, together with font length, shade, and positioning.
Now Come to 2nd File
2nd HTML File
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>UntoldCoding</title>
<link rel="stylesheet" href="new.css" />
</head>
<body>
<button class="chocolate-button">
<div class="crumbs"></div>
<span class="bar">
<span class="text"> Chocolate Bar</span>
</span>
</button>
<div class="instructions">Click on Chocolate</div>
<script>
console.clear();
const elButton = document.querySelector(".chocolate-button");
elButton.addEventListener("mousedown", (event) => {
if (!elButton.matches(":focus")) {
elButton.style.setProperty("--x", event.offsetX);
elButton.style.setProperty("--y", event.offsetY);
}
});
</script>
</body>
</html>
<html lang="en">: This tag specifies that the content of the HTML record is in English.
<head>: This section includes meta-data approximately the HTML file, along with the individual encoding, viewport settings, identify, and links to external resources.
<meta charset="UTF-eight" />: This meta tag units the individual encoding of the report to UTF-eight, which helps a huge range of characters.
<meta name="viewport" content material="width=tool-width, initial-scale=1.Zero" />: This meta tag sets the viewport width to the width of the device and sets the preliminary zoom level to 1.0.
<title>UntoldCoding</name>: This tag sets the identify of the HTML record to "UntoldCoding".
<link rel="stylesheet" href="new.Css" />: This tag links an outside CSS stylesheet named "new.Css" to the HTML record.
<body>: This section consists of the primary content material of the HTML report.
<button class="chocolate-button">: This tag creates a button detail with a class of "chocolate-button".
<div elegance="crumbs"></div>: This tag creates an empty div element with a category of "crumbs" within the button. It's likely used for styling functions.
<span class="bar">...</span>: This tag creates a span detail with a class of "bar" inside the button, containing the textual content "Chocolate Bar".
<span elegance="text"> Chocolate Bar</span>: This tag creates a span element with a class of "text" in the "bar" span, containing the text "Chocolate Bar".
<div magnificence="commands">Click on Chocolate</div>: This tag creates a div element with a category of "instructions" containing the text "Click on Chocolate". It in all likelihood affords instructions to the user.
<script>...</script>: This script phase incorporates JavaScript code. It clears the console, selects the button with the magnificence "chocolate-button", and provides an event listener for the "mousedown" occasion. When the button is clicked, it checks if the button isn't targeted and units custom houses "--x" and "--y" to the x and y coordinates of the clicking occasion, respectively. These custom homes are probably used for styling purposes inside the related CSS stylesheet.
Post a Comment