├── hell ├── part 01 ├── index.js ├── blur.png ├── images │ ├── Ellipse 3.png │ ├── customer-support.png │ ├── businessman-analyzing-data.png │ ├── asian-woman-4975939-4159825 1.png │ ├── black-woman-4975941-4159827 1.png │ ├── western-man-4975942-4159828 1.png │ ├── business-people-discussing-business-idea.png │ └── designer-team-working-on-creative-design.png ├── style.css └── index.html ├── part05 ├── index.js ├── images │ ├── logo.png │ ├── image.png │ └── hero │ │ ├── image.png │ │ ├── section.png │ │ ├── image (1).png │ │ ├── image (2).png │ │ ├── image (3).png │ │ └── image (4).png ├── style.css └── index.html ├── part06 ├── index.js ├── images │ ├── div.png │ ├── hero.png.png │ ├── Link → SVG.png │ ├── div.hidden.png │ ├── system.png.png │ ├── define-once.png.png │ ├── div.bg-light-gray.png │ ├── explore-lines.png.png │ ├── sparkles.svg fill.png │ ├── semantic-logos.svg.png │ ├── div.bg-light-gray (1).png │ ├── analysis-for-everyone.png.png │ └── make-confident-decisions.png.png ├── style.css └── index.html ├── part 03 ├── index.js ├── images │ ├── Frame.png │ ├── Mask.png │ ├── logo.png │ ├── Group 10.png │ ├── Userpic.png │ ├── Userpic (1).png │ ├── Userpic (2).png │ ├── Userpic (3).png │ ├── Userpic (4).png │ ├── Userpic (5).png │ ├── Video Player.png │ ├── Background Data.png │ └── joyful-guy-texting-message-smartphone2 1.png ├── style.css └── index.html ├── part04 ├── index.js ├── images │ ├── logo.png │ └── hero │ │ ├── comp1.png │ │ ├── comp2.png │ │ ├── comp3.png │ │ ├── comp4.png │ │ ├── comp5.png │ │ ├── comp6.png │ │ ├── heroimg.png │ │ ├── awards.svg.png │ │ ├── div.v3-tabs-visual.png │ │ ├── div.v3-tabs-visual (1).png │ │ └── 6512e259a01c45e895e0bce2_Kate-Williams-MLR-p-500.jpg.png ├── style.css └── index.html ├── part07 ├── .eslintrc.json ├── app │ ├── favicon.ico │ ├── layout.js │ ├── page.jsx │ └── globals.css ├── jsconfig.json ├── next.config.mjs ├── postcss.config.js ├── package.json ├── tailwind.config.js ├── .gitignore ├── public │ ├── vercel.svg │ └── next.svg └── README.md └── part 02 ├── Images ├── Logo.png ├── Task.png ├── Illustration.png ├── Members Widget.png ├── Profile Widget.png ├── Proposal Widget.png ├── Applicants Widget.png └── pablo-sign-in 1 1.png ├── style.css └── index.html /hell: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /part 01/index.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /part05/index.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /part06/index.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /part 03/index.js: -------------------------------------------------------------------------------- 1 | AOS.init(); 2 | -------------------------------------------------------------------------------- /part04/index.js: -------------------------------------------------------------------------------- 1 | AOS.init(); 2 | -------------------------------------------------------------------------------- /part07/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "next/core-web-vitals" 3 | } 4 | -------------------------------------------------------------------------------- /part 01/blur.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elidotco/landing-pages/HEAD/part 01/blur.png -------------------------------------------------------------------------------- /part04/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elidotco/landing-pages/HEAD/part04/images/logo.png -------------------------------------------------------------------------------- /part05/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elidotco/landing-pages/HEAD/part05/images/logo.png -------------------------------------------------------------------------------- /part06/images/div.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elidotco/landing-pages/HEAD/part06/images/div.png -------------------------------------------------------------------------------- /part07/app/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elidotco/landing-pages/HEAD/part07/app/favicon.ico -------------------------------------------------------------------------------- /part 02/Images/Logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elidotco/landing-pages/HEAD/part 02/Images/Logo.png -------------------------------------------------------------------------------- /part 02/Images/Task.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elidotco/landing-pages/HEAD/part 02/Images/Task.png -------------------------------------------------------------------------------- /part 03/images/Frame.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elidotco/landing-pages/HEAD/part 03/images/Frame.png -------------------------------------------------------------------------------- /part 03/images/Mask.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elidotco/landing-pages/HEAD/part 03/images/Mask.png -------------------------------------------------------------------------------- /part 03/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elidotco/landing-pages/HEAD/part 03/images/logo.png -------------------------------------------------------------------------------- /part05/images/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elidotco/landing-pages/HEAD/part05/images/image.png -------------------------------------------------------------------------------- /part 03/images/Group 10.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elidotco/landing-pages/HEAD/part 03/images/Group 10.png -------------------------------------------------------------------------------- /part 03/images/Userpic.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elidotco/landing-pages/HEAD/part 03/images/Userpic.png -------------------------------------------------------------------------------- /part06/images/hero.png.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elidotco/landing-pages/HEAD/part06/images/hero.png.png -------------------------------------------------------------------------------- /part 01/images/Ellipse 3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elidotco/landing-pages/HEAD/part 01/images/Ellipse 3.png -------------------------------------------------------------------------------- /part 03/images/Userpic (1).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elidotco/landing-pages/HEAD/part 03/images/Userpic (1).png -------------------------------------------------------------------------------- /part 03/images/Userpic (2).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elidotco/landing-pages/HEAD/part 03/images/Userpic (2).png -------------------------------------------------------------------------------- /part 03/images/Userpic (3).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elidotco/landing-pages/HEAD/part 03/images/Userpic (3).png -------------------------------------------------------------------------------- /part 03/images/Userpic (4).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elidotco/landing-pages/HEAD/part 03/images/Userpic (4).png -------------------------------------------------------------------------------- /part 03/images/Userpic (5).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elidotco/landing-pages/HEAD/part 03/images/Userpic (5).png -------------------------------------------------------------------------------- /part04/images/hero/comp1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elidotco/landing-pages/HEAD/part04/images/hero/comp1.png -------------------------------------------------------------------------------- /part04/images/hero/comp2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elidotco/landing-pages/HEAD/part04/images/hero/comp2.png -------------------------------------------------------------------------------- /part04/images/hero/comp3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elidotco/landing-pages/HEAD/part04/images/hero/comp3.png -------------------------------------------------------------------------------- /part04/images/hero/comp4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elidotco/landing-pages/HEAD/part04/images/hero/comp4.png -------------------------------------------------------------------------------- /part04/images/hero/comp5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elidotco/landing-pages/HEAD/part04/images/hero/comp5.png -------------------------------------------------------------------------------- /part04/images/hero/comp6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elidotco/landing-pages/HEAD/part04/images/hero/comp6.png -------------------------------------------------------------------------------- /part04/images/hero/heroimg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elidotco/landing-pages/HEAD/part04/images/hero/heroimg.png -------------------------------------------------------------------------------- /part05/images/hero/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elidotco/landing-pages/HEAD/part05/images/hero/image.png -------------------------------------------------------------------------------- /part05/images/hero/section.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elidotco/landing-pages/HEAD/part05/images/hero/section.png -------------------------------------------------------------------------------- /part06/images/Link → SVG.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elidotco/landing-pages/HEAD/part06/images/Link → SVG.png -------------------------------------------------------------------------------- /part06/images/div.hidden.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elidotco/landing-pages/HEAD/part06/images/div.hidden.png -------------------------------------------------------------------------------- /part06/images/system.png.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elidotco/landing-pages/HEAD/part06/images/system.png.png -------------------------------------------------------------------------------- /part 02/Images/Illustration.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elidotco/landing-pages/HEAD/part 02/Images/Illustration.png -------------------------------------------------------------------------------- /part 03/images/Video Player.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elidotco/landing-pages/HEAD/part 03/images/Video Player.png -------------------------------------------------------------------------------- /part05/images/hero/image (1).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elidotco/landing-pages/HEAD/part05/images/hero/image (1).png -------------------------------------------------------------------------------- /part05/images/hero/image (2).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elidotco/landing-pages/HEAD/part05/images/hero/image (2).png -------------------------------------------------------------------------------- /part05/images/hero/image (3).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elidotco/landing-pages/HEAD/part05/images/hero/image (3).png -------------------------------------------------------------------------------- /part05/images/hero/image (4).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elidotco/landing-pages/HEAD/part05/images/hero/image (4).png -------------------------------------------------------------------------------- /part07/jsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "paths": { 4 | "@/*": ["./*"] 5 | } 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /part 01/images/customer-support.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elidotco/landing-pages/HEAD/part 01/images/customer-support.png -------------------------------------------------------------------------------- /part 02/Images/Members Widget.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elidotco/landing-pages/HEAD/part 02/Images/Members Widget.png -------------------------------------------------------------------------------- /part 02/Images/Profile Widget.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elidotco/landing-pages/HEAD/part 02/Images/Profile Widget.png -------------------------------------------------------------------------------- /part 02/Images/Proposal Widget.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elidotco/landing-pages/HEAD/part 02/Images/Proposal Widget.png -------------------------------------------------------------------------------- /part 03/images/Background Data.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elidotco/landing-pages/HEAD/part 03/images/Background Data.png -------------------------------------------------------------------------------- /part04/images/hero/awards.svg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elidotco/landing-pages/HEAD/part04/images/hero/awards.svg.png -------------------------------------------------------------------------------- /part06/images/define-once.png.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elidotco/landing-pages/HEAD/part06/images/define-once.png.png -------------------------------------------------------------------------------- /part06/images/div.bg-light-gray.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elidotco/landing-pages/HEAD/part06/images/div.bg-light-gray.png -------------------------------------------------------------------------------- /part06/images/explore-lines.png.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elidotco/landing-pages/HEAD/part06/images/explore-lines.png.png -------------------------------------------------------------------------------- /part06/images/sparkles.svg fill.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elidotco/landing-pages/HEAD/part06/images/sparkles.svg fill.png -------------------------------------------------------------------------------- /part 02/Images/Applicants Widget.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elidotco/landing-pages/HEAD/part 02/Images/Applicants Widget.png -------------------------------------------------------------------------------- /part 02/Images/pablo-sign-in 1 1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elidotco/landing-pages/HEAD/part 02/Images/pablo-sign-in 1 1.png -------------------------------------------------------------------------------- /part06/images/semantic-logos.svg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elidotco/landing-pages/HEAD/part06/images/semantic-logos.svg.png -------------------------------------------------------------------------------- /part07/next.config.mjs: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = {}; 3 | 4 | export default nextConfig; 5 | -------------------------------------------------------------------------------- /part07/postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | }; 7 | -------------------------------------------------------------------------------- /part06/images/div.bg-light-gray (1).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elidotco/landing-pages/HEAD/part06/images/div.bg-light-gray (1).png -------------------------------------------------------------------------------- /part04/images/hero/div.v3-tabs-visual.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elidotco/landing-pages/HEAD/part04/images/hero/div.v3-tabs-visual.png -------------------------------------------------------------------------------- /part 01/images/businessman-analyzing-data.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elidotco/landing-pages/HEAD/part 01/images/businessman-analyzing-data.png -------------------------------------------------------------------------------- /part04/images/hero/div.v3-tabs-visual (1).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elidotco/landing-pages/HEAD/part04/images/hero/div.v3-tabs-visual (1).png -------------------------------------------------------------------------------- /part06/images/analysis-for-everyone.png.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elidotco/landing-pages/HEAD/part06/images/analysis-for-everyone.png.png -------------------------------------------------------------------------------- /part06/images/make-confident-decisions.png.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elidotco/landing-pages/HEAD/part06/images/make-confident-decisions.png.png -------------------------------------------------------------------------------- /part 01/images/asian-woman-4975939-4159825 1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elidotco/landing-pages/HEAD/part 01/images/asian-woman-4975939-4159825 1.png -------------------------------------------------------------------------------- /part 01/images/black-woman-4975941-4159827 1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elidotco/landing-pages/HEAD/part 01/images/black-woman-4975941-4159827 1.png -------------------------------------------------------------------------------- /part 01/images/western-man-4975942-4159828 1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elidotco/landing-pages/HEAD/part 01/images/western-man-4975942-4159828 1.png -------------------------------------------------------------------------------- /part 01/images/business-people-discussing-business-idea.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elidotco/landing-pages/HEAD/part 01/images/business-people-discussing-business-idea.png -------------------------------------------------------------------------------- /part 01/images/designer-team-working-on-creative-design.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elidotco/landing-pages/HEAD/part 01/images/designer-team-working-on-creative-design.png -------------------------------------------------------------------------------- /part 03/images/joyful-guy-texting-message-smartphone2 1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elidotco/landing-pages/HEAD/part 03/images/joyful-guy-texting-message-smartphone2 1.png -------------------------------------------------------------------------------- /part04/images/hero/6512e259a01c45e895e0bce2_Kate-Williams-MLR-p-500.jpg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elidotco/landing-pages/HEAD/part04/images/hero/6512e259a01c45e895e0bce2_Kate-Williams-MLR-p-500.jpg.png -------------------------------------------------------------------------------- /part05/style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;300;400;500;700;800;900&family=Rubik:wght@700&display=swap"); 2 | 3 | * { 4 | box-sizing: border-box; 5 | margin: 0; 6 | padding: 0; 7 | 8 | font-family: "Inter"; 9 | } 10 | 11 | .imgas { 12 | background: url("images/image.png") center no-repeat; 13 | background-size: cover; 14 | } 15 | -------------------------------------------------------------------------------- /part07/app/layout.js: -------------------------------------------------------------------------------- 1 | import { Inter } from "next/font/google"; 2 | import "./globals.css"; 3 | 4 | const inter = Inter({ subsets: ["latin"] }); 5 | 6 | export const metadata = { 7 | title: "Create Next App", 8 | description: "Generated by create next app", 9 | }; 10 | 11 | export default function RootLayout({ children }) { 12 | return ( 13 | 14 | {children} 15 | 16 | ); 17 | } 18 | -------------------------------------------------------------------------------- /part07/app/page.jsx: -------------------------------------------------------------------------------- 1 | export default function Home() { 2 | return ( 3 | <> 4 | {/* // Header Section */} 5 |
Hello
6 | {/* // Header Section End*/} 7 | 8 | {/* // Main Section End */} 9 |
hola
10 | {/* // Main Section End */} 11 | 12 | {/* Footer Section */} 13 | 14 | {/* Footer Section End */} 15 | 16 | ); 17 | } 18 | -------------------------------------------------------------------------------- /part04/style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;300;400;500;700;800;900&family=Rubik:wght@700&display=swap"); 2 | 3 | * { 4 | box-sizing: border-box; 5 | margin: 0; 6 | padding: 0; 7 | font-family: "Inter", sans-serif !important; 8 | color: white; 9 | } 10 | 11 | body { 12 | background: #131a21; 13 | } 14 | 15 | p { 16 | color: #a5a5a5; 17 | } 18 | 19 | footer p { 20 | cursor: pointer; 21 | } 22 | footer p:hover { 23 | color: white; 24 | transition: all 0.2s; 25 | } 26 | -------------------------------------------------------------------------------- /part06/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | margin: 0; 4 | padding: 0; 5 | } 6 | 7 | body { 8 | font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; 9 | background-color: white; 10 | } 11 | 12 | .hero { 13 | font-family: Georgia, "Times New Roman", Times, serif; 14 | font-style: italic; 15 | background: url("images/sparkles.svg\ fill.png") no-repeat; 16 | 17 | background-size: cover; 18 | } 19 | 20 | h1 { 21 | font-family: Georgia, "Times New Roman", Times, serif; 22 | font-style: italic; 23 | } 24 | -------------------------------------------------------------------------------- /part07/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "part07", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "next dev", 7 | "build": "next build", 8 | "start": "next start", 9 | "lint": "next lint" 10 | }, 11 | "dependencies": { 12 | "react": "^18", 13 | "react-dom": "^18", 14 | "next": "14.1.0" 15 | }, 16 | "devDependencies": { 17 | "autoprefixer": "^10.0.1", 18 | "postcss": "^8", 19 | "tailwindcss": "^3.3.0", 20 | "eslint": "^8", 21 | "eslint-config-next": "14.1.0" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /part07/tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | content: [ 4 | "./pages/**/*.{js,ts,jsx,tsx,mdx}", 5 | "./components/**/*.{js,ts,jsx,tsx,mdx}", 6 | "./app/**/*.{js,ts,jsx,tsx,mdx}", 7 | ], 8 | theme: { 9 | extend: { 10 | backgroundImage: { 11 | "gradient-radial": "radial-gradient(var(--tw-gradient-stops))", 12 | "gradient-conic": 13 | "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))", 14 | }, 15 | }, 16 | }, 17 | plugins: [], 18 | }; 19 | -------------------------------------------------------------------------------- /part07/.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 | .yarn/install-state.gz 8 | 9 | # testing 10 | /coverage 11 | 12 | # next.js 13 | /.next/ 14 | /out/ 15 | 16 | # production 17 | /build 18 | 19 | # misc 20 | .DS_Store 21 | *.pem 22 | 23 | # debug 24 | npm-debug.log* 25 | yarn-debug.log* 26 | yarn-error.log* 27 | 28 | # local env files 29 | .env*.local 30 | 31 | # vercel 32 | .vercel 33 | 34 | # typescript 35 | *.tsbuildinfo 36 | next-env.d.ts 37 | -------------------------------------------------------------------------------- /part07/public/vercel.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /part07/app/globals.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | /* :root { 6 | --foreground-rgb: 0, 0, 0; 7 | --background-start-rgb: 214, 219, 220; 8 | --background-end-rgb: 255, 255, 255; 9 | } 10 | 11 | @media (prefers-color-scheme: dark) { 12 | :root { 13 | --foreground-rgb: 255, 255, 255; 14 | --background-start-rgb: 0, 0, 0; 15 | --background-end-rgb: 0, 0, 0; 16 | } 17 | } 18 | 19 | body { 20 | color: rgb(var(--foreground-rgb)); 21 | background: linear-gradient( 22 | to bottom, 23 | transparent, 24 | rgb(var(--background-end-rgb)) 25 | ) 26 | rgb(var(--background-start-rgb)); 27 | } */ 28 | 29 | @layer utilities { 30 | .text-balance { 31 | text-wrap: balance; 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /part07/public/next.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /part07/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 | # or 12 | pnpm dev 13 | # or 14 | bun dev 15 | ``` 16 | 17 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. 18 | 19 | You can start editing the page by modifying `app/page.js`. The page auto-updates as you edit the file. 20 | 21 | This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font. 22 | 23 | ## Learn More 24 | 25 | To learn more about Next.js, take a look at the following resources: 26 | 27 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. 28 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. 29 | 30 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome! 31 | 32 | ## Deploy on Vercel 33 | 34 | The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. 35 | 36 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. 37 | -------------------------------------------------------------------------------- /part 02/style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;800;900&display=swap"); 2 | 3 | :root { 4 | --background: #e9e8e8; 5 | --green: #71a894; 6 | --black: #303031; 7 | --gray: #66645e; 8 | } 9 | 10 | * { 11 | box-sizing: border-box; 12 | margin: 0; 13 | padding: 0; 14 | font-family: "Inter", serif; 15 | line-height: 100%; 16 | } 17 | img { 18 | width: 100%; 19 | border-radius: inherit; 20 | } 21 | 22 | button { 23 | border: none; 24 | height: 44px; 25 | padding: 10px 15px; 26 | background: var(--green); 27 | border-radius: 8px; 28 | color: var(--background); 29 | font-weight: 700; 30 | font-size: 15px; 31 | } 32 | button.more { 33 | background-color: #303031; 34 | } 35 | body { 36 | background: var(--background); 37 | } 38 | 39 | /* Header style start */ 40 | header { 41 | display: flex; 42 | width: 100%; 43 | justify-content: space-between; 44 | height: 65px; 45 | align-items: center; 46 | padding: 40px; 47 | } 48 | 49 | .logo { 50 | display: flex; 51 | } 52 | .logo > img { 53 | width: 68px; 54 | height: 40px; 55 | } 56 | .logo > h1 { 57 | font-size: 32px; 58 | line-height: normal; 59 | font-weight: 500; 60 | } 61 | /* menu items */ 62 | .nav > ul { 63 | display: flex; 64 | gap: 20px; 65 | align-items: center; 66 | list-style-type: none; 67 | } 68 | .nav > ul > li > a { 69 | text-decoration: none; 70 | color: var(--black); 71 | } 72 | .nav > ul > li:last-child > a { 73 | color: var(--green) !important; 74 | font-weight: 700; 75 | } 76 | 77 | .menu-btn { 78 | width: 50px; 79 | display: none; 80 | } 81 | 82 | /* header styles end */ 83 | main { 84 | width: 100%; 85 | } 86 | /* hero style Start */ 87 | .hero { 88 | width: 100%; 89 | display: flex; 90 | justify-content: space-between; 91 | align-items: center; 92 | gap: 20px; 93 | padding: 40px 0 100px 40px; 94 | } 95 | 96 | .hero > .title { 97 | width: 55%; 98 | } 99 | .hero > .title > h2 { 100 | font-size: 60px; 101 | } 102 | 103 | .hero > .title > p { 104 | padding: 30px 0; 105 | } 106 | .hero > .image { 107 | position: relative; 108 | } 109 | .hero > .image > svg { 110 | position: absolute; 111 | top: 0; 112 | left: 0; 113 | width: 100%; 114 | height: 120%; 115 | z-index: -10; 116 | } 117 | /* hero style end */ 118 | 119 | /* second section start */ 120 | .second, 121 | .last { 122 | width: 100%; 123 | padding: 60px 40px; 124 | display: flex; 125 | justify-content: center; 126 | align-items: center; 127 | flex-direction: column; 128 | } 129 | 130 | .second > h2, 131 | .last > h2 { 132 | font-size: 48px; 133 | } 134 | .second > p, 135 | .last > p { 136 | padding: 15px 100px; 137 | text-align: center; 138 | width: 80%; 139 | } 140 | 141 | .second > .cards, 142 | .last > .cards { 143 | width: 100%; 144 | display: inherit; 145 | justify-content: space-between; 146 | padding: 100px 0; 147 | } 148 | 149 | .second > .cards > .card { 150 | width: 30%; 151 | background: white; 152 | box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.1); 153 | border-radius: 8px; 154 | padding: 30px 20px; 155 | display: flex; 156 | justify-content: center; 157 | align-items: center; 158 | flex-direction: column; 159 | gap: 30px; 160 | text-align: center; 161 | } 162 | 163 | .long-card { 164 | width: 100%; 165 | display: flex; 166 | justify-content: space-between; 167 | align-items: center; 168 | margin: 150px 0; 169 | } 170 | 171 | .long-card > .title { 172 | width: 50%; 173 | line-height: 10px; 174 | } 175 | .long-card > .title > h3 { 176 | font-size: 48px; 177 | padding: 20px 0; 178 | } 179 | .long-card > .image > img { 180 | width: 80%; 181 | } 182 | .long-card > .images { 183 | display: flex; 184 | flex-wrap: wrap; 185 | width: 40%; 186 | gap: 20px; 187 | } 188 | 189 | .long-card > .images > img:nth-child(2) { 190 | width: 60%; 191 | } 192 | .long-card > .images > img:nth-child(3) { 193 | width: 35%; 194 | margin-top: 50px; 195 | } 196 | 197 | .last > .cards > .card { 198 | width: 30%; 199 | background: white; 200 | box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.1); 201 | border-radius: 8px; 202 | padding: 30px 10px 10px 10px; 203 | display: flex; 204 | text-align: left; 205 | flex-direction: column; 206 | gap: 30px; 207 | } 208 | .last > .cards > .card > h4 { 209 | text-align: left; 210 | } 211 | .last > .cards > .card > .price { 212 | display: flex; 213 | width: 100%; 214 | justify-content: space-between; 215 | line-height: 20px; 216 | } 217 | .last > .cards > .card > .price > p:first-child { 218 | padding: 5px; 219 | background-color: var(--green); 220 | color: white; 221 | border-radius: 8px; 222 | } 223 | /* second section end */ 224 | footer { 225 | margin-top: 100px; 226 | } 227 | footer > .hero > .title > h2 { 228 | font-size: 48px; 229 | } 230 | 231 | footer > .header { 232 | display: flex; 233 | justify-content: space-between; 234 | padding: 40px; 235 | } 236 | @media screen and (max-width: 685px) { 237 | header { 238 | padding: 15px; 239 | } 240 | .nav { 241 | display: none; 242 | } 243 | .menu-btn { 244 | display: flex; 245 | color: var(--black); 246 | } 247 | } 248 | @media screen and (max-width: 992px) { 249 | .logo > h1 { 250 | display: none; 251 | } 252 | } 253 | -------------------------------------------------------------------------------- /part 01/style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;800;900&display=swap"); 2 | 3 | :root { 4 | --white: #fdfcfc; 5 | --gray: #f6f6f6; 6 | --blue: #8eadd5; 7 | --black: #272d38; 8 | } 9 | 10 | * { 11 | box-sizing: border-box; 12 | margin: 0; 13 | padding: 0; 14 | line-height: 100%; 15 | } 16 | 17 | body { 18 | background-color: var(--white); 19 | width: 100%; 20 | color: var(--black); 21 | font-family: "Inter", sans-serif; 22 | scroll-behavior: smooth; 23 | } 24 | 25 | button { 26 | width: 168px; 27 | height: 46px; 28 | background-color: var(--blue); 29 | color: var(--white); 30 | font-size: 18px; 31 | border: none; 32 | border-radius: 8px; 33 | } 34 | 35 | img { 36 | width: 100%; 37 | height: 100%; 38 | border-radius: inherit; 39 | } 40 | /* header */ 41 | 42 | .blur { 43 | position: absolute; 44 | top: 0; 45 | left: 0; 46 | width: 70%; 47 | height: 80%; 48 | } 49 | .blur > img { 50 | width: 100%; 51 | height: 100%; 52 | } 53 | 54 | .header { 55 | display: flex; 56 | width: 100%; 57 | padding: 30px 150px; 58 | justify-content: space-between; 59 | align-items: center; 60 | } 61 | .logo { 62 | font-weight: 900; 63 | } 64 | 65 | .menu { 66 | display: flex; 67 | gap: 20px; 68 | list-style-type: none; 69 | } 70 | 71 | li > a { 72 | text-decoration: none; 73 | color: var(--black); 74 | } 75 | .menu-btn { 76 | color: black; 77 | border: 1px solid; 78 | width: 30px; 79 | display: none; 80 | } 81 | /* main */ 82 | main { 83 | padding: 50px 150px; 84 | } 85 | 86 | .hero, 87 | .aboutone, 88 | .contact, 89 | footer { 90 | display: flex; 91 | justify-content: space-between; 92 | width: 100%; 93 | } 94 | 95 | .hero > .title, 96 | .aboutone > .title, 97 | .contact > .title { 98 | width: 50%; 99 | } 100 | .hero > .title > h1 { 101 | font-size: 54px; 102 | line-height: 100%; 103 | } 104 | 105 | .hero > .title > p, 106 | .contact > .title > p { 107 | font-size: 18px; 108 | padding: 15px 0; 109 | } 110 | 111 | .companies { 112 | margin-top: 100px; 113 | display: flex; 114 | justify-content: center; 115 | align-items: center; 116 | flex-direction: column; 117 | font-weight: 300; 118 | } 119 | .companies > .comps { 120 | width: 90%; 121 | display: inherit; 122 | justify-content: space-between; 123 | padding: 15px 10px; 124 | background-color: var(--gray); 125 | border-radius: 8px; 126 | } 127 | .about { 128 | margin-top: 100px; 129 | position: relative; 130 | width: 100%; 131 | } 132 | .aboutone { 133 | align-items: center; 134 | } 135 | .aboutone > .title { 136 | width: 40%; 137 | } 138 | .aboutone > .title > h2 { 139 | font-size: 40px; 140 | } 141 | 142 | .aboutone > .title > p { 143 | padding: 30px 20px 30px 0; 144 | } 145 | .blur-2 { 146 | position: absolute; 147 | right: -150px; 148 | top: auto; 149 | bottom: auto; 150 | width: 50%; 151 | height: 100%; 152 | } 153 | /* testimonial */ 154 | .testimonial { 155 | width: 100%; 156 | display: flex; 157 | flex-direction: column; 158 | justify-content: center; 159 | align-items: center; 160 | } 161 | .testimonial > p { 162 | padding: 15px; 163 | text-transform: uppercase; 164 | } 165 | .testimonial > h2 { 166 | font-size: 40px; 167 | width: 40%; 168 | text-align: center; 169 | } 170 | 171 | .testimonial > .cards { 172 | display: flex; 173 | justify-content: space-between; 174 | align-items: center; 175 | margin-top: 100px; 176 | gap: 20px; 177 | } 178 | .testimonial > .cards > .card { 179 | width: 30%; 180 | background-color: var(--gray); 181 | display: flex; 182 | flex-direction: column; 183 | align-items: center; 184 | text-align: center; 185 | padding: 40px 0; 186 | border-radius: 20px; 187 | font-weight: 300; 188 | } 189 | 190 | .testimonial > .cards > .card > .image { 191 | width: 130px; 192 | height: 130px; 193 | border-radius: 50%; 194 | } 195 | 196 | .testimonial > .cards > .card > .name { 197 | padding-bottom: 50px; 198 | } 199 | .contact { 200 | align-items: center; 201 | margin-top: 100px; 202 | background-color: var(--gray); 203 | border-radius: 20px; 204 | padding: 0 30px; 205 | } 206 | .contact > .title { 207 | width: 40%; 208 | display: flex; 209 | flex-direction: column; 210 | height: 100%; 211 | justify-content: space-between; 212 | } 213 | .contact > .title > h2 { 214 | font-size: 40px; 215 | } 216 | .contact > .title > p { 217 | padding: 30px 0; 218 | font-size: 16px; 219 | } 220 | 221 | /* footer */ 222 | footer { 223 | padding: 50px 150px; 224 | background-color: var(--gray); 225 | justify-content: space-between; 226 | gap: 100px; 227 | margin-top: 100px; 228 | } 229 | footer > .stuff { 230 | display: flex; 231 | flex-direction: column; 232 | gap: 30px; 233 | width: 25%; 234 | } 235 | 236 | @media screen and (max-width: 670px) { 237 | .header, 238 | main, 239 | footer { 240 | padding: 10px; 241 | } 242 | .nav { 243 | display: none; 244 | } 245 | .menu-btn { 246 | display: flex; 247 | border: none; 248 | } 249 | 250 | .hero, 251 | .aboutone, 252 | .testimonial > .cards { 253 | flex-wrap: wrap; 254 | } 255 | .hero > .title, 256 | .aboutone > .title { 257 | width: 100%; 258 | display: flex; 259 | flex-direction: column; 260 | justify-content: center; 261 | align-items: center; 262 | text-align: center; 263 | } 264 | .hero > .title > h1 { 265 | font-size: 40px; 266 | } 267 | .hero > .images, 268 | .aboutone > .image { 269 | width: 100%; 270 | } 271 | .companies > .comps, 272 | .testimonial > .cards > .card { 273 | width: 100%; 274 | } 275 | .companies > .comps > svg { 276 | width: 20%; 277 | } 278 | .aboutone > .title > h2 { 279 | font-size: 30px; 280 | } 281 | .aboutone > .title > p { 282 | padding: 40px 0; 283 | } 284 | .testimonial > h2 { 285 | width: 100%; 286 | } 287 | .contact { 288 | flex-direction: column; 289 | padding-bottom: 30px; 290 | } 291 | .contact > .title { 292 | width: 100%; 293 | } 294 | footer { 295 | flex-direction: column; 296 | padding: 50px 10px; 297 | } 298 | footer > .stuff { 299 | width: 100%; 300 | text-align: center; 301 | } 302 | } 303 | 304 | @media screen and (max-width: 992px) { 305 | .header, 306 | main, 307 | footer { 308 | padding: 20px 10px; 309 | } 310 | main { 311 | margin-top: 50px; 312 | } 313 | .hero > .title > h1 { 314 | font-size: 40px; 315 | } 316 | .blur-2 { 317 | right: -10px; 318 | } 319 | } 320 | -------------------------------------------------------------------------------- /part05/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | C2 Financial 7 | 8 | 9 | 10 | 11 | 12 | 13 |
16 | 17 | 35 | 36 | 43 | 49 | 50 | 62 |
63 | 64 | 65 |
66 | 67 |
68 | 69 |
70 |
71 |

72 | Powering the mortgage industry for decades 73 |

74 |
75 |

76 | With over 30 years of experience, C2 Financial is a top mortgage 77 | broker in the nation. We offer access to superior loan products, 78 | meticulous compliance, and the tools loan originators need to 79 | grow their businesses and better the lives of their clients. 80 |

81 |
82 | 87 |
88 | 91 |
92 | 93 |
96 |

C2 Connect Champion is Feb 28, 2024!

97 | 100 |
101 |
102 | 103 | 104 | 105 |
106 |
107 |

Our Services

108 |

111 | Superior loan products across every category 112 |

113 |
114 |
115 |
118 |
119 |

Residential

120 |

Securing the most competitive pricing in the market

121 |
122 | 123 |
124 |
127 |
128 |

Commercial

129 |

Bringing business and personal needs together

130 |
131 | 132 |
133 |
136 |
137 |

Reverse

138 |

Ensuring a secure financial future for our seniors

139 |
140 | 141 |
142 |
145 |
146 |

Real Estate

147 |

Creating a seamless journey, from finance to purchase

148 |
149 | 150 |
151 |
152 |
153 |
154 | 155 | 156 | 157 |
158 |
159 |

Our Services

160 |

163 | Superior loan products across every category 164 |

165 |
166 |
167 | 168 |
169 | 170 | 171 | -------------------------------------------------------------------------------- /part 03/style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Yanone+Kaffeesatz:wght@200;300;400;500;700&display=swap"); 2 | 3 | :root { 4 | --orange: #f60; 5 | --black: #0b1b35; 6 | --gray: #8a898e; 7 | } 8 | img { 9 | width: 100%; 10 | } 11 | a { 12 | text-decoration: none; 13 | color: var(--black); 14 | } 15 | 16 | li, 17 | button { 18 | cursor: pointer; 19 | } 20 | * { 21 | box-sizing: border-box; 22 | margin: 0; 23 | padding: 0; 24 | font-family: "Roboto", sans-serif; 25 | scroll-behavior: smooth; 26 | } 27 | 28 | /* Header start */ 29 | header { 30 | width: 100%; 31 | height: 65px; 32 | padding: 50px 100px 10px 100px; 33 | display: flex; 34 | justify-content: space-between; 35 | align-items: center; 36 | } 37 | header > .logo { 38 | width: 200px; 39 | } 40 | 41 | /* navbar start */ 42 | 43 | .menu-list { 44 | list-style-type: none; 45 | display: flex; 46 | flex-direction: row; 47 | gap: 20px; 48 | margin-right: 100px; 49 | } 50 | 51 | /* buttons login */ 52 | 53 | .sign-buttons > .login { 54 | border: none; 55 | background: transparent; 56 | padding: 0 20px; 57 | } 58 | 59 | .sign-buttons > .signup { 60 | width: 100px; 61 | height: 45px; 62 | background: var(--orange); 63 | border: none; 64 | border-radius: 10px; 65 | 66 | color: white; 67 | } 68 | 69 | /* header End */ 70 | 71 | /* main */ 72 | 73 | main { 74 | padding: 50px 70px 100px 100px; 75 | } 76 | 77 | /* hero section start */ 78 | .hero { 79 | width: 100%; 80 | display: flex; 81 | justify-content: space-between; 82 | align-items: center; 83 | } 84 | .hero > .images { 85 | width: 45%; 86 | 87 | height: 100%; 88 | position: relative; 89 | } 90 | .hero > .images > img { 91 | height: 100%; 92 | } 93 | 94 | .hero > .images > img:nth-child(1) { 95 | position: absolute; 96 | z-index: -1; 97 | left: -200px; 98 | bottom: -50px; 99 | } 100 | .hero > .images > img:nth-child(2) { 101 | position: absolute; 102 | height: 60%; 103 | top: 50px; 104 | 105 | left: -30px; 106 | z-index: -1; 107 | } 108 | 109 | .hero > .title { 110 | width: 50%; 111 | padding-top: 30px; 112 | } 113 | .hero > .title > h1 { 114 | font-size: 56px; 115 | font-weight: 800; 116 | line-height: 60px; 117 | text-wrap: wrap; 118 | padding-right: 70px; 119 | } 120 | .hero > .title > p { 121 | padding: 40px 0; 122 | } 123 | 124 | .hero > .title > .buttons > button, 125 | .card > button { 126 | width: 100px; 127 | height: 42px; 128 | border: none; 129 | margin-right: 10px; 130 | } 131 | .hero > .title > .buttons > button:nth-child(1), 132 | .card > button { 133 | background-color: var(--orange); 134 | color: white; 135 | border-radius: 10px; 136 | } 137 | /* hero section end */ 138 | 139 | /* service section */ 140 | .service { 141 | width: 100%; 142 | display: flex; 143 | flex-direction: column; 144 | justify-content: center; 145 | align-items: center; 146 | text-align: center; 147 | gap: 20px; 148 | padding-top: 150px; 149 | padding-right: 30px; 150 | } 151 | 152 | .service > p { 153 | color: var(--gray); 154 | text-transform: uppercase; 155 | word-spacing: normal; 156 | } 157 | .service > h2 { 158 | font-size: 40px; 159 | font: bold; 160 | } 161 | 162 | .service > .cards-container { 163 | margin-top: 50px; 164 | display: flex; 165 | justify-content: space-between; 166 | align-items: center; 167 | } 168 | 169 | .service > .cards-container > .card { 170 | width: 25%; 171 | display: flex; 172 | flex-direction: column; 173 | gap: 30px; 174 | justify-content: center; 175 | align-items: center; 176 | padding: 40px 20px; 177 | /* box-shadow: 2px 2px 5px 5px var(--gray); */ 178 | box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); 179 | border-radius: 10px; 180 | } 181 | 182 | .service > .cards-container > .card > i { 183 | font-size: 50px; 184 | } 185 | .service > .cards-container > .card > h3 { 186 | font-size: 30px; 187 | } 188 | 189 | .service > .second { 190 | display: flex; 191 | justify-content: space-between; 192 | margin-top: 150px; 193 | } 194 | 195 | .service > .second > .img { 196 | width: 60%; 197 | } 198 | .service > .second > .word { 199 | width: 20%; 200 | } 201 | .service > .second > .word > p { 202 | padding: 50px 0; 203 | color: var(--gray); 204 | line-height: 20px; 205 | } 206 | .service > .second > .word > button { 207 | width: 100px; 208 | height: 40px; 209 | background: transparent; 210 | border: 1px solid var(--gray); 211 | border-radius: 20px; 212 | cursor: pointer; 213 | } 214 | 215 | .service > .testimonails, 216 | .team { 217 | margin-top: 150px; 218 | } 219 | .service > .testimonails > p, 220 | .team > p { 221 | color: var(--gray); 222 | text-transform: uppercase; 223 | padding: 10px 0; 224 | } 225 | .service > .testimonails > h3, 226 | .team > h2 { 227 | font-size: 40px; 228 | } 229 | .service > .testimonails > .tcard-container { 230 | display: flex; 231 | width: 100%; 232 | justify-content: space-around; 233 | margin-top: 100px; 234 | flex-wrap: wrap; 235 | gap: 50px; 236 | padding: 50px; 237 | } 238 | .service > .testimonails > .tcard-container > .tcard { 239 | display: flex; 240 | width: 35%; 241 | gap: 30px; 242 | 243 | height: 150px; 244 | } 245 | .service > .testimonails > .tcard-container > .tcard > .image { 246 | display: flex; 247 | width: 60px; 248 | height: 60px; 249 | } 250 | 251 | .service > .testimonails > .tcard-container > .tcard > .words { 252 | display: flex; 253 | flex: 1; 254 | justify-content: space-between; 255 | flex-direction: column; 256 | text-align: left; 257 | } 258 | 259 | .service > .testimonails > .tcard-container > .tcard > .words > p.name { 260 | margin-top: 20px; 261 | bottom: 0; 262 | color: var(--gray); 263 | text-transform: uppercase; 264 | } 265 | 266 | .team { 267 | display: flex; 268 | text-align: center; 269 | flex-direction: column; 270 | } 271 | 272 | .team > .container { 273 | width: 100%; 274 | display: flex; 275 | justify-content: space-between; 276 | padding-top: 100px; 277 | padding-bottom: 150px; 278 | } 279 | .team > .container > .card { 280 | width: 30%; 281 | border: 2px solid var(--gray); 282 | display: flex; 283 | flex-direction: column; 284 | justify-content: space-between; 285 | align-items: center; 286 | padding-top: 50px; 287 | border-radius: 10px; 288 | gap: 40px; 289 | } 290 | 291 | .team > .container > .card > .image { 292 | width: 100px; 293 | height: 100px; 294 | } 295 | 296 | .team > .container > .card > p { 297 | color: var(--gray); 298 | text-transform: uppercase; 299 | } 300 | .team > .container > .card > p.name { 301 | color: black; 302 | text-transform: capitalize; 303 | } 304 | .team > .container > .card > .icons { 305 | width: 100%; 306 | border-top: 2px solid var(--gray); 307 | display: flex; 308 | justify-content: space-between; 309 | font-size: 20px; 310 | } 311 | 312 | .team > .container > .card > .icons > i { 313 | width: 30%; 314 | padding: 15px; 315 | color: var(--gray); 316 | cursor: pointer; 317 | border-right: 2px solid var(--gray); 318 | } 319 | 320 | .team > .container > .card > .icons > i:nth-child(3) { 321 | border-right: none; 322 | } 323 | .news { 324 | width: 100%; 325 | display: flex; 326 | justify-content: space-between; 327 | gap: 50px; 328 | padding-top: 100px; 329 | } 330 | 331 | .news > .image { 332 | width: 35%; 333 | } 334 | 335 | .news > .in { 336 | display: flex; 337 | flex-direction: column; 338 | gap: 20px; 339 | } 340 | 341 | .news > .in > input, 342 | .news > .in > button { 343 | width: 100%; 344 | } 345 | 346 | input { 347 | height: 40px; 348 | box-shadow: 5px 5px 15px 5px var(--gray); 349 | border: none; 350 | border-radius: 10px; 351 | outline: none; 352 | } 353 | .news > .in > button { 354 | background-color: var(--orange); 355 | height: 40px; 356 | color: white; 357 | border: none; 358 | border-radius: 10px; 359 | } 360 | 361 | footer > header { 362 | height: 40px; 363 | } 364 | -------------------------------------------------------------------------------- /part 03/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Agency Landing page 7 | 11 | 12 | 13 | 14 | 15 |
16 | 19 |
20 | 32 |
33 |
34 | 35 | 36 |
37 |
38 |
39 | 40 |
41 |
46 |

We boost growth for your startup business

47 |

48 | Our goal is top at the heart of creativity services industry as a 49 | digital creator. In has a after comment 50 |

51 |
52 | 53 | 54 |
55 |
56 |
57 | bg data 58 | bg data 59 | bg data 63 |
64 |
65 |
66 |

services

67 |

Our Vision & Our Goals

68 |
69 |
70 | 71 |

Graphic Design

72 |

73 | Lorem ipsum dolor, sit amet consectetur adipisicing elit. 74 | Obcaecati cumque adipisci, voluptatibus alias quis, consequuntur 75 | nihil dicta a iusto error sint iure nostrum ea assumenda quisquam, 76 | nobis numquam maiores quibusdam! 77 |

78 | 79 |
80 |
81 | 82 |

Video Editing

83 |

84 | Lorem ipsum dolor, sit amet consectetur adipisicing elit. 85 | Obcaecati cumque adipisci, voluptatibus alias quis, consequuntur 86 | nihil dicta a iusto error sint iure nostrum ea assumenda quisquam, 87 | nobis numquam maiores quibusdam! 88 |

89 | 90 |
91 |
92 | 93 |

Digital Marketing

94 |

95 | Lorem ipsum dolor, sit amet consectetur adipisicing elit. 96 | Obcaecati cumque adipisci, voluptatibus alias quis, consequuntur 97 | nihil dicta a iusto error sint iure nostrum ea assumenda quisquam, 98 | nobis numquam maiores quibusdam! 99 |

100 | 101 |
102 |
103 | 104 |
105 |
106 |

Many Blocks and Components

107 |

108 | Startup Framework contains components and complex blocks which can 109 | easily be integrated into almost any design. 110 |

111 | 112 |
113 |
114 | video 115 |
116 |
117 |
118 |

Testimonials

119 |

What clients say about us

120 |
121 |
122 |
123 | userpic one 124 |
125 |
126 |

127 | Get a fully retina ready site when you build with Startup 128 | Framework. Websites look sharper and more gorgeous on devices 129 | with retina display support 130 |

131 |

Rayhan Curran

132 |
133 |
134 |
135 |
136 | userpic one 137 |
138 |
139 |

140 | As a business targeting high net worth individuals, we were 141 | looking for a slick, cool and mini-malistic design for our 142 | website 143 |

144 |

Kayley Frame

145 |
146 |
147 |
148 |
149 | userpic one 150 |
151 |
152 |

153 | The most important part of the Startup Framework is the 154 | samples 155 |

156 |

Gene Whitefield

157 |
158 |
159 |
160 |
161 | userpic three 162 |
163 |
164 |

165 | I’ve built my website with Startup just in one day, and it was 166 | ready-to-go. 167 |

168 |

Allan Kim

169 |
170 |
171 |
172 |
173 |
174 |
175 |

Our Team

176 |

Meet The Team

177 | 178 |
179 |
180 |
181 | 182 |
183 |

Vanessa Laird

184 |

UI Designer

185 |
186 | 187 | 188 | 189 |
190 |
191 |
192 |
193 | 194 |
195 |

Mason Campbell

196 |

UI Designer

197 |
198 | 199 | 200 | 201 |
202 |
203 |
204 |
205 | 206 |
207 |

Irea Evans

208 |

Client Manager

209 |
210 | 211 | 212 | 213 |
214 |
215 |
216 | 217 |

Our Team

218 |

Subscribe Our Newsletter

219 |
220 |
221 | 222 |
223 |
224 |

225 | Lorem ipsum dolor, sit amet consectetur adipisicing elit. 226 | Consectetur maiores ipsam incidunt blanditiis, sequi deserunt 227 | reiciendis facilis quam quas ratione dolorem autem animi 228 |

229 | 230 | 231 |
232 |
233 |
234 |
235 | 253 | 254 | 255 | 256 | 257 | -------------------------------------------------------------------------------- /part06/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Steep | Landing page 9 | 10 | 11 | 12 |
13 | 35 |
36 | 37 | 38 | 44 | 45 | 46 |
47 | 48 |
49 |
52 |
53 |

56 | Make sense common 57 |

58 |
59 |

60 | Steep is a modern analytics platform powered by metrics that changes 61 | how companies use data together. 62 |

63 |
64 | Get Started 67 | Request a Demo 72 |
73 | 74 | hero image 75 | 76 |
77 | 78 |
81 |
84 |
85 |

Steep in 60 seconds

86 |

87 | Learn about Steep and how it can change the way your 88 | organization works with data. 89 |

90 |
91 | 92 |
93 |
96 | 97 |
98 |

Join the semantic movement

99 |

100 | Steep supports the latest semantic API:s from dbt and Cube. 101 |

102 |
103 |
104 |
105 |
108 |
109 |

112 | A BI system for the whole organization 113 |

114 |
115 |

116 | All your metrics in one place with the 117 | semantic layer 120 |

121 | 131 | 132 | hero image 133 | 134 |
135 | 136 |
137 | 138 |
139 |
142 | 143 |
144 |

Define once, use everywhere

145 |

146 | Build a system where all visualizations are powered by centralized 147 | definitions. No more repeating yourself. 148 |

149 |
150 |
151 |
154 | 159 |
160 |

Create a common language

161 |

162 | Document and organize all your metrics. Create one place where 163 | everyone can go to explore and consume metrics. 164 |

165 |
166 |
167 |
168 | 169 | 170 | 171 | 172 |
173 |
174 |

175 | Analysis made for everyone 176 |

177 |
178 |

179 | Explore metrics directly. Go deeper with multi-layered analysis. 180 |

181 | 182 | 183 | hero image 188 |
189 |
192 | 197 |
198 |

All roles can play

199 |

200 | Make it easy for anyone to analyse using metrics - no SQL or 201 | training needed. Help any team to answer their own questions. 202 |

203 |
204 |
205 |
208 | 213 |
214 |

Easy for everyone Deep for experts

215 |

216 | With multi-layered analysis, experts get to insights faster. 217 | Combine metrics, drill down and overlay functions. 218 |

219 |
220 |
221 |
222 | 223 |
224 |
227 |

228 | “Steep has quickly become the go-to place for any member of the 229 | organisation. It's easy to use yet powerful enough for prompt 230 | insights” 231 |

232 |

233 | Filip Ausmaa
Head of Analytics @ Frever 234 |

235 |
236 |
237 | 238 |
239 |

240 | Make confident decisions together 241 |

242 |

243 | Communicate, collaborate and decide with reports reimagined 244 |

245 |
246 |
247 | 248 |
249 | 250 | 251 | 252 | 253 | 254 | 255 | 256 | 257 | 258 | 259 | 260 | -------------------------------------------------------------------------------- /part 02/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Landing page 2 7 | 8 | 9 | 10 | 11 |
12 | 16 | 24 |
25 | 33 | 38 | 39 |
40 |
41 | 42 | 43 |
44 | 45 |
46 |
47 |

A new model for open collaboration

48 |

49 | Run an organization where members get rewarded for their 50 | contributions with fractional ownership. 51 |

52 | 53 | 54 |
55 |
56 | illustration 57 | 64 | 68 | 69 |
70 |
71 | 72 |
73 |

Reimagining what it means to work

74 |

75 | Teams and communities using Open Enterprise fundamentally unlock a 76 | reality of work that reimagines how people engage in economic 77 | opportunity, meeting the demands and expectations of a modern 78 | organization. 79 |

80 |
81 |
82 | 89 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 |

Modern Workforce

107 |

108 | Multistakhoder governance aligns employees with the organisation`s 109 | wider community 110 |

111 |
112 |
113 | 120 | 129 | 130 | 131 | 132 | 133 | 138 | 139 | 145 | 146 | 147 |

Meritocratic by Design

148 |

149 | Tokenisedownership aligns deeply committed individual with the 150 | organisation`s sucess 151 |

152 |
153 |
154 | 161 | 170 | 171 | 172 | 173 | 174 | 175 | 176 | 180 | 181 | 182 |

Engineered for resillience

183 |

184 | Open enterprise surpports best practices in sociocratic management 185 |

186 |
187 |
188 | 189 |
190 |
191 |
192 | 199 | 200 | 201 | 202 | 203 | 207 | 211 | 212 | 213 | 214 | 215 | 216 | 217 | 218 |

Kickstart an organization with your co-founders

219 |

220 | It’s the early days, you just had a long conversation with two 221 | friends about a meaningful challenge that you’re all passionate 222 | about and have a potential solution for. You’re ready to embark 223 | the startup journey. 224 |

225 |
226 |
227 | 228 |
229 |
230 |
231 |
232 | 233 |
234 |
235 | 242 | 243 | 244 | 245 | 246 | 247 | 248 |

Onboard users, investors and advisors as you grow

249 |

250 | You’ve bootstrapped and delivered an MVP, and some investors and 251 | advisors are interested in having a chat with you. As an Open 252 | Enterprise, you can onboard them seamlessly into your digital 253 | organization and align them with your success. 254 |

255 |
256 |
257 |
258 |
259 | 266 | 267 | 268 | 269 | 270 | 274 | 278 | 279 | 280 | 281 | 282 | 283 | 284 | 285 |

Engage highly committed contributors

286 |

287 | You need talented people on-demand across various tasks that 288 | your full-time workforce can’t prioritize at the moment. As an 289 | Open Enterprise, you can easily fund tasks and have people apply 290 | to work on them in return for funds or shares. 291 |

292 |
293 |
294 | 295 | 296 | 297 |
298 |
299 |
300 |
301 | 302 |
303 |

Help us improve Open Enterprise

304 |

305 | As an Open Enterprise ourselves, we are actively looking for new 306 | talent to join our mission of improving and delivering the Open 307 | Enterprise model to the world. Apply for open tasks and earn a stake 308 | in our success. 309 |

310 |
311 |
312 |

Ideate a list of features based on the Sociocracy model

313 |

314 | We’re looking for someone interested in business theory and 315 | research that’ll help us bridge the gap between our s... 316 |

317 |
318 |

Aut

319 |

Apply by May 15

320 |
321 |
322 |
323 |

Updat a doumentary with FAQs

324 |

325 | Review our community chat for the most frequently asked questions 326 | and document answers for our product docs. 327 |

328 |
329 |

Aut

330 |

Apply by May 15

331 |
332 |
333 |
334 |

tutorial video series

335 |

336 | Create a series of video tutorials that cover everything from 337 | start to finish on using Open Enterprise. 338 |

339 |
340 |

Aut

341 |

Apply by May 15

342 |
343 |
344 |
345 | 346 | 347 |
348 |
349 | 350 | 351 | 381 | 382 | 383 | -------------------------------------------------------------------------------- /part04/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Field Guide 7 | 8 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
21 | 22 | 38 | 39 | 40 | 41 |
42 | logo 47 |
48 | 49 | 50 | 51 | 59 | 60 | 61 | 62 | 70 | 71 |
72 | 73 | 74 | 75 |
76 | 77 |
78 | 102 | 103 |

106 | The Future of Trust Powered 107 | by Fieldguide. 108 |

109 |

112 | Fieldguide's AI Advisory & Audit Cloud saves time, increases margins, 113 | and improves client satisfaction. 114 |

115 | 116 | 117 | 118 | 119 |
122 | 123 |

Technology Innovation Award

124 |

3x Winner — CPA Practice Advisor

125 |
126 |
127 | video image 128 |
129 |

130 | Top 500 firms trust Fieldguide to improve efficiency, revenue, and 131 | client experiences. 132 |

133 | 141 |
142 | 143 | 144 | 145 | 146 |
149 |

150 | Built by and for practitioners 151 |

152 |

153 | Fieldguide is built to power the firm of the future. 154 |

155 | 156 |
159 |
160 |

products

161 |

162 | Grow your firm with Fieldguide's AI Advisory & Audit Cloud 163 |

164 |

165 | Fieldguide increases margins, revenue, and client satisfaction 166 | across all advisory and audit engagements. 167 |

168 |
171 |
172 |

FieldGuide AI

173 |

Award-winning AI built for advisory & audi

174 |
175 |
176 |

Document Management

177 |

Enterprise-grade workpaper management

178 |
179 |
180 |

Engagement Hub

181 |

End-to-end engagement management

182 |
183 |
184 |

Request Management

185 |

Automated modern request management

186 |
187 |
188 |

Reporting Automation

189 |

One-click collaborative report generation

190 |
191 |
192 |

Client Hub

193 |

Modern experience that clients will love

194 |
195 |
196 | 201 |
202 | 207 |
208 | 209 | 210 | 211 |
214 |
219 |

Solutions

220 |

221 | Top 500 firms trust Fieldguide to modernize their business 222 |

223 |

224 | Top 500 firms trust Fieldguide to help them grow their audit and 225 | advisory practices. 226 |

227 |
230 |
231 |

Risk Advisory

232 |

Power your risk advisory, SOC, ESG, and advisory practice

233 |
234 |
235 |

SOC Readiness And Audit

236 |

237 | SOC audit practices love using Fieldguide to streamline work 238 |

239 |
240 |
241 |

Regulatory Compliance

242 |

243 | Powering SOX, HIPAA, FFIEC, and many more regulatory 244 | frameworks 245 |

246 |
247 |
248 |

Cybersecurity

249 |

250 | Efficiently address standards like HITRUST, PCI DSS, and 251 | others 252 |

253 |
254 |
255 |

IT Audit

256 |

IT general controls, internal audits and certifications

257 |
258 |
259 |

Financial Audit

260 |

Run your financial audit practice on Fieldguide

261 |
262 |
263 | 268 |
269 | 278 |
279 | 280 |
281 | 282 | 283 | 284 |
287 |

288 | Trusted by industry leaders 289 |

290 |

291 | Fieldguide is the modern, award-winning platform that powers many of 292 | the largest advisory and audit firms. 293 |

294 | 314 |
315 |
316 | 321 |
324 |

325 | “Software for accounting firms is notoriously outdated, slow, 326 | and hard to use. Fieldguide is different – itʼs a more 327 | streamlined, cloud-first approach.” 328 |

329 |
330 | 335 |
336 |

Kate Willaims

337 |

Partner, Maxwell Locke & Ritter

338 |
339 |
340 |
341 |
342 |
343 |

5X

344 |

Business Growth

345 |

346 | Fieldguide innovations and efficiencies helped Maxwell Locke & 347 | Ritter grow their practice by 5X 348 |

349 |
350 |
351 | 352 |
355 |

356 | Learn why the future of advisory and audit services is powered by 357 | Fieldguide 358 |

359 |

360 | Top 500 firms trust Fieldguide's AI Advisory & Audit Cloud. Learn 361 | how Fieldguide can help your firm. 362 |

363 |
364 |
367 | 372 | 373 |
374 | 375 | 383 |
384 | 385 |
386 | 387 | 388 | 389 | 435 | 436 | 437 | 438 | 439 | 440 | 443 | 444 | 445 | 446 | 447 | -------------------------------------------------------------------------------- /part 01/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Landing page 01 7 | 8 | 9 | 10 |
11 | 12 |
13 | 14 |
15 | 16 |
17 | 31 |
32 |
33 | 41 | 46 | 47 |
48 |
49 | 50 |
51 | 52 |
53 |
54 |

Building digital products, brands & experience

55 |

56 | Digital Agency is your online team mangement tool that easy and 57 | prompt 58 |

59 | 60 |
61 |
62 | alt 66 |
67 |
68 |
69 |

trusted by 4000+ companies

70 |
71 | 78 | 79 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 97 | 101 | 105 | 109 | 113 | 117 | 118 | 125 | 129 | 133 | 134 | 141 | 147 | 148 |
149 |
150 | 151 |
152 |
153 | 154 |
155 |
156 |
157 | 161 |
162 |
163 |

Branding & Design system

164 |

165 | Commonly used in the graphic, print & publishing industris for 166 | previewing visual layout and mockups 167 |

168 |
169 |
170 |
171 |
172 |

Custome & Plugin Development

173 |

174 | Commonly used in the graphic, print & publishing industris for 175 | previewing visual layout and mockups 176 |

177 |
178 |
179 | 180 |
181 |
182 |
183 | 184 |
185 |

Testimonial

186 |

Read What Other have to Say

187 |
188 |
189 |
190 | 191 |
192 |

Andrew Rathore

193 | 194 |

195 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc 196 | ullamcorper scelerisque mi, in malesuada felis malesuada vel. 197 |

198 |
199 |
200 |
201 | 202 |
203 |

Andrew Rathore

204 | 205 |

206 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc 207 | ullamcorper scelerisque mi, in malesuada felis malesuada vel. 208 |

209 |
210 |
211 |
212 | 213 |
214 |

Andrew Rathore

215 | 216 |

217 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc 218 | ullamcorper scelerisque mi, in malesuada felis malesuada vel. 219 |

220 |
221 |
222 | 223 |
224 |
225 | 226 |
227 |
228 |

Be a part of the next big thing

229 |

230 | We work with Brans, Startups, to SMEs. Colaborate for more impact 231 | and growt 232 |

233 | 234 | 235 |
236 |
237 |
238 |
239 | 240 | 267 | 268 | 269 | 270 | --------------------------------------------------------------------------------