Scribd
Upload
5 views

code 1.2

The document provides information on nutrition and growth, emphasizing the importance of balanced meals during pregnancy and childhood. It includes links to resources about self-checking BMI, sustainable development goals related to nutrition, and a video on children's nutrition crises. Additionally, it features a table comparing BMI-for-age for boys and girls and outlines essential nutrients needed during pregnancy.

Uploaded by

caohoa
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
5 views

code 1.2

The document provides information on nutrition and growth, emphasizing the importance of balanced meals during pregnancy and childhood. It includes links to resources about self-checking BMI, sustainable development goals related to nutrition, and a video on children's nutrition crises. Additionally, it features a table comparing BMI-for-age for boys and girls and outlines essential nutrients needed during pregnancy.

Uploaded by

caohoa
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 12

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<style>
.center2 {
margin: auto;
width: 80%;
text-align: center;
font-size: 50px;
}

.center1 {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}

.color {
background-color: #b8edf1;
}

.main-content {
display: flex;
justify-content: center;
align-items: flex-start;
gap: 20px;
padding: 20px;
}

.video-section {
flex: 1;
}

.who-section {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
}

.who-table {
width: 100%;
border-collapse: collapse;
text-align: center;
}
.who-table td {
padding: 10px;
border: 1px solid #ccc;
}

.girls-column {
background-color: #ffc0cb;
}

.boys-column {
background-color: #add8e6;
}

.table-container {
display: flex;
align-items: center;
gap: 20px;
}

