对齐-内容和对齐-不使用柔性显示的项目
对齐-内容和对齐-不使用柔性显示的项目
提问于 2022-08-15 07:07:20
在页脚，我想在边距的两边对齐这个.contact div和.subscription div，但是当.contact在flex开始时证明自己是正确的，.subscription div在flex端并不是正当的。你能指出我的密码出了什么问题吗？
<!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">
<title>Cocohealth</title>
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<link rel="stylesheet" href="styles.css">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
</head>
<body>
<main class="container-fluid">
<section id="heading">
<header class="row" id="header">
<div id="logo" class="col-2">
<a class="navbar-brand align-self-center justify-content-start" href="#">
<img id="header-img" src="https://www.productsofmyanmar.asia/wp-content/uploads/2017/07/mya-ayar-logo.png"
alt="Mya Ayar logo" width="180" height="80" style="border-radius: 50%;"/> </a>
</div>
<div class="col-6"></div>
<div id="navigation" class="col-4">
<nav class="container-fluid navbar navbar-expand-sm justify-content-end" id="nav-bar">
<button type="button"
data-bs-toggle="collapse"
data-bs-target="#collapseNav"
class="navbar-toggler justify-self-end align-self-center"
aria-controls="collapseNav"
aria-expanded="false"
aria-label="Toggle Navigation">
<span class="navbar-toggler-icon "></span>
</button>
<div class="collapse navbar-collapse" style="border-radius: 3px; text-align: center;" id="collapseNav">
<ul class="navbar-nav align-self-center">
<li class="nav-item active"><a class="nav-link color" href="#home">HOME</a></li>
<li class="nav-item"><a class="nav-link color" href="#benefits">BENFITS</a></li>
<li class="nav-item"><a class="nav-link color" href="#pricing">PRICING</a></li>
<li class="nav-item"><a class="nav-link color" href="#contact">CONTACT</a></li>
</div>
</ul>
</nav>
</div>
</header>
</section>
<section id="content" class="row">
<section id="home">
<div class="text-center title">
<br/>
<h1>
COCOHEALTH
</h1>
<p>
Organic Extra Virgin Coconut Oil
</p>
</div>
<br/>
<div id="description-para">
<p class="description">
Cocohealth is an excellent, high quality extra virgin coconut handcrafted by cold pressed modified natural fermentation method at a FDA approved production Facility.
Due to the use of free range organic coconuts, freshness, careful handling in all stages of
processing and following all GMP standards, our Cocohealth has less FFA (i.e. free fatty acid)
and more MCTs (Medium Chain Triglycerides) than average VCO.
<br/><br/>Therefore, it rivals any other
virgin coconut oil for in taste and quality hence the word 'extra', but retains a mild coconut
flavor and aroma. It is purely organic, as Myanmar coconut trees are free range in nature and
none of the coconut farmer uses fertilizers and other chemicals. This oil is crystal clear and
colorless in the liquid state and an immaculate white when solid. No chemicals or heat are used
in any stage of the process.<br/>
</p>
</div><br/>
<div id="carouselIndicators" class="carousel slide margin" data-bs-ride="true">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
<button type="button" data-bs-target="#carouselIndicators" data-bs-slide-to="3" aria-label="Slide 4"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://www.productsofmyanmar.asia/wp-content/uploads/2017/07/06.jpg" class="d-block img-fluid" alt="...">
</div>
<div class="carousel-item">
<img src="https://www.productsofmyanmar.asia/wp-content/uploads/2017/08/01-2.jpg" class="d-block img-fluid" alt="...">
</div>
<div class="carousel-item">
<img src="https://www.productsofmyanmar.asia/wp-content/uploads/2017/08/05-1.jpg" class="d-block img-fluid" alt="...">
</div>
<div class="carousel-item">
<img src="https://www.productsofmyanmar.asia/wp-content/uploads/2017/08/06-1.jpg" class="d-block img-fluid" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselIndicators" data-bs-slide="prev">
<span class="carousel-control-prev-icon" style="color:#2B7A0B;" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselIndicators" data-bs-slide="next">
<span class="carousel-control-next-icon" style="color:#2B7A0B;" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</section>
<section id="benefits">
<br/><br/>
<h2>Health Benefits of Consuming our Cocohealth</h2>
<br/>
<div class="row">
<div class="health-benefits col-lg-5 col-xl-5 col-md-12 d-flex
justify-content-xl-start justify-content-lg-start justify-content-md-center justify-content-sm-center" id="health-benefits">
<br/>
<ul>
<li>Improves or Reverses Alzheimer's disease</li>
<li>Improves Type 2 AND Type 1 Diabetes</li>
<li>Reduces Heart Diseases</li>
<li>Promotes Weight Loss</li>
<li>Supports the Immune System</li>
<li>Improves or Heals Many Skin Diseases</li>
<li>Conditions and Strengthens Hair</li>
<li>Provides Peak Performance Energy</li>
<li>Kills Candida Fungus</li>
<li>Helps with Hypothyroidism</li>
<li> Kills many Bacteria AND Viruses</li>
</ul>
</div>
<div class="col-lg-7 col-xl-7 col-md-12 embed-responsive d-flex justify-content-lg-end
justify-content-xl-end justify-content-md-center justify-content-sm-center" id=
"frame-container">
<iframe class="embed-responsive-item justify-self-end" src="https://www.facebook.com/plugins/video.php?height=314&href=https%3A%2F%2Fwww.facebook.com%2F104065527979316%2Fvideos%2F315100642957493%2F&show_text=false&width=560&t=0"
width="500" height="314"
style="border:none;overflow:hidden"
scrolling="no"
frameborder="0"
allowfullscreen="true"
allow="autoplay;
clipboard-write; encrypted-media; picture-in-picture; web-share"
></iframe>
</div>
</div>
</section>
<section id="pricing">
<h2>Available Products of Cocohealth</h2>
<div class="d-flex flex-row" id="card-container">
<div class="card flex-child" style="width: 16rem;">
<img class="card-img-top" src="https://medicarehb.com.mm/wp-content/uploads/2022/05/192773.jpg" alt="cocohealth product-3">
<div class="card-body text-center" style="border-bottom: 1px solid #2b7a0b;">
<h5 class="card-title ">Cocohealth Body Moisture Lotion (Fruity peach scent)</h5>
<p class="card-text">9000 MMK</p>
</div>
<div class="card-body text-center">
<button class="btn btn-block" type="button" style="background-color:#2B7A0B; color:white;">BUY</button>
</div>
</div>
<div class="card flex-child" style="width: 16rem;">
<img class="card-img-top" src="https://medicarehb.com.mm/wp-content/uploads/2022/05/192771.jpg" alt="cocohealth product-4">
<div class="card-body text-center" style="border-bottom: 1px solid #2b7a0b;">
<h5 class="card-title ">Cocohealth Body Moisture Lotion (Sakura scent)</h5>
<p class="card-text">9000 MMK</p>
</div>
<div class="card-body text-center">
<button class="btn btn-block" type="button" style="background-color:#2B7A0B; color:white;">BUY</button>
</div>
</div>
<div class="card flex-child" style="width: 16rem;">
<img class="card-img-top" src="https://medicarehb.com.mm/wp-content/uploads/2022/05/192772.jpg" alt="cocohealth product-5">
<div class="card-body text-center" style="border-bottom: 1px solid #2b7a0b;">
<h5 class="card-title ">Cocohealth Body Moisture Lotion (Tea-leaf scent)</h5>
<p class="card-text">9000 MMK</p>
</div>
<div class="card-body text-center">
<button class="btn btn-block" type="button" style="background-color:#2B7A0B; color:white;">BUY</button>
</div>
</div>
<div class="card flex-child" style="width: 16rem;">
<img class="card-img-top" src="https://medicarehb.com.mm/wp-content/uploads/2022/06/175305.jpg" alt="cocohealth product-1">
<div class="card-body text-center" style="border-bottom: 1px solid #2b7a0b;">
<h5 class="card-title ">Cocohealth Cold Pressed</h5>
<p class="card-text">8000 MMK</p>
</div>
<div class="card-body text-center">
<button class="btn btn-block" type="button" style="background-color:#2B7A0B; color:white;">BUY</button>
</div>
</div>
<div class="card flex-child" style="width: 16rem;">
<img class="card-img-top" src="https://medicarehb.com.mm/wp-content/uploads/2022/01/180149-600x600.jpg" alt="cocohealth product-2">
<div class="card-body text-center" style="border-bottom: 1px solid #2b7a0b;">
<h5 class="card-title">Cocohealth Night Serum</h5>
<p class="card-text">6000 MMK</p>
</div>
<div class="card-body text-center">
<button class="btn btn-block" type="button" style="background-color:#2B7A0B; color:white;">BUY</button>
</div>
</div>
</div>
</section>
</section>
<section id="footer">
<footer class="row">
<div class="col-6 d-flex justify-self-start align-self-center">
<table class="table table-sm table-borderless">
<tr>
<td colspan="2">N0.55, Sein Lei Kan Thar Street,</td>
</tr>
<tr>
<td colspan="2">Ywar Thar Gyi Industrial Zone,</td>
</tr>
<tr>
<td colspan="2">South Dagon T/S,</td>
</tr>
<tr>
<td colspan="2">Yangon, Myanmar</td>
</tr>
</table>
</div>
<div class="col-6 d-flex justify-content-end align-content-center">
<table class="table table-sm table-borderless">
<form id="form" action="https://www.freecodecamp.com/email-submit">
<tr>
<td colspan="2"><label for="email">Get More Updates : </label></td>
</tr>
<tr>
<td><input class="form-control" type="email" placeholder="jackson_wang@gmail.com" style="max-width:300px;"></td>
</tr>
<tr>
<td><input value="Subscribe" type="submit" class="btn" id="submit">
</tr>
<tr>
<td colspan="2"><label>Phone : +959 4211 44724</label></td>
</tr>
<tr>
<td colspan="2">E-mail : info@mya-ayer.com</td>
</tr>
</form>
</table>
</div>
</footer>
</section>
</main>
</body>
</html>@import url('https://fonts.googleapis.com/css2?family=Amita:wght@400;700&family=Raleway:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Amita:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=David+Libre:wght@500&display=swap');
* {
margin:0;
padding:0;
scroll-padding-top: 70px;
scroll-behavior: smooth;
}
main {
background: #FDFC47; /* fallback for old browsers */
background: -webkit-linear-gradient(to bottom, #e8fd88, #ffffff,#e8fd88); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to bottom, #e8fd88, #ffffff,#e8fd88); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
header {
background: #56ab2f; /* fallback for old browsers */
background: -webkit-linear-gradient(to bottom, #a8e063, #56ab2f); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to bottom, #a8e063, #56ab2f); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
position: fixed;
height: 80px;
right: 0;
left: 0;
z-index: 3;
}
.color {
margin:5px;
border-radius: 10px;
font-family: 'Raleway',serif;
color:white;
}
.color:hover {
color:bisque;
}
@media only screen and (max-width: 575.98px) {
#collapseNav {
background: rgb(66, 172, 25,0.7);
}
.color:hover {
background-color: white;
color:#2B7A0B;
}
.contact, .subscription {
color:white;
font-family: 'Raleway',serif;
font-size: 13px;
margin-top:10px;
}
}
#home {
margin-top: 70px;
}
.title {
grid-area: title;
justify-self: center;
align-self:center;
}
.title h1 {
font-family: 'Amita',cursive;
font-size: 3rem;
color: #2B7A0B;
margin: 0;
}
.title p {
font-family: 'Raleway',serif;
font-size: 17px;
font-weight: bold;
font-style: italic;
color: #b9bb48;
margin: 0;
}
.description {
color: #797a15;
font-family: 'Raleway',serif;
font-size: 16px;
margin:0 20px;
}
.carousel-item img {
margin:0 auto;
max-height: 450px;
}
h2 {
font-family: 'Raleway',serif;
color: #2B7A0B;
text-align: center;
}
iframe {
margin:10px;
max-width: 500px;
}
.health-benefits {
color:#2B7A0B;
font-family: 'Raleway',serif;
font-size: 16px;
}
.health-benefits ul {
list-style: square;
}
#card-container {
margin:20px 30px;
flex-wrap:wrap;
justify-content:space-evenly;
}
.flex-child {
max-width: 17rem;
min-width:16rem;
margin:40px;
}
footer {
background: #56ab2f; /* fallback for old browsers */
background: -webkit-linear-gradient(to top, #a6e45b, #56ab2f); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to top, #a6e45b, #56ab2f); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
#submit {
color: #2B7A0B;
background-color:white;
}
#submit:hover {
background-color: #2B7A0B;
color:white;
}，我不知道是不是因为我使用了引导类。我试着对内容结束和自结束进行调整，但是.subscription div并没有坚持正确的边距区域，相反，它仍然显示在列的起始位置。
回答 1
Stack Overflow用户
回答已采纳
发布于 2022-08-16 12:04:25
给你..。
改变这个..。
<table class="table table-sm table-borderless">
...
</table>...to这个。
<table class="table table-sm table-borderless d-flex justify-content-end">
...
</table>另外，将min-width: 215px;添加到<input class="form-control" type="email" placeholder="jackson_wang@gmail.com">中。
看下面的片段。
@import url('https://fonts.googleapis.com/css2?family=Amita:wght@400;700&family=Raleway:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Amita:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=David+Libre:wght@500&display=swap');
* {
margin: 0;
padding: 0;
scroll-padding-top: 70px;
scroll-behavior: smooth;
}
main {
background: #FDFC47;
/* fallback for old browsers */
background: -webkit-linear-gradient(to bottom, #e8fd88, #ffffff, #e8fd88);
/* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to bottom, #e8fd88, #ffffff, #e8fd88);
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
header {
background: #56ab2f;
/* fallback for old browsers */
background: -webkit-linear-gradient(to bottom, #a8e063, #56ab2f);
/* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to bottom, #a8e063, #56ab2f);
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
position: fixed;
height: 80px;
right: 0;
left: 0;
z-index: 3;
}
.color {
margin: 5px;
border-radius: 10px;
font-family: 'Raleway', serif;
color: white;
}
.color:hover {
color: bisque;
}
@media only screen and (max-width: 575.98px) {
#collapseNav {
background: rgb(66, 172, 25, 0.7);
}
.color:hover {
background-color: white;
color: #2B7A0B;
}
.contact,
.subscription {
color: white;
font-family: 'Raleway', serif;
font-size: 13px;
margin-top: 10px;
}
}
#home {
margin-top: 70px;
}
.title {
grid-area: title;
justify-self: center;
align-self: center;
}
.title h1 {
font-family: 'Amita', cursive;
font-size: 3rem;
color: #2B7A0B;
margin: 0;
}
.title p {
font-family: 'Raleway', serif;
font-size: 17px;
font-weight: bold;
font-style: italic;
color: #b9bb48;
margin: 0;
}
.description {
color: #797a15;
font-family: 'Raleway', serif;
font-size: 16px;
margin: 0 20px;
}
.carousel-item img {
margin: 0 auto;
max-height: 450px;
}
h2 {
font-family: 'Raleway', serif;
color: #2B7A0B;
text-align: center;
}
iframe {
margin: 10px;
max-width: 500px;
}
.health-benefits {
color: #2B7A0B;
font-family: 'Raleway', serif;
font-size: 16px;
}
.health-benefits ul {
list-style: square;
}
#card-container {
margin: 20px 30px;
flex-wrap: wrap;
justify-content: space-evenly;
}
.flex-child {
max-width: 17rem;
min-width: 16rem;
margin: 40px;
}
footer {
background: #56ab2f;
/* fallback for old browsers */
background: -webkit-linear-gradient(to top, #a6e45b, #56ab2f);
/* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to top, #a6e45b, #56ab2f);
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
#submit {
color: #2B7A0B;
background-color: white;
}
#submit:hover {
background-color: #2B7A0B;
color: white;
}<!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">
<title>Cocohealth</title>
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<link rel="stylesheet" href="styles.css">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
</head>
<body>
<main class="container-fluid">
<section id="heading">
<header class="row" id="header">
<div id="logo" class="col-2">
<a class="navbar-brand align-self-center justify-content-start" href="#">
<img id="header-img" src="https://www.productsofmyanmar.asia/wp-content/uploads/2017/07/mya-ayar-logo.png" alt="Mya Ayar logo" width="180" height="80" style="border-radius: 50%;" /> </a>
</div>
<div class="col-6"></div>
<div id="navigation" class="col-4">
<nav class="container-fluid navbar navbar-expand-sm justify-content-end" id="nav-bar">
<button type="button" data-bs-toggle="collapse" data-bs-target="#collapseNav" class="navbar-toggler justify-self-end align-self-center" aria-controls="collapseNav" aria-expanded="false" aria-label="Toggle Navigation">
<span class="navbar-toggler-icon "></span>
</button>
<div class="collapse navbar-collapse" style="border-radius: 3px; text-align: center;" id="collapseNav">
<ul class="navbar-nav align-self-center">
<li class="nav-item active"><a class="nav-link color" href="#home">HOME</a></li>
<li class="nav-item"><a class="nav-link color" href="#benefits">BENFITS</a></li>
<li class="nav-item"><a class="nav-link color" href="#pricing">PRICING</a></li>
<li class="nav-item"><a class="nav-link color" href="#contact">CONTACT</a></li>
</ul>
</div>
</nav>
</div>
</header>
</section>
<section id="content" class="row">
<section id="home">
<div class="text-center title">
<br/>
<h1>
COCOHEALTH
</h1>
<p>
Organic Extra Virgin Coconut Oil
</p>
</div>
<br/>
<div id="description-para">
<p class="description">
Cocohealth is an excellent, high quality extra virgin coconut handcrafted by cold pressed modified natural fermentation method at a FDA approved production Facility. Due to the use of free range organic coconuts, freshness, careful handling in all stages
of processing and following all GMP standards, our Cocohealth has less FFA (i.e. free fatty acid) and more MCTs (Medium Chain Triglycerides) than average VCO.
<br/><br/>Therefore, it rivals any other virgin coconut oil for in taste and quality hence the word 'extra', but retains a mild coconut flavor and aroma. It is purely organic, as Myanmar coconut trees are free range in nature and none of the
coconut farmer uses fertilizers and other chemicals. This oil is crystal clear and colorless in the liquid state and an immaculate white when solid. No chemicals or heat are used in any stage of the process.<br/>
</p>
</div><br/>
<div id="carouselIndicators" class="carousel slide margin" data-bs-ride="true">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
<button type="button" data-bs-target="#carouselIndicators" data-bs-slide-to="3" aria-label="Slide 4"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://www.productsofmyanmar.asia/wp-content/uploads/2017/07/06.jpg" class="d-block img-fluid" alt="...">
</div>
<div class="carousel-item">
<img src="https://www.productsofmyanmar.asia/wp-content/uploads/2017/08/01-2.jpg" class="d-block img-fluid" alt="...">
</div>
<div class="carousel-item">
<img src="https://www.productsofmyanmar.asia/wp-content/uploads/2017/08/05-1.jpg" class="d-block img-fluid" alt="...">
</div>
<div class="carousel-item">
<img src="https://www.productsofmyanmar.asia/wp-content/uploads/2017/08/06-1.jpg" class="d-block img-fluid" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselIndicators" data-bs-slide="prev">
<span class="carousel-control-prev-icon" style="color:#2B7A0B;" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselIndicators" data-bs-slide="next">
<span class="carousel-control-next-icon" style="color:#2B7A0B;" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</section>
<section id="benefits">
<br/><br/>
<h2>Health Benefits of Consuming our Cocohealth</h2>
<br/>
<div class="row">
<div class="health-benefits col-lg-5 col-xl-5 col-md-12 d-flex
justify-content-xl-start justify-content-lg-start justify-content-md-center justify-content-sm-center" id="health-benefits">
<br/>
<ul>
<li>Improves or Reverses Alzheimer's disease</li>
<li>Improves Type 2 AND Type 1 Diabetes</li>
<li>Reduces Heart Diseases</li>
<li>Promotes Weight Loss</li>
<li>Supports the Immune System</li>
<li>Improves or Heals Many Skin Diseases</li>
<li>Conditions and Strengthens Hair</li>
<li>Provides Peak Performance Energy</li>
<li>Kills Candida Fungus</li>
<li>Helps with Hypothyroidism</li>
<li> Kills many Bacteria AND Viruses</li>
</ul>
</div>
<div class="col-lg-7 col-xl-7 col-md-12 embed-responsive d-flex justify-content-lg-end
justify-content-xl-end justify-content-md-center justify-content-sm-center" id="frame-container">
<iframe class="embed-responsive-item justify-self-end" src="https://www.facebook.com/plugins/video.php?height=314&href=https%3A%2F%2Fwww.facebook.com%2F104065527979316%2Fvideos%2F315100642957493%2F&show_text=false&width=560&t=0" width="500" height="314"
style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowfullscreen="true" allow="autoplay;
clipboard-write; encrypted-media; picture-in-picture; web-share"></iframe>
</div>
</div>
</section>
<section id="pricing">
<h2>Available Products of Cocohealth</h2>
<div class="d-flex flex-row" id="card-container">
<div class="card flex-child" style="width: 16rem;">
<img class="card-img-top" src="https://medicarehb.com.mm/wp-content/uploads/2022/05/192773.jpg" alt="cocohealth product-3">
<div class="card-body text-center" style="border-bottom: 1px solid #2b7a0b;">
<h5 class="card-title ">Cocohealth Body Moisture Lotion (Fruity peach scent)</h5>
<p class="card-text">9000 MMK</p>
</div>
<div class="card-body text-center">
<button class="btn btn-block" type="button" style="background-color:#2B7A0B; color:white;">BUY</button>
</div>
</div>
<div class="card flex-child" style="width: 16rem;">
<img class="card-img-top" src="https://medicarehb.com.mm/wp-content/uploads/2022/05/192771.jpg" alt="cocohealth product-4">
<div class="card-body text-center" style="border-bottom: 1px solid #2b7a0b;">
<h5 class="card-title ">Cocohealth Body Moisture Lotion (Sakura scent)</h5>
<p class="card-text">9000 MMK</p>
</div>
<div class="card-body text-center">
<button class="btn btn-block" type="button" style="background-color:#2B7A0B; color:white;">BUY</button>
</div>
</div>
<div class="card flex-child" style="width: 16rem;">
<img class="card-img-top" src="https://medicarehb.com.mm/wp-content/uploads/2022/05/192772.jpg" alt="cocohealth product-5">
<div class="card-body text-center" style="border-bottom: 1px solid #2b7a0b;">
<h5 class="card-title ">Cocohealth Body Moisture Lotion (Tea-leaf scent)</h5>
<p class="card-text">9000 MMK</p>
</div>
<div class="card-body text-center">
<button class="btn btn-block" type="button" style="background-color:#2B7A0B; color:white;">BUY</button>
</div>
</div>
<div class="card flex-child" style="width: 16rem;">
<img class="card-img-top" src="https://medicarehb.com.mm/wp-content/uploads/2022/06/175305.jpg" alt="cocohealth product-1">
<div class="card-body text-center" style="border-bottom: 1px solid #2b7a0b;">
<h5 class="card-title ">Cocohealth Cold Pressed</h5>
<p class="card-text">8000 MMK</p>
</div>
<div class="card-body text-center">
<button class="btn btn-block" type="button" style="background-color:#2B7A0B; color:white;">BUY</button>
</div>
</div>
<div class="card flex-child" style="width: 16rem;">
<img class="card-img-top" src="https://medicarehb.com.mm/wp-content/uploads/2022/01/180149-600x600.jpg" alt="cocohealth product-2">
<div class="card-body text-center" style="border-bottom: 1px solid #2b7a0b;">
<h5 class="card-title">Cocohealth Night Serum</h5>
<p class="card-text">6000 MMK</p>
</div>
<div class="card-body text-center">
<button class="btn btn-block" type="button" style="background-color:#2B7A0B; color:white;">BUY</button>
</div>
</div>
</div>
</section>
</section>
<section id="footer">
<footer class="row">
<div class="col-6 d-flex justify-self-start align-self-center">
<table class="table table-sm table-borderless">
<tr>
<td colspan="2">N0.55, Sein Lei Kan Thar Street,</td>
</tr>
<tr>
<td colspan="2">Ywar Thar Gyi Industrial Zone,</td>
</tr>
<tr>
<td colspan="2">South Dagon T/S,</td>
</tr>
<tr>
<td colspan="2">Yangon, Myanmar</td>
</tr>
</table>
</div>
<div class="col-6 d-flex align-content-center">
<table class="table table-sm table-borderless d-flex justify-content-end">
<form id="form" action="https://www.freecodecamp.com/email-submit">
<tr>
<td colspan="2"><label for="email">Get More Updates : </label></td>
</tr>
<tr>
<td><input class="form-control" type="email" placeholder="jackson_wang@gmail.com" style="max-width:300px; min-width: 215px;"></td>
</tr>
<tr>
<td><input value="Subscribe" type="submit" class="btn" id="submit">
</tr>
<tr>
<td colspan="2"><label>Phone : +959 4211 44724</label></td>
</tr>
<tr>
<td colspan="2">E-mail : info@mya-ayer.com</td>
</tr>
</form>
</table>
</div>
</footer>
</section>
</main>
</body>
</html>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/73357813
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号