Scribd
Upload
4 views

Css_ Task 5

Uploaded by

Ravinder Verma
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
4 views

Css_ Task 5

Uploaded by

Ravinder Verma
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

Upskill Mafia

Task 5 : Develop Laundry Mart login Page using flex

Develop a user interface for a login page that aims to provide a visually appealing
and user-friendly experience to individuals attempting to log in to a system.

Development Description : A simple login page with a split layout. On one side, there
is an illustration, and on the other side, there is a form for users to input their email
and password for logging in. The goal is to create an engaging design that
encourages users to interact with the login process.

Web page breakdown :

1. Container Setup:
●​ Create an HTML file with the necessary tags.
●​ Ensure the content is centred on the page.
●​ Container height should be 100vh.

2. Left Section:
Mail : [email protected] Website : https://www.upskillmafia.com/mern/
Upskill Mafia

●​ Add an image on the left side centre.(You can use any image from the
internet).

3. Form Section:
●​ Set up a section for the login form inside the container.
●​ Add padding and use flexbox for a neat layout.

4. Form Heading and Description:


●​ Include a heading element for a friendly greeting.

​ 5. Email and Password Inputs:


●​ Place input fields for email and password.
●​ Specify the type and add placeholder text for guidance.
●​ Style the inputs to look clean and organised.

6. Login Button:
●​ Add a button element labelled "Login".
●​ Style the button to make it stand out and look appealing.

By completing these tasks, the goal is to Learn Basic CSS properties. We will keep
learning more css properties in further assignments. ( Don't use margin padding to
make it in the centre. Use FlexBox.)

Submission : (Submission Link)


Submission instructions and guidelines.
●​ Deploy your project on Netlify and submit the deployed link in the given
submission form.
●​ Again the page should be properly structured. It should not go in scroll.
●​ Don't Use bootstrap, Implement only using CSS
●​ Netlify Project Deployment Link : (Add here)
●​ Submission Link : https://upskillmafia.com/mern/dashboard/tasks
●​ If you dont know how to deploy watch this:- https://youtu.be/Ii2Y4i4_i-o

Note : You can take help from Internet or You can also connect with upskill
Mafia Mentors

Mail : [email protected] Website : https://www.upskillmafia.com/mern/

You might also like