testFront/cards.html at master · LoWbr/testFront · GitHub

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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
	<html>

	<head>
	    <meta charset="utf-8">
	    <meta http-equiv="X-UA-Compatible" content="IE=edge">
	    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
	        integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
	    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;400&display=swap" rel="stylesheet">
	    <link href="./style.css" rel="stylesheet">
	    <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/solid.js"
	        integrity="sha384-tzzSw1/Vo+0N5UhStP3bvwWPq+uvzCMfrN1fEFe+xBmv1C/AtVX5K0uZtmcHitFZ" crossorigin="anonymous">
	    </script>
	    <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js"
	        integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY" crossorigin="anonymous">
	    </script>
	</head>

	<body>
	    <div class="container">
	        <br />
	        <div class="row">
	            <div class="col-sm-4">
	                <article class="card card--unmatched mb-3 ">
	                    <header class="card__header">
	                        <img class="card__img" src="https://source.unsplash.com/random/225×175/?running" width="225"
	                            height="175" alt="Card image cap">
	                        <span class="card__status card__status--unmatched">No Match</span>
	                    </header>
	                    <div class="card__content">
	                        <span class="card__subtitle mb-2 text-muted">Type</span>
	                        <h2 class="card__title">Activity Title</h2>
	                        <p class="card__text">This is a longer card with supp....</p>
	                        <a href="#" class="card__btn btn btn-primary stretched-link">Show</a>
	                    </div>
	                </article>
	            </div>
	            <div class="col-sm-4">
	                <article class="card card--matched mb-3 ">
	                    <header class="card__header">
	                        <img class="card__img" src="https://source.unsplash.com/random/225×175/?kayak" width="225"
	                            height="175" alt="Card image cap">
	                        <span class="card__status card__status--matched">Available!</span>
	                    </header>
	                    <div class="card__content">
	                        <span class="card__subtitle mb-2 text-muted">Type</span>
	                        <h2 class="card__title">Activity Title</h2>
	                        <p class="card__text">This is a longer card with supp....</p>
	                        <a href="#" class="card__btn btn btn-primary stretched-link">Show</a>
	                    </div>
	                </article>
	            </div>
	        </div>
	    </div>
	</body>

	</html>