Signature ILH

In this example below you will see how to do a Signature ILH with some HTML / CSS and Javascript

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

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>Signature ILH</title>
  
  
  <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Lato|Open+Sans:700'>

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

  
</head>

<body>

  <div class="avaSigna"><div class="left"><img src="https://tinyurl.com/m9gwef3"/><img src="https://tinyurl.com/jw7uflj"/></div> <div class="middle"><img src="https://tinyurl.com/kqj7qdx" alt="" /><img src="https://tinyurl.com/ky6w24e" alt="" /><img src="https://tinyurl.com/mqrx7sy" alt="" /></div> <div class="right"><div class="title">Ton titre</div><div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus repudiandae ullam sequi, ab dolorem aut dolor. Excepturi laudantium voluptates quas minima cumque accusamus provident eligendi consectetur, at alias, voluptatum eius.</div></div></div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/darkdreams/signature-ilh-xdZdww */
.avaSigna {
    width: 420px;
    margin: 20px auto;
    padding: 5px 5px 2px;
    border: 3px double #da6c8b;
}

.avaSigna .left,
.avaSigna .middle,
.avaSigna .right {
    display: inline-block;
}

.avaSigna .left,
.avaSigna .left img {
    width: 160px;
}

.avaSigna .left img {
    display: block;
}

.avaSigna .left img:first-child {
    margin-bottom: 5px;
}

.avaSigna .middle,
.avaSigna .middle img {
    width: 57px;
}

.avaSigna .middle img {
    display: block;
}

.avaSigna .middle img:not(:last-child) {
    margin-bottom: 5px;
}

.avaSigna .right {
    width: 188px;
    vertical-align: top;
}

.avaSigna .title {
    font: 800 14px 'Open Sans';
    text-transform: uppercase;
    text-align: right;
    margin-bottom: 5px;
}

.avaSigna .content {
    font: 11px 'Lato';
    text-align: justify;
}

Comments