Hello everyone,
So recently I have been working through the personal portfolio project. I wanted feedback on how to improve it. One of the biggest ways I think is to add “image tiles” properly as seen in the example, however, I am unsure about how to do that. Any advice on this alongside any other critiques that would help the lookout of my page and my skills . I have added both the HTML and CSS code I have used below for reference.
The link to my project is also listed below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content ="width=device-width, initial-scale=1.0"/>
<meta name="description" content="JS Documentation Page"/>
<title>JS Documentation</title>
<link rel="stylesheet" href="styles.css"/>
</head>
<body>
<div id="navpane">
<nav id="navbar">
<div id="random">
<li><a class = "nav-link" href="#welcome-section">About</a></li>
<li><a class="nav-link" href="#projects">Projects</a></li>
<li><a class="nav-link" href="#contact">Contact</a></li>
</div
</nav>
</div>
<div id="About">
<section id="welcome-section">
<h1>Hi! I'm Khamosh </h1>
<h3>Web Developer</h2>
</section>
</div>
<div id="Work">
<section id="projects">
<h2>These are some of my projects.</h2>
<div id="project-1" class="project-tile">
<a id="project-link" href="https://www.freecodecamp.org/learn/2022/responsive-web-design/build-a-tribute-page-project/build-a-tribute-page">Tribute Page</a>
</div>
<div id="project-2" class="project-tile">
<a id="project-link" href="https://www.freecodecamp.org/learn/2022/responsive-web-design/build-a-product-landing-page-project/build-a-product-landing-page">Product Landing Page</div>
</div>
<div id="project-3" class="project-tile">
<a id="project-link" href="https://www.freecodecamp.org/learn/2022/responsive-web-design/build-a-technical-documentation-page-project/build-a-technical-documentation-page">Technical Documentation Page</div>
</div>
</section>
</div>
<div id="contact">
<a id="profile-link" target="_blank">
</a>
</div>
</body>
</html>
body {
font-family: 'Baskervville', serif;
}
#navpane {
height: 10vh;
width: 100vw;
background-color: black;
list-style: none;
display: flex;
justify-content: flex-end;
position: fixed;
}
#navbar li{
display: inline;
padding-left: 20px;
padding-right: 15px;
font-size: 9vh;
font-weight: bold;
}
a:link {
color: white;
text-decoration: none;
}
a:visted {
color: white;
text-decoration: none;
}
a:hover {
color: white;
text-decoration: none;
}
a:active {
color: white;
text-decoration: none;
}
.nav-link{
color: white;
}
#About {
height: 300px;
width: 100vw;
background-color: linen;
display: flex;
justify-content: center;
align-items: center;
}
h1 {
font-family: 'American Typewriter', serif;
font-weight: bold;
color: red;
}
h2 {
color: white;
}
#Work {
height: 300px;
width: 100vw;
background-color: blue;
}
.project-tile {
display: flex;
justify-content: space-evenly;
background-color: red;
}
#project-1 {
width:30vw;
height:30vh;
background-image: url(https://i.ibb.co/KhzGn3h/Norman-Borlaug-Image.jpg);
}
@media query and (max-width: 700px) {
}