Show sourcecode
The following files exists in this folder. Click to view.
webbserverprogrammering/projekt/snake_oil_seller/css/
entry.css
log-sign_in.css
main.css
snake_oil.css
main.css
314 lines ASCII Windows (CRLF)
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314
.product_container {
background-color: rgba(98, 129, 65, 0.5);
display: flex;
width: 80vw;
min-height: 140vh;
border: 0.5vw solid rgba(229, 217, 182, 0.5);
border-radius: 5vw;
color: rgb(230, 126, 34);
font-size: 3vw;
flex-direction: column;
justify-content: flex-start;
align-items: center;
margin-bottom: 8vh;
padding-bottom: 10vh;
gap: 4vh;
}
.class_column {
display: flex;
flex-direction: column;
width: 100%;
align-items: center;
gap: 2vh;
}
.class_title {
display: flex;
justify-content: center;
width: 100%;
font-size: 1em;
}
.product_row {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
flex-wrap: wrap;
gap: 1vw;
width: 100%;
padding-left: 2vw;
}
.product_items {
background-color: rgba(127, 161, 91, 0.5);
display: flex;
width: 20vw;
height: 40vh;
border: 0.5vw solid rgba(229, 217, 182, 0.5);
border-radius: 5vw;
color: rgb(230, 126, 34);
align-items: center;
justify-content: center;
text-align: center;
font-size: 0.8em;
}
#container_my_account {
background-color: rgba(98, 129, 65, 0.5);
display: flex;
position: relative;
min-height: 170vh;
width: 80vw;
border: 0.5vw solid rgba(229, 217, 182, 0.5);
border-radius: 5vw;
color: rgb(230, 126, 34);
font-size: 3vw;
flex-direction: column;
justify-content: center;
align-items: center;
margin-bottom: 8vh;
}
#account_info {
background-color: rgba(127, 161, 91, 0.5);
display: flex;
width: 40vw;
min-height: 150vh;
border: 0.5vw solid rgba(229, 217, 182, 0.5);
border-radius: 5vw;
color: rgb(230, 126, 34);
align-items: center;
justify-content: center;
text-align: center;
font-size: 0.8em;
flex-direction: column;
padding-top: 4vh;
padding-bottom: 4vh;
}
#product_container_shop_item {
background-color: rgba(98, 129, 65, 0.5);
display: flex;
min-height: 140vh;
width: 80vw;
border: 0.5vw solid rgba(229, 217, 182, 0.5);
border-radius: 5vw;
color: rgb(230, 126, 34);
font-size: 3vw;
flex-direction: row;
justify-content: space-evenly;
align-items: center;
margin-bottom: 8vh;
}
#product_container_shopping_cart {
background-color: rgba(98, 129, 65, 0.5);
display: flex;
position: relative;
min-height: 60vh;
width: 80vw;
border: 0.5vw solid rgba(229, 217, 182, 0.5);
border-radius: 5vw;
color: rgb(230, 126, 34);
font-size: 3vw;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-items: flex-start;
margin-bottom: 8vh;
padding: 1vw;
padding-bottom: 15vh;
}
.item_container {
position: relative;
font-size: 0.5em;
width: 15vw;
margin: 2.5vw;
}
#empty_cart_notice {
position: relative;
font-size: 1em;
width: 50vw;
margin-top: 12vw;
margin-left: 15vw;
text-align: center;
}
.item_container:hover {
background-color: rgba(0, 0, 0, 0.4);
border-radius: 1vw;
}
#product_image_cart {
display: block;
width: 100%;
border-radius: 2.5vw;
}
.image_text {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: rgb(230, 126, 34);
background-color: rgba(0, 0, 0, 0.1);
border-radius: 2.5vw;
text-align: center;
}
#image_part {
display: flex;
align-items: center;
justify-content: center;
height: 110vh;
width: 35vw;
background-color: rgba(98, 129, 65, 0.5);
border-radius: 5vw;
}
#product_image {
display: flex;
width: 30vw;
border-radius: 5vw;
}
#product_part {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
min-height: 110vh;
width: 35vw;
background-color: rgba(98, 129, 65, 0.5);
border-radius: 5vw;
}
#product_part p {
height: 2vh;
}
#product_part button {
height: 10vh;
width: 15vw;
background-color: rgb(64, 81, 59);
border: 0.3vw solid rgba(229, 217, 182, 0.5);
color: rgb(230, 126, 34);
font-size: 0.4em;
border-radius: 1.2vw;
}
#product_part button:hover {
height: 11vh;
width: 18vw;
font-size: 0.5em;
}
.items_main {
background-color: rgba(127, 161, 91, 0.5);
display: flex;
width: 75vw;
height: 20vh;
border: 0.5vw solid rgba(229, 217, 182, 0.5);
border-radius: 5vw;
color: rgb(230, 126, 34);
align-items: center;
justify-content: space-evenly;
}
#product_container_shop {
flex-direction: column;
min-height: 140vh;
}
.class_row {
display: flex;
flex-direction: row;
}
.cart_buttons_wrapper {
position: absolute;
bottom: 4vh;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 2vw;
}
.shopping_cart_buttons {
width: 20vw;
height: 10vh;
background-color: rgba(127, 161, 91, 0.5);
border: 0.5vw solid rgba(229, 217, 182, 0.5);
border-radius: 5vw;
color: rgb(230, 126, 34);
font-size: 0.7em;
}
.shopping_cart_buttons:hover {
cursor: pointer;
border: none;
}
#container_about_us {
background-color: rgba(98, 129, 65, 0.5);
display: flex;
width: 80vw;
min-height: 140vh;
border: 0.5vw solid rgba(229, 217, 182, 0.5);
border-radius: 5vw;
color: rgb(230, 126, 34);
font-size: 3vw;
flex-direction: column;
justify-content: flex-start;
align-items: center;
padding-left: 2vw;
padding-right: 2vw;
}
#container_about_us h5 {
text-align: center;
}
#container_about_us p {
font-size: 70%;
}
#container_contact {
background-color: rgba(98, 129, 65, 0.5);
display: flex;
width: 80vw;
min-height: 50vh;
border: 0.5vw solid rgba(229, 217, 182, 0.5);
border-radius: 5vw;
color: rgb(230, 126, 34);
font-size: 3vw;
flex-direction: column;
justify-content: flex-start;
align-items: center;
padding-left: 2vw;
padding-right: 2vw;
}
#container_contact h5 {
text-align: center;
margin-top: 6vh;
margin-bottom: 0;
}
#container_contact p {
font-size: 70%;
text-align: center;
}
#container_contact form {
width: 10vw;
}