tugas 3 flex box - Printable Version +- PPTIK FORUM (http://forum.pptik.id) +-- Forum: Workshop, Discussion & Courses (http://forum.pptik.id/forumdisplay.php?fid=16) +--- Forum: KELAS ONLINE 2022 (http://forum.pptik.id/forumdisplay.php?fid=2048) +---- Forum: WEB DEVELOPER (http://forum.pptik.id/forumdisplay.php?fid=2054) +----- Forum: BATCH 1 (http://forum.pptik.id/forumdisplay.php?fid=2066) +------ Forum: AGUSTUS 2022 (http://forum.pptik.id/forumdisplay.php?fid=2068) +------- Forum: TUGAS 3 (http://forum.pptik.id/forumdisplay.php?fid=2081) +------- Thread: tugas 3 flex box (/showthread.php?tid=75132) |
tugas 3 flex box - bilal - 11-15-2022 <!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>flexbox</title><style> body{ display: flex; } .container{ display: flex; flex-direction: column; width: 800px; height: 300px; background-color: #11C5C6; border: 2px solid black; padding: 20px; border-radius: 10px; margin: 0 auto; } .box{ width: 800px; height: 140px; background-color: #fbdd1c; margin: 5px; border: 2px solid black; border-radius: 10px; } .satu{ width: 132px; float: left; border: 2px solid black; margin: 15px; padding: 50px; background-color: pink; align-items: center; border-radius: 10px; } </style> </head> <body> <div class="container"> <div class="box"> <div class="satu"></div> <div class="satu"></div> <div class="satu"></div> </div> <div class="box"> <div class="satu"></div> <div class="satu"></div> <div class="satu"></div> </div> </body> </html> |