landing

✨ นายเมษา มานิตสกุลวงศ์

<html lang="en">
  <style>
    body {
    margin: auto;
    width: 100%;
    height: auto;
    background: white;
}
h1, h2, h3, p {
    margin: 0;
    font-family: 'New Tegomin', serif;
}
h1 {
    font-size: 48px;
}
h2 {
    font-size: 28px;
}
h3 {
    font-size: 18px;
}
p {
    text-indent: 2%;
    font-size: 16px;
    color:black;
}
img {
    background-repeat: no-repeat;
    background-position: center;
}
.title-contain {
    padding: 0% 10% 0% 10%;
    margin: auto;
    background-color: red;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 80%;
    height: 823px;
    background-image:url("https://media.discordapp.net/attachments/805709628515680266/837967760968646666/Pngtreethe_sun_shines_on_the_6063362.png?width=674&height=674");
    background-repeat: no-repeat;
    background-size:cover;
    animation:ocean 7s ease infinite alternate;
}

.title-contain h1{
    font-size: 70px;
    color: white;
}

.title-contain p{
    font-size: 28px;
    color: white;
}

@keyframes ocean {
    0%{background-color:#042836;}
    25%{background-color:#0c6885;}
    50%{background-color:#878385;}
    75%{background-color:#6bc7d6;}
    100%{background-color:#0a5b7c;}
}

.children{
    height:480px;
    text-align: center;
    justify-content:center;
}

.title-button {
    display: block;
    padding: 16px;
    margin-top: 16px;
    width: 60%;
    text-align: center;
    background: yellowgreen;
    cursor: pointer;
    border-radius: 10px;
}

.title-button:hover{
    background: #154c79;
    color:white;
}

.line {
    width: 80%;
    background:hsl(211, 79%, 58%, 60%);
    height: 4px;
    border-radius: 2px;
    margin: 5% 10% 5% 10%;
    animation: slide 4s infinite alternate linear;
}

@keyframes slide {
    to{
        transform:translateY(16px);
    }
}

.material-contain-1 {
... (44 lines left)
  </style>
    <title>waritritrit</title>
    <link rel="stylesheet" href="style.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Antonio:wght@100&family=New+Tegomin&display=swap" rel="stylesheet">
    <body>
        <div class="title-contain">
            <h1>พลังงานเยาวชน<br>ในฐานะผู้บริโภคในการแก้ไขปัญหาขยะพลาสติก
                <span class="title-button"><h2>button</h2></span>
            </h1>
        </div>
        <div class="material-contain-1">
            <div class="line"></div>
            <h1 style="text-align: center;">ปัญหาพลาสติกส่งผลกระทบต่อเราอย่างไร</h1>
            <div class="line"></div>
            <div class="column-text-contain">
                <div class="column-text">
                    <h3>1. ก๊าซเรือนกระจก</h3>
                    <br><p>พลาสติกที่กำลังย่อยสลายสามารถปล่อยก๊าซเรือนกระจกที่มีผลกระทบต่อการเปลี่ยนแปลงสภาพอากาศ 
                        ระดับนํ้าทะเลที่สูงขึ้น อุณหภูมิโลกที่เพิ่มขึ้นระบบนิเวศบนบกและในมหาสมุทร</p>
                </div>
                
                <div class="column-text">
                    <h3>2.มลพิษในดิน</h3>
                    <br><p>ความเป็นพิษของการหมักขยะ
                        พลาสติก จะทำให้พลาสติกเกิดการ
                        ย่อยสลายทางชีวภาพ ทำให้ในดินมี
                        สารตกค้าง เนื่องจากพลาสติกประกอบ
                        ด้วยสารเคมีที่มีความเป็นพิษและส่งผล
                        กระทบต่อพืชและสัตว์ที่อาศัยอยู่ในดิน</p>
                </div>

<div class="column-text">
                    <h3>3.อันตรายต่อสิ่งมีชีวิตอื่นๆ</h3>
                    <br><p>ขยะพลาสติกนั้นมีปริมาณที่เพิ่ม
                        มากขึ้น ซึ่งขยะเหล่านี้แพร่กระจายทั้ง
                        บนบกและทะเล ส่งผลกระทบอย่าง
                        รุนแรงต่อสิ่งแวดล้อมและสัตว์ ใน
                        หลายๆปีที่ผ่านมาเรามักจะเห็นภาพ
                        สัตว์กับขยะพลาสติกในรูปแบบต่างๆ</p>
                </div>
            </div>
        </div>
        <div class="title-contain" style="background-position:center;">
            <h1>ทำไมต้องเป็นเยาวชน?<br>
                <p>เยาวชน คนรุ่นใหม่ นั้นมีความสนใจในเทคโนโลยีเป็นอย่าง
                มาก การสร้างความตระหนักกับกลุ่มเยาวชนจึงเป็นส่วน
                สำคัญของการสร้างความเคลื่อนไหวทางสิ่งแวดล้อมให้เกิด
                การเปลี่ยนแปลงที่ดีขึ้น</p>
                <br><span class="title-button" style="margin: auto"><h2>button</h2></span>
            </h1>
        </div>
        <div class="material-contain-2">
            <h1 style="text-align: center;">เหตุการณ์ต่างๆที่เยาวชนช่วยกันแก้ปัญหาขยะ</h1>
            <div class="line"></div>
            <h3>1.ค่าย Youth Wavemakers</h3>
            <br>
            <p>ค่ายนี้เป็นหนึ่งในโครงการของ Greenpeace ซึ่งเปิดรับอาสาสมัครที่เป็นเยาวชนที่
                สนใจประเด็นด้านสิ่งแวดล้อม มาร่วมทำกิจกรรมและรณรงค์เกี่ยวกับการเลิกใช้
                พลาสติกที่ใช้ครั้งเดียวทิ้งโดยค่ายเป็นค่าย 2 วัน 1 คืนที่เยาวชนจะได้ลงมือทำ
                กิจกรรมเพื่อสร้างความเปลี่ยนแปลงให้กับโลกจริงๆ</p>
                <br><span class="title-button" style="margin: auto; width:10%"><h2>อ่านเพิ่มเติม</h2></span><br>
            <h3>2.เยาวชนรวมตัวกันเพื่อเก็บขยะ</h3>
            <p>เป็นเหตุการณ์ที่กลุ่มเยาวชนช่วยกันเก็บขยะที่อ่างโป่งจ้อ ซึ่งโครงการอันเนื่องมา
                จากพระราชดำริ ของกรมชลประทาน กระทรวงเกษตรและสหกรณ์ ต.สันติสุข อ.ดอย
                หล่อ จ.เชียงใหม่ ซึ่งเป็นแหล่งท่องเที่ยวภายในชุมชน ทำให้เกิดความสะอาด สวยงาม
                และน่าเที่ยว</p>
                <br><span class="title-button" style="margin: auto; width:10%"><h2>อ่านเพิ่มเติม</h2></span><br>
            <h3>3.นักเรียนไทยคว้ารางวัลออกแบบนวัตกรรมจัดการขยะพลาสติกชายฝั่งทะเล</h3>
            <p>นักเรียนไทยกลุ่มนี้ซึ้งใช้ชื่อทีมว่า "Spicy STEMmers" เป็นหนึ้งในทีมเยาวชน
                จากกว่า 50 ประเทศที้เข้าร่วมการแข่งขันออกแบบนวัตกรรมโดยใช้แนวคิด "STEM"
                จัดโดยสมาคมการศึกษาสากลแห่งอังกฤษและได้รับรางวัลจากการออกแบบเครื้อง
                กำจัดขยะชายฝั้ง</p>
                <br><span class="title-button" style="margin: auto; width:10%"><h2>อ่านเพิ่มเติม</h2></span>
        </div>
        <div class="title-contain" style="justify-content: center; height: 480px;background-position: bottom;">
            <h1>เยาวชนอย่างเราทำอะไรได้บ้าง
                <span class="title-button" style="margin: auto;"><h2>button</h2></span>
            </h1>
        </div>
    </body>
</html>