diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..840c083 --- /dev/null +++ b/css/style.css @@ -0,0 +1,103 @@ + +.navbar-brand { + text-transform: uppercase; +} + +.search-form { + display: block; + margin: 8px 0 0 0; + position: absolute; + right: 10px; +} +.search-input { + width: 300px; + margin-right: 35px; + background-color: #e5e5e5; +} + +article { + margin: 10px 0; + padding: 20px 0; + border-top: solid 1px #999; +} +article.page, +article.first { + margin-top: 0; + padding-top: 10px; + border-top: none; +} + +/** + * News teaser listing + */ +.news-teaser h2 { + color: #4C9ED9; + margin: 14px 0; +} +.news-teaser .news-rating { + width: 70px; + float: left; +} +.news-teaser .news-rating .icon { + display: block; + background-image: url(../images/rate.png); + background-repeat: no-repeat; + background-position: center; + width: 70px; + height: 35px; +} +.news-teaser .news-rating .rating { + display: block; + width: 70px; + padding: 0 0 8px 0; + text-align: center; + font-size: 26pt; +} + +.news-teaser .news-teaser-content { + margin-left: 70px; +} +.news-teaser .news-teaser-content .source-name, +.news-teaser .news-teaser-content .stats { + color: #777; +} +.news-teaser .news-teaser-content .stats .changes .figure { + color: #4C9ED9; + font-weight: bold; +} + +/** + * single news page + */ +.news-full { + padding: 0 1em; +} +.news-full h1 { + font-size: 1.6em; + margin: 0.4em 0; +} +.news-full p { + margin: 1.2em 0; + text-align: justify; +} +.news-full .source, +.news-full .stats { + color: #777; +} +.news-full .content { + margin: 1em 0; + line-height: 2em; + text-shadow: 0 0 0.5em #000; + color: #CCC; +} +.news-full .content .change { + color: #000; + text-shadow: 0 0 #000; +} +.news-full .content .add { + color: #060; +} +.news-full .content .delete { + color: #A00; + text-decoration: line-through; +} diff --git a/images/rate.png b/images/rate.png new file mode 100644 index 0000000..243ecd8 Binary files /dev/null and b/images/rate.png differ diff --git a/main.html b/main.html new file mode 100644 index 0000000..2cf3771 --- /dev/null +++ b/main.html @@ -0,0 +1,369 @@ + + + + + + +Watchdog + + + + + + + + + + + +
+
+ +
+
+ + 20 +
+
+
香港新聞
+

This is an English Headline

+
+ + 55 + 分鐘前更新 + • + + 改動 + 66% + • + + 777 + 條評論 + +
+
+
+ +
+
+ + 20 +
+
+
香港新聞
+

This is an English Headline

+
+ + 55 + 分鐘前更新 + • + + 改動 + 66% + • + + 777 + 條評論 + +
+
+
+ +
+
+ + 20 +
+
+
香港新聞
+

This is an English Headline

+
+ + 55 + 分鐘前更新 + • + + 改動 + 66% + • + + 777 + 條評論 + +
+
+
+ +
+
+ + 20 +
+
+
香港新聞
+

This is an English Headline

+
+ + 55 + 分鐘前更新 + • + + 改動 + 66% + • + + 777 + 條評論 + +
+
+
+ +
+
+ + 20 +
+
+
香港新聞
+

This is an English Headline

+
+ + 55 + 分鐘前更新 + • + + 改動 + 66% + • + + 777 + 條評論 + +
+
+
+ +
+
+ + 20 +
+
+
香港新聞
+

This is an English Headline

+
+ + 55 + 分鐘前更新 + • + + 改動 + 66% + • + + 777 + 條評論 + +
+
+
+ +
+
+ + 20 +
+
+
香港新聞
+

This is an English Headline

+
+ + 55 + 分鐘前更新 + • + + 改動 + 66% + • + + 777 + 條評論 + +
+
+
+ +
+
+ + 20 +
+
+
香港新聞
+

This is an English Headline

+
+ + 55 + 分鐘前更新 + • + + 改動 + 66% + • + + 777 + 條評論 + +
+
+
+ +
+
+ + 20 +
+
+
香港新聞
+

This is an English Headline

+
+ + 55 + 分鐘前更新 + • + + 改動 + 66% + • + + 777 + 條評論 + +
+
+
+ +
+
+ + 20 +
+
+
香港新聞
+

This is an English Headline

+
+ + 55 + 分鐘前更新 + • + + 改動 + 66% + • + + 777 + 條評論 + +
+
+
+ +
+
+ + 20 +
+
+
香港新聞
+

This is an English Headline

+
+ + 55 + 分鐘前更新 + • + + 改動 + 66% + • + + 777 + 條評論 + +
+
+
+ +
+
+ + + \ No newline at end of file diff --git a/news.html b/news.html new file mode 100644 index 0000000..45edfe9 --- /dev/null +++ b/news.html @@ -0,0 +1,121 @@ + + + + + + +Watchdog + + + + + + + + + + + +
+
+ +
+
+ 香港新聞 • + Saturday, February 28, 2015 +
+

This is an English Headline

+
+ + 55 + 分鐘前更新 + • + + 改動 + 66% + • + + 777 + 條評論 + +
+
+

Lorem ipsum dolor Lorem ipsum dolorvdignissim Aliquam suscipit odio ac ante luctus pharetra . Pellentesque sit amet pellentesque augue . Aliquam vel tellus et urna dictum accumsan eget at massa Lorem ipsum dolorv Aliquam suscipit odio ac ante luctus pharetra . Pellentesque sit amet pellentesque augue. Aliquam vel tellus et urna dictum accumsan eget at massa Lorem ipsum dolorv Aliquam suscipit odio ac ante luctus pharetra . Pellentesque sit amet pellentesque augue. Aliquam vel tellus et urna dictum accumsan eget at massa Lorem ipsum dolorv Aliquam suscipit odio ac ante luctus pharetra . Pellentesque sit amet pellentesque augue.

+

Aliquam vel tellus et urna dictum accumsan eget at massa Lorem ipsum dolorv Aliquam suscipit odio ac ante luctus pharetra . Pellentesque sit amet pellentesque augue. Aliquam vel tellus et urna dictum accumsan eget at massa Lorem ipsum dolorv Aliquam suscipit odio ac ante luctus pharetra . Pellentesque sit amet pellentesque augue. Aliquam vel tellus et urna dictum accumsan eget at massa Lorem ipsum dolorv Aliquam suscipit odio ac ante luctus pharetra . Pellentesque sit amet pellentesque augue. Aliquam vel tellus et urna dictum accumsan eget at massa Lorem ipsum dolorv Aliquam suscipit odio ac ante luctus pharetra . Pellentesque sit amet pellentesque augue.

+

Aliquam vel tellus et urna dictum accumsan eget at massa Lorem ipsum dolorv Aliquam suscipit odio ac ante luctus pharetra . Aliquam vel tellus et urna dictum accumsan eget at massa Lorem ipsum dolorv Aliquam suscipit odio ac ante luctus pharetra . Pellentesque sit amet pellentesque augue. Pellentesque sit amet pellentesque augue . Aliquam vel tellus et urna dictum accumsan eget at massa

+
+
+ +
+
+ + + \ No newline at end of file