├── dlops.jpg
├── public
    ├── dev.png
    ├── logo.png
    ├── lyceum.png
    ├── shape1.png
    ├── shape14.png
    ├── shape17.png
    ├── shape18.png
    ├── shape19.png
    ├── shape20.png
    ├── shape21.png
    ├── wa-link.png
    ├── about-img.jpg
    ├── about-img2.jpg
    ├── about-img3.jpg
    ├── about-img4.jpg
    ├── marketing.png
    └── css
    │   ├── footer.css
    │   ├── services.css
    │   ├── getstart.css
    │   ├── joinus.css
    │   ├── companies.css
    │   ├── about.css
    │   └── header.css
├── next.config.js
├── netlify.toml
├── .gitignore
├── styles
    ├── Navbar.module.css
    └── globals.css
├── package.json
├── pages
    ├── _app.js
    └── index.js
├── components
    ├── global
    │   └── Navbar.js
    └── home
    │   ├── Aboutus.js
    │   ├── Footer.js
    │   ├── Getstart.js
    │   ├── About.js
    │   ├── Particle.js
    │   ├── Header.js
    │   ├── Companies.js
    │   ├── Joinus.js
    │   └── Services.js
└── README.md


/dlops.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wissen-snake/dlop_ai_landing/HEAD/dlops.jpg


--------------------------------------------------------------------------------
/public/dev.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wissen-snake/dlop_ai_landing/HEAD/public/dev.png


--------------------------------------------------------------------------------
/public/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wissen-snake/dlop_ai_landing/HEAD/public/logo.png


--------------------------------------------------------------------------------
/public/lyceum.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wissen-snake/dlop_ai_landing/HEAD/public/lyceum.png


--------------------------------------------------------------------------------
/public/shape1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wissen-snake/dlop_ai_landing/HEAD/public/shape1.png


--------------------------------------------------------------------------------
/public/shape14.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wissen-snake/dlop_ai_landing/HEAD/public/shape14.png


--------------------------------------------------------------------------------
/public/shape17.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wissen-snake/dlop_ai_landing/HEAD/public/shape17.png


--------------------------------------------------------------------------------
/public/shape18.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wissen-snake/dlop_ai_landing/HEAD/public/shape18.png


--------------------------------------------------------------------------------
/public/shape19.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wissen-snake/dlop_ai_landing/HEAD/public/shape19.png


--------------------------------------------------------------------------------
/public/shape20.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wissen-snake/dlop_ai_landing/HEAD/public/shape20.png


--------------------------------------------------------------------------------
/public/shape21.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wissen-snake/dlop_ai_landing/HEAD/public/shape21.png


--------------------------------------------------------------------------------
/public/wa-link.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wissen-snake/dlop_ai_landing/HEAD/public/wa-link.png


--------------------------------------------------------------------------------
/next.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   // Target must be serverless
3 |   target: 'serverless',
4 | }
5 | 


--------------------------------------------------------------------------------
/public/about-img.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wissen-snake/dlop_ai_landing/HEAD/public/about-img.jpg


--------------------------------------------------------------------------------
/public/about-img2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wissen-snake/dlop_ai_landing/HEAD/public/about-img2.jpg


--------------------------------------------------------------------------------
/public/about-img3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wissen-snake/dlop_ai_landing/HEAD/public/about-img3.jpg


--------------------------------------------------------------------------------
/public/about-img4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wissen-snake/dlop_ai_landing/HEAD/public/about-img4.jpg


--------------------------------------------------------------------------------
/public/marketing.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wissen-snake/dlop_ai_landing/HEAD/public/marketing.png


--------------------------------------------------------------------------------
/netlify.toml:
--------------------------------------------------------------------------------
1 | [build]
2 |   command   = "npm run build"
3 |   functions = "out_functions"
4 |   publish   = "out_publish"


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | .next
3 | .env
4 | .env.build
5 | node_modules/
6 | npm-debug.log*
7 | yarn-debug.log*
8 | yarn-error.log*


--------------------------------------------------------------------------------
/styles/Navbar.module.css:
--------------------------------------------------------------------------------
 1 | .nav {
 2 |   display: flex;
 3 |   justify-content: space-between;
 4 |   align-items: center;
 5 |   height: 120px;
 6 |   padding: 0 2vw;
 7 | }
 8 | .center {
 9 |   display: flex;
10 |   justify-content: space-between;
11 |   align-items: center;
12 | }
13 | .email {
14 |   margin: 0;
15 |   z-index: 1000;
16 |   color: white;
17 | }
18 | 


--------------------------------------------------------------------------------
/public/css/footer.css:
--------------------------------------------------------------------------------
 1 | .social-icons {
 2 |   display: flex;
 3 |   justify-content: space-between;
 4 |   align-items: center;
 5 |   width: 85px;
 6 | }
 7 | @media only screen and (max-width: 540px) {
 8 |   .sm-center {
 9 |     display: flex;
10 |     flex-direction: column;
11 |     align-items: center;
12 |     justify-content: center;
13 |     text-align: center;
14 |   }
15 |   .social-icons {
16 |     margin-top: 1rem;
17 |   }
18 | }
19 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "dlops",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "next",
 7 |     "build": "next build",
 8 |     "postbuild": "next-on-netlify"
 9 |   },
10 |   "dependencies": {
11 |     "next": "10.0.7",
12 |     "next-on-netlify": "^2.8.7",
13 |     "react": "17.0.1",
14 |     "react-dom": "17.0.1",
15 |     "react-parallax-tilt": "^1.4.85",
16 |     "react-particles-js": "^3.4.1",
17 |     "react-scroll-parallax": "^2.3.5"
18 |   }
19 | }
20 | 


--------------------------------------------------------------------------------
/pages/_app.js:
--------------------------------------------------------------------------------
 1 | import '../styles/globals.css'
 2 | import Head from 'next/head'
 3 | 
 4 | function MyApp({ Component, pageProps }) {
 5 |   return (
 6 |     <>
 7 |       <Head>
 8 |         <link
 9 |           rel='stylesheet'
10 |           href='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css'
11 |         ></link>
12 |         <link
13 |           href='https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css'
14 |           rel='stylesheet'
15 |         />
16 |       </Head>
17 |       <Component {...pageProps} />{' '}
18 |     </>
19 |   )
20 | }
21 | 
22 | export default MyApp
23 | 


--------------------------------------------------------------------------------
/components/global/Navbar.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import styles from '../../styles/Navbar.module.css'
 3 | import Image from 'next/image'
 4 | 
 5 | const Navbar = () => {
 6 |   return (
 7 |     <nav className={styles.nav}>
 8 |       <p></p>
 9 |       <Image src='/logo.png' alt='logo' width={200} height='auto' />
10 |       <div className={styles.center}>
11 |         <i className='ri-mail-send-line text-white'></i>
12 |         <a href='mailto:enquiries@dlops.ai' className={styles.email}>
13 |           &nbsp;enquiries@dlops.ai
14 |         </a>
15 |       </div>
16 |     </nav>
17 |   )
18 | }
19 | 
20 | export default Navbar
21 | 


--------------------------------------------------------------------------------
/components/home/Aboutus.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import Head from 'next/head'
 3 | 
 4 | const Aboutus = () => {
 5 |   return (
 6 |     <>
 7 |       <Head>
 8 |         <link href='/css/joinus.css' rel='stylesheet' />
 9 |       </Head>
10 |       <section>
11 |         <div id='steps' className='dlops-join-area ptb-100'>
12 |           <div className='container'>
13 |             <div className='section-title'>
14 |               <span>About Us</span>
15 |               <img src="/shape14.png" alt="curve" className='g-line'/>
16 |               <h2>Who Are We?</h2>
17 |               <p className='g-des'>
18 |                 We are a network of designers, software engineers, data
19 |                 scientists and marketers whose passion for digital technologies
20 |                 binds us together to form this network of talents with abundant
21 |                 and diverse capabilities to tackle the most complex
22 |                 applications.
23 |               </p>
24 |             </div>
25 |           </div>
26 |         </div>
27 |       </section>
28 |     </>
29 |   )
30 | }
31 | 
32 | export default Aboutus
33 | 


--------------------------------------------------------------------------------
/components/home/Footer.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import Head from 'next/head'
 3 | 
 4 | const Services = () => {
 5 |   return (
 6 |     <>
 7 |       <Head>
 8 |         <link href='/css/footer.css' rel='stylesheet' />
 9 |       </Head>
10 |       <section className='py-5  px-5 between flex-wrap text-muted sm-center'>
11 |         <div className='c'>Copyright @2021 dlops. All Rights Reserved</div>
12 |         <div className='social-icons'>
13 |           <a
14 |             href='https://wa.me/%2B85267762922?text=Hello%20There!'
15 |             target='_blank'
16 |             rel='noopener noreferrer'
17 |           >
18 |             <i className='ri-whatsapp-line ri-lg lh-0'></i>
19 |           </a>
20 |           <a
21 |             href='mailto:enquiries@dlops.ai'
22 |             target='_blank'
23 |             rel='noopener noreferrer'
24 |           >
25 |             <i className='ri-mail-line ri-lg lh-0'></i>
26 |           </a>
27 |           <a
28 |             href='https://www.instagram.com/dlopsdev'
29 |             target='_blank'
30 |             rel='noopener noreferrer'
31 |           >
32 |             <i className='ri-instagram-line ri-lg lh-0'></i>
33 |           </a>
34 |         </div>
35 |       </section>
36 |     </>
37 |   )
38 | }
39 | 
40 | export default Services
41 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | <h1 align="center">Welcome to Dlops 👋</h1>
 2 | <p align="center">
 3 |   <img alt="Version" src="https://img.shields.io/badge/version-1.0.0-blue.svg?cacheSeconds=2592000" />
 4 |     <img src="https://camo.githubusercontent.com/e13276d25e087473204c677751e4d9b9b6ea5fbd/68747470733a2f2f7365637572652e7472617669732d63692e6f72672f61757468302f6e6f64652d6a736f6e776562746f6b656e2e7376673f6272616e63683d6d6173746572" alt="Build Status" style="max-width:100%;">
 5 | </p>
 6 | <p align="center">
 7 | <a  href="https://dlopsai.netlify.app/">Visit Website</a>
 8 | </p
 9 | 
10 | 
11 | > **Description:**  dlops AI landing page
12 | 
13 | ​                 
14 | 
15 | <h4 align="center"> #Nextjs </h4>
16 | 
17 | ### All Links Here :link:
18 | 
19 | | LIVE URL | https://dlopsai.netlify.app/ |
20 | | :------: | :--------------------------: |
21 | |          |                              |
22 | |          |                              |
23 | |          |                              |
24 | 
25 | > Install:saxophone: root & client folder
26 | 
27 | ```sh
28 | npm install
29 | ```
30 | 
31 | ## Usage
32 | 
33 | ```sh
34 | npm run dev
35 | ```
36 | 
37 | ## Learn More
38 | 
39 | To learn more about Next.js, take a look at the following resources:
40 | 
41 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
42 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
43 | 
44 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
45 | 
46 | 
47 | 


--------------------------------------------------------------------------------
/components/home/Getstart.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import Head from 'next/head'
 3 | 
 4 | const Services = () => {
 5 |   return (
 6 |     <>
 7 |       <Head>
 8 |         <link href='/css/getstart.css' rel='stylesheet' />
 9 |       </Head>
10 |       <section className='get-start-area pt-5 bg-cream'>
11 |         <div className='container'>
12 |           <div className='row align-items-center'>
13 |             <div className='col-lg-12'>
14 |               <div className='get-start-box'>
15 |                 <div className='col-lg-8'>
16 |                   <div className='section-heading'>
17 |                     <h5 className='section__meta'>#get in touch</h5>
18 |                     <h2 className='section__title'>
19 |                       Do you have any projects?
20 |                     </h2>
21 |                     <p className='section__sub'>
22 |                       Contact us without any hesitate.
23 |                     </p>
24 |                   </div>
25 |                 </div>
26 |                 <div className='col-lg-4'>
27 |                   <div className='button-shared text-right'>
28 |                     <a
29 |                       className='theme-btn'
30 |                       href='mailto:enquiries@dlops.ai'
31 |                       target='_blank'
32 |                       rel='noopener noreferrer'
33 |                     >
34 |                       contact us <i className='ri-arrow-right-line text-white'></i>
35 |                     </a>
36 |                   </div>
37 |                 </div>
38 |               </div>
39 |             </div>
40 |           </div>
41 |         </div>
42 |       </section>
43 |     </>
44 |   )
45 | }
46 | 
47 | export default Services
48 | 


