├── .gitignore
├── README.md
├── package-lock.json
├── package.json
├── public
    ├── favicon.ico
    ├── index.html
    ├── logo192.png
    ├── logo512.png
    ├── manifest.json
    └── robots.txt
└── src
    ├── App.js
    ├── assets
        ├── 1.png
        ├── 2.webp
        ├── 3.jpg
        ├── 4.jpg
        ├── 5.jpg
        └── 5.png
    ├── components
        ├── Contact.jsx
        ├── Footer.jsx
        ├── Header.jsx
        ├── Home.jsx
        └── Services.jsx
    ├── index.js
    └── styles
        ├── App.scss
        ├── colors.scss
        ├── contact.scss
        ├── footer.scss
        ├── header.scss
        ├── home.scss
        └── mediaquery.scss


/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # production
12 | /build
13 | 
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 | 
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Techist
 2 | Landing page based on react.
 3 | ***Visit website*****
 4 | https://techistreactpage.netlify.app/
 5 | ## Technologies used
 6 | * React
 7 | * React routers
 8 | * SaaS
 9 | ### Packages
10 | * React Icons
11 | * Responsive Responsive Carousel
12 | * React Router Hash Link
13 | 
14 | 
15 | ![Screenshot (148)](https://user-images.githubusercontent.com/84200302/223737065-32aea367-e539-4714-8c35-ff8047fe8919.png)
16 | ![Screenshot (150)](https://user-images.githubusercontent.com/84200302/223737470-142a554e-77fd-4bb1-b20c-38c8db571cff.png)
17 | ![Screenshot (149)](https://user-images.githubusercontent.com/84200302/223739163-965adfb2-c71b-415b-9d9a-0b78567f4ab6.png)
18 | 
19 | 
20 | ![mobile](https://user-images.githubusercontent.com/84200302/223740440-e3d3ea8a-c8f0-4564-b4d3-14fb5404ef30.png)
21 | ![mobile (1)](https://user-images.githubusercontent.com/84200302/223740503-76e98c4a-12fa-4fef-b0e9-cdc33d1b656b.png)
22 | ![mobile (2)](https://user-images.githubusercontent.com/84200302/223740537-3ed05c74-013d-4f8a-9ead-27cc95a1a8b7.png)
23 | 
24 | ![mobile (4)](https://user-images.githubusercontent.com/84200302/224040736-a1c24c5d-f65b-43d7-a7a2-ce5cfe914404.png)
25 | 
26 | 
27 | 
28 | 
29 | 
30 | 
31 | 
32 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "my-project",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "@testing-library/jest-dom": "^5.16.5",
 7 |     "@testing-library/react": "^13.4.0",
 8 |     "@testing-library/user-event": "^13.5.0",
 9 |     "react": "^18.2.0",
10 |     "react-dom": "^18.2.0",
11 |     "react-icons": "^4.7.1",
12 |     "react-responsive-carousel": "^3.2.23",
13 |     "react-router-dom": "^6.8.1",
14 |     "react-router-hash-link": "^2.4.3",
15 |     "react-scripts": "5.0.1",
16 |     "sass": "^1.58.3",
17 |     "web-vitals": "^2.1.4"
18 |   },
19 |   "scripts": {
20 |     "start": "react-scripts start",
21 |     "build": "react-scripts build",
22 |     "test": "react-scripts test",
23 |     "eject": "react-scripts eject"
24 |   },
25 |   "eslintConfig": {
26 |     "extends": [
27 |       "react-app",
28 |       "react-app/jest"
29 |     ]
30 |   },
31 |   "browserslist": {
32 |     "production": [
33 |       ">0.2%",
34 |       "not dead",
35 |       "not op_mini all"
36 |     ],
37 |     "development": [
38 |       "last 1 chrome version",
39 |       "last 1 firefox version",
40 |       "last 1 safari version"
41 |     ]
42 |   }
43 | }
44 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Anoshkhan/Landing-page/a8017ba64b9e0698302e927e00f204cdf99ae674/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 7 |     <meta name="theme-color" content="#000000" />
 8 |     <meta
 9 |       name="description"
10 |       content="Web site created using create-react-app"
11 |     />
12 |     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
13 |     <!--
14 |       manifest.json provides metadata used when your web app is installed on a
15 |       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
16 |     -->
17 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
18 |     <!--
19 |       Notice the use of %PUBLIC_URL% in the tags above.
20 |       It will be replaced with the URL of the `public` folder during the build.
21 |       Only files inside the `public` folder can be referenced from the HTML.
22 | 
23 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
24 |       work correctly both with client-side routing and a non-root public URL.
25 |       Learn how to configure a non-root public URL by running `npm run build`.
26 |     -->
27 |     <title>React App</title>
28 |   </head>
29 |   <body>
30 |     <noscript>You need to enable JavaScript to run this app.</noscript>
31 |     <div id="root"></div>
32 |     <!--
33 |       This HTML file is a template.
34 |       If you open it directly in the browser, you will see an empty page.
35 | 
36 |       You can add webfonts, meta tags, or analytics to this file.
37 |       The build step will place the bundled scripts into the <body> tag.
38 | 
39 |       To begin the development, run `npm start` or `yarn start`.
40 |       To create a production bundle, use `npm run build` or `yarn build`.
41 |     -->
42 |   </body>
43 | </html>
44 | 


--------------------------------------------------------------------------------
/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Anoshkhan/Landing-page/a8017ba64b9e0698302e927e00f204cdf99ae674/public/logo192.png


--------------------------------------------------------------------------------
/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Anoshkhan/Landing-page/a8017ba64b9e0698302e927e00f204cdf99ae674/public/logo512.png


--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "React App",
 3 |   "name": "Create React App Sample",
 4 |   "icons": [
 5 |     {
 6 |       "src": "favicon.ico",
 7 |       "sizes": "64x64 32x32 24x24 16x16",
 8 |       "type": "image/x-icon"
 9 |     },
10 |     {
11 |       "src": "logo192.png",
12 |       "type": "image/png",
13 |       "sizes": "192x192"
14 |     },
15 |     {
16 |       "src": "logo512.png",
17 |       "type": "image/png",
18 |       "sizes": "512x512"
19 |     }
20 |   ],
21 |   "start_url": ".",
22 |   "display": "standalone",
23 |   "theme_color": "#000000",
24 |   "background_color": "#ffffff"
25 | }
26 | 


--------------------------------------------------------------------------------
/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 | 


--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
 1 | import { BrowserRouter as Router,Routes, Route  } from "react-router-dom";
 2 | import Header from "./components/Header";
 3 | import Home from "./components/Home";
 4 | import Footer from "./components/Footer";
 5 | import Contact from "./components/Contact";
 6 | import Services from "./components/Services";
 7 | 
 8 | import "./styles/App.scss";
 9 | import "./styles/header.scss";
10 | import "./styles/home.scss";
11 | import "./styles/footer.scss";
12 | import "./styles/contact.scss";
13 | import "./styles/mediaquery.scss";
14 | 
15 | function App() {
16 |   return (
17 |     <Router>
18 |       <Header />
19 |       <Routes>
20 |         <Route path="/" element={<Home />}/>
21 |         <Route path="/contact" element={<Contact />}/>
22 |         <Route path="/services" element={<Services />}/>
23 |       </Routes>
24 |       <Footer />
25 |     </Router>
26 |   );
27 | }
28 | 
29 | export default App;
30 | 


--------------------------------------------------------------------------------
/src/assets/1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Anoshkhan/Landing-page/a8017ba64b9e0698302e927e00f204cdf99ae674/src/assets/1.png


--------------------------------------------------------------------------------
/src/assets/2.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Anoshkhan/Landing-page/a8017ba64b9e0698302e927e00f204cdf99ae674/src/assets/2.webp


--------------------------------------------------------------------------------
/src/assets/3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Anoshkhan/Landing-page/a8017ba64b9e0698302e927e00f204cdf99ae674/src/assets/3.jpg


--------------------------------------------------------------------------------
/src/assets/4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Anoshkhan/Landing-page/a8017ba64b9e0698302e927e00f204cdf99ae674/src/assets/4.jpg


--------------------------------------------------------------------------------
/src/assets/5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Anoshkhan/Landing-page/a8017ba64b9e0698302e927e00f204cdf99ae674/src/assets/5.jpg


--------------------------------------------------------------------------------
/src/assets/5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Anoshkhan/Landing-page/a8017ba64b9e0698302e927e00f204cdf99ae674/src/assets/5.png


--------------------------------------------------------------------------------
/src/components/Contact.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | const Contact = () => {
 4 |   return (
 5 |     <div className='contact'>
 6 |         <main>
 7 |             <h1>Contact Us</h1>
 8 |             <form>
 9 |                 <div>
10 |                     <label>Name</label>
11 |                     <input type="text" required placeholder='Full Name'/>
12 |                 </div>
13 |                 <div>
14 |                     <label>Email</label>
15 |                     <input type="email" required placeholder='abc@xyz.com'/>
16 |                 </div>
17 |                 <div>
18 |                     <label>Query</label>
19 |                     <input type="text" required placeholder='Your Message?'/>
20 |                 </div>
21 |                 <button>Send</button>
22 |             </form>
23 |         </main>
24 |     </div>
25 |   )
26 | }
27 | 
28 | export default Contact


--------------------------------------------------------------------------------
/src/components/Footer.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | const Footer = () => {
 4 |   return (
 5 |     <div className='footer'>
 6 |         <div>
 7 |             <h1>Techist.</h1>
 8 |             <p>@all right reserved Anoshkhan</p>
 9 |         </div>
10 |         <div>
11 |             <h5>Follow Us</h5>
12 |             <div>
13 |                 <a href='https://www.linkedin.com/in/anosh-khan-b2b980222/' target={'blank'}>Linkedin</a>
14 |                 <a href='https://github.com/Anoshkhan'  target={'blank'}>Github</a>
15 |                 <a href="https://www.facebook.com/profile.php?id=100085882712254"  target={'blank'}>Facebook</a>
16 |             </div>
17 |         </div>
18 |     </div>
19 |   )
20 | }
21 | 
22 | export default Footer


--------------------------------------------------------------------------------
/src/components/Header.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { Link } from 'react-router-dom';
 3 | import { HashLink } from 'react-router-hash-link';
 4 | 
 5 | const Header = () => {
 6 |   return (
 7 |     <nav>
 8 |         <h1>Techist.</h1>
 9 |         <main>
10 |             <HashLink to={"/#home"}>Home</HashLink>
11 |             <Link to={"/contact"}>Contact</Link>
12 |             <HashLink to={"/#about"}>About</HashLink>
13 |             <HashLink to={"/#brands"}>Brands</HashLink>
14 |             <Link to={"/services"}>Services</Link>
15 |         </main>
16 |     </nav>
17 |   )
18 | }
19 | 
20 | export default Header


--------------------------------------------------------------------------------
/src/components/Home.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import vg from "../assets/2.webp";
 3 | import {AiFillGoogleCircle, AiFillAmazonCircle, AiFillInstagram, AiFillLinkedin} from "react-icons/ai";
 4 | 
 5 | const Home = () => {
 6 |   return (
 7 |     <>
 8 |     <div className='home' id='home'>
 9 |         <main>
10 |             <h1>Techist.</h1>
11 |             <p>Solution to all your problems</p>
12 |         </main>
13 |     </div>
14 |     <div className='home2'>
15 |         <img src={vg} alt="Graphics" />
16 |         <div>
17 |             <p>By continually adapting to technological advances and modern trends, TechIst always remains at the forefront of application development. Our experienced and certified development teams use leading-edge methodologies to design, develop, implement, and continually enhance innovative business solutions for all major platforms and devices.</p>
18 |         </div>
19 |     </div>
20 | 
21 |     <div className='home3' id='about'>
22 |         <div>
23 |           <h1>Who we are?</h1>
24 |           <p>
25 |           Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
26 |           </p>
27 |         </div>
28 |     </div>
29 | 
30 |     <div className='home4' id='brands'>
31 |         <div className='brands'>
32 |           <h1>Brands</h1>
33 |           <article>
34 |             <div style={{
35 |               animationDelay: "0.2s",
36 |              }}>
37 |               <AiFillGoogleCircle />
38 |               <p>Google</p>
39 |             </div>
40 |             <div style={{
41 |               animationDelay: "0.5s",
42 |              }}>
43 |               <AiFillAmazonCircle />
44 |               <p>Amazon</p>
45 |             </div>
46 |             <div style={{
47 |               animationDelay: "0.8s",
48 |              }}>
49 |               <AiFillInstagram />
50 |               <p>Instagram</p>
51 |             </div>
52 |             <div style={{
53 |               animationDelay: "1.1s",
54 |              }}>
55 |               <AiFillLinkedin />
56 |               <p>Linkedin</p>
57 |             </div>
58 |           </article>
59 |         </div>
60 |     </div>
61 |     </>
62 |     
63 |   )
64 | }
65 | 
66 | export default Home


--------------------------------------------------------------------------------
/src/components/Services.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { Carousel } from 'react-responsive-carousel';
 3 | import "react-responsive-carousel/lib/styles/carousel.min.css";
 4 | import img1 from "../assets/3.jpg";
 5 | import img2 from "../assets/4.jpg";
 6 | import img3 from "../assets/5.png";
 7 | 
 8 | const Services = () => {
 9 |   return (
10 |     <div className='services'>
11 |         <Carousel 
12 |         infiniteLoop
13 |         autoPlay 
14 |         interval={3000}
15 |         showStatus={false}
16 |         showArrows={false}>
17 |             <div>
18 |                 <img src={img3} alt="item3"/>
19 |                 <h4 className='legend'>Network Support Services</h4>
20 |             </div>
21 |             <div>
22 |                 <img src={img1} alt="item1"/>
23 |                 <h4 className='legend'>Full Stack</h4>
24 |             </div>
25 |             <div>
26 |                 <img src={img2} alt="item2"/>
27 |                 <h4 className='legend'>Peer-to-peer Support</h4>
28 |             </div>
29 |         </Carousel>
30 |     </div>
31 |   )
32 | }
33 | 
34 | export default Services


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom/client';
 3 | import App from './App';
 4 | 
 5 | const root = ReactDOM.createRoot(document.getElementById('root'));
 6 | root.render(
 7 |   <React.StrictMode>
 8 |     <App />
 9 |   </React.StrictMode>
10 | );
11 | 
12 | 
13 | 


--------------------------------------------------------------------------------
/src/styles/App.scss:
--------------------------------------------------------------------------------
 1 | @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@500;700&family=Urbanist:ital,wght@0,100;0,200;0,300;0,400;1,500&display=swap')
 2 | ;
 3 | 
 4 | *{
 5 |     margin: 0%;
 6 |     padding: 0%;
 7 |     font-family: "Roboto", sans-serif;
 8 |     box-sizing: border-box;
 9 |     text-decoration: none;
10 |     scroll-behavior: smooth;
11 | }


--------------------------------------------------------------------------------
/src/styles/colors.scss:
--------------------------------------------------------------------------------
1 | $first:white;
2 | $second:#090c31;
3 | $third:#5853ff;
4 | $dark:rgb(44,44,44);
5 | $text1:"Roboto";
6 | $text2:cursive;


--------------------------------------------------------------------------------
/src/styles/contact.scss:
--------------------------------------------------------------------------------
 1 | @import "colors";
 2 | 
 3 | .contact{
 4 |     width: 100%;
 5 |     height: 100vh;
 6 |     background-color: $second;
 7 |     display: flex;
 8 |     justify-content: center;
 9 |     align-items: center;
10 |     > main{
11 |         background-color: $first;
12 |         height: 80vh;
13 |         width: 70%;
14 |         padding: 3rem;
15 |         border-radius: 0px 100px 100px 0px;
16 |         > form{
17 |             margin: 5rem;
18 |             display: flex;
19 |             flex-direction: column;
20 |             align-items: center;
21 |             justify-content: center;
22 |             > div{
23 |                 height: 3rem;
24 |                 display: flex;
25 |                 align-items: center;
26 |                 justify-content: flex-end;
27 |                 width: 60%;
28 |                 margin: 0.5rem;
29 |                 > label{
30 |                     font: 400 1.2rem $text1;
31 |                     width: 20%;
32 |                     margin: 0 1rem;
33 |                 }
34 |                 > input{
35 |                     align-self: stretch;
36 |                     width: 80%;
37 |                     padding: 1rem;
38 |                     border-radius: 5px;
39 |                     border: 1px solid rgba(123, 123, 123, 0.6);
40 |                     outline: none;
41 |                     font-size: 14px;
42 |                 }
43 |             }
44 |             > button {
45 |                 margin: 3rem 0px;
46 |                 padding: 10px 40px;
47 |                 border: none;
48 |                 border-radius: 5px;
49 |                 background-color: $third;
50 |                 color: $first;
51 |                 font-family: 16px;
52 |                 cursor: pointer;
53 |                 &:hover{
54 |                     opacity: 0.8;
55 |                 }
56 |             }
57 |         }
58 |     }
59 | }


--------------------------------------------------------------------------------
/src/styles/footer.scss:
--------------------------------------------------------------------------------
 1 | @import "colors";
 2 | 
 3 | .footer{
 4 |     background-color: $first;
 5 |     width: 100%;
 6 |     height: 200px;
 7 |     color: $dark;
 8 |     display: grid;
 9 |     grid-template-columns: 4fr 1fr;
10 |     padding: 2rem;
11 |     > div{
12 |         display: flex;
13 |         flex-direction: column;
14 |         justify-content: center;
15 |         > h1{
16 |             font: 700 2.5rem $text1;
17 |             text-transform: uppercase;
18 |             color: $third;
19 |         }
20 |         > p{
21 |             font: 500 1.2rem $text2;
22 |             margin: 20px 0px;
23 |         }
24 |         > h5{
25 |             font: 300 2rem $text2;
26 |             margin: 1rem 0;
27 |             text-align: center;
28 |         }
29 |         > div{
30 |             display: flex;
31 |             flex-direction: column;
32 |             align-items: center;
33 |             > a{
34 |                 font: 900 1rem $text1;
35 |                 margin: 5px 0;
36 |                 &:hover{
37 |                     color: $third;
38 |                 }
39 |             }
40 |         }
41 |     }
42 | }


--------------------------------------------------------------------------------
/src/styles/header.scss:
--------------------------------------------------------------------------------
 1 | @import "colors";
 2 | 
 3 | nav{
 4 |     width: 100%;
 5 |     padding: 1rem;
 6 |     display: flex;
 7 |     justify-content: space-between;
 8 |     align-items: center;
 9 |     background-color: $first;
10 |     position: sticky;
11 |     top: 0%;
12 |     z-index: 10;
13 | 
14 |     > h1{
15 |         text-transform: uppercase;
16 |     }
17 |     > main{
18 |         width: 70%;
19 |         display: flex;
20 |         justify-content: flex-end;
21 |         > a{
22 |             margin: 1rem;
23 |             color: $dark;
24 |             &:hover{
25 |                 color: $third;
26 |             }
27 |         }
28 |     }
29 | }


--------------------------------------------------------------------------------
/src/styles/home.scss:
--------------------------------------------------------------------------------
  1 | @import "colors";
  2 | .home{
  3 |     width: 100%;
  4 |     height: 100vh;
  5 |     background-color: $second;
  6 |     border-radius: 0px 0px 200px 200px;
  7 |     > main{
  8 |         position: absolute;
  9 |         text-transform: uppercase;
 10 |         display: flex;
 11 |         flex-direction: column;
 12 |         align-items: flex-end;
 13 |         width: 100%;
 14 |         height: 100%;
 15 |         justify-content: center;
 16 |         padding: 2rem;
 17 |     
 18 |     h1{
 19 |         font: 400 6rem $text1;
 20 |         color: $first;
 21 |      }
 22 |     p{
 23 |         font: 900 1rem $text1;
 24 |         color: $first;
 25 |      }
 26 |     }
 27 |     &::before{
 28 |         content: "";
 29 |         width: 100%;
 30 |         height: 100%;
 31 |         border-radius: 0px 0px 200px 200px;
 32 |         position: absolute;
 33 |         background: no-repeat center/auto url("../assets/1.png");
 34 |         filter: blur(3px);
 35 |     }
 36 | }
 37 | .home2{
 38 |     width: 100%;
 39 |     height: 100vh;
 40 |     background-color: $second;
 41 |     padding: 500px 0px;
 42 |     display: flex;
 43 |     align-items: center;
 44 |     justify-content: center;
 45 |     margin-top: -200px;
 46 |     > img{
 47 |         animation: imgUp 1.5s linear infinite alternate;
 48 |     }
 49 |     > div{
 50 |         width: 50%;
 51 |         display: flex;
 52 |         flex-direction: column;
 53 |         align-items: center;
 54 |         justify-content: center;
 55 |         padding: 5rem;
 56 |         height: 100vh;
 57 |         p{
 58 |             color: $first;
 59 |             letter-spacing: 2px;
 60 |             word-spacing: 5px;
 61 |             font-family: $text2;
 62 |         }
 63 |     }
 64 | }
 65 | @keyframes imgUp {
 66 |     to{
 67 |         transform: translateY(-20px);
 68 |     }
 69 | }
 70 | 
 71 | .home3{
 72 |     width: 100%;
 73 |     height: 120vh;
 74 |     background-color: $second;
 75 |     margin-top: -200px;
 76 |     display: flex;
 77 |     > div{
 78 |         width: 70%;
 79 |         height: 100vh;
 80 |         background-color: $first;
 81 |         border-radius: 0px 200px 200px 0px;
 82 |         display: flex;
 83 |         flex-direction: column;
 84 |         align-items: center;
 85 |         justify-content: center;
 86 |         padding: 2rem;
 87 |         h1{
 88 |             text-transform: uppercase;
 89 |             border-bottom: 2px solid $dark;
 90 |             padding: 0.5rem;
 91 |             color: $dark;
 92 |         }
 93 |         p{
 94 |             padding: 5rem;
 95 |             letter-spacing: 2px;
 96 |             word-spacing: 5px;
 97 |             font: 100 italic 1.2rem $text2;
 98 |         }
 99 |     }
100 | }
101 | .home4{
102 |     width: 100%;
103 |     height: 100vh;
104 |     background-color: $second;
105 |     display: flex;
106 |     justify-content: flex-end;
107 |     > div{
108 |         background-color: $third;
109 |         border-radius: 100px 0px 0px 100px;
110 |         width: 70%;
111 |         height: 70vh;
112 |         display: flex;
113 |         flex-direction: column;
114 |         align-items: center;
115 |         justify-content: center;
116 |         > h1{
117 |             color: $first;
118 |             text-transform: uppercase;
119 |             width: 140px;
120 |             border-bottom: 2px solid $first;
121 |             padding: 0.5rem;
122 |         }
123 |         > article{
124 |             display: flex;
125 |             margin: 2rem 0;
126 |             flex-wrap: wrap;
127 |             justify-content: center;
128 |             > div{
129 |                 animation: imgUp 0.9s linear infinite alternate;
130 |                 margin: 1rem;
131 |                 height: 10rem;
132 |                 width: 10rem;
133 |                 background-color: $first;
134 |                 border-radius: 50%;
135 |                 display: flex;
136 |                 flex-direction: column;
137 |                 align-items: center;
138 |                 justify-content: center;
139 |                 cursor: pointer;
140 |                 color: $dark;
141 |                 transition: all 0.5s;
142 |                 transition: 0.5s all;
143 |                 &:hover{
144 |                     filter: invert(1);
145 |                 }
146 |                 svg{
147 |                     font-size: 4rem;
148 |                 }
149 |                 p{
150 |                     font: 900 1.2rem $text2;
151 |                 }
152 |             }
153 |         }
154 |     }
155 | }


--------------------------------------------------------------------------------
/src/styles/mediaquery.scss:
--------------------------------------------------------------------------------
  1 | 
  2 | @media screen and (max-width: 768px) {
  3 |    .home{
  4 |     border-radius: 0px 0px 120px 120px;
  5 |     >main h1{
  6 |       font-size: 5rem;
  7 |     }
  8 |     &::before{
  9 |       border-radius: 0px 0px 120px 120px;
 10 |     }
 11 |    }
 12 |    .home2{
 13 |     display: flex;
 14 |     flex-direction: column;
 15 |     > img{
 16 |       margin-top: 100px;
 17 |       width: 100%;
 18 |     }
 19 |     > div{
 20 |       width: 90%;
 21 |       padding: 1rem;
 22 |     }
 23 |   }
 24 |    .home3{
 25 |      height: 100vh;
 26 |      margin-top: -10px;
 27 |      > div{
 28 |         height: 90vh;
 29 |         width: 70%;
 30 |         padding: 1rem;
 31 |         > p{
 32 |             font-size: 16px;
 33 |             padding: 2rem;
 34 |         }
 35 |      }
 36 |     
 37 |    }
 38 |    .home4 {
 39 |     height: 110vh;
 40 |    > div{
 41 |       width:80%;
 42 |       height: 80vh;
 43 |    }
 44 |   }
 45 |   .contact{
 46 |     height: 100vh;
 47 |     width: 100%;
 48 |     > main{
 49 |       height: 80vh;
 50 |       width: 80%;
 51 |       padding: 1rem;
 52 |       h1{
 53 |         text-align: center;
 54 |       }
 55 |       > form{
 56 |         margin: 3rem 1rem;
 57 |         > div{
 58 |           height: 1.5rem;
 59 |           width: 100%;
 60 |           > label{
 61 |             font-size: 1rem;
 62 |             width: 20%;
 63 |           }
 64 |           > input{
 65 |             font-size: 13px;
 66 |             padding: 1rem 2rem 1rem 2rem;
 67 |             width: 80%;
 68 |           }
 69 |         }
 70 |       }
 71 |     }
 72 |   }
 73 | }
 74 | @media screen and (max-width: 520px) {
 75 |     nav{
 76 |       > h1{
 77 |         display: none;
 78 |       }
 79 |       > main{
 80 |         width: 100%;
 81 |         justify-content: center;
 82 |         a {
 83 |           margin: 0.5rem;
 84 |         }
 85 |       }
 86 |     }
 87 |     .home{
 88 |       border-radius: 0px 0px 100px 100px;
 89 |       >main h1{
 90 |       font-size: 4rem;
 91 |       text-align: center;
 92 |      }
 93 |       &::before{
 94 |       border-radius: 0px 0px 100px 100px;
 95 |     }
 96 |     }
 97 |     .home2 > img{
 98 |         margin-top: 150px;
 99 |     }
100 |     .home3{
101 |       height: 120vh;
102 |       > div{
103 |          height: 110vh;
104 |          width: 75%;
105 |          > p{
106 |              font-size: 15px;
107 |          }
108 |       }
109 |      
110 |     }
111 |     .home4 {
112 |       height: 90vh;
113 |      > div{
114 |       height: 80vh;
115 |      > article{
116 |       margin: 1.5rem 0px;
117 |       > div{
118 |       width: 7rem;
119 |       height: 7rem;
120 |       svg{
121 |         font-size: 2.5rem;
122 |       }
123 |       p{
124 |         font-size: 1rem;
125 |       }
126 |     }
127 |   }
128 |      }
129 |     }
130 |     .contact{
131 |       height: 100vh;
132 |       width: 100%;
133 |       > main{
134 |         height: 70vh;
135 |         width: 90%;
136 |         padding: 1rem;
137 |         border-radius: 5px;
138 |         > form{
139 |           margin: 3rem 1rem;
140 |           > div{
141 |             height: 1.5rem;
142 |             width: 100%;
143 |             > label{
144 |               font-size: 0.8rem;
145 |               width: 20%;
146 |             }
147 |             > input{
148 |               font-size: 12px;
149 |               padding: 1rem 2rem 1rem 2rem;
150 |               width: 80%;
151 |             }
152 |           }
153 |         }
154 |       }
155 |     }
156 |      .footer{ 
157 |       height: 50vh;
158 |       grid-template-columns: 1fr;
159 |     > div{
160 |         text-align: center;
161 |     > p {
162 |       margin: 10px 0px;
163 |     }
164 |   }
165 |   }
166 |  }
167 | 


--------------------------------------------------------------------------------