I've made a simple website from scratch using HTML and CSS, for practice purposes only. I got the website to look the way I want but I would appreciate some feedback on the code, especially the CSS feels quite hacky to me.
The HTML file index.html
<!DOCTYPE html>
<html>
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-115442650-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-115442650-1');
</script>
<title>Joos Korstanje Data Science</title>
<meta charset="utf-8">
<link rel="stylesheet" href="main.css">
</head>
<body>
<header class="header">
<nav>
<ul class="header-nav">
<li><a href="/" class="logo">
<img src="jkconsultancy4.png" alt="Joos Korstanje Logo" >
</a></li>
<li><a href="/">Home</a></li>
<li><a href="/projects.html">Projects</a></li>
<li><a href="https://www.linkedin.com/in/jooskorstanje/">About me</a></li>
<li><a href="https://www.linkedin.com/in/jooskorstanje/">Contact</a></li>
<li>
<ul class="socials">
<li><a href="https://www.linkedin.com/in/jooskorstanje/" >Linkedin</a></li>
<li><a href="https://www.malt.fr/profile/jooskorstanje" >Malt</a></li>
<li><a href="https://github.com/jooskorstanje" >Github</a></li>
<li><a href="https://stackoverflow.com/users/8639281/joos-korstanje" >Stackoverflow</a></li>
</ul>
</li>
</ul>
</nav>
</header>
<div class="hero">
<img src="businessmannew6.png" alt="Data Science Businessman" >
<div class="herotext">
<p>JOOS KORSTANJE DATA SCIENCE</p>
<p>Machine Learning Solutions | Data Strategy</p>
<p>Statistical Methods | Training and Education</p>
</div>
<p class="scroll-down-text">Scroll down for more</p>
</div>
<div class= "buttons-wrapper">
<div class="button left">
<a href="/projects.html#machinelearning">
<img src="lightbulb brain.png" alt="Machine Learning Solutions">
</a>
</div>
<div class="button right">
<a href="/projects.html#trainingandeducation">
<img src="lightbulb educate.png" alt="Training and Education">
</a>
</div>
<div class="button middle">
<a class="button" href="/projects.html#datastrategy">
<img src="lightbulb dollar.png" alt="Data Strategy">
</a>
</div>
</div>
<div class= "title-wrapper">
<div class="title left">
<a href="/projects.html#machinelearning">Machine Learning Solutions</a>
</div>
<div class="title right">
<a href="/projects.html#trainingandeducation">Training and Education</a>
</div>
<div class="title middle">
<a href="/projects.html#datastrategy">Data Strategy</a>
</div>
</div>
<div class="footer">
<img src="jkconsultancy4.png" alt="Joos Korstanje Logo" >
<p>Joos Korstanje, Data Scientist</p>
<p><a href="https://www.google.com/maps/place/Île-de-France/">Serris, Ile de France, France</a></p>
<p>Don't hesitate to send me a message or add me on <a href="https://www.linkedin.com/in/jooskorstanje/">LinkedIn</a> !.</p>
<p>Credits: Lightbulb icon made by and adapted from Freepik from www.flaticon.com</p>
</div>
</body>
</html>
The CSS file :
html, body {
padding: 0;
margin: 0;
background-color: #fff;
}
.header {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
background-color: #000;
color: #000;
height: 50px;
position: fixed;
width: 100%;
z-index: 20;
}
.header-nav {
position: relative;
left: -50px;
}
.header-nav > li {
display: inline-block;
padding-left: 0px;
position: relative;
top: -35px;
}
.logo > img {
height:50px;
margin-top: -2px;
margin-left: 0px;
margin-right: -100px;
}
.header-nav a {
color: #fff;
font-size: 0.8rem;
font-weight: bold;
text-decoration: none;
text-transform: uppercase;
padding-left: 50px;
padding-right: 50px;
border-left: 1px solid rgba(255, 255, 255, 0.3);
}
.header-nav a:hover,
.header-nav a:active {
color: #ed6e2f;
}
.header-nav > li:first-child a {
color: #ed6e2f;
position: relative;
top: 20px;
padding-left: 10px;
border-left: 0px;
}
.header-nav > li:first-child a:hover {
color: #fff;
}
/* SOCIALS STYLES */
.socials {
position: fixed;
right: 1vw;
top: 15px;
}
.socials > li {
display: inline-block;
list-style: none;
padding-left: 0px;
line-height: 0.5;
}
.socials > li > a {
color: #abc;
font-size: 0.5em;
padding: 0px;
margin: 0px;
border-left: 0px;
}
/* HERO STYLES */
.hero > img {
padding-top: 50px;
width: 100%;
}
.herotext {
position: absolute;
top: 150px;
left: 200px;
top: 20%;
left: 15%;
font-family: verdana;
font-size: 15px;
color: #000;
font-weight: bold;
padding: 20px;
border: solid black 1pt;
}
.herotext > p {
margin: 5px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.herotext p:first-child {
font-size: 20px;
}
.scroll-down-text {
margin-top: -100px;
left: 50%;
text-align: center;
font-family: verdana;
font-size: 15px;
}
/* ICON (BUTTON) STYLES */
.buttons-wrapper {
display: inline-block;
height: auto;
padding-top: -15px;
margin-top: -15px;
width: 100%;
}
.button {
height: 180px;
text-align: center;
width: 33.33333%;
margin-top: 150px;
}
.title-wrapper {
display: inline-block;
height: auto;
padding-top: -15px;
margin-top: -15px;
width: 100%;
}
.title {
height: 180px;
text-align: center;
width: 33.33333%;
}
.title a {
color: #000;
font-size: 0.8rem;
font-weight: bold;
text-decoration: none;
text-transform: uppercase;
}
.button img {
height: 150px;
}
.left {
float: left;
display: inline-block;
}
.middle {
display: inline-block;
}
.right {
float: right;
display: inline-block;
}
/* FOOTER STYLES */
.footer {
background-color: #000;
height: 200px;
}
.footer a {
color: #484848;
}
.footer p {
text-align: center;
color: #484848;
font-size: 0.6rem;
}
.footer img {
padding-top: 20px;
margin-left: 47vw;
}
.footer p:first-child {
padding-top: 50px;
}
/* PROJECT STYLES */
.project-block-wrapper {
padding-top: 50px;
width: 100%;
font-family: verdana;
}
.project-block {
padding: 25px 15%;
border-bottom: solid black 1px;
}
.project-block > h2 {
text-align: center;
padding-left: 38px;
padding-top: 50px;
padding-bottom: 25px;
margin-bottom:0;
}
.project-block > ul {
list-style: none;
padding-top: 0px;
margin-top: 0px;
}
.project-block li {
padding-top: 10px;
padding-bottom: 10px;
text-align:justify;
}
.project-block img {
height: 250px;
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 30px;
margin-bottom: 20px;
}