Started doing adaptive design (Login Page)

src/App.scss

@@ -1,3 +1,39 @@
+@keyframes zoom {
+  from {
+    transform: scale(0.5);
+  }
+  to {
+    transform: scale(1);
+  }
+}
+@-webkit-keyframes scroll {
+  0% {
+    -webkit-transform: translate(0, 0);
+    transform: translate(0, 0);
+  }
+  100% {
+    -webkit-transform: translate(-100%, 0);
+    transform: translate(-100%, 0);
+  }
+}
+@-moz-keyframes scroll {
+  0% {
+    -moz-transform: translate(0, 0);
+    transform: translate(0, 0);
+  }
+  100% {
+    -moz-transform: translate(-100%, 0);
+    transform: translate(-100%, 0);
+  }
+}
+@keyframes scroll {
+  0% {
+    transform: translate(0, 0);
+  }
+  100% {
+    transform: translate(-100%, 0);
+  }
+}
 .App {
   @font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
   'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
@@ -238,34 +274,7 @@ main {
   transition: 0.3s;
   box-shadow: 0 5px 10px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
 }
-.InputForm {
-  position: fixed;
-  color: black;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  float: right;
-  background: rgb(58, 100, 180);
-  background: linear-gradient(
-    90deg,
-    rgba(58, 100, 180, 1) 0%,
-    rgba(92, 168, 221, 1) 51%,
-    rgba(29, 253, 182, 1) 100%
-  );
-  transition: 0.3s;
-  right: 0;
-}
-.LoginPage {
-  margin: 150px;
-}
-.LoginForm {
-  margin: 100px;
-  padding: 20px 0px;
-  background: rgba(58, 100, 180, 1);
-  border-radius: 15px;
-  text-align: center;
-  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.22);
-}
+
 .NextArrow {
   font-size: 50px;
   color: #41607d;
@@ -308,11 +317,70 @@ main {
   margin-right: auto;
   box-shadow: 0 10px 10px rgba(0, 0, 0, 0.22);
 }
-.Form {
+.LoginForm {
+  margin: 100px;
+  padding: 10px;
+  background: rgba(58, 100, 180, 1);
+  border-radius: 15px;
+  text-align: center;
+  align-items: center;
+  justify-content: center;
   box-shadow: 0 10px 10px rgba(0, 0, 0, 0.22);
-  background: rgb(142, 199, 239);
-  border-radius: 10px;
+  p {
+    font-size: large;
+    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS',
+      sans-serif;
+  }
+  .LoginForm-Form {
+    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.22);
+    background: rgb(142, 199, 239);
+    border-radius: 10px;
+    margin: 40px;
+    padding: 20px;
+
+    Button {
+      margin: 10px 0px;
+      padding: 0px 10px;
+      text-align: center;
+      align-items: center;
+      justify-content: center;
+    }
+    p {
+      color: #0c3d67;
+      margin: 0;
+      padding: 0;
+      font-size: medium;
+    }
+  }
+}
+
+.InputForm {
+  position: fixed;
+  color: black;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  float: right;
+  background: rgb(58, 100, 180);
+  background: linear-gradient(
+    90deg,
+    rgba(58, 100, 180, 1) 0%,
+    rgba(92, 168, 221, 1) 51%,
+    rgba(29, 253, 182, 1) 100%
+  );
+  transition: 0.3s;
+  // right: 0;
+  text-align: center;
+  align-items: center;
+  justify-content: center;
+
+  img {
+    margin-top: 200px;
+  }
 }
+
 .LikeStyle {
   cursor: pointer;
   padding: 3px;
@@ -321,7 +389,7 @@ main {
   font-size: xx-large;
   margin-right: 15px;
 }
-.Filled {
+.SmileBtnFilled {
   font-size: xx-large;
   margin-right: 15px;
   color: #108ee9;
@@ -406,3 +474,102 @@ main {
   margin-left: 10px;
   margin-right: 10px;
 }
+
+/* Responsive */
+/* 992px - 1200px */
+@media screen and (max-width: 1200px) {
+  .LoginForm {
+    p {
+      font-size: xx-large;
+    }
+  }
+  .InputForm {
+    // width: 960px;
+    img {
+      // width: 50%;
+      // height: 50%;
+    }
+    Title {
+      width: 100%;
+    }
+    section {
+      display: flex;
+      // flex-direction: row;
+      // width: 100%;
+      align-items: center;
+    }
+  }
+
+  .LoginForm-Form {
+    // width: 90%;
+    // width: 960px;
+  }
+}
+// 	.wrapper{
+// 		flex-direction: column;
+// 	}
+// 	.offer{
+// 		width: 90%;
+// 	}
+// 	.intro{
+// 		width: auto;
+// 	}
+// 	.travel{
+// 		display: block;
+// 		width: 549px;
+// 	}
+// 	.bonuses{
+// 		flex-direction: column;
+// 	}
+// 	.bonus{
+// 		width: auto;
+// 		margin-bottom: 25px;
+// 	}
+// 	.title{
+// 		width: auto;
+// 	}
+// 	.logo{
+// 		margin-bottom: 40px;
+// 	}
+// }
+// /* 768px - 992px */
+// @media screen and (max-width: 992px)
+// {
+// 	.container{
+// 		width: 720px;
+// 	}
+// 	.btn{
+// 		display: block;
+// 		align-items:center;
+// 		margin: auto;
+// 	}
+// }
+// /*576px-768px*/
+// @media screen and (max-width: 768px)
+// {
+
+// 	.container{
+// 		width: 540px;
+// 	}
+// 	.travel{
+// 		width: 100%;
+// 	}
+// 	.input{
+// 		width: 80%;
+// 	}
+// 	.btn{
+// 		width: 80%;
+// 	}
+// }
+// /*320px-576px*/
+// @media screen and (max-width: 576px)
+// {
+// 	.container{
+// 		width: 90%;
+// 	}
+
+// 	.input{
+// 		font-size: 12px;
+// 	}
+
+// }

src/components/authorization/InitialForm.jsx

@@ -1,8 +1,8 @@
 import React, { useState } from 'react'
 import { Button, Input, Checkbox, Form } from 'antd'
-import { Typography } from 'antd'
-
-const { Text } = Typography
+import { Typography, Col, Row } from 'antd'
+import { LockOutlined, UserOutlined } from '@ant-design/icons';
+const { Title } = Typography
 const InitialForm = ({ onLogin, children }) => {
   const [login, setLogin] = useState('')
   const [password, setPassword] = useState('')
@@ -12,88 +12,119 @@ const InitialForm = ({ onLogin, children }) => {
   }
   return (
     <>
+     
       <Form
-        className="Form"
         size="medium"
         name="basic"
-        style={{
-          margin: '0 auto',
-          margin: '50px',
-          padding: '20px',
-        }}
-        labelCol={{ span: 6 }}
-        wrapperCol={{ span: 13 }}
+        className="LoginForm-Form"
+        // labelCol={{ span: 12}}
+        // wrapperCol={{ span: 17 }}
+        // labelCol={{xs}}
         autoComplete="off"
       >
-        <h2 style={{}}> {children} </h2>
-
+        {/* <Col   xs={{ span: 10 }}
+        sm={16} md={12} lg={8} xl={4}> */}
+     
+ <Title level={2}> {children} </Title>
         <Form.Item
-          label="Login"
           name="login"
-          size="medium"
+          size="large"
           rules={[
             {
               required: true,
               message: 'Please input login!',
             },
           ]}
+          style={{marginBottom: '5px'}}
+          wrapperCol={{ offset: 4, span: 15 }}
         >
-          <Input
+           
+          <Input prefix={<UserOutlined className="site-form-item-icon" />}
+            placeholder="Login"
             value={login}
             size="medium"
             onChange={(e) => setLogin(e.target.value)}
           />
+          
+       
         </Form.Item>
-        <Text
-          type="secondary"
-          style={{ color: 'rgb(35, 60, 107)', margin: '20px 5px' }}
-        >
-          {' '}
-          Login must be at least 5 characters{' '}
-        </Text>
         <Form.Item
-          label="Password"
+         style={{margin:'0 auto'}}
+          wrapperCol={{ offset: 4, span: 14 }}
+        >    
+        <p
+          >
+            {' '}
+            * Login must be at least 5 characters{' '}
+          </p>
+          </Form.Item>
+        <Form.Item
           name="password"
-          size="medium"
+          size="large"
           rules={[
             {
               required: true,
               message: 'Please input your password!',
             },
           ]}
+          style={{ padding: '0 auto',marginBottom: '5px'}}
+
+          wrapperCol={{ offset: 4, span: 15 }}
         >
-          <Input
+           <Input
+          prefix={<LockOutlined className="site-form-item-icon" />}
+            placeholder="Password"
             size="medium"
             type={checked ? 'text' : 'password'}
             value={password}
             onChange={(e) => setPassword(e.target.value)}
+          
           />
+           
+          {/* <Input
+            size="medium"
+            type={checked ? 'text' : 'password'}
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+          /> */}
         </Form.Item>
-        <div style={{ width: '250px', marginLeft: '90px' }}>
-          <Text type="secondary" style={{ color: 'rgb(35, 60, 107)' }}>
+        <Form.Item
+         style={{margin:'0 auto'}}
+          wrapperCol={{ offset: 3, span: 15 }}
+        >   
+  <p>
+        * Use a combination of 8 or more letters, numbers, and symbols
+          </p>
+          </Form.Item>
+        {/* <Text type="secondary" style={{ color: 'rgb(35, 60, 107)' }}> */}
+        {/* style={{ width: '250px', marginLeft: '90px' }} */}
+
+        {/* <Text type="secondary" style={{ color: 'rgb(35, 60, 107)'}}>
             Password must contain at least eight characters, include letters,
             numbers and special symbols{' '}
-          </Text>
-        </div>
+          </Text> */}
+
         <Form.Item
           name="checked"
           valuePropName="checked"
-          wrapperCol={{ offset: 5, span: 10 }}
+          wrapperCol={{ offset: 3, span: 17 }}
+          style={{margin: '10px 0px'}}
+
         >
           <Checkbox
             checked={checked}
             onChange={(e) => {
               setChecked(e.target.checked)
             }}
-            size="large"
+            size="medium"
           >
             See the password
           </Checkbox>
         </Form.Item>
 
-        <Form.Item wrapperCol={{ offset: 6, span: 13 }}>
+        <Form.Item wrapperCol={{ offset: 4, span: 15 }}>
           <Button
-            size="medium"
+            size="large"
             type="primary"
             htmlType="submit"
             primary
@@ -108,8 +139,10 @@ const InitialForm = ({ onLogin, children }) => {
           >
             {children}
           </Button>
-        </Form.Item>
+          </Form.Item>
+        {/* </Col> */}
       </Form>
+    
     </>
   )
 }

src/pages/login/index.js

@@ -3,24 +3,47 @@ import { CLoginForm } from '../../components/authorization/LoginForm'
 import logo from '../../materials/login.png'
 import { Row, Col } from 'antd'
 import { Link } from 'react-router-dom'
-
+import { Typography } from 'antd'
+const {Title } = Typography
 export const LoginPageForm = () => (
   <div className="InputForm">
-    <Row>
-      <Col span={12}>
-        <img className="LoginPage" src={logo} />
+    <Row gutter={[16, 16]}>
+      
+      <Col
+        // span={12}
+        xl={{ span: 10 }}
+        lg={{ span: 8 }}
+        md={{ span: 0 }}
+        sm={{ span: 0}}   >
+        {/* xl={4} */}
+        
+        <img  src={logo} />
+       
       </Col>
 
-      <Col span={12}>
+
+      <Col xl={{ span: 14}}
+        lg={{ span: 16 }}
+        // md={{  span: 15 }}
+        sm={{ span: 10 }}
+         >
         <div className="LoginForm">
+          <section>
+          <Title style={{
+           
+            color: 'rgb(16, 30, 54)',
+            // width: '100%'float: 'left', 
+          }} level={3} >Welcome to Memogram! </Title>
+      
+          </section>
           <CLoginForm />
 
-          <h2>
-            Don't have an account yet?
+          <p>
+           Don't have an account yet?
             <Link to="/register" className="Link">
               Register
             </Link>
-          </h2>
+          </p>
         </div>
       </Col>
     </Row>
@@ -31,18 +54,18 @@ export const RegisterPageForm = () => (
   <div className="InputForm">
     <Row>
       <Col span={12}>
-        <img className="LoginPage" src={logo} />
+        <img src={logo} />
       </Col>
 
       <Col span={12}>
         <div className="LoginForm">
           <CRegisterForm />
-          <h2>
+          <p>
             Have an account?
             <Link to="/login" className="Link">
               Login
             </Link>
-          </h2>
+          </p>
         </div>
       </Col>
     </Row>