From bfddb608e77afabf002305a554aad1a47244fb5f Mon Sep 17 00:00:00 2001 From: Devindra20 Date: Mon, 9 Mar 2026 22:03:18 -0400 Subject: [PATCH] Refactor index.html for poem page layout and styles Updated HTML structure and styles for a poem page. Added sections with improved layout and styling. --- index.html | 220 ++++++++++++++++++++++++++++++++++++++++++++++++++--- 1 file changed, 209 insertions(+), 11 deletions(-) diff --git a/index.html b/index.html index 2c88fd8..91c0c2b 100644 --- a/index.html +++ b/index.html @@ -1,17 +1,215 @@ + + + + + + - - - - - Document - + + + + + repl.it + + + + +
+ p:hover{ + outline:2px double red; + +

+ Why won't students come to labs? This is something I always ponder. + After unprepared students write exams, They watch their marks in wonder. +

+

+ Why won't students come to labs? What is more important than class? + How can you be a student if you don't even try to pass? +

+

+ Why won't students come to labs? It happens all the time. + If you came to labs, you'd know what to do. But you would rather duck and go lime. +

+

+ Why won't students come to labs? I see them all now stressing. + If you only learned this basic programming, You would surely now be zessing. +

+ } + +
+
+

Section 2

+
+ + + - +h2{ + text-align: center; + text-decoration: underline overline solid black; +} +p{ + text-align: justify; + width:50vw; + margin-left: auto; + margin-right: auto; +} +section{ + border-bottom: 5px solid black; + height: 40vh; + overflow-y:scroll +} + +#section1::before{ + background-image: url("https://images.unsplash.com/reserve/LJIZlzHgQ7WPSh5KVTCB_Typewriter.jpg?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80"); + background-size: stretch; + background-position: center; + content: ""; + position: absolute; + width:100%; + height: 40vh; + z-index: -2; + opacity: 0.3; +} + +#section2{ + padding: 2em; + color: white; + background: rgb(131,58,180); + background: linear-gradient(90deg, rgba(131,58,180,1) 0%, rgba(29,211,253,1) 50%, rgba(252,176,69,1) 100%); +} + +p:hover{ + outline: 2px double red; +} + +div{ + width: 400px; + height: 300px; + margin-left: auto; + margin-right: auto; + margin-top: auto; + margin-bottom: auto; + background-color: white; + color: black; + text-align: center; + box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2); + border-radius:4px; + padding: 5px; +} - - - \ No newline at end of file +div> h2{ + text-decoration: none; +}