annonce BMW Business

In this example below you will see how to do a annonce BMW Business with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by hajaran, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright hajaran ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>annonce BMW Business</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="annonce-conteneur">
<div class="annonce">
<h2><span class="headline">Le plaisir de conduire à l'état pur.</span></h2>
<p>Découvrez la nouvelle BMW Série 1 en Location Longue Durée.</p>
</div>
<div/>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/hajaran/annonce-bmw-business-aBaWbe */
.annonce-conteneur {
  display: block;
  background-color: rgba(255, 255, 255, 0.8);
  width: 400px;
  height: 130px;
  padding: 30px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.15)
}
.annonce .headline {
    font-family: Roboto Condensed;
    color: #1C69D4;
    font-size: 24px;
    box-shadow: none;
    font-weight: 700;
}

.annonce p {
  font-size: 15px;
  color: #666666;
  font-family: Roboto;
  text-shadow: none;
}

/*Animation*/
.annonce-conteneur {
  background: #E6E6E6;
  margin: auto;
  border: 2px solid #FFF;
  text-align: left;
  color: #fff;
  position: relative;
  transition: 500ms ease;
}
.annonce-conteneur:before {
  position: absolute;
  width: 0;
  height: 2px;
  content: '';
  background: #1C69D4;
  top: -2px;
  left: -2px;
  transition: 100ms width ease 300ms;
  -web-kit-transition: 100ms width ease 300ms;
}
.annonce-conteneur:after {
  position: absolute;
  width: 2px;
  height: 0;
  content: '';
  background: #1C69D4;
  top: -2px;
  right: -2px;
  transition: 100ms height ease 200ms;
  -web-kit-transition: 100ms height ease 200ms;
}
.annonce:after {
  position: absolute;
  width: 0;
  height: 2px;
  content: '';
  background: #1C69D4;
  bottom: -2px;
  right: -2px;
  transition: 100ms width ease 100ms;
  -web-kit-transition: 100ms width ease 100ms;
}
.annonce:before {
  position: absolute;
  width: 2px;
  height: 0;
  content: '';
  background: #1C69D4;
  bottom: -2px;
  left: -2px;
  transition: 100ms height ease 0ms;
  -web-kit-transition: 100ms height ease 0ms;
}
.annonce-conteneur:hover {
  border-color: transparent;
  background: #fff;
}
.annonce-conteneur:hover:before {
  width: 464px;
  transition: 100ms width ease 0ms;
  -web-kit-transition: 100ms width ease 0ms;
}
.annonce-conteneur:hover:after {
  height: 194px;
  transition: 100ms height ease 100ms;
  -web-kit-transition: 100ms height ease 100ms;
}
.annonce-conteneur:hover .annonce:after {
  width: 464px;
  transition: 100ms width ease 200ms;
  -web-kit-transition: 100ms width ease 200ms;
}
.annonce-conteneur:hover .annonce:before {
  height: 194px;
  transition: 100ms height ease 300ms;
  -web-kit-transition: 100ms height ease 300ms;
}

/*Demo purpose*/

body {
  background: gray;
}
.annonce {
  margin: auto;
}

Comments