HTML Card Layout: French Website Snippet

862 Skyrreum

<body>
  <article>
    <section class="card">
      <div class="text-content">
        <h3>Titre de votre carte</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
           Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>  
        <a href="https://www.web-leb.com/code">Inscrivez-vous maintenant</a>
      </div>
      <div class="visual">
        <img src="data:image/jpeg;base64,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" alt="" />
      </div>
    </section> 
  </article>
</body>
</html>

CSS

@import url(https://fonts.googleapis.com/css?family=Poppins:400,300,500);
html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
body {
  margin: 0;
  padding: 96px;
  font-size: 21px;
  background: #fff;
  color: #000;
  font-family: "Poppins", sans-serif;
}
section.card {
  background: #460000;
  background: -webkit-linear-gradient(to right, #e01c1c, #460000); 
  background: linear-gradient(to right, #e01c1c, #460000);
  border-radius: 24px 24px 24px 48px;
  padding: 48px 48px 48px 308px;
  margin: 84px 0;
  min-width: 640px;
  display: flex;
  flex-direction: row;
  align-self: flex-start;
  position: relative;
  box-shadow: 5px 0 0 0 rgba(204,204,204,0.3), -5px 0 0 0 rgba(204,204,204,0.3), 0 5px 0 0 rgba(204,204,204,0.3);
}
section.card .text-content {
  display: flex;
  flex-direction: column;
  width:calc(60vw - 192px);
}
section.card .text-content h3 {
  margin: 0;
  font-size: 1.5em;
  max-width: 20ch;
  color: #fff;
}
section.card .text-content p {
  margin: 25px 0 24px;
  color: #fff;
}
section.card .text-content a {
  border: 3px solid #f2f2f2;
  color: #ffffff;
  align-self: flex-start;
  text-decoration: none;
  padding: 16px 32px;
  border-radius: 12px;
  transition: 400ms all;
}
section.card .text-content a:hover {
  background: #5e0505;
  color: white;
}
section.card .visual {
  width: 240px;
  height: 100%;
  position: absolute;
  top: -24px;
  left: 24px;
  overflow: hidden;
  border-radius: 24px;
}
section.card .visual img {
  height: 110%;
}
article {
  margin: auto;
  display: block;
  width:calc(60vw + 248px);
  max-width:calc(920px + 248px);
  min-width:calc(640px + 248px); 
}
@media all and (max-width: 1100px) {
  body {
    padding: 96px 48px 24px;
  }
  article {
    width: 100%;
    min-width: 100%;
  }
  section.card {
    min-width: 100%;
  }
  section.card .text-content {
    width: 100%;
  }
}
@media all and (max-width: 720px) {
  body {
    padding: 48px 24px 0;
  }
  section.card {
    margin: 64px 0;
    padding: 88px 36px 36px;
    flex-direction: column;
    border-radius: 24px;
  }
  section.card .text-content h3 {
    max-width:calc(100% - 150px);
    font-size: 1em;
  }
  section.card .text-content p,
  section.card .text-content a {
    font-size: 0.8em;
  }
  section.card .visual {
    width: 150px;
    height: 150px;
    right: 16px;
    left: auto;
    border-radius: 50%;
  }
  section.card .visual img{
    width: 100%;
    height: auto;
    }
}

HTML Card Layout: French Website Snippet

Recommended