Bootstrap Snippet card using HTML CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="shortcut icon" type="image/x-icon" href="https://static.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico" />
<link rel="mask-icon" type="" href="https://static.codepen.io/assets/favicon/logo-pin-8f3771b1072e3c38bd662872f6b673a722f4b3ca2421637d5596661b4e2132cc.svg" color="#111" />
<title>CodePen - Event Card - Grid</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
    </style>
<script>
  window.console = window.console || function(t) {};
</script>
<script>
  if (document.location.search.match(/type=embed/gi)) {
    window.parent.postMessage("resize", "*");
  }
</script>
</head>
<body translate="no">
<main class="grid-container">
<div class="grid-item">
<div class="wrapper">
<div class="card-container">
<div class="flip-animation">
<section class="item-card">
<div class="item-summary">
<h2 class="title">The Paper Kites</h2>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
      /* 1600 / 16 = 100em 
/*  mobile 90% event  */
.grid-container {
    max-width: 100em;
    margin: 2rem auto;
    padding: 2%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
}
.grid-item {
  width: 90%;
  float: none;
  margin: 5% auto;  
}
@supports (display: grid) {
    .grid-container {
        display: grid;
        grid-gap: 3%;
        grid-template-columns: repeat(1, auto);
        grid-template-rows: auto;
    }
    .grid-item {
        grid-column: span 1;
        grid-row: auto;
    }
}
/*  440/16 = 27.5 */
@media screen and (min-width: 27.5rem) {
    .grid-item {
    width: 70%;
    }
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"card"
Bootstrap 4.1.1 Snippet by tieusuquay79

Related: See More

Questions / Comments:

"card" Bootstrap 4.1.1 Snippet by tieusuquay79

Related: See More

Questions / Comments:

"card"
Bootstrap 4.1.1 Snippet by tieusuquay79