My Portfolio project is not passing these two in Freecodecamp:
- Your portfolio should use at least one media query.
- Failed:Your
#navbarelement should always be at the top of the viewport.
But I do have them. Please help me I need to pass by today so that I can get my certificate.
body {
background-color: #B9D9EB;
}
.foot {
text-align: center;
font-size: 30px;
color: #E30B5C;
font-family: ‘Dancing Script’, cursive;
margin-top: 95px;
margin-bottom: 15px;
}
<div id="navbar">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="#portfolio">My Portfolio</a></li>
<li><a href="aboutme.html">About Me</a></li>
</ul>
</div>
Welcome to my Portfolio
Welcome to my portfolio, my name is Arcy. Here are my recent and pasted projects and activities I have done in my classes COSW 20 & COSW 10. I am also including a link to all my work I've done in freeCodeCamp, so you can see all the CSS challenges. In freecodecamp I built a Cat Photo App, Survey form, Photo Gallery, and much more. All the while learning how to use Bootstrap, CSS Grid, CSS Pseudo Selectors, and CSS Transforms.
<h2 id="portfolio">My Project's</h2>
</section>
<section id="projects">
<div class="grid" id="hearts">
<article class="project-tile grid-item alice1">
<a href="https://codepen.io/ArcyZ/pen/yLxaoNz" target="_blank"><img src="surveyform.png" class=""></a>
<p>For our first project in class we had to create a responsive survey form. In which I had needed to have id's in my HTML and CSS. I made my survey form based on a dating form for an app.</p>
</article>
<article class="grid-item alice2">
<a href="https://codepen.io/ArcyZ/pen/dyqmMOo" target="_blank"><img src="tributepage.png"></a>
<p>The Tribute Page had to do with paying a tribute to a famous person, and I chose Michael Phils. I needed to include headings, divs, paragraphs, hyperlinks, and images.</p>
</article>
<article class="grid-item alice3">
<a href="https://codepen.io/ArcyZ/pen/oNPrYWQ" target="_blank"><img src="technicaldocument.png"></a>
<p>Now this project I really enjoyed, because it I chose do it on MIT APP. Which is a class I'm taking now. In this project I had to include media queries, Flexbox or Bootstrap, it needed to be screen responsive, id's, divs.</p>
</article>
<article class="grid-item alice4">
<a href="https://replit.com/@Poopie4/Alice-in-Wonderland" target="_blank"><img src="alice2.png"projects"></a><p>
This is one of my favorite projects I had to do. I had three chapters I had to break down into paragraphs add images with titles, a navigation bar, divs and classes. I really liked the way this projects turned out.
</p>
</article>
<article class="grid-item alice5">
<a href="https://codepen.io/ArcyZ/pen/xxypzmz?editors=1100" target="_blank"><img src="productlanding.png"></a>
<p>The Product Landing Page project had to do with me choosing a product I wanted to build a web page on. I chose Ray-Ban Sunglasses. In this project I needed to include CSS Flexbox, use media queries, a fixed navigation menu and have an embedded video.</p>
</article>
<article class="grid-item alice6">
<a href="https://replit.com/@Poopie4/My-Favorite-State#index.html" target="_blank"><img src="FavoriteCity.png"></a>
<p>I made this project when I had to make a website of my favorite city, I choiced New York City. I find New York City to being so awesome, you got people from all over the world and their cultures. Besides all the great places you can visit and all the great restaurants.</p>
</article>
</div>
<h3 id="michael">Activities</h3>
This was my first activity I did for my COSW 20 class. I had a choice of a poem or lyrics from a song, I had to rewrite the paragraph's using tags). I also had to make it into a whole web page, using H1 tag, hyperlinks, and adding image.
<article class="grid-item activity">
<a href="https://codepen.io/ArcyZ/pen/zYJGQBp" target="_blank"><img src="activity2.png"></a>
<p>In this activity 2 we had to demonstrate our understanding of HTML & CSS, by creating a web page of a National Holiday. I choose World Cancer Day.</p>
</article>
<article class="grid-item activity">
<a href="https://replit.com/@Poopie4/Lab-Activity-3-Arcy" target="_blank"><img src="activity3.png"></a>
<p>In this activity I work from a template, the template is a fast food restaurant menu. And I had to make it using CSS Flexbox. I think it looks great!</p>
</article>
<article class="grid-item activity">
<a href="https://replit.com/@Poopie4/Lab-8-COSW10" target="_blank"><img src="nycity.png"></a>
<p>New York City was a lab activity also that I did showing how to use transitions & filters & Tricks. Such as Opacity, Hover layout. Since I love New York that is why I choice to do this lab on this city.</p>
</article>
<article class="grid-item activity">
<a href="https://codepen.io/ArcyZ/pen/OJBMozK" target="_blank"><img src="bootstrap.png"></a>
<p>This is a Bootstrap template where I had to edit the CSS, like adding content, changing colors. It was all so I can get an understanding of the things I could do with Bootstrap.</p>
</article>
<article class="grid-item activity">
<a href="https://codepen.io/ArcyZ/pen/rNqzOEW" target="_blank"><img src="cssgrid.png"></a>
<p>Activity 5, had to do with CSS Grid image style layout. I had to add google fonts, add and style the footer, create a special image format. This was to understand how CSS Grid works with images.</p>
</article>
</div>
</div>
© My Professional Portfolio by Arcy for COSW 20 - June 2023
WARNING * { margin: 0; padding: 0; box-sizing: border-box; } #navbar { display: flex; position: fixed; font-size: 35px; font-family: 'Arizonia', cursive; top: 0; left: 0; }#navbar a:hover {
color: black;
}
#welcome-section {
height: 100vh;
}
#welcome-section h1 {
font-size: 5rem;
text-align: center;
font-family: ‘Dancing Script’, cursive;
margin: 75px 30px 50px 30px;
padding-top: 50px;
color: #0B035A;
transition: font-size s3 ease-out 2;
}
#welcome-section h1:hover {
cursor: pointer;
font-size: 3em;
color: purple;
}
#welcome-section p {
font-size: 1.5rem;
margin: 30px 110px 30px 110px;
padding: 1.5em;
font-family: ‘Dancing Script’, cursive;
text-align: left;
}
ul {
margin-top: 30px
}
li {
display: inline;
font-family: ‘Dancing Script’, cursive;
}
li a {
text-decoration: none;
color: #C21E56;
margin: 0px 25px 40px 30px;
padding-bottom: 30px;
}
@media only screen and (max-width: 400px) {
#hearts {
display: grid;
grid-gap: 15px;
grid-template-columns: repeat(1, minmax(100px, 23rem));
justify-content: left;
grid-template-areas: alice1
alice2
alice3
alice4
alice5
alice6;
margin: 10px 60px 10px 110px;
padding: 5px 0 0 30px;
}
}
#hearts {
display: grid;
grid-gap: 15px;
grid-template-columns: repeat(3, minmax(100px, 23rem));
justify-content: left;
grid-template-areas: alice1 alice2 alice3 alice4 alice5 alice6;
margin: 10px 60px 10px 110px;
padding: 5px 0 0 30px;
}
#burger {
display: grid;
grid-gap: 15px;
grid-template-columns: repeat(3, minmax(100px, 23rem));
grid-auto-flow: dense;
justify-content: left;
margin: 10px 60px 10px 110px;
padding: 5px 0 0 30px;
}
#hearts p {
font-family: ‘Dancing Script’, cursive;
text-align: left;
font-size: 23px;
margin: 5px 40px 40px 0px;
padding: 0 20px 5px 0;
}
.activity p {
font-family: ‘Dancing Script’, cursive;
margin: 5px 40px 40px 0px;
padding: 0 20px 5px 0;
text-align: left;
font-size: 23px;
}
.grid-item {
justify-self: stretch;
}
#about h1 {
font-family: ‘Dancing Script’, cursive;
text-align: center;
margin: 100px 40px 50px 40px;
padding: 10px;
font-size: 40px;
color: #7B3F00;
}
.me {
margin: 60px 115px 50px 115px;
padding: 30px;
font-family: ‘Dancing Script’, cursive;
font-size: 25px;
text-align: left;
color:#C04000;
background-color: #FFFDD0;
}
#michael {
text-align: center;
font-family: ‘Arizonia’, cursive;
color: #6C3082;
font-size: 55px;
padding: 1em;
margin: 1.5em;
}
#portfolio {
padding: 1.5em;
margin: 2em;
font-size: 50px;
font-family: ‘Arizonia’, cursive;
text-align: left;
color: deeppink;
}
img {
border: solid #0B035A;
border-radius: 30%;
}