小贝子编程

调整内容并对齐不能在flex显示器上工作的项目



在页脚处，我想在页边空白的每一侧对齐.contactdiv和.subscriptiondiv，但.contact在flex开始时对正，.subscriptivediv在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;
}

我不知道这是否是因为我使用了bootstrap类。我尝试对content-end和self-end进行辩护，但.subscriptiondiv仍然没有坚持在右边距区域，相反，它仍然显示在它列的起始位置。

给你。。。

更改此。。。

<table class="table table-sm table-borderless">
...
</table>

对此。

<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>

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium