Skip to content

Commit

Permalink
Merge pull request #44 from Riverfount/43-ImproveMainContentInArticle
Browse files Browse the repository at this point in the history 
Improved Main Content in article.html into a Bootstrap Project
  • Loading branch information
@Riverfount
Riverfount committed Mar 5, 2019
2 parents 583acda + bc6e7f5 commit 1d532b9
Showing 1 changed file with 210 additions and 73 deletions.
283 changes: 210 additions & 73 deletions bootstrap4/article.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,90 +17,227 @@
</head>
<body>

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<h1><a href="index.html" class="navbar-brand"><img src="img/40x40.png" alt="Brand Logo" class="mr-2"></a>Knowledge Base</h1>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" id="dropdownLanguage" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">English
</button>
<div class="dropdown-menu" aria-labelledby="dropdownLanguage">
<a href="#" class="dropdown-item">Language</a>
<a href="#" class="dropdown-item">Language</a>
<a href="#" class="dropdown-item">Language</a>
</div>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<h1><a href="index.html" class="navbar-brand"><img src="img/40x40.png" alt="Brand Logo" class="mr-2"></a>Knowledge
Base</h1>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" id="dropdownLanguage" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">English
</button>
<div class="dropdown-menu" aria-labelledby="dropdownLanguage">
<a href="#" class="dropdown-item">Language</a>
<a href="#" class="dropdown-item">Language</a>
<a href="#" class="dropdown-item">Language</a>
</div>
</div>
</nav>
<div class="container mt-3 mb-5">
<div class="row flex-lg-row-reverse mb-lg-5">
<div class="col-12 col-lg-6 mb-3 mb-lg-0">
<form>
<div class="input-group input-group-lg">
<input type="search" name="search" class="form-control" id="search"
placeholder="How can we help you?"
aria-label="Search for...">
<span class="input-group-append">
</div>
</nav>
<div class="container mt-3 mb-5">
<div class="row flex-lg-row-reverse mb-lg-5">
<div class="col-12 col-lg-6 mb-3 mb-lg-0">
<form>
<div class="input-group input-group-lg">
<input type="search" name="search" class="form-control" id="search"
placeholder="How can we help you?"
aria-label="Search for...">
<span class="input-group-append">
<button class="btn btn-primary" type="submit"><i class="fas fa-search"></i> Search</button>
</span>
</div>
</form>
</div>
<div class="col-12 col-lg-6">
<nav aria-label="breadcrumb" role="navigation">
<ul class="breadcrumb">
<li class="breadcrumb-item"><a href="index.html">Home</a></li>
<li class="breadcrumb-item"><a href="category.html">Category Heading</a></li>
<li class="breadcrumb-item" aria-current="page">Article Heading</li>
</ul>
</nav>
</div>
</div>
</form>
</div>
<div class="row">
<div class="col-12 col-lg-3">
<nav aria-label="page-navigation" role="navigation" class="sticky-top pt-3">
<h4 class="h6">In this article</h4>
<div class="list-group">
<a href="#section-1" class="list-group-item list-group-item-action">Article Subheading</a>
<a href="#section-2" class="list-group-item list-group-item-action">Article Subheading</a>
<a href="#section-3" class="list-group-item list-group-item-action">Article Subheading</a>
<a href="#section-4" class="list-group-item list-group-item-action">Article Subheading</a>
<a href="#section-5" class="list-group-item list-group-item-action">Article Subheading</a>
</div>
</nav>
</div>
<div class="col-12 col-lg-7 pt-3">
<div class="col-12 col-lg-6">
<nav aria-label="breadcrumb" role="navigation">
<ul class="breadcrumb">
<li class="breadcrumb-item"><a href="index.html">Home</a></li>
<li class="breadcrumb-item"><a href="category.html">Category Heading</a></li>
<li class="breadcrumb-item" aria-current="page">Article Heading</li>
</ul>
</nav>
</div>
</div>
<div class="row">
<div class="col-12 col-lg-3">
<nav aria-label="page-navigation" role="navigation" class="sticky-top pt-3">
<h4 class="h6">In this article</h4>
<div class="list-group">
<a href="#section-1" class="list-group-item list-group-item-action">Article Subheading</a>
<a href="#section-2" class="list-group-item list-group-item-action">Article Subheading</a>
<a href="#section-3" class="list-group-item list-group-item-action">Article Subheading</a>
<a href="#section-4" class="list-group-item list-group-item-action">Article Subheading</a>
<a href="#section-5" class="list-group-item list-group-item-action">Article Subheading</a>
</div>
</nav>
</div>
<div class="col-12 col-lg-7 pt-3">
<article>
<h2>Article Heading</h2>
<div class="small">Last update:
<time datetime="2017-05-20">May 20, 2017</time>
</div>
<p class="lead">
Lorem ipsum dolor sit amet consectetur adipiscing elit varius lacinia cubilia aliquet, malesuada
lobortis enim suscipit ac nostra a porta aenean aliquam, posuere phasellus metus fermentum est
inceptos platea augue hac egestas.
</p>
<p class="alert alert-warning small" role="alert">
Ultricies tincidunt lobortis sodales per metus consequat, porta augue fames facilisi placerat ad
dis, dictumst conubia odio feugiat posuere.
</p>
<h3>Article Sub Heading</h3>
<p>
Inceptos sociosqu porttitor morbi metus posuere dictum nec, sociis tristique pellentesque placerat
orci magnis integer, facilisi vel suscipit vitae diam urna. Bibendum justo pretium a consequat mus
curae, luctus natoque nisi facilisi purus class, ultrices tempus ante augue montes.
</p>
<img src="img/700x500.png" alt="A image example" class="img-fluid">
<h4 class="h5">Article Small sub heading</h4>
<p>
Egestas montes lectus aenean primis faucibus, massa justo fusce elementum natoque vivamus, etiam
pharetra suspendisse cubilia. Curae lobortis fermentum non habitasse cum suscipit justo conubia,
sociosqu nullam nibh platea et vestibulum mauris, porttitor sed ligula placerat nunc bibendum
senectus.
</p>
<a href="#0">Link to other article</a>
<h3>Article Sub Heading</h3>
<p>
Hendrerit nunc curae nisl neque ante ad quisque vestibulum sem enim, ridiculus orci pulvinar
venenatis dis massa sociosqu augue. Sollicitudin phasellus et netus ornare nisi est ultrices
elementum conubia, dictum eleifend ac bibendum porta natoque ultricies mauris nisl integer, justo
scelerisque sagittis curabitur parturient potenti venenatis viverra.
</p>
<ul>
<li>Porttitor molestie leo litora eget magna lobortis cum</li>
<li>Praesent metus facilisis augue commodo tortor gravida feugiat</li>
<li>Curabitur nam et a vivamus egestas ut conubia</li>
</ul>
<h3>Article Sub Heading</h3>
<p>
Fermentum cubilia lectus ullamcorper id pulvinar integer nulla eu odio, sollicitudin pretium
pellentesque litora ultrices eget molestie condimentum facilisi, duis cum montes at porttitor dui
senectus blandit. Facilisis semper imperdiet leo congue praesent ornare vivamus nibh cursus mi,
egestas varius ante cras litora nisi facilisi auctor cum himenaeos, turpis dignissim laoreet sed eu
ad rutrum ut lobortis. Commodo tristique nam integer condimentum parturient facilisis, molestie non
sociosqu vulputate egestas ac iaculis, nisl proin orci sodales velit.
</p>
<ol>
<li>
Porttitor molestie leo litora eget magna lobortis cum
<img src="img/700x500.png" class="img-fluid">
</li>
<li>
Praesent metus facilisis augue commodo tortor gravida feugiat
<img src="img/700x500.png" class="img-fluid">
</li>
<li>
Curabitur nam et a vivamus egestas ut conubia
<img src="img/700x500.png" class="img-fluid">
</li>
</ol>
<h3>Article Sub Heading</h3>
<p>
Vivamus dapibus non nibh metus aenean himenaeos nisi velit magnis, fringilla mi tortor gravida
placerat iaculis pharetra habitant semper porttitor, sociis vulputate sociosqu ligula consequat
risus diam duis. Class aenean magnis sociosqu congue imperdiet faucibus pretium platea, egestas
nullam vel rutrum eros diam facilisi, non suspendisse interdum tincidunt vulputate dictum placerat.
</p>
<pre class="pre-scrollable">
<code>
import os
from decouple import config
from flask import Flask, render_template
from core.model import cotacoes

