├── .gitignore
├── README.md
├── components
    └── NavBar.js
├── netlify.toml
├── next.config.js
├── package-lock.json
├── package.json
├── pages
    ├── _app.js
    ├── aboutUs.js
    ├── features.js
    ├── homepage.js
    └── index.js
├── public
    ├── AppleOS.png
    ├── GitHub-Mark.png
    ├── Joel.jpg
    ├── Octocat.png
    ├── favicon.ico
    ├── fullstack.png
    ├── jenniel.jpeg
    ├── jiaxin2.png
    ├── kafk.png
    ├── linkedin.png
    ├── realtime.png
    ├── secure.png
    ├── vercel.svg
    ├── waifai.png
    └── windowsOS.png
└── styles
    └── globals.css


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


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
 2 | 
 3 | ## Getting Started
 4 | 
 5 | First, run the development server:
 6 | 
 7 | ```bash
 8 | npm run dev
 9 | # or
10 | yarn dev
11 | ```
12 | 
13 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
14 | 
15 | You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
16 | 
17 | [API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.
18 | 
19 | The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
20 | 
21 | ## Learn More
22 | 
23 | To learn more about Next.js, take a look at the following resources:
24 | 
25 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
26 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
27 | 
28 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
29 | 
30 | ## Deploy on Vercel
31 | 
32 | The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/import?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
33 | 
34 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
35 | 


--------------------------------------------------------------------------------
/components/NavBar.js:
--------------------------------------------------------------------------------
 1 | import Image from 'next/image';
 2 | import Link from 'next/link';
 3 | 
 4 | const NavBar = () => {
 5 |   return (
 6 |     <div className="navbar">
 7 |       <div className="navleft-container">
 8 |         <ul>
 9 |           <li className="navleft">
10 |             <Link href="#section2">
11 |               <a>Features</a>
12 |             </Link>
13 |           </li>
14 |           <li className="navleft team">
15 |             <Link href="#section3">
16 |               <a>Team</a>
17 |             </Link>
18 |           </li>
19 |           <li className="navleft">
20 |             <Link href="/">
21 |               <a>Home</a>
22 |             </Link>
23 |           </li>
24 |         </ul>
25 |       </div>
26 |       <div className="navright">
27 |         <Link href="https://github.com/oslabs-beta/KafKare">
28 |           <a>
29 |             <Image
30 |               className="test4"
31 |               src="/Octocat.png"
32 |               alt="Github"
33 |               width={40}
34 |               height={40}
35 |             />
36 |           </a>
37 |         </Link>
38 |       </div>
39 |     </div>
40 |   );
41 | };
42 | 
43 | export default NavBar;
44 | 


--------------------------------------------------------------------------------
/netlify.toml:
--------------------------------------------------------------------------------
1 | [build]
2 |   command   = "npm run build"
3 |   functions = "out_functions"
4 |   publish   = "out_publish"
5 | 
6 | [[plugins]]
7 |   package = "@netlify/plugin-nextjs"
8 | 


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


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "kafkare-site",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "next",
 7 |     "build": "next build",
 8 |     "postbuild": "next-on-netlify",
 9 |     "start": "next start"
10 |   },
11 |   "dependencies": {
12 |     "next": "10.0.4",
13 |     "next-on-netlify": "^2.7.2",
14 |     "react": "17.0.1",
15 |     "react-dom": "17.0.1"
16 |   },
17 |   "devDependencies": {
18 |     "@netlify/plugin-nextjs": "^1.0.5"
19 |   }
20 | }
21 | 


--------------------------------------------------------------------------------
/pages/_app.js:
--------------------------------------------------------------------------------
1 | //import { ChakraProvider, CSSReset, theme } from '@chakra-ui/react';
2 | import '../styles/globals.css';
3 | 
4 | function MyApp({ Component, pageProps }) {
5 |   return <Component {...pageProps} />;
6 | }
7 | 
8 | export default MyApp;
9 | 


