Last active
July 11, 2017 20:42
-
-
Save vb100/c7ca49af8b01ca1f03d940ba965e1510 to your computer and use it in GitHub Desktop.
Generate Webpage with Flask module. This application build a DYNAMIC website that consist of separate HTML files that construct whole website structure regarding to defined CSS style.
This file contains hidden or 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
| FILE/FOLDER STRUCTURE MUST BE AS: | |
| Project: | |
| - static | |
| --css | |
| ---main.css | |
| -templates | |
| --layout.html | |
| --home.html | |
| --contact.html | |
| --about.html | |
| -FlaskWebsite.py |
This file contains hidden or 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
| {%extends "layout.html"%} | |
| {%block content%} | |
| <div class="about>"> | |
| <h1>My about page</h1> | |
| <p>Vytautas Bielinskas</p> | |
| <p>Line after</p> | |
| </div> | |
| {%endblock%} |
This file contains hidden or 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
| {%extends "layout.html"%} | |
| {%block content%} | |
| <div class="contact"> | |
| <h1>Contact me!</h1> | |
| <p>Contact me if U can!</p> | |
| </div> | |
| {%endblock%} |
This file contains hidden or 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
| #Import Fask class from flask library | |
| from flask import Flask, render_template | |
| #Associating that class to a object. __name__ special variable that will get the value of the name of the python script | |
| app=Flask(__name__) | |
| #Python script Python assign the name manin this string to the file | |
| #Case 1: Script executed __name__ = "__main__" | |
| @app.route('/') | |
| def home(): | |
| return render_template("home.html") | |
| @app.route('/about/') | |
| def about(): | |
| return render_template("about.html") | |
| @app.route('/contact/') | |
| def contact(): | |
| return render_template("contact.html") | |
| #When import script into another script, like if we import the script from acother script, this script will be assigned the script1.py | |
| #Its true when we execute the sript1.py | |
| if __name__=="__main__": | |
| app.run(debug=True) |
This file contains hidden or 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
| {%extends "layout.html"%} | |
| {%block content%} | |
| <div class="home"> | |
| <h1>My homepage</h1> | |
| <p>This is a test website. Vytautas</p> | |
| </div> | |
| {%endblock%} |
This file contains hidden or 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> | |
| <head> | |
| <title>Flask App</title> | |
| <link rel="stylesheet" href="{{url_for('static',filename='css/main.css')}}"> | |
| </head> | |
| <body> | |
| <header> | |
| <div class="container"> | |
| <h1 class="logo">Vytautas's web app</h1> | |
| <strong><nav> | |
| <ul class="menu"> | |
| <li><a href="{{ url_for('home') }}">Home</a></li> | |
| <li><a href="{{ url_for('about') }}">About2</a></li> | |
| <li><a href="{{ url_for('contact') }}">Contact</a></li> | |
| </ul> | |
| </nav></strong> | |
| </div> | |
| </header> | |
| <div class="container"> | |
| {%block content%} | |
| {%endblock%} | |
| </div> | |
| </body> | |
| </html> |
This file contains hidden or 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
| body { | |
| margin: 0; | |
| padding: 0; | |
| font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; | |
| color: #060; | |
| } | |
| /* | |
| * Formatting the header area | |
| */ | |
| header { | |
| background-color: #DFB887; | |
| height: 35px; | |
| width: 100%; | |
| opacity: .9; | |
| margin-bottom: 10px; | |
| } | |
| header h1.logo { | |
| margin: 0; | |
| font-size: 1.7em; | |
| color: #fff; | |
| text-transform: uppercase; | |
| float: left; | |
| } | |
| header h1.logo:hover { | |
| color: #fff; | |
| text-decoration: none; | |
| } | |
| /* | |
| * Center the body content | |
| */ | |
| .container { | |
| width: 1200px; | |
| margin: 0 auto; | |
| } | |
| div.home { | |
| padding: 10px 0 30px 0; | |
| background-color: #E6E6FA; | |
| -webkit-border-radius: 6px; | |
| -moz-border-radius: 6px; | |
| border-radius: 6px; | |
| } | |
| div.about { | |
| padding: 10px 0 30px 0; | |
| background-color: #E6E6FA; | |
| -webkit-border-radius: 6px; | |
| -moz-border-radius: 6px; | |
| border-radius: 6px; | |
| } | |
| h2 { | |
| font-size: 3em; | |
| margin-top: 40px; | |
| text-align: center; | |
| letter-spacing: -2px; | |
| } | |
| h3 { | |
| font-size: 1.7em; | |
| font-weight: 100; | |
| margin-top: 30px; | |
| text-align: center; | |
| letter-spacing: -1px; | |
| color: #999; | |
| } | |
| .menu { | |
| float: right; | |
| margin-top: 8px; | |
| } | |
| .menu li { | |
| display: inline; | |
| } | |
| .menu li + li { | |
| margin-left: 35px; | |
| } | |
| .menu li a { | |
| color: #444; | |
| text-decoration: none; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment