A Pen by Karthikeysn

Thumbnail
This awesome code was written by Lazurazz, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Lazurazz ©
  • HTML
  • CSS
  • JavaScript
    <div class="micsDiv micsRight micsdark">
<ul class='micsBox'>
  <li class='micsimage'><img src="https://google.png"></li>
  <li class='micscontent'>
    <span class='micsheader'>Heading goes here </span>
    <span class='micsdesc'>Hey new webinar available for zoho durgin this winter , if you want to participate  click on the link</span>
  <span class='micslink underline'><a class='link underline' href='#0'>I have some awesome link here , please click to get further details </a></span>
  </li>
  <li class='micsaction'>
  <span class='micstoggle'></span>
  <span class='micsclose'></span>
  </li>
</ul>
</div>

/*Downloaded from https://www.codeseek.co/Lazurazz/a-pen-by-karthikeysn-vdLqBb */
    
.micsDiv{
    font-size:0.8rem;
    position: fixed;
    z-index: 10000000;
}

.micshidden{
  cursor:pointer;
}

.micscontent{
  *{
    display: inline-block;
  }
  a{
     text-decoration: none;
    &:hover{
      text-decoration:underline;
    }
  }
}

.micsheader{
  text-transform:uppercase;
  letter-spacing:0.2rem;
  font-weight:bold;
}

.micstoggle{
  cursor: pointer;
  text-decoration: underline;
  &:before{
    content:" Hide ";
  }
  &:hover{
    text-decoration:none;
  }
}

.micsaction{
  font-size:0.65rem;
}

.micsclose{
  cursor: pointer;
  text-decoration: underline;
  &:before{
    content:" close ";
  }
  &:hover{
    text-decoration:none;
  }
}

.micsTop{
  top: 0;
  left: 0;
  border-bottom: 4px solid ;
  transform-origin:top;
  transition:200ms ease-in-out;
  &.micshddn{
     transform:scaleY(0);
  }
  transform:scaleY(1);
}

.micsBottom{
  bottom:0;
  left:0;
  border-top: 4px solid;
  transition:200ms ease-in-out;
  .micsarw{
    transform:rotate(180deg);
  }
  transform-origin:top;
  &.micshddn{
     transform:scaleY(0);
  }
  transform:scaleY(1);
}

.micsTop ,.micsBottom{
    width: 100%;
    &.micshidden{
     min-height:0px;
     height:0px;
    }
  .micsBox{
    margin:0.25rem;
    padding:0.25rem;
    display:flex;
    list-style-type: none;
    flex-flow: row wrap;
    align-items: center;
  }

.micsimage{
  img{
    width:25px;
    height: 25px;
  }
  flex :1 0px;
  order:0;
}
  
  .micsaction{
    order:3;
    flex:2 10px;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-evenly;
  }
  
  .micsheader{
    order:1;
    flex:3 10%;
  }
  .micscontent{
    order:2; 
    flex:20;
    text-align:center;
    >*{
      padding:0.1rem;
    }
  }
  @media all and (max-width: 800px) {
    .micsheader{
      flex:1 40%;
    }
    .micsaction{
      flex:1 100px;
      text-align:center;
    }
    .micscontent {
       order:6;
       flex:20 100%;
    }
  }  
}

.micsLeft ,.micsRight{
 
  width:500px;
 margin:0;
  padding:0;
    &.micshidden{
     min-width:0px;
     width:0px;
   } 
  
  .micsBox{
    padding:10px;
    margin:10px; 
    display:flex;
    list-style-type: none;
    flex-flow: row wrap;
  }

.micsimage{
  display:flex;
  align-items:center;
  justify-content:center;
  img{
    width:100px;
    height:100px;
    padding:0px 10px;
  }
  flex :1 10px;
  order:1;
}
  
  .micsaction{
    order:2;
    flex:1 50px;
    display:flex;
    flex-flow:column nowrap;
    justify-content:space-evenly;
    text-decoration: none;
    text-align:center;
  }
  .micscontent{
    order:2; 
    flex:1 280px;
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
  }
}

.micsRight{
  right:0;
  bottom:200px;
  border-left: 4px solid;
  transition:200ms ease-in-out;
  .micsarw{
    transform:rotate(90deg);
  }
  transform-origin:right;
  &.micshddn{
     transform:scaleX(0);
  }
  .micsaction{
    text-align:right;
  }  
  transform:scaleX(1);
}

.micsLeft{
  left:0;
  bottom:200px;
  border-right: 4px solid;
  transition:200ms ease-in-out;
  .micsarw{
    transform:rotate(270deg);
  }
  transform-origin:left;
  &.micshddn{
     transform:scaleX(0);
  }
  .micsimage{
    order:3;
  }
  .micsaction{
    order:1;
    text-align:left;
  }
  transform:scaleX(1);
}


.micsdark{
  background-color: #42464c;
  color:#f8f8f8;
  border-color:#f1703b;
  .micsclose{
      color: #c3b3a6;
  }
  .micscontent{
    a{
      color:steelblue;
    }
  }
  .micsarw{
    circle{
          fill:#ab8063;
    }
    path{
          fill:#42464c;
    }
  }
}


/*Downloaded from https://www.codeseek.co/Lazurazz/a-pen-by-karthikeysn-vdLqBb */
    

Comments