Task 1

AUTHORS

@@ -4,3 +4,6 @@
 Jennifer Huang <133@holbertonschool.com>
 Alexa Orrico <210@holbertonschool.com>
 Joann Vuong <130@holbertonschool.com> 
+Aramis Martinez <7331@holbertonschool.com>
+Angelo Garcia
+Leandro Pagani

README.md

@@ -160,5 +160,12 @@ Jhoan Zamora - [Github](https://github.com/jzamora5) / [Twitter](https://twitter
 David Ovalle - [Github](https://github.com/Nukemenonai) / [Twitter](https://twitter.com/disartDave)
 
 Second part of Airbnb: Joann Vuong
+
+Four part of Airbnb: 
+Aramis Martinez
+Angelo Garcia
+Leandro Pagani
+
+
 ## License
 Public Domain. No copy write protection. 

web_dynamic/0-hbnb.py

@@ -0,0 +1,49 @@
+#!/usr/bin/python3
+""" Starts a Flash Web Application """
+from models import storage
+from models.state import State
+from models.city import City
+from models.amenity import Amenity
+from models.place import Place
+from os import environ
+from flask import Flask, render_template
+import uuid
+app = Flask(__name__)
+# app.jinja_env.trim_blocks = True
+# app.jinja_env.lstrip_blocks = True
+
+
+@app.teardown_appcontext
+def close_db(error):
+    """ Remove the current SQLAlchemy Session """
+    storage.close()
+
+
+@app.route('/0-hbnb/', strict_slashes=False)
+def hbnb():
+    """ HBNB is alive! """
+    print(storage)
+    states = storage.all(State)
+    print(states)
+    states = sorted(states, key=lambda k: k.name)
+    st_ct = []
+
+    for state in states:
+        st_ct.append([state, sorted(state.cities, key=lambda k: k.name)])
+
+    amenities = storage.all(Amenity).values()
+    amenities = sorted(amenities, key=lambda k: k.name)
+
+    places = storage.all(Place).values()
+    places = sorted(places, key=lambda k: k.name)
+
+    return render_template('0-hbnb.html',
+                           states=st_ct,
+                           amenities=amenities,
+                           places=places,
+                           cache_id=uuid.uuid4())
+
+
+if __name__ == "__main__":
+    """ Main Function """
+    app.run(host='0.0.0.0', port=5000, debug=True)

web_dynamic/static/styles/3-footer.css

@@ -0,0 +1,16 @@
+footer {
+    position: fixed;
+    background: white;
+    height: 60px;
+    width: 100%;
+    bottom: 0;
+    border-top: 1px solid #CCCCCC;
+}
+footer p {
+    position: absolute;
+    text-align: center;
+    top: 10%;
+    bottom: 0;
+    right: 0;
+    left: 0;
+}

web_dynamic/static/styles/3-header.css

@@ -0,0 +1,11 @@
+header {
+    background: white;
+    height: 70px;
+    width: 100%;
+    border-bottom: 1px solid #CCCCCC;
+}
+header .logo {
+    background: url("../images/logo.png") no-repeat;
+    left: 20px;
+    height: 100%;
+}

web_dynamic/static/styles/4-common.css

@@ -0,0 +1,11 @@
+body {
+    margin: 0;
+    padding: 0;
+    color: #484848;
+    font-size: 14px;
+    font-family: Circular,"Helvetica Neue",Helvetica,Arial,sans-serif;
+}
+body .container {
+    max-width: 1000px;
+    margin: 30px auto;
+}

web_dynamic/static/styles/6-filters.css

@@ -0,0 +1,103 @@
+.container .filters {
+    position: relative;
+    background: white;
+    height: 70px;
+    width: 100%;
+    border: 1px solid #DDDDDD;
+    border-radius: 4px;
+}
+button {
+    position: absolute;
+    font-size: 18px;
+    background: #FF5A5F;
+    color: #FFFFFF;
+    height: 48px;
+    width: 20%;
+    border-style: none;
+    border-radius: 4px;
+    top: 15%;
+    right: 30px;
+}
+button:hover {
+    opacity: 0.9;
+}
+.filters div {
+    display: inline-grid;
+}
+.filters h2 {
+    margin-left: 15%;
+    margin-top: 0;
+    margin-bottom: 0;
+    font-weight: 600;
+}
+.filters h3 {
+    margin-left: 15%;
+    margin-bottom: 0;
+    font-weight: 600;
+}
+.filters h4 {
+    margin-left: 15%;
+    margin-top: 0;
+    font-weight: 400;
+    font-size: 14px;
+}
+.locations {
+    height: 100%;
+    width: 25%;
+    border-right: 1px solid #DDDDDD;
+}
+.amenities {
+    height: 100%;
+    width: 25%;
+}
+
+.popover {
+    visibility: hidden;
+    width: 100%;
+    border: 1px solid #DDDDDD;
+    border-radius: 4px;
+    background: #FAFAFA;
+    padding-bottom: 15px;
+    height: 300px;
+    overflow-y: scroll;
+    scrollbar-width: none;
+    max-height: 300px;
+}
+
+.popover::-webkit-scrollbar{
+    width: 0px;
+}
+
+.amenities .popover {
+    padding: 10px 0;
+    margin-left: -5px;
+    margin-top: 0%;
+}
+
+.amenities .popover ul{
+    margin: 0px;
+}
+
+.locations .popover {
+    margin-top: 0%;
+}
+.popover ul {
+    list-style-type: none;
+    padding-bottom: 10px;
+    padding-left: 10px;
+}
+.popover ul li{
+    padding: 4px;
+    padding-left: 10px;
+}
+
+.popover ul h2{
+    margin-top: 1.5%;
+    margin-bottom: 5%;
+    margin-left: 0px;
+}
+
+.amenities:hover .popover,
+.locations:hover .popover {
+    visibility: visible;
+}

web_dynamic/static/styles/8-places.css

@@ -0,0 +1,101 @@
+.places {
+    column-count: 2;
+    columns: 30em;
+    justify-content: center;
+    padding: 0 20px;
+    margin-top: 1%;
+    margin-bottom: 8%;
+}
+@media only screen and (max-width: 920px)
+{
+    .places {
+	display: flex;
+	flex-wrap: wrap;
+    }
+}
+
+.placesh1 h1 {
+    width: 100%;
+    margin-right: 400px;
+    text-align: left;
+    font-size: 35px;
+}
+
+.places article {
+    -webkit-column-break-inside: avoid;
+    page-break-inside: avoid;
+    display: inline-block;
+    width: 390px;
+    height: 100%;
+    padding: 20px;
+    margin: 20px;
+    border: 1px solid #FF5A5F;
+    border-radius: 4px;
+}
+.places h2 {
+    font-size: 30px;
+    text-align: center;
+    margin-top: 0;
+}
+.title_box {
+    display: flex;
+    justify-content: space-between;
+    margin-top: -2%;
+}
+
+.title_box h2 {
+    text-align: left;
+    margin: 25px 3% 40px 2%;
+    max-width: 75%;
+    word-wrap: break-word;
+}
+.price_by_night {
+    display: flex;
+    height: 60px;
+    min-width: 60px;
+    font-size: 30px;
+    justify-content: center;
+    align-items: center;
+    color: #FF5A5F;
+    border: 4px solid #FF5A5F;
+    border-radius: 50%;
+    align-items: center;
+    padding: 2.3%;
+}
+
+.information {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 80px;
+    border-top: 1px solid #DDDDDD;
+    border-bottom: 1px solid #DDDDDD;
+    margin-bottom: 5%;
+}
+
+.information div {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    flex-direction: column;
+    height: 65px;
+}
+
+.information .max_guest {
+    background: url("../images/icon_group.png") no-repeat top center;
+    width: 100px;
+}
+
+.information .number_rooms {
+    background: url("../images/icon_bed.png") no-repeat top center;
+    width: 100px;
+}
+
+.information .number_bathrooms {
+    background: url("../images/icon_bath.png") no-repeat top center;
+    width: 100px;
+}
+
+.user {
+  margin-bottom: 1.5%;
+}