Untitled
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>HTML and CSS Example</title> <link rel="stylesheet" href="styles.css"> </head> <body> <!-- 1. Place 10 images on the page --> <div> <img src="image1.jpg" alt="Image 1"> <img src="image2.jpg" alt="Image 2"> <img src="image3.jpg" alt="Image 3"> <img src="image4.jpg" alt="Image 4"> <img src="image5.jpg" alt="Image 5"> <img src="image6.jpg" alt="Image 6"> <img src="image7.jpg" alt="Image 7"> <img src="image8.jpg" alt="Image 8"> <img src="image9.jpg" alt="Image 9"> <img src="image10.jpg" alt="Image 10"> </div> <!-- 2. Three paragraphs with different alignments --> <p style="text-align: left;">This paragraph is left-aligned.</p> <p style="text-align: center;">This paragraph is center-aligned.</p> <p style="text-align: right;">This paragraph is right-aligned.</p> <!-- 3. Create and apply three classes --> <div class="karmaniel">Class 1</div> <div class="karmaniel">Class 2</div> <div class="karmaniel">Class 3</div> <div class="karmaniel">Class 4</div> <div class="karmaniel">Class 5</div> <div class="karmaniel">Class 6</div> <div class="karmaniel">Class 7</div> <div class="karmaniel">Class 8</div> <div class="karmaniel">Class 9</div> <div class="karmaniel">Class 10</div> <!-- 4. Pseudo-class example --> <a href="#" class="hover-link">Hover over me</a> <!-- 5. Element selector --> <h2>Element Selector Example</h2> <!-- 6. Eight divs with unique IDs --> <div id="div1">Div 1</div> <div id="div2">Div 2</div> <div id="div3">Div 3</div> <div id="div4">Div 4</div> <div id="div5">Div 5</div> <div id="div6">Div 6</div> <div id="div7">Div 7</div> <div id="div8">Div 8</div> <!-- 7. Four divs with inline styles --> <div style="color: red; font-weight: bold;">Inline Styled Div 1</div> <div style="color: green; font-style: italic;">Inline Styled Div 2</div> <div style="color: blue; text-decoration: underline;">Inline Styled Div 3</div> <div style="color: orange; font-size: 20px;">Inline Styled Div 4</div> <!-- 9-12. Various pseudo-elements --> <div class="pseudo-elements">Hover and focus me</div> <p class="first-line-first-letter">First line and first letter styling applied here.</p> <p class="selection-marker">Try selecting this text to see selection styles.</p> </body> </html>
Leave a Comment