-
Notifications
You must be signed in to change notification settings - Fork 30
/
Copy pathindex.html
1 lines (1 loc) · 11.3 KB
/
index.html
1
<!DOCTYPE html><html><head><meta property="og:locale" content="zh_TW"><meta property="og:title" content="獎助金專案樣板"><meta property="og:type" content="article"><meta property="og:url" content="https://g0v.github.io/grants-landing-template"><meta property="og:image" content="https://g0v.github.io/grants-landing-template/img/thumbnail.jpg"><meta property="og:image:type" content="image/jpg"><meta property="og:image:width" content="1084"><meta property="og:image:height" content="631"><meta property="og:description" content="獎助金專案專用的一頁式專案說明樣板"><meta property="article:author" content="zbryikt"><meta property="article:section" content="Taiwan"><meta name="viewport" content="width=device-width; initial-scale=1.0;"><meta charset="utf-8"><link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"><link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css"><link rel="stylesheet" type="text/css" href="index.css"></head><body><nav class="navbar navbar-expand-lg navbar-dark fixed-top"><a href="/" class="navbar-brand">專案名稱</a><button type="button" data-toggle="collapse" data-target="#navbarSupportedContent" class="navbar-toggler"><span class="navbar-toggler-icon"></span></button><div class="collapse navbar-collapse"><ul class="navbar-nav ml-auto"><li class="nav-item active"><a href="#" class="nav-link">關於專案</a></li><li class="nav-item active"><a href="#" class="nav-link">如何參與</a></li><li class="nav-item active"><a href="#" class="nav-link">新手教學</a></li><li class="nav-item active"><a href="#" class="nav-link">關於專案</a></li></ul></div></nav><div class="jumbotron text-light"><div class="text-center"><h1 class="mb-2">具有說服力的一具短話</h1><div style="border-bottom:1px solid rgba(255,255,255,0.3);margin:20px"></div><p>再稍微細節一點解釋這個專案的幾句話，以一到兩行的長度為主</p><br><div style="width:280px" class="btn btn-danger btn-lg">現在就開始使用</div></div></div><div class="section bg-white section-news"><div class="inner"><div class="text-center"><h2>最新消息</h2></div><ul><li><a href="/news/">最新消息區塊更新上線了！ <small>/ 20190318</small></a></li><li><a href="/news/">加入官方獎助金圖示！ <small>/ 20180713</small></a></li><li><a href="/news/">收到第一個 Pull Request ！ <small>/ 20180317</small></a></li><li><a href="/news/">獎助金專案樣板網正式啟動！<small>/ 20180119</small></a></li></ul></div></div><div class="section bg-warning section-what"><div class="inner"><div class="text-center"><h2>什麼是這個專案？</h2></div><p>簡單扼要的說明這個專案是什麼，或者輔以一些實例、一些使用情境。比方說，Cofact ( 在截稿日前 ) 的首頁只有一個文章列表，就需要一個更清楚的說明。</p><p>分項式的說明可以更聚焦地說明專案的特色或要點，也可以附上圖示 ( optional )：</p></div></div><div class="section section-features"><div class="inner"><div class="row"><div class="col-md"><div class="text-center"><i class="icon fa fa-wheelchair-alt"></i></div><div class="text-center"><h5>只需改字即可實用</h5></div><p>重點文字直接用說明方式表達出來，方便用戶直接修改內文後立即套用。</p></div><div class="col-md"><div class="text-center"><i class="icon fa fa-list"></i></div><div class="text-center"><h5>內容的架構已預定</h5></div><p>敘事基本架構先準備好，照著內文的思路編排，可確保基本內容流暢。</p></div><div class="col-md"><div class="text-center"><i class="icon fa fa-code"></i></div><div class="text-center"><h5>開源自取且恰當授權</h5></div><p>開源於零時政府源碼庫，直接分支就可以使用，不用擔心找不到源碼。</p></div></div></div></div><div class="section section-why bg-light"><div class="inner"><div class="text-center"><h2>為什麼要做這個專案？</h2></div><p>使用者了解了這是什麼專案以後，再來說明清楚為什麼要做這件事，為什麼要這樣做，做了可以帶來什麼好處。除了單純的文字，亦可穿插各種資源，例如影片、插畫、螢幕錄影、互動式體驗等等。</p><p>下面的這一個例子可以想像成是一個插入的影片或插圖的效果，配合右方的敘述文字理解裡面想要表達的重點，亦從左方的數位內容營造出更具吸引人的效果。</p><br><div class="row"><div class="col"><div style="background:url(img/shaq.gif) center center no-repeat #444;background-size:cover" class="media-preview"></div></div><div class="col"><h4>就像是這樣</h4><div class="sep light-dark gap-sm"></div><p>左邊可以放一張圖、放個影片、放個動畫等等的東西，甚至有實際可以操作的實例，效果通常都會不錯喔！</p><div class="pull-right mr-3"><a href="#"><small>了解更多的按鈕 <i class="fa fa-arrow-right"></i></small></a></div></div></div></div></div><div class="section section-traction bg-danger text-light"><div class="inner text-center"><h2>我們的成果</h2><p>利用一些明確的數字可以給人更具體的感覺</p><div style="border-bottom:1px solid rgba(255,255,255,0.6);margin:40px auto;width:150px" class="sep"></div><div class="row"><div class="col-6 col-md-3"><div class="huge">5</div> 次成果發表</div><div class="col-6 col-md-3"><div class="huge">9</div> 個實用案例</div><div class="col-6 col-md-3"><div class="huge">33</div> 個社群提起</div><div class="col-6 col-md-3"><div class="huge">2</div> 次實體活動</div></div></div></div><div class="section section-photos"><div class="inner"><div style="background-image:url(img/gallery/1.jpg)" class="photo"><div class="mask"></div></div><div style="background-image:url(img/gallery/2.jpg)" class="photo"><div class="mask"></div></div><div style="background-image:url(img/gallery/3.jpg)" class="photo"><div class="mask"></div></div><div style="background-image:url(img/gallery/4.jpg)" class="photo"><div class="mask"></div></div><div style="background-image:url(img/gallery/5.jpg)" class="photo"><div class="mask"></div></div><div style="background-image:url(img/gallery/6.jpg)" class="photo"><div class="mask"></div></div></div></div><div class="section section-trivia"><div class="inner"><div class="text-center"><h2>提供的選項有哪些？</h2></div><p>如果你的專案做了許多事想要火力展示，卻又不適合寫一大堆東西的時候，做成迷你表列會更適合。</p><br><div class="row"><div class="col-6 col-md-3"><div class="media"><i class="fa mr-2 mt-1 fa-birthday-cake"></i><div class="media-body"><span class="name"><b>Runtime</b></span><p style="line-height:1.4em;font-size:0.6em;color:#444">可以簡單介紹一下 Runtime，長度不拘但各項間可以對齊。</p></div></div></div><div class="col-6 col-md-3"><div class="media"><i class="fa mr-2 mt-1 fa-bus"></i><div class="media-body"><span class="name"><b>Redis</b></span><p style="line-height:1.4em;font-size:0.6em;color:#444">可以簡單介紹一下 Redis，長度不拘但各項間可以對齊。</p></div></div></div><div class="col-6 col-md-3"><div class="media"><i class="fa mr-2 mt-1 fa-camera"></i><div class="media-body"><span class="name"><b>Scale</b></span><p style="line-height:1.4em;font-size:0.6em;color:#444">可以簡單介紹一下 Scale，長度不拘但各項間可以對齊。</p></div></div></div><div class="col-6 col-md-3"><div class="media"><i class="fa mr-2 mt-1 fa-calculator"></i><div class="media-body"><span class="name"><b>Add-ons</b></span><p style="line-height:1.4em;font-size:0.6em;color:#444">可以簡單介紹一下 Add-ons，長度不拘但各項間可以對齊。</p></div></div></div><div class="col-6 col-md-3"><div class="media"><i class="fa mr-2 mt-1 fa-bullhorn"></i><div class="media-body"><span class="name"><b>Storage</b></span><p style="line-height:1.4em;font-size:0.6em;color:#444">可以簡單介紹一下 Storage，長度不拘但各項間可以對齊。</p></div></div></div><div class="col-6 col-md-3"><div class="media"><i class="fa mr-2 mt-1 fa-check-circle"></i><div class="media-body"><span class="name"><b>AI</b></span><p style="line-height:1.4em;font-size:0.6em;color:#444">可以簡單介紹一下 AI，長度不拘但各項間可以對齊。</p></div></div></div><div class="col-6 col-md-3"><div class="media"><i class="fa mr-2 mt-1 fa-cloud"></i><div class="media-body"><span class="name"><b>Extensibility</b></span><p style="line-height:1.4em;font-size:0.6em;color:#444">可以簡單介紹一下 Extensibility，長度不拘但各項間可以對齊。</p></div></div></div><div class="col-6 col-md-3"><div class="media"><i class="fa mr-2 mt-1 fa-binoculars"></i><div class="media-body"><span class="name"><b>Github</b></span><p style="line-height:1.4em;font-size:0.6em;color:#444">可以簡單介紹一下 Github，長度不拘但各項間可以對齊。</p></div></div></div></div></div></div><div class="section section-media bg-warning text-dark"><div class="inner"><div class="text-center"><h2>媒體報導</h2></div><div class="text-center"><img src="img/media/udn.png" style="height:60px;margin:20px;"><img src="img/media/ltn.png" style="height:60px;margin:20px;"><img src="img/media/businesstoday.png" style="height:60px;margin:20px;"></div></div></div><div class="section section-how bg-danger text-light"><div class="inner text-center"><h2>要怎麼開始呢</h2><p>何不放些文件與說明呢？請考慮到完全陌生的使用者，進入門檻跟上手的複雜度。</p><br><div class="btn btn-light btn-lg">現在就開始</div></div></div><div class="section section-contribute bg-light text-dark"><div class="inner"><div class="text-center"><h2>一起來開幹</h2></div><p>獎助金專案應懷抱開源的精神，歡迎大家一起來開幹。不過，要如何讓想幫忙的人一起來做呢？建議可以先提供一些最基本的資訊，例如專案庫、共筆、線上群組或聊天室頻道等讓新人可以先了解情況；若專案應用到群眾外包概念 ( 如開放政獻、真的假的 )，亦可將訪客導向相關的入口網。</p><p>依照需求，這裡亦可以列出可能需要的協助，例如：</p><ul><li>你是有志青農嗎？阿龜誌徵求科技農夫試用者中，立刻來加一吧！</li><li>自己的長輩自己救 - 真的假的流言終結團團員募集中</li></ul><br><div class="text-center"><div class="btn btn-primary btn-lg mr-2">源碼庫 <i class="fa fa-github"></i></div><div class="btn btn-primary btn-lg">立刻來幫忙</div></div></div></div><div class="section section-footer bg-dark text-light"><div class="inner"><div class="row"><div class="col-12 col-md-8"><div class="row"><div class="col-6 col-md-4"><label>本專案</label><div class="item"><a href="#">關於我們</a></div><div class="item"><a href="#">原始提案</a></div><div class="item"><a href="#">源碼庫</a></div><div class="item"><a href="#">社群專頁</a></div><div class="item"><a href="#">聯絡窗口</a></div></div><div class="col-6 col-md-4"><label>注意事項</label><div class="item"><a href="#">使用條款</a></div><div class="item"><a href="#">隱私權政策</a></div><div class="item"><a href="#">成果授權</a></div></div></div></div><div class="col-12 col-md-4 text-center"><a href="https://grants.g0v.tw/power/" target="_blank"><img src="img/poweredby-square-i.svg" style="width:256px" alt="Powered by g0v"></a></div></div></div></div></body></html>