FrontEnd/ScratchJrIntermediate .html at master · NextBitco/FrontEnd · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
<!doctype html>
<html lang="en">
<head>
    <title>Nextbit_2.0</title>
    <link rel="icon" href="imgs/png/logo_dino.png">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <!-- awesome font -->
    <link rel='stylesheet' href='./css/font-awesome.min.css'>
    <!-- css navbar -->
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/navbar.css">
    <!-- css style -->
    <link rel="stylesheet" href="./css/style.css">
    <link rel="stylesheet" href="./css/loader.css">
    <!-- css ScratchJr -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
    <link rel="stylesheet" href="./css/cardcourse.css">
    <!-- css bubble footer -->
    <link rel="stylesheet" href="./css/footer.css">
    <link rel="stylesheet" href="./css/bubble.css">
</head>
<body>
    <!-- Start Navbar -->
    <nav class="navbar navbar-expand-custom navbar-mainbg" id="navbar">
        <a class="navbar-brand navbar-logo" href="./index.html">
            <picture>
                <source srcset="imgs/webp/logo_dino.webp">
                <img src="./imgs/png/logo_dino.png"/>
            </picture>
            <span>Next</span>bit
        </a>
        <button class="navbar-toggler" type="button" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <i class="fa fa-bars text-white"></i>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav ml-auto">
                <div class="hori-selector"><div class="left"></div><div class="right"></div></div>
                <li class="nav-item">
                    <a class="nav-link" href="./index.html"><i class="fa fa-home"></i>หน้าหลัก</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="./about.html"><i class="fa fa-users"></i>เกี่ยวกับพวกเรา</a>
                </li>
                <li class="nav-item active">
                    <a class="nav-link" href="./course.html"><i class="fa fa-graduation-cap"></i>คอร์สเรียน</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="https://nextbit.co/post/"><i class="fa fa-cubes"></i>บทความ</a>
                </li>
            </ul>
        </div>
    </nav>
    <!-- End Navbar -->


    <!-- Start Container -->
    <div class="container">
        <section class="head-scratchjr">
            <div class="subhead-scratchjr">
                <h1>คอร์ส ScratchJr - Intermediate </h1><br>
                <div class="row">
                    <div class="col-lg-6 align-self-left">

                        <img class="head-dino" src="./imgs/png/Nextbit_Dino.png">
                    </div>
                    <div class="col-lg-6 align-self-right" >
                        <img class="head-qr" src="./imgs/png/qr_code.png">
                    </div>
                </div>
            </div>
        </section>
        <section id="banner-section">
            <p align="center" class="responsive-iframe">
                <video class="iframe-responsive" controls autoplay muted loop>
                    <source src="./video/IntroNextBit.webm" type="video/webm">
                </video>
            </p>
            <div class="paragraph">
                <h1>รายละเอียดคอร์สเรียน</h1><br>
                <p>คอร์ส ScratchJr - Intermediate เป็นคอร์สที่ 2 ต่อจากคอร์ส ScratchJr - Basic
                    ที่น้องๆจะได้ทบทวนบล็อกและปุ่มเครื่องมือต่างๆ เพื่อนำมาประยุกต์ใช้สร้างสรรค์โปรเจคที่สนุกสนานและซับซ้อนขึ้นกว่าคอร์ส
                    ScratchJr - Basic  อีกทั้งยังเสริมเรื่อง Unplugged coding ซึ่งเป็นส่วนหนึ่งในหลักสูตรของกระทรวงศึกษาธิการ
                    วิชาวิทยาการการคำนวณ (Computer Science) เโดยคอร์สนี้จะช่วยเสริมความรู้ให้น้องๆ
                    นำไปประยุกต์ใช้ในการเรียนที่โรงเรียนได้อีกด้วย คอร์สนี้น้องๆจะได้เห็นโปรเจคที่เกี่ยวข้องกับชีวิตประจำวันมากขึ้น
                    โปรเจคต่างๆจะถูกถ่ายทอดผ่านเกม, ตัวละครและเหล่าไดโน่ของเรา ให้สนุกและไม่น่าเบื่อ
                    เพื่อการเรียนรู้ได้อย่างมีประสิทธิภาพสูงสุดของน้องๆ
                    <br><br>

                    คอร์สนี้เหมาะสำหรับ<br>
                    1.เด็กอายุ 4-8 ขวบ<br>
                    2.เด็กที่ผ่านการเรียนคอร์ส ScratchJr - Basic มาแล้ว<br>
                    3.เด็กที่รู้จักทุกบล็อกและฟังก์ชั่นของ ScratchJr แล้ว และอยากฝึกฝนเพื่อการเขียน Code ได้คล่องมากยิ่งขึ้น<br>
                    4.เด็กที่กำลังเตรียมตัวเรียนโปรแกรม Scratch ในชั้นถัดไป
                    <br><br>

                    อุปกรณ์ที่ใช้ในการเรียน<br>
                    1.iPad หรือ Tablet 1 เครื่อง เพื่อใช้ในการเขียนโค้ด<br>
                    2.iPhone, iPad, Tablet, โทรศัพท์มือถือ หรือ คอมพิวเตอร์ 1 เครื่อง เพื่อใช้ในการดูคลิปเนื้อหา<br>
                    3.Internet<br><br>

                    จำนวนเนื้อหา<br>
                    15 บท 30 ตอน รวมกว่า 300 นาที<br>
                    เรียนซ้ำได้ตลอด ไม่มีวันหมดอายุ<br><br>

                    สนใจ สอบถามข้อมูลเพิ่มเติมได้ที่ <span>Line: @NextBit</span>
                </p>
            </div>
        </section>
    </div>
    <!-- End Container -->


    <!-- Start Footer -->
    <footer>
        <div class="bubbles">
            <div class="bubble" style="--size:3.3909991037595413rem; --distance:8.564411425917513rem; --position:-3.3532309343188405%; --time:3.337641675397866s; --delay:-3.8598811310658885s;"></div>
            <div class="bubble" style="--size:5.257650665640758rem; --distance:7.436513802589119rem; --position:58.07638903927696%; --time:3.5787606993702172s; --delay:-3.727907387715606s;"></div>
            <div class="bubble" style="--size:5.229508255244221rem; --distance:9.9519353103117rem; --position:74.21436924845615%; --time:3.028254580955734s; --delay:-3.2558799292110705s;"></div>
            <div class="bubble" style="--size:5.675200319744859rem; --distance:6.150496605028215rem; --position:16.40803187630667%; --time:2.095930094316172s; --delay:-2.012984983796527s;"></div>
            <div class="bubble" style="--size:4.3761417212986435rem; --distance:6.8733372826509695rem; --position:67.33293542719909%; --time:3.488941974619582s; --delay:-2.334601722943579s;"></div>
            <div class="bubble" style="--size:4.685994744877967rem; --distance:6.7313548620829895rem; --position:31.27613675088076%; --time:2.2925754221462955s; --delay:-3.737222941850242s;"></div>
            <div class="bubble" style="--size:3.1129848616561464rem; --distance:7.973768390749606rem; --position:6.987046974998384%; --time:3.0081815354815857s; --delay:-2.0327254202297422s;"></div>
            <div class="bubble" style="--size:5.210656076916611rem; --distance:6.009244755368356rem; --position:46.407251437646885%; --time:2.825860489876731s; --delay:-3.2693626984936204s;"></div>
            <div class="bubble" style="--size:5.766361012511409rem; --distance:6.85814516018899rem; --position:67.06485868169764%; --time:3.1537974261224564s; --delay:-3.450262969142444s;"></div>
            <div class="bubble" style="--size:2.3488025390021123rem; --distance:9.612803488962832rem; --position:62.36777292198522%; --time:2.2375997498686555s; --delay:-3.7258814246212713s;"></div>
            <div class="bubble" style="--size:4.841820891042348rem; --distance:6.792663462265825rem; --position:41.51432637876691%; --time:3.8539796309214767s; --delay:-2.600818884719666s;"></div>
            <div class="bubble" style="--size:2.32621822881762rem; --distance:6.618214802867413rem; --position:74.20527249008273%; --time:3.1652743852504166s; --delay:-3.96047773357275s;"></div>
        </div>
        <div class="footer-main">
            <div class="footer-logo">
                <picture>
                    <source srcset="./imgs/webp/logo_dino.webp">
                    <img src="./imgs/png/logo_dino.png"/>
                </picture>
                <h3><span>Next</span>bit.co©2021</h3>
            </div>
            <div class="footer-link list_jigsaw">
                <ul>
                    <li><a href="./index.html" target="_blank">หน้าหลัก</a></li>
                    <li><a href="./about.html" target="_blank">เกี่ยวกับพวกเรา</a></li>
                    <li><a href="./course.html">คอร์สเรียน</a></li>
                    <li> <a href="https://nextbit.co/post/" target="_blank">บทความ</a></li>
                </ul>
            </div>
            <div class="footer-contact">
                <div>
                    <h3>ช่องทาง<span>ติดต่อ</span></h3>
                    <p><i class="fa fa-phone"></i>062-365-9233</p>
                    <p><i class="fa fa-envelope"></i>[email protected]</p>
                </div>
                <div class="footer-icons">
                    <a href="https://nextbit.co/facebook"><i class="fa fa-facebook"></i></a>
                    <a href="https://nextbit.co/youtube"><i class="fa fa-youtube-play"></i></a>
                </div>
            </div>
            <div class="footer-qrcode">
                <picture>
                    <source srcset="./imgs/webp/qr_code.webp">
                    <img src="./imgs/png/qr_code.png"/>
                </picture>
            </div>
        </div>
    </footer>
    <!-- End Footer -->
    <svg style="position:fixed; top:100vh;">
        <defs>
            <filter id="blob">
                <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur"></feGaussianBlur>
                <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="blob"></feColorMatrix>
                <feComposite in="SourceGraphic" in2="blob" operator="atop"></feComposite>
            </filter>
        </defs>
    </svg>
    <div class="loader-wrapper">
        <img src="./imgs/gif/loading_scratch.gif">
        <div class="thought"><h4>ไปเรียนกันเถอะ</h4></div>
    </div>
    <!-- Start Script -->
    <!-- Navbar -->
    <script src='https://code.jquery.com/jquery-3.4.1.min.js'></script>
    <script src='https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js'></script>
    <script src='./js/navbar.js'></script>
    <script src='./js/loader.js'></script>
    <!-- End Script -->
</body>
</html>