I am trying to make my border bottom stretch out to the end of the page. I have posted a screenshot sending what I want and here is my html and css.
#body1{
background-color: black;
}
#PIEQA-PRESENTS{
display: flex;
}
.PIEQA{
font-family: droid-serif;
font-size: 2.7rem;
display: flex;
align-items: center;
}
#PresentBackground{
margin-left: 10px;
}
.PIEQAP{
font-family: droid-serif;
font-size: 1.7rem;
color: white;
}
#EDITORSET{
float: right;
position: absolute;
left: 400px;
bottom: 460px;
width: 700px;
padding: none;
margin: none;
border-bottom-color: red;
border-left-color: grey;
border-right-color: grey;
border-top-color: blue;
border-width: 5px;
}
#Sources{
float: right;
position: absolute;
left: 1150px;
top: 45px;
width: 130px;
border-bottom-color: red;
border-left-color: grey;
border-right-color: grey;
border-top-color: blue;
border-width: 5px;
padding: 0;
}
h1{
color: white;
font-family: droid-serif;
font-size: 3rem;
padding: 0;
margin: none;
border: none;
padding: none;
float: bottom;
position: relative;
}
ul{
color: white;
}
#headset{
background-color: black;
padding: 0;
border: 200px;
}
.nav p{
border-bottom-color: grey;
list-type: none;
margin-bottom: 30px;
}
h2, h3, h4{
color: white;
font-size: 1.7rem;
}
h2{
border-bottom: 4px solid #4a4c49;
}
#T-t2{
padding: none;
margin: none;
border-bottom-width: 900px;
}
#navigation{
width: 400px;
float: right;
position: relative;
right: 200px;
bottom: 300px;
border-bottom-color: red;
border-left-color: grey;
border-right-color: grey;
border-top-color: blue;
border-width: 5px;
}
header{
color: white;
font-size: 1.7rem;
}
.textT{
display: grid;
grid-column: 2 / 3;
text-align: justify;
column-width: 3rem;
column-gap: 2rem;
}
.textS{
display: grid;
grid-column: 2 / 3;
text-align: justify;
column-width: 3rem;
column-gap: 2rem;
}
#PIEQALINKS{
border-bottom-color: red;
border-left-color: grey;
border-right-color: grey;
border-top-color: blue;
border-width: 20px;
width: 210px;
margin-left: 1065px;
float: bottom;
position: relative;
bottom: 336px;
}
p, li{
color: white;
}
h5{
color: white;
font-size: 1.3rem;
}
#PIEQACONCLUSION{
width: 995px;
margin-left: 186px;
float: bottom;
position: relative;
right: 200px;
background-color: grey;
border-width: 30px;
border-color: grey;
}
#WCBS{
width: 500px;
padding: none;
margin-left: 390px;
}
.skill{
margin-bottom: 10px;
}
<!-- Please select a font for the wrap up text -->
#wrapup{
font-family:
}
footer{
margin: none;
padding: none;
border: none;
}
#mainS{
display: grid;
grid-template-columns: minmax(4rem, 80rem) minmax(4rem, 80rem);
row-gap: 1rem;
text-align: justify;
}
#mainT{
display: grid;
grid-template-columns: minmax(40rem, 70rem) minmax(40rem, 70rem);
row-gap: 1rem;
text-align: justify;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="The fith (and final) practice webpage for Aidan Hammonds EPQ" />
<link rel="stylesheet" href="Practice Webpage 5.css" />
<link rel="icon" type="image/x-icon" href="favicon(PP5).ico" />
<title> Practice Webpage 5 </title>
</head>
<body id="body1">
<div id="PIEQA-PRESENTS">
<h1 class="PIEQA" style="color:red;">P</h1><h1 class="PIEQA" style="color:blue;">I</h1><h1 class="PIEQA" style="color:red;">E</h1><h1 class="PIEQA" style="color:red;">Q</h1>
<h1 class="PIEQA" style="color:blue;">A</h1><div id="PresentBackground"><h1 id="PIEQAP">Presents</h1></div>
</div>
<fieldset id="EDITORSET">
<h3><u>Programmer notes/sources</u></h3>
<p> (Insert a small explanation of the sources here) </p>
</fieldset>
<fieldset id="Sources">
<h3><u>Sources</u></h3>
<h4>Teaching</h4>
<h5><a href="https://www.teachingpersonnel.com/tp-posts/2023-5/using-ai-to-reduce-teachers-workload#:~:text=Marking%20and%20Assessment,the%20marks%20are%20telling%20them.">Source 1</a></h5>
<h4>Students</h4>
<h5><a href="https://www.theguardian.com/technology/2023/may/18/ai-cheating-teaching-chatgpt-students-college-university">Source 2</a></h5>
<h5><a href="https://www.theguardian.com/technology/2023/jul/05/as-ai-cheating-booms-so-does-the-industry-detecting-it-we-couldnt-keep-up-with-demand">Source 3</a></h5>
</fieldset>
<fieldset id="headset">
<div id="title">
<h1><u>AI</u></h1>
<h1><u>being used</u></h1>
<h1><u>in</u></h1>
<h1><u>education</u></h1>
</div>
</fieldset>
<fieldset id="navigation">
<nav id="bar">
<header> Please choose where you would like to go! </header>
<ul>
<li><a class="nav" href="#Teaching">Teaching</a></li>
<li><a class="nav" href="#Students">Students</a></li>
<li><a class="nav" href="#Conclusion">Conclusion</a></li>
</ul>
</nav>
</fieldset>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<main id="mainT">
<div id="Teaching">
<h2 id="T-h2"> Teaching </h2>
<section id="textT">
<div class="1stp"><p class="TP">Now when we think of AI being used for teaching, some of us may see it as a load of nonsense. You might say to yourself "There is no way a robot can imitate
the role of a teacher". In some cases, you may be right, but in other cases, you are very wrong.</p>
<p> Lets acknowledge some quick facts we already know about AI in the form of a list and then in the folowing paragraph, I can discuss about how this all links to teaching</p>
<ul>
<li> Connecting with people with programmed advice giving
<li> It can mark papers quickly and efficiently
<li> It is a handy tool for spotting improvements to be made in future by the learner
</ul>
<!-- write about how AI can make this work (17/10/2023)-->
<p class="TP">These skills are common amongst good teachers. Meaning if AI is intergrated into the education system to play a role in teaching. Then this can bring teaching to a whole
new level of efficiency. Source 1 discusses that AI in teaching can help people learn better, it quotes "AI could analyse student data and provide recommendations on lesson plans that
are most effective for specific groups of students." </p></div>
<div class="2ndp">
<p class="TP">For a little bit of research, we asked chatgpt to make a spanish lesson page using html and css. The results looked heavily valid especially for a secondary school classroom
If you would like to see what chatgpt created <a href="../Page5/Gap-fill-exercise-spanish.html">Please click here</a></p>
<p class="TP"> This can be a little worrying because teachers jobs may be removed an their efforts may not mean much if an AI can do better than them. However it can be argued that human teachers are still needed
to deliver the lessons and level down with students when it comes to exam times/emotional support/ safe guarding. perhaps an AI can just decrease the workload for them</p>
</div>
<div class="summary">
<p>To summarise this, It is safe to say that artificial intelligence can rewrite the art of teaching. However there is the worry that teachers may become obsolete.</p></div>
</main>
</section>
</div>
<div id="Students">
<h2> Students </h2>
<main id="mainS">
<section id="textS">
<div class="1stp">
<p class="SP">As AI has been growing and becoming more mainstream, students have enjoyed no longer stressing over the burden of studying. This is because they can use AI to do assignments
for them. The first source written by a teacher called Siva Vaidhyanathan states "my teaching assistants caught four examples of students using artificial-intelligence-driven
language programs like ChatGPT to complete short essays." This tells us that students are becoming lazier and relying on an easy way of getting the work out of the way. We also know
why they do it as in the extract it talks about how students may cheat (they where asked why they where tempted to use AI) they responded "overwhelmed by demands of other courses and life itself." </p>
</div>
<div class="2ndp"></div>
<p>This is not only a problem, but it also a fast growing one the second extract talks about it when it quotes "A recent survey of 1,000 students at four-year universities by Intelligent.com found that 30% of
college students have reported using ChatGPT on written assignments." </p>
<p class="SP"> According to the same source, solutions are coming fast to tackle this issue. The source talks about predictive AI when it quotes "“With predictive AI, we’ll always be able to build a model to predict it,”"
We can take from this that maybe we should not worry as much about AI taking over education when it comes to students using it for their own gain. Predictive AI and water marks (another useful form of protection that is linked in the source)
should be able to discourage students from cheating-booms-so-does-the-industry-detecting-it-we-couldnt-keep-up-with-demand</p>
<div class="summary">
<p class="SP">To summarise, although it is a growing trend of students using artifical intelligence to cheat in their academics. It has been shown that AI developers are quick to act on making a solution.</p>
</div>
</main>
</section>
</div>
<div id="Conclusion" class="sub">
<h2> Conclusion </h2>
<p>Artificial intelligence clearly has a huge impact on education, as it has shown itself to both be useful at educating students, and discouraging them to learn overall. Whilst it can also be the teacher
we need to watch out that it does not become a double edged sword. That could also end up making millions of people loose their jobs.</p>
</div>
</body>
<fieldset id="WCBS">
<h4><u>What can be seen on this page?</u></h4>
<ul>
<li class="skill"> Use of class attributes
<li class="skill"> Advanced CSS (different display values such as flex and display, aswell as aligning the items to the center of its containers)
<li class="skill"> Use of commenting (to keep up on the progress more efficiently)
<li class="skill"> Different genre of sources (News site AND a teaching agency)
<li class="skill"> Use of the nav element (creating links that go to certain parts of the page once clicked
</ul>
</fieldset>
<footer>
<fieldset id="PIEQACONCLUSION">
<h3><u>So lets conclude these pages</u></h3>
<!-- Please find your coding log and then link it to the page (20/10/2023) -->
<p>All of these 5 pages are now complete. This final website will be created using a different software that is not notepad++. Hopefully you have now seen the programming development of PIEQA
and how they have done their research on the knowledge of artificial intelligence. To your right hand side will be links to the previous pages incase you would like to return to read up on the
subject or analyse the programmings output. A coding log is also featured for this project. If you would like to see the log <a href="https://docs.google.com/document/d/1v0BFsMz8ofwRBym6u_1SgS_g2zoN791au1P8taJPTXM/edit?usp=sharing"> Please press this link </a></p>
<br>
<br>
<p id="wrapup"> Thank you for checking out PIEQA's development. We hope you enjoy the final site as much as we have enjoyed creating it! </p>
</fieldset>
<fieldset id="PIEQALINKS">
<a href="../Page1/Practice webpage 1.html"> Practice webpage 1 (Intro to PIEQA) </a>
<br>
<br>
<a href="../Page2/Practice webpage 2.html"> Practice webpage 2 (AI controversy)</a>
<br>
<br>
<a href="../Page3/Practice webpage 3.html"> Practice webpage 3 (3 problems that can aspire with AI)</a>
<br>
<br>
<a href="../Page4/Practice webpage 4.html"> Practice webpage 4 (AI being used in politics)</a>
</fieldset>
</footer>
</html>
