Skip to content

Commit 2e93759

Browse files
HarshKumarSawHarshKumarSaw
committed
Bootstrap Template added
1 parent 32c2938 commit 2e93759

File tree

15 files changed

+11398
-16
lines changed

15 files changed

+11398
-16
lines changed

‎02.Flask/01.Templates.py‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,11 @@
88

99
@app.route("/")
1010
def template():
11-
return render_template("index.html")
11+
return render_template("sample.html")
1212
#file location bydefault templates folder ka hota hai
1313

1414
#static folder ka location use karne ke liye static/filename kar sakte hai
15-
#but instead hum use karte hai url_for('static', filename='fileKAnaam') - best practice
16-
#agar same inline html karna hai to {{}} ke andar use kar sakte hai - check variable.html for more info
15+
#but instead hum use karte hai {{ url_for('static', filename='fileKAnaam') }} - best practice inline html only not python
1716

1817
#To link python variables to html
1918
@app.route("/variable")

‎02.Flask/Bootstrap_Template.py‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
#Bootstrap Website se acha-acha templates download kar sakte hai for good frontend design
2+
3+
from flask import Flask, render_template
4+
5+
app = Flask(__name__)
6+
7+
@app.route("/")
8+
def home():
9+
return render_template("index.html")
10+
11+
@app.route("/about.html")
12+
def about():
13+
return render_template("about.html")
14+
15+
app.run()

‎02.Flask/templates/about.html‎

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
6+
<meta name="description" content="" />
7+
<meta name="author" content="" />
8+
<title>Clean Blog - Start Bootstrap Theme</title>
9+
<link rel="icon" type="image/x-icon" href="assets/favicon.ico" />
10+
<!-- Font Awesome icons (free version)-->
11+
<script src="https://use.fontawesome.com/releases/v6.3.0/js/all.js" crossorigin="anonymous"></script>
12+
<!-- Google fonts-->
13+
<link href="https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic" rel="stylesheet" type="text/css" />
14+
<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" />
15+
<!-- Core theme CSS (includes Bootstrap)-->
16+
<link href="css/styles.css" rel="stylesheet" />
17+
</head>
18+
<body>
19+
<!-- Navigation-->
20+
<nav class="navbar navbar-expand-lg navbar-light" id="mainNav">
21+
<div class="container px-4 px-lg-5">
22+
<a class="navbar-brand" href="index.html">Start Bootstrap</a>
23+
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
24+
Menu
25+
<i class="fas fa-bars"></i>
26+
</button>
27+
<div class="collapse navbar-collapse" id="navbarResponsive">
28+
<ul class="navbar-nav ms-auto py-4 py-lg-0">
29+
<li class="nav-item"><a class="nav-link px-lg-3 py-3 py-lg-4" href="index.html">Home</a></li>
30+
<li class="nav-item"><a class="nav-link px-lg-3 py-3 py-lg-4" href="about.html">About</a></li>
31+
<li class="nav-item"><a class="nav-link px-lg-3 py-3 py-lg-4" href="post.html">Sample Post</a></li>
32+
<li class="nav-item"><a class="nav-link px-lg-3 py-3 py-lg-4" href="contact.html">Contact</a></li>
33+
</ul>
34+
</div>
35+
</div>
36+
</nav>
37+
<!-- Page Header-->
38+
<header class="masthead" style="background-image: url('assets/img/about-bg.jpg')">
39+
<div class="container position-relative px-4 px-lg-5">
40+
<div class="row gx-4 gx-lg-5 justify-content-center">
41+
<div class="col-md-10 col-lg-8 col-xl-7">
42+
<div class="page-heading">
43+
<h1>About Me</h1>
44+
<span class="subheading">This is what I do.</span>
45+
</div>
46+
</div>
47+
</div>
48+
</div>
49+
</header>
50+
<!-- Main Content-->
51+
<main class="mb-4">
52+
<div class="container px-4 px-lg-5">
53+
<div class="row gx-4 gx-lg-5 justify-content-center">
54+
<div class="col-md-10 col-lg-8 col-xl-7">
55+
<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>
56+
<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>
57+
<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>
58+
</div>
59+
</div>
60+
</div>
61+
</main>
62+
<!-- Footer-->
63+
<footer class="border-top">
64+
<div class="container px-4 px-lg-5">
65+
<div class="row gx-4 gx-lg-5 justify-content-center">
66+
<div class="col-md-10 col-lg-8 col-xl-7">
67+
<ul class="list-inline text-center">
68+
<li class="list-inline-item">
69+
<a href="#!">
70+
<span class="fa-stack fa-lg">
71+
<i class="fas fa-circle fa-stack-2x"></i>
72+
<i class="fab fa-twitter fa-stack-1x fa-inverse"></i>
73+
</span>
74+
</a>
75+
</li>
76+
<li class="list-inline-item">
77+
<a href="#!">
78+
<span class="fa-stack fa-lg">
79+
<i class="fas fa-circle fa-stack-2x"></i>
80+
<i class="fab fa-facebook-f fa-stack-1x fa-inverse"></i>
81+
</span>
82+
</a>
83+
</li>
84+
<li class="list-inline-item">
85+
<a href="#!">
86+
<span class="fa-stack fa-lg">
87+
<i class="fas fa-circle fa-stack-2x"></i>
88+
<i class="fab fa-github fa-stack-1x fa-inverse"></i>
89+
</span>
90+
</a>
91+
</li>
92+
</ul>
93+
<div class="small text-center text-muted fst-italic">Copyright &copy; Your Website 2023</div>
94+
</div>
95+
</div>
96+
</div>
97+
</footer>
98+
<!-- Bootstrap core JS-->
99+
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
100+
<!-- Core theme JS-->
101+
<script src="js/scripts.js"></script>
102+
</body>
103+
</html>