--------------------------------------------------------------------------------
/pages/aboutUs.js:
--------------------------------------------------------------------------------
  1 | import NavBar from '../components/NavBar';
  2 | import Image from 'next/image';
  3 | import Link from 'next/link';
  4 | 
  5 | export default function AboutUs() {
  6 |   return (
  7 |     <>
  8 |       <div className="about heading-container">
  9 |         <h1 className="heading">Meet The Team</h1>
 10 |       </div>
 11 |       <div className="about-row">
 12 |         <div className="profile">
 13 |           <div className="avatar">
 14 |             <Image
 15 |               className="pic"
 16 |               src="/jenniel.jpeg"
 17 |               alt="jenniel avatar"
 18 |               width={200}
 19 |               height={200}
 20 |             />
 21 |           </div>
 22 |           <h4 className="name">Jenniel Figuereo</h4>
 23 | 
 24 |           <div className="contact">
 25 |             <Link href="https://www.linkedin.com/in/jf1/">
 26 |               <a>
 27 |                 <Image
 28 |                   src="/linkedin.png"
 29 |                   alt="linkedin logo"
 30 |                   width={40}
 31 |                   height={40}
 32 |                 />
 33 |               </a>
 34 |             </Link>
 35 |             <Link href="https://github.com/jfiguereo89">
 36 |               <a>
 37 |                 <Image
 38 |                   src="/GitHub-Mark.png"
 39 |                   alt="github logo"
 40 |                   width={45}
 41 |                   height={45}
 42 |                 />
 43 |               </a>
 44 |             </Link>
 45 |           </div>
 46 |         </div>
 47 |         <div className="profile">
 48 |           <div className="avatar">
 49 |             <Image
 50 |               className="pic"
 51 |               src="/jiaxin2.png"
 52 |               alt="jiaxin avatar"
 53 |               width={200}
 54 |               height={200}
 55 |             />
 56 |           </div>
 57 |           <h4 className="name">
 58 |             Jiaxin Li
 59 |             <i class="fab fa-linkedin"></i>
 60 |           </h4>
 61 | 
 62 |           <div className="contact">
 63 |             <Link href="https://www.linkedin.com/in/lijiaxingogo/">
 64 |               <a>
 65 |                 <Image
 66 |                   src="/linkedin.png"
 67 |                   alt="linkedin logo"
 68 |                   width={40}
 69 |                   height={40}
 70 |                 />
 71 |               </a>
 72 |             </Link>
 73 |             <Link href="https://github.com/lijiaxingogo">
 74 |               <a>
 75 |                 <Image
 76 |                   src="/GitHub-Mark.png"
 77 |                   alt="github logo"
 78 |                   width={45}
 79 |                   height={45}
 80 |                 />
 81 |               </a>
 82 |             </Link>
 83 |           </div>
 84 |         </div>
 85 | 
 86 |         <div className="profile">
 87 |           <div className="avatar">
 88 |             <Image
 89 |               className="pic"
 90 |               src="/Joel.jpg"
 91 |               alt="joel avatar"
 92 |               width={200}
 93 |               height={200}
 94 |             />
 95 |           </div>
 96 |           <h4 className="name">Joel Beger</h4>
 97 |           <h5 className="engineer">Software Engineer</h5>
 98 |           <h6 className="bio">
 99 |             Hi I'm Joel. I like turtles. I also like long walks on the beach.
100 |             Sometimes I wonder if there's a cat heaven. It makes me cry.
101 |           </h6>
102 | 
103 |           <div className="contact">
104 |             <Link href="https://www.linkedin.com/in/jtbeger/">
105 |               <a>
106 |                 <Image
107 |                   src="/linkedin.png"
108 |                   alt="linkedin logo"
109 |                   width={40}
110 |                   height={40}
111 |                 />
112 |               </a>
113 |             </Link>
114 |             <Link href="https://github.com/jtbeger">
115 |               <a>
116 |                 <Image
117 |                   src="/GitHub-Mark.png"
118 |                   alt="github logo"
119 |                   width={45}
120 |                   height={45}
121 |                 />
122 |               </a>
123 |             </Link>
124 |           </div>
125 |         </div>
126 |         <div className="profile">
127 |           <div className="avatar">
128 |             <Image
129 |               className="pic"
130 |               src="/waifai.png"
131 |               alt="waifai avatar"
132 |               width={200}
133 |               height={200}
134 |             />
135 |           </div>
136 |           <h4 className="name">Wai Fai Lau</h4>
137 | 
138 |           <div className="contact">
139 |             <Link href="https://www.linkedin.com/in/wai-fai-lau/">
140 |               <a>
141 |                 <Image
142 |                   src="/linkedin.png"
143 |                   alt="linkedin logo"
144 |                   width={40}
145 |                   height={40}
146 |                 />
147 |               </a>
148 |             </Link>
149 |             <Link href="https://github.com/wlau8088">
150 |               <a>
151 |                 <Image
152 |                   src="/GitHub-Mark.png"
153 |                   alt="github logo"
154 |                   width={45}
155 |                   height={45}
156 |                 />
157 |               </a>
158 |             </Link>
159 |           </div>
160 |         </div>
161 |       </div>
162 |     </>
163 |   );
164 | }
165 | 


--------------------------------------------------------------------------------
/pages/features.js:
--------------------------------------------------------------------------------
 1 | import Image from 'next/image';
 2 | import Link from 'next/link';
 3 | 
 4 | export default function Features() {
 5 |   return (
 6 |     <>
 7 |       <div className="feature heading-container">
 8 |         <h1 className="heading">Features</h1>
 9 |       </div>
10 |       <div className="features-body">
11 |         <div className="feature-box 1">
12 |           <div className="title">OS agnostic</div>
13 |           <div className="feature-icon">
14 |             <span>
15 |               <Image
16 |                 src="/AppleOS.png"
17 |                 alt="Apple logo"
18 |                 width={60}
19 |                 height={60}
20 |               />
21 |             </span>
22 |             <span>
23 |               <Image
24 |                 src="/windowsOS.png"
25 |                 alt="Windows logo"
26 |                 width={60}
27 |                 height={60}
28 |               />
29 |             </span>
30 |           </div>
31 |           <div className="feature-body">
32 |             <p>
33 |               Cross-platform Kafka Monitoring packaged into an easy to use
34 |               desktop application.
35 |             </p>
36 |           </div>
37 |         </div>
38 |         <div className="feature-box 2">
39 |           <div className="title">Real-time data</div>
40 |           <div className="feature-icon">
41 |             <span>
42 |               <Image
43 |                 src="/realtime.png"
44 |                 alt="clock logo"
45 |                 width={65}
46 |                 height={65}
47 |               />
48 |             </span>
49 |           </div>
50 |           <div className="feature-body">
51 |             <p>
52 |               Always up to date metrics for easy tracking of your Kafka system's
53 |               health. Including information on brokers, topics, consumer lag and
54 |               more.
55 |             </p>
56 |           </div>
57 |         </div>
58 |         <div className="feature-box 3">
59 |           <div className="title">Secure</div>
60 |           <div className="feature-icon">
61 |             <span>
62 |               <Image
63 |                 src="/secure.png"
64 |                 alt="secure logo"
65 |                 width={65}
66 |                 height={65}
67 |               />
68 |             </span>
69 |           </div>
70 |           <div className="feature-body">
71 |             <p>
72 |               Leveraging user authentication to ensure only authorized members
73 |               can review the dashboard
74 |             </p>
75 |           </div>
76 |         </div>
77 |       </div>
78 |     </>
79 |   );
80 | }
81 | 


--------------------------------------------------------------------------------
/pages/homepage.js:
--------------------------------------------------------------------------------
 1 | import Image from 'next/image';
 2 | import Link from 'next/link';
 3 | 
 4 | export default function HomePage() {
 5 |   return (
 6 |     <>
 7 |       <div className="logo">
 8 |         <Image
 9 |           src="/kafk.png"
10 |           alt="Kafkare main logo"
11 |           width={720}
12 |           height={300}
13 |         />
14 |         <div className="logotext">
15 |           <h1>A System Monitoring Tool For Kafka.</h1>
16 |         </div>
17 |         <div className="btn">
18 |           <Link href="https://github.com/oslabs-beta/KafKare">
19 |             <a>
20 |               <button>
21 |                 <p className="gitbtn">Check out our github </p>
22 |                 <Image
23 |                   className="gitbtn"
24 |                   src="/GitHub-Mark.png"
25 |                   alt="github logo"
26 |                   width={32}
27 |                   height={32}
28 |                 />
29 |               </button>
30 |             </a>
31 |           </Link>
32 |         </div>
33 |       </div>
34 |     </>
35 |   );
36 | }
37 | 


--------------------------------------------------------------------------------
/pages/index.js:
--------------------------------------------------------------------------------
 1 | import Head from 'next/head';
 2 | import NavBar from '../components/NavBar';
 3 | import HomePage from './homepage';
 4 | import Features from './features';
 5 | import AboutUs from './aboutUs';
 6 | import Image from 'next/image';
 7 | 
 8 | export default function Home() {
 9 |   return (
10 |     <div className="mainContainer">
11 |       <NavBar />
12 |       <div>
13 |         <div className="homePage" id="section1">
14 |           <HomePage />
15 |         </div>
16 |         <div className="features-container" id="section2">
17 |           <Features />
18 |         </div>
19 |         <div className="about-container" id="section3">
20 |           <AboutUs />
21 |         </div>
22 |       </div>
23 |     </div>
24 |   );
25 | }
26 | 


--------------------------------------------------------------------------------
/public/AppleOS.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oslabs-beta/Kafkare-Website/47de3908dac172437c260b3862aece8dd6524b93/public/AppleOS.png


--------------------------------------------------------------------------------
/public/GitHub-Mark.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oslabs-beta/Kafkare-Website/47de3908dac172437c260b3862aece8dd6524b93/public/GitHub-Mark.png


--------------------------------------------------------------------------------
/public/Joel.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oslabs-beta/Kafkare-Website/47de3908dac172437c260b3862aece8dd6524b93/public/Joel.jpg


--------------------------------------------------------------------------------
/public/Octocat.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oslabs-beta/Kafkare-Website/47de3908dac172437c260b3862aece8dd6524b93/public/Octocat.png


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oslabs-beta/Kafkare-Website/47de3908dac172437c260b3862aece8dd6524b93/public/favicon.ico


--------------------------------------------------------------------------------
/public/fullstack.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oslabs-beta/Kafkare-Website/47de3908dac172437c260b3862aece8dd6524b93/public/fullstack.png


--------------------------------------------------------------------------------
/public/jenniel.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oslabs-beta/Kafkare-Website/47de3908dac172437c260b3862aece8dd6524b93/public/jenniel.jpeg


--------------------------------------------------------------------------------
/public/jiaxin2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oslabs-beta/Kafkare-Website/47de3908dac172437c260b3862aece8dd6524b93/public/jiaxin2.png


--------------------------------------------------------------------------------
/public/kafk.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oslabs-beta/Kafkare-Website/47de3908dac172437c260b3862aece8dd6524b93/public/kafk.png


--------------------------------------------------------------------------------
/public/linkedin.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oslabs-beta/Kafkare-Website/47de3908dac172437c260b3862aece8dd6524b93/public/linkedin.png


--------------------------------------------------------------------------------
/public/realtime.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oslabs-beta/Kafkare-Website/47de3908dac172437c260b3862aece8dd6524b93/public/realtime.png


--------------------------------------------------------------------------------
/public/secure.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oslabs-beta/Kafkare-Website/47de3908dac172437c260b3862aece8dd6524b93/public/secure.png


