diff --git a/index.html b/index.html
index 88c67fa..32e029c 100644
--- a/index.html
+++ b/index.html
@@ -42,7 +42,7 @@
- Login
+ Login
@@ -95,9 +95,27 @@
-
+
+
diff --git a/login.html b/login.html
new file mode 100644
index 0000000..1963998
--- /dev/null
+++ b/login.html
@@ -0,0 +1,77 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Render Line
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/product.html b/product.html
index e25557f..cfca093 100644
--- a/product.html
+++ b/product.html
@@ -42,7 +42,7 @@
- Login
+ Login
@@ -62,7 +62,7 @@
diff --git a/source/styles/style.css b/source/styles/style.css
index 8bcde73..0450765 100644
--- a/source/styles/style.css
+++ b/source/styles/style.css
@@ -54,6 +54,24 @@ body {
color: var(--text-color);
}
+/* Navigation for mabile devices */
+@media screen and (max-width: 1023px) {
+ .nav-menu {
+ position: fixed;
+ top: 0;
+ right: -100%;
+ background-color: var(--body-color);
+ width: 80%;
+ height: 100%;
+ box-shadow: 0 0 16px hsla(268, 58%, 4%, .2);
+ padding: 6rem 3rem;
+ display: flex;
+ flex-direction: column;
+ row-gap: 2.5rem;
+ transition: right .4s;
+ }
+}
+
ul {
list-style: none;
}
@@ -131,24 +149,6 @@ img {
/* margin: 1rem; */
}
-/* Navigation for mabile devices */
-@media screen and (max-width: 1023px) {
- .nav-menu {
- position: fixed;
- top: 0;
- right: -100%;
- background-color: var(--body-color);
- width: 80%;
- height: 100%;
- box-shadow: 0 0 16px hsla(268, 58%, 4%, .2);
- padding: 6rem 3rem;
- display: flex;
- flex-direction: column;
- row-gap: 2.5rem;
- transition: right .4s;
- }
-}
-
.nav-list {
display: flex;
flex-direction: column;
@@ -283,6 +283,38 @@ img {
width: 256px;
} */
+.footer {
+ display: block;
+ margin-inline: 3rem;
+ border-top: .2px solid var(--text-color);
+}
+
+
+.footer-copyright {
+ display: flex;
+ justify-content: left;
+ width: 100%;
+ padding-left: 1.5rem;
+ margin-top: 1rem;
+ font-weight: var(--font-semi-bold);
+}
+
+.footer-list {
+ display: flex;
+ align-items: center;
+ column-gap: 4.5rem;
+ padding: 1.5rem;
+ color: var(--title-color);
+ font-size: var(--small-font-size);
+ font-weight: var(--font-medium);
+}
+
+
+
+
+
+
+
/* For small devices */
@media screen and (max-width: 300px) {
@@ -293,12 +325,81 @@ img {
.home-title {
font-size: 1.75rem;
}
+
+ .footer-list {
+ column-gap: .5rem;
+ }
}
+/* Samsung Z Fold 5 */
+@media screen and (min-width: 344px) and (min-height: 882px) {
+ .home-container {
+ padding-top: 10rem;
+ }
+
+ .home-title {
+ font-size: 1.75rem;
+ }
+
+ .footer {
+ margin-top: 8rem;
+ margin-inline: 1rem;
+ }
+
+ .footer-list {
+ column-gap: 1rem;
+ }
+}
+
+/* Samsung S8+ */
+@media screen and (min-width: 360px) and (min-height: 740px) {
+ .home-container {
+ padding-top: 10rem;
+ }
+
+ .home-title {
+ font-size: 1.75rem;
+ }
+
+ .footer {
+ margin-top: 8rem;
+ margin-inline: 1rem;
+ }
+
+ .footer-list {
+ column-gap: 1rem;
+ }
+}
+
+/* iPhone SE */
+@media screen and (min-width: 375px) and (min-height: 667px) {
+ .home-container {
+ padding-top: 8rem;
+ }
+
+ .home-title {
+ font-size: 1.75rem;
+ }
+
+ .footer {
+ margin-top: 15rem;
+ margin-inline: 1rem;
+ }
+
+ .footer-list {
+ column-gap: 1rem;
+ }
+}
+
+
@media screen and (min-width: 376px) and (min-height: 800px) {
.home-container {
padding-top: 10rem;
}
+
+ .footer-list {
+ column-gap: 1rem;
+ }
}
@@ -337,7 +438,6 @@ img {
.home-triangle,
.home-r,
.home-l {
- /* width: 250px; */
margin-left: 4rem;
}
}
@@ -384,12 +484,12 @@ img {
}
.home-title {
- letter-spacing: -3px;
+ /* letter-spacing: -3px; */
margin-bottom: 1rem;
}
.home-title img {
- width: 200px;
+ width: 100px;
right: -.5rem;
}