Making cards selectable?

HTML & CSS
2

Hi there UpstateLeafPeeper,

here is an example for you to play around with…

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<link rel="stylesheet" href="screen.css" media="screen">

<style media="screen">
html {
    box-sizing: border-box;
 }

*, *::before, *::after {
    box-sizing: inherit;
 }

body {
    background-color: #f9f9f9;
    font: 100% / 162% BlinkMacSystemFont, -apple-system, 'Segoe UI', roboto, helvetica, arial, sans-serif;
 }
h1 {
    line-height: 1em;
    font-size: 1.5em;
    text-align: center;
 }

#container {
    display: flex;
    justify-content: space-around;
 }

#container > div {
    position: relative;
    width: 20em;
    padding: 1em;
    margin: 0.5em;
    border: 1px solid #999;
    border-radius: 0.75em;
    background-color: #fff;
    box-shadow: inset 0  0 1em rgba( 0, 0, 0, 0.3 ),
          0.25em 0.25em 0.25em rgba( 0, 0, 0, 0.4 );
 }

#container > div a {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba( 255, 0, 0, 0.05 );
 }

#container > div:nth-of-type(2) a {
    background-color: rgba( 0, 255, 0, 0.05 );
 }

#container > div:nth-of-type(3) a {
    background-color: rgba( 0, 0, 255, 0.05 );
 }

@media ( max-width: 40em ) {
#container {
    display: block;
  }
#container > div {
    width: 100%;
    margin: 0.5em 0;
  }
 }
</style>

</head>
<body>
 
 <h1>Page Description Here</h1>
 <div id="container">
  <div>
   <h2>box description</h2>
   <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.  
    Curabitur sit amet sem sed libero bibendum tempus faucibus       
    quis mi. Nulla rhoncus vel ipsum in volutpat.
   </p>
   <a href="https://developer.mozilla.org/en-US/"></a>
  </div>

  <div>
   <h2>box description</h2>
   <p>
    Donec vehicula diam non leo efficitur, id euismod odio 
    tincidunt. Vivamus auctor viverra purus vitae lobortis. Sed 
    et libero non diam tempor sagittis.
   </p>
   <a href="https://duckduckgo.com/"></a>
  </div>

  <div>
   <h2>box description</h2>
   <p>
    Nam venenatis diam ante, et cursus elit porttitor at. Morbi 
    mattis leo at ex vehicula, non vestibulum ligula aliquam. 
   </p>
   <a href="https://www.example.com"></a>
  </div>

 <!-- #container --></div>

</body>
</html>

coothead

1 Like