Created
July 18, 2022 04:34
-
-
Save jrichardsz/8a5b7e651f156a3ece9eae2923b3338c to your computer and use it in GitHub Desktop.
bootstrap cards
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html class="no-js" xmlns="http://www.w3.org/1999/html" | |
xmlns="http://www.w3.org/1999/html"> | |
<head> | |
<meta charset="utf-8"> | |
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> | |
<title>Dataset Sound Collector</title> | |
<meta name="description" content=""> | |
<meta name="viewport" content="width=device-width"> | |
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> | |
<!-- <link rel="stylesheet" href="css/main.css"> --> | |
<link href="https://res.cloudinary.com/finnhvman/raw/upload/matter/matter-0.2.2.css" rel="stylesheet"> | |
</head> | |
<body> | |
<div class="header-container"> | |
<header class="wrapper clearfix"> | |
<h1 class="title">Dataset Sound Collector</h1> | |
</header> | |
</div> | |
<div class="main-container"> | |
<div class="main wrapper clearfix"> | |
<p>Web site to collect sounds using the microphone and store them in a specific google drive folder</p> | |
<p>Choose one item and ear the expected sound</p> | |
<p>Click on record button and send the audtio</p> | |
<button class="matter-button-contained">Lear more</button> | |
</div> | |
</div> | |
<div class="container"> | |
<div class="row"> | |
<div id="one" class="col-lg-4 col-md-6 col-sm-12"> | |
<div class="card"> | |
<img class="card-img-top" src="https://images.unsplash.com/photo-1542349314-e669385af82f?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=df68e56439f19e882dcb69b4bdc3109e&auto=format&fit=crop&w=500&q=60" alt="Card image cap"> | |
<div class="card-body"> | |
<h5 class="card-title">Clouds</h5> | |
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> | |
<button class="btn btn-primary" id="startRecording">Start recording</button> | |
<button class="btn btn-primary" id="stopRecording" disabled>Stop recording</button> | |
</div> | |
</div> | |
</div> | |
<div id="two" class="col-lg-4 col-md-6 col-sm-12"> | |
<div class="card"> | |
<img class="card-img-top" src="https://images.unsplash.com/photo-1542365672-a1d36140ca73?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=a866f8b5b87b1c14c1efed1c6ed44f11&auto=format&fit=crop&w=500&q=60" alt="Card image cap"> | |
<div class="card-body"> | |
<h5 class="card-title">Sea</h5> | |
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> | |
<a href="ferminrp.com" target="_blank" class="btn btn-primary">Go somewhere</a> | |
</div> | |
</div> | |
</div> | |
<div id="three" class="col-lg-4 col-md-6 col-sm-12"> | |
<div class="card"> | |
<img class="card-img-top" src="https://images.unsplash.com/photo-1542366065-e17e94633155?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=7b42f93193a8b126c33d40943065e464&auto=format&fit=crop&w=500&q=60" alt="Card image cap"> | |
<div class="card-body"> | |
<h5 class="card-title">Dog</h5> | |
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> | |
<a href="ferminrp.com" target="_blank" class="btn btn-primary">Go somewhere</a> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
<div class="footer-container"> | |
<footer class="wrapper"> | |
<h3>About Us!</h3> | |
<a href="#">JRichardsz</a> | |
</footer> | |
</div> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment