Tell us what’s happening:
Please have a look on my project and advise below kindly:
I have saved images on canvas and when I try to copy them in project section it will not appear there, my link to project saved in codepen also seems not opening required link when we click on project icon i.e teacher parent form.
Secondly, in contact section I want to put logos of Codepen, FCC etc but I am not sure how to do it.
Your code so far
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Personal Portfolio</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<nav id="navbar">
<ul>
<li><a href="#welcome-section">About </a></li>
<li><a href="#project-section">Project</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
<div id="welcome-section">
<h1>I'm Sarru</h1>
<h2>a web developer<h2>
<img src="https://cdn.pixabay.com/photo/2016/03/27/18/54/technology-1283624_1280.jpg" alt="image">
</div>
<div class="project-list">
<p>Please find my projects below</p>
</div>
<div id="project-section">
<div class="proj1">
<a class="project-tile" href="https://codepen.io/Sarru08/full/ogLbzod" target="\_blank">
<img class="img" src="https://staticresources123.myfor.ms/site/other/landings/php-contact-form/contact-form.png">
<p>
Parent Teacher Conference Form</a><p></div>
<div class="proj2">
<a href="https://codepen.io/Sarru08/full/RNRGMVw" target="\_blank"><img class="img" src="https://www.canva.com/design/DAG-bRq1yuQ/TNvn2RJLgXbiEOr89cFqUw/edit"> <p>Magazine</a></p></div>
<div class="proj3"> <a href="https://codepen.io/Sarru08/full/raLMdzK" target="\_blank"><img class="img" src="https://www.canva.com/M/MAG-hGFa_V0"> <p>Technicle Document</a></p></div>
<div class="proj4"><a href="https://codepen.io/Sarru08/full/zxBKWEJ" target="\_blank"><img class="img" src="https://staticresources123.myfor.ms/site/other/landings/php-contact-form/contact-form.png"><p> Birthday card</a></p></div>
</div>
<div id="contact">
<h1 class="work">Let's work together!</h1>
<ul class="social-media">
<li>
[FCC](https://www.freecodecamp.org/sarru)
<li>
[CodePen](https://codepen.io/Sarru08)
<li><a href="mailto:surinder@live.co.uk">@Send me Email</a></li>
<li><a href="tel:+1234567890">Call me</a>
</li>
</div>
<form class="form">
<h3>or contact me..</h3>
<div>
<label for="name">Name <br>
<input type="text" id="name" name="name"required></label>
</div>
<div>
<label for="email">Email <br>
<input type="email"id="email"name="email" required></label></div>
<div>
Massage
<button type="submit">Submit</button>
</form>
</div>
<hr>
<div class="made-by">
<p><i>Created by Sarru2026</i></p></div>
</div>
</body>
</html>
/* file: styles.css */
*
{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.container{
border:2px solid red;
}
#navbar{
position: fixed;
background-color:grey;
width:100%;
height:10%;
padding:5px;
top:0px;
}
#navbar ul{
display:flex;
flex-direction:row;
justify-content:flex-end;
list-style-type: none;
height:100%;
font-family: source sans pro;
}
#navbar a{
padding:2rem;
text-decoration:none;
color:white;
font-size:1.6rem;
margin-top:2rem;
}
#welcome-section{
background-color:blue;
height:70vh;
text-align:center;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
font-size:1.2rem;
border:4px solid black;
}
#welcome-section img{
height:25vh;
width:25vw;
}
#project-section
{
display: grid;
width: 100%;
grid-template-columns: repeat(2, 1fr);
padding:0.5rem;
margin-left:5rem;
}
#project-section a:hover{
opacity:0.5;
}
.img{
width:20vw;
height:20vh;
}
.project-list{
border-bottom:4px solid orange;
color:black;
padding:0.5rem;
text-align:center;
background:lightblue;
font-size:1.5rem;
}
#contact{
background-color:grey;
padding:0.5rem;
}
#contact .work{
display:flex;
justify-content: center;
padding:0.5rem;
}
#contact .social-media{
display:flex;
flex-direction:row;
justify-content:space-evenly;
}
#contact .social-media a{
text-decoration:none;
color:white;
}
#contact ul{
list-style-type: none;
}
hr{
height:0.5rem;
background-color:blue;
}
.form{
background-color:blue;
color:white;
padding:0.5rem;
}
.form label,input,textarea,button,h3
{
margin-left:40%;
}
.form label{
font-size:0.7rem;
}
button
{
background-color:blue;
color:white;
font-size:0.7rem;
}
button:hover{
background-color:green;
}
.made-by{
width:100%;
height:8vh;
background-color:grey;
text-align:right;
}
@media (max-width: 360px)
{
#navbar a{
font-size:1.8rem;
}
#welcome-section{
font-size:1.8rem;
}
#welcome-section img{
height:60%;
width:50%;
}
.img{
width:30vw;
height:30vh;
}
.project-list{
font-size:1.8rem;
}
.proj1,.proj2,.proj3,.proj4 p, a{
font-size:1.5rem;
text-decoration:none;
}
.form label{
font-size:1.1rem;
}
button
{
font-size:1.1rem;
}
.made-by{
font-size:1.5rem;
}
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36 Edg/143.0.0.0
Challenge Information:
Build a Personal Portfolio - Build a Personal Portfolio