</div>
<div class="col-12 col-lg-2">
<aside class="sticky-top">
<h4 class="h6 pt-3">Technical Suport</h4>
<a href="#" class="btn btn-secondary">Contact Suport</a>
</aside>

def create_app():

app = Flask('core')
app.config["SECRET_KEY"] = config('SECRET_KEY')

@app.route('/')
def home():
dicionario = cotacoes.cotar()

if dicionario['sucesso']:
template_renderised = render_template("index.html", dicionario=dicionario)
else:
template_renderised = render_template('error.html', dicionario=dicionario)

return template_renderised

return app


if __name__ == '__main__':
app = create_app()
port = int(os.environ.get("PORT", 5000))
app.run(host='0.0.0.0', port=port)
</code>
</pre>
<h3>Article Sub Heading</h3>
<table class="table table-striped">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First Column</th>
<th scope="col">Second Column</th>
<th scope="col">Third Column</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">First Row</th>
<td>Mark</td>
<td>Otto</td>
<td>@ndo</td>
</tr>
<tr>
<th scope="row">Second Row</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">Third Row</th>
<td>Larry</td>
<td>th Bird</td>
<td>@twitter</td>
</tr>
</tbody>

</table>
</article>
</div>
<div class="col-12 col-lg-2">
<aside class="sticky-top">
<h4 class="h6 pt-3">Technical Suport</h4>
<a href="#" class="btn btn-secondary">Contact Suport</a>
</aside>
</div>
</div>

