New
How Can I Make My Web Page To Display All The Html I Have Created
I created a portfolio and I have included all the information need but in my contact section the last contact information does not display after using some CSS in my HTML.I don't know what is wrong whether my HTML code or my CSS code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rolivhuwa Mandiwana Portfolio</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Rolivhuwa Mandiwana</h1>
<nav>
<ul>
<li><a href="#about">About</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<section id="about">
<h2>About Me</h2>
<p>I'm a self touht junior web developer with web development skils
<ul>
<li>HTML
<li>CSS</li>
<li> javaScript</li>
</ul>
I'm wiling to take a long term and a short term jorb , i will accept any kind of frontend web development project that i'm offered and i will do my very best to make the best results.</p>
</section>
<section id="projects">
<h2>Projects</h2>
<div class="project">
<h3>small business home page</h3>
<p>This is a small business home page explainig
and showing what the business is all about.</p>
</div>
<div class="project">
<h3>HML log in form</h3>
<p>Login form where you enter your
personal information to enter or continue to
the other side of a web page.</p>
</div>
<div class="project">
<h3>event invitation page</h3>
<p>this is an webpage that invite people
to an event showing inportant things about an event along with time and venue.</p>
</div>
<div class="project">
<h3>recipe page</h3>
<p>this is a page showing ijnstrucctions on how cook or bake along with what you need.</p>
</div>
</section>
<section id="contact">
<h2>Contact</h2>
<p>Email: <a href="milto:rolivhuwa274@gmail.com">rolivhuwa274@gmail.com</a><p>
<p>LinkedIn: <a href="linkedin.com/in/Rolivhuwa Mandiwana">linkedin.com/in/Rolivhuwa Mandiwana</a></p>
<p>WhatsApp: 0633967949</p>
<P>PhoneNumber: 0633967949</P>
</section>
<footer>
<p>© 2025 Rolivhuwa Mandiwana</p>
</footer>
</body>
</html>
This is a CSS that i have used
body {
font-family: sans-serif;
margin: 0;
padding: 0;
line-height: 1.6;
color: #333;
background-color: #f4f4f4;
font-size:1.2em;
}
header {
background-color: #333;
color: #fff;
padding: 1rem 0;
text-align: center;
}
nav ul {
list-style: none;
padding: 0;
margin: 0;
}
nav li {
display: inline;
margin: 0 1rem;
}
nav a {
color: #fff;
text-decoration: none;
}
section {
padding: 2rem;
}
.project {
margin-bottom: 2rem;
border: 1px solid #ddd;
padding: 1rem;
background-color: white;
color: #00ff00;
text-transform: uppercase;
}
#contact{
color: #ff0000;
}
footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 1rem 0;
position: fixed;
bottom: 0;
width: 100%;
}
#about{
color: #ff00ff;
text-transform: uppercase;
}
strong{
color:#00ffff;
}
h2{
color: brown;
text-align: center;
}
h3{
color: darkblue;
}
ul {
color: #00ffff;
}
this is what i have worked on and i don't have any idea about what to do
