Joururi/sample-systematic
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add files via upload

Browse Source
This commit is contained in:
AlexisNP
2019-05-16 19:00:29 +02:00
committed by GitHub
parent 9b74aed95f
commit 08cec75426
8 changed files with 693 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

193
index.php Normal file
View File

@@ -0,0 +1,193 @@
<!DOCTYPE html>
<html>
<head>
<title>Systematic</title>
<meta charset="utf-8" lang="en" >
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="Alexis Pelé">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<meta name="description" content="PLACEHOLDER">
<link href="https://fonts.googleapis.com/css?family=EB+Garamond:600,700,800|PT+Sans:400,400i,700,700i" rel="stylesheet">
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/all.js" integrity="sha384-xymdQtn1n3lH2wcu0qhcdaOpQwyoarkgLVxC/wZ5q7h9gHtxICrpcaSUfygqZGOe" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="js/apps.js"></script>
</head>
<body>
<header class="global">
<nav>
<ul>
<li><a href="#">Sign Up</a></li>
<li><a href="#">Login</a></li>
<li><a href="#">RSS Feeds</a></li>
<li><a href="#">Archived News</a></li>
</ul>
<form>
<input type="search" name="searchField">
<button type="button">
<i class="fas fa-search" data-fa-transform="grow-1 up-.5" data-fa-mask="fas fa-circle fa-2x"></i>
</button>
</form>
</nav>
</header>
<section class="main">
<header>
<div>
<h1>Systematic</h1>
<h2>Expanding News Worldwide</h2>
</div>
<div class="social-links fa-2x">
<a href="#"><i class="fab fa-linkedin-in" data-fa-transform="shrink-8 up-.5" data-fa-mask="fas fa-circle"></i></a>
<a href="#"><i class="fab fa-twitter" data-fa-transform="shrink-8 up-.5" data-fa-mask="fas fa-circle"></i></a>
<a href="#"><i class="fab fa-pinterest" data-fa-transform="shrink-8 up-.5" data-fa-mask="fas fa-circle"></i></a>
<a href="#"><i class="fab fa-google-plus-g" data-fa-transform="shrink-8 up-.5" data-fa-mask="fas fa-circle"></i></a>
<a href="#"><i class="fas fa-rss" data-fa-transform="shrink-8 up-.5" data-fa-mask="fas fa-circle"></i></a>
</div>
<nav id="navbar">
<div class="burger-container"><img id="toggle-menu" src="img/burger.png"></div>
<ul id="menu" class="burgerOff">
<li><a href="#">HOMEPAGE</a></li>
<li><a href="#">STYLE DEMO</a></li>
<li><a href="#">FULL WIDTH</a></li>
<li><a href="#">DROPDOWN</a></li>
<li><a href="#">GALLERY</a></li>
<li><a href="#">PORTFOLIO</a></li>
<li><a href="#">LINK TEXT</a></li>
<li><a href="#">LONG LINK TEXT</a></li>
</ul>
</nav>
</header>
<main class="article-view">
<aside>
<figure></figure>
</aside>
<article>
<h2>A HUGE TITLE HERE</h2>
<summary>
<p>Cursuspenatisaccum ut curabitur nulla tellus tor ames a in curabitur pede. Idet mollisi eros dis orci congue elis et curabitur consequam intesque. Curabiturpisametur in ante...</p>
<a href="#">Read More »</a>
</summary>
</article>
</main>
</section>
<section class="secondary">
<div class="col col-1">
<h2>A Little About Us</h2>
<figure><img src="img/about-us.jpg"></figure>
<p>Justoid nonummy laoreet phasellent penatoque in antesque pellus elis eget tincidunt. Nequatdui laorem justo a non tellus laoreet tincidunt ut vel velit nonummy laoreet phasellent penatoque in antesque pellus elis eget tincidunt.</p>
<p>Idenim semper pellente velis felit ac. Justoid nonummy laoreet phasellent penatoque in antesque pellus elis eget tincidunt.</p>
<a href="#">Read More About Us »</a>
</div>
<div class="col col-2">
<h2>Some of Our Services</h2>
<section class="service">
<figure></figure>
<h3>Service Name</h3>
<p>Inteligula congue id elis donec sce sag ittis intes id laoreet aenean.</p>
<div class="clear"></div>
</section>
<section class="service">
<figure></figure>
<h3>Service Name</h3>
<p>Inteligula congue id elis donec sce sag ittis intes id laoreet aenean.</p>
<div class="clear"></div>
</section>
<section class="service">
<figure></figure>
<h3>Service Name</h3>
<p>Inteligula congue id elis donec sce sag ittis intes id laoreet aenean.</p>
<div class="clear"></div>
</section>
<section class="service">
<figure></figure>
<h3>Service Name</h3>
<p>Inteligula congue id elis donec sce sag ittis intes id laoreet aenean.</p>
<div class="clear"></div>
</section>
<div class="clear"></div>
<a href="#">View All Of Our Services »</a>
</div>
<div class="col col-3">
<h2>What Our Clients Say</h2>
<blockquote>
<h3><b>Tommy Tanker</b> - CEO</h3>
<p>Justoid nonummy laoreet phasellent penatoque in antesque pellus elis eget tincidunt. Nequatdui laorem justo a non tellus laoreet tincidunt ut vel velit. Idenim semper pellente velis felit ac nullam pretium morbi lacus.</p>
<a href="#">View This Project »</a>
<div class="clear"></div>
</blockquote>
<blockquote>
<h3><b>Tommy Tanker</b> - CEO</h3>
<p>Justoid nonummy laoreet phasellent penatoque in antesque pellus elis eget tincidunt. Nequatdui laorem justo a non tellus laoreet tincidunt ut vel velit. Idenim semper pellente velis felit ac nullam pretium morbi lacus.</p>
<a href="#">View This Project »</a>
<div class="clear"></div>
</blockquote>
</div>
</section>
<section class="tertiary">
<div class="col col-1">
<h2>LATEST TWEETS</h2>
<section>
<p><a href="#">@namehere</a> Justoid nonummy laoreet phasellent penatoque in antesque pellus elis eget tincidunt. Nequatdui laorem justo a non tellus.</p>
<time>5 hours ago</time>
</section>
<section>
<p><a href="#">@namehere</a> Justoid nonummy laoreet phasellent penatoque in antesque pellus elis eget tincidunt. Nequatdui laorem justo a non tellus.</p>
<time>1 day ago</time>
</section>
</div>
<div class="col col-2">
<h2>QUICK LINKS</h2>
<ul>
<li><a href="#">Lorem ipsum dolor sit</a></li>
<li><a href="#">Amet consectetur</a></li>
<li><a href="#">Praesent vel sem id</a></li>
<li><a href="#">Curabitur hendrerit est</a></li>
<li><a href="#">Aliquam eget erat nec sapien</a></li>
<li><a href="#">Cras id augue nunc</a></li>
<li><a href="#">In nec justo non</a></li>
<li><a href="#">Vivamus mollis enim ut</a></li>
<li><a href="#">Curabity hendrerit est</a></li>
<li><a href="#">Sed a nulla urna</a></li>
</ul>
</div>
<div class="col col-3">
<h2>LATEST BLOG POSTS</h2>
<section>
<h3>Post Title</h3>
<div class="details">
<p><a href="#">Admin</a>, domainname.com</p>
<time>Friday, 6th April 2000</time>
</div>
<article>Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet.</article>
<a href="#">Read More »</a>
<div class="clear"></div>
</section>
<section>
<h3>Post Title</h3>
<div class="details">
<p><a href="#">Admin</a>, domainname.com</p>
<time>Friday, 6th April 2000</time>
</div>
<article>Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet.</article>
<a href="#">Read More »</a>
<div class="clear"></div>
</section>
</div>
<div class="col col-4">
<h2>CONTACT US</h2>
<form>
<input type="text" name="nameContactForm" placeholder="Name">
<input type="text" name="emailContactForm" placeholder="Email">
<input type="text" name="subjectContactForm" placeholder="Subject">
<textarea placeholder="Message"></textarea>
<input type="submit" name="submitContactForm" value="SUBMIT">
</form>
</div>
</section>
<footer>
<small>Copyright © 2013 Domain Name - All Rights Reserved</small>
<small>Template by OS Templates</small>
</footer>
</body>
</html>