設計網頁 | 程式專案 | 橘蘋學習平台

{"id":565414,"student_id":74183,"content":"{\"html\":\"\u003c!DOCTYPE html\u003e\\n\u003chtml\u003e\\n\u003chead\u003e\\n    \u003ctitle\u003e導覽列設計\u003c/title\u003e\\n    \u003c!-- 引入 Bootstrap 樣式表 --\u003e\\n    \u003clink rel=\\\"stylesheet\\\" href=\\\"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css\\\"\u003e\\n    \u003cstyle\u003e\\n        .navbar-dark .navbar-brand {\\n            color: #fff;\\n        }\\n        .navbar-brand {\\n            text-shadow: 0 0 8px #fff;\\n        }\\n    \u003c/style\u003e\\n\u003c/head\u003e\\n\u003cbody\u003e\\n    \u003cnav class=\\\"navbar navbar-expand-lg navbar-dark bg-dark\\\"\u003e\\n        \u003ca class=\\\"navbar-brand\\\" href=\\\"#\\\"\u003e\\n            \u003cimg src=\\\"legendary.png\\\" width=\\\"30\\\" height=\\\"30\\\" class=\\\"d-inline-block align-top\\\" alt=\\\"\\\"\u003e\\n            網站名稱\\n        \u003c/a\u003e\\n        \u003cbutton class=\\\"navbar-toggler\\\" type=\\\"button\\\" data-toggle=\\\"collapse\\\" data-target=\\\"#navbarNav\\\" aria-controls=\\\"navbarNav\\\" aria-expanded=\\\"false\\\" aria-label=\\\"Toggle navigation\\\"\u003e\\n            \u003cspan class=\\\"navbar-toggler-icon\\\"\u003e\u003c/span\u003e\\n        \u003c/button\u003e\\n        \u003cdiv class=\\\"collapse navbar-collapse\\\" id=\\\"navbarNav\\\"\u003e\\n            \u003cul class=\\\"navbar-nav\\\"\u003e\\n                \u003cli class=\\\"nav-item active\\\"\u003e\\n                    \u003ca class=\\\"nav-link\\\" href=\\\"#video\\\"\u003e影片創作\u003c/a\u003e\\n                \u003c/li\u003e\\n                \u003cli class=\\\"nav-item\\\"\u003e\\n                    \u003ca class=\\\"nav-link\\\" href=\\\"#story\\\"\u003e故事繪本\u003c/a\u003e\\n                \u003c/li\u003e\\n                \u003cli class=\\\"nav-item\\\"\u003e\\n                    \u003ca class=\\\"nav-link\\\" href=\\\"#picture\\\"\u003e圖片作品\u003c/a\u003e\\n                \u003c/li\u003e\\n                \u003cli class=\\\"nav-item\\\"\u003e\\n                    \u003ca class=\\\"nav-link\\\" href=\\\"#music\\\"\u003e音樂作品\u003c/a\u003e\\n                \u003c/li\u003e\\n            \u003c/ul\u003e\\n        \u003c/div\u003e\\n    \u003c/nav\u003e\\n\\n    \u003cdiv class=\\\"container my-5\\\" id=\\\"video\\\"\u003e\\n        \u003ch2\u003e影片作品\u003c/h2\u003e\\n        \u003cdiv class=\\\"embed-responsive embed-responsive-16by9\\\"\u003e\\n            \u003ciframe src=\\\"https://clipchamp.com/watch/ygMI31RNLiS/embed\\\" allow=\\\"autoplay\\\" class=\\\"embed-responsive-item\\\"\u003e\u003c/iframe\u003e\\n        \u003c/div\u003e\\n        \u003cdiv class=\\\"mt-3\\\"\u003e\\n            \u003cp\u003e\\n                標題：「冷知識大揭秘！讓你大開眼界的趣味事實」。\\n            \u003c/p\u003e\\n        \u003c/div\u003e\\n        \u003cdiv class=\\\"embed-responsive embed-responsive-16by9 mt-5\\\"\u003e\\n            \u003ciframe src=\\\"https://clipchamp.com/watch/LjqZg45eHgv/embed\\\" allow=\\\"autoplay\\\" class=\\\"embed-responsive-item\\\"\u003e\u003c/iframe\u003e\\n        \u003c/div\u003e\\n        \u003cdiv class=\\\"mt-3\\\"\u003e\\n            \u003cp\u003e\\n                標題：《狂野的叢林求生之旅：與野生動物共享樹上住宿》。\\n            \u003c/p\u003e\\n        \u003c/div\u003e\\n    \u003c/div\u003e\\n\\n    \u003cdiv class=\\\"container my-5\\\" id=\\\"story\\\"\u003e\\n        \u003ch2\u003e故事繪本\u003c/h2\u003e\\n        \u003cdiv class=\\\"row\\\"\u003e\\n            \u003cdiv class=\\\"col-lg-5\\\"\u003e\\n                \u003cdiv class=\\\"mt-3\\\"\u003e\\n                    \u003cp\u003e\\n                        描述：一位小男孩在被下詛咒城堡中的恐怖故事。\\n                    \u003c/p\u003e\\n                \u003c/div\u003e\\n            \u003c/div\u003e\\n            \u003cdiv class=\\\"col-lg-7\\\"\u003e\\n                \u003cdiv class=\\\"embed-responsive embed-responsive-16by9\\\"\u003e\\n                    \u003ciframe src=\\\"https://www.canva.com/design/DAFoTwTQfE8/view?embed\\\" class=\\\"embed-responsive-item\\\"\u003e\u003c/iframe\u003e\\n                \u003c/div\u003e\\n            \u003c/div\u003e\\n        \u003c/div\u003e\\n        \u003cdiv class=\\\"row mt-3\\\"\u003e\\n            \u003cdiv class=\\\"col-lg-5\\\"\u003e\\n                \u003cdiv class=\\\"mt-3\\\"\u003e\\n                    \u003cp\u003e\\n                        描述：這是關於會讓你腦動大開的冷知識影片。\\n                    \u003c/p\u003e\\n                \u003c/div\u003e\\n            \u003c/div\u003e\\n            \u003cdiv class=\\\"col-lg-7\\\"\u003e\\n                \u003cdiv class=\\\"embed-responsive embed-responsive-16by9\\\"\u003e\\n                    \u003ciframe src=\\\"https://www.canva.com/design/DAFoYgo4Tk4/view?embed\\\" class=\\\"embed-responsive-item\\\"\u003e\u003c/iframe\u003e\\n                \u003c/div\u003e\\n            \u003c/div\u003e\\n        \u003c/div\u003e\\n    \u003c/div\u003e\\n    \u003c!-- 引入 Bootstrap JavaScript 程式碼 --\u003e\\n    \u003cdiv class=\\\"container my-5\\\" id=\\\"picture\\\"\u003e\\n\\n        \u003ch2\u003e圖片作品\u003c/h2\u003e\\n        \u003cdiv class=\\\"row\\\"\u003e\\n            \u003cdiv class=\\\"col-lg-3 col-md-4 col-sm-6\\\"\u003e\\n                \u003cdiv class=\\\"card mb-4\\\"\u003e\\n                    \u003cimg src=\\\"1.png\\\" class=\\\"card-img-top\\\" alt=\\\"Image 1\\\"\u003e\\n                    \u003cdiv class=\\\"card-body\\\"\u003e\\n                        \u003ch5 class=\\\"card-title\\\"\u003eSand (沙子)\u003c/h5\u003e\\n                    \u003c/div\u003e\\n                \u003c/div\u003e\\n            \u003c/div\u003e\\n            \u003cdiv class=\\\"col-lg-3 col-md-4 col-sm-6\\\"\u003e\\n                \u003cdiv class=\\\"card mb-4\\\"\u003e\\n                    \u003cimg src=\\\"2.png\\\" class=\\\"card-img-top\\\" alt=\\\"Image 2\\\"\u003e\\n                    \u003cdiv class=\\\"card-body\\\"\u003e\\n                        \u003ch5 class=\\\"card-title\\\"\u003eCannon(大砲)\u003c/h5\u003e\\n                    \u003c/div\u003e\\n                \u003c/div\u003e\\n            \u003c/div\u003e\\n            \u003cdiv class=\\\"col-lg-3 col-md-4 col-sm-6\\\"\u003e\\n                \u003cdiv class=\\\"card mb-4\\\"\u003e\\n                    \u003cimg src=\\\"3.png\\\" class=\\\"card-img-top\\\" alt=\\\"Image 2\\\"\u003e\\n                    \u003cdiv class=\\\"card-body\\\"\u003e\\n                        \u003ch5 class=\\\"card-title\\\"\u003eA giant castle(巨大的城堡)\u003c/h5\u003e\\n                    \u003c/div\u003e\\n                \u003c/div\u003e\\n            \u003c/div\u003e\\n            \u003cdiv class=\\\"col-lg-3 col-md-4 col-sm-6\\\"\u003e\\n                \u003cdiv class=\\\"card mb-4\\\"\u003e\\n                    \u003cimg src=\\\"4.png\\\" class=\\\"card-img-top\\\" alt=\\\"Image 2\\\"\u003e\\n                    \u003cdiv class=\\\"card-body\\\"\u003e\\n                        \u003ch5 class=\\\"card-title\\\"\u003eAn otter with glasses and knife(帶著眼鏡並握著刀的水獺)\u003c/h5\u003e\\n                    \u003c/div\u003e\\n                \u003c/div\u003e\\n            \u003c/div\u003e\\n            \u003cdiv class=\\\"col-lg-3 col-md-4 col-sm-6\\\"\u003e\\n                \u003cdiv class=\\\"card mb-4\\\"\u003e\\n                    \u003cimg src=\\\"5.png\\\" class=\\\"card-img-top\\\" alt=\\\"Image 2\\\"\u003e\\n                    \u003cdiv class=\\\"card-body\\\"\u003e\\n                        \u003ch5 class=\\\"card-title\\\"\u003eA blue mythical tiger with purple spot(一隻神話般的藍色老虎並帶著紫色斑紋)\u003c/h5\u003e\\n                    \u003c/div\u003e\\n                \u003c/div\u003e\\n            \u003c/div\u003e\\n            \u003cdiv class=\\\"col-lg-3 col-md-4 col-sm-6\\\"\u003e\\n                \u003cdiv class=\\\"card mb-4\\\"\u003e\\n                    \u003cimg src=\\\"6.png\\\" class=\\\"card-img-top\\\" alt=\\\"Image 2\\\"\u003e\\n                    \u003cdiv class=\\\"card-body\\\"\u003e\\n                        \u003ch5 class=\\\"card-title\\\"\u003eA volcanic eruption(火山爆發)\u003c/h5\u003e\\n                    \u003c/div\u003e\\n                \u003c/div\u003e\\n            \u003c/div\u003e\\n            \u003cdiv class=\\\"col-lg-3 col-md-4 col-sm-6\\\"\u003e\\n                \u003cdiv class=\\\"card mb-4\\\"\u003e\\n                    \u003cimg src=\\\"7.png\\\" class=\\\"card-img-top\\\" alt=\\\"Image 2\\\"\u003e\\n                    \u003cdiv class=\\\"card-body\\\"\u003e\\n                        \u003ch5 class=\\\"card-title\\\"\u003eA mammoth rasing baby mammoth(一隻猛瑪象照顧小猛瑪象)\u003c/h5\u003e\\n                    \u003c/div\u003e\\n                \u003c/div\u003e\\n            \u003c/div\u003e\\n            \u003cdiv class=\\\"col-lg-3 col-md-4 col-sm-6\\\"\u003e\\n                \u003cdiv class=\\\"card mb-4\\\"\u003e\\n                    \u003cimg src=\\\"8.png\\\" class=\\\"card-img-top\\\" alt=\\\"Image 2\\\"\u003e\\n                    \u003cdiv class=\\\"card-body\\\"\u003e\\n                        \u003ch5 class=\\\"card-title\\\"\u003eA tyrannosaurus rex(暴龍)\u003c/h5\u003e\\n                    \u003c/div\u003e\\n                \u003c/div\u003e\\n            \u003c/div\u003e\\n            \u003cdiv class=\\\"col-lg-3 col-md-4 col-sm-6\\\"\u003e\\n                \u003cdiv class=\\\"card mb-4\\\"\u003e\\n                    \u003cimg src=\\\"9.png\\\" class=\\\"card-img-top\\\" alt=\\\"Image 2\\\"\u003e\\n                    \u003cdiv class=\\\"card-body\\\"\u003e\\n                        \u003ch5 class=\\\"card-title\\\"\u003eA metal armored creature(一隻有著鐵裝的生物)\u003c/h5\u003e\\n                    \u003c/div\u003e\\n                \u003c/div\u003e\\n            \u003c/div\u003e\\n            \u003cdiv class=\\\"col-lg-3 col-md-4 col-sm-6\\\"\u003e\\n                \u003cdiv class=\\\"card mb-4\\\"\u003e\\n                    \u003cimg src=\\\"10.png\\\" class=\\\"card-img-top\\\" alt=\\\"Image 2\\\"\u003e\\n                    \u003cdiv class=\\\"card-body\\\"\u003e\\n                        \u003ch5 class=\\\"card-title\\\"\u003eA scary mechanic bear(一隻恐怖的機械熊)\u003c/h5\u003e\\n                    \u003c/div\u003e\\n                \u003c/div\u003e\\n            \u003c/div\u003e\\n            \u003cdiv class=\\\"col-lg-3 col-md-4 col-sm-6\\\"\u003e\\n                \u003cdiv class=\\\"card mb-4\\\"\u003e\\n                    \u003cimg src=\\\"11.png\\\" class=\\\"card-img-top\\\" alt=\\\"Image 11\\\"\u003e\\n                    \u003cdiv class=\\\"card-body\\\"\u003e\\n                        \u003ch5 class=\\\"card-title\\\"\u003eA metal iron man(沒上色的的鋼鐵人)\u003c/h5\u003e\\n                    \u003c/div\u003e\\n                \u003c/div\u003e\\n            \u003c/div\u003e\\n            \u003cdiv class=\\\"col-lg-3 col-md-4 col-sm-6\\\"\u003e\\n                \u003cdiv class=\\\"card mb-4\\\"\u003e\\n                    \u003cimg src=\\\"12.png\\\" class=\\\"card-img-top\\\" alt=\\\"Image 12\\\"\u003e\\n                    \u003cdiv class=\\\"card-body\\\"\u003e\\n                        \u003ch5 class=\\\"card-title\\\"\u003eVery detailed mecha rhinoceros(細節很多的機械犀牛)\u003c/h5\u003e\\n                    \u003c/div\u003e\\n                \u003c/div\u003e\\n            \u003c/div\u003e\\n        \u003c/div\u003e\\n    \u003c/div\u003e\\n    \u003cdiv class=\\\"container my-5\\\" id=\\\"music\\\"\u003e\\n        \u003ch2\u003e音樂作品\u003c/h2\u003e\\n        \u003cul class=\\\"list-group mt-4\\\"\u003e\\n\\n            \u003cul class=\\\"list-group\\\"\u003e\\n                \u003cli class=\\\"list-group-item\\\"\u003e\\n                    \u003cdiv class=\\\"media\\\"\u003e\\n                        \u003cdiv class=\\\"media-body\\\"\u003e\\n                            \u003ch5 class=\\\"mt-0\\\"\u003eDrum\u003c/h5\u003e\\n                            \u003caudio controls\u003e\\n                                \u003csource src=\\\"Drum.wav\\\" type=\\\"audio/wav\\\"\u003e\\n                            \u003c/audio\u003e\\n                        \u003c/div\u003e\\n                    \u003c/div\u003e\\n                \u003c/li\u003e\\n                \u003cli class=\\\"list-group-item\\\"\u003e\\n                    \u003cdiv class=\\\"media\\\"\u003e\\n                        \u003cdiv class=\\\"media-body\\\"\u003e\\n                            \u003ch5 class=\\\"mt-0\\\"\u003eMelody\u003c/h5\u003e\\n                            \u003caudio controls\u003e\\n                                \u003csource src=\\\"Melody.wav\\\" type=\\\"audio/wav\\\"\u003e\\n                            \u003c/audio\u003e\\n                        \u003c/div\u003e\\n                    \u003c/div\u003e\\n                \u003c/li\u003e\\n                \u003cli class=\\\"list-group-item\\\"\u003e\\n                    \u003cdiv class=\\\"media\\\"\u003e\\n                        \u003cdiv class=\\\"media-body\\\"\u003e\\n                            \u003ch5 class=\\\"mt-0\\\"\u003eChord\u003c/h5\u003e\\n                            \u003caudio controls\u003e\\n                                \u003csource src=\\\"Chord.wav\\\" type=\\\"audio/wav\\\"\u003e\\n                            \u003c/audio\u003e\\n                        \u003c/div\u003e\\n                    \u003c/div\u003e\\n                \u003c/ul\u003e\\n            \u003c/ul\u003e\\n        \u003c/div\u003e\\n\\n        \u003cscript src=\\\"https://code.jquery.com/jquery-3.2.1.slim.min.js\\\"\u003e\u003c/script\u003e\\n        \u003cscript src=\\\"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js\\\"\u003e\u003c/script\u003e\\n        \u003cscript src=\\\"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js\\\"\u003e\u003c/script\u003e\\n\\n    \u003c/body\u003e\\n\u003c/html\u003e\",\"css\":\"\",\"js\":\"\"}","created_at":"2023-07-14T14:13:28.561+08:00","updated_at":"2023-07-14T16:36:20.084+08:00","name":"設計網頁","language":"web","screenshot":{"url":"https://cdn1.koding.school/uploads/project/screenshot/565414/361c07430fc3183fffaaeeb3ef76ddfb.jpg"},"parent_id":3,"plugin":"","description":null,"note":null,"status":"public","like_student_ids":[],"is_featured":false,"views":71,"hashid":"6rps2v92z","is_content_changed":false,"review_status":"unsubmitted","submitted_at":null,"reviewed_at":null,"advise":null,"is_deleted":false}

