boyd_bot/templates/index.html
{% extends 'base.html' %}
{% block body_block %}
<!-- Navigation-->
<nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">
<div class="container">
<a class="navbar-brand js-scroll-trigger" href="#page-top">Boyd Bot</a><button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"><i class="fas fa-bars"></i></button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item"><a class="nav-link js-scroll-trigger" href="#about">About</a></li>
<li class="nav-item"><a class="nav-link js-scroll-trigger" href="#projects">Universities</a></li>
<li class="nav-item"><a class="nav-link" href="https://github.com/ineshbose/boyd_bot_messenger/" target="_blank">GitHub</a></li>
<li class="nav-item"><a class="nav-link" href="https://boyd-bot-messenger.readthedocs.io/en/latest" target="_blank">Documentation</a></li>
</ul>
</div>
</div>
</nav>
<!-- Masthead-->
<header class="masthead">
<div class="container d-flex h-100 align-items-center">
<div class="mx-auto text-center">
<h1 class="mx-auto my-0 text-uppercase">Boyd Bot</h1>
<h2 class="text-white-50 mx-auto mt-2 mb-5">A powerful, fast, open-source chatbot helping university students make tasks easier.</h2>
</div>
</div>
</header>
<!-- About-->
<section class="about-section text-center" id="about">
<div class="container">
<div class="row">
<div class="col-lg-8 mx-auto">
<h2 class="text-white mb-4">Built using Flask</h2>
<p class="text-white-50">A lightweight WSGI web application framework written in <strong><i class="fab fa-python"></i> Python</strong> enabling developers to easily understand and customize the code.</p>
</div>
</div>
<img class="img-fluid" src="/static/img/phones.png" alt="" />
</div>
<div class="container">
<div class="row">
<div class="col-lg-8 mx-auto">
<h2 class="text-white mb-4">Extremely Modular</h2>
<p class="text-white-50">Enables bot to be tailored and changed to <strong><!--<i class="fab fa-python"></i> -->your needs</strong>.</p>
</div>
</div>
<img class="img-fluid" src="/static/img/iphone.png" alt="" />
</div>
<div class="container">
<div class="row">
<div class="col-lg-8 mx-auto">
<h2 class="text-white mb-4">Open Source</h2>
<p class="text-white-50">Under the MIT License, the bot is <strong><!--<i class="fab fa-python"></i> -->free for use and open for contributions</strong>.</p>
</div>
</div>
<img class="img-fluid" src="/static/img/ipad.png" alt="" />
</div>
</section>
<!-- Universities -->
<section class="projects-section bg-light" id="projects">
<div class="container">
<h3 class="text-black mb-4 text-center">These universities use chatbots powered by the Boyd Bot.</h3>
<!-- Row One -->
<div class="row justify-content-center no-gutters mb-5 mb-lg-0">
<div class="col-lg-6"><img class="img-fluid" src="https://i.guim.co.uk/img/media/493e81f49b777a8febab2e8ae48b9931a54f5f6b/0_74_4640_2784/master/4640.jpg?width=1200&height=1200&quality=85&auto=format&fit=crop&s=2ea60db0c81e466ecd845365596478c6" alt="" /></div>
<div class="col-lg-6">
<div class="bg-black text-center h-100 project">
<div class="d-flex h-100">
<div class="project-text w-100 my-auto text-center text-lg-left">
<h4 class="text-white">University of Glasgow</h4>
<p class="mb-0 text-white-50">
The <i>Glasgow University Timetable Bot</i> is the first chatbot to be powered by Boyd Bot. This bot is used on Facebook Messenger<!-- and Discord (soon) using Dialogflow and Wit.ai respectively-->.
</p>
<a class="mx-2" href="https://www.facebook.com/uofgbot/" target="_blank"><i class="fab fa-facebook-f"></i></a>
<a class="mx-2" href="https://m.me/uofgbot" target="_blank"><i class="fab fa-facebook-messenger"></i></a>
<!--<a class="mx-2" href="#" target="_blank"><i class="fab fa-discord"></i></a>-->
<a class="mx-2" href="https://www.behance.net/gallery/93421281/Glasgow-University-Timetable-Bot" target="_blank"><i class="fab fa-behance"></i></a>
<a class="mx-2" href="https://bot.dialogflow.com/boydbot" target="_blank"><i class="fac fa-dialogflow"></i></a>
<hr class="d-none d-lg-block mb-0 ml-0" />
</div>
</div>
</div>
</div>
</div>
<!-- Row Two -->
<!--
<div class="row justify-content-center no-gutters">
<div class="col-lg-6"><img class="img-fluid" src="/static/img/demo-image-02.jpg" alt="" /></div>
<div class="col-lg-6 order-lg-first">
<div class="bg-black text-center h-100 project">
<div class="d-flex h-100">
<div class="project-text w-100 my-auto text-center text-lg-right">
<h4 class="text-white">mongoDB</h4>
<p class="mb-0 text-white-50">Another example of a project with its respective description. These sections work well responsively as well, try this theme on a small screen!</p>
<hr class="d-none d-lg-block mb-0 mr-0" />
</div>
</div>
</div>
</div>
</div>
-->
</div>
</section>
{% endblock %}