implemented bootstrap classes and made grid
This commit is contained in:
parent
954cb5678f
commit
2b22f361ed
4
hello.py
4
hello.py
@ -18,10 +18,10 @@ def dated_url_for(endpoint, **values):
|
||||
|
||||
@app.route('/')
|
||||
def hello_world():
|
||||
return 'VVVW'
|
||||
return render_template('hello.html')
|
||||
|
||||
|
||||
# @app.route('/hello/<name>')
|
||||
@app.route('/hello/<name>')
|
||||
@app.route('/perspectiveB/')
|
||||
def perspectiveB():
|
||||
return render_template('perspectiveB.html')
|
||||
|
@ -1,4 +1,27 @@
|
||||
/* Everything*/
|
||||
* {
|
||||
border: 1px black solid;
|
||||
}
|
||||
|
||||
/*Main areas*/
|
||||
.map_area {
|
||||
text-align: center;
|
||||
margin-top: 200px;
|
||||
}
|
||||
.image_area {
|
||||
margin-top: 10px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
.image_area img {
|
||||
width: 200px;
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
.iframe_area {
|
||||
margin-top: 10px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
#video1 {
|
||||
margin-top: 300px;
|
||||
}
|
||||
|
19
templates/base.html
Normal file
19
templates/base.html
Normal file
@ -0,0 +1,19 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
{% block head %}
|
||||
<title>{% block title %}VVVW{% endblock %}</title>
|
||||
<link rel="stylesheet" href="../static/css/style.css">
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
|
||||
{% endblock %}
|
||||
</head>
|
||||
<body>
|
||||
<div class="container-fluid">
|
||||
{% block body %} {% endblock %}
|
||||
</div>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
|
||||
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
|
||||
</body>
|
||||
</html>
|
@ -1,23 +1,29 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<style>
|
||||
#draggable {
|
||||
position: absolute;
|
||||
}
|
||||
</style>
|
||||
<head>
|
||||
<title>Hello from Flask</title>
|
||||
{% if name %}
|
||||
<h1>Hello {{ name }}!</h1>
|
||||
{% else %}
|
||||
<h1>VVVW</h1>
|
||||
{% endif %}
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="draggable">
|
||||
<img src="../static/images/test1.jpeg" width='500px' alt="test">
|
||||
{% extends "base.html" %}
|
||||
{% block title %}Hello{% endblock %}
|
||||
{% block body %}
|
||||
<div class="row">
|
||||
<div class="col-md-9">
|
||||
<div class="map_area">Map area</div>
|
||||
</div>
|
||||
<script src="../static/js/draggable.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
<div class="col-md-3">
|
||||
<div class="row">
|
||||
<div class="col-md-10">
|
||||
<div class="image_area">
|
||||
<p>image</p>
|
||||
<img src="../static/images/test_small.jpeg" alt="poem">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-10">
|
||||
<div class="iframe_area">
|
||||
<p>iframe area</p>
|
||||
<iframe src="../static/images/abstract.pdf" width="300px" height="500px"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
Loading…
Reference in New Issue
Block a user