Skip to content

Instantly share code, notes, and snippets.

@izzatzr

izzatzr/whatsapp.html

Last active April 23, 2025 18:32
Show Gist options
  • Save izzatzr/a08f64c124831f8bfc97884cabe65fcf to your computer and use it in GitHub Desktop.
Save izzatzr/a08f64c124831f8bfc97884cabe65fcf to your computer and use it in GitHub Desktop.
Download ZIP
Raw
whatsapp.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
@font-face {
font-family: Founders Grotesk;
src: url('https://staging-api.nutriciaprofessional.id/nutrigain/uploads/Founders_Grotesk/FoundersGrotesk-Regular.otf');
}
@font-face {
font-family: Founders Grotesk Bold;
src: url('https://staging-api.nutriciaprofessional.id/nutrigain/uploads/Founders_Grotesk/FoundersGrotesk-Bold.otf.otf');
}
</style>
</head>
<body>
<div style=" padding-top: 5%; width: 322px; height: 170px; background: white">
<div
style="width: 325px; height: 30px; padding: 10px; left: 0px; top: 140px; position: relative; background: #3C3C3C; justify-content: center; align-items: center; gap: 10px; display: inline-flex">
<div style="width: 298px"><span
style="color: white; font-size: 8px; font-family: Founders Grotesk; font-weight: 400; line-height: 8px; word-wrap: break-word">Untuk
mengoptimalkan kejar tumbuh, lakukan evaluasi kenaikan status gizi (BB dan TB) minimal setelah</span><span
style="color: white; font-size: 8px; font-family: Founders Grotesk Bold; font-weight: 700; line-height: 8px; word-wrap: break-word">
12
</span><span
style="color: white; font-size: 8px; font-family: Founders Grotesk; font-weight: 400; line-height: 8px; word-wrap: break-word">
minggu penggunaan PKMK.</span></div>
</div>
<div
style="width: 322px; height: 10px; padding-top: 10px; padding-bottom: 10px; padding-left: 5px; padding-right: 10px; left: 0px; top: 121px; position: absolute; justify-content: flex-start; align-items: center; gap: 10px; display: inline-flex">
<div style="width: 296px; height: 5px"><span
style="color: #3C3C3C; font-size: 8px; font-family: Founders Grotesk Bold; font-weight: 700; line-height: 10px; word-wrap: break-word">PKMK
</span><span
style="color: #3C3C3C; font-size: 8px; font-family: Founders Grotesk Bold; font-weight: 400; line-height: 10px; word-wrap: break-word">diberikan__
123__
</span>
<span
style="color: #3C3C3C; font-size: 8px; font-family: Founders Grotesk Bold; font-weight: 700; line-height: 10px; word-wrap: break-word">kali/hari</span>
<span
style="color: #3C3C3C; font-size: 8px; font-family: Founders Grotesk Bold; font-weight: 400; line-height: 10px; word-wrap: break-word">
dengan takaran per saji adalah__123__</span>
<span
style="color: #3C3C3C; font-size: 8px; font-family: Founders Grotesk Bold; font-weight: 700; line-height: 10px; word-wrap: break-word">sendok
takar</span><span
style="color: #3C3C3C; font-size: 8px; font-family: Founders Grotesk Bold; font-weight: 400; line-height: 10px; word-wrap: break-word">
dan__123__</span><span
style="color: #3C3C3C; font-size: 8px; font-family: Founders Grotesk Bold; font-weight: 700; line-height: 10px; word-wrap: break-word">ml
air</span>
</div>
</div>
<div
style="height: 10px; padding-left: 5px; padding-right: 5px; padding-top: 10px; padding-bottom: 10px; left: 0px; top: 102px; position: absolute; justify-content: flex-start; align-items: center; gap: 10px; display: inline-flex">
<div
style="color: #3C3C3C; font-size: 8px; font-family: Founders Grotesk Bold; font-weight: 700; line-height: 10px; word-wrap: break-word">
Rekomendasi penggunaan PKMK</div>
</div>
<div
style="height: 37px; padding-left: 5px; padding-right: 5px; left: 0px; top: 57px; position: absolute; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 5px; display: inline-flex">
<div
style="align-self: stretch; justify-content: flex-start; align-items: center; gap: 5px; display: inline-flex">
<div style="width: 5px; height: 5px; background: #3C3C3C; border-radius: 9999px"></div>
<div style="width: 298px; height: 9px"><span
style="color: #3C3C3C; font-size: 8px; font-family: Founders Grotesk; font-weight: 400; line-height: 10px; word-wrap: break-word">BB
ideal anak sesuai panjang badan (PB) adalah </span><span
style="color: #3C3C3C; font-size: 8px; font-family: Founders Grotesk Bold; font-weight: 700; line-height: 10px; word-wrap: break-word">
123
kg
</span><span
style="color: #3C3C3C; font-size: 8px; font-family: Founders Grotesk; font-weight: 400; line-height: 10px; word-wrap: break-word">
dan usia panjang badan adalah</span><span
style="color: #3C3C3C; font-size: 8px; font-family: Founders Grotesk Bold; font-weight: 700; line-height: 10px; word-wrap: break-word">
12 bulan
</span></div>
</div>
<div
style=" align-self: stretch; justify-content: flex-start; align-items: center; gap: 5px; display: inline-flex">
<div style="width: 5px; height: 5px; background: #3C3C3C; border-radius: 9999px"></div>
<div style="width: 298px; height: 9px"><span
style="color: #3C3C3C; font-size: 8px; font-family: Founders Grotesk; font-weight: 400; line-height: 10px; word-wrap: break-word">Untuk
mendukung kejar tumbuh anak membutuhkan kalori sebesar </span><span
style="color: #3C3C3C; font-size: 8px; font-family: Founders Grotesk Bold; font-weight: 700; line-height: 10px; word-wrap: break-word">
123
kkal/hari
</span></div>
</div>
<div
style="align-self: stretch; justify-content: flex-start; align-items: center; gap: 5px; display: inline-flex">
<div style="width: 5px; height: 5px; background: #3C3C3C; border-radius: 9999px"></div>
<div style="width: 298px; height: 9px"><span
style="color: #3C3C3C; font-size: 8px; font-family: Founders Grotesk; font-weight: 400; line-height: 10px; word-wrap: break-word">Kenaikan
rata-rata berat badan anak seusianya adalah </span><span
style="color: #3C3C3C; font-size: 8px; font-family: Founders Grotesk Bold; font-weight: 700; line-height: 10px; word-wrap: break-word">
124
g
</span><span
style="color: #3C3C3C; font-size: 8px; font-family: Founders Grotesk; font-weight: 400; line-height: 10px; word-wrap: break-word">
per bulan atau</span><span
style="color: #3C3C3C; font-size: 8px; font-family: Founders Grotesk Bold; font-weight: 700; line-height: 10px; word-wrap: break-word">
123 g
</span><span
style="color: #3C3C3C; font-size: 8px; font-family: Founders Grotesk; font-weight: 400; line-height: 10px; word-wrap: break-word">
per hari</span></div>
</div>
</div>
<div
style="width: 322px; padding-left: 5px; padding-right: 5px; left: 0px; top: 30px; position: absolute; justify-content: space-between; align-items: center; display: inline-flex">
<div
style="height: 20px; border-radius: 4px; border: 1px black solid; justify-content: flex-start; align-items: center; display: flex">
<div style="width: 41px; height: 20px; justify-content: center; align-items: center; gap: 10px; display: flex">
<div><span
style="color: #3C3C3C; font-size: 8px; font-family: Founders Grotesk; font-weight: 400; line-height: 30px; word-wrap: break-word">BB
: </span><span
style="color: #3C3C3C; font-size: 8px; font-family: Founders Grotesk Bold; font-weight: 600; line-height: 30px; word-wrap: break-word">
12
kg
</span></div>
</div>
<div style="width: 48px; height: 20px; justify-content: center; align-items: center; gap: 10px; display: flex">
<div><span
style="color: #3C3C3C; font-size: 8px; font-family: Founders Grotesk; font-weight: 400; line-height: 30px; word-wrap: break-word">Z-Score
: </span><span
style="color: #3C3C3C; font-size: 8px; font-family: Founders Grotesk Bold; font-weight: 600; line-height: 30px; word-wrap: break-word">
123
</span>
</div>
</div>
<div style="width: 46px; height: 20px; justify-content: center; align-items: center; gap: 10px; display: flex">
<div
style="color: #3C3C3C; font-size: 8px; font-family: Founders Grotesk Bold; font-weight: 600; line-height: 30px; word-wrap: break-word">
rfgrf
</div>
</div>
</div>
<div
style="padding-left: 5px; padding-right: 5px; border-radius: 4px; border: 1px black solid; justify-content: center; align-items: center; display: flex">
<div style="width: 39px; height: 20px; justify-content: center; align-items: center; gap: 10px; display: flex">
<div><span
style="color: #3C3C3C; font-size: 8px; font-family: Founders Grotesk; font-weight: 400; line-height: 30px; word-wrap: break-word">TB
: </span><span
style="color: #3C3C3C; font-size: 8px; font-family: Founders Grotesk Bold; font-weight: 600; line-height: 30px; word-wrap: break-word">
123
cm
</span></div>
</div>
<div style="width: 47px; height: 20px; justify-content: center; align-items: center; gap: 10px; display: flex">
<div><span
style="color: #3C3C3C; font-size: 8px; font-family: Founders Grotesk; font-weight: 400; line-height: 30px; word-wrap: break-word">Z-Score
: </span><span
style="color: #3C3C3C; font-size: 8px; font-family: Founders Grotesk Bold; font-weight: 600; line-height: 30px; word-wrap: break-word">
12
</span>
</div>
</div>
<div style="width: 39px; height: 20px; justify-content: center; align-items: center; gap: 10px; display: flex">
<div
style="color: #3C3C3C; font-size: 8px; font-family: Founders Grotesk Bold; font-weight: 600; line-height: 30px; word-wrap: break-word">
f3wf34f
</div>
</div>
</div>
</div>
<div
style="width: 322px; height: 23px; padding: 5px; left: 0px; top: 0px; position: absolute; justify-content: space-between; align-items: center; display: inline-flex">
<img style="width: 70px; height: 16.72px" src="('https://staging-api.nutriciaprofessional.id/nutrigain/uploads/logo.png" />
<div style="justify-content: flex-start; align-items: center; gap: 20px; display: flex">
<div style="justify-content: flex-start; align-items: center; gap: 10px; display: flex">
<div style="width: 40px; justify-content: center; align-items: center; gap: 10px; display: flex">
<div
style="color: #3C3C3C; font-size: 8px; font-family: Founders Grotesk Bold; font-weight: 600; line-height: 30px; word-wrap: break-word">
PEREMPUAN
</div>
</div>
<div style="width: 61px; justify-content: center; align-items: center; gap: 10px; display: flex">
<div
style="color: #3C3C3C; font-size: 8px; font-family: Founders Grotesk Bold; font-weight: 600; line-height: 30px; word-wrap: break-word">
123
</div>
</div>
</div>
<div style="width: 40px; justify-content: center; align-items: center; gap: 10px; display: flex">
<div
style="color: #3C3C3C; font-size: 8px; font-family: Founders Grotesk Bold; font-weight: 600; line-height: 30px; word-wrap: break-word">
12/12/12
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment