Personal Portfolio Webpage - Build a Personal Portfolio Webpage

HTML-CSS
1

Tell us what’s happening:

I need support on media query for building personal portfolio page!

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en"></html>
<head><meta class="UTF-8"></meta><meta name="viewport" content="width=device-width, initial=scale=1.0"></meta><title>Welcome to Portfolio</title><link rel="stylesheet"> href="./styles.css"></link></head><body><welcome-section id="welcome-section"><h1>Personal Portfolio Page</h1><projects id="projects"><div class="project-tile"></div><a href=""></a></projects>
<navbar id="navbar"><a href="#" id="profile-link" target="_blank"></a></navbar></body>

/* file: styles.css */
body {
font-size: 18px;
}
@media screen and (max-width: 780px){
 #navbar { 
  height: 100vh; 
 welcome-section {
  height: 100vh;
  padding: 20px;
 }
}
.navbar {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
}
.portfolio-item {
  width: 100%;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/132.0.0.0 Safari/537.36 Edg/132.0.0.0

Challenge Information:

Personal Portfolio Webpage - Build a Personal Portfolio Webpage

2

Se for um ID precisa do #

3

That’s incomplete css selector breaking the at-media rule. It’s missing # sign before selector name and also missing it’s closing bracket }

1 Like
4

you should use conventional formatting for your html, it’s really difficult to read. But here you are missing the path