Skip to content

Instantly share code, notes, and snippets.

@JasperEssien2

JasperEssien2/html_card.html

Created March 2, 2023 10:56
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save JasperEssien2/f759f41fa8565bb163d58388cf3e79a0 to your computer and use it in GitHub Desktop.
Save JasperEssien2/f759f41fa8565bb163d58388cf3e79a0 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
html_card.html
<!DOCTYPE html>
<html lang="en">
<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://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css">
<link rel="stylesheet" href="delivery1.css">
<title>Delivery -1</title>
<style>
body{
background-color: rgb(235, 235, 235, 1);
}
.main-container{
align-items: center;
margin-left: 15%;
margin-right: 15%;
margin-top: 10%;
}
.inner-container{
border-radius: 24px;
background-color: white;
color: black;
height: 40;
width: 70%;
margin: auto;
display: block;
align-items: center;
padding-left: 24px;
padding-right: 24px;
padding-top: 20px;
padding-bottom: 20px;
}
.palgo-icon{
display: block;
margin-left: auto;
margin-right: auto;
}
.subtext{
font-family: Helvetica Neue;
font-size: 16px;
font-weight: 400;
line-height: 19px;
letter-spacing: 0em;
text-align: center;
}
button{
margin-top: 24px;
margin-bottom: 24px;
background-color: rgba(252, 190, 66, 1);
border-radius: 9px;
padding:14px;
border: none;
width: 100%;
color: black;
font-size: 14px;
font-weight: bold;
cursor: pointer;
}
.heading-text{
font-family: 'Helvetica Neue
position: relative;
left: 65px;
top: 17px;
}
.wait{
color: rgb(228, 161, 18);
position: relative;
}
.icon{
position: relative;
left: 2px;
}
.regard{
font-family: Helvetica Neue;
font-size: 12px;
font-weight: 400;
line-height: 20px;
letter-spacing: 0em;
text-align: center;
color: rgba(8, 8, 8, 0.56);
}
i{
position: relative;
left: -9px;
}
.table {
display: table;
width: 100%;
}
.table-row {
display: table-row;
}
.table-cell {
display: table-cell;
border-bottom: 1px solid rgba(8, 8, 8, 0.12);
padding: 12px;
font-family: Helvetica Neue;
font-size: 14px;
font-weight: 400;
line-height: 18px;
letter-spacing: 0em;
text-align: left;
}
.bold-text{
font-weight: 700;
}
.align-right {
text-align: right;
}
</style>
</head>
<body>
<div class="main-container">
<div class="heading-text">
<img src="http://cdn.mcauto-images-production.sendgrid.net/2b89d178f9700e42/1b9a4133-3168-48b2-a54b-1fdfcd642b05/110x52.png" alt="Palgo Icon" class="palgo-icon">
</div>
<p class="subtext">You made and appointment for Discovery. Please wait for <br>the lab to respond to your request</p>
<div class="inner-container">
<div class="table">
<div class="table-row">
<div class="table-cell">Service</div>
<div class="table-cell align-right">Discover</div>
</div>
<div class="table-row">
<div class="table-cell">Status</div>
<div class="table-cell align-right" >
<span class="wait"><i class="bi bi-clock"></i>Waiting for response</span>
</div>
</div>
<div class="table-row">
<div class="table-cell">Date</div>
<div class="table-cell align-right">
<span class="date-text"></span> <span class="date">Mon Feb 15</span> <span class="time">10:00 -
11:00</span>
</div>
</div>
<div class="table-row">
<div class="table-cell">Clinic</div>
<div class="table-cell align-right">Rabdox Health Labs</div>
</div>
<div class="table-row">
<div class="table-cell">Address</div>
<div class="table-cell align-right">
<span></span> <span class="rd">100 Chelsea RD</span> <span class="wap">Wappingers Fals</span>
</div>
</div>
<div class="table-row">
<div class="table-cell bold-text">Total Price</div>
<div class="table-cell align-right bold-text">$395.00</div>
</div>
</div>
<button>View Order</button>
</div>
</div>
<p class="regard">Warm Regards, The PalGo Team</p>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment