Commit 3b433973 authored by Ysabella Panghulan's avatar Ysabella Panghulan

finalized design of webapp

parent ea6e3fa2
...@@ -62,4 +62,12 @@ li:hover { ...@@ -62,4 +62,12 @@ li:hover {
border-color: transparent; border-color: transparent;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
transform: translateY(-5px); transform: translateY(-5px);
} }
\ No newline at end of file
@media only screen and (max-width: 760px) {
ol li {
font-size: small;
padding: 0.2rem;
min-width: 5rem;
}
}
\ No newline at end of file
.container { .container {
font-family: Verdana, Geneva, Tahoma, sans-serif; font-family: Verdana, Geneva, Tahoma, sans-serif;
} }
header { header {
...@@ -12,36 +12,36 @@ h2 { ...@@ -12,36 +12,36 @@ h2 {
} }
.btn-primary { .btn-primary {
width: max-content; width: max-content;
display: inline-block; display: inline-block;
background-color: #7448F6; background-color: #7448F6;
padding: 0.75rem 1.2rem; padding: 0.75rem 1.2rem;
border-radius: 0.4rem; border-radius: 0.4rem;
cursor: pointer; cursor: pointer;
border: 1px solid #7448F6; border: 1px solid #7448F6;
transition: all 400ms ease; transition: all 400ms ease;
color: white; color: white;
} }
.btn-primary:hover, .btn-secondary:hover { .btn-primary:hover, .btn-secondary:hover {
background-color: #E9E3FE; background-color: #E9E3FE;
color: #7448F6; color: #7448F6;
border-color: transparent; border-color: transparent;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
transform: translateY(-5px); transform: translateY(-5px);
} }
.btn-secondary { .btn-secondary {
width: max-content; width: max-content;
display: inline-block; display: inline-block;
padding: 0.75rem 1.2rem; padding: 0.75rem 1.2rem;
border-radius: 0.4rem; border-radius: 0.4rem;
cursor: pointer; cursor: pointer;
border: 1px solid #7448F6; border: 1px solid #7448F6;
background-color: transparent; background-color: transparent;
transition: all 400ms ease; transition: all 400ms ease;
color: #7448F6; color: #7448F6;
} }
a { a {
text-decoration: none; text-decoration: none;
...@@ -54,9 +54,10 @@ a:visited { ...@@ -54,9 +54,10 @@ a:visited {
.links { .links {
display: flex; display: flex;
margin-top: 5rem; margin-top: 5rem;
margin-right: auto; align-items: center;
margin-left: auto; justify-content: center;
gap: 1rem; gap: 1rem;
width: 100%;
} }
@media only screen and (max-width: 1200px) { @media only screen and (max-width: 1200px) {
......
...@@ -10,6 +10,8 @@ h2 { ...@@ -10,6 +10,8 @@ h2 {
display: block; display: block;
text-align: center; text-align: center;
color: black; color: black;
text-decoration: underline #b39aff 4px;
text-underline-offset: 5px;
} }
.author-details { .author-details {
......
...@@ -2,6 +2,9 @@ body { ...@@ -2,6 +2,9 @@ body {
display: grid; display: grid;
grid-template-columns: 1.5fr 2fr; grid-template-columns: 1.5fr 2fr;
margin-top: 10%; margin-top: 10%;
background-image: url('../assets/home.png');
background-repeat: no-repeat;
background-size: cover;
} }
header { header {
...@@ -18,7 +21,7 @@ header { ...@@ -18,7 +21,7 @@ header {
} }
.highlight { .highlight {
background-color: yellow; background-color: #e1d7ff;
font-weight: bold; font-weight: bold;
} }
...@@ -34,5 +37,6 @@ header { ...@@ -34,5 +37,6 @@ header {
} }
body { body {
display: flex; display: flex;
background: none;
} }
} }
\ No newline at end of file
...@@ -10,7 +10,6 @@ h2 { ...@@ -10,7 +10,6 @@ h2 {
padding-left: 2.5rem; padding-left: 2.5rem;
padding-bottom: 1rem; padding-bottom: 1rem;
font-size: xx-large; font-size: xx-large;
border-bottom: 1px solid white;
} }
ol { ol {
......
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