--------------------------------------------------------------------------------
/public/vercel.svg:
--------------------------------------------------------------------------------
1 | <svg width="283" height="64" viewBox="0 0 283 64" fill="none" 
2 |     xmlns="http://www.w3.org/2000/svg">
3 |     <path d="M141.04 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.46 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM248.72 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.45 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM200.24 34c0 6 3.92 10 10 10 4.12 0 7.21-1.87 8.8-4.92l7.68 4.43c-3.18 5.3-9.14 8.49-16.48 8.49-11.05 0-19-7.2-19-18s7.96-18 19-18c7.34 0 13.29 3.19 16.48 8.49l-7.68 4.43c-1.59-3.05-4.68-4.92-8.8-4.92-6.07 0-10 4-10 10zm82.48-29v46h-9V5h9zM36.95 0L73.9 64H0L36.95 0zm92.38 5l-27.71 48L73.91 5H84.3l17.32 30 17.32-30h10.39zm58.91 12v9.69c-1-.29-2.06-.49-3.2-.49-5.81 0-10 4-10 10V51h-9V17h9v9.2c0-5.08 5.91-9.2 13.2-9.2z" fill="#000"/>
4 | </svg>


--------------------------------------------------------------------------------
/public/waifai.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oslabs-beta/Kafkare-Website/47de3908dac172437c260b3862aece8dd6524b93/public/waifai.png


--------------------------------------------------------------------------------
/public/windowsOS.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oslabs-beta/Kafkare-Website/47de3908dac172437c260b3862aece8dd6524b93/public/windowsOS.png


