Untitled

HTML


<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
  <link rel="stylesheet" type="text/css" href="style.css" media="all">
  <title>Jake Hill</title>
</head>
<body>

  <div class="nav-container">

    <div class="logo">
      <h1>Jake Hill</h1>
    </div>

    <div class="top_button">
      <a class="power" href="https://www.youtube.com/channel/UC3e8EMTOn4g6ZSKggHTnNng" target="_blank"><button class="button" >YouTube</button></a>
      <h3>|</h3>
      <a class="power" href="https://twitter.com/JakeHillDriver?ref_src=twsrc%5Egoogle%7Ctwcamp%5Eserp%7Ctwgr%5Eauthor" target="_blank"><button class="button" >Twitter</button></a>
      <h3>|</h3>
      <a class="power" href="https://www.instagram.com/iamjakehill/?hl=en" target="_blank"><button class="button" >Instagram</button></a>
      <h3>|</h3>
      <a class="power" href="https://soundcloud.com/iamjakehill" target="_blank"><button class="button" >SoundCloud</button></a>
      <h3>|</h3>
      <a class="power" href="https://www.facebook.com/IamjakehillMusic/" target="_blank"><button class="button" >FaceBook</button></a>
    </div>

  </div>

  <div class="break1">
  </div>

    <div class="top_1">
      <h1>United States</h1>
    </div>

    <div class="top_2">
      <button class="button_x" >Albums</button>
      <a class="power" href="aboutme.html" ><button class="button_x" >About Me</button></a>
    </div>

    <div class="break2">
    </div>

      <div class="mid_1">
    <img src="art/mid.png" width="60%" height="1000px" />
      </div>

      <div class="break">
      </div>
</body>
</html>


CSS


@font-face { font-family: OCR A Std Regular; src: url('font/OCR A Std Regular.ttf'); }
      *, *::after, *::before {
         font-family: OCR A Std Regular
             }

html, body
{
    height: 100%;
    width: 100%;
    padding: 0px;
    margin: 0px;
    text-align: JUSTIFY;
    color: black;
}

p
{
margin: 0px;
padding: 0px;
}

::-webkit-scrollbar {
    display: none;
}

.nav-container{
  position: fixed;
  z-index: 2;
  width: 100%
}

.logo
{
    height: 100px;
    width: 100%;
    background-image:url(art/whitenoise.gif);
    color: rgb(96, 39, 29);
    font-family: ORC A Std Regular;
    font-size: 22px;
    display: flex;
    justify-content: center;
}
.top_button
{
    height: 64px;
    width: 100%;
    color: white;
    background-color: rgb(10, 4, 2);
    font-family: ORC A Std Regular;
    display: flex;
    justify-content: center;

}
.power
{
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
}
.button
{
color: white;
border: transparent;
background: transparent;
font-size: 16px;
transition: 2s;
outline-color: transparent;
}
.button:hover
{
color: rgb(96, 39, 29);
cursor: pointer;
}
.top_1
{
    height: 94px;
    width: 100%;
    background-color: rgb(10, 4, 2);
    color: rgb(96, 39, 29);
    font-family: ORC A Std Regular;
    display: flex;
    justify-content: center;
}
.top_2
{
    height: 68px;
    width: 100%;
    background-color: rgb(10, 4, 2);
    font-family: ORC A Std Regular;
    display: flex;
    justify-content: center;
}
.button_x
{
margin: 0px 5px;
color: rgb(96, 39, 29);
border-color: rgb(96, 39, 29);
border: rgb(96, 39, 29) medium solid;
background: transparent;
font-size: 16px;
transition: 2s;
outline-color: transparent;
}
.button_x:hover
{
color: white;
border-color: white;
cursor: pointer;
}

.break1
{
    height: 164px;
    width: 100%;
    background-color: rgb(10, 4, 2);
}

.break2
{
    height: 40px;
    width: 100%;
    background-color: rgb(10, 4, 2);
}

.mid_1
{
    height: 1000px;
    width: 100%;
    background-color: rgb(10, 4, 2);
    color: rgb(96, 39, 29);
    display: flex;
    justify-content: center;
}