.table-container img {
width: 100px; /* Adjust size as needed */
height: auto;
}
</style>
<title>Nutrition and Happy</title>
</head>
<body class="color">
<h2 class="center2">EVERY MEAL - EVERY STEP OF GROWTH</h2>
<div style="display: flex;">
<div style="flex-basis: min-content;">
<a href="mninformation.php" > information
<img src="img/INFORMATION.jpg" width="150px"
height="120px" >
<a href="tukiemtraBMI.php"> self-check BMI
<img src="img/yourBMI.jpg" width="150px" height="120px"
>
</a>
</a>
</div>
<img src="img/background1.jpg" width="800px" height="350px"
class="center1">
<div style="flex-basis: min-content;">
<a href="contact.php" > contact
<img src="img/contact.png" width="150px" height="120px" >
</a>
<a href="dashboard3001.php"> dashboard
<img src="img/thongke.jpg" width="150px" height="120px" >
</a>
</div>
</div>
<br>
<br>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>SAP Design</title>
<h4 style="font-size: 50px; text-align: center;"> NUTRITION AND SGD
(Sustainable Development Goals) </h4>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
flex-direction: column;
align-items: center;
margin: 20px;
}
.container1 {
width: 50%;
}
.box {
display: flex;
align-items: center;
margin: 10px 0;
padding: 10px;
border-radius: 5px;
color: white;
font-size: 20px;
font-weight: bold;
position: relative;
text-decoration: none;
}
.circleRed {
width: 50px;
height: 50px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 7px;
font-weight: bold;
background: white;
color: red;
margin-right: 15px;
border: 3px solid;
text-align: center;
}
.circleOrange {
width: 50px;
height: 50px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 7px;
font-weight: bold;
background: white;
color: orange;
margin-right: 15px;
border: 3px solid;
text-align: center;
}
.circleGreen {
width: 50px;
height: 50px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 7px;
font-weight: bold;
background: white;
color: green;
margin-right: 15px;
border: 3px solid;
text-align: center;
}
.circleBlue {
width: 50px;
height: 50px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 7px;
font-weight: bold;
background: white;
color: blue;
margin-right: 15px;
border: 3px solid;
text-align: center;
}
.text-box {
flex: 1;
padding: 15px;
background: white;
color: black;
border-radius: 5px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}
.green { background: #7CB342; border-color: #7CB342; }
.red { background: #E53935; border-color: #E53935; }
.blue { background: #64B5F6; border-color: #64B5F6; }
.orange { background: #FB8C00; border-color: #FB8C00; }
</style>
</head>
<body>
<div class="container1">
<a href="https://sdgs.un.org/goals/goal1" class="box red">
<div class="circleRed">SGD1 - NO POVERTY</div>
<div class="text-box">End poverty in all its forms
everywhere</div>
</a>

<a href="https://sdgs.un.org/goals/goal2" class="box orange">


<div class="circleOrange">SDG2 - ZERO HUNGER</div>
<div class="text-box">End hunger, achieve food security and
improved nutrition and promote sustainable agriculture</div>
</a>

<a href="https://sdgs.un.org/goals/goal3" class="box green">


<div class="circleGreen">SDG3 - GOOD HEALTH & WELL-
BEING</div>
<div class="text-box">Ensure healthy lives and promote well-
being for all at all ages</div>
</a>

<a href="https://sdgs.un.org/goals/goal6" class="box blue">


<div class="circleBlue">SDG6 - CLEAN WATER &
SANITATION</div>
<div class="text-box">Ensure availability and sustainable
management of water and sanitation for all</div>
</a>

</div>
</body>
</html>
<table>
<tr>
<td>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
/* display: flex; */
align-items: center;
justify-content: flex-start;
height: 100vh;
background-color: #f4f4f4;
}
.container {
display: flex;
align-items: center;
justify-items: center;
justify-content: center;
padding: 20px;
}
.text-boxes {
display: flex;
flex-direction: column;
gap: 20px;
margin-right: 30px;
}
.text-box {
width: 150px;
padding: 15px;
background: white;
border: 2px solid gray;
border-radius: 8px;
text-align: center;
font-weight: bold;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
}
.arrow {
width: 60px;
height: 10px;
background: gray;
position: relative;
margin-left: 30px;
margin-top: 20px;
}
.arrow::after {
content: "";
position: absolute;
top: -5px;
right: -10px;
border-left: 10px solid gray;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
}

.center {
position: absolute;
width: 120px;
height: 120px;
background: black;
color: white;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
border-radius: 50%;
}
.textArrow{
display: flex;
}
.circle-container {
position: relative;
width: 400px;
height: 400px;
}

.circle-wrapper {
width: 420px; /* Size including border */
height: 420px;
border: 10px solid #333; /* Border color and thickness */
border-radius: 50%; /* Make it a circle */
display: flex;
justify-content: center;
align-items: center;
background: #fff; /* Optional background for the border */
}

.circle {
width: 100%;
height: 100%;
border-radius: 50%;
position: relative;
border: 2px solid #ddd;
background: conic-gradient(
#f94144 0deg 58deg,
#ffffff 58deg 60deg, /* Đường ngăn cách */
#f3722c 60deg 118deg,
#ffffff 118deg 120deg, /* Đường ngăn cách */
#f9c74f 120deg 178deg,
#ffffff 178deg 180deg, /* Đường ngăn cách */
#90be6d 180deg 238deg,
#ffffff 238deg 240deg, /* Đường ngăn cách */
#43aa8b 240deg 298deg,
#ffffff 298deg 300deg, /* Đường ngăn cách */
#577590 300deg 358deg,
#ffffff 358deg 360deg /* Đường ngăn cách */
);
}

.step {
position: absolute;
width: 100px;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
background: white;
border: 2px solid #ddd;
font-size: 14px;
font-weight: bold;
color: #333;
}

/* Step positions */
.step1 { top: 30px; left: 32%; transform: translate(-50%, 0); text-
align: center; }
.step2 { top: 20%; left: 67%; transform: translate(-50%, -50%); text-
align: center;}
.step3 { top: 50%; left: 85%; transform: translate(-50%, -50%); text-
align: center;}
.step4 { top: 80%; left: 70%; transform: translate(-50%, -50%); text-
align: center;}
.step5 { top: 93%; left: 32%; transform: translate(-50%, -100%); text-
align: center;}
.step6 { top: 50%; left: 15%; transform: translate(-50%, -50%); text-
align: center;}

/* Center Content */
.center-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 150px;
height: 150px;
border-radius: 50%;
background: white;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.center-content h2 {
margin: 0;
font-size: 20px;
color: #333;
text-align: center;
}

.center-content p {
margin: 5px 0 0;
font-size: 14px;
color: #777;
}
</style>
</head>
<body>
<h5 style="font-size: 50px; text-align: center;"> Nutrition during
pregnancy </h5>
<div class="container">
<div class="text-boxes">
<div class="textArrow">
<div class="text-box">Protein</div>
<div class="arrow"></div>
</div>
<div class="textArrow">
<div class="text-box">Iron</div>
<div class="arrow"></div>
</div>
<div class="textArrow">
<div class="text-box">Iodine</div>
<div class="arrow"></div>
</div>
<div class="textArrow">
<div class="text-box">Folate</div>
<div class="arrow"></div>
</div>
<div class="textArrow">
<div class="text-box">Other nutrients (zinc, vitamins A and C)
</div>
<div class="arrow"></div>
</div>
</div>
<div class="circle-container">
<!-- Outer circle -->
<div class="circle"></div>

<!-- Steps -->


<div class="step step1">4 glasses of milk or milk products</div>
<div class="step step2">3 portions of meat, fish, eggs,
beans</div>
<div class="step step3">4 portions of fruit and vegetables</div>
<div class="step step4">6 portions of bread and cereals</div>
<div class="step step5">Lots of liquid</div>
<div class="step step6">avoid drinking alcohol</div>

<!-- Center content -->


<div class="center-content">
<h2>Daily meals ( 280 extra calories) </h2>
<!-- <p>Infographics</p> -->
</div>
</div>
</div>
</body>
</html>

</td>
<td>
<h5 style="font-size: 50px; text-align: center; margin-bottom: 45px;">
Plan a Balanced Died </h5>
<span style="font-size: 15px; text-align: center;"> During pregnancy
and breastfeeding, eat different kind of locally available foods that are
from each of the five-star food groups in appropriate quantities each day
</span>
</br>
</br>
<img src="img/groupfood.jpg" width="420px" height="420px" >
</td>

</tr>
</table>

<div class="main-content">
<div class="video-section">
<h1>UNICEF - Children are facing a nutrition crisis</h1>
<iframe width="560" height="315"
src="https://www.youtube.com/embed/NPQUVaiEajA?
si=Qa1vs6dkkT2iImt3"
title="YouTube video player" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-
media; gyroscope; picture-in-picture; web-share"
referrerpolicy="strict-origin-when-cross-origin" allowfullscreen>
</iframe>
</div>
<div class="who-section">
<h2>WHO - Body mass index-for-age (BMI-for-age)</h2>
<div class="table-container">
<img src="img/girlbmi.jpg" alt="Baby Girl">
<table class="who-table">
<tr>
<td class="girls-column">GIRLS</td>
<td class="boys-column">BOYS</td>
</tr>
<tr>
<td class="girls-column">
<a href="https://cdn.who.int/media/docs/default-
source/child-growth/child-growth-standards/indicators/body-mass-index-
for-age/cht-bfa-girls-z-0-2.pdf?sfvrsn=3fe76a61_27"
target="_blank">z-scores-birth to 2 year</a>
</td>
<td class="boys-column">
<a href="https://cdn.who.int/media/docs/default-
source/child-growth/child-growth-standards/indicators/body-mass-index-
for-age/cht-bfa-boys-z-0-2.pdf?sfvrsn=e1b69ef2_17"
target="_blank">z-scores-birth to 2 year</a>
</td>
</tr>
<tr>
<td class="girls-column">
<a href="https://cdn.who.int/media/docs/default-
source/child-growth/child-growth-standards/indicators/body-mass-index-
for-age/cht-bfa-girls-z-2-5.pdf?sfvrsn=7dbbb319_19"
target="_blank">z-scores-2 to 5 year</a>
</td>
<td class="boys-column">
<a href="https://cdn.who.int/media/docs/default-
source/child-growth/child-growth-standards/indicators/body-mass-index-
for-age/cht-bfa-boys-z-2-5.pdf?sfvrsn=f3496b7_17"
target="_blank">z-scores-2 to 5 year</a>
</td>
</tr>
<tr>
<td class="girls-column">
<a href="https://cdn.who.int/media/docs/default-
source/child-growth/child-growth-standards/indicators/body-mass-index-
for-age/cht-bfa-girls-z-0-5.pdf?sfvrsn=cf716a4a_17"
target="_blank">z-scores-birth to 5 year</a>
</td>
<td class="boys-column">
<a href="https://cdn.who.int/media/docs/default-
source/child-growth/child-growth-standards/indicators/body-mass-index-
for-age/cht-bfa-boys-z-0-5.pdf?sfvrsn=2e1bd6a5_17"
target="_blank">z-scores-birth to 5 year</a>
</td>
</tr>
</table>
<img src="img/boybmi.jpg" alt="Baby Boy">
</div>
</div>
</div>

</body>
</html>

You might also like