From ad423852fd285bbbb68fdb22a96d931d73a51cfd Mon Sep 17 00:00:00 2001
From: sandhiya-R-T <75739715+sandhiya-R-T@users.noreply.github.com>
Date: Tue, 18 Jun 2024 18:02:51 +0530
Subject: [PATCH] Update 002-HTML-CSS.md
---
Mini-tasks/002-HTML-CSS.md | 779 +++++++++++++++++++++++++++++++++++--
1 file changed, 757 insertions(+), 22 deletions(-)
diff --git a/Mini-tasks/002-HTML-CSS.md b/Mini-tasks/002-HTML-CSS.md
index d96c95b..0f67a74 100644
--- a/Mini-tasks/002-HTML-CSS.md
+++ b/Mini-tasks/002-HTML-CSS.md
@@ -2,55 +2,790 @@
## HTML & CSS Tasks.
-1. Design the below equation using HTML & CSS
+1. Design the below equation using HTML & CSS
+
+
+
+
+ Wave Equation
+
+
+
+
+ $$\frac{\partial^2 u}{\partial t^2} = c^2 \frac{\partial^2 u}{\partial x^2}$$
+
+
+
2. Write a css rule of rounded rectangle, dashed border, grayscale for all image tags in your webpage.
+
+
+
+
+
+ Styled Images
+
+
+
+
+
+ $$\frac{\partial^2 u}{\partial t^2} = c^2 \frac{\partial^2 u}{\partial x^2}$$
+ 
+
+
+
+
+3. Write a media rule to change only the font size of web page when it's resized.
+
+
+
+
+ Responsive Font Size
+
+
+
+
+
+ $$\frac{\partial^2 u}{\partial t^2} = c^2 \frac{\partial^2 u}{\partial x^2}$$
+
+
+
+
+
+4. Use HTML & CSS to display different types of cursors.
+
+
+
+
+ Different Cursors
+
+
+
+ Different Cursor Types
+
+ Default Cursor: Hover over this text.
+ Pointer Cursor: Hover over this text.
+ Crosshair Cursor: Hover over this text.
+ Text Cursor: Hover over this text.
+ Move Cursor: Hover over this text.
+ Not Allowed Cursor: Hover over this text.
+ Wait Cursor: Hover over this text.
+ Help Cursor: Hover over this text.
+
+
-3. Write a media rule to change only the font size of web page when it's resized.
-
-4. Use HTML & CSS to display different types of cursors.
5. Write a CSS class that meets the **Box Model** requirement for all the div tags in your page.
- - Use certain properties padding, margin, border.
+ - Use certain properties padding, margin, border.
+
+
+
+
+ Box Model Example
+
+
+
+ This is a div with the box model applied.
+ Another div with the same box model.
+ Yet another div with the box model applied.
+
+
+
6. Write a CSS class to change size of font, color font family when mouse moves over of span tag in your webpage.
+
+
+
+
+
+ Hover Effects on Span
+
+
+
+ Hover over the following text to see the effect:
+ This text will change when you hover over it.
+
+
+
7. Write a CSS 2D rule with `translate()` property to move an element.
+
+
+
+
+
+ CSS Translate Example
+
+
+
+ Hover over me!
+
+
+
8. Define a CSS class to show tooltip when mouse moved over the elements.
+
+
+
+
+
+ Tooltip Example
+
+
+
+ Hover over the following text to see the tooltip:
+ Hover over me!
+
+
+
9. For the below shown image apply `clip property` with values of right & bottom and display the output.
- 
+ 
+
+
+
+
+ Tooltip Example
+
+
+
+ Hover over the following text to see the tooltip:
+ Hover over me!
+
+
+
+
+
+
+
+
+ Clip Property Example
+
+
+
+
+
+
+
+
Sample Title
+
Subtitle Here
+
This is a description text that provides more details about the content shown above.
+
` element an image border using the image "border.png". Slice the image at 30px and stretch it.
-
-15. Give the `
` element a rounded corner (25px radius) on the bottom left side.
-
-16. Remove the transparency/opacity of the `
![]()
` element when the user hovers over it with the mouse pointer.
-
-17. Position the `
` element all the way to the right using absolute positioning.
-
-18. Add a scrollbar to the `
` element.
-
-19. Set a linear gradient background for the `
` element, going from the top to bottom, transitioning from "white" to "red" to "blue" to "green".
-
-20. With the transform property, rotate the `
` element 45 degrees.
+ .background-image {
+ background-image: url('path/to/your/image.jpg'); /* Replace with your image path */
+ background-size: cover; /* Cover the entire element */
+ background-position: center; /* Center the background image */
+ background-repeat: no-repeat; /* Do not repeat the background image */
+ width: 100%; /* Adjust width as needed */
+ height: 400px; /* Adjust height as needed */
+}
+
+
+
+
+
+
Centered Background Image
+
+
+
+
+
+
+
+
+
+
+
+
+14. Write CSS rules to set the direction of the flexible items inside the `
` element in reverse order.
+ .container {
+ display: flex; /* Enable flexbox layout */
+ flex-direction: row-reverse; /* Arrange items in reverse order horizontally */
+ /* If you want items to wrap, you can use flex-wrap */
+ flex-wrap: wrap; /* Items wrap onto multiple lines if necessary */
+ /* Additional styling as needed */
+ justify-content: flex-start; /* Align items to the start of the flex container */
+}
+
+.item {
+ /* Styling for each flex item */
+ width: 100px; /* Example width */
+ height: 100px; /* Example height */
+ margin: 10px; /* Example margin */
+ background-color: #3498db; /* Example background color */
+}
+
+
+
+
+
+
+
Flexbox Reverse Order Example
+
+
+
+
+
+
Item 1
+
Item 2
+
Item 3
+
Item 4
+
Item 5
+
+
+
+
+
+
+15. Give the `
` element an image border using the image "border.png". Slice the image at 30px and stretch it.
+ .div-with-border {
+ width: 300px; /* Example width */
+ height: 200px; /* Example height */
+ border-width: 30px; /* Width of the sliced border */
+ border-image-source: url('border.png'); /* Path to your border image */
+ border-image-slice: 30; /* Slice the border image into 30px sections */
+ border-image-repeat: stretch; /* Stretch the border image to fit */
+ /* Optional: Adjust padding or margin as needed */
+ padding: 20px; /* Example padding */
+}
+
+
+
+
+
+
+
Border Image Example
+
+
+
+
+
+
+
+
+
+
+
+17. Give the `
` element a rounded corner (25px radius) on the bottom left side.
+ .rounded-corner {
+ width: 300px; /* Example width */
+ height: 200px; /* Example height */
+ border-radius: 0 0 0 25px; /* Top-left, top-right, bottom-right, bottom-left */
+ /* Optional: Additional styling */
+ background-color: #3498db; /* Example background color */
+ color: #ffffff; /* Example text color */
+ text-align: center; /* Example text alignment */
+ line-height: 200px; /* Example line height for vertical centering */
+}
+
+
+
+
+
+
+
Rounded Corner Example
+
+
+
+
+
+ Rounded bottom left corner
+
+
+
+
+
+19. Remove the transparency/opacity of the `
![]()
` element when the user hovers over it with the mouse pointer.
+
.image-hover {
+ opacity: 0.7; /* Initial opacity */
+ transition: opacity 0.3s ease; /* Smooth transition for opacity change */
+}
+
+.image-hover:hover {
+ opacity: 1; /* Full opacity on hover */
+}
+
+
+
+
+
+
+
Image Opacity on Hover
+
+
+
+
+
+
+
+
+
+20. Position the `
` element all the way to the right using absolute positioning.
Positioned to the right
.absolute-right {
+ position: absolute;
+ top: 0; /* Adjust as needed */
+ right: 0; /* Position all the way to the right */
+ /* Optional: Additional styling */
+ background-color: #3498db; /* Example background color */
+ color: #ffffff; /* Example text color */
+ padding: 10px; /* Example padding */
+}
+
+
+
+
+
+
Absolute Positioning Example
+
+
+
+
+
Positioned to the right
+
+
+
+
+21. Add a scrollbar to the `
` element.
+.scrollable-div {
+ width: 300px; /* Example width */
+ height: 200px; /* Example height */
+ overflow: auto; /* Add scrollbar when content overflows */
+ /* Optional: Additional styling */
+ border: 1px solid #ccc; /* Example border */
+ padding: 10px; /* Example padding */
+}
+
+
+
+
+
+
Scrollable Div Example
+
+
+
+
+
+
+
+
+
+
+22. Set a linear gradient background for the `
` element, going from the top to bottom, transitioning from "white" to "red" to "blue" to "green".
+
+
+.gradient-div {
+ width: 300px; /* Example width */
+ height: 200px; /* Example height */
+ background: linear-gradient(to bottom, white, red, blue, green);
+ /* Additional styling */
+ padding: 20px; /* Example padding */
+ color: #ffffff; /* Example text color */
+ text-align: center; /* Example text alignment */
+ line-height: 200px; /* Example line height for vertical centering */
+}
+
+
+
+
+
+
Gradient Background Example
+
+
+
+
+
+ Gradient background from top to bottom
+
+
+
+
+
+
+23. With the transform property, rotate the `
` element 45 degrees.
+
+
+
+.rotate-div {
+ width: 200px; /* Example width */
+ height: 200px; /* Example height */
+ background-color: #3498db; /* Example background color */
+ color: #ffffff; /* Example text color */
+ text-align: center; /* Example text alignment */
+ line-height: 200px; /* Example line height for vertical centering */
+ transform: rotate(45deg); /* Rotate the div 45 degrees */
+}
+
+
+
+
+
+
Rotate Div Example
+
+
+
+
+
+ Rotated div
+
+
+
+
### Additional Try outs