Hi!
My css code is now showing on the preview window. It is also not accepting my query element in CSS
seriously something is wrong with the CSS tab and is not allowing me to reset the code as well.
Thank you!
Hi,
Can you share the code so we can see if the styles work for us?
can you show the code instead of a screenshot?
Sure!
body {
margin: 0;
padding: 0;
font-family: 'Helvetica Neue', Arial, sans-serif;
background-color: #f0f0f0;
color: #333;
}
a {
color: inherit;
text-decoration: none;
transition: color 0.3s ease;
}
a:hover {
color: #007bb5;
}
ul {
list-style: none;
padding: 0;
margin: 0;
}
#navbar {
position: fixed;
top: 0;
width: 100%;
background-color: rgba(0, 140, 186, 0.9);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
z-index: 1000;
}
#navbar ul {
display: flex;
justify-content: center;
padding: 10px 0;
}
#navbar li {
margin: 0 20px;
}
#navbar a {
color: #fff;
font-weight: bold;
font-size: 16px;
padding: 8px 16px;
border-radius: 4px;
transition: background-color 0.3s ease;
}
#navbar a:hover {
background-color: #005f8c;
}
#welcome-section {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: linear-gradient(to bottom right, #007bb5, #00b2ff);
color: #fff;
text-align: center;
padding: 0 20px;
}
.welcome-content {
max-width: 600px;
}
#welcome-section h1 {
font-size: 48px;
font-weight: 700;
margin-bottom: 20px;
letter-spacing: 1.5px;
}
#welcome-section p {
font-size: 20px;
line-height: 1.5;
max-width: 600px;
margin: 0 auto;
}
#projects {
padding: 60px 20px;
background-color: #f8f9fa;
text-align: center;
}
#projects h2 {
font-size: 36px;
font-weight: 700;
margin-bottom: 40px;
color: #333;
position: relative;
}
#projects h2::after {
content: '';
width: 60px;
height: 4px;
background-color: #007bb5;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: -10px;
}
.project-tile {
background-color: #fff;
border-radius: 8px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
margin: 20px auto;
padding: 20px;
max-width: 300px;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.project-tile:hover {
transform: translateY(-10px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}
.project-tile h3 {
font-size: 24px;
font-weight: 600;
margin-bottom: 15px;
color: #007bb5;
}
.project-tile a {
display: inline-block;
margin-top: 10px;
font-size: 16px;
font-weight: bold;
color: #007bb5;
border: 2px solid #007bb5;
padding: 10px 15px;
border-radius: 4px;
transition: background-color 0.3s ease, color 0.3s ease;
}
.project-tile a:hover {
background-color: #007bb5;
color: #fff;
}
#contact {
padding: 60px 20px;
background-color: #333;
color: #fff;
text-align: center;
}
#contact h2 {
font-size: 36px;
font-weight: 700;
margin-bottom: 20px;
}
#contact p {
font-size: 18px;
max-width: 600px;
margin: 0 auto;
line-height: 1.6;
}
footer {
background-color: #005f8c;
color: #fff;
text-align: center;
padding: 20px 0;
}
@media (max-width: 768px) {
#navbar ul {
flex-direction: column;
}
#navbar li {
margin: 10px 0;
}
#welcome-section h1 {
font-size: 36px;
}
#projects h2 {
font-size: 28px;
}
.project-tile {
max-width: 90%;
}
#contact h2 {
font-size: 28px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Marly Elizabeth's Portfolio</title>
<link rel="stylesheet" href="CSS/styles.css">
</head>
<body>
<header id="navbar">
<nav>
<ul>
<li><a href="#welcome-section">Home</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="https://github.com/marlyelizabeth" id="profile-link" target="_blank">GitHub</a></li>
</ul>
</nav>
</header>
<section id="welcome-section">
<div class="welcome-content">
<h1>Welcome to Marly Elizabeth's Portfolio</h1>
<p>Explore my projects and get to know my work.</p>
</div>
</section>
<section id="projects">
<h2>My Projects</h2>
<div class="project-tile">
<h3>Simple Website</h3>
<a href="https://marlyelizabeth.github.io/My-simple-website/" target="_blank">View Project</a>
</div>
<div class="project-tile">
<h3>Battle Cries Playlist</h3>
<a href="https://marlyelizabeth.github.io/Battle-Cries-Playlist/" target="_blank">View Project</a>
</div>
</section>
<section id="contact">
<h2>Contact Me</h2>
<p>If you'd like to get in touch, feel free to reach out via my GitHub profile.</p>
</section>
<footer>
<p>© 2024 Marly Elizabeth. All rights reserved.</p>
</footer>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Marly Elizabeth's Portfolio</title>
<link rel="stylesheet" href="CSS/styles.css">
</head>
<body>
<header id="navbar">
<nav>
<ul>
<li><a href="#welcome-section">Home</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="https://github.com/marlyelizabeth" id="profile-link" target="_blank">GitHub</a></li>
</ul>
</nav>
</header>
<section id="welcome-section">
<div class="welcome-content">
<h1>Welcome to Marly Elizabeth's Portfolio</h1>
<p>Explore my projects and get to know my work.</p>
</div>
</section>
<section id="projects">
<h2>My Projects</h2>
<div class="project-tile">
<h3>Simple Website</h3>
<a href="https://marlyelizabeth.github.io/My-simple-website/" target="_blank">View Project</a>
</div>
<div class="project-tile">
<h3>Battle Cries Playlist</h3>
<a href="https://marlyelizabeth.github.io/Battle-Cries-Playlist/" target="_blank">View Project</a>
</div>
</section>
<section id="contact">
<h2>Contact Me</h2>
<p>If you'd like to get in touch, feel free to reach out via my GitHub profile.</p>
</section>
<footer>
<p>© 2024 Marly Elizabeth. All rights reserved.</p>
</footer>
</body>
</html>
body {
margin: 0;
padding: 0;
font-family: 'Helvetica Neue', Arial, sans-serif;
background-color: #f0f0f0;
color: #333;
}
a {
color: inherit;
text-decoration: none;
transition: color 0.3s ease;
}
a:hover {
color: #007bb5;
}
ul {
list-style: none;
padding: 0;
margin: 0;
}
#navbar {
position: fixed;
top: 0;
width: 100%;
background-color: rgba(0, 140, 186, 0.9);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
z-index: 1000;
}
#navbar ul {
display: flex;
justify-content: center;
padding: 10px 0;
}
#navbar li {
margin: 0 20px;
}
#navbar a {
color: #fff;
font-weight: bold;
font-size: 16px;
padding: 8px 16px;
border-radius: 4px;
transition: background-color 0.3s ease;
}
#navbar a:hover {
background-color: #005f8c;
}
#welcome-section {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: linear-gradient(to bottom right, #007bb5, #00b2ff);
color: #fff;
text-align: center;
padding: 0 20px;
}
.welcome-content {
max-width: 600px;
}
#welcome-section h1 {
font-size: 48px;
font-weight: 700;
margin-bottom: 20px;
letter-spacing: 1.5px;
}
#welcome-section p {
font-size: 20px;
line-height: 1.5;
max-width: 600px;
margin: 0 auto;
}
#projects {
padding: 60px 20px;
background-color: #f8f9fa;
text-align: center;
}
#projects h2 {
font-size: 36px;
font-weight: 700;
margin-bottom: 40px;
color: #333;
position: relative;
}
#projects h2::after {
content: '';
width: 60px;
height: 4px;
background-color: #007bb5;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: -10px;
}
.project-tile {
background-color: #fff;
border-radius: 8px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
margin: 20px auto;
padding: 20px;
max-width: 300px;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.project-tile:hover {
transform: translateY(-10px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}
.project-tile h3 {
font-size: 24px;
font-weight: 600;
margin-bottom: 15px;
color: #007bb5;
}
.project-tile a {
display: inline-block;
margin-top: 10px;
font-size: 16px;
font-weight: bold;
color: #007bb5;
border: 2px solid #007bb5;
padding: 10px 15px;
border-radius: 4px;
transition: background-color 0.3s ease, color 0.3s ease;
}
.project-tile a:hover {
background-color: #007bb5;
color: #fff;
}
#contact {
padding: 60px 20px;
background-color: #333;
color: #fff;
text-align: center;
}
#contact h2 {
font-size: 36px;
font-weight: 700;
margin-bottom: 20px;
}
#contact p {
font-size: 18px;
max-width: 600px;
margin: 0 auto;
line-height: 1.6;
}
footer {
background-color: #005f8c;
color: #fff;
text-align: center;
padding: 20px 0;
}
@media (max-width: 768px) {
#navbar ul {
flex-direction: column;
}
#navbar li {
margin: 10px 0;
}
#welcome-section h1 {
font-size: 36px;
}
#projects h2 {
font-size: 28px;
}
.project-tile {
max-width: 90%;
}
#contact h2 {
font-size: 28px;
}
}
1 Like
Ok so there’s nothing wrong in your CSS file yet. I see a problem in the link here :
You should link your HTML file it to styles.css and I don’t know what that CSS is doing there. Take a look at that and the styles will work.
2 Likes
OMG! it worked, thanks so much
1 Like
You’re welcome!
Btw, welcome to the forum! 
1 Like