Internet-programming/lab2/style.css

225 lines
3.2 KiB
CSS

body{
background: #FAF8F1;
height: 100%;
}
p{
text-align: center;
font-size: 25px;
padding-top: 3%;
}
img{
height: 450px;
width: 350px;
margin-top: 70px;
border-radius: 25px;
}
.img_options{
height: 350px;
width: 350px;
margin-top: 60px;
border-radius: 25px;
}
.navbar{
background-color: #4B5146;
backdrop-filter: blur(10px);
color: #FAF8F1;
}
h1{
text-align: center;
margin-top: 30px;
/* padding: 0.5em; */
}
h2{
text-align: left;
font-size: 25px;
}
@media(max-width: 750px){
.img_options{
margin-left: 0;
}
.card{
margin: 0 auto;
margin-top: 70px;
}
.container-fluid {
display: flex;
flex-direction: column;
align-items: center;
}
.container-fluid img{
margin-top: 30px;
margin-left: 0;
}
price table, th, td {
width: auto;
padding: 1em;
margin-top: 30px;
margin: auto;
border: 3px solid;
border-color: #4B5146;
text-align: center;
}
table, th, td {
width: auto;
padding: 1em;
margin-top: 30px;
margin: 20px;
border: 3px solid;
border-color: #4B5146;
text-align: center;
}
}
@media (max-width: 550){
table{
font-size: 0.9rem;
}
}
@media (max-width: 450px){
img{
height: 400px;
width: 300px;
}
.img_options{
height: 250px;
width: 250px;
margin-left: 0;
}
table{
font-size: 0.rem;
}
}
@media (max-width: 330px){
img{
height: 250px;
width: 200px;
}
table{
font-size: 0.5rem;
}
}
tr:hover {background-color: #EEDFCC;}
.form-group {
display: flex;
flex-direction: column;
margin-bottom: 10px;
}
label {
margin-bottom: 5px;
}
input[type="text"],
input[type="email"],
input[type="password"],
textarea {
border-radius: 25px;
padding: 10px;
border: 1px solid #f4ecd9;
width: 95%;
margin: 0 auto;
}
@media (min-width: 750px) {
input[type="text"],
input[type="email"],
input[type="password"],
textarea {
width: 80%;
margin: 0 auto;
font-size: 1.6rem;
}
table, th, td {
padding: 2em;
margin: auto;
margin-top: 30px;
border: 3px solid;
border-color: #4B5146;
text-align: center;
font-size: 1.2rem;
}
}
.form-text {
margin-top: 10px;
text-align: center;
}
form {
margin-top: 70px;
text-align: center;
}
form div {
margin-bottom: 75px;
}
button[type="submit"] {
background-color: #EEDFCC;
border: 2px solid #4B5146;
margin-top: 45px;
border-radius: 25px;
}
.btn{
background-color: #EEDFCC;
border: 2px solid #4B5146;
margin-top: 45px;
border-radius: 25px;
}
add {
align-items: center;
text-align: center;
}
add .container {
width: 80%;
}
.container-fluid h1 {
font-size: 50px;
text-align: left;
padding-left: 5%;
padding-top: 7%;
}
.container-fluid h3{
font-size: 100px;
text-align: left;
padding-left: 5%;
font-size: 20px;
padding-top: 3%;
}
.container-fluid h2{
text-align: left;
padding-left: 5%;
padding-top: 3%;
}
.card{
padding: 0.5em;
background-color: #EEDFCC;
border-radius: 25px;
align-items: center;
margin-top: 70px;
font-size: 25px;
line-height: 40px;
}