Personal Portfolio Webpage - Build a Personal Portfolio Webpage

[Eastside]

Hey guys, i’m trying to create an effect wherby if i hover on the “a” element which is nesting img, p, and span elements, the span element which has a content of (<) and (/>) (less and greater than signs) would turn yellow or any color i give it.
``

Personal Portfolio Webpage

• About
• Work
• Contact

Hey I am Eastside

a web developer

These are some of my projects

< Tribute Page />

< Random Quote Machine />

< Javascript Calculator />

< Map Data Across the Globe />

< Wikipedia Viewer />

< Tic Tac Toe />

Show all

Let's work together

How do you take your coffee?

Facebook Github Twitter Send a mail Call me

**This is just a fake portfolio. All the projects and contact details given are not real.

© Created for freeCodeCamp

body {
margin: 0;
padding: 0;
font-family: Poppins, Raleway;
overflow-x: hidden;
}

#navbar {
background-color:#ca3433;
display: flex;
justify-content: flex-end;
font-weight: bold;
position: fixed;
z-index: 1000000;
width: 100vw;
}

.nav-list {
list-style: none;
margin-right: 24px;
}

.nav-list .list-item {
display: inline-block;
padding: 15px 10px;
margin-left: 16px;
}

a {
text-decoration: none;
font-size: 22px;
color: #fdfff5 ;
}

#welcome-section {
background-color: #303030;
height: 100vh;
}

.welcome{
position: absolute;
bottom: 280px;
left: 400px;
font-size: 60px;
}

.sub-heading {
position: absolute;
bottom: 250px;
left: 490px;
font-size: 30px;
}

h2 {
text-align: center;
font-size: 40px;
color: white;
border-bottom: 2px solid white;
display: inline-block;
margin-left: 330;
margin-top: 90
}

#projects {
background-color: #0e4d92;
/height: 100vh;/
}

.project-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-gap: 10px;
}

img {
width: 383px;
height:370px;
position: relative;
margin-right: 12px;
margin-left: 18px;
}

.project-title {
text-align: center;
background-color: #303030;
height: 55px;
width: 383px;
position: relative;
bottom: 22px;
border-radius: 0 0 3px 3px;
}

.project-title {
margin-left: 18px;
padding-top: 20px;
}

a:hover > .code {
transform: translateX(5px);
color: #FFC000;
}

span {
color: #303030;
}

.btn {
position: relative;
left: 570px;
padding: 10px 25px;
font-size: 20px;
color: white;
background-color: #303030;
border: none;
cursor: pointer;
transition: all 0.9s ease;
}

.btn:hover {
background-color: #ca3433;
}

.btn:hover > i {
transform: translateX(5px);
}

button {
margin-bottom: 80px;
}

#contact-section {
background-color: #303030;
height: 100vh;
padding-top: 10px;
}

.pro {
color: white;
font-size: 55px;
margin-left: 400px;
margin-top: 170px;
}

.how {
position: relative;
bottom: 50px;
left: 490px;
color: white;
font-size: 20px;
}

.contact-details {
margin-left: 17px;
}

i {
margin-right: 7px;
}

.socials {
margin-left: 300
}

.socials > a:hover {
color: grey;
background-color: white;

}

footer {
border-top: 4px solid #ca3433;
background-color : #303030;
padding-bottom: 2px;
}

.freecode {
position: relative;
left: 885px;
bottom: 20px;
color: white;
}

.fake {
position: relative;
left: 75px;
top: 25px;
color: white;
}

.created {
font-size: 17px;
}

**Your browser information:**

User Agent is: <code>Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/107.0.0.0 Safari/537.36</code>

**Challenge:**  Personal Portfolio Webpage - Build a Personal Portfolio Webpage

**Link to the challenge:**
https://www.freecodecamp.org/learn/2022/responsive-web-design/build-a-personal-portfolio-webpage-project/build-a-personal-portfolio-webpage