</div>
<footer class="small bg-light">
<div class="container py-3 py-sm-5 text-center">
<img src="img/120x40.png" alt="Brand Logo" class="mb-2 mb-sm-4">
<p class="mb-2 mb-sm-4"><i class="far fa-copyright"></i> 2019 Brand Logo. All Rigths Reserved.</p>
<ul class="list-inline mb-0">
<li class="list-inline-item"><a href="#">Brand Name</a></li>
<li class="list-inline-item"><a href="#">Tutorials</a></li>
<li class="list-inline-item"><a href="#">Blog</a></li>
<li class="list-inline-item"><a href="#">Contact</a></li>
</ul>
</div>
<footer class="small bg-light">
<div class="container py-3 py-sm-5 text-center">
<img src="img/120x40.png" alt="Brand Logo" class="mb-2 mb-sm-4">
<p class="mb-2 mb-sm-4"><i class="far fa-copyright"></i> 2019 Brand Logo. All Rigths Reserved.</p>
<ul class="list-inline mb-0">
<li class="list-inline-item"><a href="#">Brand Name</a></li>
<li class="list-inline-item"><a href="#">Tutorials</a></li>
<li class="list-inline-item"><a href="#">Blog</a></li>
<li class="list-inline-item"><a href="#">Contact</a></li>
</ul>
</div>
</footer>
</footer>


<!-- Bootstrap 4.1 JS Dependencies -->
<script defer src="https://use.fontawesome.com/releases/v5.7.2/js/all.js"
integrity="sha384-0pzryjIRos8mFBWMzSSZApWtPl/5++eIfzYmTgBBmXYdhvxPc+XcFEk+zJwDgWbP"
crossorigin="anonymous"></script>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.bundle.min.js"></script>
<script src="js/smooth-scroll.min.js"></script>
<!-- Bootstrap 4.1 JS Dependencies -->
<script defer src="https://use.fontawesome.com/releases/v5.7.2/js/all.js"
integrity="sha384-0pzryjIRos8mFBWMzSSZApWtPl/5++eIfzYmTgBBmXYdhvxPc+XcFEk+zJwDgWbP"
crossorigin="anonymous"></script>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.bundle.min.js"></script>
<script src="js/smooth-scroll.min.js"></script>
</body>
</html>

0 comments on commit 1d532b9

Please sign in to comment.