I finished the personal portfolio project, and I want feedback, I know for some reason then in Full page mode the navbar looks a bit off, but that would be a lot of fixing to do which Iām not sure how. But in editor mode, it looks fine.
My Personal Portfolio Project
Maybe you can use Flexbox instead of center
.
<section id="welcome-section">
<nav id="navbar"> <!-- Nav -->
<div>
<h1>My portoflio page</h1>
</div>
<div>
<img id="code" src="https://i.postimg.cc/HxG2zYQF/Logo-Makr-6-HRok-N.png" alt="code" width="80px" height="50px"> <!-- Code picture -->
<img id="logo" src="https://i.postimg.cc/xTcmdVvN/d42d3959-cbb2-4d5c-96ef-9a96f2610acf.jpg" alt="Logo" height="100px" width="100px">
<a href="#links_to_projects" class="Links">Some of my projects</a>
<a href="#links_for_profiles" class="Links">Some of my profiles</a>
</div>
</nav> <!-- Nav -->
</section>
#welcome-section {
background-color:#FFED33;
text-align:center;
position:relative;
padding-top: 0px;
margin-top: 0px;
display: block;
height: 100vh;
}
#navbar {
display: flex;
flex-direction: row;
width: 100%;
border: 1px red solid;
justify-content: space-around;
}
div{
border: 1px solid;
}
1 Like
Looks great!
You see how when you hover over the images in your profiles section, it forces the elements above it to kind of jump about a bit? You can improve this by using CSS transform: scale() when hovering over images instead of just increasing their width and height.
img {
transition:0.3s /*this is the duration of the transform property on hover.*/
}
img:hover {
transform:scale(1.2, 1.2); /*this says to scale the height and width by 1.2 it's original value.*/
}
1 Like
Wow thank you, it looks so much more smooth.
Looks good but try to apply HCI rules to interact with user with good interface (color , infographics).
What places teach about HCI?