Created
February 22, 2022 11:19
-
-
Save Dheerajmaddi/d46b9ad46c7fc65c8daa8ef347bd4a03 to your computer and use it in GitHub Desktop.
Blog Project
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="utf-8" /> | |
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> | |
<meta name="description" content="" /> | |
<meta name="author" content="" /> | |
<title>Clean Blog - Start Bootstrap Theme</title> | |
<link rel="icon" type="image/x-icon" href="{{ url_for('static',filename='assets/favicon.ico') }}" /> | |
<!-- Font Awesome icons (free version)--> | |
<script src="https://use.fontawesome.com/releases/v5.15.4/js/all.js" crossorigin="anonymous"></script> | |
<!-- Google fonts--> | |
<link href="https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic" rel="stylesheet" type="text/css" /> | |
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800" rel="stylesheet" type="text/css" /> | |
<!-- Core theme CSS (includes Bootstrap)--> | |
<link href="{{ url_for('static', filename='css/styles.css') }}" rel="stylesheet" /> | |
</head> | |
<body> | |
{% include "header.html" %} | |
<!-- Main Content--> | |
<main class="mb-4"> | |
<div class="container px-4 px-lg-5"> | |
<div class="row gx-4 gx-lg-5 justify-content-center"> | |
<div class="col-md-10 col-lg-8 col-xl-7"> | |
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe nostrum ullam eveniet pariatur voluptates odit, fuga atque ea nobis sit soluta odio, adipisci quas excepturi maxime quae totam ducimus consectetur?</p> | |
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius praesentium recusandae illo eaque architecto error, repellendus iusto reprehenderit, doloribus, minus sunt. Numquam at quae voluptatum in officia voluptas voluptatibus, minus!</p> | |
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut consequuntur magnam, excepturi aliquid ex itaque esse est vero natus quae optio aperiam soluta voluptatibus corporis atque iste neque sit tempora!</p> | |
</div> | |
</div> | |
</div> | |
</main> | |
{% include "footer.html" %} | |
<!-- Bootstrap core JS--> | |
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script> | |
<!-- Core theme JS--> | |
<script src="{{ url_for('static',filename='js/scripts.js') }}"></script> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="utf-8" /> | |
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> | |
<meta name="description" content="" /> | |
<meta name="author" content="" /> | |
<title>Clean Blog - Start Bootstrap Theme</title> | |
<link rel="icon" type="image/x-icon" href="{{ url_for('static',filename='assets/favicon.ico') }}" /> | |
<!-- Font Awesome icons (free version)--> | |
<script src="https://use.fontawesome.com/releases/v5.15.4/js/all.js" crossorigin="anonymous"></script> | |
<!-- Google fonts--> | |
<link href="https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic" rel="stylesheet" type="text/css" /> | |
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800" rel="stylesheet" type="text/css" /> | |
<!-- Core theme CSS (includes Bootstrap)--> | |
<link href="{{ url_for('static', filename='css/styles.css') }}" rel="stylesheet" /> | |
</head> | |
<body> | |
{% include "header.html" %} | |
<!-- Main Content--> | |
<main class="mb-4"> | |
<div class="container px-4 px-lg-5"> | |
<div class="row gx-4 gx-lg-5 justify-content-center"> | |
<div class="col-md-10 col-lg-8 col-xl-7"> | |
<p>Want to get in touch? Fill out the form below to send me a message and I will get back to you as soon as possible!</p> | |
<div class="my-5"> | |
<!-- * * * * * * * * * * * * * * *--> | |
<!-- * * SB Forms Contact Form * *--> | |
<!-- * * * * * * * * * * * * * * *--> | |
<!-- This form is pre-integrated with SB Forms.--> | |
<!-- To make this form functional, sign up at--> | |
<!-- https://startbootstrap.com/solution/contact-forms--> | |
<!-- to get an API token!--> | |
<form id="contactForm" data-sb-form-api-token="API_TOKEN"> | |
<div class="form-floating"> | |
<input class="form-control" id="name" type="text" placeholder="Enter your name..." data-sb-validations="required" /> | |
<label for="name">Name</label> | |
<div class="invalid-feedback" data-sb-feedback="name:required">A name is required.</div> | |
</div> | |
<div class="form-floating"> | |
<input class="form-control" id="email" type="email" placeholder="Enter your email..." data-sb-validations="required,email" /> | |
<label for="email">Email address</label> | |
<div class="invalid-feedback" data-sb-feedback="email:required">An email is required.</div> | |
<div class="invalid-feedback" data-sb-feedback="email:email">Email is not valid.</div> | |
</div> | |
<div class="form-floating"> | |
<input class="form-control" id="phone" type="tel" placeholder="Enter your phone number..." data-sb-validations="required" /> | |
<label for="phone">Phone Number</label> | |
<div class="invalid-feedback" data-sb-feedback="phone:required">A phone number is required.</div> | |
</div> | |
<div class="form-floating"> | |
<textarea class="form-control" id="message" placeholder="Enter your message here..." style="height: 12rem" data-sb-validations="required"></textarea> | |
<label for="message">Message</label> | |
<div class="invalid-feedback" data-sb-feedback="message:required">A message is required.</div> | |
</div> | |
<br /> | |
<!-- Submit success message--> | |
<!----> | |
<!-- This is what your users will see when the form--> | |
<!-- has successfully submitted--> | |
<div class="d-none" id="submitSuccessMessage"> | |
<div class="text-center mb-3"> | |
<div class="fw-bolder">Form submission successful!</div> | |
To activate this form, sign up at | |
<br /> | |
<a href="https://startbootstrap.com/solution/contact-forms">https://startbootstrap.com/solution/contact-forms</a> | |
</div> | |
</div> | |
<!-- Submit error message--> | |
<!----> | |
<!-- This is what your users will see when there is--> | |
<!-- an error submitting the form--> | |
<div class="d-none" id="submitErrorMessage"><div class="text-center text-danger mb-3">Error sending message!</div></div> | |
<!-- Submit Button--> | |
<button class="btn btn-primary text-uppercase disabled" id="submitButton" type="submit">Send</button> | |
</form> | |
</div> | |
</div> | |
</div> | |
</div> | |
</main> | |
{% include "footer.html" %} | |
<!-- Bootstrap core JS--> | |
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script> | |
<!-- Core theme JS--> | |
<script src="{{ url_for('static',filename='js/scripts.js') }}"></script> | |
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *--> | |
<!-- * * SB Forms JS * *--> | |
<!-- * * Activate your form at https://startbootstrap.com/solution/contact-forms * *--> | |
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *--> | |
<script src="https://cdn.startbootstrap.com/sb-forms-latest.js"></script> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<title>Title</title> | |
</head> | |
<body> | |
<!-- Navigation--> | |
<nav class="navbar navbar-expand-lg navbar-light" id="mainNav"> | |
<div class="container px-4 px-lg-5"> | |
<a class="navbar-brand" href="index">Start Bootstrap</a> | |
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"> | |
Menu | |
<i class="fas fa-bars"></i> | |
</button> | |
<div class="collapse navbar-collapse" id="navbarResponsive"> | |
<ul class="navbar-nav ms-auto py-4 py-lg-0"> | |
<li class="nav-item"><a class="nav-link px-lg-3 py-3 py-lg-4" href="index">Home</a></li> | |
<li class="nav-item"><a class="nav-link px-lg-3 py-3 py-lg-4" href="about">About</a></li> | |
<!-- <li class="nav-item"><a class="nav-link px-lg-3 py-3 py-lg-4" href="post.html">Sample Post</a></li>--> | |
<li class="nav-item"><a class="nav-link px-lg-3 py-3 py-lg-4" href="contact">Contact</a></li> | |
</ul> | |
</div> | |
</div> | |
</nav> | |
<!-- Page Header--> | |
<header class="masthead" style="background-image:url('{{ bg_img }}')"> | |
<div class="container position-relative px-4 px-lg-5"> | |
<div class="row gx-4 gx-lg-5 justify-content-center"> | |
<div class="col-md-10 col-lg-8 col-xl-7"> | |
<div class="site-heading"> | |
<h1>{{ title }}</h1> | |
<span class="subheading">{{ subtitle }}</span> | |
</div> | |
</div> | |
</div> | |
</div> | |
</header> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="utf-8" /> | |
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> | |
<meta name="description" content="" /> | |
<meta name="author" content="" /> | |
<title>Clean Blog - Start Bootstrap Theme</title> | |
<link rel="icon" type="image/x-icon" href="{{ url_for('static', filename='assets/favicon.ico') }}" /> | |
<!-- Font Awesome icons (free version)--> | |
<script src="https://use.fontawesome.com/releases/v5.15.4/js/all.js" crossorigin="anonymous"></script> | |
<!-- Google fonts--> | |
<link href="https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic" rel="stylesheet" type="text/css" /> | |
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800" rel="stylesheet" type="text/css" /> | |
<!-- Core theme CSS (includes Bootstrap)--> | |
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> | |
<link href="{{ url_for('static', filename='css/styles.css') }}" rel="stylesheet" /> | |
</head> | |
<body> | |
{% include "header.html" %} | |
<!-- Main Content--> | |
<div class="container px-4 px-lg-5"> | |
<div class="row gx-4 gx-lg-5 justify-content-center"> | |
<div class="col-md-10 col-lg-8 col-xl-7"> | |
<!-- Post preview--> | |
{% for blog in data %} | |
<div class="post-preview"> | |
<a href="{{ loop.index - 1 }}"> | |
<h2 class="post-title">{{ blog['title'] }}</h2> | |
<h3 class="post-subtitle">{{ blog['subtitle'] }}</h3> | |
</a> | |
<p class="post-meta"> | |
Posted by | |
<a href="#!">Dheeraj</a> | |
on February 22, 2022 | |
</p> | |
</div> | |
<hr class="my-4" /> | |
{% endfor %} | |
<!-- Pager--> | |
<div class="d-flex justify-content-end mb-4"><a class="btn btn-primary text-uppercase" href="index">Older Posts →</a></div> | |
</div> | |
</div> | |
</div> | |
{% include "footer.html" %} | |
<!-- Bootstrap core JS--> | |
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script> | |
<!-- Core theme JS--> | |
<script src="{{ url_for('static',filename='js/scripts.js') }}"></script> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
from flask import Flask, render_template | |
import requests | |
# import pprint | |
server = Flask(__name__) | |
response = requests.get("https://api.npoint.io/c790b4d5cab58020d391") | |
data = response.json() | |
# pprint.pprint(data) | |
display_info = { | |
'home': ["Dheeraj's Blog", "A collection of dheeraj's random musing"], | |
'about': ["About Me", "This is what I do."], | |
'contact': ["Contact Me", "Have questions? I have answers."] | |
} | |
@server.route('/') | |
@server.route('/index') | |
def home(): | |
bg_img = "static/assets/img/home-bg.jpg" | |
title = display_info['home'][0] | |
subtitle = display_info['home'][1] | |
return render_template('index.html', data=data, title=title, subtitle=subtitle, bg_img=bg_img) | |
@server.route('/about') | |
def about(): | |
bg_img = "static/assets/img/about-bg.jpg" | |
title = display_info['about'][0] | |
subtitle = display_info['about'][1] | |
return render_template('about.html', title=title, subtitle=subtitle, bg_img=bg_img) | |
@server.route('/contact') | |
def contact(): | |
bg_img = "static/assets/img/contact-bg.jpg" | |
title = display_info['contact'][0] | |
subtitle = display_info['contact'][1] | |
return render_template('contact.html', title=title, subtitle=subtitle, bg_img=bg_img) | |
@server.route('/<int:id_num>') | |
def post(id_num): | |
blog = data[id_num] | |
title = blog['title'] | |
subtitle = blog['subtitle'] | |
img_name = f"static/assets/img/post-bg-{id_num}.jpg" | |
return render_template('post.html', blog=blog, bg_img=img_name, title=title, subtitle=subtitle) | |
if __name__ == "__main__": | |
server.run(debug=True) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="utf-8" /> | |
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> | |
<meta name="description" content="" /> | |
<meta name="author" content="" /> | |
<title>Clean Blog - Start Bootstrap Theme</title> | |
<link rel="icon" type="image/x-icon" href="{{ url_for('static',filename='assets/favicon.ico') }}" /> | |
<!-- Font Awesome icons (free version)--> | |
<script src="https://use.fontawesome.com/releases/v5.15.4/js/all.js" crossorigin="anonymous"></script> | |
<!-- Google fonts--> | |
<link href="https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic" rel="stylesheet" type="text/css" /> | |
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800" rel="stylesheet" type="text/css" /> | |
<!-- Core theme CSS (includes Bootstrap)--> | |
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> | |
<link href="{{ url_for('static', filename='css/styles.css') }}" rel="stylesheet" /> | |
</head> | |
<body> | |
{% include "header.html" %} | |
<!-- Post Content--> | |
<article class="mb-4"> | |
<div class="container px-4 px-lg-5"> | |
<div class="row gx-4 gx-lg-5 justify-content-center"> | |
<div class="col-md-10 col-lg-8 col-xl-7"> | |
<p>{{ blog['body'] }}</p> | |
</div> | |
</div> | |
</div> | |
</article> | |
{% include "footer.html"%} | |
<!-- Bootstrap core JS--> | |
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script> | |
<!-- Core theme JS--> | |
<script src="{{ url_for('static',filename='js/scripts.js') }}"></script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment