summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorsstvinc2 <sstvinc2@gmail.com>2017-02-13 18:45:58 -0600
committersstvinc2 <sstvinc2@gmail.com>2017-02-13 18:45:58 -0600
commitdc7dc6019b076583f1e815457b439f00200fb808 (patch)
treec38ab253eeac5958cc8fc2163287704ee13b80cb
parent0fb8417031cb025d6c609b1aefd5964553767b90 (diff)
Draft of new page layout
Saving this in case of need to rollback
-rw-r--r--html_template/newtemplate.html150
-rw-r--r--html_template/testtemplate.css136
2 files changed, 286 insertions, 0 deletions
diff --git a/html_template/newtemplate.html b/html_template/newtemplate.html
new file mode 100644
index 0000000..e9715fc
--- /dev/null
+++ b/html_template/newtemplate.html
@@ -0,0 +1,150 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <link rel="stylesheet" href="testtemplate.css">
+ <title>UnBiased</title>
+ </head>
+<body>
+
+<div id="page-header">
+ <span id="title-1" class="title">un</span><span id="title-2" class="title">biased</span><br />
+ <span id="subtitle">a different way to read the news</span>
+ <p id="timestamp">Last updated: xxTimexx</p>
+</div>
+
+<div id="page-container">
+ <div id="top-stories">
+
+ <div class="top-story">
+ <a target="_blank" href="redirects/h1-1.html" id="top-story-1">
+ <div class="top-stories-img" style="background-image: url('xxImg1-1xx');" />
+ </div>
+ <div class="top-stories-hed">xxTitle1-1xx</div>
+ </a>
+ <div class="top-stories-desc">xxDesc1-1xx</div>
+ </div>
+
+ <div class="top-story">
+ <a target="_blank" href="redirects/h1-2.html" id="top-story-2">
+ <div class="top-stories-img" style="background-image: url('xxImg1-2xx');" />
+ </div>
+ <div class="top-stories-hed">xxTitle1-2xx</div>
+ </a>
+ <div class="top-stories-desc">xxDesc1-2xx</div>
+ </div>
+
+ <div class="top-story">
+ <a target="_blank" href="redirects/h1-3.html" id="top-story-3">
+ <div class="top-stories-img" style="background-image: url('xxImg1-3xx');" />
+ </div>
+ <div class="top-stories-hed">xxTitle1-3xx</div>
+ </a>
+ <div class="top-stories-desc">xxDesc1-3xx</div>
+ </div>
+
+ <div class="top-story">
+ <a target="_blank" href="redirects/h1-4.html" id="top-story-4">
+ <div class="top-stories-img" style="background-image: url('xxImg1-4xx');" />
+ </div>
+ <div class="top-stories-hed">xxTitle1-4xx</div>
+ </a>
+ <div class="top-stories-desc">xxDesc1-4xx</div>
+ </div>
+
+ </div>
+
+ <div id="middle-stories">
+
+ <a target="_blank" href="redirects/h2-1.html" >
+ <div class="middle-story">
+ <div class="middle-stories-img" style="background-image: url('xxImg2-1xx');">
+ </div>
+ <div class="middle-stories-hed">xxTitle2-1xx</div>
+ </div>
+ </a>
+
+ <a target="_blank" href="redirects/h2-2.html" >
+ <div class="middle-story">
+ <div class="middle-stories-img" style="background-image: url('xxImg2-2xx');">
+ </div>
+ <div class="middle-stories-hed">xxTitle2-2xx</div>
+ </div>
+ </a>
+
+ <a target="_blank" href="redirects/h2-3.html" >
+ <div class="middle-story">
+ <div class="middle-stories-img" style="background-image: url('xxImg2-3xx');">
+ </div>
+ <div class="middle-stories-hed">xxTitle2-3xx</div>
+ </div>
+ </a>
+
+ <a target="_blank" href="redirects/h2-4.html" >
+ <div class="middle-story">
+ <div class="middle-stories-img" style="background-image: url('xxImg2-4xx');">
+ </div>
+ <div class="middle-stories-hed">xxTitle2-4xx</div>
+ </div>
+ </a>
+
+ <a target="_blank" href="redirects/h2-5.html" >
+ <div class="middle-story">
+ <div class="middle-stories-img" style="background-image: url('xxImg2-5xx');">
+ </div>
+ <div class="middle-stories-hed">xxTitle2-5xx</div>
+ </div>
+ </a>
+
+ <a target="_blank" href="redirects/h2-6.html" >
+ <div class="middle-story">
+ <div class="middle-stories-img" style="background-image: url('xxImg2-6xx');">
+ </div>
+ <div class="middle-stories-hed">xxTitle2-6xx</div>
+ </div>
+ </a>
+
+
+ </div>
+
+ <div id="bottom-stories">
+ <div class="bottom-story">
+ <a target="_blank" href="redirects/h3-1.html">xxTitle3-1xx</a>
+ </div>
+
+ <div class="bottom-story">
+ <a target="_blank" href="redirects/h3-2.html">xxTitle3-2xx</a>
+ </div>
+
+ <div class="bottom-story">
+ <a target="_blank" href="redirects/h3-3.html">xxTitle3-3xx</a>
+ </div>
+
+ <div class="bottom-story">
+ <a target="_blank" href="redirects/h3-4.html">xxTitle3-4xx</a>
+ </div>
+
+ <div class="bottom-story">
+ <a target="_blank" href="redirects/h3-5.html">xxTitle3-5xx</a>
+ </div>
+
+ <div class="bottom-story">
+ <a target="_blank" href="redirects/h3-6.html">xxTitle3-6xx</a>
+ </div>
+
+ <div class="bottom-story">
+ <a target="_blank" href="redirects/h3-7.html">xxTitle3-7xx</a>
+ </div>
+
+ <div class="bottom-story">
+ <a target="_blank" href="redirects/h3-8.html">xxTitle3-8xx</a>
+ </div>
+</div>
+
+</div>
+
+<div id="sources">
+ Sources: xxSourcesxx
+</div>
+</body>
+</html>
diff --git a/html_template/testtemplate.css b/html_template/testtemplate.css
new file mode 100644
index 0000000..2cab020
--- /dev/null
+++ b/html_template/testtemplate.css
@@ -0,0 +1,136 @@
+/*body{
+ width:900px;
+ margin-left:auto;
+ margin-right:auto;
+}*/
+
+
+a:link, a:visited, a:hover, a:active {
+ color: #00f;
+ text-decoration:none;
+ }
+
+#page-header{
+ width:100%;
+ text-align:center;
+ padding:.5em 0 1em;
+ margin-bottom:1em;
+ border-bottom:1px solid #000;
+}
+
+.title{
+ font-size:3em;
+}
+
+#title-1{
+ font-style:italic;
+ color:#d00;
+}
+
+#title-2{
+ color:#00d;
+}
+
+#subtitle{
+ font-size:1.25em;
+}
+
+#timestamp{
+ margin:.5em 0 0 0;
+ font-size:.8em;
+}
+
+#page-container{
+ width:900px;
+ margin-left:auto;
+ margin-right:auto;
+}
+
+#top-stories{
+ width:95%;
+ display:block;
+ overflow:auto;
+ padding:10px;
+ margin-left:auto;
+ margin-right:auto;
+ font-size:1.25em;
+ text-align:center;
+}
+
+.top-story{
+ display:inline-block;
+ text-align:left;
+ width:360px;
+ background:#fff;
+ margin:10px;
+ padding:10px;
+ border:2px solid #ccc;
+}
+
+.top-stories-img{
+ width:350px;
+ height:200px;
+ overflow:hidden;
+ background-size: cover;
+ background-position: center center;
+ margin:0 auto;
+}
+
+.top-stories-desc{
+ font-size:.8em;
+ padding-top:.5em;
+}
+
+#middle-stories{
+ clear:both;
+ width:500px;
+ margin:0 auto;
+ padding:0;
+ display:block;
+ overflow:auto;
+ float:left;
+}
+
+.middle-story{
+ margin:5px 10px;
+ padding:10px;
+ background:#fff;
+ border:2px solid #ddd;
+ width:460px;
+ float:left;
+}
+
+.middle-stories-img{
+ width:150px;
+ height:100px;
+ overflow:hidden;
+ background-size: cover;
+ background-position: center center;
+ float:left;
+}
+
+.middle-stories-hed{
+ font-size:1.1em;
+ float:left;
+ width:300px;
+}
+
+#bottom-stories{
+ margin:0 10px;
+ padding:10px;
+ display:block;
+ overflow:auto;
+ float:left;
+ width:350px;
+ border:5px solid #ddd;
+}
+
+.bottom-story{
+ padding:15px 0;
+}
+
+#sources{
+ clear:both;
+ padding-top:4em;
+ font-size:.8em;
+} \ No newline at end of file