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.
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;
}
}