JSFiddle - React, Tailwind, and code Playground

by the94air

HTML

<header>
  <nav id="name">
    <h1 class="name">
      <a href="main.html">
        adam.dev
      </a>
    </h1>
  </nav>
</header>

<section>
  <div class="about__me">
    <h2 class="about">About me</h2>
    <h4 id="p">I am a young web developer who <br>
      interests in <em>HTML, CSS and JavaScript</em>.<br>
      If you decide to choose me, give me <br>
      a message for an estimated price!</h4>
    <span class="learn-more">
      <a href="https://google.com">Learn more</a>
    </span>
  </div>
  <div class="picture__parent">
    <img src="picture.jpg" alt="Picture" class="picture">
  </div>
</section>

CSS

body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

header {
  background-image: linear-gradient(to right, rgb(49, 178, 253), rgb(34, 149, 243));
  margin: 0;
  padding: 10px;
  color: white;
}

h1 {
  margin: 0;
  padding: 0;
}

nav {
  margin: 0;
  padding: 0;
}

.picture {
  width: 650px;
  height: auto;
}

.picture__parent {
  display: flex;
  justify-content: flex-end;
  position: relative;
  bottom: 300px;
  right: 90px;
}

.about__me {
  position: relative;
  left: 200px;
  top: 230px;
}

.about {
  font-size: 60px;
  position: relative;
  left: 20px;
  bottom: 100px;
}

#p {
  position: relative;
  bottom: 105px;
  right: 80px;
  font-size: 20px;
}

.learn__button {
  font-size: 25px;
  position: relative;
  bottom: 70px;
  left: 230px;

}

.learn-more {
  position: relative;
  font-size: 25px;
  bottom: 80px;
  left: 210px;
  border: solid 1px rgb(49, 178, 253);
  padding: 5px;
  border-radius: 10px;
}

.learn-more a {
  color: rgb(77, 80, 247);
  text-decoration: none;
}

.learn-more:hover a {
  text-decoration: underline;
}

#name {
  display: flex;
  justify-content: center;
}

#name a {
  color: white;
  text-decoration: none;
}