Tell us what’s happening:
The challenge is asking that my portfolio should contain at least one element with a class of project-tile . I tried adding a the class of “project-tile” but it doesn’t work. Can someone please help me?
Your code so far
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portfolio website</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<!--Hero Section Start-->
<div class="hero">
<nav id="navbar">
<h2 class="logo">N<span>RR</span></h2>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact_me">Contact Me</a></li>
</ul>
<a href="#projects" class="btn">Projects</a>
</nav>
<div class="container-1">
<div class="cloud">
<img src="https://raw.githubusercontent.com/SAHEB24027824/css_fun_cloud_effect/main/images/cloud1.png" alt="" style="--i:1">
<img src="https://github.com/SAHEB24027824/css_fun_cloud_effect/blob/main/images/cloud2.png?raw=true" alt="" style="--i:2">
<img src="https://github.com/SAHEB24027824/css_fun_cloud_effect/blob/main/images/cloud3.png?raw=true" alt="" style="--i:3">
<img src="https://raw.githubusercontent.com/SAHEB24027824/css_fun_cloud_effect/main/images/cloud4.png" alt="" style="--i:4">
<img src="https://github.com/SAHEB24027824/css_fun_cloud_effect/blob/main/images/cloud5.png?raw=true" alt="" style="--i:5">
<section id="welcome-section">
<div class="content">
<h4>Hello, my name is</h4>
<h1>I'm <span class="auto-input"></span><span></span></h1>
<h3>I design websites to help businesses do <br>better online</br></h3>
<div class="newsletter">
</div>
</section>
</div>
</div>
</div>
<div class="box">
<span></span>
<span></span>
<span></span>
</div>
<!--About Section Start-->
<section class="about" id="about">
<div class="main">
<img
src="https://lh3.googleusercontent.com/8DLpxcJBcikupmAyjytVMMc8_6M7I-b5A-ALAs3iziIECzqrjE1suKumLoCl2UfrFqcH1QZuJESdv_rC6SS4_NSVhiw-sTOtN7svE99PTOT5qqnrc_iwEaqB-qjDZBpaJwmdrp_VmQ=w2400">
<div class="about-text">
<h2>About Me</h2>
<h5>Developer <span>& Designer</span></h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vitae blandit diam, sed accumsan mauris. Fusce scelerisque massa mauris, a sagittis tellus commodo et. Integer condimentum justo eget justo vestibulum, sit amet luctus risus malesuada. Praesent suscipit sed est nec ultricies. Aenean condimentum mi et dictum suscipit. Nullam sed lorem eget tellus fermentum consectetur eu eget quam. In eget purus metus.</p>
<button type="button">Let's Talk</button>
</div>
</div>
</section>
<!--Projects Section Starts-->
<div class="service">
<div class="title">
<h2>Recent Projects</h2>
</div>
<section class="projects" id="projects" >
<div class="projects-container">
<div class="project-container project-card" class="project-tile">
<img
src="https://lh3.googleusercontent.com/OEImJIXcxxWuBY72Go_uJsdSNoZ97deVvZC5P-l0fJmBu9Vkupto-nObUMyrFZWi-tL5zI5og0SLlrjTce_Sw7KsfYCe9OAjSoFyRvoYbTAOm-6xjLfY4cr31OGndTt2sw4J72jShg=w2400"
alt="survey-form"
loading="lazy"
class="project-pic"
/>
<h3 class="project-title" > Codeify Survey Form</h3>
<p class="project-details">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quas
ratione vel inventore labore commodi modi quos culpa aut saepe!
Alias!
</p>
<a href="https://codepen.io/Rochelle18/full/NWYEqGd" target="_blank" class="project-link">Check it Out</a>
</div>
<div class="project-container project-card" class="project-tile">
<img
src="https://lh3.googleusercontent.com/OhQmICgDOXG9ALHHYaMwnTnJaXPlLgZlIRMKdUiSTKA3F_-6-NOdSz2DZELO2OM3WSveuVRX0-sQmErpBXkklNZ6J7HVttexyYzIBty7h9A2gGrmLlOgfGzpQNsDyUzlH8bYNmqUkA=w2400"
alt="blackpink-tribute-page"
loading="lazy"
class="project-pic"
/>
<h3 class="project-title" >BlackPink Tribute Page</h3>
<p class="project-details">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quas
ratione vel inventore labore commodi modi quos culpa aut saepe!
Alias!
</p>
<a href="https://codepen.io/Rochelle18/full/LYmxjbQ" target="_blank" class="project-link">Check it Out</a>
</div>
<div class="project-container project-card" class="project-tile">
<img
src="https://lh3.googleusercontent.com/16zTG9hi4oGawRVT--N2o4ir1hJtHZ4FjxhlbcOaqHHY-ieooktYFDFpehZjXq6R1IyL57fhzLE0oPV2GVLhNnBHDdyqFGuQLqqpPSinKNGaPNTO0pKp155rBSayAOaCmjrnRobgqQ=w2400"
alt="how-to-start-a-motorcycle"
loading="lazy"
class="project-pic"
/>
<h3 class="project-title" >How to Start a Motorcycle</h3>
<p class="project-details">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quas
ratione vel inventore labore commodi modi quos culpa aut saepe!
Alias!
</p>
<a href="https://codepen.io/Rochelle18/full/VwxNwmK" target="_blank" class="project-link">Check it Out</a>
</div>
</div>
</section>
</div>
<!------Contact Me------>
<div class="contact-me" id="contact_me">
<h3>Contact Me</h3>
<p><i class="fa fa-map-marker fa-fw w3-xxlarge w3-margin-right"></i> Gauteng, South Africa</p>
<p><i class="fa fa-envelope fa-fw w3-xxlarge w3-margin-right"> </i> Email: nompumelelorochelledube@gmail.com</p>
<p>Lets get in touch. Send me a message:</p>
<div class="contact-form">
<form action="/action_page.php" target="_blank">
<p><input class="w3-input w3-padding-16 w3-border" type="text" placeholder="Name" required name="Name"></p>
<p><input class="w3-input w3-padding-16 w3-border" type="text" placeholder="Email" required name="Email"></p>
<p><input class="w3-input w3-padding-16 w3-border" type="text" placeholder="Subject" required name="Subject"></p>
<p><textarea
id="message"
cols="60"
rows="10"
placeholder="Enter Your Message"
name="message"
class="input-field"
required
></textarea></p>
<p>
<button class="w3-button w3-light-grey w3-padding-large" type="submit">
<i class="fa fa-paper-plane"></i> SEND MESSAGE
</button>
</p>
</form>
</div>
<!-- End Contact Section -->
</div>
<!------footer start--------->
<footer>
<p>Nompumelelo Dube</p>
<p>For more HTML, CSS projects - please click the links below to view, like, leave a comment and connect</p>
<div class="social">
<a href="https://www.freecodecamp.org/NompumeleloRochelleReginahDube" id="profile-link" target="_blank"><i class="fab fa-free-code-camp"></i></a>
<a href="https://www.linkedin.com/in/nompumelelo-dube-67957820b/" id="profile-link" target="_blank"><i class="fab fa-linkedin"></i></a>
<a href="#" id="profile-link" target="blank"><i class="fab fa-github"></i></a>
<a href="https://codepen.io/Rochelle18/pens/public" id="profile-link" target="blank"><i class="fab fa-codepen" ></i></a>
</div>
<p class="end">CopyRight By Tahmid Ahmed</p>
</footer>
<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12"></script>
<script>
var typed = new Typed(".auto-input", {
strings: ["Nompumelelo Dube", "Web Developer", "UI Designer"],
typeSpeed: 100,
backSpeed: 100,
loop: true,
})
</script>
</body>
</html>
<style>
*{
padding: 0;
margin: 0;
font-family: 'Josefin Sans', sans-serif;
box-sizing: border-box;
}
.hero{
height: 100vh;
width: 100%;
background-image: url(https://c1.wallpaperflare.com/preview/799/669/78/moon-sky-night-sky.jpg);
background-size: cover;
background-position: center;
}
nav{
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 45px;
padding-left: 8%;
padding-right: 8%;
}
#navbar{
position: fixed;
}
.logo{
color: white;
font-size: 35px;
letter-spacing: 1px;
cursor: pointer;
}
span{
color: #f9004d;
}
nav ul li{
list-style-type: none;
display: inline-block;
padding: 10px 25px;
}
nav ul li a{
color: white;
text-decoration: none;
font-weight: bold;
text-transform: capitalize;
}
nav ul li a:hover{
color: #f9004d;
transition: .4s;
}
.btn{
background-color: #f9004d;
color: white;
text-decoration: none;
border: 2px solid transparent;
font-weight: bold;
padding: 10px 25px;
border-radius: 30px;
transition: transform .4s;
}
.btn:hover{
transform: scale(1.2);
}
.content{
position: absolute;
top: 50%;
left: 8%;
transform: translateY(-50%);
}
h1{
color: white;
margin: 20px 0px 20px;
font-size: 75px;
}
h3{
color: white;
font-size: 25px;
margin-bottom: 50px;
}
h4{
color: white;
letter-spacing: 2px;
font-size: 20px;
}
.newsletter form{
width: 380px;
max-width: 100%;
position: relative;
}
.newsletter form input:first-child{
display: inline-block;
width: 100%;
padding: 14px 130px 14px 15px;
border: 2px solid #f9004d;
outline: none;
border-radius: 30px;
}
.newsletter form input:last-child{
position: absolute;
display: inline-block;
outline: none;
border: none;
padding: 10px 30px;
border-radius: 30px;
background-color: #f9004d;
color: white;
box-shadow: 0px 0px 5px #000, 0px 0px 15px #858585;
top: 6px;
right: 6px;
}
/*Clouds*/
.container-1{
width: 100%;
height: 100vh;
}
.cloud{
overflow: hidden;
}
.cloud img{
animation: cld calc(8s * var(--i)) linear infinite;
opacity: .6;
max-width: 100%;
position: absolute;
bottom: 0px;
}
@keyframes cld{
0%{
transform: translateX(-100%);
}
100%{
transform: translateX(100%);
}
}
/*Scroll Button*/
.box{
position: absolute;
top: 85%;
left: 50%;
transform: translate(-50%,-50%);
}
.box span{
display: block;
width: 30px;
height: 30px;
border-bottom: 5px solid #000;
border-right: 5px solid #fff;
transform: rotate(40deg);
margin: -10px;
animation: animate 2s infinite;
}
.box span:nth-child(2){
animation-delay: -0.2s;
}
.box span:nth-child(3){
animation-delay: -0.4s;
}
@keyframes animate{
0%{
opacity: 0;
transform: rotate(45deg) translate(-20px, -20px);
}
50%{
opacity: 1;
}
100%{
opacity: 0;
transform: rotate(45deg) translate(20px, 20px);
}
}
.about{
width: 100%;
padding: 100px 0px;
background-color: #191919;
}
.about img{
height: auto;
width: 430px;
}
.about-text{
width: 550px;
}
.main{
width: 1130px;
max-width: 95%;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-around;
}
.about img{
height: 50%;
}
.about-text h2{
color: white;
font-size: 75px;
text-transformation: capitalize;
margin-bottom: 20px;
}
.about-text h5{
color: white;
letter-spacing: 2px;
font-size: 22px;
margin-bottom: 25px;
text-transformation: capitalize;
}
.about-text p{
color: white;
letter-spacing: 1px;
line-height: 28px;
font-size: 18px;
margin-bottom: 45px;
}
button{
background-color: #f9004d;
color: white;
text-decoration: none;
border: 2px solid transparent;
font-weight: bold;
padding: 13px 30px;
border-radius: 30px;
transition: .4s;
}
button:hover{
background-color: transparent;
border: 2px solid #f9004d;
cursor: pointer;
}
.title h2{
color: white;
font-size: 75px;
width: 1130px;
margin: 30px auto;
text-align: center;
}
/*correct project section*/
.service{
background: #101010;
width: 100%;
padding: 100px 0px;
}
.title h2{
color: white;
font-size: 75px;
width: 1130px;
margin: 30px auto;
text-align: center;
}
.projects {
background-color: #101010;
padding: 32px 0;
margin-top: 2rem;
}
.project-pic {
width: 65%;
height: 60%;
}
.projects-container {
display: flex;
align-items: center;
justify-content: center;
}
.projects-title {
text-align: center;
margin-bottom: 1rem;
color: #000;
}
.project-title{
color: #000;
font-size: 18px;
font-family: 'Josefin Sans', sans-serif;
padding-top: 3px;
}
.project-container {
text-align: center;
width: 21.875rem;
padding: 1rem;
}
.project-container p {
padding: 0.4rem;
}
.project-title {
margin-bottom: 0.5rem;
}
.project-details {
margin-bottom: 0.5rem;
}
.project-link{
text-decoration: none;
}
.project-link h3{
font-size: 7px;
}
.project-link{
background-color:#f9004d;
color: white;
text-decoration: none;
border: 2px solid transparent;
font-weight: bold;
padding: 9px 22px;
border-radius: 30px;
transition: .4s;
}
.project-link:hover{
background-color: #101010;
border: 2px solid #f9004d;
cursor: pointer;
}
.project-card {
background-color: #fff;
border-radius: 11px;
box-shadow: 0 3px 10px #8b8eaf;
padding: 20px;
margin: 10px;
}
/*correct project section ends*/
/*Conct Me*/
.contact-me{
width: 100%;
height: 800px;
background: #191919;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
}
.contact-me h3{
color: white;
font-size: 75px;
text-transformation: capitalize;
margin-bottom: 20px;
padding-top: 30px;
}
.contact-me p{
color: white;
font-size: 20px;
margin-bottom: 25px;
}
.contact-form{
width: 380px;
max-width: 100%;
position: relative;
}
.contact-form input:first-child{
display: inline-block;
width: 100%;
padding: 14px 130px 14px 15px;
border: 2px solid #f9004d;
outline: none;
border-radius: 30px;
}
textarea{
display:inline-block;
width: 100%;
padding: 14px 130px 14px 15px;
border: 2px solid #f9004d;
outline: none;
border-radius: 30px;
}
.contact-me .button-two{
background-color:#f9004d;
color: white;
text-decoration: none;
border: 2px solid transparent;
font-weight: bold;
padding: 13px 30px;
border-radius: 30px;
transition: .4s;
}
.contact-me .button-two:hover{
background-color: transparent;
border: 2px solid #f9004d;
cursor: pointer;
}
/*Contact me end*/
/*Footer*/
footer{
position: relative;
width: 100%;
height: 400px;
background: #101010;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
footer p:nth-child(1){
font-size: 30px;
color: white;
margin-bottom: 20px;
font-weight: bold;
}
footer p:nth-child(2){
color: white;
font-size: 17px;
width: 500px;
text-align: center;
line-height: 26px;
}
.social{
display: flex;
}
.social a{
width: 45px;
height: 45px;
display: flex;
align-items: center;
justify-content: center;
background: #f9004d;
border-radius: 50%;
margin: 22px 10px;
color: white;
text-decoration: none;
font-size: 20px;
}
.social a:hover{
transform: scale(1.3);
transition: .3s;
}
.end{
position: absolute;
color:#f9004d;
bottom: 35px;
font-size: 14px;
}
/*Media Query*/
@media screen and (max-width: 720px) {
/*changes reflects on screen with a width of 720px and below*/
.hero{
flex-direction: column;
}
.about img{
height: 37.5rem;
width: 30rem;
}
.projects-container{
flex-direction: column;
}
.project-container{
width: 20.875rem;
}
.contact-form{
max-width: 23.75rem;
}
.contact-me{
max-width: 23.75rem;
}
}
</style>
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/106.0.0.0 Safari/537.36
Challenge: Personal Portfolio Webpage - Build a Personal Portfolio Webpage
Link to the challenge: