Skip to content

Blizzard Blast
Blizzard Blast
Commit 5b142cd5 authored by Martina Therese R. Reyes's avatar Martina Therese R. Reyes
Browse files
Options

Modified html and css files. Added design to base.html and formatted the overall UI

parent 24b3cff6
Hide whitespace changes
Inline Side-by-side
Showing with 158 additions and 28 deletions
blizzardblast/static/css/styles.css
View file @ 5b142cd5
#container { @import url('https://fonts.googleapis.com/css2?family=Lato&family=Poppins:wght@200&display=swap');
margin: auto; /*INDEX.HTML
width: 50%; BLACK - #000505
border: 3px solid blue; ENG VIOLET - #3B3355
padding: 10px; DARK BLUE GREY - #5D5D81
text-align: center; LIGHT STEEL BLUE - #BFCDE0
WHITE - #FEFCFD
*/
body {
margin-top: 0;
margin-left: 0;
margin-right: 0;
font-family: 'Poppins', sans-serif;
color: #3B3355;
} }
/* ======= NAV BAR ======= */
ul { ul {
list-style-type: none; list-style-type: none;
margin: 0;
padding: 0; padding: 0;
} }
.table { #nav-bar {
display: flex;
justify-content: center;
border-top: 1px #3B3355 solid;
border-bottom: 1px #3B3355 solid;
margin: 1rem 18rem;
}
.navbar-item {
float: left;
padding: 0.7rem;
}
.navbar-item:hover{
text-decoration: underline;
}
.navbar-item a {
text-decoration: none;
color: black;
}
/* ======= HEADING ======= */
header {
padding: 0.5rem;
animation: gradient 1s 1s infinite;
color: #FEFCFD;
}
@keyframes gradient {
0% {
background-color:#5D5D81;
}
100% {
background-color: #BFCDE0;
}
}
#heading {
text-align: center;
}
#company-header {
display: flex;
align-items: center;
justify-content: center;
}
margin-left: auto; #company-header-left {
margin-right: auto; margin-right:0;
}
#company-header-right {
margin-left:0;
} }
.view-title {
text-align: center;
}
/* ============== HOME PAGE =========== */
#about_us {
display: flex;
flex-flow: row wrap;
justify-content: center;
}
#company-pic {
margin-right: 0;
}
#company-description {
font-family: 'Lato', sans-serif;
flex-basis: 60%;
margin-top: 1rem;
margin-left: 5rem;
}
/* ======== ORDER.HTML ============ */
.button-container {
display: flex;
justify-content: space-evenly;
}
.order-button {
border:none;
padding: 1rem 3rem;
background-color: #3B3355;
color: #FEFCFD;
border-radius: 4rem;
}
.order-button:hover {
cursor: pointer;
background-color: #BFCDE0;
color: #3B3355;
}
\ No newline at end of file
blizzardblast/templates/base.html
View file @ 5b142cd5
...@@ -9,22 +9,25 @@ ...@@ -9,22 +9,25 @@
<title>{% block title %}{% endblock %}</title> <title>{% block title %}{% endblock %}</title>
</head> </head>
<body> <body>
<div id="container"> <header>
<div id="company-header">
<h1 id="company-header-left">Blizzard Blast</h1>
<img id="company-header-right" src="{% static '/media/milkshake-pngrepo-com.png' %}">
</div>
</header>
<div id="nav-bar">
<!-- navbar --> <!-- navbar -->
<ul class="navigation"> <ul class="navigation">
<li><a href="{% url 'homepage' %}">Home</a></li> <li class="navbar-item"><a href="{% url 'homepage' %}">Home</a></li>
<li><a href="{% url 'order' %}">Order</a></li> <li class="navbar-item"><a href="{% url 'order' %}">Order</a></li>
<li><a href="{% url 'inventory' %}">Inventory</a></li> <li class="navbar-item"><a href="{% url 'inventory' %}">Inventory</a></li>
<li><a href="{% url 'schedule' %}">Schedule</a></li> <li class="navbar-item"><a href="{% url 'schedule' %}">Schedule</a></li>
<li><a href="{% url 'report' %}">Report</a></li> <li class="navbar-item"><a href="{% url 'report' %}">Report</a></li>
</ul> </ul>
<!-- page content begins here -->
{% block content %}{% endblock %}
{% block scripts %}{% endblock %}
</div> </div>
<!-- page content begins here -->
{% block content %}{% endblock %}
{% block scripts %}{% endblock %}
</body> </body>
</html> </html>
blizzardblast/templates/index.html
View file @ 5b142cd5
...@@ -7,5 +7,25 @@ ...@@ -7,5 +7,25 @@
{% endblock %} {% endblock %}
{% block content %} {% block content %}
<h1 class='title'>Blizzard Blast</h1> <br> <h1 class='view-title'>Blizzard Blast homepage</h1>
<h2 id="heading">About Us</h2>
<div id="about_us">
<div id="company-pic">
<img src="{% static '/media/snowflake-pngrepo-com.png' %}">
</div>
<div id="company-description">
<p>
In 1996, Blizard Blast started off as a typical "lemon-stand" in Metro
Manila, Philippines. Once it saw an exponential increase in its
customers in 2001, it branched out to provinces like CDO and Laguna.
What now started off as a small business with small-town flavors like ube,
mango, and chocolate has now expanded to flavors to that of strawberry-vanilla
cake, mint-chocolate cream, and rocky-extra-chocolate road to name a few! In the
recent years, Blizard Blast now resides in different parts of the world such as
Malaysia, Singapore, Korea and even the United States! Indeed, it is an ice-cream
store loved by billions. In the recent years, Blizard Blast has been expanding its
menu and experimenting different flavors that will be out by February 2022.
</p>
</div>
</div>
{% endblock %} {% endblock %}
blizzardblast/templates/inventory.html
View file @ 5b142cd5
...@@ -7,6 +7,6 @@ ...@@ -7,6 +7,6 @@
{% endblock %} {% endblock %}
{% block content %} {% block content %}
<h1>Inventory</h1> <h1 class='view-title'>Inventory</h1>
{% endblock %} {% endblock %}
blizzardblast/templates/order.html
View file @ 5b142cd5
...@@ -8,6 +8,10 @@ ...@@ -8,6 +8,10 @@
{% block content %} {% block content %}
<h1 class='title'>Create Order</h1> <h1 class='view-title'>Create Order</h1>
<div class='button-container'>
<button class='order-button'>Add Order</button>
<button class='order-button'>Update Order</button>
<button class='order-button'>Delete Order</button>
</div>
{% endblock %} {% endblock %}
blizzardblast/templates/report.html
View file @ 5b142cd5
...@@ -7,6 +7,6 @@ ...@@ -7,6 +7,6 @@
{% endblock %} {% endblock %}
{% block content %} {% block content %}
<h1>Report </h1> <h1 class='view-title'>Report </h1>
{% endblock %} {% endblock %}
blizzardblast/templates/schedule.html
View file @ 5b142cd5
...@@ -7,6 +7,6 @@ ...@@ -7,6 +7,6 @@
{% endblock %} {% endblock %}
{% block content %} {% block content %}
<h1>Schedule </h1> <h1 class='view-title'>Schedule </h1>
{% endblock %} {% endblock %}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment