Skip to content
Snippets Groups Projects
Commit 6376e595 authored by Michael Drury's avatar Michael Drury
Browse files

making websight have more of a responsive design by using % instead of px and...

making websight have more of a responsive design by using % instead of px and changed how buttons look
parent 2614be93
No related branches found
No related tags found
No related merge requests found
...@@ -19,18 +19,18 @@ a:link { ...@@ -19,18 +19,18 @@ a:link {
text-align: center; text-align: center;
} }
.item_home_img { .item_shopping_img {
height: 90%; height: 90%;
float: right; float: right;
padding: 2%; padding: 2%;
} }
.home_side { .shopping_side {
float: right; float: right;
clear: right; clear: right;
padding: 20px; padding: 20px;
text-align: center; text-align: center;
height: 100%; width: 20%;
} }
.home_left { .home_left {
...@@ -61,10 +61,10 @@ a:link { ...@@ -61,10 +61,10 @@ a:link {
.shopping_title { .shopping_title {
font-size: 450%; font-size: 450%;
border: thin; border: thin;
margin-left: 20px; margin-left: 2%;
font-family: Andale Mono, monospace; font-family: Andale Mono, monospace;
border-bottom: 2px solid grey; border-bottom: 2px solid grey;
width: 1150px; width: 75%;
} }
.home_title { .home_title {
...@@ -98,10 +98,11 @@ a:link { ...@@ -98,10 +98,11 @@ a:link {
padding-left: 20px; padding-left: 20px;
} }
.item_home_block { .item_shopping_block {
border: 2px solid grey; border: 2px solid grey;
width: 900px; width: 60%;
margin: 20px; margin-left: 2%;
margin-bottom: 20px;
padding: 10px; padding: 10px;
height: 250px height: 250px
} }
...@@ -196,7 +197,7 @@ li { ...@@ -196,7 +197,7 @@ li {
transform: scale(1.1); transform: scale(1.1);
} }
.item_home_img:hover { .item_shopping_img:hover {
transform: scale(1.1); transform: scale(1.1);
} }
...@@ -351,7 +352,7 @@ li { ...@@ -351,7 +352,7 @@ li {
} }
.sponsor_image { .sponsor_image {
width: 280px; width: 100%;
} }
.remove_form { .remove_form {
...@@ -459,11 +460,23 @@ li { ...@@ -459,11 +460,23 @@ li {
} }
.ad_photo { .ad_photo {
width: 250px; width: 80%;
padding: 0px; padding: 0px;
margin: 0px; margin: 0px;
} }
.add_to_button {
color: black;
border: 2px solid grey;
background-color: lightgrey;
border-radius: 5px;
}
.add_to_button:hover {
color: #D49B30;
background-color: lightgrey;
}
.ad_box { .ad_box {
border: 2px solid grey; border: 2px solid grey;
} }
......
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
<div id="content-wrap"> <div id="content-wrap">
<div class = "home_side"> <div class = "shopping_side">
<p class = "home_right_text">You are {% if not current_user.is_authenticated %}not {% endif %}logged in.</p> <p class = "home_right_text">You are {% if not current_user.is_authenticated %}not {% endif %}logged in.</p>
<form action="" method="POST"> <form action="" method="POST">
<div> <div>
...@@ -65,20 +65,20 @@ ...@@ -65,20 +65,20 @@
{% for item in product_table %} {% for item in product_table %}
<div class = "item_home_block"> <div class = "item_shopping_block">
<a href="/item?id={{item.product_id}}"> <a href="/item?id={{item.product_id}}">
<img class = "item_home_img" src = "{{ url_for('static', filename='images/' + item.product_image) }}" alt="product image"/></a> <img class = "item_shopping_img" src = "{{ url_for('static', filename='images/' + item.product_image) }}" alt="product image"/></a>
<p><a class = "item_home_name" href="/item?id={{item.product_id}}"><b>{{ item.product_name }}</b></a></p> <p><a class = "item_home_name" href="/item?id={{item.product_id}}"><b>{{ item.product_name }}</b></a></p>
<p>price: £{{ item.product_price }}</p> <p>price: £{{ item.product_price }}</p>
<p>product type: {{ item.product_type }}</p> <p>product type: {{ item.product_type }}</p>
{% if current_user.is_authenticated %} {% if current_user.is_authenticated %}
<form method = "post"> <form method = "post">
<input type = "hidden" name = "item_id_cart" value = {{ item.product_id }}> <input type = "hidden" name = "item_id_cart" value = {{ item.product_id }}>
<input type = "submit" value = "add to cart"> <input class = "add_to_button" type = "submit" value = "add to cart">
</form> </form>
<form method = "post" style = "padding-top: 10px"> <form method = "post" style = "padding-top: 10px">
<input type = "hidden" name = "item_id_wishlist" value = {{ item.product_id }}> <input type = "hidden" name = "item_id_wishlist" value = {{ item.product_id }}>
<input type = "submit" value = "add to wishlist"> <input class = "add_to_button" type = "submit" value = "add to wishlist">
</form> </form>
{% endif %} {% endif %}
{% if not current_user.is_authenticated %} {% if not current_user.is_authenticated %}
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment