A Pen by nico

Thumbnail
This awesome code was written by Nico1112345, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Nico1112345 ©
  • HTML
  • CSS
  • JavaScript
    <html>
  <body>
      
    <center>
      <img class="" src="https://i.imgur.com/kxBgd2h.png" alt="Image 1" class="img1">
    </center>
    
    <div class="navBar">
      <div class="liBar">
        <a href="#" class="button__selected">Home</a>
        <a href="https://www.youtube.com/channel/UCEqVnyVrJWAZ1YqjCMAs4NQ" class="buttonyt">Youtube</a>
        <a href="https://twitter.com/PolskaPlays" class="buttonti">Twitter</a>
        <a href="#" class="button">Contact</a>
      </div>
    </div>


/*Downloaded from https://www.codeseek.co/Nico1112345/a-pen-by-nico-jynfH */
    @import url(https://fonts.googleapis.com/css?family=Roboto+Condensed);

html {
  background: url("https://i.imgur.com/jXpdNB2.png")  repeat; nowhitespace: afterproperty;
  background-repeat: repeat;
}
.img1 {
  padding: 5px
}
.header {
  align-items: center;
  margin-top: 18px;
}

.navBar {
  padding: 24px;
  background-color: #fff;
  margin-left: 90px;
  margin-right: 90px;
  margin-top: 200px;
  height: 37px;
  background-color: #ff0000;
  border-radius: 5px;
  box-shadow: 0 5px #e30000;
}

.liBar {
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 29px;
  text-decoration: none;
  color: #fff;
  text-align: center;
}

.button {
  color: #fff;
  border-radius: 2px;
  text-decoration: none;
  padding: 17px 50px 17px 50px;
  transition: 0.30s ease-in-out;
}
.buttonyt {
  color: #fff;
  border-radius: 2px;
  text-decoration: none;
  padding: 17px 50px 17px 50px;
  transition: 0.30s ease-in-out;
}.buttonti {
  color: #fff;
  border-radius: 2px;
  text-decoration: none;
  padding: 17px 50px 17px 50px;
  transition: 0.30s ease-in-out
    background-color;
}
.button:hover {
  background-color: #d12c2c;
  border-radius: 8px;
  box-shadow: inset 0 0 10px #2B2B2B;
  transition: 0.25s ease-in-out;
}
.buttonyt:hover {
  background-color: #ff1717;
  border-radius: 8px;
  box-shadow: inset 0 0 10px #2B2B2B;
  transition: 0.25s ease-in-out;
}
.buttonti:hover {
  background-color: #5EB2D6;
  border-radius: 8px;
  box-shadow: inset 0 0 10px #2B2B2B;
  transition: 0.25s ease-in-out;
}

.mainPage {
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 26px;
  background-color: #fff;
  padding: 20px;
  margin-left: 91px;
  margin-right: 91px;
  margin-top: 20px;
  border-radius: 9px;
  height: 100vh;
  color: #5E5E5E;
}
.YouTube__Icon {
  width: 45px;
  height: 45px;
  float: right;
  margin-top: -5px;
  padding: 5px;
  transition: 0.2s ease-in-out;
}

.YouTube__Icon:hover {
  cursor: pointer;
  height: 52px;
  width: 52px;
}

.Twitter__Icon {
  width: 45px;
  height: 45px;
  float: right;
  margin-top: -5px;
  padding: 5px;
  transition: 0.2s ease-in-out;
}

.Twitter__Icon:hover {
  cursor: pointer;
  height: 52px;
  width: 52px;
}
.button__selected {
  color: #d1cdcd;
  text-shadow: 0px 1px #;
  border-radius: 8px;
  text-decoration: none;
  padding: 17px 50px 17px 50px;
  transition: 0.30s ease-in-out;
}


/*Downloaded from https://www.codeseek.co/Nico1112345/a-pen-by-nico-jynfH */
    

Comments