--------------------------------------------------------------------------------
/components/home/About.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import Head from 'next/head'
 3 | import Tilt from 'react-parallax-tilt'
 4 | const About = ({ img, title, heading, brief }) => {
 5 |   return (
 6 |     <>
 7 |       <Head>
 8 |         <link href='/css/about.css' rel='stylesheet' />
 9 |       </Head>
10 |       <section className='dlops-team-area section-padding-120 mb-100'>
11 |         <div id='about' className='about-us-two pt-70 pb-100'>
12 |           <div className='container'>
13 |             <div className='row align-items-center'>
14 |               <div className='col-lg-6'>
15 |                 <div className='about-two-img'>
16 |                   <Tilt
17 |                     className='parallax-effect-glare-scale'
18 |                     perspective={500}
19 |                     glareEnable={true}
20 |                     glareMaxOpacity={0.45}
21 |                     scale={1.02}
22 |                   >
23 |                     <img src={img} alt='Image' />
24 |                   </Tilt>
25 |                   <div className='about-shape'>
26 |                     <img src='/shape17.png' className='shape-17' alt='Shape' />
27 |                     <img src='/shape18.png' className='shape-18' alt='Shape' />
28 |                     <img src='/shape19.png' className='shape-19' alt='Shape' />
29 |                     <img src='/shape20.png' className='shape-20' alt='Shape' />
30 |                   </div>
31 |                 </div>
32 |               </div>
33 |               <div className='col-lg-6'>
34 |                 <div className='about-two-text'>
35 |                   <div className='section-title'>
36 |                     <span>{title}</span>
37 |                     <h2>{heading}</h2>
38 |                     <p>{brief}</p>
39 |                   </div>
40 |                 </div>
41 |               </div>
42 |             </div>
43 |           </div>
44 |         </div>
45 |       </section>
46 |     </>
47 |   )
48 | }
49 | 
50 | export default About
51 | 


--------------------------------------------------------------------------------
/public/css/services.css:
--------------------------------------------------------------------------------
 1 | h3 {
 2 |   margin-top: 0;
 3 |   margin-bottom: 0.5rem;
 4 | }
 5 | p {
 6 |   margin-top: 0;
 7 |   margin-bottom: 1rem;
 8 | }
 9 | h3 {
10 |   margin-bottom: 0.5rem;
11 |   font-weight: 500;
12 |   line-height: 1.2;
13 | }
14 | h3 {
15 |   font-size: 1.75rem;
16 | }
17 | 
18 | h3 {
19 |   color: #242424;
20 | }
21 | p {
22 |   margin-bottom: 10px;
23 |   line-height: 1.7;
24 |   color: #7f7f7f;
25 | }
26 | p:last-child {
27 |   margin-bottom: 0;
28 | }
29 | .our-service-card {
30 |   padding: 40px 30px;
31 |   -webkit-box-shadow: 0px 0px 20px 1px #e0dddd;
32 |   box-shadow: 0px 0px 20px 1px #e0dddd;
33 |   background-color: #ffffff;
34 |   margin-bottom: 30px;
35 |   border-radius: 10px;
36 |   text-align: center;
37 |   -webkit-transition: all 0.5s;
38 |   transition: all 0.5s;
39 | }
40 | .our-service-card i {
41 |   font-size: 30px;
42 |   width: 55px;
43 |   height: 55px;
44 |   line-height: 55px;
45 |   border-radius: 5px;
46 |   text-align: center;
47 |   margin-bottom: 25px;
48 |   color: #ffffff;
49 | }
50 | .our-service-card i.bg-1 {
51 |   background-color: #567df4;
52 | }
53 | .our-service-card i.bg-2 {
54 |   background-color: #f6d665;
55 | }
56 | .our-service-card i.bg-3 {
57 |   background-color: #fb9ed7;
58 | }
59 | .our-service-card i.bg-4 {
60 |   background-color: #a78bc5;
61 | }
62 | .our-service-card i.bg-5 {
63 |   background-color: #f47456;
64 | }
65 | .our-service-card i.bg-6 {
66 |   background-color: #58d7c1;
67 | }
68 | .our-service-card h3 {
69 |   font-size: 22px;
70 |   margin-bottom: 15px;
71 | }
72 | .our-service-card:hover {
73 |   margin-top: -5px;
74 |   -webkit-box-shadow: 0px 8px 20px 0px #b9b8b9;
75 |   box-shadow: 0px 8px 20px 0px #b9b8b9;
76 |   background-color: #567df4;
77 | }
78 | .our-service-card:hover i {
79 |   background-color: #ffeae5;
80 |   color: #f47456;
81 | }
82 | .our-service-card:hover h3 {
83 |   color: #ffffff;
84 | }
85 | .our-service-card:hover p {
86 |   color: #f9f9f9;
87 | }
88 | @media only screen and (max-width: 767px) {
89 |   p {
90 |     font-size: 15px;
91 |   }
92 | }
93 | @media only screen and (min-width: 576px) and (max-width: 767px) {
94 |   .our-service-card {
95 |     padding: 30px 18px;
96 |   }
97 | }


--------------------------------------------------------------------------------
/public/css/getstart.css:
--------------------------------------------------------------------------------
 1 | .theme-btn {
 2 |   font-size: 15px;
 3 |   text-transform: uppercase;
 4 |   background-color: #6c5ce7;
 5 |   color: #fff;
 6 |   font-weight: 500;
 7 |   padding: 1px 20px;
 8 |   line-height: 50px;
 9 |   -webkit-border-radius: 5px;
10 |   -moz-border-radius: 5px;
11 |   border-radius: 5px;
12 |   position: relative;
13 |   z-index: 1;
14 |   display: inline-block;
15 |   -webkit-transition: all 0.3s;
16 |   -moz-transition: all 0.3s;
17 |   -ms-transition: all 0.3s;
18 |   -o-transition: all 0.3s;
19 |   transition: all 0.3s;
20 |   border: none;
21 | }
22 | 
23 | .theme-btn:hover {
24 |   color: #fff;
25 |   background-color: #13137f;
26 |   -webkit-box-shadow: 0 12px 24px -6px rgba(93, 80, 197, 0.2);
27 |   -moz-box-shadow: 0 12px 24px -6px rgba(93, 80, 197, 0.2);
28 |   box-shadow: 0 12px 24px -6px rgba(93, 80, 197, 0.2);
29 |   -webkit-transform: translateY(-1px);
30 |   -moz-transform: translateY(-1px);
31 |   -ms-transform: translateY(-1px);
32 |   -o-transform: translateY(-1px);
33 |   transform: translateY(-1px);
34 | }
35 | @media only screen and (min-width: 768px) and (max-width: 991px) {
36 |   .get-start-area {
37 |     text-align: center;
38 |   }
39 | }
40 | @media only screen and (min-width: 480px) and (max-width: 767px) {
41 |   .get-start-area {
42 |     text-align: center;
43 |   }
44 | }
45 | @media only screen and (min-width: 320px) and (max-width: 479px) {
46 |   .get-start-area {
47 |     text-align: center;
48 |   }
49 | }
50 | .get-start-area .get-start-box {
51 |   background-color: #fff;
52 |   border: 1px solid rgba(127, 136, 151, 0.2);
53 |   -webkit-border-radius: 8px;
54 |   -moz-border-radius: 8px;
55 |   border-radius: 8px;
56 |   box-shadow: 0 10px 15px -3px rgb(0 0 0 / 10%), 0 4px 6px -2px rgb(0 0 0 / 5%);
57 |   display: flex;
58 |   -ms-flex-wrap: wrap;
59 |   flex-wrap: wrap;
60 |   -ms-flex-align: center;
61 |   align-items: center;
62 |   padding: 40px 30px;
63 | }
64 | .get-start-area .get-start-box .section-heading .section__title {
65 |   font-size: 35px;
66 |   margin-bottom: 8px;
67 | }
68 | .get-start-area .get-start-box .section-heading .section__sub {
69 |   font-size: 18px;
70 |   font-weight: 500;
71 | }
72 | @media only screen and (min-width: 768px) and (max-width: 991px) {
73 |   .get-start-area .get-start-box .button-shared.text-right {
74 |     margin-top: 30px;
75 |     text-align: center !important;
76 |   }
77 | }
78 | @media only screen and (min-width: 480px) and (max-width: 767px) {
79 |   .get-start-area .get-start-box .button-shared.text-right {
80 |     margin-top: 30px;
81 |     text-align: center !important;
82 |   }
83 | }
84 | @media only screen and (min-width: 320px) and (max-width: 479px) {
85 |   .get-start-area .get-start-box .button-shared.text-right {
86 |     margin-top: 30px;
87 |     text-align: center !important;
88 |   }
89 | }


--------------------------------------------------------------------------------
/pages/index.js:
--------------------------------------------------------------------------------
 1 | import React, { useState, useEffect, useRef } from 'react'
 2 | import Head from 'next/head'
 3 | import Header from './../components/home/Header'
 4 | import Joinus from '../components/home/Joinus'
 5 | import Companies from '../components/home/Companies'
 6 | import Aboutus from '../components/home/Aboutus'
 7 | import About from '../components/home/About'
 8 | import Services from '../components/home/Services'
 9 | import Getstart from '../components/home/Getstart'
10 | import Footer from '../components/home/Footer'
11 | import { ParallaxProvider } from 'react-scroll-parallax'
12 | 
13 | export default function Home() {
14 |   return (
15 |     <>
16 |       <Head>
17 |         <title>Dlops</title>
18 |       </Head>
19 |       <header>
20 |         <Header />
21 |       </header>
22 |       <main className='main'>
23 |         <Aboutus />
24 |         <ParallaxProvider>
25 |           <Companies />
26 |         </ParallaxProvider>
27 |         <ParallaxProvider>
28 |           <Joinus />
29 |         </ParallaxProvider>
30 |         <Services />
31 |         <About
32 |           img='/dev.png'
33 |           title='Dev Team'
34 |           heading='We Are Supporting All Kind Of IT Services Since 2021'
35 |           brief='But I must explain to you how all this mistaken idea of
36 |                       denouncing pleasure praising pain was born and I will give
37 |                       you a complete account Sed ut perspiciatis unde omnis iste
38 |                       natus error sit voluptatem accusantium doloremque
39 |                       laudantium, totam rem aperiam consectetur adipiscing elit.'
40 |         />
41 |         <About
42 |           img='/marketing.png'
43 |           title='Marketing Team'
44 |           heading='Helping clients with conversion focused marketing'
45 |           brief='But I must explain to you how all this mistaken idea of
46 |                       denouncing pleasure praising pain was born and I will give
47 |                       you a complete account Sed ut perspiciatis unde omnis iste
48 |                       natus error sit voluptatem accusantium doloremque
49 |                       laudantium, totam rem aperiam consectetur adipiscing elit.'
50 |         />
51 |         <About
52 |           img='/lyceum.png'
53 |           title='Lyceum Team'
54 |           heading='We help each other to learn new technologies everyday'
55 |           brief='But I must explain to you how all this mistaken idea of
56 |                       denouncing pleasure praising pain was born and I will give
57 |                       you a complete account Sed ut perspiciatis unde omnis iste
58 |                       natus error sit voluptatem accusantium doloremque
59 |                       laudantium, totam rem aperiam consectetur adipiscing elit.'
60 |         />
61 |       </main>
62 |       <footer>
63 |         <Getstart />
64 |         <Footer />
65 |       </footer>
66 |     </>
67 |   )
68 | }
69 | 


--------------------------------------------------------------------------------
/styles/globals.css:
--------------------------------------------------------------------------------
  1 | @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700&display=swap');
  2 | html,
  3 | body {
  4 |   padding: 0;
  5 |   margin: 0;
  6 |   font-family: 'Inter', Arial, -apple-system;
  7 | }
  8 | 
  9 | a {
 10 |   color: inherit;
 11 |   text-decoration: none;
 12 | }
 13 | 
 14 | *,
 15 | *::before,
 16 | *::after {
 17 |   box-sizing: border-box;
 18 | }
 19 | @media print {
 20 |   *,
 21 |   ::after,
 22 |   ::before {
 23 |     text-shadow: none !important;
 24 |     box-shadow: none !important;
 25 |   }
 26 |   h3,
 27 |   p {
 28 |     orphans: 3;
 29 |     widows: 3;
 30 |   }
 31 |   h3 {
 32 |     page-break-after: avoid;
 33 |   }
 34 | }
 35 | .center {
 36 |   display: flex;
 37 |   justify-content: center;
 38 |   align-items: center;
 39 | }
 40 | .between {
 41 |   display: flex;
 42 |   justify-content: space-between;
 43 |   align-items: center;
 44 | }
 45 | 
 46 | .bg-cream {
 47 |   background-color: #f6f4ff !important;
 48 | }
 49 | 
 50 | .inline-items {
 51 |   display: flex;
 52 |   align-items: center;
 53 | }
 54 | 
 55 | .g-des {
 56 |   max-width: 585px !important;
 57 | }
 58 | 
 59 | .g-line {
 60 |   display: flex;
 61 |   justify-content: center;
 62 |   align-items: center;
 63 |   margin: 0 auto;
 64 | }
 65 | .section-title {
 66 |   text-align: center;
 67 |   max-width: 660px;
 68 |   margin: 0 auto 60px;
 69 | }
 70 | .section-title span {
 71 |   font-size: 16px;
 72 |   font-weight: 500;
 73 |   color: #13137f;
 74 |   display: inline-block;
 75 |   margin-bottom: 15px;
 76 |   line-height: 1;
 77 | }
 78 | .section-title h2 {
 79 |   font-size: 40px;
 80 |   margin-bottom: 15px;
 81 | }
 82 | .section-title p {
 83 |   max-width: 525px;
 84 |   margin: auto;
 85 | }
 86 | @media only screen and (max-width: 767px) {
 87 |   p {
 88 |     font-size: 15px;
 89 |   }
 90 |   .ptb-100 {
 91 |     padding-top: 50px;
 92 |     padding-bottom: 50px;
 93 |   }
 94 |   .section-title {
 95 |     margin: 0 auto 30px;
 96 |   }
 97 |   .section-title span {
 98 |     font-size: 13px;
 99 |     margin-bottom: 5px;
100 |   }
101 |   .section-title h2 {
102 |     font-size: 25px;
103 |   }
104 | }
105 | 
106 | .lh-0 {
107 |   line-height: 0 !important;
108 | }
109 | 
110 | .section-heading .section__meta {
111 |   display: inline-block;
112 |   text-transform: uppercase;
113 |   font-size: 14px;
114 |   color: #13137f;
115 |   background-color: rgba(108, 92, 231, 0.1);
116 |   padding: 5px 10px;
117 |   -webkit-border-radius: 4px;
118 |   -moz-border-radius: 4px;
119 |   border-radius: 4px;
120 |   letter-spacing: 0.6px;
121 |   margin-bottom: 15px;
122 |   font-weight: 500;
123 | }
124 | .meta {
125 |     display: inline-flex;
126 |     margin: 0 auto;
127 |     width: 100%;
128 |     justify-content: center;
129 |     align-items: center;
130 |     text-transform: uppercase;
131 |     font-size: 14px;
132 |     color: #13137f;
133 |     background-color: rgba(108, 92, 231, 0.1);
134 |     padding: 5px 10px;
135 |     border-radius: 4px;
136 |     letter-spacing: 0.6px;
137 |     margin-bottom: 15px;
138 |     font-weight: 500;
139 | }
140 | 
141 |   .mt-100 {
142 |     padding-top: 50px;
143 |   }
144 |   .mb-100 {
145 |     padding-bottom: 50px;
146 |   }


--------------------------------------------------------------------------------
/components/home/Particle.js:
--------------------------------------------------------------------------------
  1 | import React, { Component } from "react";
  2 | import Particles from "react-particles-js";
  3 | 
  4 | class Particle extends Component {
  5 |   state = { width: "0px", height: "0px" };
  6 |   componentDidMount() {
  7 |     this.updateWindowDimensions();
  8 |     window.addEventListener("resize", this.updateWindowDimensions);
  9 |   }
 10 |   componentWillUnmount() {
 11 |     window.removeEventListener("resize", this.updateWindowDimensions);
 12 |   }
 13 |   updateWindowDimensions = () => {
 14 |     this.setState({
 15 |       width: `${window.innerWidth}px`,
 16 |       height: `${window.innerHeight}px`
 17 |     });
 18 |   };
 19 |   render() {
 20 |     const { width, height } = this.state;
 21 |     return (
 22 |       <Particles
 23 |         {...this.state}
 24 |         params={{
 25 |           particles: {
 26 |             number: {
 27 |               value: 40,
 28 |               density: {
 29 |                 enable: true,
 30 |                 value_area: 300
 31 |               }
 32 |             },
 33 |             color: {
 34 |               value: "#ffffff"
 35 |             },
 36 |             shape: {
 37 |               type: "circle",
 38 |               stroke: {
 39 |                 width: 0,
 40 |                 color: "#000000"
 41 |               },
 42 |              
 43 |             },
 44 |             opacity: {
 45 |               value: 6,
 46 |               random: true,
 47 |               anim: {
 48 |                 enable: true,
 49 |                 speed: 1,
 50 |                 opacity_min: 1,
 51 |                 sync: false
 52 |               }
 53 |             },
 54 |             size: {
 55 |               value: 5,
 56 |               random: true,
 57 |               anim: {
 58 |                 enable: true,
 59 |                 speed: 2,
 60 |                 size_min: 0.1,
 61 |                 sync: false
 62 |               }
 63 |             },
 64 |             line_linked: {
 65 |               enable_auto: true,
 66 |               distance: 100,
 67 |               color: "#95BF77",
 68 |               opacity: 1,
 69 |               width: 1,
 70 |               condensed_mode: {
 71 |                 enable: false,
 72 |                 rotateX: 600,
 73 |                 rotateY: 600
 74 |               }
 75 |             },
 76 |             move: {
 77 |               enable: true,
 78 |               speed: 6,
 79 |               direction: "none",
 80 |               random: false,
 81 |               straight: false,
 82 |               out_mode: "out",
 83 |               bounce: false,
 84 |               attract: {
 85 |                 enable: false,
 86 |                 rotateX: 600,
 87 |                 rotateY: 1200
 88 |               }
 89 |             }
 90 |           },
 91 |           interactivity: {
 92 |             detect_on: "canvas",
 93 |             events: {
 94 |               onhover: {
 95 |                 enable: false
 96 |               },
 97 |               onclick: {
 98 |                 enable: false
 99 |               },
100 |               resize: true
101 |             }
102 |           },
103 |           retina_detect: true
104 |         }}
105 |       />
106 |     );
107 |   }
108 | }
109 | 
110 | export default Particle
111 | 


--------------------------------------------------------------------------------
/components/home/Header.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import  Head from 'next/head';
 3 | import Navbar from './../global/Navbar'
 4 | import Particle from './Particle';
 5 | 
 6 | const Header = () => {
 7 |   return (
 8 |     <>
 9 |       <Head>
10 |         <link href='/css/header.css' rel='stylesheet' />
11 |       </Head>
12 |       <section className='welcome-area demo-hero' id='home'>
13 |         <Navbar />
14 |         <Particle/>
15 |         {/* Background Shape*/}
16 |         <div className='background-shape'>
17 |           {/* <img src='/wave.svg' className='wave' /> */}
18 |           <div
19 |             className='circle3 wow fadeInRightBig'
20 |             style={{
21 |               visibility: 'visible',
22 |               animationDuration: '4000ms',
23 |               animationName: 'fadeInRightBig',
24 |             }}
25 |           />
26 |           <div
27 |             className='circle4 wow fadeInRightBig'
28 |             style={{
29 |               visibility: 'visible',
30 |               animationDuration: '4000ms',
31 |               animationName: 'fadeInRightBig',
32 |             }}
33 |           />
34 |         </div>
35 |         {/* Background Animation*/}
36 |         <div className='background-animation'>
37 |           <div className='star-ani' />
38 |           <div className='cloud-ani' />
39 |           <div className='circle-ani' />
40 |           <div className='box-ani' />
41 |         </div>
42 | 
43 |         <div className='container h-100'>
44 |           <div className='row h-100 align-items-center justify-content-center'>
45 |             {/* Welcome Content*/}
46 |             <div className='col-12 col-md-8'>
47 |               <div className='welcome-content text-center'>
48 |                 <h6 className='version-number mb-3'>Complex</h6>
49 |                 <div className='animated--headline'>
50 |                   <h4 className='ah-headline animated-heading clip is-full-width'>
51 |                     <span>Solve problem with dlops</span>
52 |                   </h4>
53 |                 </div>
54 | 
55 |                 <p
56 |                   className='mb-4 wow fadeInUp'
57 |                   style={{
58 |                     visibility: 'visible',
59 |                     animationDuration: '1000ms',
60 |                     animationDelay: '200ms',
61 |                     animationName: 'fadeInUp',
62 |                   }}
63 |                 >
64 |                   Application is Complex. Business is Complex. Complexity is Our
65 |                   Bread and Butter. Deconstruct Your
66 |                   <span className='font-weight-bold text-warning'>
67 |                     &nbsp;Problem
68 |                   </span>
69 |                   &nbsp;Now.
70 |                 </p>
71 |                 <a
72 |                   className='btn dlops-btn white-btn mt-3 wow fadeInUp'
73 |                   href='mailto:enquiries@dlops.ai'
74 |                   style={{
75 |                     visibility: 'visible',
76 |                     animationDuration: '1000ms',
77 |                     animationDelay: '400ms',
78 |                     animationName: 'fadeInUp',
79 |                   }}
80 |                 >
81 |                   Contact Now
82 |                 </a>
83 |               </div>
84 |             </div>
85 |           </div>
86 |         </div>
87 |       </section>
88 |     </>
89 |   )
90 | }
91 | 
92 | export default Header
93 | 


--------------------------------------------------------------------------------
/components/home/Companies.js:
--------------------------------------------------------------------------------
  1 | import React from 'react'
  2 | import Head from 'next/head'
  3 | 
  4 | const Aboutus = () => {
  5 |   return (
  6 |     <>
  7 |       <Head>
  8 |         <link href='/css/joinus.css' rel='stylesheet' />
  9 |         <link href='/css/companies.css' rel='stylesheet' />
 10 |       </Head>
 11 |       <section className='bg-cream'>
 12 |         <div id='steps' className='dlops-join-area ptb-100'>
 13 |           <div className='container'>
 14 |             <div className='row'>
 15 |               <div className='col-lg-6'>
 16 |                 <div className='about-item'>
 17 |                   <div className='about-heading section-heading'>
 18 |                     <h5 className='section__meta'>About our company</h5>
 19 |                     <h2 className='section__title'>
 20 |                       We Run on Collective Intelligence
 21 |                     </h2>
 22 |                     <div className='section-divider' />
 23 |                   </div>
 24 |                   {/* end section-heading */}
 25 |                   <div className='section-description'>
 26 |                     <p className='section__desc'>
 27 |                       Projects start with a problem statement. Solutions then
 28 |                       logical follow. Project are made of tasks.
 29 |                       <a
 30 |                         href='http://dlops.ai'
 31 |                         target='_blank'
 32 |                         rel='noopener noreferrer'
 33 |                       >
 34 |                         &nbsp;<strong>Dlops</strong>
 35 |                       </a>{' '}
 36 |                       executes projects on this distributed talent network. Our
 37 |                       distributed engineering efforts are sourced based on each
 38 |                       task. Each project is carried out with carefully selected
 39 |                       talents for the right components.
 40 |                     </p>
 41 |                   </div>
 42 |                   {/* end section-description */}
 43 |                   <ul className='list-items'>
 44 |                     <li>
 45 |                       <div className='inline-items'>
 46 |                         <i className='ri-team-fill ri-2x text-warning'></i>
 47 |                         <h3 className='m-0 ml-1'>Dlops Dev</h3>
 48 |                       </div>
 49 |                       <p>
 50 |                         Projects are deconstructed, analysed, planned and
 51 |                         executed by our development team where they selectively
 52 |                         match our network of technologists to tasks that befit
 53 |                         their skills and experiences.
 54 |                       </p>
 55 |                     </li>
 56 |                     <li>
 57 |                       <div className='inline-items'>
 58 |                         <i className='ri-file-list-3-fill ri-2x text-warning'></i>
 59 |                         <h3 className='m-0 ml-1'>Lyceum</h3>
 60 |                       </div>
 61 |                       <p>
 62 |                         Lyceum is the exclusive community where passionate
 63 |                         technologists of every skill and experience level get
 64 |                         together to share, learn and empower each other. The Dev
 65 |                         team is also responsible for documenting, maintaining
 66 |                         and distributing software knowledge realised within the
 67 |                         community, through our publishing channels such as
 68 |                         Medium and LinkedIn.
 69 |                       </p>
 70 |                     </li>
 71 |                   </ul>
 72 |                 </div>
 73 |                 {/* end about-item */}
 74 |               </div>
 75 |               {/* end col-lg-6 */}
 76 |               <div className='col-lg-6'>
 77 |                 <div className='image-box'>
 78 |                   <img
 79 |                     src='/about-img.jpg'
 80 |                     alt='about-img'
 81 |                     className='img__item'
 82 |                   />
 83 |                   <img
 84 |                     src='/about-img2.jpg'
 85 |                     alt='about-img'
 86 |                     className='img__item'
 87 |                   />
 88 |                   <img
 89 |                     src='/about-img3.jpg'
 90 |                     alt='about-img'
 91 |                     className='img__item'
 92 |                   />
 93 |                   <img
 94 |                     src='/about-img4.jpg'
 95 |                     alt='about-img'
 96 |                     className='img__item'
 97 |                   />
 98 |                 </div>
 99 |                 {/* end image-box */}
100 |               </div>
101 |               {/* end col-lg-6 */}
102 |             </div>
103 |           </div>
104 |         </div>
105 |       </section>
106 |     </>
107 |   )
108 | }
109 | 
110 | export default Aboutus
111 | 


