Landing

✨ MESA MANITSAKULWONG

<html lang="en">
  <style>
    body {
    margin: auto;
    width: 100%;
    height: auto;
    background: white;
}
h1, h2, h3, p {
    margin: 0;
    font-family: 'Kanit';
}
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;
    width: 50%;
    height: 50%;
}
/*ปุ่ม*/
a:link, a:visited {
    background-color: yellowgreen;
    color: white;
    padding: 14px 25px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: large;
    border-radius: 5px;
    font-family: Kanit;
}
a:hover, a:active {
    background-color: rgb(103, 138, 32);
}
.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 {
    padding: 5%;
    margin: auto;
    width: 80%;
    /* background-image:url("https://www.nicepng.com/png/full/49-498173_gradient-background-png-website-background-image-png.png"); */
    background-repeat:no-repeat;
    border-radius: 10px;
    background-size:cover;
}
.column-text-contain {
    height: 400px;
    width: 100%;
}
.column-text {
    word-wrap: break-word;
    float: left;
    padding: 1.665%;
    width: 30%;
    background: white;
    overflow:auto;
}
.picture-contain {
    width: 100%;
    height: 360px;
}
.picture-material {
    float: left;
    width: 20%;
    margin: 2.5%;
    background-size: 20%;
    background: green;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.material-contain-2 {
    padding: 5%;
    margin: auto;
    width: 90%;
    background:white;
}
  </style>
    <title>PJ_Multi</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">
    <link rel="stylesheet"
          href="https://fonts.googleapis.com/css?family=Kanit">
    <body>
        <div class="title-contain">
            <h1>พลังงานเยาวชน<br>ในฐานะผู้บริโภค<br>ในการแก้ไขปัญหาขยะพลาสติก
                
            </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><br>
                    <center><img style="background-image: none;" src="https://www.pinclipart.com/picdir/big/2-20146_creation-clipart-globe-planet-earth-vector-png-transparent.png"></center>
                </div>
                
                <div class="column-text">
                    <center><img style="background-image: none;" src="http://pngimg.com/uploads/soil/soil_PNG44.png"></center>
                    <h3>2.มลพิษในดิน</h3>
                    <br><p>ความเป็นพิษของการหมักขยะ
                        พลาสติก จะทำให้พลาสติกเกิดการ
                        ย่อยสลายทางชีวภาพ ทำให้ในดินมี
                        สารตกค้าง เนื่องจากพลาสติกประกอบ
                        ด้วยสารเคมีที่มีความเป็นพิษและส่งผล
                        กระทบต่อพืชและสัตว์ที่อาศัยอยู่ในดิน</p>
                </div>

<div class="column-text">
                    <h3>3.อันตรายต่อสิ่งมีชีวิตอื่นๆ</h3>
                    <br><p>ขยะพลาสติกนั้นมีปริมาณที่เพิ่ม
                        มากขึ้น ซึ่งขยะเหล่านี้แพร่กระจายทั้ง
                        บนบกและทะเล ส่งผลกระทบอย่าง
                        รุนแรงต่อสิ่งแวดล้อมและสัตว์ ใน
                        หลายๆปีที่ผ่านมาเรามักจะเห็นภาพ
                        สัตว์กับขยะพลาสติกในรูปแบบต่างๆ</p><br>
                    <center><img style="background-image: none;" src="https://www.pngkey.com/png/full/72-728648_zoolabrate-years-of-nurturing-humans-and-animals-png.png"></center>
                </div>
            </div>
        </div>
        <div class="title-contain" style="background-position:center;">
            <br><br>
            <h1>ทำไมต้องเป็นเยาวชน?<br>
                <p>เยาวชน คนรุ่นใหม่ นั้นมีความสนใจในเทคโนโลยีเป็นอย่าง
                มาก การสร้างความตระหนักกับกลุ่มเยาวชนจึงเป็นส่วน
                สำคัญของการสร้างความเคลื่อนไหวทางสิ่งแวดล้อมให้เกิด
                การเปลี่ยนแปลงที่ดีขึ้น</p>
                <br>
                <center>
                <img style="width: 40%; height: 30%;" src="https://images.pexels.com/photos/1116302/pexels-photo-1116302.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
                <br><br>
                
              </center>
            </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>
                <br><center><a href="https://www.camphub.in.th/campreview-ep64-ywm/" target="_blank">อ่านเพิ่มเติม</a></center><br><br><br>
            <h3>2.เยาวชนรวมตัวกันเพื่อเก็บขยะ</h3>
            <p>เป็นเหตุการณ์ที่กลุ่มเยาวชนช่วยกันเก็บขยะที่อ่างโป่งจ้อ ซึ่งโครงการอันเนื่องมา
                จากพระราชดำริ ของกรมชลประทาน กระทรวงเกษตรและสหกรณ์ ต.สันติสุข อ.ดอย
                หล่อ จ.เชียงใหม่ ซึ่งเป็นแหล่งท่องเที่ยวภายในชุมชน ทำให้เกิดความสะอาด สวยงาม
                และน่าเที่ยว</p><br>
                <br><center><a href="https://www.chiangmainews.co.th/page/archives/1376584/" target="_blank">อ่านเพิ่มเติม</a></center><br><br><br>
            <h3>3.นักเรียนไทยคว้ารางวัลออกแบบนวัตกรรมจัดการขยะพลาสติกชายฝั่งทะเล</h3>
            <p>นักเรียนไทยกลุ่มนี้ซึ้งใช้ชื่อทีมว่า "Spicy STEMmers" เป็นหนึ้งในทีมเยาวชน
                จากกว่า 50 ประเทศที้เข้าร่วมการแข่งขันออกแบบนวัตกรรมโดยใช้แนวคิด "STEM"
                จัดโดยสมาคมการศึกษาสากลแห่งอังกฤษและได้รับรางวัลจากการออกแบบเครื้อง
                กำจัดขยะชายฝั้ง</p><br>
                <br><center><a href="https://www.bbc.com/thai/thailand-53844468" target="_blank">อ่านเพิ่มเติม</a></center><br>
        </div>
        <div class="title-contain" style="justify-content: center; height: 480px;background-position: bottom;">
            <h1>เยาวชนอย่างเราทำอะไรได้บ้าง
                <br><center><a href="https://www.greenpeace.org/thailand/act/volunteer/" target="_blank">Click here :)</a></center><br>
            </h1>
        </div>
    </body>
</html>