Skip to content

Commit

Permalink
Added display, width, max-width and margin rules to
Browse files Browse the repository at this point in the history
.submit-button and .cancel-button.

Updated .cancel-button bg color.

Added min-width: 600px media query.

Added display flex and space around to .button-container and
added max-width to both buttons.
  • Loading branch information
manuel12 committed Nov 1, 2023
1 parent 4598c3e commit 35b2f15
Showing 1 changed file with 50 additions and 9 deletions.
59 changes: 50 additions & 9 deletions src/index.css
Original file line number Diff line number Diff line change
Expand Up @@ -83,6 +83,10 @@ p {
border: 3px solid gray;
}
.input-box {
display: block;
width: 90%;
max-width: 500px;
margin: 0 auto 20px !important;
font-size: 1.2rem;
padding: 1rem;
border: 2px solid #161d28;
Expand All @@ -92,30 +96,40 @@ p {
}

.submit-button {
margin-top: 1rem;
margin-left: 1rem;
display: block;
width: 90%;
margin: 0 auto 5px;
font-family: Arial, sans-serif;
background-color: #7c77fe;
border-radius: 10em;
padding: 0 2rem;
cursor: pointer;
}

.submit-button:hover {
background-color: #6c7077;
}

.cancel-button {
display: block;
width: 90%;
margin: 0 auto 5px;
color: white;
background-color: transparent;
border: none;
background-color: #91969d;
border-radius: 10em;
outline: none;
cursor: pointer;
}

.cancel-button:hover {
background-color: #5b5e62;
}

.form {
justify-content: center;
}

.submit-button:hover {
background-color: #6c7077;
}


/* INFORMATION CARD */

Expand Down Expand Up @@ -217,6 +231,33 @@ p {
justify-content: space-around;
}

@media (min-width: 600px) {
.button-container {
display: flex;
justify-content: space-around;
max-width: 550px;
margin: auto;
}

.submit-button {
max-width: 250px;
font-family: Arial, sans-serif;
background-color: #7c77fe;
border-radius: 10em;
padding: 0 2rem;
cursor: pointer;
}

.cancel-button {
max-width: 250px;
color: white;
background-color: #91969d;
border-radius: 10em;
outline: none;
cursor: pointer;
}
}

@media (max-width: 700px) {
html {
font-size: 14px;
Expand All @@ -227,7 +268,7 @@ p {
}

.container-medium {
margin: 1rem 0;
margin: 1rem auto;
width: 90%;
transition: transform 0.5s ease;
}
Expand All @@ -237,7 +278,7 @@ p {
}

.container-small {
margin: 1rem 0;
margin: 1rem auto;
width: 90%;
transition: transform 0.5s ease;
}
Expand Down

0 comments on commit 35b2f15

Please sign in to comment.