Tell us what’s happening:
I’d like to know what’s happening with the navbar, because in the code, it appears to always be at the top of the viewport height (vh).
Your code so far
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Character set and viewport configuration for mobile compatibility -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Page title displayed on the browser tab -->
<title>Oscar Matos - Portfolio</title>
<!-- Link to the external CSS stylesheet -->
<link rel="stylesheet" href="styles.css">
<!-- Link to Boxicons for icon usage -->
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
</head>
<body>
<!-- ============================= -->
<!-- Header Section -->
<!-- ============================= -->
<!-- Fixed header containing the logo and navigation links -->
<header class="header">
<!-- Logo linking to the welcome section -->
<a href="#welcome-section" class="logo"> < Oscar Matos ></a>
<!-- Navigation bar with links to different sections -->
<nav id="navbar">
<a href="#welcome-section">About</a>
<a href="#projects">Portafolio</a>
<a href="#contact">Contact</a>
</nav>
</header>
<!-- ============================= -->
<!-- Main Container Section -->
<!-- ============================= -->
<!-- Main container for scroll-snap and overall layout -->
<div id="main-container">
<!-- ============================= -->
<!-- Welcome Section -->
<!-- ============================= -->
<section id="welcome-section">
<!-- Container for the welcome content -->
<div class="home-content">
<!-- Main heading with a line break -->
<h1>Hey there!, <span><br>I'm Oscar</br></span></h1>
<!-- Subheading with highlighted color -->
<h2>a Full-Stack Dev in the making.</h2>
<!-- Paragraph describing skills and mission -->
<p>currently armed with <span>HTML</span> and <span>CSS</span>, and on a mission to turn code into cool experiences. Just getting started, but <span>watch this space</span>!</p>
<!-- Container for action buttons -->
<div class="btn-box">
<a href="#">Hire Me</a>
<a href="#">Let's Talk</a>
</div>
</div>
<!-- Container for the welcome image -->
<div class="image-container">
<!-- Image representing the user -->
<img src="https://i.postimg.cc/Dwtfjp39/pngwing-com.png" alt="Vector of a man face" />
</div>
</section>
</div>
<!-- ============================= -->
<!-- Projects Section -->
<!-- ============================= -->
<section id="projects">
<!-- Section heading -->
<h2>My Projects</h2>
<!-- Grid container for project tiles -->
<div class="projects-grid">
<!-- ============================= -->
<!-- Project 1 Tile -->
<!-- ============================= -->
<div class="project-tile">
<!-- Embedded iframe showcasing the project -->
<iframe scrolling="no" title="Survey Form" src="https://codepen.io/Oscarmp7/embed/ZEgmyeq" frameborder="no" allowtransparency="true" allowfullscreen="true"></iframe>
<!-- Brief description of the project -->
<p><a>Survey Form</a><br>Brief description of project 1.</p>
</div>
<!-- ============================= -->
<!-- Project 2 Tile -->
<!-- ============================= -->
<div class="project-tile">
<iframe scrolling="no" title="Tribute Page" src="https://codepen.io/Oscarmp7/embed/qBeQjoE" frameborder="no" allowtransparency="true" allowfullscreen="true"></iframe>
<p><a>Tribute Page</a><br>Brief description of project 2.</p>
</div>
<!-- ============================= -->
<!-- Project 3 Tile -->
<!-- ============================= -->
<div class="project-tile">
<iframe scrolling="no" title="Technical Documentation Page" src="https://codepen.io/Oscarmp7/embed/zYgMzWV" frameborder="no" allowtransparency="true" allowfullscreen="true"></iframe>
<p><a>Technical Documentation Page</a><br>Brief description of project 3.</p>
</div>
<!-- ============================= -->
<!-- Project 4 Tile -->
<!-- ============================= -->
<div class="project-tile">
<iframe scrolling="no" title="Product Landing Page" src="https://codepen.io/Oscarmp7/embed/GRVwEBm" frameborder="no" allowtransparency="true" allowfullscreen="true"></iframe>
<p><a>Product Landing Page</a><br>Brief description of project 4.</p>
</div>
<!-- ============================= -->
<!-- Additional Projects -->
<!-- ============================= -->
<!-- Add more project tiles here as needed -->
</div>
</section>
<!-- ============================= -->
<!-- Contact Section -->
<!-- ============================= -->
<section id="contact" class="section">
<!-- Section heading -->
<h2>Contact Me</h2>
<!-- Container for contact information and form -->
<div class="contact-container">
<!-- Contact information section -->
<div class="contact-info">
<!-- Introductory paragraph -->
<p>Feel free to reach out for collaborations or just a friendly hello!</p>
<!-- Container for social media and contact icons -->
<div class="a-container">
<!-- Email icon linking to email address -->
<a id="profile-link" target="_blank" href="mailto:omatosperez851@gmail.com"><i class='bx bx-envelope' ></i></a>
<!-- WhatsApp icon linking to WhatsApp chat -->
<a target="_blank" href="https://wa.me/18095193586?text=Hi%20Oscar,%20I%20want%20more%20information"><i class='bx bxl-whatsapp' ></i></a>
<!-- LinkedIn icon linking to LinkedIn profile -->
<a target="_blank" href="https://www.linkedin.com/in/oscarmp7"><i class='bx bxl-linkedin' ></i></a>
<!-- GitHub icon linking to GitHub profile -->
<a href="https://github.com/Oscarmp7"><i class='bx bxl-github'></i></a>
</div>
</div>
<!-- Contact form section -->
<div class="contact-form">
<!-- Contact form with POST method -->
<form action="#" method="POST">
<fieldset>
<!-- Input field for name -->
<input type="text" name="name" placeholder="Your Name" required>
<!-- Input field for email -->
<input type="email" name="email" placeholder="Your Email" required>
<!-- Textarea for message -->
<textarea name="message" rows="5" placeholder="Your Message" required></textarea>
<!-- Submit button for the form -->
<button type="submit">Send Message</button>
</fieldset>
</form>
</div>
</div>
</section>
<!-- ============================= -->
<!-- Footer Section -->
<!-- ============================= -->
<footer class="footer">
<!-- Container for footer content -->
<div class="footer-content">
<!-- Copyright information -->
<p>© <span>2024</span> Oscar Matos. All rights reserved.</p>
</div>
</footer>
</body>
</html>
/* file: styles.css */
/* Basic reset styles */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');
* {
margin: 0; /* Removes default margin */
padding: 0; /* Removes default padding */
box-sizing: border-box; /* Ensures padding and border are inside the element's width and height */
font-family: 'Poppins', sans-serif;
scroll-behavior: smooth; /* Enables smooth scrolling */
}
/* Background color and text color */
body {
background-color: #081b29; /* Dark blue background color */
color: #ededed; /* white text color */
}
/* Contenedor principal para scroll-snap */
#main-container {
height: 100vh; /* Altura completa de la ventana */
min-height: 100vh; /* Altura mínima de cada sección */
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
/* Header container */
.header {
position: fixed; /* Keeps the container at the top */
top: 0; /* Aligns container at the very top */
left: 0; /* Aligns container at the very left */
width: 100%; /* Full width */
padding: 2rem 5%; /* Padding inside the container */
background-color: transparent; /* Transparent background for the container */
display: flex; /* Flexbox layout for aligning logo and navbar */
justify-content: space-between; /* Space between logo and navbar */
align-items: center; /* Center aligns items vertically */
z-index: 10; /* Ensures container stays on top of other elements */
}
/* Logo styling aligned to the left */
.logo{
font-size: 1.5rem; /* Font size for the logo */
color: #ededed; /* white color for the logo */
text-decoration: none;
font-weight: 500;
margin-left: 2%;
transition: 0.8s;
}
.logo:hover {
transform: scale(1.2)
}
/* Navbar Styling */
#navbar a {
color: #ededed; /* Text color */
text-decoration: none; /* Removes underline */
font-weight: bold; /* Bold text */
font-size: 18px; /* Size of the text lol */
transition: 0.5s; /* Smooth color transition on hover */
margin: 0 35px 0 10px; /* Margin of the Nav Bar */
padding: 10px; /* Margin of the Nav Bar */
}
#navbar a:hover {
box-shadow: 12px 12px 12px rgba(0, 0, 0, 0.5) inset, -5px -5px 5px #081b29 inset;
border-radius: 15%;
}
/* Styling for the header section (below the fixed header) */
#welcome-section {
height: 100vh; /* Full viewport height */
display: flex; /* Flex layout for centering */
align-items: center; /* Center content horizontally */
justify-content: flex-end;
flex-direction: row;
padding: 0 10%; /* Adds padding around content */
margin: 0 auto;
}
.home-content {
max-width: 600px;
z-index: 9;
}
#welcome-section h1 {
font-size: 56px;
font-weight: 700;
line-height: 1.1;
}
#welcome-section h2 {
font-size: 28px;
font-weight: 700;
color: #00abf0;
margin-top: 1rem;
}
#welcome-section p {
font-size: 16px;
margin: 20px 0 40px;
}
#welcome-section .btn-box {
width: 350px;
height: 50px;
display: flex;
justify-content: space-between;
}
span {
color: #00abf0;
font-style: italic;
font-weight: 700;
}
.btn-box a {
position: relative;
display: inline-flex;
justify-content: center;
align-items: center;
width: 150px;
height: 100%;
background: transparent;
border: 3px solid #00abf0;
border-radius: 8px;
font-size: 18px;
color: #00abf0;
text-decoration: none;
font-weight: 650;
z-index: 1;
overflow: hidden;
transition: .1s;
}
.btn-box a:hover {
color: #081b29;
box-shadow: 15px 15px 15px rgba(0, 0, 0, 1);
transform: scale(1.05);
}
.btn-box a::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 0;
background: #00abf0;
transition: .2s;
z-index: -1;
}
.btn-box a:hover::after {
height: 100%;
transform: scale(1.05);
}
.image-container {
display: flex; /* Flex layout */
justify-content: flex-end; /* Empuja la imagen hacia el lado derecho */
align-items: center; /* Centra verticalmente */
width: 100%; /* Ajusta el ancho del contenedor según sea necesario */
padding-left: 50px; /* Espacio entre la imagen y el borde izquierdo */
height: 100vh; /* Asegura que el contenedor ocupe toda la altura de la pantalla */
margin-right: 20px; /* Añade un poco de margen derecho */
opacity: 83%;
transition: 0.4s;
}
.image-container img {
max-width: 100%; /* Asegura que la imagen no sea más ancha que el contenedor */
height: auto; /* Mantiene la proporción de la imagen */
filter: brightness(0) invert(1);
}
.image-container:hover {
background: radial-gradient(circle, rgba(8,27,41,1) 50%, rgba(8,27,41,1) 60%);
opacity: .1;
z-index: 1;
transform: scale(0.8)
}
/* Styling for the projects section */
#projects {
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: 8rem;
}
#projects h2 {
font-size: 3rem;
color: #00abf0;
margin-bottom: 4rem;
box-shadow: 0px 0px 0px rgba(0, 0, 0, 1);
width: 100vw;
display: flex;
justify-content: center;
}
.projects-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(400px, 0.5fr));
padding: 2rem;
width: 100%;
margin: 0 auto;
height: 90%;
}
.project-tile {
box-shadow: 5px 0px 15px rgba(0, 0, 0, 1);
padding: 2rem;
border-radius: 10px;
text-align: center;
transition: transform 0.3s, box-shadow 0.3s;
margin: 2rem;
}
.project-tile iframe {
width: 100%;
height: 400px;
border-radius: 10px;
margin-bottom: 1rem;
}
.project-tile p {
color: #e0e0e0;
margin-top: 1rem;
}
.project-tile a {
font-weight: bold;
color: #bebebe;
}
.project-tile:hover {
transform: scale(1.02);
box-shadow: 40px 0 100px rgba(0, 120, 255, 0.3), -40px 0 100px rgba(0, 186, 255, 0.3);
}
/* Styling for the contact section */
#contact {
background-color: #081b29; /* Mismo color de fondo que el body */
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#contact h2 {
font-size: 2.5rem;
color: #00abf0;
margin-bottom: 2rem;
}
.contact-container {
display: flex;
flex-direction: row;
justify-content: center;
gap: 3rem;
flex-wrap: wrap;
width: 100%;
max-width: 1200px;
}
.contact-info {
flex: 1;
align-self: center;
min-width: 250px;
}
.contact-info p {
font-size: 1rem;
margin-bottom: 1.5rem;
text-align: center;
}
.contact-info a {
display: inline-flex;
justify-content: center;
position: relative;
align-items: center;
align-self: center;
width: 4rem;
height: 4rem;
background: transparent;
border: 2px solid #00abf0;
color:#00abf0;
border-radius: 50%;
font-size: 35px;
text-decoration: none;
margin: 0.8rem;
z-index: 1;
}
.contact-info a::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
translate: -50% -50%;
width: 0%;
height: 0;
border-radius: 50%;
overflow: hidden;
background-color: #00abf0;
z-index: -1;
transition: 0.2s;
}
.contact-info a:hover {
box-shadow: 40px 0 100px rgba(0, 120, 255, 0.3), -40px 0 100px rgba(0, 186, 255, 0.3);
transform: scale(1.1);
color: #081b29;
}
.contact-info a:hover::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
translate: -50% -50%;
width: 100%;
height: 100%;
border-radius: 50%;
padding: 3px;
overflow: hidden;
background-color: #00abf0;
z-index: -1;
}
.contact-info i:hover {
transform: scale(1.1);
}
.a-container {
display: flex;
justify-content: center;
align-items: center;
}
.contact-form {
flex: 1;
min-width: 250px;
padding: 15px;
}
.contact-form fieldset {
display: flex;
flex-direction: column;
gap: 1rem;
border: none;
border-radius: 15px;
background: #00141c;
position: relative;
padding: 2rem;
box-shadow: 5px 0px 15px rgba(0, 0, 0, 1)
}
.contact-form input,
.contact-form textarea {
padding: 0.75rem;
border: 2px solid #002838;
border-radius: 5px;
background-color: transparent;
color: #ededed;
font-size: 1rem;
resize: none;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder {
color: #ccc;
}
.contact-form button {
padding: 0.75rem;
border: none;
border-radius: 5px;
background-color: #005071;
color: #ccc;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: background-color 0.3s, transform 0.3s;
}
.contact-form button:hover {
box-shadow: 5px 0px 15px rgba(0, 111, 155, 1);
transform: scale(1.02);
}
/* ------------------------------------------------ */
/* -------------------- Footer -------------------- */
/* ------------------------------------------------ */
.footer {
background-color: #081b29;
color: #ededed;
padding: 1.5rem 5%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.footer-content {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
.footer-content p {
margin-bottom: 1rem;
font-size: 0.9rem;
}
/* ------------------------------- */
/* Media query for smaller screens */
/* ------------------------------- */
/* Media query for 1024px Laptop L */
@media (max-width: 1024px) {
.projects-grid {
grid-template-columns: repeat(1, 1fr); /* Two Columns */
gap: 2rem; /* space between column */
}
/* reduce the size by 10% */
.contact-container {
transform: scale(0.9);
}
.contact-info a {
width: 3.6rem; /* 4rem * 0.9 */
height: 3.6rem; /* 4rem * 0.9 */
font-size: 31.5px; /* 35px * 0.9 */
}
.contact-form {
transform: scale(0.9);
}
/* Opcional: Ajustar el padding y margin si es necesario */
.contact-container, .contact-form {
padding: 13.5px; /* 15px * 0.9 */
}
}
/* Responsividad para dispositivos móviles */
/* @media (max-width: 768px) */
@media (max-width: 768px) {
/* Apilar todos los campos del formulario en una sola columna */
.contact-form fieldset {
flex-direction: column;
gap: 1rem;
}
/* Disminuir el tamaño del image-container en un 50% */
.image-container {
width: 40%; /* 80% * 50% = 40% */
padding-left: 0.5rem; /* 1rem * 50% = 0.5rem */
margin-right: 10px; /* 20px * 50% = 10px */
}
/* Asegurar que el home-content no suba detrás del navbar */
#welcome-section {
padding-top: 4rem; /* Ajustar según la altura del navbar */
}
/* Hacer que el contact-form sea más ancho */
.contact-form {
width: 60%; /* Aumenta el ancho */
max-width: 600px; /* Aumenta el max-width */
}
/* Reducir el espacio de los <a> del #navbar */
#navbar a {
margin: 0 20px 0 5px; /* Reducir margen horizontal */
padding: 8px; /* Reducir padding */
font-size: 16px; /* Reducir tamaño de fuente si es necesario */
}
}
/* @media (max-width: 480px) */
@media (max-width: 480px) {
/* Simplificar el diseño eliminando elementos no esenciales */
/* Por ejemplo, ocultar elementos decorativos o imágenes adicionales */
.image-container {
display: none; /* Ocultar la imagen para ahorrar espacio */
}
/* Ajustar márgenes y paddings para maximizar el espacio */
#welcome-section {
padding: 0 2rem; /* Reducir el padding lateral */
justify-content: center; /* Centrar el contenido */
}
.home-content {
text-align: center;
}
.projects-grid {
margin: 0;
width: 100vw;
}
.project-tile iframe {
height: 15rem;
}
/* Apilar todos los campos del formulario en una sola columna */
.contact-form fieldset {
flex-direction: column;
gap: 1rem;
}
/* Disminuir el tamaño del contact-container */
.contact-container {
transform: scale(0.8);
}
/* Hacer que el contact-form sea aún más ancho */
.contact-form {
width: 90%;
max-width: none;
}
/* Reducir aún más el espacio de los <a> del #navbar */
.header #navbar {
margin-left: 0;
text-align: center;
width: 100%;
}
/* Opcional: Centrar el logo */
.header .logo {
display: none; /* Ocultar el navbar por completo */
}
@media (max-width: 480px) {
.header #navbar {
margin-left: 0;
padding: 0 1rem;
transform: scale(0.7);
}
.project-tile iframe {
height: 15rem;
}
#welcome-section {
padding: 0 2rem; /* Reducir el padding lateral */
justify-content: center; /* Centrar el contenido */
}
.home-content {
text-align: center;
}
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36
Challenge Information:
Personal Portfolio Webpage - Build a Personal Portfolio Webpage