[{"id":12852149,"file_name":"2.png","project_id":565414,"asset_id":652291,"created_at":"2023-07-14T15:30:43.132+08:00","updated_at":"2023-07-14T15:30:43.132+08:00"},{"id":12852150,"file_name":"1.png","project_id":565414,"asset_id":652292,"created_at":"2023-07-14T15:30:43.134+08:00","updated_at":"2023-07-14T15:30:43.134+08:00"},{"id":12851442,"file_name":"koding.png","project_id":565414,"asset_id":302342,"created_at":"2023-07-14T14:13:28.567+08:00","updated_at":"2023-07-14T14:13:28.567+08:00"},{"id":12853002,"file_name":"Chord.wav","project_id":565414,"asset_id":653174,"created_at":"2023-07-14T16:33:54.760+08:00","updated_at":"2023-07-14T16:33:54.760+08:00"},{"id":12852903,"file_name":"Melody.wav","project_id":565414,"asset_id":653176,"created_at":"2023-07-14T16:22:17.873+08:00","updated_at":"2023-07-14T16:22:17.873+08:00"},{"id":12852904,"file_name":"Drum.wav","project_id":565414,"asset_id":653177,"created_at":"2023-07-14T16:22:17.874+08:00","updated_at":"2023-07-14T16:22:17.874+08:00"},{"id":12852135,"file_name":"8.png","project_id":565414,"asset_id":652276,"created_at":"2023-07-14T15:30:16.823+08:00","updated_at":"2023-07-14T15:30:16.823+08:00"},{"id":12852136,"file_name":"7.png","project_id":565414,"asset_id":652277,"created_at":"2023-07-14T15:30:16.824+08:00","updated_at":"2023-07-14T15:30:16.824+08:00"},{"id":12851699,"file_name":"legendary.png","project_id":565414,"asset_id":651837,"created_at":"2023-07-14T14:40:29.095+08:00","updated_at":"2023-07-14T14:43:46.918+08:00"},{"id":12852142,"file_name":"6.png","project_id":565414,"asset_id":652283,"created_at":"2023-07-14T15:30:26.587+08:00","updated_at":"2023-07-14T15:30:26.587+08:00"},{"id":12852143,"file_name":"5.png","project_id":565414,"asset_id":651837,"created_at":"2023-07-14T15:30:26.589+08:00","updated_at":"2023-07-14T15:30:26.589+08:00"},{"id":12852129,"file_name":"12.png","project_id":565414,"asset_id":652270,"created_at":"2023-07-14T15:30:00.717+08:00","updated_at":"2023-07-14T15:30:00.717+08:00"},{"id":12852130,"file_name":"11.png","project_id":565414,"asset_id":652271,"created_at":"2023-07-14T15:30:00.719+08:00","updated_at":"2023-07-14T15:30:00.719+08:00"},{"id":12852132,"file_name":"10.png","project_id":565414,"asset_id":652273,"created_at":"2023-07-14T15:30:07.579+08:00","updated_at":"2023-07-14T15:30:07.579+08:00"},{"id":12852133,"file_name":"9.png","project_id":565414,"asset_id":652274,"created_at":"2023-07-14T15:30:07.581+08:00","updated_at":"2023-07-14T15:30:07.581+08:00"},{"id":12852145,"file_name":"4.png","project_id":565414,"asset_id":652285,"created_at":"2023-07-14T15:30:33.367+08:00","updated_at":"2023-07-14T15:30:33.367+08:00"},{"id":12852146,"file_name":"3.png","project_id":565414,"asset_id":652286,"created_at":"2023-07-14T15:30:33.369+08:00","updated_at":"2023-07-14T15:30:33.369+08:00"}]