Tell us what’s happening:
I am having an issue with my last project, on the new website where I am supposed to write the code, is saying I still need to add at least 1 media query but I have more than one media query in my CSS code, and also that of #nav should be at the top of the viewpoint, my navbar is already at the top of the viewpoint. The same code is marked complete on code.io, but your new platform is not marking these two points as correct, so I am confused.
Your code so far
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"/>
<link
href="https://fonts.googleapis.com/css?family=Poppins:200i,300,400&display=swap"
rel="stylesheet"/>
<link
href="https://fonts.googleapis.com/css?family=Roboto&display=swap"
rel="stylesheet"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<body>
<nav id="navbar" class="bar">
<ul class="bar-list">
<li><a href="#welcome-section">About</a>
</li>
<li><a href="#projects">My Work</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
<section id="welcome-section" class="welcome-section">
<h1>Hey, I am Paul Garuba O</h1>
<p>a computer programmer</p>
</section>
<section id="projects" class="project-section">
<h2 class="project-section-header"> some of my Projects</h2>
<div class="project-grid">
<a href="https://codepen.io/goshp/full/abEjNXq" target="_blank" class="project project-tile">
<img class="project-image" src="https://static01.nyt.com/images/2013/03/23/arts/23ACHEBE2/23ACHEBE2-jumbo.jpg?quality=75&auto=webp" alt="project">
<p class="project-title">
<span class="code"><</span>
" Tribute Page "
<span class="code"><</span>
</p>
</a>
<a href="https://codepen.io/goshp/full/xxpQEZJ" target="_blank" class="project project-tile">
<img class="project-image" src="https://i.pinimg.com/236x/92/7b/bf/927bbf03913430830bfe0a2541324409.jpg"
alt="Gender Equality Survey Form">
<p class="project-title">
<span class="code"><</span>
" Survey Form "
<span class="code"><</span>
</p>
</a>
</div>
<a href="https://codepen.io/goshp" class="btn btn-show-all" target="_blank">
Show all works
</a>
</section>
<section id="contact" class="contact-section">
<div class="contact-section-header">
<h2>Hope to work with you</h2>
<p>how pretty is the life of a dev?</p>
</div>
<div class="contact-link">
<a id="profile-link" href="https://github.com/goshp" target="_blank" class="btn contact-infos">
<i class="fab fa-github"></i> GitHub </a>
</div>
</section>
:root {
--main-white: #f0f0f0;
--main-red: #be3144;
--main-blue: #45567d;
--main-gray: #303841;
}
* {
margin: 0;
padding: 0;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
html {
box-sizing: border-box;
font-size: 60.5%;
scroll-behavior: smooth;
}
@media (max-width: 75em) {
html {
font-size: 60%;
}
}
/* 980px / 16px = 61.25em */
@media (max-width: 61.25em) {
html {
font-size: 58%;
}
}
@media (max-width: 28.75em) {
html {
font-size: 55%;
}
}
body {
font-family: 'Poppins', sans-serif;
font-size: 1.6rem;
font-weight: 400;
line-height: 1.4;
color: var(--main-white);
}
h1,
h2 {
font-family: 'Raleway', sans-serif;
font-weight: 700;
text-align: center;
}
h1 {
font-size: 6rem;
}
h2 {
font-size: 4.2rem;
}
a {
text-decoration: none;
color: var(--main-white);
}
img {
display: block;
width: 100%;
}
/* nav */
.bar {
display: flex;
justify-content: flex-end;
position: fixed;
top: 0;
left: 0;
width: 200%;
background: var(--main-red);
box-shadow: 0 2px 0 rgba(0, 0, 0, 0.4);
z-index: 10;
}
.bar-list {
display: flex;
margin-right: 2rem;
}
ul {
list-style: none;
}
@media (max-width: 28.75em) {
.bar {
justify-content: center;
}
.bar-list {
margin: 0 1rem;
}
}
.bar-list a {
display: block;
font-size: 2.2rem;
padding: 2rem;
}
.bar-list a:hover {
background: var(--main-blue);
}
.welcome-section {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
background-color: #000;
background-image: linear-gradient(62deg, #3a3d40 0%, #181719 100%);
}
.welcome-section > p {
font-size: 3rem;
font-weight: 200;
font-style: italic;
color: var(--main-red);
}
.project-section {
text-align: center;
padding: 10rem 2rem;
background: var(--main-blue);
}
.project-section-header {
max-width: 640px;
margin: 0 auto 6rem auto;
border-bottom: 0.2rem solid var(--main-white);
}
.project {
background: var(--main-gray);
box-shadow: 1px 1px 2px rgb(0 0 0 / 50%);
border-radius: 2px;
}
.project-image {
height: calc(100% - 6.8rem);
width: 100%;
object-fit: cover;
}
img {
display: block;
width: 100%;
}
.project-title {
font-size: 2rem;
padding: 2rem 0.5rem;
}
.code {
color: var(--main-gray);
transition: color 0.3s ease-out;
}
.project-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
grid-gap: 3rem;
width: 100%;
max-width: 1200px;
margin: 0 auto;
margin-bottom: 6rem;
}
.fa-chevron-right:before {
content: "\f054";
}
*, *::before, *::after {
box-sizing: inherit;
}
.btn-show-all {
font-size: 2rem;
background: var(--main-gray);
transition: background 0.3s ease-out;
}
.btn-show-all > i {
margin-left: 10px;
transform: translateX(0);
transition: transform 0.3s ease-out;
}
.fa, .fas {
font-weight: 900;
}
.btn {
display: inline-block;
padding: 1rem 3rem;
border-radius: 1px;
}
.contact-section {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
width: 100%;
height: 80vh;
padding: 0 2rem;
background: var(--main-gray);
}
.contact-section-header > h2 {
font-size: 5rem;
padding: 1 2rem
}
h2 {
display: block;
font-size: 1.5em;
margin-block-start: 0.83em;
margin-block-end: 0.83em;
margin-inline-start: 0px;
margin-inline-end: 0px;
font-weight: bold;
}
p {
display: block;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
padding: 0px;
}
.contact-link {
display: flex;
justify-content: center;
width: 100%;
max-width: 980px;
margin-top: 4rem;
flex-wrap: wrap;
}
.fab {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
line-height: 1;
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/101.0.0.0 Safari/537.36
Challenge: Build a Personal Portfolio Webpage
Link to the challenge: