From 81122ddbecb9ae0049b697eff260f98b7ddff6a4 Mon Sep 17 00:00:00 2001 From: Nkyo Lio Date: Tue, 23 Jun 2020 14:36:10 -0400 Subject: [PATCH 1/4] I have added changes --- box-model1.html | 27 +++++++--- box-model2.html | 87 +++++++++++++++++++++++++++++++-- css/style.css | 68 ++++++++++++++++++++++++-- img/undraw_male_avatar_323b.svg | 1 + index.html | 15 ++++-- login_page.html | 23 +++++++++ 6 files changed, 201 insertions(+), 20 deletions(-) create mode 100644 img/undraw_male_avatar_323b.svg create mode 100644 login_page.html diff --git a/box-model1.html b/box-model1.html index 4dc0c72..b8452bd 100644 --- a/box-model1.html +++ b/box-model1.html @@ -4,7 +4,9 @@ - + + + @@ -32,12 +34,25 @@ - - - - The quickest of brown foxes. - + + + + +

Box Model Visual

+
+
+ Inner div +
+
diff --git a/box-model2.html b/box-model2.html index 4dc0c72..3c7b845 100644 --- a/box-model2.html +++ b/box-model2.html @@ -4,13 +4,14 @@ - + + + - @@ -32,10 +33,86 @@ - - - The quickest of brown foxes. + + + + +

Box Model Visual

+
+ +
+ Inner div 1 +
+ +
+ Inner div2 +
+
+ +
+
+ Inner div +
+ +
+ Inner div2 +
+
diff --git a/css/style.css b/css/style.css index d17d83a..82d804c 100644 --- a/css/style.css +++ b/css/style.css @@ -1,9 +1,67 @@ -body { - background-color: navy; +@import url('https://fonts.googleapis.com/css?family=Poppins:300,400,500,600&display=swap'); + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +.container { + top: 0; + bottom: 0; + margin: 10% auto; + width: 400px; + height: 600px; + position: relative; } +img { + position: absolute; + width: 200px; + height: 200px; + margin: -120px 50px 0 120px; +} + +.inputs { + background-color: rgb(187, 187, 187); + width: 450px; + height: 500px; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + border: 2px solid #63EFFF; + border-radius: 20px; + font-family: 'Poppins', sans-serif; +} -object { - height: 100vh; - width: 100vh; +input { + font-size: 35px; + font-size: 200; + margin: 20px 0; + padding: 5px; + border-radius: 200px; + border: 1px solid #63EFFF; } + +.btn { + padding: 5px 70px 7px 70px; + background-color: #63EFFF; + border: 1px solid black; + color: white; + font-family: 'Poppins', sans-serif; +} + +.btn:hover { + background-color:white; + border: 1px solid #63EFFF; + color: black; +} + +h1 { + margin-bottom: 10px; + font-size: 40px; + font-weight: 100; + color:white; + font-family: 'Poppins', sans-serif; +} \ No newline at end of file diff --git a/img/undraw_male_avatar_323b.svg b/img/undraw_male_avatar_323b.svg new file mode 100644 index 0000000..a05ed8c --- /dev/null +++ b/img/undraw_male_avatar_323b.svg @@ -0,0 +1 @@ +male_avatar \ No newline at end of file diff --git a/index.html b/index.html index 4dc0c72..d5bf0d9 100644 --- a/index.html +++ b/index.html @@ -4,7 +4,9 @@ - + + + @@ -32,11 +34,16 @@ - - - The quickest of brown foxes. + + +
+

Login Page

+ Box Model 1 +
Box Model 2 +
Login Page +
diff --git a/login_page.html b/login_page.html new file mode 100644 index 0000000..57a16d8 --- /dev/null +++ b/login_page.html @@ -0,0 +1,23 @@ + + + + + + Login Page + + + + +
+ Profile Picture +
+

User Login

+ + + +
+
+ + + + \ No newline at end of file From 47dab71dde3a75870a5702d0389d34aebce2fd36 Mon Sep 17 00:00:00 2001 From: Nkyo Lio Date: Tue, 23 Jun 2020 14:48:39 -0400 Subject: [PATCH 2/4] I have added changes --- css/style.css | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/css/style.css b/css/style.css index 82d804c..ef7aa5a 100644 --- a/css/style.css +++ b/css/style.css @@ -32,6 +32,7 @@ img { flex-direction: column; border: 2px solid #63EFFF; border-radius: 20px; + box-shadow: 20px 30px 30px rgb(187, 187, 187); font-family: 'Poppins', sans-serif; } @@ -47,7 +48,7 @@ input { .btn { padding: 5px 70px 7px 70px; background-color: #63EFFF; - border: 1px solid black; + border: 1px solid rgb(112, 112, 112); color: white; font-family: 'Poppins', sans-serif; } @@ -55,13 +56,13 @@ input { .btn:hover { background-color:white; border: 1px solid #63EFFF; - color: black; + color: rgb(112, 112, 112); } h1 { margin-bottom: 10px; font-size: 40px; font-weight: 100; - color:white; + color:#63EFFF; font-family: 'Poppins', sans-serif; } \ No newline at end of file From 62e69f334c73bcb8d98d3e9d5c319253fa435cad Mon Sep 17 00:00:00 2001 From: Nkyo Lio Date: Tue, 23 Jun 2020 15:44:31 -0400 Subject: [PATCH 3/4] I have added changes --- css/style.css | 1 + 1 file changed, 1 insertion(+) diff --git a/css/style.css b/css/style.css index ef7aa5a..b33ab0c 100644 --- a/css/style.css +++ b/css/style.css @@ -43,6 +43,7 @@ input { padding: 5px; border-radius: 200px; border: 1px solid #63EFFF; + text-align: center; } .btn { From b9b3ffe5d1e01f83e0facea8f0369ad3a845c0ef Mon Sep 17 00:00:00 2001 From: Nkyo Lio Date: Tue, 23 Jun 2020 23:51:24 -0400 Subject: [PATCH 4/4] I have added changes --- css/style.css | 7 ++++--- login_page.html | 6 +++--- 2 files changed, 7 insertions(+), 6 deletions(-) diff --git a/css/style.css b/css/style.css index b33ab0c..a8d8b8d 100644 --- a/css/style.css +++ b/css/style.css @@ -1,4 +1,4 @@ -@import url('https://fonts.googleapis.com/css?family=Poppins:300,400,500,600&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;1,100;1,200;1,300;1,400;1,500&display=swap'); * { margin: 0; @@ -37,7 +37,7 @@ img { } input { - font-size: 35px; + font-size: 30px; font-size: 200; margin: 20px 0; padding: 5px; @@ -47,9 +47,10 @@ input { } .btn { - padding: 5px 70px 7px 70px; + width: 75%; background-color: #63EFFF; border: 1px solid rgb(112, 112, 112); + padding: 0; color: white; font-family: 'Poppins', sans-serif; } diff --git a/login_page.html b/login_page.html index 57a16d8..5c01545 100644 --- a/login_page.html +++ b/login_page.html @@ -12,9 +12,9 @@ Profile Picture

User Login

- - - + + +