‎02.Flask/templates/assets/favicon.ico‎

22.9 KB
Binary file not shown.

‎02.Flask/templates/assets/img/about-bg.jpg‎

2.43 MB
Loading

‎02.Flask/templates/assets/img/contact-bg.jpg‎

489 KB
Loading

‎02.Flask/templates/assets/img/home-bg.jpg‎

984 KB
Loading

‎02.Flask/templates/assets/img/post-bg.jpg‎

1.72 MB
Loading

‎02.Flask/templates/assets/img/post-sample-image.jpg‎

112 KB
Loading

‎02.Flask/templates/contact.html‎

Lines changed: 158 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,158 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
6+
<meta name="description" content="" />
7+
<meta name="author" content="" />
8+
<title>Clean Blog - Start Bootstrap Theme</title>
9+
<link rel="icon" type="image/x-icon" href="assets/favicon.ico" />
10+
<!-- Font Awesome icons (free version)-->
11+
<script src="https://use.fontawesome.com/releases/v6.3.0/js/all.js" crossorigin="anonymous"></script>
12+
<!-- Google fonts-->
13+
<link href="https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic" rel="stylesheet" type="text/css" />
14+
<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" />
15+
<!-- Core theme CSS (includes Bootstrap)-->
16+
<link href="css/styles.css" rel="stylesheet" />
17+
</head>
18+
<body>
19+
<!-- Navigation-->
20+
<nav class="navbar navbar-expand-lg navbar-light" id="mainNav">
21+
<div class="container px-4 px-lg-5">
22+
<a class="navbar-brand" href="index.html">Start Bootstrap</a>
23+
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
24+
Menu
25+
<i class="fas fa-bars"></i>
26+
</button>
27+
<div class="collapse navbar-collapse" id="navbarResponsive">
28+
<ul class="navbar-nav ms-auto py-4 py-lg-0">
29+
<li class="nav-item"><a class="nav-link px-lg-3 py-3 py-lg-4" href="index.html">Home</a></li>
30+
<li class="nav-item"><a class="nav-link px-lg-3 py-3 py-lg-4" href="about.html">About</a></li>
31+
<li class="nav-item"><a class="nav-link px-lg-3 py-3 py-lg-4" href="post.html">Sample Post</a></li>
32+
<li class="nav-item"><a class="nav-link px-lg-3 py-3 py-lg-4" href="contact.html">Contact</a></li>
33+
</ul>
34+
</div>
35+
</div>
36+
</nav>
37+
<!-- Page Header-->
38+
<header class="masthead" style="background-image: url('assets/img/contact-bg.jpg')">
39+
<div class="container position-relative px-4 px-lg-5">
40+
<div class="row gx-4 gx-lg-5 justify-content-center">
41+
<div class="col-md-10 col-lg-8 col-xl-7">
42+
<div class="page-heading">
43+
<h1>Contact Me</h1>
44+
<span class="subheading">Have questions? I have answers.</span>
45+
</div>
46+
</div>
47+
</div>
48+
</div>
49+
</header>
50+
<!-- Main Content-->
51+
<main class="mb-4">
52+
<div class="container px-4 px-lg-5">
53+
<div class="row gx-4 gx-lg-5 justify-content-center">
54+
<div class="col-md-10 col-lg-8 col-xl-7">
55+
<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>
56+
<div class="my-5">
57+
<!-- * * * * * * * * * * * * * * *-->
58+
<!-- * * SB Forms Contact Form * *-->
59+
<!-- * * * * * * * * * * * * * * *-->
60+
<!-- This form is pre-integrated with SB Forms.-->
61+
<!-- To make this form functional, sign up at-->
62+
<!-- https://startbootstrap.com/solution/contact-forms-->
63+
<!-- to get an API token!-->
64+
<form id="contactForm" data-sb-form-api-token="API_TOKEN">
65+
<div class="form-floating">
66+
<input class="form-control" id="name" type="text" placeholder="Enter your name..." data-sb-validations="required" />
67+
<label for="name">Name</label>
68+
<div class="invalid-feedback" data-sb-feedback="name:required">A name is required.</div>
69+
</div>
70+
<div class="form-floating">
71+
<input class="form-control" id="email" type="email" placeholder="Enter your email..." data-sb-validations="required,email" />
72+
<label for="email">Email address</label>
73+
<div class="invalid-feedback" data-sb-feedback="email:required">An email is required.</div>
74+
<div class="invalid-feedback" data-sb-feedback="email:email">Email is not valid.</div>
75+
</div>
76+
<div class="form-floating">
77+
<input class="form-control" id="phone" type="tel" placeholder="Enter your phone number..." data-sb-validations="required" />
78+
<label for="phone">Phone Number</label>
79+
<div class="invalid-feedback" data-sb-feedback="phone:required">A phone number is required.</div>
80+
</div>
81+
<div class="form-floating">
82+
<textarea class="form-control" id="message" placeholder="Enter your message here..." style="height: 12rem" data-sb-validations="required"></textarea>
83+
<label for="message">Message</label>
84+
<div class="invalid-feedback" data-sb-feedback="message:required">A message is required.</div>
85+
</div>
86+
<br />
87+
<!-- Submit success message-->
88+
<!---->
89+
<!-- This is what your users will see when the form-->
90+
<!-- has successfully submitted-->
91+
<div class="d-none" id="submitSuccessMessage">
92+
<div class="text-center mb-3">
93+
<div class="fw-bolder">Form submission successful!</div>
94+
To activate this form, sign up at
95+
<br />
96+
<a href="https://startbootstrap.com/solution/contact-forms">https://startbootstrap.com/solution/contact-forms</a>
97+
</div>
98+
</div>
99+
<!-- Submit error message-->
100+
<!---->
101+
<!-- This is what your users will see when there is-->
102+
<!-- an error submitting the form-->
103+
<div class="d-none" id="submitErrorMessage"><div class="text-center text-danger mb-3">Error sending message!</div></div>
104+
<!-- Submit Button-->
105+
<button class="btn btn-primary text-uppercase disabled" id="submitButton" type="submit">Send</button>
106+
</form>
107+
</div>
108+
</div>
109+
</div>
110+
</div>
111+
</main>
112+
<!-- Footer-->
113+
<footer class="border-top">
114+
<div class="container px-4 px-lg-5">
115+
<div class="row gx-4 gx-lg-5 justify-content-center">
116+
<div class="col-md-10 col-lg-8 col-xl-7">
117+
<ul class="list-inline text-center">
118+
<li class="list-inline-item">
119+
<a href="#!">
120+
<span class="fa-stack fa-lg">
121+
<i class="fas fa-circle fa-stack-2x"></i>
122+
<i class="fab fa-twitter fa-stack-1x fa-inverse"></i>
123+
</span>
124+
</a>
125+
</li>
126+
<li class="list-inline-item">
127+
<a href="#!">
128+
<span class="fa-stack fa-lg">
129+
<i class="fas fa-circle fa-stack-2x"></i>
130+
<i class="fab fa-facebook-f fa-stack-1x fa-inverse"></i>
131+
</span>
132+
</a>
133+
</li>
134+
<li class="list-inline-item">
135+
<a href="#!">
136+
<span class="fa-stack fa-lg">
137+
<i class="fas fa-circle fa-stack-2x"></i>
138+
<i class="fab fa-github fa-stack-1x fa-inverse"></i>
139+
</span>
140+
</a>
141+
</li>
142+
</ul>
143+
<div class="small text-center text-muted fst-italic">Copyright &copy; Your Website 2023</div>
144+
</div>
145+
</div>
146+
</div>
147+
</footer>
148+
<!-- Bootstrap core JS-->
149+
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
150+
<!-- Core theme JS-->
151+
<script src="js/scripts.js"></script>
152+
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *-->
153+
<!-- * * SB Forms JS * *-->
154+
<!-- * * Activate your form at https://startbootstrap.com/solution/contact-forms * *-->
155+
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *-->
156+
<script src="https://cdn.startbootstrap.com/sb-forms-latest.js"></script>
157+
</body>
158+
</html>

0 commit comments

Comments
 (0)