diff --git a/how-do-you-feel.html b/how-do-you-feel.html
new file mode 100644
index 0000000..47ec470
--- /dev/null
+++ b/how-do-you-feel.html
@@ -0,0 +1,103 @@
+
+
+
+
+
+
+ home page
+
+
+
+
+
+
+
+
+
+
+
+ - home
+ - login
+ - sign up
+ - lorem 5
+ - lorem 3
+
+
+
+
.png)
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/js/index.js b/js/index.js
new file mode 100644
index 0000000..98d48f0
--- /dev/null
+++ b/js/index.js
@@ -0,0 +1,13 @@
+let dropdown = document.getElementById("dropdown");
+let navdrop = document.getElementById("navdrop");
+
+function show() {
+ dropdown.classList.toggle("hide");
+}
+
+function hover() {
+ navdrop.style.borderStyle = solid;
+}
+
+navdrop.onclick = show;
+navdrop.hover = hover;
\ No newline at end of file
diff --git a/static/css/how-do-you-feel.css b/static/css/how-do-you-feel.css
new file mode 100644
index 0000000..e69de29
diff --git a/static/css/index.css b/static/css/index.css
new file mode 100644
index 0000000..cf72163
--- /dev/null
+++ b/static/css/index.css
@@ -0,0 +1,389 @@
+:root{
+ --navColor: #32a69f;
+ --background: white;
+ --link: #94D1CD;
+}
+
+body{
+ background-color: var(--background);
+ margin: auto;
+ padding: 0;
+ width: 100%;
+ border: solid silver;
+}
+
+
+
+/*******************************header section******************************************/
+
+#navbar {
+ background-color:var(--navColor);
+ height: 4rem;
+ display:flex;
+ align-items:center;
+ justify-content:center;
+}
+
+.navicon {
+ display:inline-flex;
+ width:32%;
+ align-items:center;
+ justify-content: center;
+}
+
+#navdiv {
+ flex-direction: column;
+}
+
+#navdiv ul {
+ list-style-type: none;
+ position: absolute;
+ top: 3rem;
+ left: 5.5%;
+ z-index: 5;
+ width:15%;
+ background-color:white;
+ text-align: center;
+ padding: 0%;
+ border-radius: 3%;
+ -webkit-border-radius: 3%;
+ -moz-border-radius: 3%;
+ -ms-border-radius: 3%;
+ -o-border-radius: 3%;
+}
+
+#navdiv ul li {
+ font-size: 1.2rem;
+ color:white;
+ background-color: var(--navColor);
+ width:100%;
+ margin-bottom: 0.2rem;
+ margin-left: 0%;
+ padding: 0.3rem 0rem;
+ border-radius:5%;
+ -webkit-border-radius:5%;
+ -moz-border-radius:5%;
+ -ms-border-radius:5%;
+ -o-border-radius:5%;
+}
+
+#logo {
+ width:30%;
+}
+
+#leftnav {
+ justify-content: flex-start;
+}
+
+.leftnav {
+ width: 7%;
+ margin-left: 18%;
+}
+
+.leftnav img {
+ width:100%;
+}
+
+#search {
+ margin-left: 20%;
+}
+
+#rightnav {
+ justify-content: flex-end;
+}
+
+#rightnav button {
+ width: 25%;
+ margin-right: 10%;
+ color:white;
+ background: none;
+ border: solid 1px white;
+ border-radius: 15%;
+ -webkit-border-radius: 15%;
+ -moz-border-radius: 15%;
+ -ms-border-radius: 15%;
+ -o-border-radius: 15%;
+}
+
+#rightnav button h4 {
+ margin: 6% 0%;
+}
+
+/******************************************************************************************/
+
+
+/*****************************************main section*************************************/
+
+#backgroundcover {
+ width: 100%;
+ position:relative;
+}
+
+#imgdiv {
+ width: 100%;
+}
+
+#imgdiv img {
+ width: 100%;
+}
+
+#fade {
+ position: absolute;
+ top: 0%;
+ background-color:black;
+ width: 100%;
+ opacity: 70%;
+}
+
+#fade img {
+ width: 100%;
+}
+
+#writeup {
+ position: absolute;
+ top: 25%;
+ left: 8%;
+ color: white;
+ font-size: larger;
+ line-height: 2.5rem;
+ font-family: Georgia, 'Times New Roman', Times, serif;
+}
+
+#writeup h5 {
+ line-height: 2rem;
+}
+
+#howyoufeel {
+ position: absolute;
+ top: 60%;
+ left: 8%;
+ width:20%;
+ box-shadow: burlywood 0.1rem 0.1rem;
+}
+
+#howyoufeel button {
+ width: 100%;
+ padding: 1rem 0rem;
+ background-color: var(--navColor);
+ color: white;
+ font-weight: 700;
+ font-size: 1.5rem;
+ border-radius: 3%;
+ -webkit-border-radius: 3%;
+ -moz-border-radius: 3%;
+ -ms-border-radius: 3%;
+ -o-border-radius: 3%;
+}
+
+#techaidwriteup {
+ text-align: center;
+ padding-bottom: 1.5%;
+}
+
+#techaidwriteup h2 {
+ text-align:center;
+ color: var(--navColor);
+}
+
+#benefits {
+ background-color: var(--navColor);
+ color: white;
+ padding-top: 2rem;
+}
+
+#benefitsheader {
+ text-align: center;
+ margin-bottom:3rem;
+}
+
+#fourdivs {
+ width: 100%;
+ padding: 0% 0% 2% 0%;
+}
+
+.flex1 {
+ display: inline-flex;
+ flex-direction: column;
+ width: 20%;
+ margin-left: 4%;
+}
+
+.flex1img {
+ display: block;
+ width: 45%;
+ margin: auto;
+}
+
+.flex1writeup {
+ text-align: center;
+}
+
+.demacate {
+ background-color: var(--link);
+}
+
+#consultants {
+ background-color:var(--navColor);
+}
+
+#consultantintro {
+ text-align: center;
+ color: var(--navColor);
+ background-color: white;
+ padding-bottom: 0.1rem;
+}
+
+#fourconsultants {
+ width:100%;
+ margin:auto;
+}
+
+.consultantflex {
+ display: inline-flex;
+ width: 20%;
+ margin-left: 4%;
+ padding: 5% 0%;
+}
+
+.consultantflex img {
+ width:100%;
+}
+
+#consultantcomment {
+ text-align: center;
+}
+
+#therapy {
+ width:100%;
+}
+
+#therapycontent {
+ width:100%;
+ margin:auto;
+}
+
+.therapycontent {
+ text-align: center;
+ color: var(--navColor);
+ display:inline-flex;
+ width: 44%;
+ flex-direction: column;
+ margin-left: 4%;
+}
+
+.therapycontent img {
+ display:block;
+ width:100%;
+}
+
+.therapywriteup {
+ color:black;
+}
+
+#contactsection1 {
+ width: 30%;
+ margin: auto;
+ margin-top: 3%;
+ box-shadow: 0.2rem 0.2rem grey;
+ text-align: center;
+ border: 1px silver solid;
+ border-radius:3%;
+ -webkit-border-radius:3%;
+ -moz-border-radius:3%;
+ -ms-border-radius:3%;
+ -o-border-radius:3%;
+}
+
+#contactsection p {
+ text-align: center;
+}
+
+#contactus {
+ margin:auto;
+ width: 10%;
+ align-content: center;
+}
+
+#contactus button {
+ width: 100%;
+ height:80%;
+ background-color: var(--navColor);
+ color:white;
+ border-radius: 0.5rem;
+ -webkit-border-radius: 0.5rem;
+ -moz-border-radius: 0.5rem;
+ -ms-border-radius: 0.5rem;
+ -o-border-radius: 0.5rem;
+}
+
+/***********************************************************************************************/
+
+
+/**********************************footer section***********************************************/
+
+#footcontainer {
+ background-color:var(--navColor);
+ color:white;
+ margin-top: 4%;
+ padding: 2%;
+}
+
+#footcontainer:first-child * {
+ margin-bottom: 1.5rem;
+}
+
+.footflex {
+ display:inline-flex;
+ flex-direction: column;
+ width: 20%;
+ margin-left: 4%;
+ justify-content: center;
+ align-items: center;
+}
+
+.footflex ul {
+ list-style-type: none;
+ display: block;
+ margin: auto;
+}
+
+.footflex li {
+ margin-bottom: 1.5rem;
+}
+
+.footflex p {
+ text-align: center;
+ margin-top: 0%;
+}
+
+
+#footlogo {
+ width: 50%;
+ display:block;
+ margin: auto;
+}
+
+.stores {
+ width:50%;
+ display:block;
+ margin:auto;
+}
+
+#copyright {
+ text-align: center;
+}
+
+#end {
+ background-color:var(--navColor);
+}
+
+/********************************************************************************/
+
+
+/*******************************assisting classes********************************/
+
+.hide {
+ visibility:hidden;
+}
+
+/********************************************************************************/
\ No newline at end of file
diff --git a/static/css/login.css b/static/css/login.css
index 55b3922..1d78303 100644
--- a/static/css/login.css
+++ b/static/css/login.css
@@ -16,7 +16,7 @@ form {
padding: 1.4em;
margin:auto;
width: 500px;
- height: 680px;
+ height: 650px;
border-radius: 8px;
font-size: 1rem;
background-color: rgb(255, 255, 255);
@@ -37,17 +37,17 @@ form input {
height: 2.4rem;
padding: 10px 15px;
margin:8px 0;
- display: block;
+ display: inline-block;
}
/* adding image to the input boxes */
#login-email-input{
- background:url(images/Luffy-Anime-Wallpaper.jpg);
+ background:url(../images/email-logo.PNG);
background-position: right;
background-repeat: no-repeat;
background-size: 1.8rem;
}
#login-password-input{
- background:url(images/Luffy-Anime-Wallpaper.jpg);
+ background:url(../images/hide-pwd-logo.PNG);
background-position: right;
background-repeat: no-repeat;
background-size: 1.8rem;
@@ -91,13 +91,27 @@ form input {
#bottom-logos, .or, #connect-with-font{
font-weight: bold;
position: relative;
- bottom: -6.5rem;
+ bottom: -4rem;
+ text-align: center;
}
#login-submit, #dont-have-id{
position:relative;
- bottom: -5rem;
+ bottom: -3rem;
}
#remember-me-p{
position: relative;
bottom: -2rem;
+}
+#dont-have-id{
+ text-align: right;
+}
+#footer-img1, #footer-img2, #footer-img3{
+ border-radius: 50%;
+ width: 1.3rem;
+}
+#bottom-logos{
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ column-gap: 0.8rem;
}
\ No newline at end of file
diff --git a/static/css/signin.css b/static/css/signin.css
index 24f3614..0517e57 100644
--- a/static/css/signin.css
+++ b/static/css/signin.css
@@ -2,17 +2,17 @@
box-sizing: border-box;
}
- body{
+body{
background-color: powderblue;
font-family: 'Roboto', sans-serif;
}
/* styling the fonts */
- h4{
+h4{
font-weight: lighter;
font-size: 0.8rem;
}
/* styling the form */
- form {
+form {
padding: 1.4em;
margin:auto;
width: 500px;
@@ -22,16 +22,16 @@
background-color: rgb(255, 255, 255);
box-shadow: 5px 5px 10px rgb(0,0,0,0,3);
}
- form label {
+form label {
font-size: 1rem;
font-weight: bold;
}
/* styling the input include submit button */
- form input {
+form input {
padding: 0;
border-radius: 0.3em;
}
- #signin-uname, #signin-email, #signin-password1, #signin-password2, #signin-submit{
+#signin-uname, #signin-email, #signin-password1, #signin-password2, #signin-submit{
width:100%;
border-width: thin;
height: 2.4rem;
@@ -44,11 +44,22 @@
font-weight: bold;
position: relative;
bottom: -2.5rem;
+ text-align: center;
}
- #signin-submit, #already-have-id{
+#signin-submit, #already-have-id{
position:relative;
bottom: -1rem;
}
+#footer-img1, #footer-img2, #footer-img3{
+ border-radius: 50%;
+ width: 1.3rem;
+ }
+#bottom-logos{
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ column-gap: 0.8rem;
+ }
/* styling the color of span */
.signin-atag{
text-decoration: none;
@@ -59,13 +70,16 @@
font-size: 0.8rem;
font-weight: lighter;
}
+ #already-have-id{
+ text-align: right;
+ }
/* styling the hr tag */
.content {
margin: 10px auto;
width: 200px;
}
- .or {
+.or {
text-align: center;
font-size: 1rem;
font-weight: bold;
@@ -81,30 +95,30 @@
color:white;
background-color: rgba(50,166,159,255);
}
- #signin-submit:hover{
+#signin-submit:hover{
background-color: #29837d;
}
/* adding image to the input boxes */
#signin-uname{
- background:url(images/Luffy-Anime-Wallpaper.jpg);
+ background:url(../images/user-name-logo.PNG);
background-position: right;
background-repeat: no-repeat;
background-size: 1.8rem;
}
- #signin-email{
- background:url(images/Luffy-Anime-Wallpaper.jpg);
+#signin-email{
+ background:url(../images/email-logo.PNG);
background-position: right;
background-repeat: no-repeat;
background-size: 1.8rem;
}
- #signin-password1{
- background:url(images/Luffy-Anime-Wallpaper.jpg);
+#signin-password1{
+ background:url(../images/hide-pwd-logo.PNG);
background-position: right;
background-repeat: no-repeat;
background-size: 1.8rem;
}
- #signin-password1{
- background:url(images/Luffy-Anime-Wallpaper.jpg);
+#signin-password2{
+ background:url(../images/hide-pwd-logo.PNG);
background-position: right;
background-repeat: no-repeat;
background-size: 1.8rem;
diff --git a/static/images/apple-logo.PNG b/static/images/apple-logo.PNG
new file mode 100644
index 0000000..d7aa38f
Binary files /dev/null and b/static/images/apple-logo.PNG differ
diff --git a/static/images/email-logo.PNG b/static/images/email-logo.PNG
new file mode 100644
index 0000000..2534f45
Binary files /dev/null and b/static/images/email-logo.PNG differ
diff --git a/static/images/facebook-logo.PNG b/static/images/facebook-logo.PNG
new file mode 100644
index 0000000..0fc4277
Binary files /dev/null and b/static/images/facebook-logo.PNG differ
diff --git a/static/images/google-logo.PNG b/static/images/google-logo.PNG
new file mode 100644
index 0000000..5d05546
Binary files /dev/null and b/static/images/google-logo.PNG differ
diff --git a/static/images/hide-pwd-logo.PNG b/static/images/hide-pwd-logo.PNG
new file mode 100644
index 0000000..134334a
Binary files /dev/null and b/static/images/hide-pwd-logo.PNG differ
diff --git a/static/images/user-name-logo.PNG b/static/images/user-name-logo.PNG
new file mode 100644
index 0000000..1c6a7ea
Binary files /dev/null and b/static/images/user-name-logo.PNG differ
diff --git a/templates/login.html b/templates/login.html
index 01d4e06..867540e 100644
--- a/templates/login.html
+++ b/templates/login.html
@@ -1,14 +1,13 @@
-{% load static %}
-
-
-
-
+
+
+
+
Document
@@ -25,7 +24,7 @@ Lorem ipsum dolor, sit amet consectetur adipisicing elit.
- Forgot Password?
+ Forgot Password?
@@ -33,15 +32,15 @@
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
- Dont have an account? Sign-in
+ Dont have an account? Sign-in
- Connect with
-
- 
-
-
+
Connect with
+
+
+
+
diff --git a/templates/signin.html b/templates/signin.html
index b2a7dd8..89042e0 100644
--- a/templates/signin.html
+++ b/templates/signin.html
@@ -36,15 +36,15 @@ Create An Account
- Already have an account? Log-in
+ Already have an account? Log-in
- Connect with
-
- 
-
-
+
Connect with
+
+
+
+
