diff --git a/image.png b/image.png new file mode 100644 index 0000000..606f3be Binary files /dev/null and b/image.png differ diff --git a/index.css b/index.css new file mode 100644 index 0000000..9b24ed4 --- /dev/null +++ b/index.css @@ -0,0 +1,106 @@ +.main{ + background-image: url("./image.png"); + background-size: cover; + display: flex; + align-items: center; + width: 100%; + height: 100vh; +} +#border{ + border: 1px solid ; + width: 480px; + margin-bottom: 20px; +} +.intro{ + color: #004362; + width: 30%; + margin-right: 100px; + margin-left: 300px; +} +#content{ + font-weight: 300; + width: 400px; +} +#Welcome{ + font-size: 2em; + font-weight: 500; + width: 500px; + margin-bottom: 20px; +} +.SignArea{ + display: flex; + flex-direction: column; + align-items: center; + + height: 50vh; + width: 60vh; + + background: #FEFEFE; + border: 1px solid #FEFEFE; + border-radius: 8px; +} +#SignUp{ + font-size: 2em; + display: flex; + justify-content: center; + color: #474747; +} + + +.item{ + width: 80%; +} +#SignIntro{ + display: flex; + justify-content: center; + color: #C2C2C2; +} +.box{ + width: 100%; + height:40px; + border: 1px solid #F0F0F0; + border-radius: 8px; +} +.signForm{ + height: 25%; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} +.Name, +.Phone-number, +.Dulux-Account{ + height: 15%; + margin-bottom: 10px; + color: #AAAAAA; +} +.signButton{ + margin-top: 10px; + display: flex; + justify-content: center; + height: 40px; +} +#SignUpButton{ + border: 1px solid #F0F0F0; + border-radius: 8px; + color: #FEFEFE; + width: 100%; + height: 100%; + background-color: #007AB0; +} +.SignIn{ + height: 15%; + display: flex; + justify-content: center; + align-items: center; +} +#SignInSpan{ + color: #568AED; + margin-left: 5px; + cursor: pointer; +} +#SignInSpan:hover{ + text-decoration: underline; +} + diff --git a/index.html b/index.html new file mode 100644 index 0000000..caed19e --- /dev/null +++ b/index.html @@ -0,0 +1,36 @@ + + +
+ + + +