--------------------------------------------------------------------------------
/public/css/joinus.css:
--------------------------------------------------------------------------------
  1 | img {
  2 |   max-width: 100%;
  3 | }
  4 | h2,
  5 | h3 {
  6 |   color: #242424;
  7 |   font-weight: bold;
  8 | }
  9 | p {
 10 |   margin-bottom: 10px;
 11 |   line-height: 1.7;
 12 |   color: #7f7f7f;
 13 | }
 14 | p:last-child {
 15 |   margin-bottom: 0;
 16 | }
 17 | .ptb-100 {
 18 |   padding-top: 100px;
 19 |   padding-bottom: 100px;
 20 | }
 21 | 
 22 | .dlops-join-area .dlops-join-img {
 23 |   position: relative;
 24 |   z-index: 1;
 25 | }
 26 | .dlops-join-area .dlops-join-img .step-1 {
 27 |   -webkit-box-shadow: 0px 0px 20px #dddddd;
 28 |   box-shadow: 0px 0px 20px #dddddd;
 29 |   border-radius: 70px;
 30 | }
 31 | .dlops-join-area .dlops-join-img .shape-1 {
 32 |   position: absolute;
 33 |   top: -50px;
 34 |   left: -80px;
 35 |   z-index: -1;
 36 |   -webkit-animation: moveLeftBounce 3s linear infinite;
 37 |   animation: moveLeftBounce 3s linear infinite;
 38 | }
 39 | .dlops-join-area .dlops-join-img .shape-21 {
 40 |   position: absolute;
 41 |   right: 60px;
 42 |   bottom: -40px;
 43 |   z-index: -1;
 44 |   -webkit-animation-name: rotateme;
 45 |   animation-name: rotateme;
 46 |   -webkit-animation-duration: 20s;
 47 |   animation-duration: 20s;
 48 |   -webkit-animation-iteration-count: infinite;
 49 |   animation-iteration-count: infinite;
 50 |   -webkit-animation-timing-function: linear;
 51 |   animation-timing-function: linear;
 52 | }
 53 | .dlops-join-area .dlops-join-card {
 54 |   position: relative;
 55 |   margin-bottom: 30px;
 56 |   padding-bottom: 30px;
 57 |   border-bottom: 1px solid #f2f1f3;
 58 | }
 59 | .dlops-join-area .dlops-join-card:last-child {
 60 |   margin-bottom: 0;
 61 |   padding-bottom: 0;
 62 |   border-bottom: none;
 63 | }
 64 | .dlops-join-area .dlops-join-card .step-signle-card {
 65 |   text-align: center;
 66 |   padding: 25px 20px;
 67 |   background-color: #ffffff;
 68 |   -webkit-box-shadow: 0px 0px 20px #dddddd;
 69 |   box-shadow: 0px 0px 20px #dddddd;
 70 |   border-radius: 10px;
 71 |   position: relative;
 72 | }
 73 | .dlops-join-area .dlops-join-card .step-signle-card i {
 74 |   color: #ffffff;
 75 |   width: 55px;
 76 |   height: 55px;
 77 |   line-height: 55px;
 78 |   text-align: center;
 79 |   border-radius: 5px;
 80 |   margin-bottom: 15px;
 81 | }
 82 | 
 83 | .dlops-join-area .dlops-join-card .step-signle-card span {
 84 |   position: absolute;
 85 |   top: 0;
 86 |   right: 10px;
 87 |   font-size: 50px;
 88 |   font-weight: 700;
 89 |   color: #f4f4f5;
 90 |   line-height: 1;
 91 |   z-index: -1;
 92 | }
 93 | .dlops-join-area .dlops-join-card .step-signle-card h3 {
 94 |   font-size: 18px;
 95 |   margin-bottom: 0;
 96 |   line-height: 1.4;
 97 | }
 98 | .dlops-join-area .dlops-join-card .step-signle-card.step-p {
 99 |   padding: 25px 33px;
100 | }
101 | /* responsive.css */
102 | 
103 | .dlops-join-area .dlops-join-img {
104 |   margin-bottom: 30px;
105 |   text-align: center;
106 | }
107 | .dlops-join-area .dlops-join-img .step-1 {
108 |   width: 440px;
109 |   border-radius: 33px;
110 |   min-width: 240px;
111 | }
112 | .dlops-join-area .dlops-join-img .shape-1 {
113 |   max-width: 200px;
114 |   top: 0;
115 |   left: -15px;
116 | }
117 | .dlops-join-area .dlops-join-img .shape-21 {
118 |   right: 20px;
119 |   max-width: 100px;
120 |   bottom: 0;
121 | }
122 | 
123 | @media only screen and (max-width: 575px) {
124 |   .dlops-join-area .dlops-join-card {
125 |     margin-bottom: 15px;
126 |     padding-bottom: 15px;
127 |   }
128 |   .dlops-join-area .dlops-join-card:last-child {
129 |     margin-bottom: 0;
130 |     padding-bottom: 0;
131 |   }
132 |   .dlops-join-area .dlops-join-card.left-text .step-signle-card {
133 |     margin-bottom: 15px;
134 |   }
135 |   .dlops-join-area .dlops-join-card.right-text .step-signle-card {
136 |     margin-top: 15px;
137 |   }
138 | }
139 | @media only screen and (min-width: 576px) and (max-width: 767px) {
140 |   .dlops-join-area .dlops-join-img .step-1 {
141 |     max-width: 260px;
142 |     border-radius: 35px;
143 |   }
144 | }
145 | @media only screen and (min-width: 768px) and (max-width: 991px) {
146 |   .ptb-100 {
147 |     padding-top: 70px;
148 |     padding-bottom: 70px;
149 |   }
150 |   .dlops-join-area .dlops-join-img {
151 |     text-align: center;
152 |     margin-bottom: 30px;
153 |   }
154 |   .dlops-join-area .dlops-join-img .shape-21 {
155 |     bottom: 0;
156 |   }
157 | }
158 | @media only screen and (min-width: 992px) and (max-width: 1199px) {
159 |   .dlops-join-area .dlops-join-card .step-signle-card.step-p {
160 |     padding: 25px 20px;
161 |   }
162 | }
163 | @media only screen and (min-width: 1200px) {
164 |   .container {
165 |     max-width: 1170px;
166 |   }
167 | }
168 | 
169 | @-webkit-keyframes moveLeftBounce {
170 |   0% {
171 |     -webkit-transform: translateX(0);
172 |     transform: translateX(0);
173 |   }
174 |   50% {
175 |     -webkit-transform: translateX(5px);
176 |     transform: translateX(5px);
177 |   }
178 |   100% {
179 |     -webkit-transform: translateX(0);
180 |     transform: translateX(0);
181 |   }
182 | }
183 | @keyframes moveLeftBounce {
184 |   0% {
185 |     -webkit-transform: translateX(0);
186 |     transform: translateX(0);
187 |   }
188 |   50% {
189 |     -webkit-transform: translateX(5px);
190 |     transform: translateX(5px);
191 |   }
192 |   100% {
193 |     -webkit-transform: translateX(0);
194 |     transform: translateX(0);
195 |   }
196 | }
197 | @keyframes rotateme {
198 |   from {
199 |     -webkit-transform: rotate(0deg);
200 |     transform: rotate(0deg);
201 |   }
202 |   to {
203 |     -webkit-transform: rotate(360deg);
204 |     transform: rotate(360deg);
205 |   }
206 | }
207 | @-webkit-keyframes rotateme {
208 |   from {
209 |     -webkit-transform: rotate(0deg);
210 |   }
211 |   to {
212 |     -webkit-transform: rotate(360deg);
213 |   }
214 | }
215 | 


--------------------------------------------------------------------------------
/components/home/Joinus.js:
--------------------------------------------------------------------------------
  1 | import React from 'react'
  2 | import Head from 'next/head'
  3 | import Tilt from 'react-parallax-tilt'
  4 | import { Parallax } from 'react-scroll-parallax'
  5 | 
  6 | const Joinus = () => {
  7 |   return (
  8 |     <>
  9 |       <Head>
 10 |         <link href='/css/joinus.css' rel='stylesheet' />
 11 |       </Head>
 12 |       <section>
 13 |         <div id='steps' className='dlops-join-area ptb-100 b-cream'>
 14 |           <div className='container'>
 15 |             <div className='section-title'>
 16 |               <span>Join Us</span>
 17 |               <h2>Discover This Platform More Easy</h2>
 18 |               <p>
 19 |                 Our platform can solve your complex problem in no time. Idea of
 20 |                 next big platform that will change the future. Join us today and
 21 |                 learn more.
 22 |               </p>
 23 |             </div>
 24 |             <div className='row align-items-center'>
 25 |               <div className='col-lg-6'>
 26 |                 <div className='dlops-join-img'>
 27 |                   <Tilt
 28 |                     className='parallax-effect-glare-scale'
 29 |                     perspective={500}
 30 |                     glareEnable={true}
 31 |                     glareMaxOpacity={0.45}
 32 |                     scale={1.02}
 33 |                   >
 34 |                     <Parallax
 35 |                       className='custom-class'
 36 |                       x={[10, 0]}
 37 |                       tagOuter='figure'
 38 |                     >
 39 |                       <img src='/chat.svg' className='step-1' alt='Image' />
 40 |                     </Parallax>
 41 |                   </Tilt>
 42 |                   <div className='dlops-join-shape'>
 43 |                     <img src='/shape1.png' className='shape-1' alt='Shape' />
 44 |                     <img src='/shape21.png' className='shape-21' alt='Shape' />
 45 |                   </div>
 46 |                 </div>
 47 |               </div>
 48 |               <div className='col-lg-6'>
 49 |                 <div className='dlops-join-card left-text'>
 50 |                   <div className='row align-items-center'>
 51 |                     <div className='col-lg-4 col-sm-6'>
 52 |                       <a
 53 |                         href='https://wa.me/%2B85267762922?text=Hello%20There!'
 54 |                         target='_blank'
 55 |                         rel='noopener noreferrer'
 56 |                       >
 57 |                         <Tilt
 58 |                           className='parallax-effect-glare-scale'
 59 |                           perspective={500}
 60 |                           glareEnable={true}
 61 |                           glareMaxOpacity={0.45}
 62 |                           scale={1.02}
 63 |                         >
 64 |                           <div className='step-signle-card bg-success'>
 65 |                             <i className='ri-whatsapp-line ri-3x shadow'></i>
 66 |                           </div>
 67 |                         </Tilt>
 68 |                       </a>
 69 |                     </div>
 70 |                     <div className='col-lg-8 col-sm-6'>
 71 |                       <p>
 72 |                         This is version of Lorem Ipsum. Proin gravida nibh vel
 73 |                         velit auctor aliquet. Aen ean itudin, lorem quis
 74 |                         bibendum auctor, nisi elit cons tequat ipsum, nec
 75 |                         sagittis sem nibh id elit.
 76 |                       </p>
 77 |                     </div>
 78 |                   </div>
 79 |                 </div>
 80 |                 <div className='dlops-join-card left-text'>
 81 |                   <div className='row align-items-center'>
 82 |                     <div className='col-lg-4 col-sm-6'>
 83 |                       <a
 84 |                         href='mailto:enquiries@dlops.ai'
 85 |                         target='_blank'
 86 |                         rel='noopener noreferrer'
 87 |                       >
 88 |                         <Tilt
 89 |                           className='parallax-effect-glare-scale'
 90 |                           perspective={500}
 91 |                           glareEnable={true}
 92 |                           glareMaxOpacity={0.45}
 93 |                           scale={1.02}
 94 |                         >
 95 |                           <div className='step-signle-card bg-warning'>
 96 |                             <i className='ri-mail-line ri-3x'></i>
 97 |                           </div>
 98 |                         </Tilt>
 99 |                       </a>
100 |                     </div>
101 |                     <div className='col-lg-8 col-sm-6'>
102 |                       <p>
103 |                         This is version of Lorem Ipsum. Proin gravida nibh vel
104 |                         velit auctor aliquet. Aen ean itudin, lorem quis
105 |                         bibendum auctor, nisi elit cons tequat ipsum, nec
106 |                         sagittis sem nibh id elit.
107 |                       </p>
108 |                     </div>
109 |                   </div>
110 |                 </div>
111 |                 <div className='dlops-join-card left-text'>
112 |                   <div className='row align-items-center'>
113 |                     <div className='col-lg-4 col-sm-6'>
114 |                       <a
115 |                         href='https://www.instagram.com/dlopsdev'
116 |                         target='_blank'
117 |                         rel='noopener noreferrer'
118 |                       >
119 |                         <Tilt
120 |                           className='parallax-effect-glare-scale'
121 |                           perspective={500}
122 |                           glareEnable={true}
123 |                           glareMaxOpacity={0.45}
124 |                           scale={1.02}
125 |                         >
126 |                           <div className='step-signle-card step-p bg-primary'>
127 |                             <i className='ri-instagram-line ri-3x'></i>
128 |                           </div>
129 |                         </Tilt>
130 |                       </a>
131 |                     </div>
132 |                     <div className='col-lg-8 col-sm-6'>
133 |                       <p>
134 |                         This is version of Lorem Ipsum. Proin gravida nibh vel
135 |                         velit auctor aliquet. Aen ean itudin, lorem quis
136 |                         bibendum auctor, nisi elit cons tequat ipsum, nec
137 |                         sagittis sem nibh id elit.
138 |                       </p>
139 |                     </div>
140 |                   </div>
141 |                 </div>
142 |               </div>
143 |             </div>
144 |           </div>
145 |         </div>
146 |       </section>
147 |     </>
148 |   )
149 | }
150 | 
151 | export default Joinus
152 | 


--------------------------------------------------------------------------------
/components/home/Services.js:
--------------------------------------------------------------------------------
  1 | import React from 'react'
  2 | import Head from 'next/head'
  3 | 
  4 | const Services = () => {
  5 |   return (
  6 |     <>
  7 |       <Head>
  8 |         <link href='/css/services.css' rel='stylesheet' />
  9 |       </Head>
 10 |       <section className='bg-cream'>
 11 |         <div id='services' className='our-services-area ptb-100'>
 12 |           <div className='container'>
 13 |             <div className='section-title'>
 14 |               <span>Our Services</span>
 15 |               <h2>Best Services For User Need</h2>
 16 |               <p>
 17 |                 But I must explain to you how all this mistaken idea of
 18 |                 denouncing pleasure and praising pain was born and I will give
 19 |                 you a complete account.
 20 |               </p>
 21 |             </div>
 22 |             <div className='our-service-contant'>
 23 |               <p className='meta mb-3'>Application Development</p>
 24 |               <div className='row'>
 25 |                 <div className='col-lg-4 col-md-6'>
 26 |                   <div className='our-service-card'>
 27 |                     <h3>AI Application</h3>
 28 |                     <p>
 29 |                       But I must explain to you how all this mistaken idea of
 30 |                       denouncing pleasure and praising pain was born and I will
 31 |                       give you a
 32 |                     </p>
 33 |                   </div>
 34 |                 </div>
 35 |                 <div className='col-lg-4 col-md-6'>
 36 |                   <div className='our-service-card'>
 37 |                     <h3>Web &amp; App Development</h3>
 38 |                     <p>
 39 |                       But I must explain to you how all this mistaken idea of
 40 |                       denouncing pleasure and praising pain was born and I will
 41 |                       give you a
 42 |                     </p>
 43 |                   </div>
 44 |                 </div>
 45 | 
 46 |                 <div className='col-lg-4 col-md-6'>
 47 |                   <div className='our-service-card'>
 48 |                     <h3>UI/UX Design</h3>
 49 |                     <p>
 50 |                       But I must explain to you how all this mistaken idea of
 51 |                       denouncing pleasure and praising pain was born and I will
 52 |                       give you a
 53 |                     </p>
 54 |                   </div>
 55 |                 </div>
 56 | 
 57 |                 <div className='col-lg-4 col-md-6'>
 58 |                   <div className='our-service-card'>
 59 |                     <h3>Shopify Extension</h3>
 60 |                     <p>
 61 |                       But I must explain to you how all this mistaken idea of
 62 |                       denouncing pleasure and praising pain was born and I will
 63 |                       give you a
 64 |                     </p>
 65 |                   </div>
 66 |                 </div>
 67 |                 <div className='col-lg-4 col-md-6'>
 68 |                   <div className='our-service-card'>
 69 |                     <h3>Chrome Extension</h3>
 70 |                     <p>
 71 |                       But I must explain to you how all this mistaken idea of
 72 |                       denouncing pleasure and praising pain was born and I will
 73 |                       give you a
 74 |                     </p>
 75 |                   </div>
 76 |                 </div>
 77 |                 <div className='col-lg-4 col-md-6'>
 78 |                   <div className='our-service-card'>
 79 |                     <h3>Email Template</h3>
 80 |                     <p>
 81 |                       But I must explain to you how all this mistaken idea of
 82 |                       denouncing pleasure and praising pain was born and I will
 83 |                       give you a
 84 |                     </p>
 85 |                   </div>
 86 |                 </div>
 87 |               </div>
 88 |               <p className='meta mb-3'>Digital Strategy</p>
 89 |               <div className='row'>
 90 |                 <div className='col-lg-4 col-md-6'>
 91 |                   <div className='our-service-card'>
 92 |                     <h3>Comprehensive Platform Development</h3>
 93 |                     <p>
 94 |                       But I must explain to you how all this mistaken idea of
 95 |                       denouncing pleasure and praising pain was born and I will
 96 |                       give you a
 97 |                     </p>
 98 |                   </div>
 99 |                 </div>
100 |                 <div className='col-lg-4 col-md-6'>
101 |                   <div className='our-service-card'>
102 |                     <h3>Re-engineer Existing Platform</h3>
103 |                     <p>
104 |                       But I must explain to you how all this mistaken idea of
105 |                       denouncing pleasure and praising pain was born and I will
106 |                       give you a
107 |                     </p>
108 |                   </div>
109 |                 </div>
110 |                 <div className='col-lg-4 col-md-6'>
111 |                   <div className='our-service-card'>
112 |                     <h3>SEO Expertises</h3>
113 |                     <p>
114 |                       But I must explain to you how all this mistaken idea of
115 |                       denouncing pleasure and praising pain was born and I will
116 |                       give you a
117 |                     </p>
118 |                   </div>
119 |                 </div>
120 |                 <div className='col-lg-4 col-md-6'>
121 |                   <div className='our-service-card'>
122 |                     <h3>Social Media Marketing</h3>
123 |                     <p>
124 |                       But I must explain to you how all this mistaken idea of
125 |                       denouncing pleasure and praising pain was born and I will
126 |                       give you a
127 |                     </p>
128 |                   </div>
129 |                 </div>
130 |                 <div className='col-lg-4 col-md-6'>
131 |                   <div className='our-service-card'>
132 |                     <h3>Social Media Branding</h3>
133 |                     <p>
134 |                       But I must explain to you how all this mistaken idea of
135 |                       denouncing pleasure and praising pain was born and I will
136 |                       give you a
137 |                     </p>
138 |                   </div>
139 |                 </div>
140 |                 <div className='col-lg-4 col-md-6'>
141 |                   <div className='our-service-card'>
142 |                     <h3>Website Copyright</h3>
143 |                     <p>
144 |                       But I must explain to you how all this mistaken idea of
145 |                       denouncing pleasure and praising pain was born and I will
146 |                       give you a
147 |                     </p>
148 |                   </div>
149 |                 </div>
150 |               </div>
151 |             </div>
152 |           </div>
153 |         </div>
154 |       </section>
155 |     </>
156 |   )
157 | }
158 | 
159 | export default Services
160 | 


