personal_project

HTML

<!DOCTYPE html>
<html lang="en">
  <body>
    <nav id="navbar" class="nav">
      <a href="#about" class="nav-element">About</a>
      <a href="#work" class="nav-element">Work</a>
      <a href="#projects" class="nav-element">Projects</a>

    </nav>
    <section id="welcome-section" class="welcome-container">
      <img src="https://images.unsplash.com/photo-1481349518771-20055b2a7b24?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2009&q=80">
      <h1 class="centered-text">
        Hola.
      </h1>
    </section>
    <section id="projects">
      <a href="www.google.com">
        Link to project
      </a>
      <div class="project-tile"></div>
    </section>
    <section id="profiles">
      <a href="www.github.com/test" target="_blank" id="profile-link">Github</a>
    </section>
  </body>

</html>

CSS

* {
  margin: 0px;
  padding: 0px;
  border-style: none;
  font-family: Helvetica, monospace;
  border: 1px solid red;

}

*,
*::before,
*::after {
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
  font-size: 62.5%;
  scroll-behavior: smooth;
  max-width: none;
}

h1 {
  font-size: 400%;
}

.nav {
  display: flex;
  position: fixed;
  top: 0;
  width: 100%;
  padding: 20px;
  background-color: black;
  opacity: 60%;
  z-index: 10;
  justify-content: flex-end;
}

.nav-element {
  display: flex;
  padding: 0 10px;
  justify-content: flex-end;
  font-size: 200%;
  color: orange;
  text-decoration: none;
}

.nav-element:hover {
  color: hotpink;
}

.welcome-container {
  max-width: none;
  position: relative;
  width: 100vw;
}

.welcome-container>img {
  opacity: 0.2;
  width: 100%;
  box-sizing: border-box;
}

.centered-text {
  position: absolute;
  top: 50%;
  left: 50%;
  text-align: center;
  transform: translate(-50%, -50%);
}

#projects {
  background-color: lightskyblue;
  height: 300px;
}

#welcome-section {
  display: flex;
}