Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Example-LandingPage-Bootstrap
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Landing page (w Bootstrap)</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
</head>
<body>
<div class="container py-4">
<header class="pb-3 mb-4 border-bottom">
<a href="/" class="d-flex align-items-center text-dark text-decoration-none">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="me-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
</svg>
<span class="fs-4">My app</span>
</a>
</header>
<div class="px-5 py-3 mb-4 bg-light rounded-3 border">
<div class="container-fluid py-5">
<h1 class="display-5 fw-bold">A simple Flask example</h1>
<p class="col-md-8 fs-4">This page is the root page of our simple Flask app, just to learn about HTML rendering and templates. It uses Bootstrap for the layout and styling! :)</p>
<a href="https://flask.palletsprojects.com/en/2.0.x/" target="_blank" class="btn btn-primary btn-lg" role="button">
Discover Flask
</button>
<a href="https://getbootstrap.com/" target="_blank" class="btn btn-outline-primary btn-lg ms-2" role="button">
About Bootstrap
</a>
</div>
</div>
<div class="row align-items-md-stretch">
<div class="col-md-4">
<div class="h-100 px-5">
<div class="d-grid justify-content-center align-items-center w-25 rounded-3 bg-black text-white mx-auto py-2 mb-3">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.828 14.828a4 4 0 01-5.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
<h2>Easy to learn</h2>
<p>Flask is nice for beginners thanks to its basic syntax, its comprehensive docs and its large ecosystem!</p>
</div>
</div>
<div class="col-md-4">
<div class="h-100 px-5">
<div class="d-grid justify-content-center align-items-center w-25 rounded-3 bg-black text-white mx-auto py-2 mb-3">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.933 12.8a1 1 0 000-1.6L6.6 7.2A1 1 0 005 8v8a1 1 0 001.6.8l5.333-4zM19.933 12.8a1 1 0 000-1.6l-5.333-4A1 1 0 0013 8v8a1 1 0 001.6.8l5.333-4z" />
</svg>
</div>
<h2>Quick prototyping</h2>
<p>Flask is great for making a little app fast! You can easily create a web server and render some HTML, like here...</p>
</div>
</div>
<div class="col-md-4">
<div class="h-100 px-5">
<div class="d-grid justify-content-center align-items-center w-25 rounded-3 bg-black text-white mx-auto py-2 mb-3">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4" />
</svg>
</div>
<h2>High modularity</h2>
<p>Flask can be customized with dozens of packages to extend its functionalities and get common web server features.</p>
</div>
</div>
</div>
<footer class="pt-3 mt-4 text-muted border-top">
© 2021
</footer>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment