also used for the scroll-behavior to be smooth for smooth scrolling
body{
font-family:'Poppins','sans-serif';
margin:0;
padding:0;
box-sizing: border-box;
/*This makes scrolling behaviour smooth on the webpage*/scroll-behavior: smooth;
}
Header
made it fixed by setting value of position to fixed
gave z-index a high value to make it the only thing appearing while scrolling
header{
background-color:#f0f0f0;
width:100%;
/*it will make the header fixed when scrolling*/position: fixed;
z-index:999;/*high value make it the only thing appearing when scrolling*/display: flex;
justify-content: space-between;
align-items: center;
padding:10px200px; /* top&bottom , right&left*/
}
for the logo and navigation used em in font-size to be a relative font-size where each 1em=16px
hovering over any element in the navigation bar turns the element to purple
.logo{
text-decoration: none; /* will remove the line for hre*/color:#3a6cf3;
text-transform: uppercase;
font-weight:700;
font-size:1.8em; /* em relative to what is defined in the body & browser default 16px */
}
.navigationa {
color:#3a6cf3;
text-decoration: none;
font-size:1.1em;
font-weight:400;
padding-left:30px;
}
.navigationa:hover {
color: purple;
}
Education,Projects & Contact Sections
made a shadow for the card and when hovering over it , it is scaled by 1.1
made a border-radius for the card to be round from the edges
used transition and gave it time of 500ms for transition and using of ease to be more smooth during the transition