--------------------------------------------------------------------------------
/public/css/companies.css:
--------------------------------------------------------------------------------
  1 | .list-items {
  2 |   list-style: none;
  3 | }
  4 | .list-items li{
  5 |   margin: 1rem 0;
  6 | }
  7 | 
  8 | .image-box {
  9 |   position: relative;
 10 |   margin-top: 50px;
 11 |   margin-left: 30px;
 12 |   height: 100%;
 13 | }
 14 | @media only screen and (min-width: 768px) and (max-width: 991px) {
 15 |   .image-box {
 16 |     margin-left: 0;
 17 |     display: grid;
 18 |     grid-template-columns: 1fr 1fr;
 19 |     grid-column-gap: 20px;
 20 |   }
 21 | }
 22 | @media only screen and (min-width: 480px) and (max-width: 767px) {
 23 |   .image-box {
 24 |     margin-left: 0;
 25 |     display: grid;
 26 |     grid-template-columns: 1fr 1fr;
 27 |     grid-column-gap: 20px;
 28 |   }
 29 | }
 30 | @media only screen and (min-width: 320px) and (max-width: 479px) {
 31 |   .image-box {
 32 |     margin-left: 0;
 33 |     display: grid;
 34 |     grid-template-columns: 1fr 1fr;
 35 |     grid-column-gap: 20px;
 36 |   }
 37 | }
 38 | .image-box .img__item {
 39 |   width: 100%;
 40 |   position: absolute;
 41 |   -webkit-border-radius: 50%;
 42 |   -moz-border-radius: 50%;
 43 |   border-radius: 50%;
 44 |   border: 10px solid #fff;
 45 |   -webkit-box-shadow: 0 0 40px rgba(82, 85, 90, 0.1);
 46 |   -moz-box-shadow: 0 0 40px rgba(82, 85, 90, 0.1);
 47 |   box-shadow: 0 0 40px rgba(82, 85, 90, 0.1);
 48 | }
 49 | @media only screen and (min-width: 768px) and (max-width: 991px) {
 50 |   .image-box .img__item {
 51 |     position: inherit;
 52 |     margin-bottom: 30px;
 53 |   }
 54 | }
 55 | @media only screen and (min-width: 480px) and (max-width: 767px) {
 56 |   .image-box .img__item {
 57 |     position: inherit;
 58 |     margin-bottom: 30px;
 59 |   }
 60 | }
 61 | @media only screen and (min-width: 320px) and (max-width: 479px) {
 62 |   .image-box .img__item {
 63 |     position: inherit;
 64 |     margin-bottom: 30px;
 65 |   }
 66 | }
 67 | .image-box .img__item:nth-child(1) {
 68 |   top: 0;
 69 |   right: 0;
 70 | }
 71 | @media only screen and (min-width: 768px) and (max-width: 991px) {
 72 |   .image-box .img__item:nth-child(1) {
 73 |     top: auto;
 74 |     right: auto;
 75 |   }
 76 | }
 77 | @media only screen and (min-width: 480px) and (max-width: 767px) {
 78 |   .image-box .img__item:nth-child(1) {
 79 |     top: auto;
 80 |     right: auto;
 81 |   }
 82 | }
 83 | @media only screen and (min-width: 320px) and (max-width: 479px) {
 84 |   .image-box .img__item:nth-child(1) {
 85 |     top: auto;
 86 |     right: auto;
 87 |   }
 88 | }
 89 | .image-box .img__item:nth-child(2) {
 90 |   top: 0;
 91 |   left: 0;
 92 |   width: 33%;
 93 |   -webkit-box-shadow: 0 0 0 0;
 94 |   -moz-box-shadow: 0 0 0 0;
 95 |   box-shadow: 0 0 0 0;
 96 | }
 97 | @media only screen and (min-width: 768px) and (max-width: 991px) {
 98 |   .image-box .img__item:nth-child(2) {
 99 |     width: 100%;
100 |     top: auto;
101 |     left: auto;
102 |     -webkit-box-shadow: 0 0 40px rgba(82, 85, 90, 0.1);
103 |     -moz-box-shadow: 0 0 40px rgba(82, 85, 90, 0.1);
104 |     box-shadow: 0 0 40px rgba(82, 85, 90, 0.1);
105 |   }
106 | }
107 | @media only screen and (min-width: 480px) and (max-width: 767px) {
108 |   .image-box .img__item:nth-child(2) {
109 |     width: 100%;
110 |     top: auto;
111 |     left: auto;
112 |     -webkit-box-shadow: 0 0 40px rgba(82, 85, 90, 0.1);
113 |     -moz-box-shadow: 0 0 40px rgba(82, 85, 90, 0.1);
114 |     box-shadow: 0 0 40px rgba(82, 85, 90, 0.1);
115 |   }
116 | }
117 | @media only screen and (min-width: 320px) and (max-width: 479px) {
118 |   .image-box .img__item:nth-child(2) {
119 |     width: 100%;
120 |     top: auto;
121 |     left: auto;
122 |     -webkit-box-shadow: 0 0 40px rgba(82, 85, 90, 0.1);
123 |     -moz-box-shadow: 0 0 40px rgba(82, 85, 90, 0.1);
124 |     box-shadow: 0 0 40px rgba(82, 85, 90, 0.1);
125 |   }
126 | }
127 | .image-box .img__item:nth-child(3) {
128 |   bottom: 25%;
129 |   right: -60px;
130 |   width: 40%;
131 |   -webkit-box-shadow: 0 0 0 0;
132 |   -moz-box-shadow: 0 0 0 0;
133 |   box-shadow: 0 0 0 0;
134 | }
135 | @media (max-width: 1280px) {
136 |   .image-box .img__item:nth-child(3) {
137 |     right: -10px;
138 |   }
139 | }
140 | @media (max-width: 1199px) {
141 |   .image-box .img__item:nth-child(3) {
142 |     bottom: 35%;
143 |   }
144 | }
145 | @media only screen and (min-width: 768px) and (max-width: 991px) {
146 |   .image-box .img__item:nth-child(3) {
147 |     width: 100%;
148 |     bottom: auto;
149 |     right: auto;
150 |     -webkit-box-shadow: 0 0 40px rgba(82, 85, 90, 0.1);
151 |     -moz-box-shadow: 0 0 40px rgba(82, 85, 90, 0.1);
152 |     box-shadow: 0 0 40px rgba(82, 85, 90, 0.1);
153 |   }
154 | }
155 | @media only screen and (min-width: 480px) and (max-width: 767px) {
156 |   .image-box .img__item:nth-child(3) {
157 |     width: 100%;
158 |     bottom: auto;
159 |     right: auto;
160 |     -webkit-box-shadow: 0 0 40px rgba(82, 85, 90, 0.1);
161 |     -moz-box-shadow: 0 0 40px rgba(82, 85, 90, 0.1);
162 |     box-shadow: 0 0 40px rgba(82, 85, 90, 0.1);
163 |   }
164 | }
165 | @media only screen and (min-width: 320px) and (max-width: 479px) {
166 |   .image-box .img__item:nth-child(3) {
167 |     width: 100%;
168 |     bottom: auto;
169 |     right: auto;
170 |     -webkit-box-shadow: 0 0 40px rgba(82, 85, 90, 0.1);
171 |     -moz-box-shadow: 0 0 40px rgba(82, 85, 90, 0.1);
172 |     box-shadow: 0 0 40px rgba(82, 85, 90, 0.1);
173 |   }
174 | }
175 | .image-box .img__item:nth-child(4) {
176 |   bottom: 15%;
177 |   left: 0;
178 |   width: 33%;
179 |   -webkit-box-shadow: 0 0 0 0;
180 |   -moz-box-shadow: 0 0 0 0;
181 |   box-shadow: 0 0 0 0;
182 | }
183 | @media (max-width: 1199px) {
184 |   .image-box .img__item:nth-child(4) {
185 |     bottom: 35%;
186 |   }
187 | }
188 | @media only screen and (min-width: 768px) and (max-width: 991px) {
189 |   .image-box .img__item:nth-child(4) {
190 |     width: 100%;
191 |     bottom: auto;
192 |     left: auto;
193 |     -webkit-box-shadow: 0 0 40px rgba(82, 85, 90, 0.1);
194 |     -moz-box-shadow: 0 0 40px rgba(82, 85, 90, 0.1);
195 |     box-shadow: 0 0 40px rgba(82, 85, 90, 0.1);
196 |   }
197 | }
198 | @media only screen and (min-width: 480px) and (max-width: 767px) {
199 |   .image-box .img__item:nth-child(4) {
200 |     width: 100%;
201 |     bottom: auto;
202 |     left: auto;
203 |     -webkit-box-shadow: 0 0 40px rgba(82, 85, 90, 0.1);
204 |     -moz-box-shadow: 0 0 40px rgba(82, 85, 90, 0.1);
205 |     box-shadow: 0 0 40px rgba(82, 85, 90, 0.1);
206 |   }
207 | }
208 | @media only screen and (min-width: 320px) and (max-width: 479px) {
209 |   .image-box .img__item:nth-child(4) {
210 |     width: 100%;
211 |     bottom: auto;
212 |     left: auto;
213 |     -webkit-box-shadow: 0 0 40px rgba(82, 85, 90, 0.1);
214 |     -moz-box-shadow: 0 0 40px rgba(82, 85, 90, 0.1);
215 |     box-shadow: 0 0 40px rgba(82, 85, 90, 0.1);
216 |   }
217 | }
218 | @media only screen and (min-width: 768px) and (max-width: 991px) {
219 |   .about-area .image-box {
220 |     display: flex;
221 |     -ms-flex-wrap: wrap;
222 |     flex-wrap: wrap;
223 |     -ms-flex-pack: justify;
224 |     justify-content: center;
225 |   }
226 | }
227 | @media only screen and (min-width: 480px) and (max-width: 767px) {
228 |   .about-area .image-box {
229 |     display: flex;
230 |     -ms-flex-wrap: wrap;
231 |     flex-wrap: wrap;
232 |     -ms-flex-pack: justify;
233 |     justify-content: center;
234 |   }
235 | }
236 | @media only screen and (min-width: 768px) and (max-width: 991px) {
237 |   .about-area .image-box .img__item {
238 |     width: 280px;
239 |     height: 280px;
240 |     margin: 0 15px;
241 |   }
242 | }
243 | @media only screen and (min-width: 480px) and (max-width: 767px) {
244 |   .about-area .image-box .img__item {
245 |     width: 200px;
246 |     height: 200px;
247 |     margin: 0 15px;
248 |   }
249 | }
250 | 


