main styles

src/components/ContactForm/ContactForm.jsx

@@ -0,0 +1,51 @@
+import {
+  Form,
+  Label,
+  Input,
+  SubmitButton,
+  Group,
+  RadioContainer,
+  RaioDiv,
+  RadioInput,
+} from './ContactForm.styled';
+
+export const ContactForm = () => {
+  return (
+    <Form>
+      <Label>
+        Name
+        <Input type="text" name="name" required placeholder="Enter name" />
+      </Label>
+
+      <Label>
+        Number
+        <Input type="tel" name="number" required placeholder="Enter number" />
+      </Label>
+
+      <Group>Group</Group>
+      <RadioContainer>
+        <RaioDiv>
+          Family
+          <RadioInput type="radio" name="group" value="family" />
+        </RaioDiv>
+
+        <RaioDiv>
+          Friends
+          <RadioInput type="radio" name="group" value="friends" />
+        </RaioDiv>
+
+        <RaioDiv>
+          Work
+          <RadioInput type="radio" name="group" value="work" />
+        </RaioDiv>
+
+        <RaioDiv>
+          Others
+          <RadioInput type="radio" name="group" value="others" checked />
+        </RaioDiv>
+      </RadioContainer>
+
+      <SubmitButton type="submit">Add contact</SubmitButton>
+    </Form>
+  );
+};

src/components/ContactForm/ContactForm.styled.jsx

@@ -0,0 +1,84 @@
+import styled from '@emotion/styled';
+
+export const Form = styled.form`
+  width: 400px;
+  background-color: #78a1bb;
+  padding: 12px;
+  border-radius: 8px;
+`;
+
+export const Label = styled.label`
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 16px;
+  color: #000000;
+  font-size: 18px;
+  margin-bottom: 12px;
+`;
+
+export const Input = styled.input`
+  padding: 4px;
+  font-size: 18px;
+  border-radius: 4px;
+  border: 2px solid transparent;
+  outline: transparent;
+
+  &:focus {
+    border-color: #e9af3d;
+  }
+
+  &:hover {
+    border-color: #e9af3d;
+  }
+`;
+
+export const SubmitButton = styled.button`
+  padding: 8px 24px;
+  font-size: 16px;
+  color: #000000;
+  background-color: #e9af3d;
+`;
+
+export const Group = styled.p`
+  color: #000000;
+  font-size: 18px;
+  margin-bottom: 4px;
+`;
+
+export const RadioContainer = styled.div`
+  display: flex;
+  justify-content: space-between;
+`;
+
+export const RaioDiv = styled.div`
+  position: relative;
+  padding: 0px 0px 0px 26px;
+  margin-bottom: 20px;
+  line-height: 24px;
+
+  &:before {
+    position: absolute;
+    content: '';
+    width: 20px;
+    height: 20px;
+    left: 0;
+    top: 0;
+    background-color: #ffffff;
+    border-radius: 50%;
+  }
+
+  &:after {
+    position: absolute;
+    content: '';
+    width: 14px;
+    height: 14px;
+    left: 3px;
+    top: 3px;
+    background-color: #78a1bb;
+    border-radius: 50%;
+  }
+`;
+
+export const RadioInput = styled.input`
+  display: none;
+`;

src/components/ContactsList/ContactsList.jsx

@@ -0,0 +1,3 @@
+export const ContactsList = () => {
+  return <div>Contacts</div>;
+};

src/components/Layout/Layout.styled.jsx

@@ -21,29 +21,29 @@ export const NavItem = styled.li``;
 export const StyledLink = styled(NavLink)`
   font-size: 20px;
   color: #000000;
-  background-color: #bfa89e;
+  background-color: #78a1bb;
   padding: 8px;
   border-radius: 4px;
 
   &.active {
-    color: #ebf5ee;
-    background-color: #8b786d;
+    color: #000000;
+    background-color: #e9af3d;
     padding: 8px;
     border-radius: 4px;
   }
 `;
 
 export const Main = styled.main`
   background-image: url(https://images.pexels.com/photos/949587/pexels-photo-949587.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1);
-
   background-repeat: no-repeat;
   background-position: center;
   background-size: cover;
   margin: 0 auto;
   max-width: 1400px;
-  height: 85vh;
+  height: 80vh;
+  padding: 30px;
 
   display: flex;
   justify-content: center;
-  align-items: center;
+  align-items: flex-start;
 `;

src/components/LoginForm/LoginForm.styled.jsx

@@ -2,7 +2,7 @@ import styled from '@emotion/styled';
 
 export const Form = styled.form`
   width: 400px;
-  background-color: #bfa89e;
+  background-color: #78a1bb;
   padding: 12px;
   border-radius: 8px;
 `;
