mirror of
https://github.com/getmarkus/astro-tailwind-mambaui-template.git
synced 2025-04-20 06:01:53 +02:00
init
This commit is contained in:
Chris Markus
parent
de6d2b4cb2
commit
86e220df6d
47 changed files with 9042 additions and 1 deletions
39
.github/workflows/deploy.yml
vendored
Normal file
39
.github/workflows/deploy.yml
vendored
Normal file
|
|
@ -0,0 +1,39 @@
|
||||||
|
name: Deploy to GitHub Pages
|
||||||
|
|
||||||
|
on:
|
||||||
|
# Trigger the workflow every time you push to the `main` branch
|
||||||
|
# Using a different branch name? Replace `main` with your branch’s name
|
||||||
|
push:
|
||||||
|
branches: [ main ]
|
||||||
|
# Allows you to run this workflow manually from the Actions tab on GitHub.
|
||||||
|
workflow_dispatch:
|
||||||
|
|
||||||
|
# Allow this job to clone the repo and create a page deployment
|
||||||
|
permissions:
|
||||||
|
contents: read
|
||||||
|
pages: write
|
||||||
|
id-token: write
|
||||||
|
|
||||||
|
jobs:
|
||||||
|
build:
|
||||||
|
runs-on: ubuntu-latest
|
||||||
|
steps:
|
||||||
|
- name: Checkout your repository using git
|
||||||
|
uses: actions/checkout@v3
|
||||||
|
- name: Install, build, and upload your site
|
||||||
|
uses: withastro/action@v1
|
||||||
|
# with:
|
||||||
|
# path: . # The root location of your Astro project inside the repository. (optional)
|
||||||
|
# node-version: 18 # The specific version of Node that should be used to build your site. Defaults to 18. (optional)
|
||||||
|
# package-manager: pnpm@latest # The Node package manager that should be used to install dependencies and build your site. Automatically detected based on your lockfile. (optional)
|
||||||
|
|
||||||
|
deploy:
|
||||||
|
needs: build
|
||||||
|
runs-on: ubuntu-latest
|
||||||
|
environment:
|
||||||
|
name: github-pages
|
||||||
|
url: ${{ steps.deployment.outputs.page_url }}
|
||||||
|
steps:
|
||||||
|
- name: Deploy to GitHub Pages
|
||||||
|
id: deployment
|
||||||
|
uses: actions/deploy-pages@v1
|
||||||
21
.gitignore
vendored
Normal file
21
.gitignore
vendored
Normal file
|
|
@ -0,0 +1,21 @@
|
||||||
|
# build output
|
||||||
|
# dist/
|
||||||
|
# generated types
|
||||||
|
.astro/
|
||||||
|
|
||||||
|
# dependencies
|
||||||
|
node_modules/
|
||||||
|
|
||||||
|
# logs
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
|
||||||
|
|
||||||
|
# environment variables
|
||||||
|
.env
|
||||||
|
.env.production
|
||||||
|
|
||||||
|
# macOS-specific files
|
||||||
|
.DS_Store
|
||||||
4
.vscode/extensions.json
vendored
Normal file
4
.vscode/extensions.json
vendored
Normal file
|
|
@ -0,0 +1,4 @@
|
||||||
|
{
|
||||||
|
"recommendations": ["astro-build.astro-vscode"],
|
||||||
|
"unwantedRecommendations": []
|
||||||
|
}
|
||||||
11
.vscode/launch.json
vendored
Normal file
11
.vscode/launch.json
vendored
Normal file
|
|
@ -0,0 +1,11 @@
|
||||||
|
{
|
||||||
|
"version": "0.2.0",
|
||||||
|
"configurations": [
|
||||||
|
{
|
||||||
|
"command": "./node_modules/.bin/astro dev",
|
||||||
|
"name": "Development server",
|
||||||
|
"request": "launch",
|
||||||
|
"type": "node-terminal"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
16
README.md
16
README.md
|
|
@ -1 +1,15 @@
|
||||||
# astro-tailwind-mambaui-template
|
# Example Astro template for the MAMBA UI (Tailwind) component library
|
||||||
|
|
||||||
|
The criteria for this combination of [Astro](https://astro.build)* and [MAMBA UI](https://mambaui.com/)* was:
|
||||||
|
* Copy/paste html
|
||||||
|
* Responsive components
|
||||||
|
* Minimal js or jsx and at most Alpine.js support
|
||||||
|
* Open source or permissible
|
||||||
|
|
||||||
|
Astro* and MAMBA UI* - not affiliated (just a fan)
|
||||||
|
|
||||||
|
Note: not fully functional and just the main example layout pages
|
||||||
|
|
||||||
|
```
|
||||||
|
npm create astro@latest -- --template getmarkus/astro-tailwind-mambaui-template
|
||||||
|
```
|
||||||
9
astro.config.mjs
Normal file
9
astro.config.mjs
Normal file
|
|
@ -0,0 +1,9 @@
|
||||||
|
import { defineConfig } from 'astro/config';
|
||||||
|
import tailwind from "@astrojs/tailwind";
|
||||||
|
|
||||||
|
import alpinejs from "@astrojs/alpinejs";
|
||||||
|
|
||||||
|
// https://astro.build/config
|
||||||
|
export default defineConfig({
|
||||||
|
integrations: [tailwind(), alpinejs()]
|
||||||
|
});
|
||||||
0
dist/.nojekyll
vendored
Normal file
0
dist/.nojekyll
vendored
Normal file
1
dist/_astro/business_layout2.f4befd13.css
vendored
Normal file
1
dist/_astro/business_layout2.f4befd13.css
vendored
Normal file
File diff suppressed because one or more lines are too long
5
dist/_astro/page.7730416e.js
vendored
Normal file
5
dist/_astro/page.7730416e.js
vendored
Normal file
File diff suppressed because one or more lines are too long
1
dist/assets/svg/404.svg
vendored
Normal file
1
dist/assets/svg/404.svg
vendored
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 6.9 KiB |
1
dist/assets/svg/Business_SVG.svg
vendored
Normal file
1
dist/assets/svg/Business_SVG.svg
vendored
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 86 KiB |
1
dist/assets/svg/copycode.svg
vendored
Normal file
1
dist/assets/svg/copycode.svg
vendored
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 8.2 KiB |
1
dist/assets/svg/doodle.svg
vendored
Normal file
1
dist/assets/svg/doodle.svg
vendored
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 20 KiB |
1
dist/assets/svg/findcomponent.svg
vendored
Normal file
1
dist/assets/svg/findcomponent.svg
vendored
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 8.5 KiB |
10
dist/assets/svg/logo.svg
vendored
Normal file
10
dist/assets/svg/logo.svg
vendored
Normal file
|
|
@ -0,0 +1,10 @@
|
||||||
|
<svg id="Group_11" data-name="Group 11" xmlns="http://www.w3.org/2000/svg" width="35.658" height="35.658" viewBox="0 0 35.658 35.658">
|
||||||
|
<path id="Path_7" data-name="Path 7" d="M4.457,0H31.2a4.457,4.457,0,0,1,4.457,4.457V31.2A4.457,4.457,0,0,1,31.2,35.658H4.457A4.457,4.457,0,0,1,0,31.2V4.457A4.457,4.457,0,0,1,4.457,0Z" transform="translate(0 0)" fill="#6d28d9"/>
|
||||||
|
<g id="Group_5" data-name="Group 5" transform="translate(5.244 6.341)">
|
||||||
|
<g id="Artboard_1" data-name="Artboard 1">
|
||||||
|
<path id="Shape_316_1" data-name="Shape 316 1" d="M539.151,72.067c2.446,4.4,10.223,3.83,12.095,0a6.568,6.568,0,0,1,2.467,1.463c-.091,3.807-2.467,5.169-2.467,5.169l.082.884c2.708-.784,3.717-.7,3.521-5.3,1.361,1.117,2.592,3.237,2.465,4.6-.132,1.416-2.15,5.675-1.9,5.6a92.614,92.614,0,0,1-8.913,3.382A3.093,3.093,0,0,0,544.45,86.1a13.49,13.49,0,0,0-1.883,1.878c-2.477-.9-4.669-1.9-6.96-2.872l-1.8-.663-.819-2.1c-1.1-2.722-1.6-4.238.164-6.627.384-.519,1.053-1.647,1.642-1.894-.115,3.9-1.292,5.756,3.107,5.76l.082-.884s-1.91-.239-2.374-5.169Zm2.188,11.824c-.219.294-.355.368-.573.663.055.147-.218.184-.164.331a3.024,3.024,0,0,0,.9,1.215,2.812,2.812,0,0,0,1.8-1.215C543.084,84.421,541.779,83.658,541.339,83.892Zm5.977,0c-.437.294-.955.7-1.392.994.136.221.846.773.983.994.412.248.312.451.819.221a1.479,1.479,0,0,0,.9-1.325c-.218-.258-.437-.626-.655-.884h-.655Z" transform="translate(-531.99 -72.067)" fill="#fff" fill-rule="evenodd"/>
|
||||||
|
</g>
|
||||||
|
<path id="Shape_316_1-2" data-name="Shape 316 1" d="M560,133.183c-1.328.368-2.544.816-3.986,1.1a33.534,33.534,0,0,1-.412,6.406C557.337,138.675,559.825,135.215,560,133.183Z" transform="translate(-539.007 -117.59)" fill="#fff" fill-rule="evenodd"/>
|
||||||
|
<path id="Shape_316_1-3" data-name="Shape 316 1" d="M555.6,133.183c1.375.368,2.634.816,4.127,1.1a32.416,32.416,0,0,0,.427,6.406C558.362,138.675,555.787,135.215,555.6,133.183Z" transform="translate(-551.328 -117.59)" fill="#fff" fill-rule="evenodd"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.9 KiB |
15
dist/assets/svg/logo_title.svg
vendored
Normal file
15
dist/assets/svg/logo_title.svg
vendored
Normal file
|
|
@ -0,0 +1,15 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="258.839" height="35.658" viewBox="0 0 258.839 35.658">
|
||||||
|
<g id="Group_12" data-name="Group 12" transform="translate(-862.627 -615)">
|
||||||
|
<path id="Path_8" data-name="Path 8" d="M2.974-3.039V-31.295h10.4l4.377,5.888,4.392-5.888H32.531V-3.039H21.812V-17.185l-4.059,5.462-4.059-5.462V-3.039Zm42.608,0H34.862l8.4-28.256h15.27l8.4,28.256h-10.7l-1.4-4.777H46.977Zm3.346-11.443h3.964L50.909-21.5ZM69.287-3.039V-31.295h10.4l4.377,5.888,4.392-5.888H98.845V-3.039H88.125V-17.185l-4.059,5.462-4.059-5.462V-3.039Zm34.188-28.256h15.143q4.646,0,7.017,2.12a7.347,7.347,0,0,1,2.371,5.768,6.838,6.838,0,0,1-3.156,6.073,8.58,8.58,0,0,1,2.838,2.676,6.983,6.983,0,0,1,.967,3.805,7.583,7.583,0,0,1-2.18,5.685,8.38,8.38,0,0,1-6.113,2.129H103.475Zm10.719,5.685v5.5h.27a3.842,3.842,0,0,0,2.474-.62,2.683,2.683,0,0,0,.729-2.139q0-2.74-2.823-2.74Zm0,10.24v6.11h.333a4.107,4.107,0,0,0,2.624-.657,2.821,2.821,0,0,0,.785-2.268q0-3.185-3-3.185ZM140.311-3.039H129.591L138-31.295h15.27l8.4,28.256h-10.7l-1.4-4.777h-7.865Zm3.346-11.443h3.964L145.639-21.5Zm54.96-16.813v12.813q0,8.388-3.671,12.147a11.414,11.414,0,0,1-8.38,3.759,11.38,11.38,0,0,1-6.478-2.074,11.015,11.015,0,0,1-4.305-5.472,26.6,26.6,0,0,1-1.237-8.916V-31.295h10.719V-18.2a6.734,6.734,0,0,0,.317,2.666,1.029,1.029,0,0,0,.951.555,1.11,1.11,0,0,0,1.126-1.009,16.742,16.742,0,0,0,.238-3.4V-31.295Zm4.456,28.256V-31.295h10.7V-3.039Z" transform="translate(907.69 649.639)" fill="#6d28d9"/>
|
||||||
|
<g id="Group_11" data-name="Group 11" transform="translate(862.627 615)">
|
||||||
|
<path id="Path_7" data-name="Path 7" d="M4.457,0H31.2a4.457,4.457,0,0,1,4.457,4.457V31.2A4.457,4.457,0,0,1,31.2,35.658H4.457A4.457,4.457,0,0,1,0,31.2V4.457A4.457,4.457,0,0,1,4.457,0Z" transform="translate(0 0)" fill="#6d28d9"/>
|
||||||
|
<g id="Group_5" data-name="Group 5" transform="translate(5.244 6.341)">
|
||||||
|
<g id="Artboard_1" data-name="Artboard 1">
|
||||||
|
<path id="Shape_316_1" data-name="Shape 316 1" d="M539.151,72.067c2.446,4.4,10.223,3.83,12.095,0a6.568,6.568,0,0,1,2.467,1.463c-.091,3.807-2.467,5.169-2.467,5.169l.082.884c2.708-.784,3.717-.7,3.521-5.3,1.361,1.117,2.592,3.237,2.465,4.6-.132,1.416-2.15,5.675-1.9,5.6a92.614,92.614,0,0,1-8.913,3.382A3.093,3.093,0,0,0,544.45,86.1a13.49,13.49,0,0,0-1.883,1.878c-2.477-.9-4.669-1.9-6.96-2.872l-1.8-.663-.819-2.1c-1.1-2.722-1.6-4.238.164-6.627.384-.519,1.053-1.647,1.642-1.894-.115,3.9-1.292,5.756,3.107,5.76l.082-.884s-1.91-.239-2.374-5.169Zm2.188,11.824c-.219.294-.355.368-.573.663.055.147-.218.184-.164.331a3.024,3.024,0,0,0,.9,1.215,2.812,2.812,0,0,0,1.8-1.215C543.084,84.421,541.779,83.658,541.339,83.892Zm5.977,0c-.437.294-.955.7-1.392.994.136.221.846.773.983.994.412.248.312.451.819.221a1.479,1.479,0,0,0,.9-1.325c-.218-.258-.437-.626-.655-.884h-.655Z" transform="translate(-531.99 -72.067)" fill="#fff" fill-rule="evenodd"/>
|
||||||
|
</g>
|
||||||
|
<path id="Shape_316_1-2" data-name="Shape 316 1" d="M560,133.183c-1.328.368-2.544.816-3.986,1.1a33.534,33.534,0,0,1-.412,6.406C557.337,138.675,559.825,135.215,560,133.183Z" transform="translate(-539.007 -117.59)" fill="#fff" fill-rule="evenodd"/>
|
||||||
|
<path id="Shape_316_1-3" data-name="Shape 316 1" d="M555.6,133.183c1.375.368,2.634.816,4.127,1.1a32.416,32.416,0,0,0,.427,6.406C558.362,138.675,555.787,135.215,555.6,133.183Z" transform="translate(-551.328 -117.59)" fill="#fff" fill-rule="evenodd"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 3.3 KiB |
1
dist/assets/svg/monsters.svg
vendored
Normal file
1
dist/assets/svg/monsters.svg
vendored
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 643 KiB |
14
dist/assets/svg/react.svg
vendored
Normal file
14
dist/assets/svg/react.svg
vendored
Normal file
|
|
@ -0,0 +1,14 @@
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 841.9 595.3"
|
||||||
|
>
|
||||||
|
<g>
|
||||||
|
<path
|
||||||
|
d="M666.3,296.5c0-32.5-40.7-63.3-103.1-82.4c14.4-63.6,8-114.2-20.2-130.4c-6.5-3.8-14.1-5.6-22.4-5.6v22.3 c4.6,0,8.3,0.9,11.4,2.6c13.6,7.8,19.5,37.5,14.9,75.7c-1.1,9.4-2.9,19.3-5.1,29.4c-19.6-4.8-41-8.5-63.5-10.9 c-13.5-18.5-27.5-35.3-41.6-50c32.6-30.3,63.2-46.9,84-46.9l0-22.3c0,0,0,0,0,0c-27.5,0-63.5,19.6-99.9,53.6 c-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7,0,51.4,16.5,84,46.6c-14,14.7-28,31.4-41.3,49.9c-22.6,2.4-44,6.1-63.6,11 c-2.3-10-4-19.7-5.2-29c-4.7-38.2,1.1-67.9,14.6-75.8c3-1.8,6.9-2.6,11.5-2.6l0-22.3c0,0,0,0,0,0c-8.4,0-16,1.8-22.6,5.6 c-28.1,16.2-34.4,66.7-19.9,130.1c-62.2,19.2-102.7,49.9-102.7,82.3c0,32.5,40.7,63.3,103.1,82.4c-14.4,63.6-8,114.2,20.2,130.4 c6.5,3.8,14.1,5.6,22.5,5.6c27.5,0,63.5-19.6,99.9-53.6c36.4,33.8,72.4,53.2,99.9,53.2c8.4,0,16-1.8,22.6-5.6 c28.1-16.2,34.4-66.7,19.9-130.1C625.8,359.7,666.3,328.9,666.3,296.5z M536.1,229.8c-3.7,12.9-8.3,26.2-13.5,39.5 c-4.1-8-8.4-16-13.1-24c-4.6-8-9.5-15.8-14.4-23.4C509.3,224,523,226.6,536.1,229.8z M490.3,336.3c-7.8,13.5-15.8,26.3-24.1,38.2 c-14.9,1.3-30,2-45.2,2c-15.1,0-30.2-0.7-45-1.9c-8.3-11.9-16.4-24.6-24.2-38c-7.6-13.1-14.5-26.4-20.8-39.8 c6.2-13.4,13.2-26.8,20.7-39.9c7.8-13.5,15.8-26.3,24.1-38.2c14.9-1.3,30-2,45.2-2c15.1,0,30.2,0.7,45,1.9 c8.3,11.9,16.4,24.6,24.2,38c7.6,13.1,14.5,26.4,20.8,39.8C504.7,309.8,497.8,323.2,490.3,336.3z M522.6,323.3 c5.4,13.4,10,26.8,13.8,39.8c-13.1,3.2-26.9,5.9-41.2,8c4.9-7.7,9.8-15.6,14.4-23.7C514.2,339.4,518.5,331.3,522.6,323.3z M421.2,430c-9.3-9.6-18.6-20.3-27.8-32c9,0.4,18.2,0.7,27.5,0.7c9.4,0,18.7-0.2,27.8-0.7C439.7,409.7,430.4,420.4,421.2,430z M346.8,371.1c-14.2-2.1-27.9-4.7-41-7.9c3.7-12.9,8.3-26.2,13.5-39.5c4.1,8,8.4,16,13.1,24C337.1,355.7,341.9,363.5,346.8,371.1z M420.7,163c9.3,9.6,18.6,20.3,27.8,32c-9-0.4-18.2-0.7-27.5-0.7c-9.4,0-18.7,0.2-27.8,0.7C402.2,183.3,411.5,172.6,420.7,163z M346.7,221.9c-4.9,7.7-9.8,15.6-14.4,23.7c-4.6,8-8.9,16-13,24c-5.4-13.4-10-26.8-13.8-39.8C318.6,226.7,332.4,224,346.7,221.9z M256.2,347.1c-35.4-15.1-58.3-34.9-58.3-50.6c0-15.7,22.9-35.6,58.3-50.6c8.6-3.7,18-7,27.7-10.1c5.7,19.6,13.2,40,22.5,60.9 c-9.2,20.8-16.6,41.1-22.2,60.6C274.3,354.2,264.9,350.8,256.2,347.1z M310,490c-13.6-7.8-19.5-37.5-14.9-75.7 c1.1-9.4,2.9-19.3,5.1-29.4c19.6,4.8,41,8.5,63.5,10.9c13.5,18.5,27.5,35.3,41.6,50c-32.6,30.3-63.2,46.9-84,46.9 C316.8,492.6,313,491.7,310,490z M547.2,413.8c4.7,38.2-1.1,67.9-14.6,75.8c-3,1.8-6.9,2.6-11.5,2.6c-20.7,0-51.4-16.5-84-46.6 c14-14.7,28-31.4,41.3-49.9c22.6-2.4,44-6.1,63.6-11C544.3,394.8,546.1,404.5,547.2,413.8z M585.7,347.1c-8.6,3.7-18,7-27.7,10.1 c-5.7-19.6-13.2-40-22.5-60.9c9.2-20.8,16.6-41.1,22.2-60.6c9.9,3.1,19.3,6.5,28.1,10.2c35.4,15.1,58.3,34.9,58.3,50.6 C644,312.2,621.1,332.1,585.7,347.1z"
|
||||||
|
/>
|
||||||
|
<polygon points="320.8,78.4 320.8,78.4 320.8,78.4 " />
|
||||||
|
<circle cx="420.9" cy="296.5" r="45.7" />
|
||||||
|
<polygon points="520.5,78.1 520.5,78.1 520.5,78.1 " />
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2.9 KiB |
1
dist/assets/svg/robot.svg
vendored
Normal file
1
dist/assets/svg/robot.svg
vendored
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 13 KiB |
1
dist/assets/svg/selectcolor.svg
vendored
Normal file
1
dist/assets/svg/selectcolor.svg
vendored
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 9.1 KiB |
5
dist/business_layout2/index.html
vendored
Normal file
5
dist/business_layout2/index.html
vendored
Normal file
File diff suppressed because one or more lines are too long
9
dist/favicon.svg
vendored
Normal file
9
dist/favicon.svg
vendored
Normal file
|
|
@ -0,0 +1,9 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 128 128">
|
||||||
|
<path d="M50.4 78.5a75.1 75.1 0 0 0-28.5 6.9l24.2-65.7c.7-2 1.9-3.2 3.4-3.2h29c1.5 0 2.7 1.2 3.4 3.2l24.2 65.7s-11.6-7-28.5-7L67 45.5c-.4-1.7-1.6-2.8-2.9-2.8-1.3 0-2.5 1.1-2.9 2.7L50.4 78.5Zm-1.1 28.2Zm-4.2-20.2c-2 6.6-.6 15.8 4.2 20.2a17.5 17.5 0 0 1 .2-.7 5.5 5.5 0 0 1 5.7-4.5c2.8.1 4.3 1.5 4.7 4.7.2 1.1.2 2.3.2 3.5v.4c0 2.7.7 5.2 2.2 7.4a13 13 0 0 0 5.7 4.9v-.3l-.2-.3c-1.8-5.6-.5-9.5 4.4-12.8l1.5-1a73 73 0 0 0 3.2-2.2 16 16 0 0 0 6.8-11.4c.3-2 .1-4-.6-6l-.8.6-1.6 1a37 37 0 0 1-22.4 2.7c-5-.7-9.7-2-13.2-6.2Z" />
|
||||||
|
<style>
|
||||||
|
path { fill: #000; }
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
path { fill: #FFF; }
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 749 B |
4
dist/index.html
vendored
Normal file
4
dist/index.html
vendored
Normal file
File diff suppressed because one or more lines are too long
3
dist/portfolio_layout1/index.html
vendored
Normal file
3
dist/portfolio_layout1/index.html
vendored
Normal file
File diff suppressed because one or more lines are too long
1
dist/portfolio_layout2/index.html
vendored
Normal file
1
dist/portfolio_layout2/index.html
vendored
Normal file
File diff suppressed because one or more lines are too long
7380
package-lock.json
generated
Normal file
7380
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load diff
22
package.json
Normal file
22
package.json
Normal file
|
|
@ -0,0 +1,22 @@
|
||||||
|
{
|
||||||
|
"name": "",
|
||||||
|
"type": "module",
|
||||||
|
"version": "0.0.1",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "astro dev",
|
||||||
|
"start": "astro dev",
|
||||||
|
"build": "astro check && astro build",
|
||||||
|
"preview": "astro preview",
|
||||||
|
"astro": "astro"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@astrojs/alpinejs": "^0.3.1",
|
||||||
|
"@astrojs/check": "^0.3.1",
|
||||||
|
"@astrojs/tailwind": "^5.0.2",
|
||||||
|
"@types/alpinejs": "^3.13.5",
|
||||||
|
"alpinejs": "^3.13.3",
|
||||||
|
"astro": "^3.6.2",
|
||||||
|
"tailwindcss": "^3.3.5",
|
||||||
|
"typescript": "^5.3.2"
|
||||||
|
}
|
||||||
|
}
|
||||||
0
public/.nojekyll
Normal file
0
public/.nojekyll
Normal file
1
public/assets/svg/404.svg
Normal file
1
public/assets/svg/404.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 6.9 KiB |
1
public/assets/svg/Business_SVG.svg
Normal file
1
public/assets/svg/Business_SVG.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 86 KiB |
1
public/assets/svg/copycode.svg
Normal file
1
public/assets/svg/copycode.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 8.2 KiB |
1
public/assets/svg/doodle.svg
Normal file
1
public/assets/svg/doodle.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 20 KiB |
1
public/assets/svg/findcomponent.svg
Normal file
1
public/assets/svg/findcomponent.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 8.5 KiB |
10
public/assets/svg/logo.svg
Normal file
10
public/assets/svg/logo.svg
Normal file
|
|
@ -0,0 +1,10 @@
|
||||||
|
<svg id="Group_11" data-name="Group 11" xmlns="http://www.w3.org/2000/svg" width="35.658" height="35.658" viewBox="0 0 35.658 35.658">
|
||||||
|
<path id="Path_7" data-name="Path 7" d="M4.457,0H31.2a4.457,4.457,0,0,1,4.457,4.457V31.2A4.457,4.457,0,0,1,31.2,35.658H4.457A4.457,4.457,0,0,1,0,31.2V4.457A4.457,4.457,0,0,1,4.457,0Z" transform="translate(0 0)" fill="#6d28d9"/>
|
||||||
|
<g id="Group_5" data-name="Group 5" transform="translate(5.244 6.341)">
|
||||||
|
<g id="Artboard_1" data-name="Artboard 1">
|
||||||
|
<path id="Shape_316_1" data-name="Shape 316 1" d="M539.151,72.067c2.446,4.4,10.223,3.83,12.095,0a6.568,6.568,0,0,1,2.467,1.463c-.091,3.807-2.467,5.169-2.467,5.169l.082.884c2.708-.784,3.717-.7,3.521-5.3,1.361,1.117,2.592,3.237,2.465,4.6-.132,1.416-2.15,5.675-1.9,5.6a92.614,92.614,0,0,1-8.913,3.382A3.093,3.093,0,0,0,544.45,86.1a13.49,13.49,0,0,0-1.883,1.878c-2.477-.9-4.669-1.9-6.96-2.872l-1.8-.663-.819-2.1c-1.1-2.722-1.6-4.238.164-6.627.384-.519,1.053-1.647,1.642-1.894-.115,3.9-1.292,5.756,3.107,5.76l.082-.884s-1.91-.239-2.374-5.169Zm2.188,11.824c-.219.294-.355.368-.573.663.055.147-.218.184-.164.331a3.024,3.024,0,0,0,.9,1.215,2.812,2.812,0,0,0,1.8-1.215C543.084,84.421,541.779,83.658,541.339,83.892Zm5.977,0c-.437.294-.955.7-1.392.994.136.221.846.773.983.994.412.248.312.451.819.221a1.479,1.479,0,0,0,.9-1.325c-.218-.258-.437-.626-.655-.884h-.655Z" transform="translate(-531.99 -72.067)" fill="#fff" fill-rule="evenodd"/>
|
||||||
|
</g>
|
||||||
|
<path id="Shape_316_1-2" data-name="Shape 316 1" d="M560,133.183c-1.328.368-2.544.816-3.986,1.1a33.534,33.534,0,0,1-.412,6.406C557.337,138.675,559.825,135.215,560,133.183Z" transform="translate(-539.007 -117.59)" fill="#fff" fill-rule="evenodd"/>
|
||||||
|
<path id="Shape_316_1-3" data-name="Shape 316 1" d="M555.6,133.183c1.375.368,2.634.816,4.127,1.1a32.416,32.416,0,0,0,.427,6.406C558.362,138.675,555.787,135.215,555.6,133.183Z" transform="translate(-551.328 -117.59)" fill="#fff" fill-rule="evenodd"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.9 KiB |
15
public/assets/svg/logo_title.svg
Normal file
15
public/assets/svg/logo_title.svg
Normal file
|
|
@ -0,0 +1,15 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="258.839" height="35.658" viewBox="0 0 258.839 35.658">
|
||||||
|
<g id="Group_12" data-name="Group 12" transform="translate(-862.627 -615)">
|
||||||
|
<path id="Path_8" data-name="Path 8" d="M2.974-3.039V-31.295h10.4l4.377,5.888,4.392-5.888H32.531V-3.039H21.812V-17.185l-4.059,5.462-4.059-5.462V-3.039Zm42.608,0H34.862l8.4-28.256h15.27l8.4,28.256h-10.7l-1.4-4.777H46.977Zm3.346-11.443h3.964L50.909-21.5ZM69.287-3.039V-31.295h10.4l4.377,5.888,4.392-5.888H98.845V-3.039H88.125V-17.185l-4.059,5.462-4.059-5.462V-3.039Zm34.188-28.256h15.143q4.646,0,7.017,2.12a7.347,7.347,0,0,1,2.371,5.768,6.838,6.838,0,0,1-3.156,6.073,8.58,8.58,0,0,1,2.838,2.676,6.983,6.983,0,0,1,.967,3.805,7.583,7.583,0,0,1-2.18,5.685,8.38,8.38,0,0,1-6.113,2.129H103.475Zm10.719,5.685v5.5h.27a3.842,3.842,0,0,0,2.474-.62,2.683,2.683,0,0,0,.729-2.139q0-2.74-2.823-2.74Zm0,10.24v6.11h.333a4.107,4.107,0,0,0,2.624-.657,2.821,2.821,0,0,0,.785-2.268q0-3.185-3-3.185ZM140.311-3.039H129.591L138-31.295h15.27l8.4,28.256h-10.7l-1.4-4.777h-7.865Zm3.346-11.443h3.964L145.639-21.5Zm54.96-16.813v12.813q0,8.388-3.671,12.147a11.414,11.414,0,0,1-8.38,3.759,11.38,11.38,0,0,1-6.478-2.074,11.015,11.015,0,0,1-4.305-5.472,26.6,26.6,0,0,1-1.237-8.916V-31.295h10.719V-18.2a6.734,6.734,0,0,0,.317,2.666,1.029,1.029,0,0,0,.951.555,1.11,1.11,0,0,0,1.126-1.009,16.742,16.742,0,0,0,.238-3.4V-31.295Zm4.456,28.256V-31.295h10.7V-3.039Z" transform="translate(907.69 649.639)" fill="#6d28d9"/>
|
||||||
|
<g id="Group_11" data-name="Group 11" transform="translate(862.627 615)">
|
||||||
|
<path id="Path_7" data-name="Path 7" d="M4.457,0H31.2a4.457,4.457,0,0,1,4.457,4.457V31.2A4.457,4.457,0,0,1,31.2,35.658H4.457A4.457,4.457,0,0,1,0,31.2V4.457A4.457,4.457,0,0,1,4.457,0Z" transform="translate(0 0)" fill="#6d28d9"/>
|
||||||
|
<g id="Group_5" data-name="Group 5" transform="translate(5.244 6.341)">
|
||||||
|
<g id="Artboard_1" data-name="Artboard 1">
|
||||||
|
<path id="Shape_316_1" data-name="Shape 316 1" d="M539.151,72.067c2.446,4.4,10.223,3.83,12.095,0a6.568,6.568,0,0,1,2.467,1.463c-.091,3.807-2.467,5.169-2.467,5.169l.082.884c2.708-.784,3.717-.7,3.521-5.3,1.361,1.117,2.592,3.237,2.465,4.6-.132,1.416-2.15,5.675-1.9,5.6a92.614,92.614,0,0,1-8.913,3.382A3.093,3.093,0,0,0,544.45,86.1a13.49,13.49,0,0,0-1.883,1.878c-2.477-.9-4.669-1.9-6.96-2.872l-1.8-.663-.819-2.1c-1.1-2.722-1.6-4.238.164-6.627.384-.519,1.053-1.647,1.642-1.894-.115,3.9-1.292,5.756,3.107,5.76l.082-.884s-1.91-.239-2.374-5.169Zm2.188,11.824c-.219.294-.355.368-.573.663.055.147-.218.184-.164.331a3.024,3.024,0,0,0,.9,1.215,2.812,2.812,0,0,0,1.8-1.215C543.084,84.421,541.779,83.658,541.339,83.892Zm5.977,0c-.437.294-.955.7-1.392.994.136.221.846.773.983.994.412.248.312.451.819.221a1.479,1.479,0,0,0,.9-1.325c-.218-.258-.437-.626-.655-.884h-.655Z" transform="translate(-531.99 -72.067)" fill="#fff" fill-rule="evenodd"/>
|
||||||
|
</g>
|
||||||
|
<path id="Shape_316_1-2" data-name="Shape 316 1" d="M560,133.183c-1.328.368-2.544.816-3.986,1.1a33.534,33.534,0,0,1-.412,6.406C557.337,138.675,559.825,135.215,560,133.183Z" transform="translate(-539.007 -117.59)" fill="#fff" fill-rule="evenodd"/>
|
||||||
|
<path id="Shape_316_1-3" data-name="Shape 316 1" d="M555.6,133.183c1.375.368,2.634.816,4.127,1.1a32.416,32.416,0,0,0,.427,6.406C558.362,138.675,555.787,135.215,555.6,133.183Z" transform="translate(-551.328 -117.59)" fill="#fff" fill-rule="evenodd"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 3.3 KiB |
1
public/assets/svg/monsters.svg
Normal file
1
public/assets/svg/monsters.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 643 KiB |
14
public/assets/svg/react.svg
Normal file
14
public/assets/svg/react.svg
Normal file
|
|
@ -0,0 +1,14 @@
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 841.9 595.3"
|
||||||
|
>
|
||||||
|
<g>
|
||||||
|
<path
|
||||||
|
d="M666.3,296.5c0-32.5-40.7-63.3-103.1-82.4c14.4-63.6,8-114.2-20.2-130.4c-6.5-3.8-14.1-5.6-22.4-5.6v22.3 c4.6,0,8.3,0.9,11.4,2.6c13.6,7.8,19.5,37.5,14.9,75.7c-1.1,9.4-2.9,19.3-5.1,29.4c-19.6-4.8-41-8.5-63.5-10.9 c-13.5-18.5-27.5-35.3-41.6-50c32.6-30.3,63.2-46.9,84-46.9l0-22.3c0,0,0,0,0,0c-27.5,0-63.5,19.6-99.9,53.6 c-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7,0,51.4,16.5,84,46.6c-14,14.7-28,31.4-41.3,49.9c-22.6,2.4-44,6.1-63.6,11 c-2.3-10-4-19.7-5.2-29c-4.7-38.2,1.1-67.9,14.6-75.8c3-1.8,6.9-2.6,11.5-2.6l0-22.3c0,0,0,0,0,0c-8.4,0-16,1.8-22.6,5.6 c-28.1,16.2-34.4,66.7-19.9,130.1c-62.2,19.2-102.7,49.9-102.7,82.3c0,32.5,40.7,63.3,103.1,82.4c-14.4,63.6-8,114.2,20.2,130.4 c6.5,3.8,14.1,5.6,22.5,5.6c27.5,0,63.5-19.6,99.9-53.6c36.4,33.8,72.4,53.2,99.9,53.2c8.4,0,16-1.8,22.6-5.6 c28.1-16.2,34.4-66.7,19.9-130.1C625.8,359.7,666.3,328.9,666.3,296.5z M536.1,229.8c-3.7,12.9-8.3,26.2-13.5,39.5 c-4.1-8-8.4-16-13.1-24c-4.6-8-9.5-15.8-14.4-23.4C509.3,224,523,226.6,536.1,229.8z M490.3,336.3c-7.8,13.5-15.8,26.3-24.1,38.2 c-14.9,1.3-30,2-45.2,2c-15.1,0-30.2-0.7-45-1.9c-8.3-11.9-16.4-24.6-24.2-38c-7.6-13.1-14.5-26.4-20.8-39.8 c6.2-13.4,13.2-26.8,20.7-39.9c7.8-13.5,15.8-26.3,24.1-38.2c14.9-1.3,30-2,45.2-2c15.1,0,30.2,0.7,45,1.9 c8.3,11.9,16.4,24.6,24.2,38c7.6,13.1,14.5,26.4,20.8,39.8C504.7,309.8,497.8,323.2,490.3,336.3z M522.6,323.3 c5.4,13.4,10,26.8,13.8,39.8c-13.1,3.2-26.9,5.9-41.2,8c4.9-7.7,9.8-15.6,14.4-23.7C514.2,339.4,518.5,331.3,522.6,323.3z M421.2,430c-9.3-9.6-18.6-20.3-27.8-32c9,0.4,18.2,0.7,27.5,0.7c9.4,0,18.7-0.2,27.8-0.7C439.7,409.7,430.4,420.4,421.2,430z M346.8,371.1c-14.2-2.1-27.9-4.7-41-7.9c3.7-12.9,8.3-26.2,13.5-39.5c4.1,8,8.4,16,13.1,24C337.1,355.7,341.9,363.5,346.8,371.1z M420.7,163c9.3,9.6,18.6,20.3,27.8,32c-9-0.4-18.2-0.7-27.5-0.7c-9.4,0-18.7,0.2-27.8,0.7C402.2,183.3,411.5,172.6,420.7,163z M346.7,221.9c-4.9,7.7-9.8,15.6-14.4,23.7c-4.6,8-8.9,16-13,24c-5.4-13.4-10-26.8-13.8-39.8C318.6,226.7,332.4,224,346.7,221.9z M256.2,347.1c-35.4-15.1-58.3-34.9-58.3-50.6c0-15.7,22.9-35.6,58.3-50.6c8.6-3.7,18-7,27.7-10.1c5.7,19.6,13.2,40,22.5,60.9 c-9.2,20.8-16.6,41.1-22.2,60.6C274.3,354.2,264.9,350.8,256.2,347.1z M310,490c-13.6-7.8-19.5-37.5-14.9-75.7 c1.1-9.4,2.9-19.3,5.1-29.4c19.6,4.8,41,8.5,63.5,10.9c13.5,18.5,27.5,35.3,41.6,50c-32.6,30.3-63.2,46.9-84,46.9 C316.8,492.6,313,491.7,310,490z M547.2,413.8c4.7,38.2-1.1,67.9-14.6,75.8c-3,1.8-6.9,2.6-11.5,2.6c-20.7,0-51.4-16.5-84-46.6 c14-14.7,28-31.4,41.3-49.9c22.6-2.4,44-6.1,63.6-11C544.3,394.8,546.1,404.5,547.2,413.8z M585.7,347.1c-8.6,3.7-18,7-27.7,10.1 c-5.7-19.6-13.2-40-22.5-60.9c9.2-20.8,16.6-41.1,22.2-60.6c9.9,3.1,19.3,6.5,28.1,10.2c35.4,15.1,58.3,34.9,58.3,50.6 C644,312.2,621.1,332.1,585.7,347.1z"
|
||||||
|
/>
|
||||||
|
<polygon points="320.8,78.4 320.8,78.4 320.8,78.4 " />
|
||||||
|
<circle cx="420.9" cy="296.5" r="45.7" />
|
||||||
|
<polygon points="520.5,78.1 520.5,78.1 520.5,78.1 " />
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2.9 KiB |
1
public/assets/svg/robot.svg
Normal file
1
public/assets/svg/robot.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 13 KiB |
1
public/assets/svg/selectcolor.svg
Normal file
1
public/assets/svg/selectcolor.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 9.1 KiB |
9
public/favicon.svg
Normal file
9
public/favicon.svg
Normal file
|
|
@ -0,0 +1,9 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 128 128">
|
||||||
|
<path d="M50.4 78.5a75.1 75.1 0 0 0-28.5 6.9l24.2-65.7c.7-2 1.9-3.2 3.4-3.2h29c1.5 0 2.7 1.2 3.4 3.2l24.2 65.7s-11.6-7-28.5-7L67 45.5c-.4-1.7-1.6-2.8-2.9-2.8-1.3 0-2.5 1.1-2.9 2.7L50.4 78.5Zm-1.1 28.2Zm-4.2-20.2c-2 6.6-.6 15.8 4.2 20.2a17.5 17.5 0 0 1 .2-.7 5.5 5.5 0 0 1 5.7-4.5c2.8.1 4.3 1.5 4.7 4.7.2 1.1.2 2.3.2 3.5v.4c0 2.7.7 5.2 2.2 7.4a13 13 0 0 0 5.7 4.9v-.3l-.2-.3c-1.8-5.6-.5-9.5 4.4-12.8l1.5-1a73 73 0 0 0 3.2-2.2 16 16 0 0 0 6.8-11.4c.3-2 .1-4-.6-6l-.8.6-1.6 1a37 37 0 0 1-22.4 2.7c-5-.7-9.7-2-13.2-6.2Z" />
|
||||||
|
<style>
|
||||||
|
path { fill: #000; }
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
path { fill: #FFF; }
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 749 B |
1
src/env.d.ts
vendored
Normal file
1
src/env.d.ts
vendored
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
/// <reference types="astro/client" />
|
||||||
169
src/pages/business_layout2.astro
Normal file
169
src/pages/business_layout2.astro
Normal file
|
|
@ -0,0 +1,169 @@
|
||||||
|
---
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||||
|
<meta name="viewport" content="width=device-width" />
|
||||||
|
<meta name="generator" content={Astro.generator} />
|
||||||
|
<title>Astro</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="min-h-screen bg-gray-800 text-gray-100">
|
||||||
|
<div class="p-6 space-y-8">
|
||||||
|
<header class="container flex items-center justify-between h-16 px-4 mx-auto rounded bg-gray-900">
|
||||||
|
<a rel="noopener noreferrer" href="#" aria-label="Homepage">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 32 32" class="w-6 h-6 text-violet-400">
|
||||||
|
<path d="M27.912 7.289l-10.324-5.961c-0.455-0.268-1.002-0.425-1.588-0.425s-1.133 0.158-1.604 0.433l0.015-0.008-10.324 5.961c-0.955 0.561-1.586 1.582-1.588 2.75v11.922c0.002 1.168 0.635 2.189 1.574 2.742l0.016 0.008 10.322 5.961c0.455 0.267 1.004 0.425 1.59 0.425 0.584 0 1.131-0.158 1.602-0.433l-0.014 0.008 10.322-5.961c0.955-0.561 1.586-1.582 1.588-2.75v-11.922c-0.002-1.168-0.633-2.189-1.573-2.742zM27.383 21.961c0 0.389-0.211 0.73-0.526 0.914l-0.004 0.002-10.324 5.961c-0.152 0.088-0.334 0.142-0.53 0.142s-0.377-0.053-0.535-0.145l0.005 0.002-10.324-5.961c-0.319-0.186-0.529-0.527-0.529-0.916v-11.922c0-0.389 0.211-0.73 0.526-0.914l0.004-0.002 10.324-5.961c0.152-0.090 0.334-0.143 0.53-0.143s0.377 0.053 0.535 0.144l-0.006-0.002 10.324 5.961c0.319 0.185 0.529 0.527 0.529 0.916z"></path>
|
||||||
|
<path d="M22.094 19.451h-0.758c-0.188 0-0.363 0.049-0.515 0.135l0.006-0.004-4.574 2.512-5.282-3.049v-6.082l5.282-3.051 4.576 2.504c0.146 0.082 0.323 0.131 0.508 0.131h0.758c0.293 0 0.529-0.239 0.529-0.531v-0.716c0-0.2-0.11-0.373-0.271-0.463l-0.004-0.002-5.078-2.777c-0.293-0.164-0.645-0.26-1.015-0.26-0.39 0-0.756 0.106-1.070 0.289l0.010-0.006-5.281 3.049c-0.636 0.375-1.056 1.055-1.059 1.834v6.082c0 0.779 0.422 1.461 1.049 1.828l0.009 0.006 5.281 3.049c0.305 0.178 0.67 0.284 1.061 0.284 0.373 0 0.723-0.098 1.027-0.265l-0.012 0.006 5.080-2.787c0.166-0.091 0.276-0.265 0.276-0.465v-0.716c0-0.293-0.238-0.529-0.529-0.529z"></path>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
<div class="items-center hidden space-x-8 lg:flex">
|
||||||
|
<div class="space-x-4">
|
||||||
|
<a rel="noopener noreferrer" href="#">Link</a>
|
||||||
|
<a rel="noopener noreferrer" href="#">Link</a>
|
||||||
|
<a rel="noopener noreferrer" href="#">Link</a>
|
||||||
|
</div>
|
||||||
|
<button class="px-4 py-2 rounded-md bg-violet-400 text-gray-900">Sign up</button>
|
||||||
|
</div>
|
||||||
|
<button class="flex items-center justify-center p-2 lg:hidden">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-6 h-6 text-gray-50">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</header>
|
||||||
|
<main>
|
||||||
|
<div class="container mx-auto space-y-16">
|
||||||
|
<section class="grid gap-6 text-center lg:grid-cols-2 xl:grid-cols-5">
|
||||||
|
<div class="w-full p-6 rounded-md sm:p-16 xl:col-span-2 bg-gray-900">
|
||||||
|
<span class="block mb-2 text-violet-400">Mamba design system</span>
|
||||||
|
<h1 class="text-5xl font-extrabold text-gray-50">Build it with Mamba</h1>
|
||||||
|
<p class="my-8">
|
||||||
|
<span class="font-medium text-gray-50">Modular and versatile.</span>The ultimate design toolkit for savvy technology startups.
|
||||||
|
</p>
|
||||||
|
<form novalidate="" action="" class="self-stretch space-y-3">
|
||||||
|
<div>
|
||||||
|
<label for="name" class="text-sm sr-only">Your name</label>
|
||||||
|
<input id="name" type="text" placeholder="Your name" class="w-full rounded-md focus:ring focus:ri border-gray-700">
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label for="lastname" class="text-sm sr-only">Email address</label>
|
||||||
|
<input id="lastname" type="text" placeholder="Email address" class="w-full rounded-md focus:ring focus:ri border-gray-700">
|
||||||
|
</div>
|
||||||
|
<button class="w-full py-2 font-semibold rounded bg-violet-400 text-gray-900">Join the waitlist</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
<img src="https://source.unsplash.com/random/480x360" alt="" class="object-cover w-full h-full rounded-md xl:col-span-3 bg-gray-500">
|
||||||
|
</section>
|
||||||
|
<section>
|
||||||
|
<span class="block mb-2 text-xs font-medium tracki uppercase lg:text-center text-violet-400">How it works</span>
|
||||||
|
<h2 class="text-5xl font-bold lg:text-center text-gray-50">Building with Mamba is simple</h2>
|
||||||
|
<div class="grid gap-6 my-16 lg:grid-cols-3">
|
||||||
|
<div class="flex flex-col p-8 space-y-4 rounded-md bg-gray-900">
|
||||||
|
<div class="flex items-center justify-center flex-shrink-0 w-12 h-12 text-xl font-bold rounded-full bg-violet-400 text-gray-900">1</div>
|
||||||
|
<p class="text-2xl font-semibold">
|
||||||
|
<b>Nulla.</b>Nostrum, corrupti blanditiis. Illum, architecto?
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-col p-8 space-y-4 rounded-md bg-gray-900">
|
||||||
|
<div class="flex items-center justify-center flex-shrink-0 w-12 h-12 text-xl font-bold rounded-full bg-violet-400 text-gray-900">2</div>
|
||||||
|
<p class="text-2xl font-semibold">
|
||||||
|
<b>Accusantium.</b>Vitae saepe atque neque sunt eius dolor veniam alias debitis?
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-col p-8 space-y-4 rounded-md bg-gray-900">
|
||||||
|
<div class="flex items-center justify-center flex-shrink-0 w-12 h-12 text-xl font-bold rounded-full bg-violet-400 text-gray-900">3</div>
|
||||||
|
<p class="text-2xl font-semibold">
|
||||||
|
<b>Maxime.</b>Expedita temporibus culpa reprehenderit doloribus consectetur odio!
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section class="grid gap-6 lg:grid-cols-2">
|
||||||
|
<img src="https://source.unsplash.com/random/360x480" alt="" class="object-cover w-full rounded-md max-h-96 bg-gray-500">
|
||||||
|
<div class="flex flex-col items-center w-full p-6 space-y-8 rounded-md lg:h-full lg:p-8 bg-gray-900">
|
||||||
|
<img src="https://source.unsplash.com/random/100x100" alt="" class="object-cover w-20 h-20 rounded-full bg-gray-500">
|
||||||
|
<blockquote class="max-w-lg text-lg italic font-medium text-center">"Et, dignissimos obcaecati. Recusandae praesentium doloribus vitae? Rem unde atque mollitia!"</blockquote>
|
||||||
|
<div class="text-center text-gray-400">
|
||||||
|
<p>Leroy Jenkins</p>
|
||||||
|
<p>CEO of Company Co.</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex space-x-2">
|
||||||
|
<button type="button" aria-label="Page 1" class="w-2 h-2 rounded-full bg-gray-50"></button>
|
||||||
|
<button type="button" aria-label="Page 2" class="w-2 h-2 rounded-full bg-gray-600"></button>
|
||||||
|
<button type="button" aria-label="Page 3" class="w-2 h-2 rounded-full bg-gray-600"></button>
|
||||||
|
<button type="button" aria-label="Page 4" class="w-2 h-2 rounded-full bg-gray-600"></button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="p-8 space-y-8 rounded-md lg:col-span-full lg:py-12 bg-gray-900">
|
||||||
|
<h2 class="text-5xl font-bold text-gray-50">Create with us</h2>
|
||||||
|
<p class="text-gray-400">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nesciunt facilis quod accusantium beatae cum nam adipisci reiciendis omnis possimus error quo animi voluptas magni, at incidunt. Nulla ex at ullam corporis quidem adipisci vitae, perferendis dolorem libero minus atque tenetur enim pariatur cupiditate commodi in beatae, ipsa eligendi? Quis, saepe.</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section>
|
||||||
|
<div class="grid gap-6 lg:grid-cols-3">
|
||||||
|
<div class="overflow-hidden rounded lg:flex lg:col-span-3">
|
||||||
|
<img src="https://source.unsplash.com/random/485x365" alt="" class="object-cover w-full h-auto max-h-96 bg-gray-500">
|
||||||
|
<div class="p-6 space-y-6 lg:p-8 md:flex md:flex-col bg-gray-900">
|
||||||
|
<span class="self-start px-3 py-1 text-sm rounded-full bg-violet-400 text-gray-900">Business</span>
|
||||||
|
<h2 class="text-3xl font-bold md:flex-1">Curating a workplace that inspires team movement</h2>
|
||||||
|
<div>
|
||||||
|
<p class="text-gray-400">November 30, 2020</p>
|
||||||
|
<p class="text-gray-400">By Leroy Jenkins</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="p-6 rounded lg:p-8 lg:py-12 bg-gray-900">
|
||||||
|
<h3 class="inline font-medium text-gray-50">Panel-based blocks.</h3>
|
||||||
|
<p class="inline">Flexible panels that are perfect for building functional layouts.</p>
|
||||||
|
</div>
|
||||||
|
<div class="p-6 rounded lg:p-8 lg:py-12 bg-gray-900">
|
||||||
|
<h3 class="inline font-medium text-gray-50">Responsive design.</h3>
|
||||||
|
<p class="inline">Panels look great no matter the device.</p>
|
||||||
|
</div>
|
||||||
|
<div class="p-6 rounded lg:p-8 lg:py-12 bg-gray-900">
|
||||||
|
<h3 class="inline font-medium text-gray-50">Premium support.</h3>
|
||||||
|
<p class="inline">Join over 50 000 satisfied customers who use our templates.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section>
|
||||||
|
<div class="container p-6 py-20 mx-auto rounded lg:px-8 bg-gray-900">
|
||||||
|
<h2 class="text-5xl font-bold text-center">Our team is here to help you.</h2>
|
||||||
|
<div class="flex justify-center p-4">
|
||||||
|
<a rel="noopener noreferrer" href="#">Meet our crew ></a>
|
||||||
|
</div>
|
||||||
|
<img src="https://source.unsplash.com/random/360x240" alt="" class="object-cover w-full h-auto mt-8 rounded max-h-96 bg-gray-500">
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<footer>
|
||||||
|
<div class="container flex justify-between p-6 mx-auto lg:p-8 bg-gray-900">
|
||||||
|
<a rel="noopener noreferrer" href="#" class="font-bold">Mamba</a>
|
||||||
|
<div class="flex space-x-2">
|
||||||
|
<a aria-label="Email" rel="noopener noreferrer" href="#" class="flex items-center justify-center text-gray-400">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5">
|
||||||
|
<path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"></path>
|
||||||
|
<path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"></path>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
<a aria-label="Twitter" rel="noopener noreferrer" href="#" class="flex items-center justify-center text-gray-400">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" fill="currentColor" class="w-5 h-5">
|
||||||
|
<path d="M 50.0625 10.4375 C 48.214844 11.257813 46.234375 11.808594 44.152344 12.058594 C 46.277344 10.785156 47.910156 8.769531 48.675781 6.371094 C 46.691406 7.546875 44.484375 8.402344 42.144531 8.863281 C 40.269531 6.863281 37.597656 5.617188 34.640625 5.617188 C 28.960938 5.617188 24.355469 10.21875 24.355469 15.898438 C 24.355469 16.703125 24.449219 17.488281 24.625 18.242188 C 16.078125 17.8125 8.503906 13.71875 3.429688 7.496094 C 2.542969 9.019531 2.039063 10.785156 2.039063 12.667969 C 2.039063 16.234375 3.851563 19.382813 6.613281 21.230469 C 4.925781 21.175781 3.339844 20.710938 1.953125 19.941406 C 1.953125 19.984375 1.953125 20.027344 1.953125 20.070313 C 1.953125 25.054688 5.5 29.207031 10.199219 30.15625 C 9.339844 30.390625 8.429688 30.515625 7.492188 30.515625 C 6.828125 30.515625 6.183594 30.453125 5.554688 30.328125 C 6.867188 34.410156 10.664063 37.390625 15.160156 37.472656 C 11.644531 40.230469 7.210938 41.871094 2.390625 41.871094 C 1.558594 41.871094 0.742188 41.824219 -0.0585938 41.726563 C 4.488281 44.648438 9.894531 46.347656 15.703125 46.347656 C 34.617188 46.347656 44.960938 30.679688 44.960938 17.09375 C 44.960938 16.648438 44.949219 16.199219 44.933594 15.761719 C 46.941406 14.3125 48.683594 12.5 50.0625 10.4375 Z"></path>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
<a aria-label="Github" rel="noopener noreferrer" href="#" class="flex items-center justify-center text-gray-400">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" class="w-6 h-6">
|
||||||
|
<path d="M10.9,2.1c-4.6,0.5-8.3,4.2-8.8,8.7c-0.5,4.7,2.2,8.9,6.3,10.5C8.7,21.4,9,21.2,9,20.8v-1.6c0,0-0.4,0.1-0.9,0.1 c-1.4,0-2-1.2-2.1-1.9c-0.1-0.4-0.3-0.7-0.6-1C5.1,16.3,5,16.3,5,16.2C5,16,5.3,16,5.4,16c0.6,0,1.1,0.7,1.3,1c0.5,0.8,1.1,1,1.4,1 c0.4,0,0.7-0.1,0.9-0.2c0.1-0.7,0.4-1.4,1-1.8c-2.3-0.5-4-1.8-4-4c0-1.1,0.5-2.2,1.2-3C7.1,8.8,7,8.3,7,7.6C7,7.2,7,6.6,7.3,6 c0,0,1.4,0,2.8,1.3C10.6,7.1,11.3,7,12,7s1.4,0.1,2,0.3C15.3,6,16.8,6,16.8,6C17,6.6,17,7.2,17,7.6c0,0.8-0.1,1.2-0.2,1.4 c0.7,0.8,1.2,1.8,1.2,3c0,2.2-1.7,3.5-4,4c0.6,0.5,1,1.4,1,2.3v2.6c0,0.3,0.3,0.6,0.7,0.5c3.7-1.5,6.3-5.1,6.3-9.3 C22,6.1,16.9,1.4,10.9,2.1z"></path>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
590
src/pages/index.astro
Normal file
590
src/pages/index.astro
Normal file
|
|
@ -0,0 +1,590 @@
|
||||||
|
---
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||||
|
<meta name="viewport" content="width=device-width" />
|
||||||
|
<meta name="generator" content={Astro.generator} />
|
||||||
|
<title>Astro</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="space-y-8 md:space-y-16 bg-gray-800 text-gray-100">
|
||||||
|
<header class="p-4 bg-gray-800 text-gray-100">
|
||||||
|
<div class="container flex justify-between h-16 mx-auto md:justify-center md:space-x-8">
|
||||||
|
<ul class="items-stretch hidden space-x-3 md:flex">
|
||||||
|
<li class="flex">
|
||||||
|
<a rel="noopener noreferrer" href="/" class="flex items-center px-4 -mb-1 border-b-2 border-transparent">Business Layout 1</a>
|
||||||
|
</li>
|
||||||
|
<li class="flex">
|
||||||
|
<a rel="noopener noreferrer" href="/business_layout2" class="flex items-center px-4 -mb-1 border-b-2 border-transparent">Business Layout 2</a>
|
||||||
|
</li>
|
||||||
|
<li class="flex">
|
||||||
|
<a rel="noopener noreferrer" href="/portfolio_layout1" class="flex items-center px-4 -mb-1 border-b-2 border-transparent text-violet-400 border-violet-400">Portfolio Layout 1</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<a rel="noopener noreferrer" href="#" aria-label="Back to homepage" class="flex items-center p-2">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 32 32" class="w-8 h-8 text-violet-400">
|
||||||
|
<path d="M27.912 7.289l-10.324-5.961c-0.455-0.268-1.002-0.425-1.588-0.425s-1.133 0.158-1.604 0.433l0.015-0.008-10.324 5.961c-0.955 0.561-1.586 1.582-1.588 2.75v11.922c0.002 1.168 0.635 2.189 1.574 2.742l0.016 0.008 10.322 5.961c0.455 0.267 1.004 0.425 1.59 0.425 0.584 0 1.131-0.158 1.602-0.433l-0.014 0.008 10.322-5.961c0.955-0.561 1.586-1.582 1.588-2.75v-11.922c-0.002-1.168-0.633-2.189-1.573-2.742zM27.383 21.961c0 0.389-0.211 0.73-0.526 0.914l-0.004 0.002-10.324 5.961c-0.152 0.088-0.334 0.142-0.53 0.142s-0.377-0.053-0.535-0.145l0.005 0.002-10.324-5.961c-0.319-0.186-0.529-0.527-0.529-0.916v-11.922c0-0.389 0.211-0.73 0.526-0.914l0.004-0.002 10.324-5.961c0.152-0.090 0.334-0.143 0.53-0.143s0.377 0.053 0.535 0.144l-0.006-0.002 10.324 5.961c0.319 0.185 0.529 0.527 0.529 0.916z"></path>
|
||||||
|
<path d="M22.094 19.451h-0.758c-0.188 0-0.363 0.049-0.515 0.135l0.006-0.004-4.574 2.512-5.282-3.049v-6.082l5.282-3.051 4.576 2.504c0.146 0.082 0.323 0.131 0.508 0.131h0.758c0.293 0 0.529-0.239 0.529-0.531v-0.716c0-0.2-0.11-0.373-0.271-0.463l-0.004-0.002-5.078-2.777c-0.293-0.164-0.645-0.26-1.015-0.26-0.39 0-0.756 0.106-1.070 0.289l0.010-0.006-5.281 3.049c-0.636 0.375-1.056 1.055-1.059 1.834v6.082c0 0.779 0.422 1.461 1.049 1.828l0.009 0.006 5.281 3.049c0.305 0.178 0.67 0.284 1.061 0.284 0.373 0 0.723-0.098 1.027-0.265l-0.012 0.006 5.080-2.787c0.166-0.091 0.276-0.265 0.276-0.465v-0.716c0-0.293-0.238-0.529-0.529-0.529z"></path>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
<ul class="items-stretch hidden space-x-3 md:flex">
|
||||||
|
<li class="flex">
|
||||||
|
<a rel="noopener noreferrer" href="/portfolio_layout2" class="flex items-center px-4 -mb-1 border-b-2 border-transparent">Portfolio Layout 2</a>
|
||||||
|
</li>
|
||||||
|
<li class="flex">
|
||||||
|
<a rel="noopener noreferrer" href="https://mambaui.com/components" class="flex items-center px-4 -mb-1 border-b-2 border-transparent">Components</a>
|
||||||
|
</li>
|
||||||
|
<li class="flex">
|
||||||
|
<a href="https://mambaui.com/" class="flex items-center px-4 -mb-1 border-b-2 border-transparent">MAMBA UI</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<button class="p-4 md:hidden">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-6 h-6 text-gray-100">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<section class="bg-gray-800 text-gray-100">
|
||||||
|
<div class="container flex flex-col justify-center p-6 mx-auto sm:py-12 lg:py-24 lg:flex-row lg:justify-between">
|
||||||
|
<div class="flex flex-col justify-center p-6 text-center rounded-sm lg:max-w-md xl:max-w-lg lg:text-left">
|
||||||
|
<h1 class="text-5xl font-bold leadi sm:text-6xl">
|
||||||
|
A Component Library from MAMBA UI for Tailwind
|
||||||
|
</h1>
|
||||||
|
<p class="mt-6 mb-8 text-lg sm:mb-12">With example Astro implementation, featuring open source copy/paste html and minimal js
|
||||||
|
</p>
|
||||||
|
<div class="flex flex-col space-y-4 sm:items-center sm:justify-center sm:flex-row sm:space-y-0 sm:space-x-4 lg:justify-start">
|
||||||
|
<a rel="noopener noreferrer" href="#" class="px-8 py-3 text-lg font-semibold rounded bg-violet-400 text-gray-900">Suspendisse</a>
|
||||||
|
<a rel="noopener noreferrer" href="#" class="px-8 py-3 text-lg font-semibold border rounded border-gray-100">Malesuada</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center justify-center p-6 mt-8 lg:mt-0 h-72 sm:h-80 lg:h-96 xl:h-112 2xl:h-128">
|
||||||
|
<img src="assets/svg/Business_SVG.svg" alt="" class="object-contain h-72 sm:h-80 lg:h-96 xl:h-112 2xl:h-128 bg-gray-500">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section class="bg-gray-800 text-gray-100">
|
||||||
|
<div class="container max-w-xl p-6 py-12 mx-auto space-y-24 lg:px-8 lg:max-w-7xl">
|
||||||
|
<div>
|
||||||
|
<h2 class="text-3xl font-bold tracki text-center sm:text-5xl text-gray-50">Aliquip definiebas ad est</h2>
|
||||||
|
<p class="max-w-3xl mx-auto mt-4 text-xl text-center text-gray-400">Quando cetero his ne, eum admodum sapientem ut.</p>
|
||||||
|
</div>
|
||||||
|
<div class="grid lg:gap-8 lg:grid-cols-2 lg:items-center">
|
||||||
|
<div>
|
||||||
|
<h3 class="text-2xl font-bold tracki sm:text-3xl text-gray-50">Ad vix debet docendi</h3>
|
||||||
|
<p class="mt-3 text-lg text-gray-400">Ne dicta praesent ocurreret has, diam theophrastus at pro. Eos etiam regione ut, persius eripuit quo id. Sit te euismod tacimates.</p>
|
||||||
|
<div class="mt-12 space-y-12">
|
||||||
|
<div class="flex">
|
||||||
|
<div class="flex-shrink-0">
|
||||||
|
<div class="flex items-center justify-center w-12 h-12 rounded-md bg-violet-400 text-gray-900">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-7 h-7">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ml-4">
|
||||||
|
<h4 class="text-lg font-medium leadi text-gray-50">Per ei quaeque sensibus</h4>
|
||||||
|
<p class="mt-2 text-gray-400">Ex usu illum iudico molestie. Pro ne agam facete mediocritatem, ridens labore facete mea ei. Pro id apeirian dignissim.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex">
|
||||||
|
<div class="flex-shrink-0">
|
||||||
|
<div class="flex items-center justify-center w-12 h-12 rounded-md bg-violet-400 text-gray-900">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-7 h-7">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ml-4">
|
||||||
|
<h4 class="text-lg font-medium leadi text-gray-50">Cu imperdiet posidonium sed</h4>
|
||||||
|
<p class="mt-2 text-gray-400">Amet utinam aliquando ut mea, malis admodum ocurreret nec et, elit tibique cu nec. Nec ex maluisset inciderint, ex quis.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex">
|
||||||
|
<div class="flex-shrink-0">
|
||||||
|
<div class="flex items-center justify-center w-12 h-12 rounded-md bg-violet-400 text-gray-900">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-7 h-7">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ml-4">
|
||||||
|
<h4 class="text-lg font-medium leadi text-gray-50">Nulla omittam sadipscing mel ne</h4>
|
||||||
|
<p class="mt-2 text-gray-400">At sed possim oporteat probatus, justo graece ne nec, minim commodo legimus ut vix. Ut eos iudico quando soleat, nam modus.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div aria-hidden="true" class="mt-10 lg:mt-0">
|
||||||
|
<img src="https://source.unsplash.com/random/360x480" alt="" class="mx-auto rounded-lg shadow-lg bg-gray-500">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="grid lg:gap-8 lg:grid-cols-2 lg:items-center">
|
||||||
|
<div class="lg:col-start-2">
|
||||||
|
<h3 class="text-2xl font-bold tracki sm:text-3xl text-gray-50">Eam nibh gloriatur ex</h3>
|
||||||
|
<p class="mt-3 text-lg text-gray-400">Per odio fabellas consulatu cu. Utroque detracto mel ea, quo te latine theophrastus. Ea his tale nibh dissentias, mei exerci tamquam euripidis cu.</p>
|
||||||
|
<div class="mt-12 space-y-12">
|
||||||
|
<div class="flex">
|
||||||
|
<div class="flex-shrink-0">
|
||||||
|
<div class="flex items-center justify-center w-12 h-12 rounded-md bg-violet-400 text-gray-900">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-7 h-7">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ml-4">
|
||||||
|
<h4 class="text-lg font-medium leadi text-gray-50">Cibo augue offendit has ad</h4>
|
||||||
|
<p class="mt-2 text-gray-400">An per velit appellantur, ut utinam minimum nominavi sit, odio nostro habemus ne nec. Ne sonet regione contentiones est.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex">
|
||||||
|
<div class="flex-shrink-0">
|
||||||
|
<div class="flex items-center justify-center w-12 h-12 rounded-md bg-violet-400 text-gray-900">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-7 h-7">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ml-4">
|
||||||
|
<h4 class="text-lg font-medium leadi text-gray-50">At eum ferri luptatum lobortis</h4>
|
||||||
|
<p class="mt-2 text-gray-400">Te per quidam maiorum ocurreret, etiam delicatissimi usu ad. Ne has quod periculis. Te sit primis iisque efficiantur.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex">
|
||||||
|
<div class="flex-shrink-0">
|
||||||
|
<div class="flex items-center justify-center w-12 h-12 rounded-md bg-violet-400 text-gray-900">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-7 h-7">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ml-4">
|
||||||
|
<h4 class="text-lg font-medium leadi text-gray-50">Dicunt verterem evertitur eu sea</h4>
|
||||||
|
<p class="mt-2 text-gray-400">Audire principes rationibus eam an, autem nominavi luptatum per te. Sumo fabulas vim eu, sonet saperet eleifend ut vix.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="mt-10 lg:mt-0 lg:col-start-1 lg:row-start-1">
|
||||||
|
<img src="https://source.unsplash.com/random/361x481" alt="" class="mx-auto rounded-lg shadow-lg bg-gray-500">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<div class="w-full bg-gray-600" style="background-image: url('https://source.unsplash.com/random/1280x720'); background-position: center center; background-blend-mode: multiply; background-repeat: no-repeat; background-size: cover;">
|
||||||
|
<div class="container flex flex-col flex-wrap content-center justify-center p-4 py-20 mx-auto md:py-28">
|
||||||
|
<h1 class="text-5xl antialiased font-bold leadi text-center md:text-6xl text-gray-100">Get Our Updates</h1>
|
||||||
|
<p class="pt-2 pb-8 text-xl antialiased text-center text-gray-100">Find out about events and other news</p>
|
||||||
|
<div class="flex flex-row">
|
||||||
|
<input type="text" placeholder="example@email.com" class="w-3/5 p-3 rounded-l-lg sm:w-2/3">
|
||||||
|
<button type="button" class="w-2/5 p-3 font-semibold rounded-r-lg sm:w-1/3 bg-violet-400 text-gray-900">Subscribe</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<section class="bg-gray-800 text-gray-100">
|
||||||
|
<div class="container flex flex-col p-6 mx-auto">
|
||||||
|
<h2 class="py-4 text-3xl font-bold text-center">Temporibus elit</h2>
|
||||||
|
<div class="divide-y divide-gray-700">
|
||||||
|
<div class="grid justify-center grid-cols-4 p-8 mx-auto space-y-8 lg:space-y-0">
|
||||||
|
<div class="flex items-center justify-center lg:col-span-1 col-span-full">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor" class="w-16 h-16">
|
||||||
|
<path d="M472,16H168a24,24,0,0,0-24,24V344a24,24,0,0,0,24,24H472a24,24,0,0,0,24-24V40A24,24,0,0,0,472,16Zm-8,320H176V48H464Z"></path>
|
||||||
|
<path d="M112,400V80H80V408a24,24,0,0,0,24,24H432V400Z"></path>
|
||||||
|
<path d="M48,464V144H16V472a24,24,0,0,0,24,24H368V464Z"></path>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-col justify-center max-w-3xl text-center col-span-full lg:col-span-3 lg:text-left">
|
||||||
|
<span class="text-xs tracki uppercase text-violet-400">Step 1 - Nihil</span>
|
||||||
|
<span class="text-xl font-bold md:text-2xl">Veritatis dolores</span>
|
||||||
|
<span class="mt-4 text-gray-300">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam facilis, voluptates error alias dolorem praesentium sit soluta iure incidunt labore explicabo eaque, quia architecto veritatis dolores, enim cons equatur nihil ipsum.</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="grid justify-center grid-cols-4 p-8 mx-auto space-y-8 lg:space-y-0">
|
||||||
|
<div class="flex items-center justify-center lg:col-span-1 col-span-full">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor" class="w-16 h-16">
|
||||||
|
<path d="M285.177,179l15.513-3.914-7.827-31.028-15.514,3.913a176.937,176.937,0,0,0-129.3,133.557l-3.407,15.633,31.266,6.814,3.406-15.634A145.559,145.559,0,0,1,285.177,179Z"></path>
|
||||||
|
<path d="M363.624,147.871C343.733,72.077,274.643,16,192.7,16,95.266,16,16,95.266,16,192.7c0,82.617,57,152.163,133.735,171.4A176.769,176.769,0,0,0,320.7,496c97.431,0,176.7-79.266,176.7-176.695C497.392,238.071,441.64,167.336,363.624,147.871ZM48,192.7C48,112.91,112.91,48,192.7,48s144.7,64.91,144.7,144.7-64.911,144.7-144.7,144.7S48,272.481,48,192.7ZM320.7,464c-60.931,0-115.21-38.854-135.843-94.792,2.6.115,5.214.184,7.843.184a176.862,176.862,0,0,0,32.7-3.047l97.625,97.625C322.247,463.983,321.473,464,320.7,464Zm41.528-6.083L260.26,355.954a176.9,176.9,0,0,0,43.662-26.072L408.37,434.33A144.385,144.385,0,0,1,362.223,457.917Zm69.3-45.692L326.851,307.557a177.082,177.082,0,0,0,27.911-44.5L457.67,365.964A144.661,144.661,0,0,1,431.519,412.225Zm33.594-84.073-99.42-99.42a176.785,176.785,0,0,0,3.7-36.036c0-3.285-.1-6.547-.276-9.787a145.054,145.054,0,0,1,96.276,136.4C465.392,322.276,465.291,325.224,465.113,328.152Z"></path>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-col justify-center max-w-3xl text-center col-span-full lg:col-span-3 lg:text-left">
|
||||||
|
<span class="text-xs tracki uppercase text-violet-400">Step 2 - Explicabo</span>
|
||||||
|
<span class="text-xl font-bold md:text-2xl">Iure incidunt labore</span>
|
||||||
|
<span class="mt-4 text-gray-300">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam facilis, voluptates error alias dolorem praesentium sit soluta iure incidunt labore explicabo eaque, quia architecto veritatis dolores, enim cons equatur nihil ipsum.</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="grid justify-center grid-cols-4 p-8 mx-auto space-y-8 lg:space-y-0">
|
||||||
|
<div class="flex items-center justify-center lg:col-span-1 col-span-full">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor" class="w-16 h-16">
|
||||||
|
<path d="M412.284,294.37l-12.5,15.642c-8.354,10.454-50.027,64.208-50.027,95.883,0,36.451,28.049,66.105,62.526,66.105s62.527-29.654,62.527-66.105c0-31.675-41.673-85.429-50.028-95.883Zm0,145.63c-16.832,0-30.526-15.3-30.526-34.105,0-11.662,15.485-37.883,30.531-59.2,15.043,21.3,30.522,47.509,30.522,59.2C442.811,424.7,429.116,440,412.284,440Z"></path>
|
||||||
|
<path d="M122.669,51.492,96.133,124.4,30.092,97.205,17.908,126.8l67.271,27.7L26.9,314.606a48.056,48.056,0,0,0,28.689,61.523l184.719,67.232a48,48,0,0,0,61.523-28.688L397.6,151.56Zm149.1,352.236a16,16,0,0,1-20.508,9.563L66.537,346.059a16,16,0,0,1-9.563-20.507L73.553,280H316.8ZM85.2,248l29.594-81.311,36.333,14.961a32.644,32.644,0,1,0,11.236-29.98l-36.615-15.077,16.046-44.085,214.79,78.177L328,249.219V248Z"></path>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-col justify-center max-w-3xl text-center col-span-full lg:col-span-3 lg:text-left">
|
||||||
|
<span class="text-xs tracki uppercase text-violet-400">Step 3 - Facilis</span>
|
||||||
|
<span class="text-xl font-bold md:text-2xl">Dolorem praesentium</span>
|
||||||
|
<span class="mt-4 bg-gray-800 text-gray-300">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam facilis, voluptates error alias dolorem praesentium sit soluta iure incidunt labore explicabo eaque, quia architecto veritatis dolores, enim cons equatur nihil ipsum.</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="grid justify-center grid-cols-4 p-8 mx-auto space-y-8 lg:space-y-0">
|
||||||
|
<div class="flex items-center justify-center lg:col-span-1 col-span-full">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor" class="w-16 h-16">
|
||||||
|
<polygon points="388.632 393.82 495.823 255.94 388.684 118.178 363.424 137.822 455.288 255.944 363.368 374.18 388.632 393.82"></polygon>
|
||||||
|
<polygon points="148.579 374.181 56.712 255.999 148.629 137.823 123.371 118.177 16.177 255.993 123.314 393.819 148.579 374.181"></polygon>
|
||||||
|
<polygon points="330.529 16 297.559 16 178.441 496 211.412 496 330.529 16"></polygon>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-col justify-center max-w-3xl text-center col-span-full lg:col-span-3 lg:text-left">
|
||||||
|
<span class="text-xs tracki uppercase text-violet-400">Step 4 - Aperiam</span>
|
||||||
|
<span class="text-xl font-bold md:text-2xl">Explicabo eaque</span>
|
||||||
|
<span class="mt-4 text-gray-300">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam facilis, voluptates error alias dolorem praesentium sit soluta iure incidunt labore explicabo eaque, quia architecto veritatis dolores, enim cons equatur nihil ipsum.</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section class="py-6 bg-gray-800 text-gray-100">
|
||||||
|
<div class="container p-4 mx-auto space-y-16 sm:p-10">
|
||||||
|
<div class="space-y-4">
|
||||||
|
<h3 class="text-2xl font-bold leadi sm:text-5xl">Meet our team</h3>
|
||||||
|
<p class="max-w-2xl text-gray-400">At a assumenda quas cum earum ut itaque commodi saepe rem aspernatur quam natus quis nihil quod, hic explicabo doloribus magnam neque, exercitationem eius sunt!</p>
|
||||||
|
</div>
|
||||||
|
<div class="grid w-full grid-cols-1 gap-6 md:grid-cols-2">
|
||||||
|
<div class="flex space-x-6">
|
||||||
|
<img alt="" class="object-cover w-auto h-56 mb-4 bg-center rounded-sm bg-gray-500" src="https://source.unsplash.com/240x320/?portrait?0">
|
||||||
|
<div class="flex flex-col">
|
||||||
|
<h4 class="text-xl font-semibold">Leroy Jenkins</h4>
|
||||||
|
<p class="text-sm text-gray-400">Web developer</p>
|
||||||
|
<div class="flex mt-2 space-x-2">
|
||||||
|
<a rel="noopener noreferrer" href="#" class="text-gray-400">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" fill="currentColor" class="w-4 h-4">
|
||||||
|
<path d="M 50.0625 10.4375 C 48.214844 11.257813 46.234375 11.808594 44.152344 12.058594 C 46.277344 10.785156 47.910156 8.769531 48.675781 6.371094 C 46.691406 7.546875 44.484375 8.402344 42.144531 8.863281 C 40.269531 6.863281 37.597656 5.617188 34.640625 5.617188 C 28.960938 5.617188 24.355469 10.21875 24.355469 15.898438 C 24.355469 16.703125 24.449219 17.488281 24.625 18.242188 C 16.078125 17.8125 8.503906 13.71875 3.429688 7.496094 C 2.542969 9.019531 2.039063 10.785156 2.039063 12.667969 C 2.039063 16.234375 3.851563 19.382813 6.613281 21.230469 C 4.925781 21.175781 3.339844 20.710938 1.953125 19.941406 C 1.953125 19.984375 1.953125 20.027344 1.953125 20.070313 C 1.953125 25.054688 5.5 29.207031 10.199219 30.15625 C 9.339844 30.390625 8.429688 30.515625 7.492188 30.515625 C 6.828125 30.515625 6.183594 30.453125 5.554688 30.328125 C 6.867188 34.410156 10.664063 37.390625 15.160156 37.472656 C 11.644531 40.230469 7.210938 41.871094 2.390625 41.871094 C 1.558594 41.871094 0.742188 41.824219 -0.0585938 41.726563 C 4.488281 44.648438 9.894531 46.347656 15.703125 46.347656 C 34.617188 46.347656 44.960938 30.679688 44.960938 17.09375 C 44.960938 16.648438 44.949219 16.199219 44.933594 15.761719 C 46.941406 14.3125 48.683594 12.5 50.0625 10.4375 Z"></path>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
<a rel="noopener noreferrer" href="#" class="text-gray-400">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 32 32" class="w-4 h-4">
|
||||||
|
<path d="M8.268 28h-5.805v-18.694h5.805zM5.362 6.756c-1.856 0-3.362-1.538-3.362-3.394s1.505-3.362 3.362-3.362 3.362 1.505 3.362 3.362c0 1.856-1.506 3.394-3.362 3.394zM29.994 28h-5.792v-9.1c0-2.169-0.044-4.95-3.018-4.95-3.018 0-3.481 2.356-3.481 4.794v9.256h-5.799v-18.694h5.567v2.55h0.081c0.775-1.469 2.668-3.019 5.492-3.019 5.875 0 6.955 3.869 6.955 8.894v10.269z"></path>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
<a rel="noopener noreferrer" href="#" class="text-gray-400">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 32 32" class="w-4 h-4">
|
||||||
|
<path d="M16 0.396c-8.839 0-16 7.167-16 16 0 7.073 4.584 13.068 10.937 15.183 0.803 0.151 1.093-0.344 1.093-0.772 0-0.38-0.009-1.385-0.015-2.719-4.453 0.964-5.391-2.151-5.391-2.151-0.729-1.844-1.781-2.339-1.781-2.339-1.448-0.989 0.115-0.968 0.115-0.968 1.604 0.109 2.448 1.645 2.448 1.645 1.427 2.448 3.744 1.74 4.661 1.328 0.14-1.031 0.557-1.74 1.011-2.135-3.552-0.401-7.287-1.776-7.287-7.907 0-1.751 0.62-3.177 1.645-4.297-0.177-0.401-0.719-2.031 0.141-4.235 0 0 1.339-0.427 4.4 1.641 1.281-0.355 2.641-0.532 4-0.541 1.36 0.009 2.719 0.187 4 0.541 3.043-2.068 4.381-1.641 4.381-1.641 0.859 2.204 0.317 3.833 0.161 4.235 1.015 1.12 1.635 2.547 1.635 4.297 0 6.145-3.74 7.5-7.296 7.891 0.556 0.479 1.077 1.464 1.077 2.959 0 2.14-0.020 3.864-0.020 4.385 0 0.416 0.28 0.916 1.104 0.755 6.4-2.093 10.979-8.093 10.979-15.156 0-8.833-7.161-16-16-16z"></path>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex space-x-6">
|
||||||
|
<img alt="" class="object-cover w-auto h-56 mb-4 bg-center rounded-sm bg-gray-500" src="https://source.unsplash.com/240x320/?portrait?1">
|
||||||
|
<div class="flex flex-col">
|
||||||
|
<h4 class="text-xl font-semibold">Leroy Jenkins</h4>
|
||||||
|
<p class="text-sm text-gray-400">Web developer</p>
|
||||||
|
<div class="flex mt-2 space-x-2">
|
||||||
|
<a rel="noopener noreferrer" href="#" class="text-gray-400">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" fill="currentColor" class="w-4 h-4">
|
||||||
|
<path d="M 50.0625 10.4375 C 48.214844 11.257813 46.234375 11.808594 44.152344 12.058594 C 46.277344 10.785156 47.910156 8.769531 48.675781 6.371094 C 46.691406 7.546875 44.484375 8.402344 42.144531 8.863281 C 40.269531 6.863281 37.597656 5.617188 34.640625 5.617188 C 28.960938 5.617188 24.355469 10.21875 24.355469 15.898438 C 24.355469 16.703125 24.449219 17.488281 24.625 18.242188 C 16.078125 17.8125 8.503906 13.71875 3.429688 7.496094 C 2.542969 9.019531 2.039063 10.785156 2.039063 12.667969 C 2.039063 16.234375 3.851563 19.382813 6.613281 21.230469 C 4.925781 21.175781 3.339844 20.710938 1.953125 19.941406 C 1.953125 19.984375 1.953125 20.027344 1.953125 20.070313 C 1.953125 25.054688 5.5 29.207031 10.199219 30.15625 C 9.339844 30.390625 8.429688 30.515625 7.492188 30.515625 C 6.828125 30.515625 6.183594 30.453125 5.554688 30.328125 C 6.867188 34.410156 10.664063 37.390625 15.160156 37.472656 C 11.644531 40.230469 7.210938 41.871094 2.390625 41.871094 C 1.558594 41.871094 0.742188 41.824219 -0.0585938 41.726563 C 4.488281 44.648438 9.894531 46.347656 15.703125 46.347656 C 34.617188 46.347656 44.960938 30.679688 44.960938 17.09375 C 44.960938 16.648438 44.949219 16.199219 44.933594 15.761719 C 46.941406 14.3125 48.683594 12.5 50.0625 10.4375 Z"></path>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
<a rel="noopener noreferrer" href="#" class="text-gray-400">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 32 32" class="w-4 h-4">
|
||||||
|
<path d="M8.268 28h-5.805v-18.694h5.805zM5.362 6.756c-1.856 0-3.362-1.538-3.362-3.394s1.505-3.362 3.362-3.362 3.362 1.505 3.362 3.362c0 1.856-1.506 3.394-3.362 3.394zM29.994 28h-5.792v-9.1c0-2.169-0.044-4.95-3.018-4.95-3.018 0-3.481 2.356-3.481 4.794v9.256h-5.799v-18.694h5.567v2.55h0.081c0.775-1.469 2.668-3.019 5.492-3.019 5.875 0 6.955 3.869 6.955 8.894v10.269z"></path>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
<a rel="noopener noreferrer" href="#" class="text-gray-400">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 32 32" class="w-4 h-4">
|
||||||
|
<path d="M16 0.396c-8.839 0-16 7.167-16 16 0 7.073 4.584 13.068 10.937 15.183 0.803 0.151 1.093-0.344 1.093-0.772 0-0.38-0.009-1.385-0.015-2.719-4.453 0.964-5.391-2.151-5.391-2.151-0.729-1.844-1.781-2.339-1.781-2.339-1.448-0.989 0.115-0.968 0.115-0.968 1.604 0.109 2.448 1.645 2.448 1.645 1.427 2.448 3.744 1.74 4.661 1.328 0.14-1.031 0.557-1.74 1.011-2.135-3.552-0.401-7.287-1.776-7.287-7.907 0-1.751 0.62-3.177 1.645-4.297-0.177-0.401-0.719-2.031 0.141-4.235 0 0 1.339-0.427 4.4 1.641 1.281-0.355 2.641-0.532 4-0.541 1.36 0.009 2.719 0.187 4 0.541 3.043-2.068 4.381-1.641 4.381-1.641 0.859 2.204 0.317 3.833 0.161 4.235 1.015 1.12 1.635 2.547 1.635 4.297 0 6.145-3.74 7.5-7.296 7.891 0.556 0.479 1.077 1.464 1.077 2.959 0 2.14-0.020 3.864-0.020 4.385 0 0.416 0.28 0.916 1.104 0.755 6.4-2.093 10.979-8.093 10.979-15.156 0-8.833-7.161-16-16-16z"></path>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex space-x-6">
|
||||||
|
<img alt="" class="object-cover w-auto h-56 mb-4 bg-center rounded-sm bg-gray-500" src="https://source.unsplash.com/240x320/?portrait?2">
|
||||||
|
<div class="flex flex-col">
|
||||||
|
<h4 class="text-xl font-semibold">Leroy Jenkins</h4>
|
||||||
|
<p class="text-sm text-gray-400">Web developer</p>
|
||||||
|
<div class="flex mt-2 space-x-2">
|
||||||
|
<a rel="noopener noreferrer" href="#" class="text-gray-400">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" fill="currentColor" class="w-4 h-4">
|
||||||
|
<path d="M 50.0625 10.4375 C 48.214844 11.257813 46.234375 11.808594 44.152344 12.058594 C 46.277344 10.785156 47.910156 8.769531 48.675781 6.371094 C 46.691406 7.546875 44.484375 8.402344 42.144531 8.863281 C 40.269531 6.863281 37.597656 5.617188 34.640625 5.617188 C 28.960938 5.617188 24.355469 10.21875 24.355469 15.898438 C 24.355469 16.703125 24.449219 17.488281 24.625 18.242188 C 16.078125 17.8125 8.503906 13.71875 3.429688 7.496094 C 2.542969 9.019531 2.039063 10.785156 2.039063 12.667969 C 2.039063 16.234375 3.851563 19.382813 6.613281 21.230469 C 4.925781 21.175781 3.339844 20.710938 1.953125 19.941406 C 1.953125 19.984375 1.953125 20.027344 1.953125 20.070313 C 1.953125 25.054688 5.5 29.207031 10.199219 30.15625 C 9.339844 30.390625 8.429688 30.515625 7.492188 30.515625 C 6.828125 30.515625 6.183594 30.453125 5.554688 30.328125 C 6.867188 34.410156 10.664063 37.390625 15.160156 37.472656 C 11.644531 40.230469 7.210938 41.871094 2.390625 41.871094 C 1.558594 41.871094 0.742188 41.824219 -0.0585938 41.726563 C 4.488281 44.648438 9.894531 46.347656 15.703125 46.347656 C 34.617188 46.347656 44.960938 30.679688 44.960938 17.09375 C 44.960938 16.648438 44.949219 16.199219 44.933594 15.761719 C 46.941406 14.3125 48.683594 12.5 50.0625 10.4375 Z"></path>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
<a rel="noopener noreferrer" href="#" class="text-gray-400">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 32 32" class="w-4 h-4">
|
||||||
|
<path d="M8.268 28h-5.805v-18.694h5.805zM5.362 6.756c-1.856 0-3.362-1.538-3.362-3.394s1.505-3.362 3.362-3.362 3.362 1.505 3.362 3.362c0 1.856-1.506 3.394-3.362 3.394zM29.994 28h-5.792v-9.1c0-2.169-0.044-4.95-3.018-4.95-3.018 0-3.481 2.356-3.481 4.794v9.256h-5.799v-18.694h5.567v2.55h0.081c0.775-1.469 2.668-3.019 5.492-3.019 5.875 0 6.955 3.869 6.955 8.894v10.269z"></path>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
<a rel="noopener noreferrer" href="#" class="text-gray-400">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 32 32" class="w-4 h-4">
|
||||||
|
<path d="M16 0.396c-8.839 0-16 7.167-16 16 0 7.073 4.584 13.068 10.937 15.183 0.803 0.151 1.093-0.344 1.093-0.772 0-0.38-0.009-1.385-0.015-2.719-4.453 0.964-5.391-2.151-5.391-2.151-0.729-1.844-1.781-2.339-1.781-2.339-1.448-0.989 0.115-0.968 0.115-0.968 1.604 0.109 2.448 1.645 2.448 1.645 1.427 2.448 3.744 1.74 4.661 1.328 0.14-1.031 0.557-1.74 1.011-2.135-3.552-0.401-7.287-1.776-7.287-7.907 0-1.751 0.62-3.177 1.645-4.297-0.177-0.401-0.719-2.031 0.141-4.235 0 0 1.339-0.427 4.4 1.641 1.281-0.355 2.641-0.532 4-0.541 1.36 0.009 2.719 0.187 4 0.541 3.043-2.068 4.381-1.641 4.381-1.641 0.859 2.204 0.317 3.833 0.161 4.235 1.015 1.12 1.635 2.547 1.635 4.297 0 6.145-3.74 7.5-7.296 7.891 0.556 0.479 1.077 1.464 1.077 2.959 0 2.14-0.020 3.864-0.020 4.385 0 0.416 0.28 0.916 1.104 0.755 6.4-2.093 10.979-8.093 10.979-15.156 0-8.833-7.161-16-16-16z"></path>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex space-x-6">
|
||||||
|
<img alt="" class="object-cover w-auto h-56 mb-4 bg-center rounded-sm bg-gray-500" src="https://source.unsplash.com/240x320/?portrait?3">
|
||||||
|
<div class="flex flex-col">
|
||||||
|
<h4 class="text-xl font-semibold">Leroy Jenkins</h4>
|
||||||
|
<p class="text-sm text-gray-400">Web developer</p>
|
||||||
|
<div class="flex mt-2 space-x-2">
|
||||||
|
<a rel="noopener noreferrer" href="#" class="text-gray-400">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" fill="currentColor" class="w-4 h-4">
|
||||||
|
<path d="M 50.0625 10.4375 C 48.214844 11.257813 46.234375 11.808594 44.152344 12.058594 C 46.277344 10.785156 47.910156 8.769531 48.675781 6.371094 C 46.691406 7.546875 44.484375 8.402344 42.144531 8.863281 C 40.269531 6.863281 37.597656 5.617188 34.640625 5.617188 C 28.960938 5.617188 24.355469 10.21875 24.355469 15.898438 C 24.355469 16.703125 24.449219 17.488281 24.625 18.242188 C 16.078125 17.8125 8.503906 13.71875 3.429688 7.496094 C 2.542969 9.019531 2.039063 10.785156 2.039063 12.667969 C 2.039063 16.234375 3.851563 19.382813 6.613281 21.230469 C 4.925781 21.175781 3.339844 20.710938 1.953125 19.941406 C 1.953125 19.984375 1.953125 20.027344 1.953125 20.070313 C 1.953125 25.054688 5.5 29.207031 10.199219 30.15625 C 9.339844 30.390625 8.429688 30.515625 7.492188 30.515625 C 6.828125 30.515625 6.183594 30.453125 5.554688 30.328125 C 6.867188 34.410156 10.664063 37.390625 15.160156 37.472656 C 11.644531 40.230469 7.210938 41.871094 2.390625 41.871094 C 1.558594 41.871094 0.742188 41.824219 -0.0585938 41.726563 C 4.488281 44.648438 9.894531 46.347656 15.703125 46.347656 C 34.617188 46.347656 44.960938 30.679688 44.960938 17.09375 C 44.960938 16.648438 44.949219 16.199219 44.933594 15.761719 C 46.941406 14.3125 48.683594 12.5 50.0625 10.4375 Z"></path>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
<a rel="noopener noreferrer" href="#" class="text-gray-400">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 32 32" class="w-4 h-4">
|
||||||
|
<path d="M8.268 28h-5.805v-18.694h5.805zM5.362 6.756c-1.856 0-3.362-1.538-3.362-3.394s1.505-3.362 3.362-3.362 3.362 1.505 3.362 3.362c0 1.856-1.506 3.394-3.362 3.394zM29.994 28h-5.792v-9.1c0-2.169-0.044-4.95-3.018-4.95-3.018 0-3.481 2.356-3.481 4.794v9.256h-5.799v-18.694h5.567v2.55h0.081c0.775-1.469 2.668-3.019 5.492-3.019 5.875 0 6.955 3.869 6.955 8.894v10.269z"></path>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
<a rel="noopener noreferrer" href="#" class="text-gray-400">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 32 32" class="w-4 h-4">
|
||||||
|
<path d="M16 0.396c-8.839 0-16 7.167-16 16 0 7.073 4.584 13.068 10.937 15.183 0.803 0.151 1.093-0.344 1.093-0.772 0-0.38-0.009-1.385-0.015-2.719-4.453 0.964-5.391-2.151-5.391-2.151-0.729-1.844-1.781-2.339-1.781-2.339-1.448-0.989 0.115-0.968 0.115-0.968 1.604 0.109 2.448 1.645 2.448 1.645 1.427 2.448 3.744 1.74 4.661 1.328 0.14-1.031 0.557-1.74 1.011-2.135-3.552-0.401-7.287-1.776-7.287-7.907 0-1.751 0.62-3.177 1.645-4.297-0.177-0.401-0.719-2.031 0.141-4.235 0 0 1.339-0.427 4.4 1.641 1.281-0.355 2.641-0.532 4-0.541 1.36 0.009 2.719 0.187 4 0.541 3.043-2.068 4.381-1.641 4.381-1.641 0.859 2.204 0.317 3.833 0.161 4.235 1.015 1.12 1.635 2.547 1.635 4.297 0 6.145-3.74 7.5-7.296 7.891 0.556 0.479 1.077 1.464 1.077 2.959 0 2.14-0.020 3.864-0.020 4.385 0 0.416 0.28 0.916 1.104 0.755 6.4-2.093 10.979-8.093 10.979-15.156 0-8.833-7.161-16-16-16z"></path>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex space-x-6">
|
||||||
|
<img alt="" class="object-cover w-auto h-56 mb-4 bg-center rounded-sm bg-gray-500" src="https://source.unsplash.com/240x320/?portrait?4">
|
||||||
|
<div class="flex flex-col">
|
||||||
|
<h4 class="text-xl font-semibold">Leroy Jenkins</h4>
|
||||||
|
<p class="text-sm text-gray-400">Web developer</p>
|
||||||
|
<div class="flex mt-2 space-x-2">
|
||||||
|
<a rel="noopener noreferrer" href="#" class="text-gray-400">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" fill="currentColor" class="w-4 h-4">
|
||||||
|
<path d="M 50.0625 10.4375 C 48.214844 11.257813 46.234375 11.808594 44.152344 12.058594 C 46.277344 10.785156 47.910156 8.769531 48.675781 6.371094 C 46.691406 7.546875 44.484375 8.402344 42.144531 8.863281 C 40.269531 6.863281 37.597656 5.617188 34.640625 5.617188 C 28.960938 5.617188 24.355469 10.21875 24.355469 15.898438 C 24.355469 16.703125 24.449219 17.488281 24.625 18.242188 C 16.078125 17.8125 8.503906 13.71875 3.429688 7.496094 C 2.542969 9.019531 2.039063 10.785156 2.039063 12.667969 C 2.039063 16.234375 3.851563 19.382813 6.613281 21.230469 C 4.925781 21.175781 3.339844 20.710938 1.953125 19.941406 C 1.953125 19.984375 1.953125 20.027344 1.953125 20.070313 C 1.953125 25.054688 5.5 29.207031 10.199219 30.15625 C 9.339844 30.390625 8.429688 30.515625 7.492188 30.515625 C 6.828125 30.515625 6.183594 30.453125 5.554688 30.328125 C 6.867188 34.410156 10.664063 37.390625 15.160156 37.472656 C 11.644531 40.230469 7.210938 41.871094 2.390625 41.871094 C 1.558594 41.871094 0.742188 41.824219 -0.0585938 41.726563 C 4.488281 44.648438 9.894531 46.347656 15.703125 46.347656 C 34.617188 46.347656 44.960938 30.679688 44.960938 17.09375 C 44.960938 16.648438 44.949219 16.199219 44.933594 15.761719 C 46.941406 14.3125 48.683594 12.5 50.0625 10.4375 Z"></path>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
<a rel="noopener noreferrer" href="#" class="text-gray-400">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 32 32" class="w-4 h-4">
|
||||||
|
<path d="M8.268 28h-5.805v-18.694h5.805zM5.362 6.756c-1.856 0-3.362-1.538-3.362-3.394s1.505-3.362 3.362-3.362 3.362 1.505 3.362 3.362c0 1.856-1.506 3.394-3.362 3.394zM29.994 28h-5.792v-9.1c0-2.169-0.044-4.95-3.018-4.95-3.018 0-3.481 2.356-3.481 4.794v9.256h-5.799v-18.694h5.567v2.55h0.081c0.775-1.469 2.668-3.019 5.492-3.019 5.875 0 6.955 3.869 6.955 8.894v10.269z"></path>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
<a rel="noopener noreferrer" href="#" class="text-gray-400">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 32 32" class="w-4 h-4">
|
||||||
|
<path d="M16 0.396c-8.839 0-16 7.167-16 16 0 7.073 4.584 13.068 10.937 15.183 0.803 0.151 1.093-0.344 1.093-0.772 0-0.38-0.009-1.385-0.015-2.719-4.453 0.964-5.391-2.151-5.391-2.151-0.729-1.844-1.781-2.339-1.781-2.339-1.448-0.989 0.115-0.968 0.115-0.968 1.604 0.109 2.448 1.645 2.448 1.645 1.427 2.448 3.744 1.74 4.661 1.328 0.14-1.031 0.557-1.74 1.011-2.135-3.552-0.401-7.287-1.776-7.287-7.907 0-1.751 0.62-3.177 1.645-4.297-0.177-0.401-0.719-2.031 0.141-4.235 0 0 1.339-0.427 4.4 1.641 1.281-0.355 2.641-0.532 4-0.541 1.36 0.009 2.719 0.187 4 0.541 3.043-2.068 4.381-1.641 4.381-1.641 0.859 2.204 0.317 3.833 0.161 4.235 1.015 1.12 1.635 2.547 1.635 4.297 0 6.145-3.74 7.5-7.296 7.891 0.556 0.479 1.077 1.464 1.077 2.959 0 2.14-0.020 3.864-0.020 4.385 0 0.416 0.28 0.916 1.104 0.755 6.4-2.093 10.979-8.093 10.979-15.156 0-8.833-7.161-16-16-16z"></path>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex space-x-6">
|
||||||
|
<img alt="" class="object-cover w-auto h-56 mb-4 bg-center rounded-sm bg-gray-500" src="https://source.unsplash.com/240x320/?portrait?5">
|
||||||
|
<div class="flex flex-col">
|
||||||
|
<h4 class="text-xl font-semibold">Leroy Jenkins</h4>
|
||||||
|
<p class="text-sm text-gray-400">Web developer</p>
|
||||||
|
<div class="flex mt-2 space-x-2">
|
||||||
|
<a rel="noopener noreferrer" href="#" class="text-gray-400">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" fill="currentColor" class="w-4 h-4">
|
||||||
|
<path d="M 50.0625 10.4375 C 48.214844 11.257813 46.234375 11.808594 44.152344 12.058594 C 46.277344 10.785156 47.910156 8.769531 48.675781 6.371094 C 46.691406 7.546875 44.484375 8.402344 42.144531 8.863281 C 40.269531 6.863281 37.597656 5.617188 34.640625 5.617188 C 28.960938 5.617188 24.355469 10.21875 24.355469 15.898438 C 24.355469 16.703125 24.449219 17.488281 24.625 18.242188 C 16.078125 17.8125 8.503906 13.71875 3.429688 7.496094 C 2.542969 9.019531 2.039063 10.785156 2.039063 12.667969 C 2.039063 16.234375 3.851563 19.382813 6.613281 21.230469 C 4.925781 21.175781 3.339844 20.710938 1.953125 19.941406 C 1.953125 19.984375 1.953125 20.027344 1.953125 20.070313 C 1.953125 25.054688 5.5 29.207031 10.199219 30.15625 C 9.339844 30.390625 8.429688 30.515625 7.492188 30.515625 C 6.828125 30.515625 6.183594 30.453125 5.554688 30.328125 C 6.867188 34.410156 10.664063 37.390625 15.160156 37.472656 C 11.644531 40.230469 7.210938 41.871094 2.390625 41.871094 C 1.558594 41.871094 0.742188 41.824219 -0.0585938 41.726563 C 4.488281 44.648438 9.894531 46.347656 15.703125 46.347656 C 34.617188 46.347656 44.960938 30.679688 44.960938 17.09375 C 44.960938 16.648438 44.949219 16.199219 44.933594 15.761719 C 46.941406 14.3125 48.683594 12.5 50.0625 10.4375 Z"></path>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
<a rel="noopener noreferrer" href="#" class="text-gray-400">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 32 32" class="w-4 h-4">
|
||||||
|
<path d="M8.268 28h-5.805v-18.694h5.805zM5.362 6.756c-1.856 0-3.362-1.538-3.362-3.394s1.505-3.362 3.362-3.362 3.362 1.505 3.362 3.362c0 1.856-1.506 3.394-3.362 3.394zM29.994 28h-5.792v-9.1c0-2.169-0.044-4.95-3.018-4.95-3.018 0-3.481 2.356-3.481 4.794v9.256h-5.799v-18.694h5.567v2.55h0.081c0.775-1.469 2.668-3.019 5.492-3.019 5.875 0 6.955 3.869 6.955 8.894v10.269z"></path>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
<a rel="noopener noreferrer" href="#" class="text-gray-400">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 32 32" class="w-4 h-4">
|
||||||
|
<path d="M16 0.396c-8.839 0-16 7.167-16 16 0 7.073 4.584 13.068 10.937 15.183 0.803 0.151 1.093-0.344 1.093-0.772 0-0.38-0.009-1.385-0.015-2.719-4.453 0.964-5.391-2.151-5.391-2.151-0.729-1.844-1.781-2.339-1.781-2.339-1.448-0.989 0.115-0.968 0.115-0.968 1.604 0.109 2.448 1.645 2.448 1.645 1.427 2.448 3.744 1.74 4.661 1.328 0.14-1.031 0.557-1.74 1.011-2.135-3.552-0.401-7.287-1.776-7.287-7.907 0-1.751 0.62-3.177 1.645-4.297-0.177-0.401-0.719-2.031 0.141-4.235 0 0 1.339-0.427 4.4 1.641 1.281-0.355 2.641-0.532 4-0.541 1.36 0.009 2.719 0.187 4 0.541 3.043-2.068 4.381-1.641 4.381-1.641 0.859 2.204 0.317 3.833 0.161 4.235 1.015 1.12 1.635 2.547 1.635 4.297 0 6.145-3.74 7.5-7.296 7.891 0.556 0.479 1.077 1.464 1.077 2.959 0 2.14-0.020 3.864-0.020 4.385 0 0.416 0.28 0.916 1.104 0.755 6.4-2.093 10.979-8.093 10.979-15.156 0-8.833-7.161-16-16-16z"></path>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section class="py-8 bg-gray-800 text-gray-100">
|
||||||
|
<div class="container flex flex-col items-center p-4 mx-auto space-y-6 md:p-8">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor" class="w-16 h-16 text-violet-400">
|
||||||
|
<polygon points="328.375 384 332.073 458.999 256.211 406.28 179.924 459.049 183.625 384 151.586 384 146.064 496 182.756 496 256.169 445.22 329.242 496 365.936 496 360.414 384 328.375 384"></polygon>
|
||||||
|
<path d="M415.409,154.914l-2.194-48.054L372.7,80.933,346.768,40.414l-48.055-2.2L256,16.093,213.287,38.219l-48.055,2.2L139.3,80.933,98.785,106.86l-2.194,48.054L74.464,197.628l22.127,42.715,2.2,48.053L139.3,314.323l25.928,40.52,48.055,2.195L256,379.164l42.713-22.126,48.055-2.195,25.928-40.52L413.214,288.4l2.195-48.053,22.127-42.715Zm-31.646,76.949L382,270.377l-32.475,20.78-20.78,32.475-38.515,1.76L256,343.125l-34.234-17.733-38.515-1.76-20.78-32.475L130,270.377l-1.759-38.514L110.5,197.628,128.237,163.4,130,124.88,162.471,104.1l20.78-32.474,38.515-1.76L256,52.132l34.234,17.733,38.515,1.76,20.78,32.474L382,124.88l1.759,38.515L401.5,197.628Z"></path>
|
||||||
|
</svg>
|
||||||
|
<p class="px-6 py-2 text-2xl font-semibold text-center sm:font-bold sm:text-3xl md:text-4xl lg:max-w-2xl xl:max-w-4xl text-gray-300">"Veniam quidem animi ea maxime odit fugiat architecto perferendis ipsum perspiciatis iusto, provident qui nam dolorum corporis."</p>
|
||||||
|
<div class="flex justify-center space-x-3">
|
||||||
|
<img src="https://source.unsplash.com/80x80/?portrait" alt="" class="w-20 h-20 bg-center bg-cover rounded-md bg-gray-500 bg-gray-700">
|
||||||
|
<div>
|
||||||
|
<p class="leadi">Leroy Jenkins</p>
|
||||||
|
<p class="text-sm leadi text-gray-300">Founder, Company</p>
|
||||||
|
<a class="flex items-center py-2 space-x-1 text-sm text-violet-400" href="/">
|
||||||
|
<span>Read full story</span>
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-4 h-4">
|
||||||
|
<path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<div class="grid max-w-screen-xl grid-cols-1 gap-8 px-8 py-16 mx-auto rounded-lg md:grid-cols-2 md:px-12 lg:px-16 xl:px-32 bg-gray-800 text-gray-100">
|
||||||
|
<div class="flex flex-col justify-between">
|
||||||
|
<div class="space-y-2">
|
||||||
|
<h2 class="text-4xl font-bold leadi lg:text-5xl">Let's talk!</h2>
|
||||||
|
<div class="text-gray-400">Vivamus in nisl metus? Phasellus.</div>
|
||||||
|
</div>
|
||||||
|
<img src="assets/svg/doodle.svg" alt="Contact our customer support" class="p-6 h-52 md:h-64">
|
||||||
|
</div>
|
||||||
|
<form novalidate="" class="space-y-6">
|
||||||
|
<div>
|
||||||
|
<label for="name" class="text-sm">Full name</label>
|
||||||
|
<input id="name" type="text" placeholder="Your name" class="w-full p-3 rounded bg-gray-800">
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label for="email" class="text-sm">Email</label>
|
||||||
|
<input id="email" type="email" placeholder="Your email" class="w-full p-3 rounded bg-gray-800">
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label for="message" class="text-sm">Message</label>
|
||||||
|
<textarea id="message" rows="3" placeholder="Your message" class="w-full p-3 rounded bg-gray-800"></textarea>
|
||||||
|
</div>
|
||||||
|
<button type="submit" class="w-full p-3 text-sm font-bold tracki uppercase rounded bg-violet-400 text-gray-900">Send Message</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
<section class="bg-gray-800 text-gray-100">
|
||||||
|
<div class="container flex flex-col justify-center p-4 mx-auto md:p-8">
|
||||||
|
<p class="p-2 text-sm font-medium tracki text-center uppercase">How it works</p>
|
||||||
|
<h2 class="mb-12 text-4xl font-bold leadi text-center sm:text-5xl">Frequently Asked Questions</h2>
|
||||||
|
<div class="grid gap-10 md:gap-8 sm:p-3 md:grid-cols-2 lg:px-12 xl:px-32">
|
||||||
|
<div>
|
||||||
|
<h3 class="font-semibold">Lorem ipsum dolor sit amet.</h3>
|
||||||
|
<p class="mt-1 text-gray-400">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ratione, fugit? Aspernatur, ullam enim, odit eaque quia rerum ipsum voluptatem consequatur ratione, doloremque debitis? Fuga labore omnis minima, quisquam delectus culpa!</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 class="font-semibold">Lorem ipsum dolor sit amet.</h3>
|
||||||
|
<p class="mt-1 text-gray-400">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ratione, fugit? Aspernatur, ullam enim, odit eaque quia rerum ipsum voluptatem consequatur ratione, doloremque debitis? Fuga labore omnis minima, quisquam delectus culpa!</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 class="font-semibold">Lorem ipsum dolor sit amet.</h3>
|
||||||
|
<p class="mt-1 text-gray-400">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ratione, fugit? Aspernatur, ullam enim, odit eaque quia rerum ipsum voluptatem consequatur ratione, doloremque debitis? Fuga labore omnis minima, quisquam delectus culpa!</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 class="font-semibold">Lorem ipsum dolor sit amet.</h3>
|
||||||
|
<p class="mt-1 text-gray-400">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ratione, fugit? Aspernatur, ullam enim, odit eaque quia rerum ipsum voluptatem consequatur ratione, doloremque debitis? Fuga labore omnis minima, quisquam delectus culpa!</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 class="font-semibold">Lorem ipsum dolor sit amet.</h3>
|
||||||
|
<p class="mt-1 text-gray-400">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ratione, fugit? Aspernatur, ullam enim, odit eaque quia rerum ipsum voluptatem consequatur ratione, doloremque debitis? Fuga labore omnis minima, quisquam delectus culpa!</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 class="font-semibold">Lorem ipsum dolor sit amet.</h3>
|
||||||
|
<p class="mt-1 text-gray-400">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ratione, fugit? Aspernatur, ullam enim, odit eaque quia rerum ipsum voluptatem consequatur ratione, doloremque debitis? Fuga labore omnis minima, quisquam delectus culpa!</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<footer class="py-6 bg-gray-800 text-gray-50">
|
||||||
|
<div class="container px-6 mx-auto space-y-6 divide-y divide-gray-400 md:space-y-12 divide-opacity-50">
|
||||||
|
<div class="grid grid-cols-12 gap-6">
|
||||||
|
<div class="pb-6 col-span-full md:pb-0 md:col-span-6">
|
||||||
|
<a rel="noopener noreferrer" href="#" class="flex justify-center space-x-3 md:justify-start">
|
||||||
|
<div class="flex items-center justify-center w-12 h-12 rounded-full bg-violet-400">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="currentColor" class="w-5 h-5 rounded-full text-gray-900">
|
||||||
|
<path d="M18.266 26.068l7.839-7.854 4.469 4.479c1.859 1.859 1.859 4.875 0 6.734l-1.104 1.104c-1.859 1.865-4.875 1.865-6.734 0zM30.563 2.531l-1.109-1.104c-1.859-1.859-4.875-1.859-6.734 0l-6.719 6.734-6.734-6.734c-1.859-1.859-4.875-1.859-6.734 0l-1.104 1.104c-1.859 1.859-1.859 4.875 0 6.734l6.734 6.734-6.734 6.734c-1.859 1.859-1.859 4.875 0 6.734l1.104 1.104c1.859 1.859 4.875 1.859 6.734 0l21.307-21.307c1.859-1.859 1.859-4.875 0-6.734z"></path>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<span class="self-center text-2xl font-semibold">Brand name</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="text-center col-span-full sm:col-span-6 md:text-left md:col-span-2">
|
||||||
|
<p class="pb-1 text-lg font-medium">Category</p>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<a rel="noopener noreferrer" href="#" class="hover:text-violet-400">Link</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a rel="noopener noreferrer" href="#" class="hover:text-violet-400">Link</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a rel="noopener noreferrer" href="#" class="hover:text-violet-400">Link</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a rel="noopener noreferrer" href="#" class="hover:text-violet-400">Link</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a rel="noopener noreferrer" href="#" class="hover:text-violet-400">Link</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="text-center col-span-full sm:col-span-6 md:text-left md:col-span-2">
|
||||||
|
<p class="pb-1 text-lg font-medium">Category</p>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<a rel="noopener noreferrer" href="#" class="hover:text-violet-400">Link</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a rel="noopener noreferrer" href="#" class="hover:text-violet-400">Link</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a rel="noopener noreferrer" href="#" class="hover:text-violet-400">Link</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a rel="noopener noreferrer" href="#" class="hover:text-violet-400">Link</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a rel="noopener noreferrer" href="#" class="hover:text-violet-400">Link</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="text-center col-span-full sm:col-span-6 md:text-left md:col-span-2">
|
||||||
|
<p class="pb-1 text-lg font-medium">Category</p>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<a rel="noopener noreferrer" href="#" class="hover:text-violet-400">Link</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a rel="noopener noreferrer" href="#" class="hover:text-violet-400">Link</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a rel="noopener noreferrer" href="#" class="hover:text-violet-400">Link</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a rel="noopener noreferrer" href="#" class="hover:text-violet-400">Link</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a rel="noopener noreferrer" href="#" class="hover:text-violet-400">Link</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="grid justify-center pt-6 lg:justify-between">
|
||||||
|
<div class="flex flex-col self-center text-sm text-center md:block lg:col-start-1 md:space-x-6">
|
||||||
|
<span>©1998 All rights reserved</span>
|
||||||
|
<a rel="noopener noreferrer" href="#">
|
||||||
|
<span>Privacy policy</span>
|
||||||
|
</a>
|
||||||
|
<a rel="noopener noreferrer" href="#">
|
||||||
|
<span>Terms of service</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="flex justify-center pt-4 space-x-4 lg:pt-0 lg:col-end-13">
|
||||||
|
<a rel="noopener noreferrer" href="#" class="flex items-center justify-center w-10 h-10 rounded-full bg-violet-400 text-gray-900">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5">
|
||||||
|
<path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"></path>
|
||||||
|
<path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"></path>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
<a rel="noopener noreferrer" href="#" class="flex items-center justify-center w-10 h-10 rounded-full bg-violet-400 text-gray-900">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" fill="currentColor" class="w-5 h-5">
|
||||||
|
<path d="M 50.0625 10.4375 C 48.214844 11.257813 46.234375 11.808594 44.152344 12.058594 C 46.277344 10.785156 47.910156 8.769531 48.675781 6.371094 C 46.691406 7.546875 44.484375 8.402344 42.144531 8.863281 C 40.269531 6.863281 37.597656 5.617188 34.640625 5.617188 C 28.960938 5.617188 24.355469 10.21875 24.355469 15.898438 C 24.355469 16.703125 24.449219 17.488281 24.625 18.242188 C 16.078125 17.8125 8.503906 13.71875 3.429688 7.496094 C 2.542969 9.019531 2.039063 10.785156 2.039063 12.667969 C 2.039063 16.234375 3.851563 19.382813 6.613281 21.230469 C 4.925781 21.175781 3.339844 20.710938 1.953125 19.941406 C 1.953125 19.984375 1.953125 20.027344 1.953125 20.070313 C 1.953125 25.054688 5.5 29.207031 10.199219 30.15625 C 9.339844 30.390625 8.429688 30.515625 7.492188 30.515625 C 6.828125 30.515625 6.183594 30.453125 5.554688 30.328125 C 6.867188 34.410156 10.664063 37.390625 15.160156 37.472656 C 11.644531 40.230469 7.210938 41.871094 2.390625 41.871094 C 1.558594 41.871094 0.742188 41.824219 -0.0585938 41.726563 C 4.488281 44.648438 9.894531 46.347656 15.703125 46.347656 C 34.617188 46.347656 44.960938 30.679688 44.960938 17.09375 C 44.960938 16.648438 44.949219 16.199219 44.933594 15.761719 C 46.941406 14.3125 48.683594 12.5 50.0625 10.4375 Z"></path>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
<a rel="noopener noreferrer" href="#" class="flex items-center justify-center w-10 h-10 rounded-full bg-violet-400 text-gray-900">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" class="w-6 h-6">
|
||||||
|
<path d="M10.9,2.1c-4.6,0.5-8.3,4.2-8.8,8.7c-0.5,4.7,2.2,8.9,6.3,10.5C8.7,21.4,9,21.2,9,20.8v-1.6c0,0-0.4,0.1-0.9,0.1 c-1.4,0-2-1.2-2.1-1.9c-0.1-0.4-0.3-0.7-0.6-1C5.1,16.3,5,16.3,5,16.2C5,16,5.3,16,5.4,16c0.6,0,1.1,0.7,1.3,1c0.5,0.8,1.1,1,1.4,1 c0.4,0,0.7-0.1,0.9-0.2c0.1-0.7,0.4-1.4,1-1.8c-2.3-0.5-4-1.8-4-4c0-1.1,0.5-2.2,1.2-3C7.1,8.8,7,8.3,7,7.6C7,7.2,7,6.6,7.3,6 c0,0,1.4,0,2.8,1.3C10.6,7.1,11.3,7,12,7s1.4,0.1,2,0.3C15.3,6,16.8,6,16.8,6C17,6.6,17,7.2,17,7.6c0,0.8-0.1,1.2-0.2,1.4 c0.7,0.8,1.2,1.8,1.2,3c0,2.2-1.7,3.5-4,4c0.6,0.5,1,1.4,1,2.3v2.6c0,0.3,0.3,0.6,0.7,0.5c3.7-1.5,6.3-5.1,6.3-9.3 C22,6.1,16.9,1.4,10.9,2.1z"></path>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
333
src/pages/portfolio_layout1.astro
Normal file
333
src/pages/portfolio_layout1.astro
Normal file
|
|
@ -0,0 +1,333 @@
|
||||||
|
---
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||||
|
<meta name="viewport" content="width=device-width" />
|
||||||
|
<meta name="generator" content={Astro.generator} />
|
||||||
|
<title>Astro</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="space-y-12 bg-gray-800 text-gray-100">
|
||||||
|
<header class="p-4">
|
||||||
|
<div class="container flex justify-between h-16 mx-auto">
|
||||||
|
<a rel="noopener noreferrer" href="#" aria-label="Back to homepage" class="flex items-center p-2">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 32 32" class="w-8 h-8 text-violet-400">
|
||||||
|
<path d="M27.912 7.289l-10.324-5.961c-0.455-0.268-1.002-0.425-1.588-0.425s-1.133 0.158-1.604 0.433l0.015-0.008-10.324 5.961c-0.955 0.561-1.586 1.582-1.588 2.75v11.922c0.002 1.168 0.635 2.189 1.574 2.742l0.016 0.008 10.322 5.961c0.455 0.267 1.004 0.425 1.59 0.425 0.584 0 1.131-0.158 1.602-0.433l-0.014 0.008 10.322-5.961c0.955-0.561 1.586-1.582 1.588-2.75v-11.922c-0.002-1.168-0.633-2.189-1.573-2.742zM27.383 21.961c0 0.389-0.211 0.73-0.526 0.914l-0.004 0.002-10.324 5.961c-0.152 0.088-0.334 0.142-0.53 0.142s-0.377-0.053-0.535-0.145l0.005 0.002-10.324-5.961c-0.319-0.186-0.529-0.527-0.529-0.916v-11.922c0-0.389 0.211-0.73 0.526-0.914l0.004-0.002 10.324-5.961c0.152-0.090 0.334-0.143 0.53-0.143s0.377 0.053 0.535 0.144l-0.006-0.002 10.324 5.961c0.319 0.185 0.529 0.527 0.529 0.916z"></path>
|
||||||
|
<path d="M22.094 19.451h-0.758c-0.188 0-0.363 0.049-0.515 0.135l0.006-0.004-4.574 2.512-5.282-3.049v-6.082l5.282-3.051 4.576 2.504c0.146 0.082 0.323 0.131 0.508 0.131h0.758c0.293 0 0.529-0.239 0.529-0.531v-0.716c0-0.2-0.11-0.373-0.271-0.463l-0.004-0.002-5.078-2.777c-0.293-0.164-0.645-0.26-1.015-0.26-0.39 0-0.756 0.106-1.070 0.289l0.010-0.006-5.281 3.049c-0.636 0.375-1.056 1.055-1.059 1.834v6.082c0 0.779 0.422 1.461 1.049 1.828l0.009 0.006 5.281 3.049c0.305 0.178 0.67 0.284 1.061 0.284 0.373 0 0.723-0.098 1.027-0.265l-0.012 0.006 5.080-2.787c0.166-0.091 0.276-0.265 0.276-0.465v-0.716c0-0.293-0.238-0.529-0.529-0.529z"></path>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
<ul class="items-stretch hidden space-x-3 md:flex">
|
||||||
|
<li class="flex">
|
||||||
|
<a rel="noopener noreferrer" href="#" class="flex items-center px-4 -mb-1 border-b-2 border-transparent">About</a>
|
||||||
|
</li>
|
||||||
|
<li class="flex">
|
||||||
|
<a rel="noopener noreferrer" href="#" class="flex items-center px-4 -mb-1 border-b-2 border-transparent text-violet-400 border-violet-400">Blog</a>
|
||||||
|
</li>
|
||||||
|
<li class="flex">
|
||||||
|
<a rel="noopener noreferrer" href="#" class="flex items-center px-4 -mb-1 border-b-2 border-transparent">Projects</a>
|
||||||
|
</li>
|
||||||
|
<li class="flex">
|
||||||
|
<a rel="noopener noreferrer" href="#" class="flex items-center px-4 -mb-1 border-b-2 border-transparent">Contact</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<button class="flex justify-end p-4 md:hidden">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-6 h-6">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<section>
|
||||||
|
<div class="container flex flex-col items-center px-4 py-8 mx-auto text-center md:px-10 lg:px-32 xl:max-w-3xl">
|
||||||
|
<h1 class="text-4xl font-bold leadi sm:text-5xl">Quisquam necessita vel
|
||||||
|
<span class="text-violet-400">laborum doloribus</span>delectus
|
||||||
|
</h1>
|
||||||
|
<p class="px-8 mt-8 mb-12 text-lg">Cupiditate minima voluptate temporibus quia? Architecto beatae esse ab amet vero eaque explicabo!</p>
|
||||||
|
<div class="flex flex-wrap justify-center">
|
||||||
|
<button class="px-8 py-3 m-2 text-lg font-semibold rounded bg-violet-400 text-gray-900">Get started</button>
|
||||||
|
<button class="px-8 py-3 m-2 text-lg border rounded text-gray-50 border-gray-700">Learn more</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section class="p-6 bg-gray-800 text-gray-100">
|
||||||
|
<div class="container grid justify-center grid-cols-2 mx-auto text-center lg:grid-cols-3">
|
||||||
|
<div class="flex flex-col justify-start m-2 lg:m-6">
|
||||||
|
<p class="text-4xl font-bold leadi lg:text-6xl">50+</p>
|
||||||
|
<p class="text-sm sm:text-base">Clients</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-col justify-start m-2 lg:m-6">
|
||||||
|
<p class="text-4xl font-bold leadi lg:text-6xl">89K</p>
|
||||||
|
<p class="text-sm sm:text-base">Followers on social media</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-col justify-start m-2 lg:m-6">
|
||||||
|
<p class="text-4xl font-bold leadi lg:text-6xl">3</p>
|
||||||
|
<p class="text-sm sm:text-base">Published books</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-col justify-start m-2 lg:m-6">
|
||||||
|
<p class="text-4xl font-bold leadi lg:text-6xl">8</p>
|
||||||
|
<p class="text-sm sm:text-base">TED talks</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-col justify-start m-2 lg:m-6">
|
||||||
|
<p class="text-4xl font-bold leadi lg:text-6xl">22</p>
|
||||||
|
<p class="text-sm sm:text-base">Years of experience</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-col justify-start m-2 lg:m-6">
|
||||||
|
<p class="text-4xl font-bold leadi lg:text-6xl">10+</p>
|
||||||
|
<p class="text-sm sm:text-base">Workshops</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section class="py-8">
|
||||||
|
<div class="container mx-auto">
|
||||||
|
<div class="p-4 mx-auto text-center md:px-10 lg:px-32 xl:max-w-3xl">
|
||||||
|
<h2 class="text-2xl font-bold leadi sm:text-4xl">What can I offer to you?</h2>
|
||||||
|
<p class="px-8 my-4">Graeco causae vim cu, alii option ancillae sea ut. Ad mea alii pertinax, ei sed falli ponderum adipisci. Vis iisque scripta cu. Sea ex mollis consulatu dissentiet, dicta viris volutpat mea an, et nec discere epicuri</p>
|
||||||
|
</div>
|
||||||
|
<div class="grid grid-cols-5 p-4 md:p-8">
|
||||||
|
<div class="flex justify-center px-4 col-span-full md:col-span-1 md:flex-col md:justify-start md:items-start">
|
||||||
|
<button class="p-2 border-b-2 md:border-l-2 md:border-b-0 md:py-3 border-gray-300 text-gray-400">Mucius</button>
|
||||||
|
<button class="px-2 py-1 border-b-2 md:border-l-2 md:border-b-0 md:py-3 border-violet-400 text-gray-50">Fabellas</button>
|
||||||
|
<button class="px-2 py-1 border-b-2 md:border-l-2 md:border-b-0 md:py-3 border-gray-300 text-gray-400">Aperiam</button>
|
||||||
|
<button class="px-2 py-1 border-b-2 md:border-l-2 md:border-b-0 md:py-3 border-gray-300 text-gray-400">Nonumy</button>
|
||||||
|
<button class="px-2 py-1 border-b-2 md:border-l-2 md:border-b-0 md:py-3 border-gray-300 text-gray-400">Propriae</button>
|
||||||
|
</div>
|
||||||
|
<div class="grid gap-12 py-4 text-center sm:grid-cols-2 col-span-full md:col-span-4 md:text-left">
|
||||||
|
<div class="flex flex-col items-center justify-center space-y-3 md:justify-start md:items-start">
|
||||||
|
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-violet-400">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z"></path>
|
||||||
|
</svg>
|
||||||
|
<h5 class="text-xl font-semibold">Est facilisis necessitatibus ea</h5>
|
||||||
|
<p>Ex audiam inermis elaboraret eam, oratio petentium ne cum, mundi interesset sit no.</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-col items-center justify-center space-y-3 md:justify-start md:items-start">
|
||||||
|
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-violet-400">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8h2a2 2 0 012 2v6a2 2 0 01-2 2h-2v4l-4-4H9a1.994 1.994 0 01-1.414-.586m0 0L11 14h4a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2v4l.586-.586z"></path>
|
||||||
|
</svg>
|
||||||
|
<h5 class="text-xl font-semibold">Vim iudico iisque te</h5>
|
||||||
|
<p>At cibo possim impetus pro, ius id mutat commodo offendit. Cum inani pertinax definitiones ad.</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-col items-center justify-center space-y-3 md:justify-start md:items-start">
|
||||||
|
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-violet-400">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4"></path>
|
||||||
|
</svg>
|
||||||
|
<h5 class="text-xl font-semibold">Sea inani viris at</h5>
|
||||||
|
<p>Et eos atomorum urbanitas accommodare, in suscipit petentium vis. Pro ea nibh praesent postulant.</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-col items-center justify-center space-y-3 md:justify-start md:items-start">
|
||||||
|
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-violet-400">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path>
|
||||||
|
</svg>
|
||||||
|
<h5 class="text-xl font-semibold">Error nihil primis sit ut</h5>
|
||||||
|
<p>Eu vis urbanitas scripserit, civibus scripserit pro id. Omnes congue contentiones te eos.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section class="py-6 bg-gray-800 text-gray-50">
|
||||||
|
<div class="container flex flex-col justify-center p-4 mx-auto space-y-8 md:p-10 lg:space-y-0 lg:space-x-12 lg:justify-between lg:flex-row">
|
||||||
|
<div class="flex flex-col space-y-4 text-center lg:text-left">
|
||||||
|
<h1 class="text-5xl font-bold leadi">Get free weekly tips</h1>
|
||||||
|
<p class="text-lg">Subscribe to my weekly newsletter to find out about the latest and greatest news about just about everything!</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-row items-center self-center justify-center flex-shrink-0 shadow-md lg:justify-end">
|
||||||
|
<div class="flex flex-row">
|
||||||
|
<input type="text" placeholder="example@email.com" class="w-3/5 p-3 rounded-l-lg sm:w-2/3">
|
||||||
|
<button type="button" class="w-2/5 p-3 font-semibold rounded-r-lg sm:w-1/3 bg-violet-400 text-gray-900">Subscribe</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section>
|
||||||
|
<div class="container max-w-6xl p-6 space-y-6 sm:space-y-12">
|
||||||
|
<a rel="noopener noreferrer" href="#" class="block max-w-sm gap-3 mx-auto sm:max-w-full group hover:no-underline focus:no-underline lg:grid lg:grid-cols-12 bg-gray-900">
|
||||||
|
<img src="https://source.unsplash.com/random/480x360" alt="Website Design System" class="object-cover w-full h-64 rounded sm:h-96 lg:col-span-7 bg-gray-500">
|
||||||
|
<div class="p-6 space-y-2 lg:col-span-5">
|
||||||
|
<h3 class="text-2xl font-semibold sm:text-4xl group-hover:underline group-focus:underline">Noster tincidunt reprimique ad pro</h3>
|
||||||
|
<span class="text-xs text-gray-400">February 19, 2021</span>
|
||||||
|
<p>Ei delenit sensibus liberavisse pri. Quod suscipit no nam. Est in graece fuisset, eos affert putent doctus id.</p>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<div class="grid justify-center grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
|
||||||
|
<a rel="noopener noreferrer" href="#" class="max-w-sm mx-auto group hover:no-underline focus:no-underline bg-gray-900">
|
||||||
|
<img role="presentation" class="object-cover w-full rounded h-44 bg-gray-500" src="https://source.unsplash.com/random/480x360?1">
|
||||||
|
<div class="p-6 space-y-2">
|
||||||
|
<h3 class="text-2xl font-semibold group-hover:underline group-focus:underline">In usu laoreet repudiare legendos</h3>
|
||||||
|
<span class="text-xs text-gray-400">January 21, 2021</span>
|
||||||
|
<p>Mei ex aliquid eleifend forensibus, quo ad dicta apeirian neglegentur, ex has tantas percipit perfecto. At per tempor albucius perfecto, ei probatus consulatu patrioque mea, ei vocent delicata indoctum pri.</p>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a rel="noopener noreferrer" href="#" class="max-w-sm mx-auto group hover:no-underline focus:no-underline bg-gray-900">
|
||||||
|
<img role="presentation" class="object-cover w-full rounded h-44 bg-gray-500" src="https://source.unsplash.com/random/480x360?2">
|
||||||
|
<div class="p-6 space-y-2">
|
||||||
|
<h3 class="text-2xl font-semibold group-hover:underline group-focus:underline">In usu laoreet repudiare legendos</h3>
|
||||||
|
<span class="text-xs text-gray-400">January 22, 2021</span>
|
||||||
|
<p>Mei ex aliquid eleifend forensibus, quo ad dicta apeirian neglegentur, ex has tantas percipit perfecto. At per tempor albucius perfecto, ei probatus consulatu patrioque mea, ei vocent delicata indoctum pri.</p>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a rel="noopener noreferrer" href="#" class="max-w-sm mx-auto group hover:no-underline focus:no-underline bg-gray-900">
|
||||||
|
<img role="presentation" class="object-cover w-full rounded h-44 bg-gray-500" src="https://source.unsplash.com/random/480x360?3">
|
||||||
|
<div class="p-6 space-y-2">
|
||||||
|
<h3 class="text-2xl font-semibold group-hover:underline group-focus:underline">In usu laoreet repudiare legendos</h3>
|
||||||
|
<span class="text-xs text-gray-400">January 23, 2021</span>
|
||||||
|
<p>Mei ex aliquid eleifend forensibus, quo ad dicta apeirian neglegentur, ex has tantas percipit perfecto. At per tempor albucius perfecto, ei probatus consulatu patrioque mea, ei vocent delicata indoctum pri.</p>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a rel="noopener noreferrer" href="#" class="max-w-sm mx-auto group hover:no-underline focus:no-underline bg-gray-900 hidden sm:block">
|
||||||
|
<img role="presentation" class="object-cover w-full rounded h-44 bg-gray-500" src="https://source.unsplash.com/random/480x360?4">
|
||||||
|
<div class="p-6 space-y-2">
|
||||||
|
<h3 class="text-2xl font-semibold group-hover:underline group-focus:underline">In usu laoreet repudiare legendos</h3>
|
||||||
|
<span class="text-xs text-gray-400">January 24, 2021</span>
|
||||||
|
<p>Mei ex aliquid eleifend forensibus, quo ad dicta apeirian neglegentur, ex has tantas percipit perfecto. At per tempor albucius perfecto, ei probatus consulatu patrioque mea, ei vocent delicata indoctum pri.</p>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a rel="noopener noreferrer" href="#" class="max-w-sm mx-auto group hover:no-underline focus:no-underline bg-gray-900 hidden sm:block">
|
||||||
|
<img role="presentation" class="object-cover w-full rounded h-44 bg-gray-500" src="https://source.unsplash.com/random/480x360?5">
|
||||||
|
<div class="p-6 space-y-2">
|
||||||
|
<h3 class="text-2xl font-semibold group-hover:underline group-focus:underline">In usu laoreet repudiare legendos</h3>
|
||||||
|
<span class="text-xs text-gray-400">January 25, 2021</span>
|
||||||
|
<p>Mei ex aliquid eleifend forensibus, quo ad dicta apeirian neglegentur, ex has tantas percipit perfecto. At per tempor albucius perfecto, ei probatus consulatu patrioque mea, ei vocent delicata indoctum pri.</p>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a rel="noopener noreferrer" href="#" class="max-w-sm mx-auto group hover:no-underline focus:no-underline bg-gray-900 hidden sm:block">
|
||||||
|
<img role="presentation" class="object-cover w-full rounded h-44 bg-gray-500" src="https://source.unsplash.com/random/480x360?6">
|
||||||
|
<div class="p-6 space-y-2">
|
||||||
|
<h3 class="text-2xl font-semibold group-hover:underline group-focus:underline">In usu laoreet repudiare legendos</h3>
|
||||||
|
<span class="text-xs text-gray-400">January 26, 2021</span>
|
||||||
|
<p>Mei ex aliquid eleifend forensibus, quo ad dicta apeirian neglegentur, ex has tantas percipit perfecto. At per tempor albucius perfecto, ei probatus consulatu patrioque mea, ei vocent delicata indoctum pri.</p>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="flex justify-center">
|
||||||
|
<button class="px-6 py-3 text-sm rounded-md hover:underline bg-gray-900 text-gray-400">Load more posts...</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section>
|
||||||
|
<div class="container px-6 py-12 mx-auto">
|
||||||
|
<div class="grid items-center gap-4 xl:grid-cols-5">
|
||||||
|
<div class="max-w-2xl mx-auto my-8 space-y-4 text-center xl:col-span-2 xl:text-left">
|
||||||
|
<h2 class="text-4xl font-bold">Duo assum utroque appetere an</h2>
|
||||||
|
<p class="text-gray-400">Pri ex magna scaevola moderatius. Nullam accommodare no vix, est ei diceret alienum, et sit cetero malorum. Et sea iudico consequat, est sanctus adipisci ex.</p>
|
||||||
|
</div>
|
||||||
|
<div class="p-6 xl:col-span-3">
|
||||||
|
<div class="grid gap-4 md:grid-cols-2">
|
||||||
|
<div class="grid content-center gap-4">
|
||||||
|
<div class="p-6 rounded shadow-md bg-gray-900">
|
||||||
|
<p>An audire commodo habemus cum. Ne sed corrumpit repudiandae. Tota aliquip democritum pro in, nec democritum intellegam ne. Propriae volutpat dissentiet ea sit, nec at lorem inani tritani, an ius populo perfecto vituperatoribus. Eu cum case modus salutandi, ut eum vocent sensibus reprehendunt.</p>
|
||||||
|
<div class="flex items-center mt-4 space-x-4">
|
||||||
|
<img src="https://source.unsplash.com/51x51/?portrait" alt="" class="w-12 h-12 bg-center bg-cover rounded-full bg-gray-500">
|
||||||
|
<div>
|
||||||
|
<p class="text-lg font-semibold">Leroy Jenkins</p>
|
||||||
|
<p class="text-sm text-gray-400">CTO of Company Co.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="p-6 rounded shadow-md bg-gray-900">
|
||||||
|
<p>Sit wisi sapientem ut, pri civibus temporibus voluptatibus et, ius cu hinc fabulas. Nam meliore minimum et, regione convenire cum id. Ex pro eros mucius consectetuer, pro magna nulla nonumy ne, eam putent iudicabit consulatu cu.</p>
|
||||||
|
<div class="flex items-center mt-4 space-x-4">
|
||||||
|
<img src="https://source.unsplash.com/52x52/?portrait" alt="" class="w-12 h-12 bg-center bg-cover rounded-full bg-gray-500">
|
||||||
|
<div>
|
||||||
|
<p class="text-lg font-semibold">Leroy Jenkins</p>
|
||||||
|
<p class="text-sm text-gray-400">CTO of Company Co.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="grid content-center gap-4">
|
||||||
|
<div class="p-6 rounded shadow-md bg-gray-900">
|
||||||
|
<p>Putant omnium elaboraret per ut. Id dicta tritani nominavi quo, mea id justo errem elaboraret. Agam mollis scripserit ea his, ut nec postea verear persecuti. Ea noster senserit eam, ferri omittantur ei nec. Id mel solet libris efficiantur, commune explicari et eos. Case movet ad est, sed tota vocent appetere ea.</p>
|
||||||
|
<div class="flex items-center mt-4 space-x-4">
|
||||||
|
<img src="https://source.unsplash.com/53x53/?portrait" alt="" class="w-12 h-12 bg-center bg-cover rounded-full bg-gray-500">
|
||||||
|
<div>
|
||||||
|
<p class="text-lg font-semibold">Leroy Jenkins</p>
|
||||||
|
<p class="text-sm text-gray-400">CTO of Company Co.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="p-6 rounded shadow-md bg-gray-900">
|
||||||
|
<p>Te omnes virtute volutpat sed. Ei esse eros interesset vel, ei populo denique ocurreret vix, eu cum pertinax mandamus vituperatoribus. Solum nihil luptatum per ex, ei amet viderer eos. Ea illum labitur mnesarchum pro. Eius meis salutandi ei nam, alterum expetenda et nec. Expetenda intellegat at eum, per mazim sanctus honestatis ad. Ei noluisse invenire vix. Te ancillae patrioque qui, probo bonorum vivendum ex vim.</p>
|
||||||
|
<div class="flex items-center mt-4 space-x-4">
|
||||||
|
<img src="https://source.unsplash.com/54x54/?portrait" alt="" class="w-12 h-12 bg-center bg-cover rounded-full bg-gray-500">
|
||||||
|
<div>
|
||||||
|
<p class="text-lg font-semibold">Leroy Jenkins</p>
|
||||||
|
<p class="text-sm text-gray-400">CTO of Company Co.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<div class="grid max-w-screen-xl grid-cols-1 gap-8 px-8 py-16 mx-auto rounded-lg md:grid-cols-2 md:px-12 lg:px-16 xl:px-32">
|
||||||
|
<div class="flex flex-col justify-between">
|
||||||
|
<div class="space-y-2">
|
||||||
|
<h2 class="text-4xl font-bold leadi lg:text-5xl">Let's talk!</h2>
|
||||||
|
<div class="text-gray-400">Vivamus in nisl metus? Phasellus.</div>
|
||||||
|
</div>
|
||||||
|
<img src="assets/svg/doodle.svg" alt="Contact our customer support" class="p-6 h-52 md:h-64">
|
||||||
|
</div>
|
||||||
|
<form novalidate="" class="space-y-6">
|
||||||
|
<div>
|
||||||
|
<label for="name" class="text-sm">Full name</label>
|
||||||
|
<input id="name" type="text" placeholder="" class="w-full p-3 rounded bg-gray-800">
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label for="email" class="text-sm">Email</label>
|
||||||
|
<input id="email" type="email" class="w-full p-3 rounded bg-gray-800">
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label for="message" class="text-sm">Message</label>
|
||||||
|
<textarea id="message" rows="3" class="w-full p-3 rounded bg-gray-800"></textarea>
|
||||||
|
</div>
|
||||||
|
<button type="submit" class="w-full p-3 text-sm font-bold tracki uppercase rounded bg-violet-400 text-gray-900">Send Message</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
<footer>
|
||||||
|
<div class="container flex flex-col p-4 mx-auto md:p-8 lg:flex-row">
|
||||||
|
<ul class="self-center py-6 space-y-4 text-center sm:flex sm:space-y-0 sm:justify-around sm:space-x-4 lg:flex-1 lg:justify-start">
|
||||||
|
<li>About</li>
|
||||||
|
<li>Blog</li>
|
||||||
|
<li>Projects</li>
|
||||||
|
<li>Contact</li>
|
||||||
|
</ul>
|
||||||
|
<div class="flex flex-col justify-center pt-6 lg:pt-0">
|
||||||
|
<div class="flex justify-center space-x-4">
|
||||||
|
<a rel="noopener noreferrer" href="#" class="flex items-center justify-center w-8 h-8 rounded-full sm:w-10 sm:h-10 bg-violet-400 text-gray-900">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="currentColor" class="w-4 h-4">
|
||||||
|
<path d="M16 0c-4.349 0-4.891 0.021-6.593 0.093-1.709 0.084-2.865 0.349-3.885 0.745-1.052 0.412-1.948 0.959-2.833 1.849-0.891 0.885-1.443 1.781-1.849 2.833-0.396 1.020-0.661 2.176-0.745 3.885-0.077 1.703-0.093 2.244-0.093 6.593s0.021 4.891 0.093 6.593c0.084 1.704 0.349 2.865 0.745 3.885 0.412 1.052 0.959 1.948 1.849 2.833 0.885 0.891 1.781 1.443 2.833 1.849 1.020 0.391 2.181 0.661 3.885 0.745 1.703 0.077 2.244 0.093 6.593 0.093s4.891-0.021 6.593-0.093c1.704-0.084 2.865-0.355 3.885-0.745 1.052-0.412 1.948-0.959 2.833-1.849 0.891-0.885 1.443-1.776 1.849-2.833 0.391-1.020 0.661-2.181 0.745-3.885 0.077-1.703 0.093-2.244 0.093-6.593s-0.021-4.891-0.093-6.593c-0.084-1.704-0.355-2.871-0.745-3.885-0.412-1.052-0.959-1.948-1.849-2.833-0.885-0.891-1.776-1.443-2.833-1.849-1.020-0.396-2.181-0.661-3.885-0.745-1.703-0.077-2.244-0.093-6.593-0.093zM16 2.88c4.271 0 4.781 0.021 6.469 0.093 1.557 0.073 2.405 0.333 2.968 0.553 0.751 0.291 1.276 0.635 1.844 1.197 0.557 0.557 0.901 1.088 1.192 1.839 0.22 0.563 0.48 1.411 0.553 2.968 0.072 1.688 0.093 2.199 0.093 6.469s-0.021 4.781-0.099 6.469c-0.084 1.557-0.344 2.405-0.563 2.968-0.303 0.751-0.641 1.276-1.199 1.844-0.563 0.557-1.099 0.901-1.844 1.192-0.556 0.22-1.416 0.48-2.979 0.553-1.697 0.072-2.197 0.093-6.479 0.093s-4.781-0.021-6.48-0.099c-1.557-0.084-2.416-0.344-2.979-0.563-0.76-0.303-1.281-0.641-1.839-1.199-0.563-0.563-0.921-1.099-1.197-1.844-0.224-0.556-0.48-1.416-0.563-2.979-0.057-1.677-0.084-2.197-0.084-6.459 0-4.26 0.027-4.781 0.084-6.479 0.083-1.563 0.339-2.421 0.563-2.979 0.276-0.761 0.635-1.281 1.197-1.844 0.557-0.557 1.079-0.917 1.839-1.199 0.563-0.219 1.401-0.479 2.964-0.557 1.697-0.061 2.197-0.083 6.473-0.083zM16 7.787c-4.541 0-8.213 3.677-8.213 8.213 0 4.541 3.677 8.213 8.213 8.213 4.541 0 8.213-3.677 8.213-8.213 0-4.541-3.677-8.213-8.213-8.213zM16 21.333c-2.948 0-5.333-2.385-5.333-5.333s2.385-5.333 5.333-5.333c2.948 0 5.333 2.385 5.333 5.333s-2.385 5.333-5.333 5.333zM26.464 7.459c0 1.063-0.865 1.921-1.923 1.921-1.063 0-1.921-0.859-1.921-1.921 0-1.057 0.864-1.917 1.921-1.917s1.923 0.86 1.923 1.917z"></path>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
<a rel="noopener noreferrer" href="#" class="flex items-center justify-center w-8 h-8 rounded-full sm:w-10 sm:h-10 bg-violet-400 text-gray-900">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 32 32" class="w-4 h-4">
|
||||||
|
<path d="M16.021 0c-8.828 0-15.984 7.156-15.984 15.984 0 6.771 4.214 12.552 10.161 14.88-0.141-1.266-0.266-3.203 0.052-4.583 0.292-1.25 1.875-7.943 1.875-7.943s-0.479-0.964-0.479-2.375c0-2.219 1.292-3.88 2.891-3.88 1.365 0 2.026 1.021 2.026 2.25 0 1.37-0.87 3.422-1.323 5.323-0.38 1.589 0.797 2.885 2.365 2.885 2.839 0 5.026-2.995 5.026-7.318 0-3.813-2.75-6.49-6.677-6.49-4.547 0-7.214 3.417-7.214 6.932 0 1.375 0.526 2.854 1.188 3.651 0.13 0.161 0.146 0.302 0.109 0.464-0.12 0.5-0.391 1.599-0.443 1.818-0.073 0.297-0.229 0.359-0.536 0.219-1.99-0.922-3.245-3.839-3.245-6.193 0-5.036 3.667-9.672 10.563-9.672 5.542 0 9.854 3.958 9.854 9.229 0 5.516-3.474 9.953-8.307 9.953-1.62 0-3.141-0.839-3.677-1.839l-1 3.797c-0.359 1.391-1.339 3.135-2 4.193 1.5 0.458 3.078 0.714 4.734 0.714 8.813 0 15.979-7.151 15.979-15.984 0-8.828-7.167-15.979-15.979-15.979z"></path>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
<a rel="noopener noreferrer" href="#" class="flex items-center justify-center w-8 h-8 rounded-full sm:w-10 sm:h-10 bg-violet-400 text-gray-900">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 32 32" class="w-4 h-4">
|
||||||
|
<path d="M31.937 6.093c-1.177 0.516-2.437 0.871-3.765 1.032 1.355-0.813 2.391-2.099 2.885-3.631-1.271 0.74-2.677 1.276-4.172 1.579-1.192-1.276-2.896-2.079-4.787-2.079-3.625 0-6.563 2.937-6.563 6.557 0 0.521 0.063 1.021 0.172 1.495-5.453-0.255-10.287-2.875-13.52-6.833-0.568 0.964-0.891 2.084-0.891 3.303 0 2.281 1.161 4.281 2.916 5.457-1.073-0.031-2.083-0.328-2.968-0.817v0.079c0 3.181 2.26 5.833 5.26 6.437-0.547 0.145-1.131 0.229-1.724 0.229-0.421 0-0.823-0.041-1.224-0.115 0.844 2.604 3.26 4.5 6.14 4.557-2.239 1.755-5.077 2.801-8.135 2.801-0.521 0-1.041-0.025-1.563-0.088 2.917 1.86 6.36 2.948 10.079 2.948 12.067 0 18.661-9.995 18.661-18.651 0-0.276 0-0.557-0.021-0.839 1.287-0.917 2.401-2.079 3.281-3.396z"></path>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
<a rel="noopener noreferrer" href="#" class="flex items-center justify-center w-8 h-8 rounded-full sm:w-10 sm:h-10 bg-violet-400 text-gray-900">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 32 32" class="w-4 h-4">
|
||||||
|
<path d="M32 16c0-8.839-7.167-16-16-16-8.839 0-16 7.161-16 16 0 7.984 5.849 14.604 13.5 15.803v-11.177h-4.063v-4.625h4.063v-3.527c0-4.009 2.385-6.223 6.041-6.223 1.751 0 3.584 0.312 3.584 0.312v3.937h-2.021c-1.984 0-2.604 1.235-2.604 2.5v3h4.437l-0.713 4.625h-3.724v11.177c7.645-1.199 13.5-7.819 13.5-15.803z"></path>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
<a rel="noopener noreferrer" href="#" class="flex items-center justify-center w-8 h-8 rounded-full sm:w-10 sm:h-10 bg-violet-400 text-gray-900">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 32 32" class="w-4 h-4">
|
||||||
|
<path d="M16.318 13.714v5.484h9.078c-0.37 2.354-2.745 6.901-9.078 6.901-5.458 0-9.917-4.521-9.917-10.099s4.458-10.099 9.917-10.099c3.109 0 5.193 1.318 6.38 2.464l4.339-4.182c-2.786-2.599-6.396-4.182-10.719-4.182-8.844 0-16 7.151-16 16s7.156 16 16 16c9.234 0 15.365-6.49 15.365-15.635 0-1.052-0.115-1.854-0.255-2.651z"></path>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
306
src/pages/portfolio_layout2.astro
Normal file
306
src/pages/portfolio_layout2.astro
Normal file
|
|
@ -0,0 +1,306 @@
|
||||||
|
---
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||||
|
<meta name="viewport" content="width=device-width" />
|
||||||
|
<meta name="generator" content={Astro.generator} />
|
||||||
|
<title>Astro</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="antialiased bg-gray-800 text-gray-100">
|
||||||
|
<div class="flex flex-col min-h-screen space-y-12">
|
||||||
|
<header class="container flex items-center justify-between w-full max-w-3xl px-6 py-10 mx-auto xl:max-w-5xl">
|
||||||
|
<a rel="noopener noreferrer" href="#" class="block h-6 text-2xl font-semibold">Leroy Jenkins</a>
|
||||||
|
<div class="flex items-center">
|
||||||
|
<div class="hidden space-x-2 font-medium sm:block">
|
||||||
|
<a rel="noopener noreferrer" href="#" class="p-1">Blog</a>
|
||||||
|
<a rel="noopener noreferrer" href="#" class="p-1">Tags</a>
|
||||||
|
<a rel="noopener noreferrer" href="#" class="p-1">Projects</a>
|
||||||
|
<a rel="noopener noreferrer" href="#" class="p-1">About</a>
|
||||||
|
</div>
|
||||||
|
<button aria-label="Toggle Dark Mode" type="button" class="w-8 h-8 p-1 ml-1 mr-1 rounded sm:ml-4">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="text-gray-900">
|
||||||
|
<path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<div class="sm:hidden">
|
||||||
|
<button type="button" aria-label="Toggle Menu" class="w-8 h-8 ml-1 mr-1 rounded">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="text-gray-900">
|
||||||
|
<path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<div class="fixed right-0 z-10 w-full h-full duration-300 ease-in-out transform translate-x-full top-24">
|
||||||
|
<button type="button" aria-label="toggle modal" class="fixed w-full h-full cursor-auto focus:outline-none"></button>
|
||||||
|
<nav class="fixed h-full mt-8">
|
||||||
|
<div class="px-12 py-4">
|
||||||
|
<a rel="noopener noreferrer" href="#" class="text-2xl font-bold tracki text-gray-900">Blog</a>
|
||||||
|
</div>
|
||||||
|
<div class="px-12 py-4">
|
||||||
|
<a rel="noopener noreferrer" href="#" class="text-2xl font-bold tracki text-gray-900">Tags</a>
|
||||||
|
</div>
|
||||||
|
<div class="px-12 py-4">
|
||||||
|
<a rel="noopener noreferrer" href="#" class="text-2xl font-bold tracki text-gray-900">Projects</a>
|
||||||
|
</div>
|
||||||
|
<div class="px-12 py-4">
|
||||||
|
<a rel="noopener noreferrer" href="#" class="text-2xl font-bold tracki text-gray-900">About</a>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<main class="container flex-1 max-w-3xl px-6 mx-auto space-y-12 xl:max-w-5xl">
|
||||||
|
<div class="space-y-6">
|
||||||
|
<h2 class="text-3xl font-extrabold text-gray-50">Recent blog posts</h2>
|
||||||
|
<ul class="space-y-8 xl:space-y-10">
|
||||||
|
<li>
|
||||||
|
<article>
|
||||||
|
<dl>
|
||||||
|
<dt class="sr-only">Published on</dt>
|
||||||
|
<dd class="text-xs text-gray-400">
|
||||||
|
<time datetime="2021-01-12">January 12, 2021</time>
|
||||||
|
</dd>
|
||||||
|
</dl>
|
||||||
|
<div class="space-y-1">
|
||||||
|
<h3 class="text-2xl font-bold tracki">
|
||||||
|
<a rel="noopener noreferrer" href="#" class="text-gray-50">Hendrerit vulputate eu quo.</a>
|
||||||
|
</h3>
|
||||||
|
<p class="max-w-full prose text-gray-100">Qui ei agam assum vivendum, ad nostro mediocrem sit, erant sanctus maiestatis vel no. Reque periculis usu at, id mel dicam impetus aliquip. At discere feugiat qui, meliore lucilius persecuti ut pri, vivendo corpora ne sit.</p>
|
||||||
|
<div class="flex flex-wrap space-x-3">
|
||||||
|
<a rel="noopener noreferrer" href="#" class="text-xs text-violet-400">#angular</a>
|
||||||
|
<a rel="noopener noreferrer" href="#" class="text-xs text-violet-400">#tailwind</a>
|
||||||
|
<a rel="noopener noreferrer" href="#" class="text-xs text-violet-400">#webdev</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<article>
|
||||||
|
<dl>
|
||||||
|
<dt class="sr-only">Published on</dt>
|
||||||
|
<dd class="text-xs text-gray-400">
|
||||||
|
<time datetime="2021-01-12">January 12, 2021</time>
|
||||||
|
</dd>
|
||||||
|
</dl>
|
||||||
|
<div class="space-y-1">
|
||||||
|
<h3 class="text-2xl font-bold tracki">
|
||||||
|
<a rel="noopener noreferrer" href="#" class="text-gray-50"> Vis te oporteat deterruisset.</a>
|
||||||
|
</h3>
|
||||||
|
<p class="max-w-full prose text-gray-100"> Vero facete sea ne. Ludus saperet scriptorem no usu. Legere intellegam delicatissimi te sit. Vis te oporteat deterruisset.</p>
|
||||||
|
<div class="flex flex-wrap space-x-3">
|
||||||
|
<a rel="noopener noreferrer" href="#" class="text-xs text-violet-400">#angular</a>
|
||||||
|
<a rel="noopener noreferrer" href="#" class="text-xs text-violet-400">#tailwind</a>
|
||||||
|
<a rel="noopener noreferrer" href="#" class="text-xs text-violet-400">#webdev</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<article>
|
||||||
|
<dl>
|
||||||
|
<dt class="sr-only">Published on</dt>
|
||||||
|
<dd class="text-xs text-gray-400">
|
||||||
|
<time datetime="2021-01-12">January 12, 2021</time>
|
||||||
|
</dd>
|
||||||
|
</dl>
|
||||||
|
<div class="space-y-1">
|
||||||
|
<h3 class="text-2xl font-bold tracki">
|
||||||
|
<a rel="noopener noreferrer" href="#" class="text-gray-50">Mentitum apeirian vim ne, usu illud ridens cu.</a>
|
||||||
|
</h3>
|
||||||
|
<p class="max-w-full prose text-gray-100">Duo ei paulo decore periculis, sed ex hinc inermis vivendo, meis feugait no mea. Pri magna commodo urbanitas cu, id eos lorem inimicus prodesset. Cu qui vidisse epicurei accusamus.</p>
|
||||||
|
<div class="flex flex-wrap space-x-3">
|
||||||
|
<a rel="noopener noreferrer" href="#" class="text-xs text-violet-400">#angular</a>
|
||||||
|
<a rel="noopener noreferrer" href="#" class="text-xs text-violet-400">#tailwind</a>
|
||||||
|
<a rel="noopener noreferrer" href="#" class="text-xs text-violet-400">#webdev</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="space-y-6">
|
||||||
|
<div>
|
||||||
|
<h2 class="text-3xl font-extrabold">Projects</h2>
|
||||||
|
<p>Showcase your projects with a hero image (16 x 9)</p>
|
||||||
|
</div>
|
||||||
|
<div class="grid grid-cols-1 gap-x-4 gap-y-8 md:grid-cols-2">
|
||||||
|
<a rel="noopener noreferrer" href="#" aria-label="Te nulla oportere reprimique his dolorum" class="flex flex-col bg-gray-900">
|
||||||
|
<img alt="" class="object-cover w-full h-52 bg-gray-500" src="https://source.unsplash.com/200x200/?fashion?1">
|
||||||
|
</a>
|
||||||
|
<div class="flex flex-col flex-1 p-6">
|
||||||
|
<a rel="noopener noreferrer" href="#" aria-label="Te nulla oportere reprimique his dolorum" class="flex flex-col bg-gray-900"></a>
|
||||||
|
<a rel="noopener noreferrer" href="#" class="text-xs tracki uppercase hover:underline text-violet-400">Convenire</a>
|
||||||
|
<h3 class="flex-1 py-2 text-lg font-semibold leadi">Te nulla oportere reprimique his dolorum</h3>
|
||||||
|
<div class="flex flex-wrap justify-between pt-3 space-x-2 text-xs text-gray-400">
|
||||||
|
<span>June 1, 2020</span>
|
||||||
|
<span>2.1K views</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<a rel="noopener noreferrer" href="#" aria-label="Te nulla oportere reprimique his dolorum" class="flex flex-col bg-gray-900">
|
||||||
|
<img alt="" class="object-cover w-full h-52 bg-gray-500" src="https://source.unsplash.com/200x200/?fashion?2">
|
||||||
|
</a>
|
||||||
|
<div class="flex flex-col flex-1 p-6">
|
||||||
|
<a rel="noopener noreferrer" href="#" aria-label="Te nulla oportere reprimique his dolorum" class="flex flex-col bg-gray-900"></a>
|
||||||
|
<a rel="noopener noreferrer" href="#" class="text-xs tracki uppercase hover:underline text-violet-400">Convenire</a>
|
||||||
|
<h3 class="flex-1 py-2 text-lg font-semibold leadi">Te nulla oportere reprimique his dolorum</h3>
|
||||||
|
<div class="flex flex-wrap justify-between pt-3 space-x-2 text-xs text-gray-400">
|
||||||
|
<span>June 2, 2020</span>
|
||||||
|
<span>2.2K views</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<a rel="noopener noreferrer" href="#" aria-label="Te nulla oportere reprimique his dolorum" class="flex flex-col bg-gray-900">
|
||||||
|
<img alt="" class="object-cover w-full h-52 bg-gray-500" src="https://source.unsplash.com/200x200/?fashion?3">
|
||||||
|
</a>
|
||||||
|
<div class="flex flex-col flex-1 p-6">
|
||||||
|
<a rel="noopener noreferrer" href="#" aria-label="Te nulla oportere reprimique his dolorum" class="flex flex-col bg-gray-900"></a>
|
||||||
|
<a rel="noopener noreferrer" href="#" class="text-xs tracki uppercase hover:underline text-violet-400">Convenire</a>
|
||||||
|
<h3 class="flex-1 py-2 text-lg font-semibold leadi">Te nulla oportere reprimique his dolorum</h3>
|
||||||
|
<div class="flex flex-wrap justify-between pt-3 space-x-2 text-xs text-gray-400">
|
||||||
|
<span>June 3, 2020</span>
|
||||||
|
<span>2.3K views</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<a rel="noopener noreferrer" href="#" aria-label="Te nulla oportere reprimique his dolorum" class="flex flex-col bg-gray-900">
|
||||||
|
<img alt="" class="object-cover w-full h-52 bg-gray-500" src="https://source.unsplash.com/200x200/?fashion?4">
|
||||||
|
</a>
|
||||||
|
<div class="flex flex-col flex-1 p-6">
|
||||||
|
<a rel="noopener noreferrer" href="#" aria-label="Te nulla oportere reprimique his dolorum" class="flex flex-col bg-gray-900"></a>
|
||||||
|
<a rel="noopener noreferrer" href="#" class="text-xs tracki uppercase hover:underline text-violet-400">Convenire</a>
|
||||||
|
<h3 class="flex-1 py-2 text-lg font-semibold leadi">Te nulla oportere reprimique his dolorum</h3>
|
||||||
|
<div class="flex flex-wrap justify-between pt-3 space-x-2 text-xs text-gray-400">
|
||||||
|
<span>June 4, 2020</span>
|
||||||
|
<span>2.4K views</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex justify-center">
|
||||||
|
<button type="button" class="px-6 py-3 text-sm hover:underline text-gray-400">Load more posts...</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="space-y-6">
|
||||||
|
<h2 class="text-2xl font-bold md:text-4xl">Timeline</h2>
|
||||||
|
<div class="space-y-8">
|
||||||
|
<div>
|
||||||
|
<h3 class="mb-3 text-lg font-bold md:text-xl">2021</h3>
|
||||||
|
<ul class="space-y-4">
|
||||||
|
<li class="ml-2 space-y-1">
|
||||||
|
<div class="flex items-center">
|
||||||
|
<svg viewBox="0 0 24 24" aria-label="Checkmark" class="w-4 h-4 mr-2 text-violet-400">
|
||||||
|
<g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<path d="M22 11.08V12a10 10 0 11-5.93-9.14"></path>
|
||||||
|
<path d="M22 4L12 14.01l-3-3"></path>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
<h4 class="font-medium">Vel an apeirian assentior</h4>
|
||||||
|
</div>
|
||||||
|
<p class="ml-6 text-gray-400">Eam eu stet porro fabellas, accumsan prodesset cum ad, has cu odio mundi neglegentur. Cu solum vocent fabellas vix, an dicant constituto duo.</p>
|
||||||
|
</li>
|
||||||
|
<li class="ml-2 space-y-1">
|
||||||
|
<div class="flex items-center">
|
||||||
|
<svg viewBox="0 0 24 24" aria-label="Checkmark" class="w-4 h-4 mr-2 text-violet-400">
|
||||||
|
<g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<path d="M22 11.08V12a10 10 0 11-5.93-9.14"></path>
|
||||||
|
<path d="M22 4L12 14.01l-3-3"></path>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
<h4 class="font-medium">Mea ea diam vidisse</h4>
|
||||||
|
</div>
|
||||||
|
<p class="ml-6 text-gray-400"> Vero facete sea ne. Ludus saperet scriptorem no usu. Legere intellegam delicatissimi te sit. Vis te oporteat deterruisset.</p>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 class="mb-3 text-lg font-bold md:text-xl">2020</h3>
|
||||||
|
<ul class="space-y-4">
|
||||||
|
<li class="ml-2 space-y-1">
|
||||||
|
<div class="flex items-center">
|
||||||
|
<svg viewBox="0 0 24 24" aria-label="Checkmark" class="w-4 h-4 mr-2 text-violet-400">
|
||||||
|
<g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<path d="M22 11.08V12a10 10 0 11-5.93-9.14"></path>
|
||||||
|
<path d="M22 4L12 14.01l-3-3"></path>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
<h4 class="font-medium">Vix at latine consulatu.</h4>
|
||||||
|
</div>
|
||||||
|
<p class="ml-6 text-gray-400">Cu eum nostrum repudiare, sed dicat doming integre in. Id scripta percipit lucilius pro, te eam libris verterem.</p>
|
||||||
|
</li>
|
||||||
|
<li class="ml-2 space-y-1">
|
||||||
|
<div class="flex items-center">
|
||||||
|
<svg viewBox="0 0 24 24" aria-label="Checkmark" class="w-4 h-4 mr-2 text-violet-400">
|
||||||
|
<g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<path d="M22 11.08V12a10 10 0 11-5.93-9.14"></path>
|
||||||
|
<path d="M22 4L12 14.01l-3-3"></path>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
<h4 class="font-medium">Eam eu stet porro fabellas</h4>
|
||||||
|
</div>
|
||||||
|
<p class="ml-6 text-gray-400">Cut et laoreet vocibus adipisci. Verear utroque perpetua per eu.</p>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<section class="py-6 rounded-md bg-gray-900 text-gray-50">
|
||||||
|
<div class="container flex flex-col justify-center max-w-3xl p-4 px-6 mx-auto space-y-8 xl:max-w-5xl md:p-10 lg:space-y-0 lg:space-x-12 lg:justify-between lg:flex-row">
|
||||||
|
<div class="flex flex-col space-y-4 text-center lg:text-left">
|
||||||
|
<h1 class="text-5xl font-bold leadi">Stay in the loop</h1>
|
||||||
|
<p>Doloribus consectetur quasi ipsa quo neque culpa blanditiis ducimus recusandae a veritatis optio cumque, in harum ad nam!</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-row items-center self-center justify-center flex-shrink-0 shadow-md lg:justify-end">
|
||||||
|
<div class="flex flex-row">
|
||||||
|
<input type="text" placeholder="example@email.com" class="w-3/5 p-3 rounded-l-lg sm:w-2/3">
|
||||||
|
<button type="button" class="w-2/5 p-3 font-semibold rounded-r-lg sm:w-1/3 bg-violet-400 text-gray-900">Subscribe</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<footer class="container flex flex-col items-center max-w-3xl px-6 mx-auto xl:max-w-5xl">
|
||||||
|
<div class="flex mb-3 space-x-4">
|
||||||
|
<a target="_blank" rel="noopener noreferrer" href="mailto:address@yoursite.com" class="text-sm">
|
||||||
|
<span class="sr-only">mail</span>
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" class="w-6 h-6 fill-current text-violet-400">
|
||||||
|
<path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"></path>
|
||||||
|
<path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"></path>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
<a target="_blank" rel="noopener noreferrer" href="https://github.com" class="text-sm">
|
||||||
|
<span class="sr-only">github</span>
|
||||||
|
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 fill-current text-violet-400">
|
||||||
|
<path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"></path>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
<a target="_blank" rel="noopener noreferrer" href="https://facebook.com" class="text-sm">
|
||||||
|
<span class="sr-only">facebook</span>
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-6 h-6 fill-current text-violet-400">
|
||||||
|
<path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"></path>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
<a target="_blank" rel="noopener noreferrer" href="https://youtube.com" class="text-sm">
|
||||||
|
<span class="sr-only">youtube</span>
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-6 h-6 fill-current text-violet-400">
|
||||||
|
<path d="M23.499 6.203a3.008 3.008 0 00-2.089-2.089c-1.87-.501-9.4-.501-9.4-.501s-7.509-.01-9.399.501a3.008 3.008 0 00-2.088 2.09A31.258 31.26 0 000 12.01a31.258 31.26 0 00.523 5.785 3.008 3.008 0 002.088 2.089c1.869.502 9.4.502 9.4.502s7.508 0 9.399-.502a3.008 3.008 0 002.089-2.09 31.258 31.26 0 00.5-5.784 31.258 31.26 0 00-.5-5.808zm-13.891 9.4V8.407l6.266 3.604z"></path>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
<a target="_blank" rel="noopener noreferrer" href="https://www.linkedin.com" class="text-sm">
|
||||||
|
<span class="sr-only">linkedin</span>
|
||||||
|
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 fill-current text-violet-400">
|
||||||
|
<path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"></path>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
<a target="_blank" rel="noopener noreferrer" href="https://twitter.com/Twitter" class="text-sm">
|
||||||
|
<span class="sr-only">twitter</span>
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-6 h-6 fill-current text-violet-400">
|
||||||
|
<path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"></path>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
8
tailwind.config.mjs
Normal file
8
tailwind.config.mjs
Normal file
|
|
@ -0,0 +1,8 @@
|
||||||
|
/** @type {import('tailwindcss').Config} */
|
||||||
|
export default {
|
||||||
|
content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
|
||||||
|
theme: {
|
||||||
|
extend: {},
|
||||||
|
},
|
||||||
|
plugins: [],
|
||||||
|
}
|
||||||
3
tsconfig.json
Normal file
3
tsconfig.json
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
{
|
||||||
|
"extends": "astro/tsconfigs/strict"
|
||||||
|
}
|
||||||
Loading…
Add table
Reference in a new issue