diff --git a/Insta_Login_page/index.html b/Insta_Login_page/index.html new file mode 100644 index 0000000..51419d2 --- /dev/null +++ b/Insta_Login_page/index.html @@ -0,0 +1,52 @@ + + + + + + + Instagram Login + + + + + +
+
+
+ +
+
+ + + +
+ + OR + +
+ +
Forget Password?
+
+
+ +
+ + diff --git a/Insta_Login_page/instagramlogo.png b/Insta_Login_page/instagramlogo.png new file mode 100644 index 0000000..f8b3c4f Binary files /dev/null and b/Insta_Login_page/instagramlogo.png differ diff --git a/Insta_Login_page/style.css b/Insta_Login_page/style.css new file mode 100644 index 0000000..702d028 --- /dev/null +++ b/Insta_Login_page/style.css @@ -0,0 +1,98 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: "Roboto", sans-serif; +} + +.container { + width: 100%; + height: 100vh; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} +.center { + width: 350px; + border: 1px solid rgb(195, 195, 195); + border-radius: 3px; +} +.center .header { + display: flex; + justify-content: center; + margin-top: 20px; + margin-bottom: 17px; +} + +.center .inputElement { + display: flex; + flex-direction: column; + margin: 0px 37px 0px 37px; +} + +.inputElement .inputText { + padding: 8px; + font-size: 12px; + margin-top: 10px; +} +.inputText:focus { + outline: gray; +} + +.inputButton { + background-color: rgb(5, 117, 223); + color: white; + font-size: 12px; + padding: 8px; + border-radius: 3px; + margin-bottom: 12px; + margin-top: 12px; + border: none; +} +.line { + display: flex; + margin-top: 6px; +} +.arrow { + background-color: gray; + height: 1px; + width: 140px; +} +.content { + color: gray; + margin-top: -7px; + margin-left: 4px; + margin-right: 4px; +} +.social__icon { + margin: auto; + margin-top: 10px; + margin-bottom: 15px; +} +.fab { + padding: 5px; + color: rgb(0, 55, 107); +} +.social__icon span { + color: rgb(0, 55, 107); + font-family: sans-serif; + font-size: 14px; + font-weight: 500; +} +.forgetPassword { + margin: auto; + color: rgb(101, 178, 250); + margin-bottom: 25px; +} +.footer { + margin-top: 30px; + border: 1px solid rgb(195, 195, 195); + padding: 20px; + width: 350px; + text-align: center; +} +.footer span { + color: rgb(0, 66, 128); + font-weight: 400; +}