@@ -24,21 +24,17 @@ export const Input = styled.input`
   outline: transparent;
 
   &: focus {
-    border-color: #78a1bb;
+    border-color: #e9af3d;
   }
 
   &: hover {
-    border-color: #78a1bb;
+    border-color: #e9af3d;
   }
 `;
 
 export const SubmitButton = styled.button`
   padding: 8px 24px;
   font-size: 16px;
-  color: #ebf5ee;
-  background-color: #8b786d;
-
-  &: hover {
-    background-color: #78a1bb;
-  }
+  color: #000000;
+  background-color: #e9af3d;
 `;

src/components/RegisterForm/RegisterForm.styled.jsx

@@ -2,7 +2,7 @@ import styled from '@emotion/styled';
 
 export const Form = styled.form`
   width: 400px;
-  background-color: #bfa89e;
+  background-color: #78a1bb;
   padding: 12px;
   border-radius: 8px;
 `;
@@ -24,21 +24,17 @@ export const Input = styled.input`
   outline: transparent;
 
   &: focus {
-    border-color: #78a1bb;
+    border-color: #e9af3d;
   }
 
   &: hover {
-    border-color: #78a1bb;
+    border-color: #e9af3d;
   }
 `;
 
 export const SubmitButton = styled.button`
   padding: 8px 24px;
   font-size: 16px;
-  color: #ebf5ee;
-  background-color: #8b786d;
-
-  &: hover {
-    background-color: #78a1bb;
-  }
+  color: #000000;
+  background-color: #e9af3d;
 `;

src/index.css

@@ -44,31 +44,11 @@ body::-webkit-scrollbar {
 }
 
 body::-webkit-scrollbar-track {
-  background: #ffffc5;
+  background: #e9af3d;
 }
 
 body::-webkit-scrollbar-thumb {
   background-color: #ffffff;
   border-radius: 20px;
   border: 2px solid #a1c487;
 }
-
-.container {
-  width: 1400px;
-  margin: 0 auto;
-  padding: 10px;
-
-  font-size: 32px;
-
-  margin-bottom: 20px;
-
-  background-color: #bfa89e;
-  border-radius: 8px;
-
-  text-align: center;
-  display: flex;
-  justify-content: center;
-
-  margin-bottom: 4px;
-  margin-top: 30px;
-}

src/pages/ContactsPage/ContactsPage.jsx

@@ -1,5 +1,13 @@
+import { ContactForm } from 'components/ContactForm/ContactForm';
+import { ContactsList } from 'components/ContactsList/ContactsList';
+
 const ContactsPage = () => {
-  return <div>Contacts Page</div>;
+  return (
+    <>
+      <ContactForm />
+      <ContactsList />
+    </>
+  );
 };
 
 export default ContactsPage;

src/pages/HomePage/HomePage.jsx

@@ -1,11 +1,7 @@
-import { HomeContainer, Title } from './HomePage.styled';
+import { Title } from './HomePage.styled';
 
 const HomePage = () => {
-  return (
-    <HomeContainer>
-      <Title>Hello my friend</Title>
-    </HomeContainer>
-  );
+  return <Title>Hello my friend</Title>;
 };
 
 export default HomePage;

src/pages/HomePage/HomePage.styled.jsx

@@ -1,7 +1,5 @@
 import styled from '@emotion/styled';
 
-export const HomeContainer = styled.div``;
-
 export const Title = styled.h1`
   font-size: 60px;
 `;

src/pages/NotFound/NotFound.jsx

@@ -1,13 +1,18 @@
-import { Link } from 'react-router-dom';
+import {
+  ErrorTitle,
+  ErrorContainer,
+  Text,
+  StyledLink,
+} from './NotFound.styled';
 
 const NotFound = () => {
   return (
-    <>
-      <h1>404</h1>
-      <p>You have gone to a non existing page</p>
-      <p>Return to the</p>
-      <Link to="/">Home</Link>
-    </>
+    <ErrorContainer>
+      <ErrorTitle>Error 404</ErrorTitle>
+      <Text>You have gone to a non existing page</Text>
+      <Text>Return to the</Text>
+      <StyledLink to="/">Home</StyledLink>
+    </ErrorContainer>
   );
 };
 

src/pages/NotFound/NotFound.styled.jsx

@@ -0,0 +1,22 @@
+import styled from '@emotion/styled';
+import { NavLink } from 'react-router-dom';
+
+export const ErrorContainer = styled.div`
+  text-align: center;
+  background-color: #78a1bb;
+  padding: 20px;
+  border-radius: 4px;
+`;
+
+export const ErrorTitle = styled.h1`
+  font-size: 60px;
+`;
+
+export const Text = styled.p`
+  font-size: 18px;
+`;
+
+export const StyledLink = styled(NavLink)`
+  color: #000000;
+  font-size: 44px;
+`;

src/pages/RegisterPage/RegisterPage.styled.jsx

@@ -0,0 +1 @@
+