--------------------------------------------------------------------------------
/styles/globals.css:
--------------------------------------------------------------------------------
  1 | html,
  2 | body {
  3 |   padding: 0;
  4 |   color: white;
  5 |   margin: 0;
  6 |   background-color: white;
  7 |   font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
  8 |     Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
  9 | }
 10 | 
 11 | a {
 12 |   color: white;
 13 |   text-decoration: none;
 14 | }
 15 | 
 16 | * {
 17 |   box-sizing: border-box;
 18 | }
 19 | 
 20 | html {
 21 |   scroll-behavior: smooth;
 22 | }
 23 | 
 24 | .navbar {
 25 |   display: flex;
 26 |   background-color: #e86669;
 27 |   justify-content: space-between;
 28 |   z-index: 1;
 29 |   position: fixed;
 30 |   top: 0;
 31 |   width: 100%;
 32 |   padding: 15 20 20 20;
 33 |   margin: 0;
 34 |   height: 5.5vh;
 35 | }
 36 | 
 37 | .navright {
 38 |   display: flex;
 39 |   font-weight: bold;
 40 |   align-items: center;
 41 |   margin-right: 50px;
 42 | }
 43 | 
 44 | .navleft-container {
 45 |   display: flex;
 46 |   justify-content: space-between;
 47 |   align-items: center;
 48 |   font-weight: bold;
 49 |   padding-left: 40px;
 50 | }
 51 | 
 52 | .navleft a {
 53 |   padding: 10px;
 54 |   line-height: 2rem;
 55 | }
 56 | 
 57 | li {
 58 |   display: inline-block;
 59 |   width: 150px;
 60 | }
 61 | 
 62 | .mainlogo {
 63 |   padding-top: 10px;
 64 |   cursor: pointer;
 65 |   margin-right: 30px;
 66 | }
 67 | 
 68 | .homePage {
 69 |   display: flex;
 70 |   justify-content: center;
 71 |   background-image: linear-gradient(#16193b, #4e7ac7);
 72 |   min-height: 100vh;
 73 | }
 74 | 
 75 | .logo {
 76 |   margin-top: 100px;
 77 | }
 78 | 
 79 | .logotext {
 80 |   color: rgb(255, 255, 255);
 81 |   text-align: center;
 82 |   font-size: 1.5rem;
 83 |   text-decoration: underline;
 84 | }
 85 | 
 86 | .feature.heading-container {
 87 |   margin: 0;
 88 |   background-color: #00053e;
 89 |   padding-top: 45px;
 90 |   padding-bottom: 50px;
 91 |   text-align: center;
 92 | }
 93 | 
 94 | .mainContainer {
 95 |   display: flex;
 96 |   flex-direction: column;
 97 |   height: 100vh;
 98 |   margin: 0;
 99 | }
100 | 
101 | .about.heading-container {
102 |   margin: 0;
103 |   background-color: #00053e;
104 |   padding-top: 45px;
105 |   padding-bottom: 50px;
106 |   text-align: center;
107 | }
108 | 
109 | .features-body {
110 |   display: flex;
111 |   color: black;
112 |   margin: auto;
113 |   padding-top: 75px;
114 |   padding-bottom: 75px;
115 |   max-width: 80%;
116 |   font-size: 1.5rem;
117 |   /* border: 1px solid blue; */
118 |   align-content: center;
119 | }
120 | 
121 | .title {
122 |   font-size: 2.5rem;
123 |   padding-bottom: 20px;
124 | }
125 | 
126 | .feature-box {
127 |   display: flex;
128 |   width: 20%;
129 |   flex-grow: 1;
130 |   flex-direction: column;
131 |   padding: 5px 10px 5px 10px;
132 |   text-align: center;
133 |   margin-right: 35px;
134 |   margin-left: 35px;
135 |   border-radius: 10px;
136 |   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
137 | }
138 | 
139 | .features-container {
140 |   margin-bottom: 20px;
141 | }
142 | 
143 | .feature-icon {
144 |   display: flex;
145 |   justify-content: space-evenly;
146 |   /* border: solid red 2px; */
147 | }
148 | 
149 | .feature-icon span {
150 |   display: flex;
151 |   /* border: solid black 3px; */
152 | }
153 | 
154 | .h1 {
155 |   font-size: ;
156 | }
157 | 
158 | .heading {
159 |   font-size: 3.5em;
160 | }
161 | 
162 | .about-row {
163 |   color: black;
164 |   display: flex;
165 |   max-width: 80%;
166 |   margin: 34px auto 34px auto;
167 |   justify-content: space-around;
168 |   /* border: solid red 2px; */
169 | }
170 | 
171 | .profile {
172 |   display: flex;
173 |   flex-direction: column;
174 |   text-align: center;
175 |   color: black;
176 | 
177 |   border-radius: 10px;
178 |   padding: 20px;
179 |   margin: 20px;
180 |   width: 30%;
181 |   flex-grow: 1;
182 |   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
183 | }
184 | 
185 | .pic {
186 |   border-radius: 50%;
187 | }
188 | 
189 | .contact {
190 |   display: flex;
191 |   justify-content: space-around;
192 |   margin-left: 20px;
193 |   margin-right: 20px;
194 | }
195 | 
196 | button {
197 |   background-color: transparent;
198 |   display: flex;
199 |   border: white solid 1px;
200 |   align-items: center;
201 |   color: rgb(208, 208, 208);
202 |   font-size: 1em;
203 |   border-radius: 5px;
204 |   padding: 0px 20px 0px 20px;
205 |   margin-top: 30px;
206 |   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
207 | }
208 | 
209 | button:hover {
210 |   background-color: rgba(255, 255, 255, 0.173);
211 |   cursor: pointer;
212 | }
213 | 
214 | .btn {
215 |   display: flex;
216 |   justify-content: space-around;
217 |   /* border: solid red 1px; */
218 | }
219 | 
220 | .gitbtn {
221 |   margin-left: 1px;
222 |   margin-right: 30px;
223 | }
224 | 
225 | .navleft a:hover {
226 |   text-shadow: 2px 2px 5px #000000ac;
227 |   font-size: 1.2rem;
228 | }
229 | 
230 | .test4:hover {
231 |   transform: scale(1.1);
232 |   border-radius: 20px;
233 |   text-decoration: none;
234 | }
235 | 
236 | .team {
237 |   padding-left: 10px;
238 | }
239 | 
240 | .engineer {
241 |   margin: 0;
242 |   font-size: 1.25rem;
243 |   font-style: italic;
244 |   font-weight: normal;
245 | }
246 | 
247 | .name {
248 |   margin: 5px 0px;
249 |   font-size: 1.75rem;
250 |   font-weight: 600;
251 | }
252 | 
253 | .bio {
254 |   margin: 1rem;
255 |   padding: 0.55rem;
256 |   font-size: 1rem;
257 |   font-weight: normal;
258 |   border-radius: 10px;
259 |   border: solid rgb(205, 205, 205) 1px;
260 | }
261 | 


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