Skip to content

Refactor index.html for poem page layout and styles #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Devindra20 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Refactor index.html for poem page layout and styles #2

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
220 changes: 209 additions & 11 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,215 @@
<!-- Task 1 -->
<!-- <!DOCTYPE html>

<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<style>
div{
background-color: lightgrey;
width: 300px;
border-bottom: solid;
padding: 50px;
margin:20px 10px 40px 20px;
}
</style>
</head>
<body>
<div>
This the div content
</div>
<script src="script.js"></script>
</body>
</html> -->

<!-- Task 2 -->
<!-- <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Poem Page</title>
<styling>
section{
height: 80vb;
}
h2{
text align: center, justify;

}
</styling>
<p>
Why won't students come to labs? This is something I always ponder.
After unprepared students write exams, They watch their marks in wonder.
</p>

<p>
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?
</p>

<p>
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.
</p>

<p>
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.
</p>
</section>

</body>
</html> -->

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<style>
.bold{
font-weight: bold;
}

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;
}

#section1{
height: 80vh;
}

#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: 100%;
z-index: -2;
opacity: 0.3;
}

#section2{
padding: 2em;
color: white;
height: 60vh;
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%);
}

</style>
</head>
<body>
<section id="section1">
p:hover{
outline:2px double red;

<p>
Why won't students come to labs? This is something I always ponder.
After unprepared students write exams, They watch their marks in wonder.
</p>
<p>
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?
</p>
<p>
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.
</p>
<p>
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.
</p>
}
<!-- This is how html comments are done btw -->
</section>
<section id="section2">
<h1>Section 2</h1>
</section>
<script src="script.js"></script>
</body>
</html>
<style>
.bold{
font-weight: bold;
}

</style>
<body>
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;
}
</style>
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;
}

</body>
</html>
div> h2{
text-decoration: none;
}