Thread: Website links scroll

Results 1 to 4 of 4
  1. #1 Website links scroll 
    Development Services √

    Oogle's Avatar
    Join Date
    Apr 2012
    Age
    25
    Posts
    3,976
    Thanks given
    650
    Thanks received
    516
    Rep Power
    483
    Hey guys, right i've fucked up massively...

    I'm not exactly sure what the hell i've done but I've got a scroll bar on my links and i aren't sure why.

    Attached image

    Code:
        <div class="container">
            <nav>
                <img src="images/logo2.png" class="logo">
                <ul>
                    <li><a href="#team">Team</a></li>
                    <li><a href="#">Roadmap</a></li>
                    <li><a href="#">FAQ</a></li>
                    <li><a href="#mint">MINT</a></li>
                </ul>
                </nav>

    Code:
    *{
        margin: 0;
        padding: 0;
        font-family: 'poppins' sans-serif;
        max-width: 100vw;
        overflow-x: hidden;
    }
    
    html {
        scroll-behavior: smooth;
    }
    
    /*If not on a laptop size or above.*/
    .bubbles {
        display: none;
    }
    .NFT1 {
        display: none;
    }
    .NFT2 {
        display: none;
    }
    .text-box {
        display: none;
    }
    .team-text {
        display: none;
    }
    .social-icons {
        display: none;
    }
    .container ul li {
        display: none;
    }
    .manager {
        display: none;
    }
    .artist {
        display: none;
    }
    .dev {
        display: none;
    }
    .warning {
        font-size: 5vh;
    }
    
     @Media only screen and (min-width:1280px) { /*laptop size*/
        .warning {
            display: none;
        }
    
        html {
            scroll-behavior: smooth;
        }
    
        .container {
            width: 100%;
            height: 100vh;
            position: relative;
            background-image: linear-gradient(rgba(0,0,0,0.3), transparent), url(/images/background2.jpg);
            background-size:cover; /* cover */
            /*background-position: center;*/
            background-repeat: no-repeat;
            background-attachment: fixed;
            padding: 0 8%;
        }
    
        .container ul li {
            display: inline-block;
        }
        
        nav {
            display: flex;
            width: 100%;
            align-items: center;
            flex-wrap: wrap;
            padding: 5px 0;
        }
        .logo {
            width: 25%;
            cursor: pointer;
            position: relative;
            left: 30%;
            bottom: -45%;
        }
        
        nav ul {
            display: inline-block;
            flex: 1;
            margin-left: 800px;
        }
        nav ul li {
            display: inline-block;
            list-style: none;
            margin: 10px 30px;
        }
        nav ul li a{
            display: inline-block;
            color:#fff;
            text-decoration: none;
            position: relative;
        }
        
        nav ul li a::after{
            display: inline-block;
            content: '';
            width: 0;
            height: 3px;
            position: relative;
            bottom: -5px;
            left: 50%;
            transform: translate(-50%);
            background: #fff;
            transition: width 0.3s;
        }
        
        nav ul li a:hover::after {
            display: inline-block;
            width: 50%;
        }
        .text-box {
            display:table;
            color: #fff;
            position: relative;
            top: 15%;
            margin-left: auto;
            margin-right: auto;
            width: 50%;
        }
        .text-box p {
            font-size: 25px;
            font-weight: 600;
        }
        
        .text-box h5{
            display: none;
            font-size: 25px;
            font-weight: 100;
            color: rgb(0, 0, 0);
            position: relative;
            line-height: 25px;
            margin-left: auto;
            margin-right: auto;
            width: 50%;
        }
        
        .text-box h1 {
            font-size: 60px;
            line-height: 70px;
            margin-left: -15px;
            color: transparent;
            -webkit-text-stroke: 1px #fff;
            background: url(/images/back.png);
            -webkit-background-clip: text;
            background-position: 0 0;
            animation: back 20s linear infinite;
        }
        @keyframes back {
            100% {
                background-position: 2000px 0;
            }
        }
        
        .text-box h3{
            font-size: 18px;
            font-weight: 100;
        }
        .social-icons {
            display: initial;
            position: absolute;
            right: 80%;
            top: 2%;
        }
        .social-icons img {
            width: 75px;
        }
        
        .bubbles img {
            width: 50px;
            animation: bubble 6s linear infinite;
        }
        
        .bubbles {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-around;
            position: absolute;
            bottom: -1px;
        }
        
        @keyframes bubble {
            0% {
                transform: translateY(0);
                opacity: 0;
            }
            50% {
                opacity: 1;
            }
            70% {
                opacity: 1;
            }
            100% {
                transform: translateY(-100vh);
                opacity: 0;
            }
        }
        
        .bubbles img:nth-child(1){
            animation-delay: 2s;
        }
        .bubbles img:nth-child(2){
            animation-delay: 3.4s;
        }
        .bubbles img:nth-child(3){
            animation-delay: 4.4s;
        }
        .bubbles img:nth-child(4){
            animation-delay: 3.8s;
        }
        .bubbles img:nth-child(5){
            animation-delay: 2.5s;
        }
        .bubbles img:nth-child(6){
            animation-delay: 1.4s;
        }
        .bubbles img:nth-child(7){
            animation-delay: 4.1s;
        }
        
        .NFT1 {
            position: relative;
            left: 35%;
            bottom: -45%;
            width: 13%;
            height: 25%;
            /*display: inline-block;*/
            display: none;
            border-radius: 10px;
            padding: 15px 25px;
            box-sizing: border-box;
            cursor: pointer;
            margin: 15px 25px;
            background-image: url(/images/NFT1.jpg);
            background-position: center;
            background-size: cover;
            transition: 0.5s;  
        }
        .NFT2 {
            position: relative;
            left: 35%;
            bottom: -45%;
            width: 13%;
            height: 25%;
            /*display: inline-block;*/
            display: none;
            border-radius: 10px;
            padding: 15px 25px;
            box-sizing: border-box;
            cursor: pointer;
            margin: 15px 25px;
            background-image: url(/images/NFT2.png);
            background-position: center;
            background-size: cover;
            transition: 0.5s;
        }
        .NFT1 h5 {
            color: #fff;
        }
        .NFT2 h5 {
            color: #fff;
        }
        
        .NFT1:hover {
            transform: translateY(-10px);
        }
        .NFT2:hover {
            transform: translateY(-10px);
        }
        
        .team {
            display:inline-block;
            width: 100%;
            height: 100vh;
            background-image: linear-gradient(rgba(0,0,0,0.3), transparent), url(/images/background.jpg);
            background-size:cover; /* cover */
            /*background-position: center;*/
            background-repeat: no-repeat;
            background-attachment: fixed;
            padding: 0 8%;
        }
        
        .team-text {
            display: initial;
        }
        
        .team-text h1{
            font-size: 18px;
            font-weight: 100;
            color: #fff;
            position: relative;
            line-height: 25px;
            margin-left: auto;
            margin-right: auto;
            width: 50%;
        }
        
        .team-text h3{
            font-size: 18px;
            font-weight: 100;
            color: #fff;
            position: relative;
            line-height: 30px;
            margin-left: auto;
            margin-right: auto;
            width: 50%;
        }
        .team-text h4{
            font-size: 18px;
            font-weight: 100;
            color: #fff;
            position: relative;
            line-height: 35px;
            margin-left: auto;
            margin-right: auto;
            width: 50%;
        }
        
        .team-text ul li {
            position: relative;
            font-size: 135px;
            line-height: 150px;
            margin-left: auto;
            margin-right: auto;
            width: 50%;
            color: transparent;
            -webkit-text-stroke: 1px #fff;
            background: url(/images/back.png);
            -webkit-background-clip: text;
            background-position: 0 0;
            animation: back 20s linear infinite;
        }
        @keyframes back {
            100% {
                background-position: 2000px 0;
            }
        }
        .dev {
            position: relative;
            left: 28%;
            bottom: -10%;
            width: 13%;
            height: 25%;
            /*display: inline-block;*/
            display: none;
            border-radius: 5px;
            padding: 15px 25px;
            box-sizing: border-box;
            cursor: pointer;
            margin: 15px 25px;
            background-image: url(/images/profile.jpg);
            background-position: center;
            background-size: cover;
            transition: 0.5s;  
        }
        .artist {
            position: relative;
            left: 28%;
            bottom: -10%;
            width: 13%;
            height: 25%;
            /*display: inline-block;*/
            display: none;
            border-radius: 5px;
            padding: 15px 25px;
            box-sizing: border-box;
            cursor: pointer;
            margin: 15px 25px;
            background-image: url(/images/profile.jpg);
            background-position: center;
            background-size: cover;
            transition: 0.5s;
        }
        .manager {
            position: relative;
            left: 28%;
            bottom: -10%;
            width: 13%;
            height: 25%;
            /*display: inline-block;*/
            display: none;
            border-radius: 5px;
            padding: 15px 25px;
            box-sizing: border-box;
            cursor: pointer;
            margin: 15px 25px;
            background-image: url(/images/profile.jpg);
            background-position: center;
            background-size: cover;
            transition: 0.5s;
        }
        .dev h5 {
            color: #fff;
        }
        .artist h5 {
            color: #fff;
        }
        .manager h5 {
            color: #fff;
        }
        
        .dev:hover {
            transform: translateY(-10px);
        }
        .artist:hover {
            transform: translateY(-10px);
        }
        .manager:hover {
            transform: translateY(-10px);
        }
        
        .hut {
            width: 100%;
            height: 100vh;
            background-image: linear-gradient(rgba(0,0,0,0.3), transparent), url(/images/background3.jpg);
            background-size:cover; /* cover */
            /*background-position: center;*/
            background-repeat: no-repeat;
            background-attachment: fixed;
            padding: 0 8%;
        }
        
        .hut-info {
            position: relative;
            left: 28%;
            bottom: -10%;
            width: 50%;
            height: 50%;
            /*display: inline-block;*/
            display: none;
            border-radius: 5px;
            padding: 5px 15px;
            box-sizing: border-box;
            cursor: pointer;
            margin: 15px 25px;
            background-image: url(/images/PandaHut.png);
            background-position: center;
            background-size: cover;
        }
        
        .footer {
            width: 100%; /* 100% */
            padding: 25px 0;
            /*background-color:rgb(63, 63, 63);*/
            background-image: linear-gradient(rgba(0,0,0,0.3), transparent), url(/images/bg3.png);
            background-size:cover; /* cover */
            /*background-position: center;*/
            background-repeat: no-repeat;
            background-attachment: fixed;
        }
        
        .footer .social {
            text-align: center;
            padding-bottom: 25px;
            color: #fff;
        }
        .footer .social a{
            font-size: 40px;
            color: inherit;
            border: 1px solid white;
            width: 55px;
            height: 50px;
            display: inline-block;
            text-align: center;
            border-radius: 25%;
            margin: 0 8px;
        }
        
        .footer .social a:hover{
            opacity: 0.2;
        }
        
        .footer ul{
            margin-top: 0;
            padding: 0;
            list-style: none;
            font-size: 18px;
            line-height: 1.6;
            margin-bottom: 0;
            text-align: center;
        }
        
        .footer ul li a{
            color: #fff;
            text-decoration: none;
            opacity: 0.8;
        }
        
        .footer ul li {
            display: inline-block;
            padding: 0 15px;
            position: relative;
        }
        
        .footer ul li a:hover{
            opacity: 1;
        }
        
        .footer .copyright {
            margin-top: 15px;
            text-align: center;
            font-size: 13px;
            color: #fff;
        }
        .NFT1 {
            position: relative;
            left: 28%;
            bottom: -25%;
            width: 13%;
            height: 25%;
            /*display: inline-block;*/
            display: inline-block;
            border-radius: 10px;
            padding: 15px 25px;
            box-sizing: border-box;
            cursor: pointer;
            margin: 15px 25px;
            background-image: url(/images/NFT1.jpg);
            background-position: center;
            background-size: cover;
            transition: 0.5s;  
        }
        .NFT2 {
            position: relative;
            left: 28%;
            bottom: -25%;
            width: 13%;
            height: 25%;
            /*display: inline-block;*/
            display: inline-block;
            border-radius: 10px;
            padding: 15px 25px;
            box-sizing: border-box;
            cursor: pointer;
            margin: 15px 25px;
            background-image: url(/images/NFT2.png);
            background-position: center;
            background-size: cover;
            transition: 0.5s;
        }
        .dev {
            position: relative;
            left: 20%;
            bottom: -10%;
            width: 13%;
            height: 25%;
            /*display: inline-block;*/
            display: inline-block;
            border-radius: 5px;
            padding: 15px 25px;
            box-sizing: border-box;
            cursor: pointer;
            margin: 15px 25px;
            background-image: url(/images/profile.jpg);
            background-position: center;
            background-size: cover;
            transition: 0.5s;  
        }
        .artist {
            position: relative;
            left: 20%;
            bottom: -10%;
            width: 13%;
            height: 25%;
            /*display: inline-block;*/
            display: inline-block;
            border-radius: 5px;
            padding: 15px 25px;
            box-sizing: border-box;
            cursor: pointer;
            margin: 15px 25px;
            background-image: url(/images/profile.jpg);
            background-position: center;
            background-size: cover;
            transition: 0.5s;
        }
        .manager {
            position: relative;
            left: 20%;
            bottom: -10%;
            width: 13%;
            height: 25%;
            /*display: inline-block;*/
            display: inline-block;
            border-radius: 5px;
            padding: 15px 25px;
            box-sizing: border-box;
            cursor: pointer;
            margin: 15px 25px;
            background-image: url(/images/profile.jpg);
            background-position: center;
            background-size: cover;
            transition: 0.5s;
        }
        
        .hut-info {
            position: relative;
            left: 20%;
            bottom: -10%;
            width: 50%;
            height: 50%;
            /*display: inline-block;*/
            display: inline-block;
            border-radius: 5px;
            padding: 5px 15px;
            box-sizing: border-box;
            cursor: pointer;
            margin: 15px 25px;
            background-image: url(/images/PandaHut.png);
            background-position: center;
            background-size: cover;
        }
    }


    Attached image

    Attached image
    Reply With Quote  
     

  2. #2  
    Registered MrClassic
    MrClassic's Avatar
    Join Date
    Oct 2008
    Age
    15
    Posts
    2,063
    Thanks given
    24,154
    Thanks received
    551
    Rep Power
    5000
    first thing I noticed is this:

    Code:
    *{
        margin: 0;
        padding: 0;
        font-family: 'poppins' sans-serif;
        max-width: 100vw;
        overflow-x: hidden;
    }
    at least change it to this

    Code:
    *{
        margin: 0;
        padding: 0;
        font-family: 'poppins' sans-serif;
    }
    
    body {
        max-width: 100vw;
        overflow-x: hidden;
    }
    Maybe this also solves your scrolling bar problem

    * = means all elements. And having all elements a max width of 100vw and overflow-x hidden could cause problems.
    body = means the body of your html page. So basically a container of your content.

    EDIT: tested and it fixes your problem.
    Reply With Quote  
     

  3. Thankful user:


  4. #3  
    Development Services √

    Oogle's Avatar
    Join Date
    Apr 2012
    Age
    25
    Posts
    3,976
    Thanks given
    650
    Thanks received
    516
    Rep Power
    483
    Quote Originally Posted by MrClassic View Post
    first thing I noticed is this:

    Code:
    *{
        margin: 0;
        padding: 0;
        font-family: 'poppins' sans-serif;
        max-width: 100vw;
        overflow-x: hidden;
    }
    at least change it to this

    Code:
    *{
        margin: 0;
        padding: 0;
        font-family: 'poppins' sans-serif;
    }
    
    body {
        max-width: 100vw;
        overflow-x: hidden;
    }
    Maybe this also solves your scrolling bar problem

    * = means all elements. And having all elements a max width of 100vw and overflow-x hidden could cause problems.
    body = means the body of your html page. So basically a container of your content.

    EDIT: tested and it fixes your problem.
    Brilliant, thank you!

    This now happens Attached image


    Attached image

    Attached image
    Reply With Quote  
     

  5. #4  
    Registered MrClassic
    MrClassic's Avatar
    Join Date
    Oct 2008
    Age
    15
    Posts
    2,063
    Thanks given
    24,154
    Thanks received
    551
    Rep Power
    5000
    Quote Originally Posted by OogleBoogle View Post
    Brilliant, thank you!

    This now happens Attached image
    Made a few changes:

    - Changed nav ul to be display: flex and centering everything
    - position of nav ul li a::after from relative to absolute

    Code:
    * {
      margin: 0;
      padding: 0;
      font-family: 'poppins'sans-serif;
    }
    
    body {
      max-width: 100vw;
      overflow-x: hidden;
      height: 100vh;
      background-color: black;
    }
    
    html {
      scroll-behavior: smooth;
    }
    
    /*If not on a laptop size or above.*/
    .bubbles {
      display: none;
    }
    
    .NFT1 {
      display: none;
    }
    
    .NFT2 {
      display: none;
    }
    
    .text-box {
      display: none;
    }
    
    .team-text {
      display: none;
    }
    
    .social-icons {
      display: none;
    }
    
    .container ul li {
      display: none;
    }
    
    .manager {
      display: none;
    }
    
    .artist {
      display: none;
    }
    
    .dev {
      display: none;
    }
    
    .warning {
      font-size: 5vh;
    }
       @Media only screen and (min-width:1280px) {
    
      /*laptop size*/
      .warning {
        display: none;
      }
    
      html {
        scroll-behavior: smooth;
      }
    
      .container {
        width: 100%;
        height: 100vh;
        position: relative;
        background-image: linear-gradient(rgba(0, 0, 0, 0.3), transparent), url(/images/background2.jpg);
        background-size: cover;
        /* cover */
        /*background-position: center;*/
        background-repeat: no-repeat;
        background-attachment: fixed;
        padding: 0 8%;
      }
    
      .container ul li {
        display: inline-block;
      }
    
      .container ul li a {
        display: inline-block;
      }
    
    
      nav {
        display: flex;
        width: 100%;
        align-items: center;
        flex-wrap: wrap;
        padding: 5px 0;
      }
    
      .logo {
        width: 25%;
        cursor: pointer;
        position: relative;
        left: 30%;
        bottom: -45%;
      }
    
      nav ul {
        display: flex;
        flex-direction: row;
        flex: 1;
        align-items: center;
        justify-content: center;
      }
    
      nav ul li {
        display: inline-block;
        list-style: none;
        margin: 10px 30px;
      }
    
      nav ul li a {
        display: inline-block;
        color: #fff;
        text-decoration: none;
        position: relative;
      }
    
      nav ul li a::after {
        display: inline-block;
        content: '';
        width: 0;
        height: 3px;
        position: absolute;
        bottom: -5px;
        left: 50%;
        transform: translate(-50%);
        background: #fff;
        transition: width 0.3s;
      }
    
      nav ul li a:hover::after {
        display: inline-block;
        width: 50%;
      }
    
      .text-box {
        display: table;
        color: #fff;
        position: relative;
        top: 15%;
        margin-left: auto;
        margin-right: auto;
        width: 50%;
      }
    
      .text-box p {
        font-size: 25px;
        font-weight: 600;
      }
    
      .text-box h5 {
        display: none;
        font-size: 25px;
        font-weight: 100;
        color: rgb(0, 0, 0);
        position: relative;
        line-height: 25px;
        margin-left: auto;
        margin-right: auto;
        width: 50%;
      }
    
      .text-box h1 {
        font-size: 60px;
        line-height: 70px;
        margin-left: -15px;
        color: transparent;
        -webkit-text-stroke: 1px #fff;
        background: url(/images/back.png);
        -webkit-background-clip: text;
        background-position: 0 0;
        animation: back 20s linear infinite;
      }
    
      @keyframes back {
        100% {
          background-position: 2000px 0;
        }
      }
    
      .text-box h3 {
        font-size: 18px;
        font-weight: 100;
      }
    
      .social-icons {
        display: initial;
        position: absolute;
        right: 80%;
        top: 2%;
      }
    
      .social-icons img {
        width: 75px;
      }
    
      .bubbles img {
        width: 50px;
        animation: bubble 6s linear infinite;
      }
    
      .bubbles {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-around;
        position: absolute;
        bottom: -1px;
      }
    
      @keyframes bubble {
        0% {
          transform: translateY(0);
          opacity: 0;
        }
    
        50% {
          opacity: 1;
        }
    
        70% {
          opacity: 1;
        }
    
        100% {
          transform: translateY(-100vh);
          opacity: 0;
        }
      }
    
      .bubbles img:nth-child(1) {
        animation-delay: 2s;
      }
    
      .bubbles img:nth-child(2) {
        animation-delay: 3.4s;
      }
    
      .bubbles img:nth-child(3) {
        animation-delay: 4.4s;
      }
    
      .bubbles img:nth-child(4) {
        animation-delay: 3.8s;
      }
    
      .bubbles img:nth-child(5) {
        animation-delay: 2.5s;
      }
    
      .bubbles img:nth-child(6) {
        animation-delay: 1.4s;
      }
    
      .bubbles img:nth-child(7) {
        animation-delay: 4.1s;
      }
    
      .NFT1 {
        position: relative;
        left: 35%;
        bottom: -45%;
        width: 13%;
        height: 25%;
        /*display: inline-block;*/
        display: none;
        border-radius: 10px;
        padding: 15px 25px;
        box-sizing: border-box;
        cursor: pointer;
        margin: 15px 25px;
        background-image: url(/images/NFT1.jpg);
        background-position: center;
        background-size: cover;
        transition: 0.5s;
      }
    
      .NFT2 {
        position: relative;
        left: 35%;
        bottom: -45%;
        width: 13%;
        height: 25%;
        /*display: inline-block;*/
        display: none;
        border-radius: 10px;
        padding: 15px 25px;
        box-sizing: border-box;
        cursor: pointer;
        margin: 15px 25px;
        background-image: url(/images/NFT2.png);
        background-position: center;
        background-size: cover;
        transition: 0.5s;
      }
    
      .NFT1 h5 {
        color: #fff;
      }
    
      .NFT2 h5 {
        color: #fff;
      }
    
      .NFT1:hover {
        transform: translateY(-10px);
      }
    
      .NFT2:hover {
        transform: translateY(-10px);
      }
    
      .team {
        display: inline-block;
        width: 100%;
        height: 100vh;
        background-image: linear-gradient(rgba(0, 0, 0, 0.3), transparent), url(/images/background.jpg);
        background-size: cover;
        /* cover */
        /*background-position: center;*/
        background-repeat: no-repeat;
        background-attachment: fixed;
        padding: 0 8%;
      }
    
      .team-text {
        display: initial;
      }
    
      .team-text h1 {
        font-size: 18px;
        font-weight: 100;
        color: #fff;
        position: relative;
        line-height: 25px;
        margin-left: auto;
        margin-right: auto;
        width: 50%;
      }
    
      .team-text h3 {
        font-size: 18px;
        font-weight: 100;
        color: #fff;
        position: relative;
        line-height: 30px;
        margin-left: auto;
        margin-right: auto;
        width: 50%;
      }
    
      .team-text h4 {
        font-size: 18px;
        font-weight: 100;
        color: #fff;
        position: relative;
        line-height: 35px;
        margin-left: auto;
        margin-right: auto;
        width: 50%;
      }
    
      .team-text ul li {
        position: relative;
        font-size: 135px;
        line-height: 150px;
        margin-left: auto;
        margin-right: auto;
        width: 50%;
        color: transparent;
        -webkit-text-stroke: 1px #fff;
        background: url(/images/back.png);
        -webkit-background-clip: text;
        background-position: 0 0;
        animation: back 20s linear infinite;
      }
    
      @keyframes back {
        100% {
          background-position: 2000px 0;
        }
      }
    
      .dev {
        position: relative;
        left: 28%;
        bottom: -10%;
        width: 13%;
        height: 25%;
        /*display: inline-block;*/
        display: none;
        border-radius: 5px;
        padding: 15px 25px;
        box-sizing: border-box;
        cursor: pointer;
        margin: 15px 25px;
        background-image: url(/images/profile.jpg);
        background-position: center;
        background-size: cover;
        transition: 0.5s;
      }
    
      .artist {
        position: relative;
        left: 28%;
        bottom: -10%;
        width: 13%;
        height: 25%;
        /*display: inline-block;*/
        display: none;
        border-radius: 5px;
        padding: 15px 25px;
        box-sizing: border-box;
        cursor: pointer;
        margin: 15px 25px;
        background-image: url(/images/profile.jpg);
        background-position: center;
        background-size: cover;
        transition: 0.5s;
      }
    
      .manager {
        position: relative;
        left: 28%;
        bottom: -10%;
        width: 13%;
        height: 25%;
        /*display: inline-block;*/
        display: none;
        border-radius: 5px;
        padding: 15px 25px;
        box-sizing: border-box;
        cursor: pointer;
        margin: 15px 25px;
        background-image: url(/images/profile.jpg);
        background-position: center;
        background-size: cover;
        transition: 0.5s;
      }
    
      .dev h5 {
        color: #fff;
      }
    
      .artist h5 {
        color: #fff;
      }
    
      .manager h5 {
        color: #fff;
      }
    
      .dev:hover {
        transform: translateY(-10px);
      }
    
      .artist:hover {
        transform: translateY(-10px);
      }
    
      .manager:hover {
        transform: translateY(-10px);
      }
    
      .hut {
        width: 100%;
        height: 100vh;
        background-image: linear-gradient(rgba(0, 0, 0, 0.3), transparent), url(/images/background3.jpg);
        background-size: cover;
        /* cover */
        /*background-position: center;*/
        background-repeat: no-repeat;
        background-attachment: fixed;
        padding: 0 8%;
      }
    
      .hut-info {
        position: relative;
        left: 28%;
        bottom: -10%;
        width: 50%;
        height: 50%;
        /*display: inline-block;*/
        display: none;
        border-radius: 5px;
        padding: 5px 15px;
        box-sizing: border-box;
        cursor: pointer;
        margin: 15px 25px;
        background-image: url(/images/PandaHut.png);
        background-position: center;
        background-size: cover;
      }
    
      .footer {
        width: 100%;
        /* 100% */
        padding: 25px 0;
        /*background-color:rgb(63, 63, 63);*/
        background-image: linear-gradient(rgba(0, 0, 0, 0.3), transparent), url(/images/bg3.png);
        background-size: cover;
        /* cover */
        /*background-position: center;*/
        background-repeat: no-repeat;
        background-attachment: fixed;
      }
    
      .footer .social {
        text-align: center;
        padding-bottom: 25px;
        color: #fff;
      }
    
      .footer .social a {
        font-size: 40px;
        color: inherit;
        border: 1px solid white;
        width: 55px;
        height: 50px;
        display: inline-block;
        text-align: center;
        border-radius: 25%;
        margin: 0 8px;
      }
    
      .footer .social a:hover {
        opacity: 0.2;
      }
    
      .footer ul {
        margin-top: 0;
        padding: 0;
        list-style: none;
        font-size: 18px;
        line-height: 1.6;
        margin-bottom: 0;
        text-align: center;
      }
    
      .footer ul li a {
        color: #fff;
        text-decoration: none;
        opacity: 0.8;
      }
    
      .footer ul li {
        display: inline-block;
        padding: 0 15px;
        position: relative;
      }
    
      .footer ul li a:hover {
        opacity: 1;
      }
    
      .footer .copyright {
        margin-top: 15px;
        text-align: center;
        font-size: 13px;
        color: #fff;
      }
    
      .NFT1 {
        position: relative;
        left: 28%;
        bottom: -25%;
        width: 13%;
        height: 25%;
        /*display: inline-block;*/
        display: inline-block;
        border-radius: 10px;
        padding: 15px 25px;
        box-sizing: border-box;
        cursor: pointer;
        margin: 15px 25px;
        background-image: url(/images/NFT1.jpg);
        background-position: center;
        background-size: cover;
        transition: 0.5s;
      }
    
      .NFT2 {
        position: relative;
        left: 28%;
        bottom: -25%;
        width: 13%;
        height: 25%;
        /*display: inline-block;*/
        display: inline-block;
        border-radius: 10px;
        padding: 15px 25px;
        box-sizing: border-box;
        cursor: pointer;
        margin: 15px 25px;
        background-image: url(/images/NFT2.png);
        background-position: center;
        background-size: cover;
        transition: 0.5s;
      }
    
      .dev {
        position: relative;
        left: 20%;
        bottom: -10%;
        width: 13%;
        height: 25%;
        /*display: inline-block;*/
        display: inline-block;
        border-radius: 5px;
        padding: 15px 25px;
        box-sizing: border-box;
        cursor: pointer;
        margin: 15px 25px;
        background-image: url(/images/profile.jpg);
        background-position: center;
        background-size: cover;
        transition: 0.5s;
      }
    
      .artist {
        position: relative;
        left: 20%;
        bottom: -10%;
        width: 13%;
        height: 25%;
        /*display: inline-block;*/
        display: inline-block;
        border-radius: 5px;
        padding: 15px 25px;
        box-sizing: border-box;
        cursor: pointer;
        margin: 15px 25px;
        background-image: url(/images/profile.jpg);
        background-position: center;
        background-size: cover;
        transition: 0.5s;
      }
    
      .manager {
        position: relative;
        left: 20%;
        bottom: -10%;
        width: 13%;
        height: 25%;
        /*display: inline-block;*/
        display: inline-block;
        border-radius: 5px;
        padding: 15px 25px;
        box-sizing: border-box;
        cursor: pointer;
        margin: 15px 25px;
        background-image: url(/images/profile.jpg);
        background-position: center;
        background-size: cover;
        transition: 0.5s;
      }
    
      .hut-info {
        position: relative;
        left: 20%;
        bottom: -10%;
        width: 50%;
        height: 50%;
        /*display: inline-block;*/
        display: inline-block;
        border-radius: 5px;
        padding: 5px 15px;
        box-sizing: border-box;
        cursor: pointer;
        margin: 15px 25px;
        background-image: url(/images/PandaHut.png);
        background-position: center;
        background-size: cover;
      }
    }
    Reply With Quote  
     

  6. Thankful user:



Thread Information
Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)


User Tag List

Similar Threads

  1. Replies: 2
    Last Post: 12-17-2016, 04:11 PM
  2. Website link change?
    By hands in forum Help
    Replies: 4
    Last Post: 05-15-2014, 06:52 PM
  3. How to load sprites from website link
    By Tringan in forum Tutorials
    Replies: 24
    Last Post: 08-18-2012, 12:56 AM
  4. Awesome Websites/Links
    By Thee Wolf in forum Chat
    Replies: 7
    Last Post: 04-06-2012, 07:30 AM
  5. Hover On Image - Changes Image & Website Link
    By Seven Lives in forum Website Development
    Replies: 3
    Last Post: 03-29-2010, 01:40 AM
Posting Permissions
  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •