Tell us what’s happening:
This is what I’m having problem with:
(Your portfolio should use at least one media query)…I have used one media query actually but I don’t know why its not passing…
The second issue:
( Your #navbar element should always be at the top of the viewport.)…
My navbar is actually at the top of the viewport…
Please I need help
Your code so far
WARNING
The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.
You will need to take an additional step here so the code you wrote presents in an easy to read format.
Please copy/paste all the editor code showing in the challenge from where you just linked.
<!DOCTYPE html>
<html lang="en">
<html>
<head>
<title>My PortFolio</title>
<link rel="http://fonts.googleapis.com/css?family=Merienda+One" href="stylesheet"/>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<header id="nav-header">
<section id="container"> </section>
<nav id="navbar" class="nav-link">
<a class="nav-link" href="#Home">Home</a>
<a class="nav-link" href="#projects">Project</a>
<a class="nav-link" href="#About">About</a>
<a class="nav-link" href="#skills">Skills</a>
<a class="nav-link" href="#contact">Contact</a>
</nav>
<section id="welcome-section">
<h1>Hello! This is</h1>
<h2>Zionnaire Inc</h2>
<h3>Frontend Developer</h3>
<p>Our Designs are Esthetically Beautiful</p>
<p>We Love Communicating and Respect Feedbacks</p>
<a href="tel:+2347067036335"><button class="section-btn">Hire Us</button></a>
<div class="stickyicon-list">
<a href="https://twitter.com/zionnaire1" class="twitter" target="_blank">
<i class="fa fa-twitter"></i>
</a>
<a href="https://www.linkedin.com/in/ademola-abraham" class="linkedin" target="_blank">
<i class="fa fa-linkedin"></i>
</a>
<a href="https://github.com/Zionnaire" class="github" target="_blank">
<i class="fa fa-github"></i>
</a>
</div>
</section>
</header>
</section>
<section id="projects" class="projects-section">
<h2 class="projects-header">These are some of my projects</h2>
<div class="projects-grid">
<a href="https://codepen.io/Zionnaire/pen/GRQZZLR" target="_blank" class="project-title">
<img class="project-image" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/tribute.jpg" alt="project">
<p class="project-tile">
<span class="code">Tribute Page</span>
</p>
</a>
<a href="https://codepen.io/Zionnaire/pen/GRQZZLR" target="_blank" class="project-title">
<img class="project-image" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png" alt="project">>
<p class="project-tile">
<span class="code">Random Quote Machine</span>
</p>
</a>
<a href="https://codepen.io/Zionnaire/pen/GRQZZLR" target="_blank" class="project-title">
<img class="project-image" src="img/Tutorial_documentation.JPG" alt="project">>
<p class="project-tile">
<span class="code">JavaScript Documentation</span>
</p>
</a>
<a href="https://codepen.io/Zionnaire/pen/GRQZZLR" target="_blank" class="project-title">
<img class="project-image" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/tic-tac-toe.png" alt="project">>
<p class="project-tile">
<span class="code">Tic Tac Toe Game</span>
</p>
</a>
<a href="https://github.com/Zionnaire" class="btn-show-all" target="_blank">
"Show all"
<i class="fas fa-chevron-right">
::before
</i>
</a>
</section>
<section id="profile" class="profile-section">
<div class="profile-section-header">
<blockquote>
Come let make you beautiful design
you'll love to call yours.
</blockquote>
<p>Hope you're having a beautiful day?</p>
</div>
</section>
<section id="profile">
<a id="profile-link" href="https://twitter.com/zionnaire1" target="_blank" class="btn profile-details">
<i class="fab fa-twitter">
Twitter
</i>
</a>
<a id="profile-link" href="https://github.com/Zionnaire" target="_blank" class="btn profile-details">
<i class="fab fa-github">
GitHub
</i>
</a>
<a id="profile-link" href="mailto:zionnaire2018@gmail.com" class="btn profile-details">
<i class="fas fa-at">
Send a mail
</i>
</a>
<a id="profile-link" href="tel:+2347067036335" class="btn profile-details" target="_blank">
<i class="fas fa-mobile-alt">
Call Us
</i>
</a>
</section>
<footer>
<p> Zionnaire Concepts</p>
<address>Zionnaire Plaza, Hilton Drive, Houston,
23458; Crescents Creek.
</address>
</footer>
</body>
</html>
</html>
Replace these two sentences with your copied code.
Please leave the ``` line above and the ``` line below,
because they allow your code to properly format in the post.
body {
display: block;
text-align: center;
}
@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
#nav-header{
display: block;
background-image: url("img/6.jpg");
background-attachment: scroll;
background-repeat: no-repeat;
background-color: white;
background-size: 100% 90vh;
border: solid #530A45 60px;
text-align: left;
padding-left: 30px;
height: 90vh;
}
@media screen and (width: 400px) {
#nav-header {
margin: auto;
height: 100%;
width: 100%;
}
}
@media screen and (max-width: 815px) {
#nav-header {
position: inherit;
top: 0;
margin: 0;
max-height: 100%;
border-bottom: 40px solid#530A45 ;
}
}
#navbar {
text-decoration: none;
text-align: right;
}
.nav-link {
background-color: whitesmoke;
position: relative;
font-size: 1.5rem;
text-decoration: none;
margin: -60px px;
padding: 10px;
}
.nav-link:hover {
color: goldenrod;
}
section {
margin: auto;
text-align: center;
}
#welcome-section {
margin: -30px 0 20px ;
color: whitesmoke;
text-align: center;
display: block;
margin: 180px 40px;
font-size: 1.5rem;
}
.section-btn {
padding: 20px;
text-transform: uppercase;
border: solid#530A45 5px;
border-radius: 10px;
font-size: large;
font-family: Arial, Helvetica, sans-serif;
background-color: whitesmoke;
}
#projects {
display: flex;
flex-direction: row;
align-items: center;
}
.nav {
display: flex;
position: fixed;
top: 0;
left: 0;
width: 100%;
background: var(--main-red);
box-shadow: 0 2px 0 rgb(0 0 0 / 40%);
z-index: 10;
}
.nav-header {
}
#container {
background-image: linear-gradient(right, #094453 50%, #530a45 50%);
}
#container h1 {
}
img {
display: block;
width: 400px;
box-shadow: 0 2px 0 rgb(0 0 0 / 40%);
border: solid #530A45 3px;
margin: 20px auto;
}
a {
color: blueviolet;
text-decoration: none;
}
.section-btn:hover {
color: goldenrod;
}
.stickyicon-list {
position: fixed;
top: 200px;
transform: translateY(-50%);
}
.stickyicon-list a {
display: block;
text-align: center;
padding: 8px;
transition: all 0.5s ease;
color: white;
font-size: 20px;
margin-left: -90px;
}
.stickyicon-list a:hover {
color: #000;
width: 10px;
}
.twitter {
color: white;
background: #530A45;
}
.linkedin {
background: #0e76a8;
color: white;
}
.github {
color: white;
background: #530A45;
}
footer{
background-color: #530A45;
display: block;
text-align: center;
padding: 0;
margin: 0;
font-size: 1rem;
width: 100%;
position: relative;
}
footer p{
padding: 5px 0;
margin: 10px 0 20px 0;
}
address {
margin-top: -15px;
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/101.0.4951.67 Safari/537.36
Challenge: Build a Personal Portfolio Webpage
Link to the challenge:
