個人網站 | Programming Project | OrangeApple Learning Platform

{"id":553760,"student_id":10,"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    \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=\\\"logo1.png\\\" width=\\\"120\\\" height=\\\"30\\\" class=\\\"d-inline-block align-top\\\" alt=\\\"\\\"\u003e\\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=\\\"#\\\"\u003e影片創作\u003c/a\u003e\\n                \u003c/li\u003e\\n                \u003cli class=\\\"nav-item\\\"\u003e\\n                    \u003ca class=\\\"nav-link\\\" href=\\\"#\\\"\u003e故事繪本\u003c/a\u003e\\n                \u003c/li\u003e\\n                \u003cli class=\\\"nav-item\\\"\u003e\\n                    \u003ca class=\\\"nav-link\\\" href=\\\"#\\\"\u003e圖片作品\u003c/a\u003e\\n                \u003c/li\u003e\\n                \u003cli class=\\\"nav-item\\\"\u003e\\n                    \u003ca class=\\\"nav-link\\\" href=\\\"#\\\"\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-fluid bg-dark\\\"\u003e\\n        \u003cdiv class=\\\"row\\\"\u003e\\n            \u003cdiv class=\\\"col-md-8 order-md-2\\\"\u003e\\n                \u003cdiv class=\\\"embed-responsive embed-responsive-16by9\\\"\u003e\\n                    \u003ciframe class=\\\"embed-responsive-item\\\" src=\\\"https://clipchamp.com/watch/DN5dNRvKc3M/embed\\\" allowfullscreen\u003e\u003c/iframe\u003e\\n                \u003c/div\u003e\\n            \u003c/div\u003e\\n            \u003cdiv class=\\\"col-md-4 order-md-1 text-light\\\"\u003e\\n                \u003cp\u003e\\n                    這是一個範例影片作品，內容精彩紛呈，值得一看。\\n                \u003c/p\u003e\\n            \u003c/div\u003e\\n        \u003c/div\u003e\\n    \u003c/div\u003e\\n    \\n    \u003cdiv class=\\\"container\\\"\u003e\\n  \u003cdiv class=\\\"row\\\"\u003e\\n    \u003cdiv class=\\\"col-md-6\\\"\u003e\\n      \u003ch2\u003e故事繪本\u003c/h2\u003e\\n      \u003cp\u003e這是一個展示故事繪本的區塊，以下是繪本的內容：\u003c/p\u003e\\n      \u003cdiv class=\\\"embed-responsive embed-responsive-16by9\\\"\u003e\\n        \u003ciframe class=\\\"embed-responsive-item\\\" src=\\\"https://www.canva.com/design/XXX/view?embed\\\"\u003e\u003c/iframe\u003e\\n      \u003c/div\u003e\\n    \u003c/div\u003e\\n    \u003cdiv class=\\\"col-md-6\\\"\u003e\\n      \u003ch2\u003e內文說明\u003c/h2\u003e\\n      \u003cp\u003e這裡可以加入故事繪本的相關內容說明，例如作者、出版社、出版日期等等。\u003c/p\u003e\\n    \u003c/div\u003e\\n  \u003c/div\u003e\\n\u003c/div\u003e\\n\\n\u003cdiv class=\\\"container\\\"\u003e\\n  \u003ch2\u003e音樂作品\u003c/h2\u003e\\n  \u003cul class=\\\"list-group\\\"\u003e\\n    \u003cli class=\\\"list-group-item even\\\"\u003e\\n      \u003cdiv class=\\\"row\\\"\u003e\\n        \u003cdiv class=\\\"col-8 col-md-6 order-md-2\\\"\u003e\\n          \u003caudio controls\u003e\\n            \u003csource src=\\\"1.mp3\\\" type=\\\"audio/mpeg\\\"\u003e\\n            Your browser does not support the audio element.\\n          \u003c/audio\u003e\\n        \u003c/div\u003e\\n        \u003cdiv class=\\\"col-4 col-md-2 order-md-1\\\"\u003e\\n          \u003ch4\u003e音樂名稱 1\u003c/h4\u003e\\n        \u003c/div\u003e\\n      \u003c/div\u003e\\n    \u003c/li\u003e\\n    \u003cli class=\\\"list-group-item odd\\\"\u003e\\n      \u003cdiv class=\\\"row\\\"\u003e\\n        \u003cdiv class=\\\"col-8 col-md-6\\\"\u003e\\n          \u003caudio controls\u003e\\n            \u003csource src=\\\"2.mp3\\\" type=\\\"audio/mpeg\\\"\u003e\\n            Your browser does not support the audio element.\\n          \u003c/audio\u003e\\n        \u003c/div\u003e\\n        \u003cdiv class=\\\"col-4 col-md-2\\\"\u003e\\n          \u003ch4\u003e音樂名稱 2\u003c/h4\u003e\\n        \u003c/div\u003e\\n      \u003c/div\u003e\\n    \u003c/li\u003e\\n  \u003c/ul\u003e\\n\u003c/div\u003e\\n\\n\\n\\n\\n    \u003c!-- 引入 Bootstrap JavaScript 程式碼 --\u003e\\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\u003c/body\u003e\\n\u003c/html\u003e\",\"css\":\"\",\"js\":\"\"}","created_at":"2023-06-22T23:39:08.998+08:00","updated_at":"2023-06-26T15:45:53.460+08:00","name":"個人網站","language":"web","screenshot":{"url":"/uploads/project/screenshot/553760/a30c83f877c20b74e7e063f332212cc6.jpg"},"parent_id":3,"plugin":"","description":null,"note":null,"status":"public","like_student_ids":[],"is_featured":false,"views":313,"hashid":"36ysd8gnk","is_content_changed":false,"review_status":"unsubmitted","submitted_at":null,"reviewed_at":null,"advise":null,"is_deleted":false}