--------------------------------------------------------------------------------
/public/css/about.css:
--------------------------------------------------------------------------------
  1 | h2 {
  2 |   margin-top: 0;
  3 |   margin-bottom: 0.5rem;
  4 | }
  5 | p {
  6 |   margin-top: 0;
  7 |   margin-bottom: 1rem;
  8 | }
  9 | img {
 10 |   vertical-align: middle;
 11 |   border-style: none;
 12 | }
 13 | h2 {
 14 |   margin-bottom: 0.5rem;
 15 |   font-weight: 500;
 16 |   line-height: 1.2;
 17 | }
 18 | h2 {
 19 |   font-size: 2rem;
 20 | }
 21 | 
 22 | img {
 23 |   max-width: 100%;
 24 | }
 25 | h2 {
 26 |   color: #242424;
 27 |   font-weight: bold;
 28 | }
 29 | p {
 30 |   margin-bottom: 10px;
 31 |   line-height: 1.7;
 32 |   color: #7f7f7f;
 33 | }
 34 | p:last-child {
 35 |   margin-bottom: 0;
 36 | }
 37 | .pt-70 {
 38 |   padding-top: 70px;
 39 | }
 40 | .pb-100 {
 41 |   padding-bottom: 100px;
 42 | }
 43 | .section-title {
 44 |   text-align: center;
 45 |   max-width: 660px;
 46 |   margin: 0 auto 60px;
 47 | }
 48 | .section-title span {
 49 |   font-size: 16px;
 50 |   font-weight: 500;
 51 |   color: #547af0;
 52 |   display: inline-block;
 53 |   margin-bottom: 15px;
 54 |   line-height: 1;
 55 | }
 56 | .section-title h2 {
 57 |   font-size: 40px;
 58 |   margin-bottom: 15px;
 59 | }
 60 | .section-title p {
 61 |   max-width: 525px;
 62 |   margin: auto;
 63 | }
 64 | .about-us-two .about-two-text .section-title {
 65 |   text-align: left;
 66 |   margin-bottom: 25px;
 67 | }
 68 | .about-us-two .about-two-text .section-title p {
 69 |   max-width: none;
 70 | }
 71 | .about-us-two .about-two-img {
 72 |   position: relative;
 73 |   z-index: 1;
 74 | }
 75 | .about-us-two .about-two-img .about-shape .shape-17 {
 76 |   position: absolute;
 77 |   right: -30px;
 78 |   top: -70px;
 79 |   z-index: -1;
 80 |   max-width: 550px;
 81 |   -webkit-animation: moveBounce 4s linear infinite;
 82 |   animation: moveBounce 4s linear infinite;
 83 | }
 84 | .about-us-two .about-two-img .about-shape .shape-18 {
 85 |   position: absolute;
 86 |   right: 15px;
 87 |   bottom: 130px;
 88 |   -webkit-animation-name: rotateme;
 89 |   animation-name: rotateme;
 90 |   -webkit-animation-duration: 20s;
 91 |   animation-duration: 20s;
 92 |   -webkit-animation-iteration-count: infinite;
 93 |   animation-iteration-count: infinite;
 94 |   -webkit-animation-timing-function: linear;
 95 |   animation-timing-function: linear;
 96 | }
 97 | .about-us-two .about-two-img .about-shape .shape-19 {
 98 |   position: absolute;
 99 |   top: -20px;
100 |   right: 40px;
101 |   -webkit-animation-name: rotateme;
102 |   animation-name: rotateme;
103 |   -webkit-animation-duration: 20s;
104 |   animation-duration: 20s;
105 |   -webkit-animation-iteration-count: infinite;
106 |   animation-iteration-count: infinite;
107 |   -webkit-animation-timing-function: linear;
108 |   animation-timing-function: linear;
109 | }
110 | .about-us-two .about-two-img .about-shape .shape-20 {
111 |   position: absolute;
112 |   top: 80px;
113 |   left: 60px;
114 |   max-width: 30px;
115 |   -webkit-animation: animationFramesOne 20s infinite linear;
116 |   animation: animationFramesOne 20s infinite linear;
117 | }
118 | 
119 | @media only screen and (max-width: 767px) {
120 |   p {
121 |     font-size: 15px;
122 |   }
123 |   .pb-100 {
124 |     padding-bottom: 50px;
125 |   }
126 |   .pt-70 {
127 |     padding-top: 30px;
128 |   }
129 |   .section-title {
130 |     margin: 0 auto 30px;
131 |   }
132 |   .section-title span {
133 |     font-size: 13px;
134 |     margin-bottom: 5px;
135 |   }
136 |   .section-title h2 {
137 |     font-size: 25px;
138 |   }
139 |   .about-us-two .about-two-text {
140 |     margin-bottom: 30px;
141 |   }
142 |   .about-us-two .about-two-img .about-shape .shape-17 {
143 |     right: 0;
144 |     top: 0;
145 |     max-width: 240px;
146 |   }
147 | }
148 | @media only screen and (min-width: 768px) and (max-width: 991px) {
149 |   .pb-100 {
150 |     padding-bottom: 70px;
151 |   }
152 |   .pt-70 {
153 |     padding-top: 40px;
154 |   }
155 |   .about-us-two .about-two-img .about-shape .shape-17 {
156 |     right: 0;
157 |     top: 0;
158 |     max-width: 350px;
159 | }
160 |   }
161 | }
162 | @media only screen and (min-width: 992px) and (max-width: 1199px) {
163 |   .about-us-two .about-two-img .about-shape .shape-17 {
164 |     max-width: 420px;
165 |   }
166 | }
167 | @media only screen and (min-width: 1200px) {
168 |   .container {
169 |     max-width: 1170px;
170 |   }
171 | }
172 | 
173 | @-webkit-keyframes moveBounce {
174 |   0% {
175 |     -webkit-transform: translateY(0px);
176 |     transform: translateY(0px);
177 |   }
178 |   50% {
179 |     -webkit-transform: translateY(20px);
180 |     transform: translateY(20px);
181 |   }
182 |   100% {
183 |     -webkit-transform: translateY(0px);
184 |     transform: translateY(0px);
185 |   }
186 | }
187 | @keyframes moveBounce {
188 |   0% {
189 |     -webkit-transform: translateY(0px);
190 |     transform: translateY(0px);
191 |   }
192 |   50% {
193 |     -webkit-transform: translateY(20px);
194 |     transform: translateY(20px);
195 |   }
196 |   100% {
197 |     -webkit-transform: translateY(0px);
198 |     transform: translateY(0px);
199 |   }
200 | }
201 | @keyframes rotateme {
202 |   from {
203 |     -webkit-transform: rotate(0deg);
204 |     transform: rotate(0deg);
205 |   }
206 |   to {
207 |     -webkit-transform: rotate(360deg);
208 |     transform: rotate(360deg);
209 |   }
210 | }
211 | @-webkit-keyframes rotateme {
212 |   from {
213 |     -webkit-transform: rotate(0deg);
214 |   }
215 |   to {
216 |     -webkit-transform: rotate(360deg);
217 |   }
218 | }
219 | @keyframes animationFramesOne {
220 |   0% {
221 |     -webkit-transform: translate(0px, 0px) rotate(0deg);
222 |     transform: translate(0px, 0px) rotate(0deg);
223 |   }
224 |   20% {
225 |     -webkit-transform: translate(73px, -1px) rotate(36deg);
226 |     transform: translate(73px, -1px) rotate(36deg);
227 |   }
228 |   40% {
229 |     -webkit-transform: translate(141px, 72px) rotate(72deg);
230 |     transform: translate(141px, 72px) rotate(72deg);
231 |   }
232 |   60% {
233 |     -webkit-transform: translate(83px, 122px) rotate(108deg);
234 |     transform: translate(83px, 122px) rotate(108deg);
235 |   }
236 |   80% {
237 |     -webkit-transform: translate(-40px, 72px) rotate(144deg);
238 |     transform: translate(-40px, 72px) rotate(144deg);
239 |   }
240 |   100% {
241 |     -webkit-transform: translate(0px, 0px) rotate(0deg);
242 |     transform: translate(0px, 0px) rotate(0deg);
243 |   }
244 | }
245 | @-webkit-keyframes animationFramesOne {
246 |   0% {
247 |     -webkit-transform: translate(0px, 0px) rotate(0deg);
248 |   }
249 |   20% {
250 |     -webkit-transform: translate(73px, -1px) rotate(36deg);
251 |   }
252 |   40% {
253 |     -webkit-transform: translate(141px, 72px) rotate(72deg);
254 |   }
255 |   60% {
256 |     -webkit-transform: translate(83px, 122px) rotate(108deg);
257 |   }
258 |   80% {
259 |     -webkit-transform: translate(-40px, 72px) rotate(144deg);
260 |   }
261 |   100% {
262 |     -webkit-transform: translate(0px, 0px) rotate(0deg);
263 |   }
264 | }
265 | @keyframes animationFramesOne {
266 |   0% {
267 |     -webkit-transform: translate(0px, 0px) rotate(0deg);
268 |     transform: translate(0px, 0px) rotate(0deg);
269 |   }
270 |   20% {
271 |     -webkit-transform: translate(73px, -1px) rotate(36deg);
272 |     transform: translate(73px, -1px) rotate(36deg);
273 |   }
274 |   40% {
275 |     -webkit-transform: translate(141px, 72px) rotate(72deg);
276 |     transform: translate(141px, 72px) rotate(72deg);
277 |   }
278 |   60% {
279 |     -webkit-transform: translate(83px, 122px) rotate(108deg);
280 |     transform: translate(83px, 122px) rotate(108deg);
281 |   }
282 |   80% {
283 |     -webkit-transform: translate(-40px, 72px) rotate(144deg);
284 |     transform: translate(-40px, 72px) rotate(144deg);
285 |   }
286 |   100% {
287 |     -webkit-transform: translate(0px, 0px) rotate(0deg);
288 |     transform: translate(0px, 0px) rotate(0deg);
289 |   }
290 | }
291 | 


