ali2210/WizDwarf

View on GitHub
css/home.css

Summary

Maintainability
Test Coverage


.container-1{
    margin-top: 50px;
    margin-left: 50px;
    text-align: center;
}

.container2{
    margin-top: 50px;
    margin-left: auto;
}

.container3{
    margin-top: 50px;    
}

.polychromatic{
    width: 80%;    
}


.img-logo{
    width: 80%;    
}                                                                                                                                                                                                                    

.line-1{
    position: relative;
    top:50%;
    width: 24em;
    margin: 0 auto;
    color: black;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    transform: translateY(-50%);
}

.anim-typewriter{
    animation: typewriter 30s steps(44) 1s 1 
    normal both,
              blinkTextCursor 500ms steps(44)
    infinite normal;
    
}
.line-2{
    color: whitesmoke;
    background-color: black;
    margin-top: 20px;
}
@keyframes typewriter{
    from{width: 0;}
    to{width: 24em;}
}
@keyframes blinkTextCursor{
    from{
        border-right-color: white;
    }
    to{
        border-right-color: transparent;
    }
}


.dwarfs{
    margin-top: 30px;
}


.custom-header{
    /*display: flex;*/
    /*justify-content: center;*/
    color: black;
    margin-top: 50px;
    text-align: center;
    margin-left: 100px;
    font-size: 14px;
}

.logo{
    width: 30%;
}

.all-screens{
    display:flex;
    justify-content: center;
    align-items: center;
}

.nav-item{
    text-rendering: geometricPrecision;
    font-variant: small-caps;
    font-size: 14px;
    text-align: center;
    /*display: flex;*/
}
.dropdown{
    margin-right: 238px;
    align-items: center;
    /*display: flex;*/
}
.dropdown-item{
    padding-right: 100px; 
    align-items: center; 
    color: rgb(90,90,90); 
    text-rendering: geometricPrecision; 
    font-variant: small-caps; 
    font-size: 16px;
    /*display: flex;*/
}


.img-dwarfs{
    width: 80%;
}

.edit-cont{
    margin: auto;
    font-variant: small-caps;
    letter-spacing: 3px;
    font-style: oblique;
    font-size: 20px;
    margin-top: 20px;
}
.static-text{
    margin:auto;
}
.fluid{
    margin-top: 50px;
}

.img-dna{
    width: 80%;
}

.fluids{
    margin-top: 20px;
}


.mycontainer{
    letter-spacing: 3px;
    font-variant: small-caps;
    flex-direction: column;
}


.foot-mark{
    display: flex;
    position: relative;
    justify-content: center;
    top: 10pc;    
    background-color: black;
    color: whitesmoke;
    height: 9pc;
    border-radius: 20px;
  }
  
  
  .insta{
    position : absolute;
    display: flex;
    left: 27px;
  }
  
  
  .tweet{
    position : absolute;
    display: flex;
    left: 53px;
  }
  
  .reddit{
    position : absolute;
    display: flex;
    left: 4px;
    top: 86px;
  }

  /* .github{
    position : absolute;
    display: flex;
    right: -35px;
    top:88px;
  }

  .youtube{
    
    position: relative;
    left: 5pc;
    top: 6pc;
    display: flex;
  } */