Skip to content

H
HCI-JJ-News
Commit 4de11c97 authored by Jonathan Poalses's avatar Jonathan Poalses
Browse files
Options

Added cluttered page

parent d895ff2f
Hide whitespace changes
Inline Side-by-side
Showing with 170 additions and 9 deletions
Clean Design Site/cluttered.html
View file @ 4de11c97
......@@ -4,7 +4,7 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>Cluttered - Trustworthy Times</title>
<title>Clean - Trustworthy Times</title>
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800&amp;display=swap">
</head>
......@@ -13,17 +13,178 @@
<nav class="navbar navbar-light navbar-expand-md navbar-shrink py-3" id="mainNav">
<div class="container-fluid"><a class="navbar-brand d-flex align-items-center" href="/"><span>Trustworthy Times</span></a></div>
</nav>
<section class="py-5 mt-5">
<div class="container">
<div class="row row-cols-1 d-flex justify-content-center align-items-center">
<div class="col-md-10 text-center"><img class="img-fluid w-100" src="assets/img/illustrations/404.svg"></div>
<div class="col text-center">
<h2 class="display-3 fw-bold mb-4">Page Not Found</h2>
<p class="fs-4 text-muted">Fusce adipiscing sit, torquent porta pulvinar.</p>
<header class="pt-5">
<div class="container pt-4 pt-xl-5">
<div class="row pt-5">
<div class="col-md-8 text-center text-md-start mx-auto">
<div class="text-center">
<h1 class="display-4 fw-bold mb-5">News from sources you can&nbsp;<span class="underline">trust</span>?</h1>
</div>
</div>
</div>
</div>
</section>
</header>
<form>
<section style="background: linear-gradient(var(--bs-yellow), var(--bs-purple) 9%, var(--bs-blue) 13%, var(--bs-pink) 28%, var(--bs-blue) 63%, var(--bs-green) 93%, var(--bs-red));">
<div class="container py-4 py-xl-5" style="padding: 0;">
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3">
<div class="col" style="padding: 0px;background: var(--bs-indigo);">
<div class="card border-light border-1 d-flex justify-content-center p-4" style="background: var(--bs-pink);"><img class="card-img-top w-100 d-block border rounded-pill" src="assets/img/HCI-Toad.webp">
<div class="card-body" style="padding: 0;">
<div>
<h5 class="fw-bold">National Park Service Asks Visitors to Please Stop Licking Toads</h5>
</div>
<div class="form-check"><input class="form-check-input" type="radio" id="formCheck-1" value="real" name="story3" required=""><label class="form-check-label" for="formCheck-1">Real</label></div>
<div class="form-check"><input class="form-check-input" type="radio" id="formCheck-2" value="fake" name="story3" required=""><label class="form-check-label" for="formCheck-2">Fake</label></div>
</div>
</div>
</div>
<div class="col" style="padding: 0;background: var(--bs-blue);">
<div class="card border-light border-1 d-flex justify-content-center p-4" style="background: var(--bs-secondary);"><img class="card-img-top w-100 d-block border rounded-pill" src="assets/img/HCI%20Disney.webp">
<div class="card-body" style="padding: 0;">
<div>
<h5 class="fw-bold">Disney Wins Emmy For Best Profits</h5>
</div>
<div class="form-check"><input class="form-check-input" type="radio" id="formCheck-23" name="story10" value="real" required=""><label class="form-check-label" for="formCheck-23">Real</label></div>
<div class="form-check"><input class="form-check-input" type="radio" id="formCheck-24" name="story10" value="fake" required=""><label class="form-check-label" for="formCheck-24">Fake</label></div>
</div>
</div>
</div>
<div class="col" style="padding: 0;background: var(--bs-pink);">
<div class="card border-light border-1 d-flex justify-content-center p-4" style="background: var(--bs-danger);"><img class="card-img-top w-100 d-block" src="assets/img/fakead2.jpg" width="291" height="402"></div>
</div>
<div class="col" style="padding: 0;background: var(--bs-purple);">
<div class="card border-light border-1 d-flex justify-content-center p-4" style="background: var(--bs-blue);"><img class="card-img-top w-100 d-block" src="assets/img/HCI%20Beer.webp">
<div class="card-body" style="padding: 0;">
<div>
<h5 class="fw-bold">Beer Lubricated the Rise of Civilization, Study Suggests</h5>
</div>
<div class="form-check"><input class="form-check-input" type="radio" id="formCheck-3" name="story1" value="real" required=""><label class="form-check-label" for="formCheck-3">Real</label></div>
<div class="form-check"><input class="form-check-input" type="radio" id="formCheck-4" name="story1" value="fake" required=""><label class="form-check-label" for="formCheck-4">Fake</label></div>
</div>
</div>
</div>
<div class="col" style="padding: 0;background: var(--bs-red);">
<div class="card border-light border-1 d-flex justify-content-center p-4" style="background: var(--bs-warning);"><img class="card-img-top w-100 d-block" src="assets/img/fakead1.jpeg" width="291" height="357"></div>
</div>
<div class="col" style="padding: 0;background: var(--bs-green);">
<div class="card border-light border-1 d-flex justify-content-center p-4" style="background: var(--bs-info);"><img class="card-img-top w-100 d-block border rounded-pill" src="assets/img/HCI%20Elon.webp">
<div class="card-body" style="padding: 0;">
<div>
<h5 class="fw-bold">Most Brilliant Ways Elon Musk Plans To Make Twitter Profitable</h5>
</div>
<div class="form-check"><input class="form-check-input" type="radio" id="formCheck-35" name="story7" value="real" required=""><label class="form-check-label" for="formCheck-35">Real</label></div>
<div class="form-check"><input class="form-check-input" type="radio" id="formCheck-36" name="story7" value="fake" required=""><label class="form-check-label" for="formCheck-36">Fake</label></div>
</div>
</div>
</div>
<div class="col" style="padding: 0;background: var(--bs-warning);">
<div class="card border-light border-1 d-flex justify-content-center p-4" style="background: var(--bs-blue);"><img class="card-img-top w-100 d-block" src="assets/img/fakead3.jpg" width="291" height="376"></div>
</div>
<div class="col" style="padding: 0;background: var(--bs-indigo);">
<div class="card border-light border-1 d-flex justify-content-center p-4" style="background: var(--bs-danger);"><img class="card-img-top w-100 d-block border rounded-pill" src="assets/img/HCI%20Spinach.webp">
<div class="card-body" style="padding: 0;">
<div>
<h5 class="fw-bold">Scientists have taught spinach to send emails and it could warn us about climate change<br></h5>
</div>
<div class="form-check"><input class="form-check-input" type="radio" id="formCheck-27" name="story4" value="real" required=""><label class="form-check-label" for="formCheck-27">Real</label></div>
<div class="form-check"><input class="form-check-input" type="radio" id="formCheck-28" name="story4" value="fake" required=""><label class="form-check-label" for="formCheck-28">Fake</label></div>
</div>
</div>
</div>
<div class="col" style="padding: 0;background: var(--bs-pink);">
<div class="card border-light border-1 d-flex justify-content-center p-4" style="background: var(--bs-blue);"><img class="card-img-top w-100 d-block border rounded-pill" src="assets/img/HCI%20Obama.webp">
<div class="card-body" style="padding: 0;">
<div>
<h5 class="fw-bold">Obama Claims He’s Still President After Seeing How Susceptible Voters Are To Conspiracy Theories</h5>
</div>
<div class="form-check"><input class="form-check-input" type="radio" id="formCheck-19" name="story11" value="real" required=""><label class="form-check-label" for="formCheck-19">Real</label></div>
<div class="form-check"><input class="form-check-input" type="radio" id="formCheck-20" name="story11" value="fake" required=""><label class="form-check-label" for="formCheck-20">Fake</label></div>
</div>
</div>
</div>
<div class="col" style="padding: 0;background: var(--bs-highlight-bg);">
<div class="card border-light border-1 d-flex justify-content-center p-4" style="background: var(--bs-info);"><img class="card-img-top w-100 d-block border rounded-pill" src="assets/img/HCI-Autocomplete.webp">
<div class="card-body" style="padding: 0;">
<div>
<h5 class="fw-bold">Nonsense paper written by iOS autocomplete accepted for conference</h5>
</div>
<div class="form-check"><input class="form-check-input" type="radio" id="formCheck-5" name="story2" value="real" required=""><label class="form-check-label" for="formCheck-5">Real</label></div>
<div class="form-check"><input class="form-check-input" type="radio" id="formCheck-6" name="story2" value="fake" required=""><label class="form-check-label" for="formCheck-6">Fake</label></div>
</div>
</div>
</div>
<div class="col" style="padding: 0;background: var(--bs-indigo);">
<div class="card border-light border-1 d-flex justify-content-center p-4" style="background: var(--bs-yellow);"><img class="card-img-top w-100 d-block" src="assets/img/fakead4.gif" width="291" height="354"></div>
</div>
<div class="col" style="padding: 0;background: var(--bs-orange);">
<div class="card border-light border-1 d-flex justify-content-center p-4" style="background: var(--bs-success);"><img class="card-img-top w-100 d-block border rounded-pill" src="assets/img/HCI%20Oxfordshire.webp">
<div class="card-body" style="padding: 0;">
<div>
<h5 class="fw-bold">Oxfordshire County Council's vegan lunches to continue after motion fails</h5>
</div>
<div class="form-check"><input class="form-check-input" type="radio" id="formCheck-17" name="story5" value="real" required=""><label class="form-check-label" for="formCheck-17">Real</label></div>
<div class="form-check"><input class="form-check-input" type="radio" id="formCheck-18" name="story5" value="fake" required=""><label class="form-check-label" for="formCheck-18">Fake</label></div>
</div>
</div>
</div>
<div class="col" style="padding: 0;background: var(--bs-purple);">
<div class="card border-light border-1 d-flex justify-content-center p-4" style="background: var(--bs-orange);"><img class="card-img-top w-100 d-block" src="assets/img/fakead5.png" width="291" height="364"></div>
</div>
<div class="col" style="padding: 0;background: var(--bs-pink);">
<div class="card border-light border-1 d-flex justify-content-center p-4" style="background: var(--bs-success);"><img class="card-img-top w-100 d-block border rounded-pill" src="assets/img/HCI%20Usain%20Bolt.webp">
<div class="card-body" style="padding: 0;">
<div>
<h5 class="fw-bold">Usain Bolt Recalls Discovering Talent For Running Through Corporate Wellness Challenge</h5>
</div>
<div class="form-check"><input class="form-check-input" type="radio" id="formCheck-31" name="story8" value="real" required=""><label class="form-check-label" for="formCheck-31">Real</label></div>
<div class="form-check"><input class="form-check-input" type="radio" id="formCheck-32" name="story8" value="fake" required=""><label class="form-check-label" for="formCheck-32">Fake</label></div>
</div>
</div>
</div>
<div class="col" style="padding: 0;background: var(--bs-highlight-bg);">
<div class="card border-light border-1 d-flex justify-content-center p-4" style="background: var(--bs-info);"><img class="card-img-top w-100 d-block border rounded-pill" src="assets/img/HCI%20Tesla.webp">
<div class="card-body" style="padding: 0;">
<div>
<h5 class="fw-bold">Tesla recalls 40,000 cars over power-steering fault</h5>
</div>
<div class="form-check"><input class="form-check-input" type="radio" id="formCheck-13" name="story6" value="real" required=""><label class="form-check-label" for="formCheck-13">Real</label></div>
<div class="form-check"><input class="form-check-input" type="radio" id="formCheck-14" name="story6" value="fake" required=""><label class="form-check-label" for="formCheck-14">Fake</label></div>
</div>
</div>
</div>
<div class="col" style="padding: 0;background: var(--bs-blue);">
<div class="card border-light border-1 d-flex justify-content-center p-4" style="background: var(--bs-purple);"><img class="card-img-top w-100 d-block" src="assets/img/fakead6.jpg" width="291" height="428"></div>
</div>
<div class="col" style="padding: 0;background: var(--bs-red);">
<div class="card border-light border-1 d-flex justify-content-center p-4" style="background: var(--bs-secondary);"><img class="card-img-top w-100 d-block border rounded-pill" src="assets/img/HCI%20Work%20Emails.jpg">
<div class="card-body" style="padding: 0;">
<div>
<h5 class="fw-bold">No after work e-mails please. French ordered to ignore the boss after 6pm</h5>
</div>
<div class="form-check"><input class="form-check-input" type="radio" id="formCheck-9" name="story9" value="real" required=""><label class="form-check-label" for="formCheck-9">Real</label></div>
<div class="form-check"><input class="form-check-input" type="radio" id="formCheck-10" name="story9" value="fake" required=""><label class="form-check-label" for="formCheck-10">Fake</label></div>
</div>
</div>
</div>
<div class="col" style="padding: 0;background: var(--bs-teal);">
<div class="card border-light border-1 d-flex justify-content-center p-4" style="background: var(--bs-code-color);"><img class="card-img-top w-100 d-block border rounded-pill" src="assets/img/HCI%20World%20Hunger.webp">
<div class="card-body" style="padding: 0;">
<div>
<h5 class="fw-bold">World Hunger Activists Throw Oil On Pelican To Protest Climate Activists Wasting Soup</h5>
</div>
<div class="form-check"><input class="form-check-input" type="radio" id="formCheck-7" name="story12" value="real" required=""><label class="form-check-label" for="formCheck-7">Real</label></div>
<div class="form-check"><input class="form-check-input" type="radio" id="formCheck-8" name="story12" value="fake" required=""><label class="form-check-label" for="formCheck-8">Fake</label></div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="text-bg-dark py-4 py-xl-5">
<div class="container text-center"><button class="btn btn-light btn-lg border rounded-pill" type="submit">Submit</button></div>
</section>
</form>
<footer>
<div class="container py-4 py-lg-5">
<div class="row row-cols-1 row-cols-md-4 justify-content-center">
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment