diff --git a/.vscode/settings.json b/.vscode/settings.json
index 155422b..50f3f25 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,3 +1,19 @@
{
- "liveServer.settings.port": 5503
+ "liveServer.settings.port": 5503,
+ "cSpell.words": [
+ "assests",
+ "authorsname",
+ "backspeed",
+ "Blogzen",
+ "boxauthor",
+ "boxauthorsname",
+ "boxdiv",
+ "boxtext",
+ "darktheme",
+ "datestyle",
+ "namestyle",
+ "navs",
+ "signup",
+ "themechangebtn"
+ ]
}
\ No newline at end of file
diff --git a/css/navbar.css b/css/navbar.css
index b8d4e8e..0db75d5 100644
--- a/css/navbar.css
+++ b/css/navbar.css
@@ -126,11 +126,6 @@ body{
color: #2a95f6;
}
#loginButton:hover{
- border: 1px solid #f6f8f9;
- background-color:#208FF4 ;
- color: white;
-}
-#signup:hover{
border: 1px solid #208FF4;
background-color: transparent;
color: #2a95f6;
diff --git a/css/sec3.css b/css/sec3.css
index 7fa223f..e5d9f4b 100644
--- a/css/sec3.css
+++ b/css/sec3.css
@@ -143,9 +143,10 @@
}
@media(max-width: 620px) {
- #signup {
+
+ /* #signup {
display: none;
- }
+ } */
#loginButton {
display: none;
diff --git a/index.html b/index.html
index c0b85ce..e10cbee 100644
--- a/index.html
+++ b/index.html
@@ -43,9 +43,8 @@
@@ -207,7 +206,7 @@ Blogzen 24/7
-
smart_toy
-
Welcome !
+ Welcome!
-
diff --git a/login.html b/login.html
index 8ad76ab..de085a0 100644
--- a/login.html
+++ b/login.html
@@ -8,7 +8,6 @@
-
-
-
-
+
+
+
Login
@@ -52,49 +51,47 @@
-
-
-
Login Here
-
-
-
-
-
-
LOGIN
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
LOGIN
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Don't have account?SIGNUP
+
-
-
- OR
-
-
-
-
-
-
-
+
diff --git a/login1.css b/login1.css
index 7fc164c..ac92227 100644
--- a/login1.css
+++ b/login1.css
@@ -1,8 +1,8 @@
-@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap');
+@import url("https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap");
body {
margin: 0;
- font-family: 'Noto Sans', sans-serif;
+ font-family: "Noto Sans", sans-serif;
}
body * {
@@ -30,7 +30,7 @@ body * {
flex-direction: column;
}
-.left-login>h1 {
+.left-login > h1 {
color: white;
font-size: 2.5vw;
}
@@ -59,7 +59,7 @@ body * {
background-color: white;
}
-.card-login>h1 {
+.card-login > h1 {
/* color: #8A2525; */
color: rgb(84, 50, 208);
font-weight: 800;
@@ -82,12 +82,12 @@ body * {
left: 84.9%;
}
-.textfield>input {
+.textfield > input {
width: 100%;
border: none;
border-radius: 10px;
padding: 15px;
- background: #E6E6FA;
+ background: #e6e6fa;
color: #030707de;
font-size: 12pt;
box-shadow: 0px 3px 10px #00000056;
@@ -95,13 +95,13 @@ body * {
box-sizing: border-box;
}
-.textfield>label {
+.textfield > label {
color: black;
margin-bottom: 10px;
font-weight: bold;
}
-.textfield>input::placeholder {
+.textfield > input::placeholder {
color: #000000;
}
@@ -124,7 +124,7 @@ body * {
.btn-login:hover {
background: rgba(111, 50, 208, 0.9);
}
-
+/*
#google-login {
width: 100%;
padding: 16px 0;
@@ -142,8 +142,9 @@ body * {
}
#google-login:hover {
- background: rgba(111, 50, 208, 0.9);
+ background: hsla(263, 63%, 51%, 0.9);
}
+*/
.close-btn {
background-color: transparent;
@@ -156,8 +157,15 @@ body * {
color: white;
}
-
-
+h3 {
+ color: hsla(263, 63%, 51%, 0.9);
+ font-size: 12px;
+ font-weight: 800;
+}
+h3 .a {
+ color: rgb(0, 0, 0);
+ font-weight: 800;
+}
@media only screen and (max-width: 950px) {
.card-login {
@@ -170,7 +178,7 @@ body * {
flex-direction: column;
}
- .left-login>h1 {
+ .left-login > h1 {
display: none;
}
diff --git a/signup.css b/signup.css
new file mode 100644
index 0000000..c337d4d
--- /dev/null
+++ b/signup.css
@@ -0,0 +1,203 @@
+@import url("https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap");
+
+body {
+ margin: 0;
+ font-family: "Noto Sans", sans-serif;
+}
+
+body * {
+ box-sizing: border-box;
+}
+
+.main-sign {
+ width: 100vw;
+ height: 140vh;
+ /* background: #8A2525; */
+ background: rgb(84, 50, 208);
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ padding-top: 100px;
+ padding-bottom: 50px;
+}
+
+.left-sign {
+ width: 50vw;
+ height: 100vh;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-direction: column;
+}
+
+.left-sign > h1 {
+ color: white;
+ font-size: 2.5vw;
+}
+
+.left-sign-image {
+ width: 35vw;
+}
+
+.right-sign {
+ width: 60vw;
+ height: 0vh;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.card-sign {
+ width: 70%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-direction: column;
+ padding: 30px 35px;
+ border-radius: 20px;
+ box-shadow: 0px 10px 50px #000000a4;
+ background-color: white;
+}
+
+.card-sign > h1 {
+ /* color: #8A2525; */
+ color: rgb(84, 50, 208);
+ font-weight: 800;
+ margin: 0;
+}
+
+.textfield {
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ justify-content: center;
+ margin: 10px 0px;
+ position: relative;
+}
+
+.icon {
+ position: absolute;
+ top: calc(55%);
+ left: 84.9%;
+}
+
+.textfield > input {
+ width: 100%;
+ border: none;
+ border-radius: 10px;
+ padding: 15px;
+ background: #e6e6fa;
+ color: #030707de;
+ font-size: 12pt;
+ box-shadow: 0px 3px 10px #00000056;
+ outline: none;
+ box-sizing: border-box;
+}
+
+.textfield > label {
+ color: black;
+ margin-bottom: 10px;
+ font-weight: bold;
+}
+
+.textfield > input::placeholder {
+ color: #000000;
+}
+
+.btn-signup {
+ width: 100%;
+ padding: 16px 0;
+ margin: 25px;
+ border: none;
+ border-radius: 8px;
+ outline: none;
+ text-transform: uppercase;
+ font-weight: 800;
+ letter-spacing: 3px;
+ color: white;
+ background: rgb(84, 50, 208);
+ cursor: pointer;
+ box-shadow: 0px 10px 40px -12px #00ff8052;
+}
+
+.btn-signup:hover {
+ background: rgba(111, 50, 208, 0.9);
+}
+
+/*
+#google-login {
+ width: 100%;
+ padding: 16px 0;
+ margin: 25px;
+ border: none;
+ border-radius: 8px;
+ outline: none;
+ text-transform: uppercase;
+ font-weight: 800;
+ letter-spacing: 3px;
+ color: white;
+ background: rgb(84, 50, 208);
+ cursor: pointer;
+ box-shadow: 0px 10px 40px -12px #00ff8052;
+}
+
+#google-login:hover {
+ background: hsla(263, 63%, 51%, 0.9);
+}
+*/
+
+.close-btn {
+ background-color: transparent;
+ border: none;
+ font-size: 36px;
+ position: absolute;
+ top: 10px;
+ right: 10px;
+ cursor: pointer;
+ color: white;
+}
+
+h3 {
+ color: hsla(263, 63%, 51%, 0.9);
+ font-size: 12px;
+ font-weight: 800;
+}
+h3 .a {
+ color: rgb(0, 0, 0);
+ font-weight: 800;
+}
+
+@media only screen and (max-width: 950px) {
+ .card-sign {
+ width: 85%;
+ }
+}
+
+@media only screen and (max-width: 600px) {
+ .main-sign {
+ flex-direction: column;
+ }
+
+ .left-sign > h1 {
+ display: none;
+ }
+
+ .left-sign {
+ width: 100%;
+ height: auto;
+ }
+
+ .right-sign {
+ width: 100%;
+ height: auto;
+ }
+
+ .left-sign-image {
+ width: 40vh;
+ }
+
+ .card-sign {
+ width: 90%;
+ }
+}
diff --git a/signup.html b/signup.html
new file mode 100644
index 0000000..775e540
--- /dev/null
+++ b/signup.html
@@ -0,0 +1,131 @@
+
+
+