A Pen by A2

Thumbnail
This awesome code was written by a_tinker, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright a_tinker ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  A2</title>
  
  
  <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <body>
<h1 id = 'title'>example title</h1>
 
  <div class = 'post'>
    <div class = 'info'></div><div class = 'autor_c text-center'>A</div>
    <p>yo</p>
  
  </div>
  
  
</body>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/a_tinker/a-pen-by-a2-YyNjBV */
body {
  background-color: rgba(150, 150, 150, 0.5);
}

#title {
  font-family: Arial;
  font-weight: bold;
  padding-left: 10%;
  margin-left: -1%;
  margin-top: -10px;
  padding-top: 2.5%;
  width: 100%;
  height: 80px;
  font-size: 3em;
  background-color: #67dcea;
  color: #333;
  text-shadow: 1px 1px 1px white, 1.5px 1.5px 1px black;
  border-bottom: 5px solid rgba(0, 0, 0, 0.5);
  box-shadow: 5px 0px 1px 1px rgba(0, 0, 0, 0.7), 6px 0px 1px 1px rgba(180, 180, 180, 0.6);
}

.post {
  background-color: rgba(250, 250, 250, 0.9);
  width: 50%;
  margin-left: 15%;
  clear: both;
  padding: 10px;
  border-radius: 0px 10px 10px 10px;
  font-family: Arial;
}

.post > p {
  padding-left: 10%;
}

.autor_c {
  width: 50px;
  height: 50px;
  background-color: #ff5a1d;
  box-shadow: 1px 1px 1px coral, 1.5px 1.5px 1px rgba(150, 150, 150, 0.5);
  border-radius: 50px;
  color: white;
  font-size: 2.5em;
  text-shadow: 1px 1px 1px rgba(150, 150, 150, 0.9);
  z-index: 3;
  margin-top: -49px;
}

.info {
  visibility: invisible;
  background-color: rgba(255, 90, 29, 0.5);
  height: 48px;
  width: 50px;
  z-index: 2;
}

/*.autor_c:hover{
  &{
    width: 100px;
    
     border-radius: none;
    //margin-left: -100px;
    -webkit-transform: all 2s ease;
   
  }
}*/


/*Downloaded from https://www.codeseek.co/a_tinker/a-pen-by-a2-YyNjBV */
function author_info(){
  var a = ['a', 'email@email.me']
  $('.autor_c').mousedown(function(){
    $('.info').css('width', '35%');
    $('.info').append('<span class = "del">'+a[1]+'</span>')
    $('.del').css('padding-left', '30%');
    $('.del').css('padding-right', '10%');
    $('.del').css('padding-top', '10px');
     $('.del').css('padding-bottom', '10px');
   
    
  });
  
   $('.autor_c').mouseup(function(){
     $('.del').remove();
     $('.info').css('width', '50px');
   });
  
  
}
author_info();

Comments