--------------------------------------------------------------------------------
/public/css/header.css:
--------------------------------------------------------------------------------
  1 | .wave {
  2 |   z-index: 1;
  3 |   position: absolute;
  4 |   opacity: 0.1;
  5 | }
  6 | 
  7 | div#tsparticles {
  8 |   z-index: 0;
  9 |   position: absolute;
 10 | }
 11 | 
 12 | .btn {
 13 |   display: inline-block;
 14 |   font-weight: 400;
 15 |   line-height: 1.5;
 16 |   color: #212529;
 17 |   text-align: center;
 18 |   text-decoration: none;
 19 |   vertical-align: middle;
 20 |   cursor: pointer;
 21 |   -webkit-user-select: none;
 22 |   -moz-user-select: none;
 23 |   -ms-user-select: none;
 24 |   user-select: none;
 25 |   background-color: transparent;
 26 |   border: 1px solid transparent;
 27 |   padding: 0.375rem 0.75rem;
 28 |   font-size: 1rem;
 29 |   border-radius: 0.25rem;
 30 |   -webkit-transition: color 0.15s ease-in-out,
 31 |     background-color 0.15s ease-in-out, border-color 0.15s ease-in-out,
 32 |     -webkit-box-shadow 0.15s ease-in-out;
 33 |   transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
 34 |     border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
 35 |   transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
 36 |     border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
 37 |   transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
 38 |     border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out,
 39 |     -webkit-box-shadow 0.15s ease-in-out;
 40 | }
 41 | @media (prefers-reduced-motion: reduce) {
 42 |   .btn {
 43 |     -webkit-transition: none;
 44 |     transition: none;
 45 |   }
 46 | }
 47 | .btn:hover {
 48 |   color: #212529;
 49 | }
 50 | .btn:focus {
 51 |   outline: 0;
 52 |   -webkit-box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
 53 |   box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
 54 | }
 55 | .btn:disabled {
 56 |   pointer-events: none;
 57 |   opacity: 0.65;
 58 | }
 59 | 
 60 | .fadeInRightBig {
 61 |   -webkit-animation-name: fadeInRightBig;
 62 |   animation-name: fadeInRightBig;
 63 | }
 64 | .fadeInUp {
 65 |   -webkit-animation-name: fadeInUp;
 66 |   animation-name: fadeInUp;
 67 | }
 68 | 
 69 | .ah-headline.clip span {
 70 |   padding: 0.2em 0;
 71 |   display: inline-block;
 72 | }
 73 | .ah-headline.clip .ah-words-wrapper {
 74 |   overflow: hidden;
 75 |   vertical-align: top;
 76 | }
 77 | .ah-words-wrapper {
 78 |   display: inline-block;
 79 |   position: relative;
 80 |   text-align: left;
 81 | }
 82 | .ah-words-wrapper b {
 83 |   display: inline-block;
 84 |   position: absolute;
 85 |   white-space: nowrap;
 86 |   left: 0;
 87 |   top: 0;
 88 | }
 89 | .ah-words-wrapper b.is-visible {
 90 |   position: relative;
 91 | }
 92 | .ah-headline.clip .ah-words-wrapper::after {
 93 |   content: '';
 94 |   position: absolute;
 95 |   top: 0;
 96 |   right: 0;
 97 |   width: 2px;
 98 |   height: 100%;
 99 |   background-color: #363636;
100 | }
101 | .ah-headline.clip b {
102 |   opacity: 0;
103 | }
104 | .ah-headline.clip b.is-visible {
105 |   opacity: 1;
106 | }
107 | 
108 | span {
109 |   display: inline-block;
110 | }
111 | 
112 | 
113 | a,
114 | a:hover,
115 | a:focus {
116 |   font-family: 'Inter', sans-serif;
117 |   -webkit-transition-duration: 500ms;
118 |   transition-duration: 500ms;
119 |   text-decoration: none;
120 |   outline: 0 solid transparent;
121 |   color: #1f0757;
122 | }
123 | .btn {
124 |   font-weight: 600;
125 | }
126 | .btn:hover,
127 | .btn:focus {
128 |   font-weight: 600;
129 | }
130 | .ah-headline.clip .ah-words-wrapper::after {
131 |   display: none;
132 | }
133 | .dlops-btn {
134 |   border: none;
135 |   display: inline-block;
136 |   color: #ffffff;
137 |   border-radius: 4px;
138 |   padding: 0 1.75rem;
139 |   font-size: 14px;
140 |   background-color: #0811fb;
141 |   height: 49px;
142 |   line-height: 49px;
143 |   text-transform: capitalize;
144 | }
145 | .dlops-btn:hover,
146 | .dlops-btn:focus {
147 |   background-color: transparent;
148 |   color: #0811fb;
149 |   -webkit-box-shadow: 0 3px 42px 2px rgba(12, 82, 255, 0.175);
150 |   box-shadow: 0 3px 42px 2px rgba(12, 82, 255, 0.175);
151 |   line-height: 49px;
152 | }
153 | .dlops-btn.white-btn {
154 |   background-color: #1f0757;
155 |   color: #ffffff;
156 | }
157 | .dlops-btn.white-btn:hover,
158 | .dlops-btn.white-btn:focus {
159 |   background-color: #fdd76e;
160 |   color: #1f0757;
161 |   -webkit-box-shadow: 0 3px 42px 2px rgba(255, 255, 255, 0.175);
162 |   box-shadow: 0 3px 42px 2px rgba(255, 255, 255, 0.175);
163 | }
164 | .background-animation {
165 |   position: absolute;
166 |   z-index: 1;
167 |   top: 0;
168 |   left: 0;
169 |   width: 70%;
170 |   height: 100%;
171 | }
172 | .background-animation .star-ani {
173 |   position: absolute;
174 |   border-radius: 50%;
175 |   width: 300px;
176 |   height: 300px;
177 |   top: 15%;
178 |   left: 45%;
179 |   z-index: -1;
180 |   -webkit-animation: rotateAnimation linear 39s infinite;
181 |   animation: rotateAnimation linear 39s infinite;
182 | }
183 | .background-animation .star-ani::after {
184 |   position: absolute;
185 |   content: '\e950';
186 |   top: 10%;
187 |   left: 10%;
188 |   z-index: -1;
189 |   border-radius: 50%;
190 |   font-family: 'LineIcons';
191 |   color: rgba(255, 255, 255, 0.26);
192 |   font-size: 22px;
193 | }
194 | .background-animation .cloud-ani {
195 |   position: absolute;
196 |   border-radius: 50%;
197 |   width: 240px;
198 |   height: 240px;
199 |   top: 50%;
200 |   left: 60%;
201 |   z-index: -1;
202 |   -webkit-animation: rotateAnimation linear 46s infinite;
203 |   animation: rotateAnimation linear 46s infinite;
204 | }
205 | .background-animation .cloud-ani::after {
206 |   position: absolute;
207 |   content: '\e950';
208 |   top: 10%;
209 |   left: 10%;
210 |   z-index: -1;
211 |   border-radius: 50%;
212 |   font-family: 'LineIcons';
213 |   color: rgba(255, 255, 255, 0.26);
214 |   font-size: 2.5rem;
215 | }
216 | .background-animation .circle-ani {
217 |   position: absolute;
218 |   border-radius: 50%;
219 |   -webkit-animation: rotateAnimation linear 34s infinite;
220 |   animation: rotateAnimation linear 34s infinite;
221 |   width: 180px;
222 |   height: 180px;
223 |   left: 10%;
224 |   top: 10%;
225 |   z-index: -1;
226 | }
227 | .background-animation .circle-ani::after {
228 |   width: 20px;
229 |   height: 20px;
230 |   position: absolute;
231 |   content: '';
232 |   top: 10%;
233 |   left: 10%;
234 |   border: 3px solid rgba(255, 255, 255, 0.2);
235 |   z-index: -1;
236 |   border-radius: 50%;
237 | }
238 | .background-animation .box-ani {
239 |   position: absolute;
240 |   border-radius: 50%;
241 |   -webkit-animation: rotateAnimation linear 37s infinite;
242 |   animation: rotateAnimation linear 37s infinite;
243 |   width: 15%;
244 |   height: 18%;
245 |   left: 7%;
246 |   top: 70%;
247 |   z-index: -1;
248 | }
249 | .background-animation .box-ani::after {
250 |   width: 26px;
251 |   height: 26px;
252 |   position: absolute;
253 |   content: '';
254 |   z-index: -1;
255 |   background-color: transparent;
256 |   border-radius: 4px;
257 |   border: 3px solid rgba(255, 255, 255, 0.2);
258 | }
259 | .welcome-area {
260 |   position: relative;
261 |   z-index: 2;
262 |   height: 100vh;
263 |   background-color: rgb(19, 19, 127);
264 |   overflow: hidden;
265 | }
266 | @media only screen and (min-width: 992px) and (max-width: 1199px) {
267 |   .welcome-area {
268 |     height: 750px;
269 |   }
270 | }
271 | @media only screen and (min-width: 768px) and (max-width: 991px) {
272 |   .welcome-area {
273 |     height: 650px;
274 |   }
275 | }
276 | @media only screen and (max-width: 767px) {
277 |   .welcome-area {
278 |     height: 555px;
279 |     display: flex;
280 |     flex-direction: column;
281 |     justify-content: center;
282 |     align-items: center;
283 |   }
284 | }
285 | .welcome-area .background-shape .circle1 {
286 |   width: 2200px;
287 |   height: 2200px;
288 |   border-radius: 50%;
289 |   background: rgba(255, 255, 255, 0.12);
290 |   position: absolute;
291 |   z-index: -30;
292 |   top: -1100px;
293 |   right: -1100px;
294 | }
295 | @media only screen and (min-width: 992px) and (max-width: 1199px) {
296 |   .welcome-area .background-shape .circle1 {
297 |     width: 1700px;
298 |     height: 1700px;
299 |     top: -850px;
300 |     right: -850px;
301 |   }
302 | }
303 | @media only screen and (min-width: 768px) and (max-width: 991px) {
304 |   .welcome-area .background-shape .circle1 {
305 |     width: 1700px;
306 |     height: 1700px;
307 |     top: -850px;
308 |     right: -850px;
309 |   }
310 | }
311 | @media only screen and (max-width: 767px) {
312 |   .welcome-area .background-shape .circle1 {
313 |     width: 1700px;
314 |     height: 1700px;
315 |     top: -850px;
316 |     right: -850px;
317 |   }
318 | }
319 | .welcome-area .background-shape .circle2 {
320 |   width: 1700px;
321 |   height: 1700px;
322 |   border-radius: 50%;
323 |   background: rgba(255, 255, 255, 0.12);
324 |   position: absolute;
325 |   z-index: -20;
326 |   top: -850px;
327 |   right: -850px;
328 | }
329 | @media only screen and (min-width: 992px) and (max-width: 1199px) {
330 |   .welcome-area .background-shape .circle2 {
331 |     width: 1200px;
332 |     height: 1200px;
333 |     top: -600px;
334 |     right: -600px;
335 |   }
336 | }
337 | @media only screen and (min-width: 768px) and (max-width: 991px) {
338 |   .welcome-area .background-shape .circle2 {
339 |     width: 1200px;
340 |     height: 1200px;
341 |     top: -600px;
342 |     right: -600px;
343 |   }
344 | }
345 | @media only screen and (max-width: 767px) {
346 |   .welcome-area .background-shape .circle2 {
347 |     width: 1200px;
348 |     height: 1200px;
349 |     top: -600px;
350 |     right: -600px;
351 |   }
352 | }
353 | .welcome-area .background-shape .circle3 {
354 |   width: 1200px;
355 |   height: 1200px;
356 |   border-radius: 50%;
357 |   background: rgba(255, 255, 255, 0.12);
358 |   position: absolute;
359 |   z-index: -10;
360 |   top: -600px;
361 |   right: -600px;
362 | }
363 | @media only screen and (min-width: 992px) and (max-width: 1199px) {
364 |   .welcome-area .background-shape .circle3 {
365 |     width: 700px;
366 |     height: 700px;
367 |     top: -350px;
368 |     right: -350px;
369 |   }
370 | }
371 | @media only screen and (min-width: 768px) and (max-width: 991px) {
372 |   .welcome-area .background-shape .circle3 {
373 |     width: 700px;
374 |     height: 700px;
375 |     top: -350px;
376 |     right: -350px;
377 |   }
378 | }
379 | @media only screen and (max-width: 767px) {
380 |   .welcome-area .background-shape .circle3 {
381 |     width: 700px;
382 |     height: 700px;
383 |     top: -350px;
384 |     right: -350px;
385 |   }
386 | }
387 | .welcome-area .background-shape .circle4 {
388 |   width: 700px;
389 |   height: 700px;
390 |   border-radius: 50%;
391 |   background: rgba(255, 255, 255, 0.12);
392 |   position: absolute;
393 |   z-index: -10;
394 |   top: -350px;
395 |   right: -350px;
396 | }
397 | @media only screen and (min-width: 992px) and (max-width: 1199px) {
398 |   .welcome-area .background-shape .circle4 {
399 |     width: 200px;
400 |     height: 200px;
401 |     top: -100px;
402 |     right: -100px;
403 |   }
404 | }
405 | @media only screen and (min-width: 768px) and (max-width: 991px) {
406 |   .welcome-area .background-shape .circle4 {
407 |     width: 200px;
408 |     height: 200px;
409 |     top: -100px;
410 |     right: -100px;
411 |   }
412 | }
413 | @media only screen and (max-width: 767px) {
414 |   .welcome-area .background-shape .circle4 {
415 |     width: 200px;
416 |     height: 200px;
417 |     top: -100px;
418 |     right: -100px;
419 |   }
420 | }
421 | .welcome-area .welcome-content {
422 |   position: relative;
423 |   z-index: 1;
424 |   margin-top: -80px;
425 | }
426 | @media only screen and (max-width: 767px) {
427 |   .welcome-area .welcome-content {
428 |     margin-top: 0px;
429 |   }
430 | }
431 | 
432 | .welcome-area .welcome-content h2 {
433 |   font-size: 3.5rem;
434 |   margin-bottom: 1.5rem;
435 |   font-weight: 700;
436 |   color: #ffffff;
437 | }
438 | @media only screen and (min-width: 992px) and (max-width: 1199px) {
439 |   .welcome-area .welcome-content h2 {
440 |     font-size: 2.5rem;
441 |   }
442 | }
443 | @media only screen and (min-width: 768px) and (max-width: 991px) {
444 |   .welcome-area .welcome-content h2 {
445 |     font-size: 2rem;
446 |   }
447 | }
448 | @media only screen and (max-width: 767px) {
449 |   .welcome-area .welcome-content h2 {
450 |     font-size: 1.75rem;
451 |   }
452 | }
453 | .welcome-area .welcome-content p {
454 |   font-size: 1.25rem;
455 |   color: #ffffff;
456 | }
457 | @media only screen and (min-width: 992px) and (max-width: 1199px) {
458 |   .welcome-area .welcome-content p {
459 |     font-size: 1.15rem;
460 |   }
461 | }
462 | @media only screen and (min-width: 768px) and (max-width: 991px) {
463 |   .welcome-area .welcome-content p {
464 |     font-size: 1rem;
465 |   }
466 | }
467 | @media only screen and (max-width: 767px) {
468 |   .welcome-area .welcome-content p {
469 |     font-size: 1rem;
470 |   }
471 | }
472 | .demo-hero .version-number {
473 |   padding: 0.25rem 0.75rem;
474 |   color: #1f0757;
475 |   background-color: #ffffff;
476 |   display: inline-block;
477 |   border-radius: 30px;
478 |   font-size: 14px;
479 | }
480 | .demo-hero .animated-heading span {
481 |   font-size: 3.5rem;
482 |   padding: 0;
483 |   color: #ffffff;
484 |   font-weight: 700;
485 | }
486 | @media only screen and (min-width: 992px) and (max-width: 1199px) {
487 |   .demo-hero .animated-heading span {
488 |     font-size: 2.5rem;
489 |   }
490 | }
491 | @media only screen and (min-width: 768px) and (max-width: 991px) {
492 |   .demo-hero .animated-heading span {
493 |     font-size: 2.125rem;
494 |   }
495 | }
496 | @media only screen and (max-width: 767px) {
497 |   .demo-hero .animated-heading span {
498 |     font-size: 1.5rem;
499 |   }
500 | }
501 | @media only screen and (min-width: 576px) and (max-width: 767px) {
502 |   .demo-hero .animated-heading span {
503 |     font-size: 2rem;
504 |   }
505 | }
506 | .demo-hero .animated-heading span b {
507 |   font-weight: 700;
508 |   margin-left: 0.5rem;
509 |   color: #fdd76e;
510 | }
511 | 
512 | @-webkit-keyframes fadeInRightBig {
513 |   0% {
514 |     opacity: 0;
515 |     -webkit-transform: translateX(2000px);
516 |     transform: translateX(2000px);
517 |   }
518 |   100% {
519 |     opacity: 1;
520 |     -webkit-transform: translateX(0);
521 |     transform: translateX(0);
522 |   }
523 | }
524 | @keyframes fadeInRightBig {
525 |   0% {
526 |     opacity: 0;
527 |     -webkit-transform: translateX(2000px);
528 |     -ms-transform: translateX(2000px);
529 |     transform: translateX(2000px);
530 |   }
531 |   100% {
532 |     opacity: 1;
533 |     -webkit-transform: translateX(0);
534 |     -ms-transform: translateX(0);
535 |     transform: translateX(0);
536 |   }
537 | }
538 | @-webkit-keyframes fadeInUp {
539 |   0% {
540 |     opacity: 0;
541 |     -webkit-transform: translateY(20px);
542 |     transform: translateY(20px);
543 |   }
544 |   100% {
545 |     opacity: 1;
546 |     -webkit-transform: translateY(0);
547 |     transform: translateY(0);
548 |   }
549 | }
550 | @keyframes fadeInUp {
551 |   0% {
552 |     opacity: 0;
553 |     -webkit-transform: translateY(20px);
554 |     -ms-transform: translateY(20px);
555 |     transform: translateY(20px);
556 |   }
557 |   100% {
558 |     opacity: 1;
559 |     -webkit-transform: translateY(0);
560 |     -ms-transform: translateY(0);
561 |     transform: translateY(0);
562 |   }
563 | }
564 | @-webkit-keyframes rotateAnimation {
565 |   100% {
566 |     -webkit-transform: rotate(360deg);
567 |     transform: rotate(360deg);
568 |   }
569 | }
570 | @keyframes rotateAnimation {
571 |   100% {
572 |     -webkit-transform: rotate(360deg);
573 |     transform: rotate(360deg);
574 |   }
575 | }
576 | 


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