Showing preview only (300K chars total). Download the full file or copy to clipboard to get everything.
Repository: cssninjaStudio/krypton
Branch: main
Commit: 9826929fae84
Files: 68
Total size: 280.8 KB
Directory structure:
gitextract_i519kzgk/
├── .astro/
│ └── settings.json
├── .github/
│ ├── FUNDING.yml
│ ├── actions/
│ │ └── build-template-action/
│ │ ├── action.yml
│ │ └── script.sh
│ └── workflows/
│ ├── deploy.yml
│ ├── release.yml
│ └── standard-version.yml
├── .gitignore
├── .npmrc
├── .vscode/
│ ├── extensions.json
│ ├── launch.json
│ └── settings.json
├── CHANGELOG.md
├── Dockerfile
├── LICENSE.md
├── README.md
├── astro.config.mjs
├── docker-compose.yml
├── nginx/
│ └── alpinejs.conf
├── package.json
├── postcss.config.cjs
├── public/
│ └── api/
│ └── search.json
└── src/
├── components/
│ ├── BackToTop.astro
│ ├── Footer.astro
│ ├── Navbar.astro
│ ├── NavbarClone.astro
│ ├── Starfall.astro
│ └── Timer.astro
├── env.d.ts
├── js/
│ ├── libs/
│ │ ├── components/
│ │ │ ├── backtotop/
│ │ │ │ └── backtotop.js
│ │ │ ├── countdown/
│ │ │ │ └── countdown.js
│ │ │ ├── index.js
│ │ │ ├── like/
│ │ │ │ └── like.js
│ │ │ ├── navbar/
│ │ │ │ └── navbar.js
│ │ │ ├── pageloader/
│ │ │ │ └── pageloader.js
│ │ │ ├── roadmap/
│ │ │ │ └── roadmap.js
│ │ │ ├── sidebar/
│ │ │ │ └── sidebar.js
│ │ │ └── tabs/
│ │ │ └── tabs.js
│ │ └── utils/
│ │ ├── constants.js
│ │ └── utils.js
│ └── main.js
├── layouts/
│ ├── Default.astro
│ └── Minimal.astro
├── pages/
│ ├── blog-single.astro
│ ├── blog.astro
│ ├── ico.astro
│ ├── index.astro
│ ├── roadmap.astro
│ └── token.astro
└── styles/
├── abstracts/
│ ├── _animations.scss
│ ├── _colors.scss
│ └── _theme-default.scss
├── components/
│ ├── _backtotop.scss
│ ├── _buttons.scss
│ ├── _forms.scss
│ └── _hamburger.scss
├── layout/
│ ├── _blog.scss
│ ├── _faq.scss
│ ├── _features.scss
│ ├── _footer.scss
│ ├── _hero.scss
│ ├── _layout.scss
│ ├── _pageloader.scss
│ ├── _responsive.scss
│ ├── _team.scss
│ └── _timeline.scss
├── main.scss
└── utilities/
└── _utils.scss
================================================
FILE CONTENTS
================================================
================================================
FILE: .astro/settings.json
================================================
{
"devToolbar": {
"enabled": false
},
"_variables": {
"lastUpdateCheck": 1714258612656
}
}
================================================
FILE: .github/FUNDING.yml
================================================
github: cssninjaStudio
================================================
FILE: .github/actions/build-template-action/action.yml
================================================
name: 'build template'
description: 'build template archive'
# We declare that the action takes two arguments in input
inputs:
project:
description: 'Project'
required: true
tag:
description: 'Tag'
required: true
# And ouput one variable that will be available by the workflow
outputs:
filepath:
description: "template archive path"
value: ${{ steps.build.outputs.filepath }}
runs:
using: "composite"
steps:
# Ensure that zip is installed
- run: sudo apt-get install zip
shell: bash
# Here we pass our inputs to the script.sh
- id: build
run: ${{ github.action_path }}/script.sh ${{inputs.project}} ${{inputs.tag}}
shell: bash
================================================
FILE: .github/actions/build-template-action/script.sh
================================================
#!/bin/bash
DIRECTORY=`dirname $0`
INPUT_PROJECT=$1
INPUT_TAG=$2
if [ -z $INPUT_PROJECT ]
then
echo "<project> missing"
echo "Usage: ${0} <project> <tag>"
exit 1
fi
if [ -z $INPUT_TAG ]
then
echo "<tag> missing"
echo "Usage: ${0} <project> <tag>"
exit 1
fi
# Set archive name from arguments
ARCHIVE=template-${INPUT_PROJECT}-${INPUT_TAG}.zip
echo "::group::building ${ARCHIVE}"
echo "::debug::${ARCHIVE}"
# zip sources template-${PROJECT}-${TAG}.zip
zip -r ${ARCHIVE} . \
-x "dist/*" \
-x "node_modules/*" \
-x ".git/*" \
-x ".github/*" \
-x "docker-compose.yml"
# Here we use echo to ouput the variables, usefull for to debug in github ui
echo "$PWD"
echo "$DIRECTORY"
echo "$GITHUB_WORKSPACE"
ls -lh $ARCHIVE
echo "::endgroup::"
echo "- ${INPUT_PROJECT^} ${INPUT_TAG} template built :rocket:" >> $GITHUB_STEP_SUMMARY
# This step is important, it set the "filepath" output variable
# Will be accessible in workflow
echo "filepath=${ARCHIVE}" >> "$GITHUB_OUTPUT"
================================================
FILE: .github/workflows/deploy.yml
================================================
name: deploy
on:
workflow_dispatch:
push:
paths-ignore:
- 'README.md'
- 'CHANGELOG.md'
- 'LICENSE.md'
branches:
- main
concurrency:
group: ${{ github.workflow }}
cancel-in-progress: true
jobs:
docker-build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- name: Set up dockertags
run: |
echo "dockertags=digisquad/cssninja.krypton-demo:latest" >> $GITHUB_ENV
- name: Set up QEMU
uses: docker/setup-qemu-action@v3
- name: Set up Docker Buildx
uses: docker/setup-buildx-action@v3
- name: Login to DockerHub
uses: docker/login-action@v3
with:
username: ${{ secrets.DOCKERHUB_USERNAME }}
password: ${{ secrets.DOCKERHUB_TOKEN }}
- name: Build and push
id: docker_build
uses: docker/build-push-action@v5
timeout-minutes: 60
with:
push: true
tags: ${{ env.dockertags }}
cache-from: type=gha
cache-to: type=gha,mode=max
deploy:
runs-on: ubuntu-latest
needs: [docker-build]
steps:
- uses: actions/checkout@v4
- name: Prepare
uses: appleboy/ssh-action@master
with:
host: ${{ secrets.SSH_HOST }}
username: ${{ secrets.SSH_USER }}
key: ${{ secrets.SSH_PRIVATE_KEY }}
script_stop: true
script: mkdir -p ${{ secrets.HOST_DIRECTORY }}
- name: Publish
uses: appleboy/scp-action@master
with:
host: ${{ secrets.SSH_HOST }}
username: ${{ secrets.SSH_USER }}
key: ${{ secrets.SSH_PRIVATE_KEY }}
source: docker-compose.yml
target: ${{ secrets.HOST_DIRECTORY }}
- name: Deploy
uses: appleboy/ssh-action@master
with:
host: ${{ secrets.SSH_HOST }}
username: ${{ secrets.SSH_USER }}
key: ${{ secrets.SSH_PRIVATE_KEY }}
script_stop: true
script: |
cd ${{ secrets.HOST_DIRECTORY }}
docker compose pull
docker compose up -d --force-recreate --remove-orphans
================================================
FILE: .github/workflows/release.yml
================================================
name: release
on:
# Automatically run when a semver tag is pushed
push:
tags:
- 'v*.*.*'
jobs:
release:
runs-on: ubuntu-latest
steps:
# Checkout action retreive the source (git clone)
- uses: actions/checkout@v4
with:
fetch-depth: 0 # needed to retreive all git history
# Enable corepack, note that nodejs is already installed
- run: corepack enable
# Setup pnpm with cache
- uses: actions/setup-node@v4
with:
node-version: 20
cache: "pnpm"
# Compute tag and capitalized product name
- id: meta
name: release meta
run: |
project=${GITHUB_REPOSITORY#*/}
echo "PROJECT=${project}" >> "$GITHUB_OUTPUT"
echo "PROJECT_CAP=${project^}" >> "$GITHUB_OUTPUT"
echo "TAG=${GITHUB_REF#refs/tags/}" >> "$GITHUB_OUTPUT"
# This is where we generate releases assets.
# It use a github action in the current directory
# which contains a shell script to create the archive.
# The archive path is stored in the output action
- id: build_template
name: build release template
uses: ./.github/actions/build-template-action
with:
tag: ${{ steps.meta.outputs.TAG }}
project: ${{ steps.meta.outputs.PROJECT }}
# We re-generate the changelog using a subset of standard-version
# The content is generated in a temp /CHANGELOG_RELEASE.md file
# It is used to generate the body of the github release
- id: changelog
name: release changelog
run: |
pnpm dlx conventional-changelog-cli -p conventionalcommits -r 2 -o ${{ github.workspace }}/CHANGELOG_RELEASE.md
cat ${{ github.workspace }}/CHANGELOG_RELEASE.md
# Prepare the draft github release
- id: create_release
name: create github draft release
uses: softprops/action-gh-release@v1
with:
# Use outputs from meta and changelog
tag_name: ${{ steps.meta.outputs.TAG }}
name: ${{ steps.meta.outputs.PROJECT_CAP }} ${{ steps.meta.outputs.TAG }}
body_path: ${{ github.workspace }}/CHANGELOG_RELEASE.md
prerelease: false
# The draft is required to allow file upload
draft: true
fail_on_unmatched_files: true
# Here we bind files built by custom actions to the release
files: |
${{ github.workspace }}/${{ steps.build_template.outputs.filepath }}
# Publish the github release
# Dojo listen to those events
- name: publish github draft release
uses: eregon/publish-release@v1
env:
GITHUB_TOKEN: ${{ secrets.APP_GITHUB_TOKEN }}
with:
release_id: ${{ steps.create_release.outputs.id }}
================================================
FILE: .github/workflows/standard-version.yml
================================================
name: standard-version
on:
# Allow to be manually dispatched
workflow_dispatch:
inputs:
options:
description: 'standard-version options'
# Allow to be run via webhooks (Dojo will use this)
repository_dispatch:
types: [standard-version]
jobs:
standard-version:
runs-on: ubuntu-latest
steps:
# Checkout action retreive the source (git clone)
- uses: actions/checkout@v4
with:
fetch-depth: 0 # needed to retreive all git history
token: ${{ secrets.APP_GITHUB_TOKEN }}
# Enable corepack, note that nodejs is already installed
- run: corepack enable
# Setup pnpm with cache
- uses: actions/setup-node@v4
with:
node-version: 20
cache: "pnpm"
# Run "standard-version", which may create a new tag
- run: |
git config user.name digisquad-bot
git config user.email admin@digisquad.io
pnpm dlx standard-version ${{ github.event.inputs.options }}
git push --follow-tags origin main
env:
GITHUB_TOKEN: ${{ secrets.APP_GITHUB_TOKEN }}
================================================
FILE: .gitignore
================================================
# build output
dist/
.output/
*.zip
# 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
================================================
FILE: .npmrc
================================================
# Disable npm warning about missing optional peer dependencies
strict-peer-dependencies=false
legacy-peer-deps=true
# Force pnpm to install all deep dependencies in node_modules
shamefully-hoist=true
# Use v6 lockfile format
use-lockfile-v6=true
================================================
FILE: .vscode/extensions.json
================================================
{
"recommendations": ["astro-build.astro-vscode"],
"unwantedRecommendations": []
}
================================================
FILE: .vscode/launch.json
================================================
{
"version": "0.2.0",
"configurations": [
{
"command": "./node_modules/.bin/astro dev",
"name": "Development server",
"request": "launch",
"type": "node-terminal"
}
]
}
================================================
FILE: .vscode/settings.json
================================================
{
"astro.typescript.enabled": false
}
================================================
FILE: CHANGELOG.md
================================================
# Changelog
All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
## [5.3.0](https://github.com/cssninjaStudio/krypton/compare/v5.2.0...v5.3.0) (2024-04-27)
### Features
* migrate to iconify-icon, update dependencies ([6b63ecd](https://github.com/cssninjaStudio/krypton/commit/6b63ecdb5efc1c7026ec54bd85790ae335f63d8a))
## [5.2.0](https://github.com/cssninjaStudio/krypton/compare/v5.1.0...v5.2.0) (2023-09-17)
### Features
* migrate to Astro 3 ([c8172e0](https://github.com/cssninjaStudio/krypton/commit/c8172e0c798ee30a41a29adbe7548cf3952da113))
* use variable fonts from fontsources ([a8c9e31](https://github.com/cssninjaStudio/krypton/commit/a8c9e314cbab34002d3c218235e3293f9c0d0b57))
### Bug Fixes
* upgrade engines to node 18 and pnpm 8 ([80f1d32](https://github.com/cssninjaStudio/krypton/commit/80f1d3240775ab45e57c76921d568959e61fcddc))
## [5.1.0](https://github.com/cssninjaStudio/krypton/compare/v5.0.0...v5.1.0) (2023-05-03)
### Features
* upgrade dependencies + add unplugin-fonts ([c6647a9](https://github.com/cssninjaStudio/krypton/commit/c6647a9e21c5aaa8682d1e47cb803ac52811a139))
* upgrade to Astro v2 ([ae531d7](https://github.com/cssninjaStudio/krypton/commit/ae531d7c1d6cdafb4e3dea5a9b39c36fa6021729))
## [5.0.0](https://github.com/cssninjaStudio/krypton/compare/v4.1.2...v5.0.0) (2023-01-06)
### ⚠ BREAKING CHANGES
* migrate from gulp to astro
### Features
* migrate from gulp to astro ([366ac64](https://github.com/cssninjaStudio/krypton/commit/366ac64771162216f1acd847a37729abe07278a9))
### [4.1.2](https://github.com/cssninjaStudio/krypton/compare/v4.1.1...v4.1.2) (2022-10-28)
### Features
* update dependencies ([b0b93aa](https://github.com/cssninjaStudio/krypton/commit/b0b93aad9835c91f3926f45140982ef46d1e8d05))
* update dependencies ([7ff5420](https://github.com/cssninjaStudio/krypton/commit/7ff542020297465eb33495e56fa99499c0f4e330))
* update dependencies and worflows ([d0cebff](https://github.com/cssninjaStudio/krypton/commit/d0cebffaca621c32e399ea0859ef5c97b1d724d2))
* update discord url ([63b49bb](https://github.com/cssninjaStudio/krypton/commit/63b49bb402616725b501959812ac061f355ce6da))
* updated dependencies, load bulma from node modules ([e6f023f](https://github.com/cssninjaStudio/krypton/commit/e6f023f767b57c304b9ad4c3726b1e043c6acccf))
================================================
FILE: Dockerfile
================================================
FROM bitnami/node:20 AS build
WORKDIR /app
RUN corepack enable
COPY package.json ./
COPY pnpm-lock.yaml ./
COPY .npmrc ./
RUN pnpm install --frozen-lockfile
COPY . .
RUN pnpm build
FROM bitnami/nginx:1.25 AS prod
WORKDIR /app
COPY --from=build /app/dist .
COPY ./nginx/alpinejs.conf /opt/bitnami/nginx/conf/server_blocks/nginx.conf
================================================
FILE: LICENSE.md
================================================
MIT License
Copyright (c) 2018-2023 cssninjaStudio
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
================================================
FILE: README.md
================================================
# 👋 Krypton
> Krypton is a free ICO / Crypto template built by [cssninjaStudio](https://cssninja.io).
[](https://go.cssninja.io/discord)
## ✌️ preview
Check out the live demo by clicking [here](https://krypton.cssninja.io).
Krypton is built with [Astro](https://astro.build), [Bulma](https://bulma.io) and [Alpine JS](https://github.com/alpinejs/alpine).
## 👍 Features
* Astro v4.x
* Bulma 0.9.x
* Alpine v3.x
## 👌 Usage
1. Install Depedencies
```sh
pnpm i
```
2. Run in dev mode
```sh
pnpm dev
```
3. Or build source
```sh
pnpm build
```
## 🍔 Issues
If you've found an issue or a bug, you can report it in the issues section of this repository. Please try to follow these simple guidelines to report your issue:
* Issue definition
* Expected behaviour
* Actual behaviour
* steps to reproduce
* Already tried fixes (if relevant)
## 🎉 More
Find more premium website and app templates on [Css Ninja](https://cssninja.io/).
## 🚀 About Us
Css Ninja is a web design studio. We build handcrafted and polished templates that will give some hype to your startup or to your next project.
================================================
FILE: astro.config.mjs
================================================
import { defineConfig } from 'astro/config';
// https://astro.build/config
export default defineConfig({});
================================================
FILE: docker-compose.yml
================================================
networks:
cssninja-services:
external: true
services:
krypton-demo:
image: digisquad/cssninja.krypton-demo:latest
networks:
- cssninja-services
restart: 'unless-stopped'
labels:
traefik.enable: true
traefik.docker.network: 'cssninja-services'
traefik.http.routers.krypton-demo.entrypoints: 'http'
traefik.http.routers.krypton-demo.rule: 'Host(`krypton.${HOST:-127.0.0.1.nip.io}`)'
traefik.http.routers.krypton-demo.middlewares: 'https-redirect@file'
traefik.http.services.krypton-demo-https.loadbalancer.server.port: 8080
traefik.http.routers.krypton-demo-https.rule: 'Host(`krypton.${HOST:-127.0.0.1.nip.io}`)'
traefik.http.routers.krypton-demo-https.tls: true
traefik.http.routers.krypton-demo-https.entrypoints: 'https'
traefik.http.routers.krypton-demo-https.tls.certresolver: 'http'
================================================
FILE: nginx/alpinejs.conf
================================================
server {
listen 8080;
server_name 0.0.0.0;
error_page 500 502 503 504 /50x.html;
charset utf-8;
proxy_hide_header X-Frame-Options;
add_header X-Frame-Options "";
# Media: images, icons, video, audio, HTC
location ~* \.(?:jpg|jpeg|gif|png|ico|cur|gz|svg|svgz|mp4|ogg|ogv|webm|htc|woff2)$ {
expires 1y;
access_log off;
add_header Cache-Control "public";
}
# CSS and Javascript
location ~* \.(?:css|js)$ {
expires 1y;
access_log off;
add_header Cache-Control "public";
}
# Allow performing POST requests on static JSON files
location ~* \.(?:json)$ {
error_page 405 =200 $uri;
}
location / {
root /app;
index index.html;
try_files $uri $uri/ /index.html;
}
location = /50x.html {
root /usr/share/nginx/html;
}
}
================================================
FILE: package.json
================================================
{
"name": "krypton",
"version": "5.3.0",
"description": "Krypton - Astro + Bulma + Alpine JS ICO/Crypto Starter",
"type": "module",
"private": true,
"author": {
"name": "cssninjaStudio <hello@cssninja.io> (https://cssninja.io)"
},
"engines": {
"node": ">=18",
"pnpm": ">=8"
},
"license": "MIT",
"scripts": {
"dev": "astro dev",
"start": "astro dev",
"build": "run-s build:*",
"build:astro": "astro build",
"preview": "astro preview",
"astro": "astro"
},
"dependencies": {
"@alpinejs/collapse": "3.13.10",
"@alpinejs/intersect": "3.13.10",
"@alpinejs/persist": "3.13.10",
"alpinejs": "3.13.10",
"astro": "4.7.0",
"bulma": "0.9.4",
"bulma-css-vars": "0.8.0",
"fuse.js": "7.0.0",
"iconify-icon": "^2.0.0",
"js-datepicker": "5.18.2",
"lozad": "1.16.0",
"moment": "2.30.1",
"notyf": "3.10.0",
"particles.js": "2.0.0",
"plyr": "3.7.8",
"sass": "1.75.0",
"simplebar": "6.2.5"
},
"devDependencies": {
"@fontsource-variable/cabin": "^5.0.19",
"@fontsource-variable/open-sans": "^5.0.29",
"autoprefixer": "10.4.19",
"npm-run-all": "4.1.5"
}
}
================================================
FILE: postcss.config.cjs
================================================
module.exports = {
plugins: [
require('autoprefixer'),
],
};
================================================
FILE: public/api/search.json
================================================
[
{
"type": "user",
"title": "Mary Smith",
"content": "Los Angeles",
"photoUrl": "/img/avatars/42.jpg",
"color": null
},
{
"type": "user",
"title": "Janet Briggs",
"content": "Los Angeles",
"photoUrl": null,
"color": "#ff9b17"
},
{
"type": "user",
"title": "Paul Walters",
"content": "San Francisco",
"photoUrl": null,
"color": "#3bf486"
},
{
"type": "user",
"title": "Kristie Wang",
"content": "San Francisco",
"photoUrl": null,
"color": "#7938f4"
},
{
"type": "user",
"title": "Sheryl Allen",
"content": "San Diego",
"photoUrl": null,
"color": "#e73c7e"
},
{
"type": "user",
"title": "Alex Walsh",
"content": "Irvine",
"photoUrl": "/img/avatars/2.jpg",
"color": null
},
{
"type": "user",
"title": "Adam Klinsky",
"content": "Irvine",
"photoUrl": "/img/avatars/6.jpg",
"color": null
},
{
"type": "user",
"title": "Christina Xi",
"content": "Mystic Falls",
"photoUrl": "/img/avatars/5.jpg",
"color": null
},
{
"type": "user",
"title": "Tommy Brucks",
"content": "Los Angeles",
"photoUrl": "/img/avatars/7.jpg",
"color": null
},
{
"type": "user",
"title": "Sally Mitchells",
"content": "San Francisco",
"photoUrl": "/img/avatars/21.jpg",
"color": null
},
{
"type": "file",
"title": "INV-49465",
"content": "Pending invoice",
"photoUrl": "/img/icons/1.svg",
"color": null
},
{
"type": "file",
"title": "INV-49789",
"content": "Pending invoice",
"photoUrl": "/img/icons/1.svg",
"color": null
},
{
"type": "transaction",
"title": "TR-8066",
"content": "Transaction amount: + $874.99",
"photoUrl": "/img/icons/2.svg",
"color": null
},
{
"type": "transaction",
"title": "TR-8067",
"content": "Transaction amount: + $1042.99",
"photoUrl": "/img/icons/2.svg",
"color": null
},
{
"type": "transaction",
"title": "TR-9078",
"content": "Transaction amount: - $2500.00",
"photoUrl": "/img/icons/2.svg",
"color": null
},
{
"type": "transaction",
"title": "TR-8066",
"content": "Transaction amount: - $139.99",
"photoUrl": "/img/icons/2.svg",
"color": null
}
]
================================================
FILE: src/components/BackToTop.astro
================================================
<div
class="progress-wrap"
x-data="initBackToTop()"
x-init="setup()"
x-on:scroll.window="scroll()"
x-bind:class=`{
'active-progress': scrolled,
'': !scrolled,
}`
x-on:click="scrollTop()"
>
<svg class="progress-circle svg-content" width="100%" height="100%" viewBox="-1 -1 102 102">
<path d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98"></path>
</svg>
<svg
class="inner-arrow"
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<line x1="12" y1="19" x2="12" y2="5"></line>
<polyline points="5 12 12 5 19 12"></polyline>
</svg>
</div>
================================================
FILE: src/components/Footer.astro
================================================
<footer class="krypton-footer">
<div class="container">
<!-- Logo -->
<div class="footer-logo">
<a href="#">
<img class="rotating" src="/img/logo/krypton-gradient.svg" alt="" />
<div class="brand-name">Krypton</div>
<div class="brand-subtitle">Blockchain brought to another level</div>
</a>
</div>
<!-- Columns -->
<div class="columns footer-columns is-vcentered">
<div class="column is-4">
<!-- Links group -->
<ul class="footer-links">
<li>
<a href="#">Token</a>
</li>
<li>
<a href="#">ICO</a>
</li>
<li>
<a href="#">Roadmap</a>
</li>
</ul>
</div>
<!-- Newsletter -->
<div class="column is-4">
<div class="subscribe-block">
<form>
<!-- Field -->
<div class="control">
<!-- Special input -->
<input class="krypton-subscribe-input" type="email" name="email" placeholder="" />
<button class="subscribe-button">
<span>Subscribe</span>
</button>
</div>
</form>
</div>
</div>
<!-- Links group -->
<div class="column is-4">
<ul class="footer-links">
<li>
<a href="#">Register</a>
</li>
<li>
<a href="#">Media</a>
</li>
<li>
<a href="#">Telegram</a>
</li>
</ul>
</div>
</div>
<!-- Copyright -->
<p class="k-copyright">© 2018-2023 | Krypton. All Rights Reserved</p>
<br />
<!-- Made by -->
<p class="coded-by">
Designed and Coded by <a href="https://cssninja.io" target="_blank">Css Ninja</a>
</p>
</div>
<!-- Absolute image -->
<img class="solar-system" src="/img/bg/solar.svg" alt="" />
</footer>
================================================
FILE: src/components/Navbar.astro
================================================
<!-- Static navbar -->
<nav x-data="initNavbar()" class="navbar is-light" :class=`{
'is-dark-mobile': mobileOpen,
'': !mobileOpen
}`>
<div class="container">
<!-- Brand -->
<div class="navbar-brand">
<a href="/" class="navbar-item">
<img class="rotating" src="/img/logo/krypton.svg" alt="" />
<span class="brand-name">Krypton</span>
</a>
<!-- Responsive toggle -->
<div class="navbar-burger" @click="openMobileMenu()">
<div class="menu-toggle">
<span class="icon-box-toggle" :class=`{
'active': mobileOpen,
'': !mobileOpen
}`>
<span class="rotate">
<i class="icon-line-top"></i>
<i class="icon-line-center"></i>
<i class="icon-line-bottom"></i>
</span>
</span>
</div>
</div>
</div>
<!-- Menu -->
<div id="navbarMenu" class="navbar-menu light-menu" :class=`{
'is-active': mobileOpen,
'': !mobileOpen
}`>
<div class="navbar-end">
<!-- Menu item -->
<div class="navbar-item is-nav-link">
<a class="is-centered-responsive" href="/token">Token</a>
</div>
<!-- Menu item -->
<div class="navbar-item is-nav-link">
<a class="is-centered-responsive" href="/ico">Ico</a>
</div>
<!-- Menu item -->
<div class="navbar-item is-nav-link">
<a class="is-centered-responsive" href="/roadmap">Roadmap</a>
</div>
<!-- Menu item -->
<div class="navbar-item is-nav-link">
<a class="is-centered-responsive" href="/blog">Media</a>
</div>
<!-- Menu item -->
<div class="navbar-item is-nav-link">
<a class="is-centered-responsive" href="#">
<img class="telegram" src="/img/logo/telegram.svg" alt="" />
Telegram
</a>
</div>
<!-- Sign up -->
<div class="navbar-item">
<a href="#" class="button k-button k-primary raised has-gradient slanted">
<span class="text">Register</span>
<span class="front-gradient"></span>
</a>
</div>
</div>
</div>
</div>
</nav>
<!-- /Static navbar -->
================================================
FILE: src/components/NavbarClone.astro
================================================
<!-- Cloned navbar that comes in on scroll -->
<nav x-data="initNavbar()" x-on:scroll.window="scroll()" id="navbar-clone" class="navbar is-fixed is-dark" :class=`{
'is-active': scrolled,
'': !scrolled
}`>
<div class="container">
<!-- Brand -->
<div class="navbar-brand">
<a href="/" class="navbar-item">
<img class="rotating" src="/img/logo/krypton-gradient.svg" alt="" />
<span class="brand-name">Krypton</span>
</a>
<!-- Responsive toggle -->
<div class="navbar-burger" @click="openMobileMenu()">
<div class="menu-toggle">
<span class="icon-box-toggle" :class=`{
'active': mobileOpen,
'': !mobileOpen
}`>
<span class="rotate">
<i class="icon-line-top"></i>
<i class="icon-line-center"></i>
<i class="icon-line-bottom"></i>
</span>
</span>
</div>
</div>
</div>
<!-- Menu -->
<div id="cloneNavbarMenu" class="navbar-menu" :class=`{
'is-active': mobileOpen,
'': !mobileOpen
}`>
<div class="navbar-end">
<!-- Menu item -->
<div class="navbar-item is-nav-link">
<a class="is-centered-responsive" href="/token">Token</a>
</div>
<!-- Menu item -->
<div class="navbar-item is-nav-link">
<a class="is-centered-responsive" href="/ico">Ico</a>
</div>
<!-- Menu item -->
<div class="navbar-item is-nav-link">
<a class="is-centered-responsive" href="/roadmap">Roadmap</a>
</div>
<!-- Menu item -->
<div class="navbar-item is-nav-link">
<a class="is-centered-responsive" href="/blog">Media</a>
</div>
<!-- Menu item -->
<div class="navbar-item is-nav-link">
<a class="is-centered-responsive" href="#" target="_blank">
<img class="telegram" src="/img/logo/telegram.svg" alt="" />
Telegram
</a>
</div>
<!-- Sign up -->
<div class="navbar-item is-nav-link">
<a href="#" class="button k-button k-primary raised has-gradient slanted">
<span class="text">Register</span>
<span class="front-gradient"></span>
</a>
</div>
</div>
</div>
</div>
</nav>
<!-- /Cloned navbar -->
================================================
FILE: src/components/Starfall.astro
================================================
<div class="starfall">
<div class="falling-star"></div>
<div class="falling-star"></div>
<div class="falling-star"></div>
<div class="falling-star"></div>
<div class="falling-star"></div>
<div class="falling-star"></div>
<div class="falling-star"></div>
<div class="falling-star"></div>
<div class="falling-star"></div>
<div class="falling-star"></div>
<div class="falling-star"></div>
<div class="falling-star"></div>
<div class="falling-star"></div>
<div class="falling-star"></div>
<div class="falling-star"></div>
<div class="falling-star"></div>
<div class="falling-star"></div>
<div class="falling-star"></div>
<div class="falling-star"></div>
<div class="falling-star"></div>
<div class="falling-star"></div>
<div class="falling-star"></div>
<div class="falling-star"></div>
<div class="falling-star"></div>
<div class="falling-star"></div>
<div class="falling-star"></div>
<div class="falling-star"></div>
<div class="falling-star"></div>
<div class="falling-star"></div>
<div class="falling-star"></div>
<div class="falling-star"></div>
<div class="falling-star"></div>
<div class="falling-star"></div>
<div class="falling-star"></div>
<div class="falling-star"></div>
<div class="falling-star"></div>
<div class="falling-star"></div>
<div class="falling-star"></div>
<div class="falling-star"></div>
<div class="falling-star"></div>
</div>
================================================
FILE: src/components/Timer.astro
================================================
<!-- Countdown timer -->
<ul id="countdown">
<li id="days">
<div class="timer-number">00</div>
<div class="label">Days</div>
</li>
<li id="hours">
<div class="timer-number">00</div>
<div class="label">Hours</div>
</li>
<li id="minutes">
<div class="timer-number">00</div>
<div class="label">Minutes</div>
</li>
<li id="seconds">
<div class="timer-number">00</div>
<div class="label">Seconds</div>
</li>
</ul>
================================================
FILE: src/env.d.ts
================================================
/// <reference path="../.astro/types.d.ts" />
/// <reference types="astro/client" />
================================================
FILE: src/js/libs/components/backtotop/backtotop.js
================================================
const progressWrap = document.querySelector(".progress-wrap");
const progressPath = document.querySelector(".progress-wrap path");
const pathLength = progressPath.getTotalLength();
export function initBackToTop() {
return {
scrolled: false,
height: 60,
mobileOpen: false,
setup() {
progressPath.style.transition = progressPath.style.WebkitTransition = "none";
progressPath.style.strokeDasharray = pathLength + " " + pathLength;
progressPath.style.strokeDashoffset = pathLength;
progressPath.getBoundingClientRect();
progressPath.style.transition = progressPath.style.WebkitTransition = "stroke-dashoffset 10ms linear";
},
updateProgress() {
let scrollValue = window.scrollY;
let scrollHeight = document.body.scrollHeight - window.innerHeight;
let progress = pathLength - (scrollValue * pathLength) / scrollHeight;
progressPath.style.strokeDashoffset = progress;
//console.log(scrollValue);
},
scroll() {
this.updateProgress();
let scrollValue = window.scrollY;
if (scrollValue >= this.height) {
this.scrolled = true;
progressWrap.classList.add('active-progress');
} else {
this.scrolled = false;
progressWrap.classList.remove('active-progress');
}
},
scrollTop() {
window.scrollTo({top: 0, behavior: 'smooth'});
return false;
}
};
}
================================================
FILE: src/js/libs/components/countdown/countdown.js
================================================
export function initCountdown() {
return {
setupCountdown() {
// Set the date we're counting down to
var countDownDate = new Date("Oct 24, 2024 07:00:00").getTime();
// Update the count down every 1 second
var x = setInterval(function () {
// Get todays date and time
var now = new Date().getTime();
// Find the distance between now and the count down date
var distance = countDownDate - now;
var d = document;
var daysElement = d.querySelector("#days-count");
var hoursElement = d.querySelector("#hours-count");
var minutesElement = d.querySelector("#minutes-count");
var secondsElement = d.querySelector("#seconds-count");
// Time calculations for days, hours, minutes and seconds
daysElement.textContent = Math.floor(distance / (1000 * 60 * 60 * 24));
hoursElement.textContent = Math.floor(
(distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
);
minutesElement.textContent = Math.floor(
(distance % (1000 * 60 * 60)) / (1000 * 60)
);
secondsElement.textContent = Math.floor(
(distance % (1000 * 60)) / 1000
);
// If the count down is finished, write some text
if (distance < 0) {
clearInterval(x);
}
}, 1000);
},
};
}
================================================
FILE: src/js/libs/components/index.js
================================================
import { initNavbar } from './navbar/navbar';
import { initTabs } from './tabs/tabs';
import { initCountdown } from './countdown/countdown';
import { initRoadmap } from './roadmap/roadmap';
import { initLike } from './like/like';
import { initBackToTop } from './backtotop/backtotop';
window.initNavbar = initNavbar;
window.initTabs = initTabs;
window.initCountdown = initCountdown;
window.initRoadmap = initRoadmap;
window.initLike = initLike;
window.initBackToTop = initBackToTop;
================================================
FILE: src/js/libs/components/like/like.js
================================================
export function initLike() {
return {
isLiked: false,
likeAction() {
this.isLiked = !this.isLiked;
}
}
}
================================================
FILE: src/js/libs/components/navbar/navbar.js
================================================
export function initNavbar() {
return {
scrolled: false,
height: 60,
mobileOpen: false,
scroll() {
let scrollValue = window.scrollY;
if (scrollValue >= this.height) {
this.scrolled = true;
} else {
this.scrolled = false;
}
this.searchExpanded = false;
},
openMobileMenu() {
this.mobileOpen = !this.mobileOpen;
},
openSidebar() {
this.$store.app.isSiderbarOpen = true;
console.log('clicked');
}
}
}
================================================
FILE: src/js/libs/components/pageloader/pageloader.js
================================================
export function initPageLoader() {
window.addEventListener('load', () => {
const pageloader = document.getElementById('pageloader');
const infraloader = document.getElementById('infraloader');
pageloader.classList.toggle('is-active');
var pageloaderTimeout = setTimeout(function () {
infraloader.classList.remove('is-active');
pageloader.classList.toggle('is-active');
clearTimeout(pageloaderTimeout);
}, 1200);
})
}
================================================
FILE: src/js/libs/components/roadmap/roadmap.js
================================================
export function initRoadmap() {
return {
setupRoadmap() {
// define variables
const items = document.querySelectorAll(".main-timeline li");
// check if an element is in viewport
// http://stackoverflow.com/questions/123999/how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport
function isElementInViewport(el) {
let rect = el.getBoundingClientRect();
return (
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom <=
(window.innerHeight || document.documentElement.clientHeight) &&
rect.right <=
(window.innerWidth || document.documentElement.clientWidth)
);
}
function callbackFunc() {
for (var i = 0; i < items.length; i++) {
if (isElementInViewport(items[i])) {
items[i].classList.add("in-view");
}
}
}
// listen for events
window.addEventListener("load", callbackFunc);
window.addEventListener("resize", callbackFunc);
window.addEventListener("scroll", callbackFunc);
},
};
}
================================================
FILE: src/js/libs/components/sidebar/sidebar.js
================================================
export function initSidebar() {
return {
closeSidebar() {
this.$store.app.isSiderbarOpen = false;
},
openedMenu: "",
openSidebarMenu(e) {
const target = e.target.getAttribute("data-menu");
if (this.openedMenu === target) {
this.openedMenu = "";
} else {
this.openedMenu = target;
}
},
};
}
================================================
FILE: src/js/libs/components/tabs/tabs.js
================================================
export function initTabs() {
return {
activeTab: 'tab-1',
switchTabs(e) {
const tab = e.target.getAttribute('data-tab');
this.activeTab = tab;
},
setupCountdown() {
// Set the date we're counting down to
var countDownDate = new Date().getTime() + (1000 * 60 * 60 * 24 * 7); // 7 days from now
// Update the count down every 1 second
var x = setInterval(function () {
// Get todays date and time
var now = new Date().getTime();
// Find the distance between now and the count down date
var distance = countDownDate - now;
var d = document;
var daysElement = d.querySelector("#days-count");
var hoursElement = d.querySelector("#hours-count");
var minutesElement = d.querySelector("#minutes-count");
var secondsElement = d.querySelector("#seconds-count");
// Time calculations for days, hours, minutes and seconds
daysElement.textContent = Math.floor(distance / (1000 * 60 * 60 * 24));
hoursElement.textContent = Math.floor(
(distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
);
minutesElement.textContent = Math.floor(
(distance % (1000 * 60 * 60)) / (1000 * 60)
);
secondsElement.textContent = Math.floor(
(distance % (1000 * 60)) / 1000
);
// If the count down is finished, write some text
if (distance < 0) {
clearInterval(x);
}
}, 1000);
},
}
}
================================================
FILE: src/js/libs/utils/constants.js
================================================
export const env = 'development';
export const themeColors = {
primary: '#00d1b2',
secondary: '#00d1b2',
accent: '#797bf2',
success: '#06d6a0',
info: '#039BE5',
warning: '#faae42',
danger: '#FF7273',
purple: '#8269B2',
blue: '#37C3FF',
green: '#93E088',
lightGreen: '#63ebc6',
yellow: '#FFD66E',
orange: '#FFA981',
lightText: '#a2a5b9',
fadeGrey: '#ededed',
chartGrey: '#B0BDC4'
}
export const demoData = [
{
"type": "user",
"title": "Helen Miller",
"content": "Los Angeles",
"photoUrl": "/img/avatars/helen.jpg",
"color": null
},
{
"type": "user",
"title": "Shane Black",
"content": "Los Angeles",
"photoUrl": null,
"color": "#7F00FF"
},
{
"type": "user",
"title": "Daniella Walters",
"content": "San Francisco",
"photoUrl": null,
"color": "#00D1B2"
},
{
"type": "user",
"title": "Elie Daniels",
"content": "Dublin",
"photoUrl": "/img/avatars/elie.jpg",
"color": null
},
{
"type": "user",
"title": "Terry Daniels",
"content": "New York",
"photoUrl": "/img/avatars/terry.jpg",
"color": null
},
{
"type": "user",
"title": "Alex Walsh",
"content": "Irvine",
"photoUrl": "/img/avatars/alex.jpg",
"color": null
},
{
"type": "user",
"title": "Adam Klinsky",
"content": "Seattle",
"photoUrl": "/img/avatars/eric.png",
"color": null
},
{
"type": "user",
"title": "Christina Song",
"content": "Mystic Falls",
"photoUrl": "/img/avatars/christina.jpg",
"color": null
},
{
"type": "user",
"title": "Barry Smithers",
"content": "Miami",
"photoUrl": "/img/avatars/barry.jpg",
"color": null
},
{
"type": "user",
"title": "Sally Mitchells",
"content": "San Francisco",
"photoUrl": "/img/avatars/sally.jpg",
"color": null
},
{
"type": "file",
"title": "INV-49465",
"content": "Pending invoice",
"photoUrl": "/img/icons/search/1.svg",
"color": null
},
{
"type": "file",
"title": "INV-49789",
"content": "Pending invoice",
"photoUrl": "/img/icons/search/1.svg",
"color": null
},
{
"type": "transaction",
"title": "TR-8066",
"content": "Transaction amount: + $874.99",
"photoUrl": "/img/icons/search/2.svg",
"color": null
},
{
"type": "transaction",
"title": "TR-8067",
"content": "Transaction amount: + $1042.99",
"photoUrl": "/img/icons/search/2.svg",
"color": null
},
{
"type": "transaction",
"title": "TR-9078",
"content": "Transaction amount: - $2500.00",
"photoUrl": "/img/icons/search/2.svg",
"color": null
},
{
"type": "transaction",
"title": "TR-8066",
"content": "Transaction amount: - $139.99",
"photoUrl": "/img/icons/search/2.svg",
"color": null
},
{
"type": "company",
"title": "Airbnb",
"content": "Company",
"photoUrl": "/img/logo/companies/airbnb.svg",
"color": null
},
{
"type": "company",
"title": "Tesla",
"content": "Company",
"photoUrl": "/img/logo/companies/tesla.svg",
"color": null
},
{
"type": "company",
"title": "Alfresco",
"content": "Company",
"photoUrl": "/img/logo/companies/alfresco.svg",
"color": null
},
{
"type": "company",
"title": "H&M",
"content": "Company",
"photoUrl": "/img/logo/companies/hm.svg",
"color": null
},
{
"type": "company",
"title": "Amazon",
"content": "Company",
"photoUrl": "/img/logo/companies/amazon.svg",
"color": null
}
]
================================================
FILE: src/js/libs/utils/utils.js
================================================
export function getUrlParams(param) {
const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
return urlParams.get(param);
}
export function insertBgImages() {
const targets = document.querySelectorAll("[data-background]");
if (typeof targets != "undefined" && targets != null) {
for (var i = 0, len = targets.length; i < len; i++) {
let bgUrl = targets[i].getAttribute("data-background");
targets[i].style.backgroundSize = "cover";
targets[i].style.backgroundRepeat = "no-repeat";
targets[i].style.backgroundImage = `url(${bgUrl})`;
}
}
}
================================================
FILE: src/js/main.js
================================================
//Alpine JS and plugins import
import Alpine from "alpinejs"
import intersect from "@alpinejs/intersect"
import collapse from '@alpinejs/collapse';
import persist from "@alpinejs/persist";
import 'iconify-icon';
window.Alpine = Alpine
//Init intersect plugin
Alpine.plugin(intersect)
//Init persist plugin
Alpine.plugin(persist)
//Init collapse plugin
Alpine.plugin(collapse);
//Init store
Alpine.store("app", {
init() {
this.isDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
},
isDark: Alpine.$persist(false),
isSidebarOpened: Alpine.$persist(false),
isSidebarOpenedMobile: Alpine.$persist(false),
activeSidebar: Alpine.$persist("dashboard"),
activeSidebarMenu: Alpine.$persist(""),
isPanelOpened: Alpine.$persist(false),
});
//Start Alpine JS
Alpine.start()
import { insertBgImages } from "./libs/utils/utils";
import "./libs/components";
document.onreadystatechange = function () {
if (document.readyState == "complete") {
//Switch backgrounds
const changeBackgrounds = insertBgImages();
}
};
================================================
FILE: src/layouts/Default.astro
================================================
---
import { ViewTransitions } from 'astro:transitions'
import Footer from '../components/Footer.astro'
import BackToTop from '../components/BackToTop.astro'
import '@fontsource-variable/cabin/index.css'
import '@fontsource-variable/open-sans/index.css'
import 'simplebar/dist/simplebar.min.css'
import '../styles/main.scss'
const { title } = Astro.props
---
<!doctype html>
<html dir="ltr" lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Krypton {'- ' + title}</title>
<ViewTransitions />
<!-- Google Tag Manager -->
<script>
;(function (w, d, s, l, i) {
w[l] = w[l] || []
w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' })
var f = d.getElementsByTagName(s)[0],
j = d.createElement(s),
dl = l != 'dataLayer' ? '&l=' + l : ''
//@ts-ignore
j.async = true
//@ts-ignore
j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl
f.parentNode?.insertBefore(j, f)
})(window, document, 'script', 'dataLayer', 'GTM-PV65Z24')
</script>
<!-- End Google Tag Manager -->
<link rel="icon" type="image/png" href="/img/favicon.png" />
</head>
<body>
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-PV65Z24" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
<!--page partial-->
<slot />
<!-- Footer -->
<Footer />
<!--Back to top-->
<BackToTop />
<script src="../js/main"></script>
</body>
</html>
================================================
FILE: src/layouts/Minimal.astro
================================================
---
import { ViewTransitions } from 'astro:transitions'
import BackToTop from '../components/BackToTop.astro'
import '@fontsource-variable/cabin/index.css'
import '@fontsource-variable/open-sans/index.css'
import 'simplebar/dist/simplebar.min.css'
import 'plyr/dist/plyr.css'
import '../styles/main.scss'
const { title } = Astro.props
---
<!doctype html>
<html dir="ltr" lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Krypton {'- ' + title}</title>
<ViewTransitions />
<link rel="icon" type="image/png" href="/img/favicon.png" />
</head>
<body>
<!--Body partial-->
<slot />
<!--Back to top-->
<BackToTop />
<script src="../js/main"></script>
</body>
</html>
================================================
FILE: src/pages/blog-single.astro
================================================
---
import Layout from '../layouts/Default.astro'
import Navbar from '../components/Navbar.astro'
import NavbarClone from '../components/NavbarClone.astro'
const title = 'Blog Post'
---
<Layout title={title}>
<div class="media-wrapper">
<!-- Landing page Hero -->
<section class="hero">
<div class="hero-head">
<!-- Cloned navbar -->
<NavbarClone />
<!-- Static navbar -->
<Navbar />
</div>
<!-- Hero Image and Title -->
<div class="hero-body">
<div class="container">
<div class="columns is-vcentered">
<!-- Landing page Title -->
<div class="column is-5 is-offset-1 post-caption">
<div class="divider"></div>
<h1 class="title is-2 is-light is-semibold is-spaced main-title">What is Cryptomining ?</h1>
<div class="author-block">
<div class="image is-32x32">
<img src="/img/team/sandra.jpg" alt="" />
</div>
<div class="author-name">
<span>by Sandra Bernard</span>
<span><small>in</small> Cryptomining<small>, March 28th</small> </span>
</div>
</div>
</div>
<!-- Hero image -->
<div class="column is-5">
<figure class="image">
<img class="blog-featured" src="/img/media/post3.svg" alt="" />
<a
x-data="initLike()"
@click="likeAction()"
href="javascript:void(0);"
class="like-button"
:class=`{
'is-active gelatine': isLiked,
'': !isLiked
}`
>
<span><iconify-icon class="iconify" icon="lucide:heart"></iconify-icon></span>
<span class="like-overlay"></span>
</a>
</figure>
</div>
</div>
</div>
</div>
</section>
<section class="section">
<div class="container">
<div class="columns">
<div class="column is-9">
<!-- Content wrapper -->
<div class="post-body">
<p class="intro">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a
galley of type and scrambled it to make a type specimen book.
</p>
<h2>A way to earn Crypto-money</h2>
<p>
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset
sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.It is a long established fact that a
reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum.
</p>
<blockquote>
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset
sheets containing Lorem Ipsum passages, and more recently with desktop publishing software.
</blockquote>
<p>
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset
sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.It is a long established fact that a
reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum.
</p>
<h2>How it Works</h2>
<p>
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset
sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.It is a long established fact that a
reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum.
</p>
<p>
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset
sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.It is a long established fact that a
reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum.
</p>
<h2>Conclusion</h2>
<p>
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset
sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.It is a long established fact that a
reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum.
</p>
<hr />
</div>
<!-- /Content wrapper -->
<div class="comments">
<div class="comments-heading">3 Comments</div>
<div class="comments-list">
<article class="media is-comment">
<figure class="media-left">
<p class="image is-48x48">
<img src="/img/team/glenn.jpg" />
</p>
</figure>
<div class="media-content">
<div class="user-meta">
<span>Dave Wrapper</span>
<small>4 days ago</small>
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat
facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor.
</p>
<div class="post-controls">
<span><iconify-icon class="iconify" icon="lucide:message-circle"></iconify-icon> </span>
<span><iconify-icon class="iconify" icon="lucide:edit-2"></iconify-icon> </span>
<span><iconify-icon class="iconify" icon="lucide:trash"></iconify-icon> </span>
</div>
</div>
</article>
<article class="media is-comment">
<figure class="media-left">
<p class="image is-48x48">
<img src="https://bitcoin.org/img/icons/opengraph.png" />
</p>
</figure>
<div class="media-content">
<div class="user-meta">
<span>Alina Novalsky</span>
<small>a week ago</small>
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat
facilisis. Lorem ipsum dolor sit amet.
</p>
<div class="post-controls">
<span><iconify-icon class="iconify" icon="lucide:message-circle"></iconify-icon> </span>
<span><iconify-icon class="iconify" icon="lucide:edit-2"></iconify-icon> </span>
<span><iconify-icon class="iconify" icon="lucide:trash"></iconify-icon> </span>
</div>
</div>
</article>
<article class="media is-comment">
<figure class="media-left">
<p class="image is-48x48">
<img src="https://i.pinimg.com/originals/64/57/c2/6457c2ea29e1ede7e4d7b6de3f7181fb.jpg" />
</p>
</figure>
<div class="media-content">
<div class="user-meta">
<span>Dan Novak</span>
<small>march 23 2020</small>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem.</p>
<div class="post-controls">
<span><iconify-icon class="iconify" icon="lucide:message-circle"></iconify-icon> </span>
<span><iconify-icon class="iconify" icon="lucide:edit-2"></iconify-icon> </span>
<span><iconify-icon class="iconify" icon="lucide:trash"></iconify-icon> </span>
</div>
</div>
</article>
<div class="is-form">
<img src="/img/team/mike.jpg" />
<div class="control">
<label>Join the discussion</label>
<textarea class="textarea" rows="5"></textarea>
</div>
</div>
<div class="comment-controls has-text-right">
<a href="#" class="button k-button k-secondary raised has-gradient is-bold">
<span class="text">Post Comment</span>
<span class="front-gradient"></span>
</a>
</div>
</div>
</div>
</div>
<div class="column is-3">
<div class="search-widget">
<div class="control">
<!-- Field -->
<div class="control-material is-primary">
<input class="material-input" type="email" required />
<span class="material-highlight"></span>
<span class="bar"></span>
<label>Search articles</label>
<span><iconify-icon class="iconify" icon="lucide:search"></iconify-icon></span>
</div>
</div>
</div>
<div class="categories-widget">
<div class="widget-title">Categories</div>
<ul class="categories-list">
<li>
<a href="#">
<span>All Posts</span>
</a>
</li>
<li>
<a href="#">
<span>Blockchain</span>
</a>
</li>
<li>
<a href="#">
<span>Crypto Market</span>
</a>
</li>
<li>
<a class="is-active" href="#">
<span>Cryptomining</span>
<span class="tag">6</span>
</a>
</li>
<li>
<a href="#">
<span>Featured</span>
</a>
</li>
</ul>
</div>
<div class="tags-widget">
<div class="widget-title">Tags</div>
<div class="tags">
<span class="tag">Bitcoin</span>
<span class="tag">Cryptocurrency</span>
<span class="tag">Blockchain</span>
<span class="tag">Ethereum</span>
</div>
</div>
<div class="archives-widget">
<div class="widget-title">Archives</div>
<div class="select" tabindex="1">
<input class="selectopt" name="test" type="radio" id="opt1" checked />
<label for="opt1" class="option">Select Month</label>
<input class="selectopt" name="test" type="radio" id="opt2" />
<label for="opt2" class="option">January</label>
<input class="selectopt" name="test" type="radio" id="opt3" />
<label for="opt3" class="option">February</label>
<input class="selectopt" name="test" type="radio" id="opt4" />
<label for="opt4" class="option">March</label>
<input class="selectopt" name="test" type="radio" id="opt5" />
<label for="opt5" class="option">April</label>
<input class="selectopt" name="test" type="radio" id="opt6" />
<label for="opt6" class="option">May</label>
<input class="selectopt" name="test" type="radio" id="opt7" />
<label for="opt7" class="option">June</label>
<input class="selectopt" name="test" type="radio" id="opt8" />
<label for="opt8" class="option">July</label>
<input class="selectopt" name="test" type="radio" id="opt9" />
<label for="opt9" class="option">August</label>
<input class="selectopt" name="test" type="radio" id="opt10" />
<label for="opt10" class="option">September</label>
<input class="selectopt" name="test" type="radio" id="opt11" />
<label for="opt11" class="option">October</label>
<input class="selectopt" name="test" type="radio" id="opt12" />
<label for="opt12" class="option">November</label>
<input class="selectopt" name="test" type="radio" id="opt13" />
<label for="opt13" class="option">December</label>
</div>
</div>
<div class="posts-widget">
<div class="widget-title">Recent posts</div>
<div class="recent-posts">
<div class="recent-post">
<img src="/img/team/glenn.jpg" />
<div class="meta">
<a href="#">Featured on Coinative</a>
<span>by Glenn Dunward</span>
</div>
</div>
<div class="recent-post">
<img src="/img/team/john.jpg" />
<div class="meta">
<a href="#">Blockchain for Dummies</a>
<span>by John Cambell</span>
</div>
</div>
<div class="recent-post">
<img src="/img/team/joshua.jpg" />
<div class="meta">
<a href="#">The Krypton chain algorythm</a>
<span>by Joshua Stevens</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="follow-us is-small">
<div data-aos="fade-up" data-aos-delay="100" data-aos-offset="100" data-aos-easing="ease-out-quart">
<a href="#">
<svg aria-labelledby="simpleicons-gitlab-icon" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path
d="M23.955 13.587l-1.342-4.135-2.664-8.189c-.135-.423-.73-.423-.867 0L16.418 9.45H7.582L4.919 1.263C4.783.84 4.185.84 4.05 1.26L1.386 9.449.044 13.587c-.121.375.014.789.331 1.023L12 23.054l11.625-8.443c.318-.235.453-.647.33-1.024"
></path>
</svg>
</a>
</div>
<div data-aos="fade-up" data-aos-delay="200" data-aos-offset="100" data-aos-easing="ease-out-quart">
<a href="#">
<svg aria-labelledby="simpleicons-telegram-icon" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M9.028 20.837c-.714 0-.593-.271-.839-.949l-2.103-6.92L22.263 3.37"></path>
<path d="M9.028 20.837c.552 0 .795-.252 1.105-.553l2.941-2.857-3.671-2.214"></path>
<path
d="M9.403 15.213l8.89 6.568c1.015.56 1.748.271 2-.942l3.62-17.053c.372-1.487-.564-2.159-1.534-1.72L1.125 10.263c-1.45.582-1.443 1.392-.264 1.753l5.455 1.7L18.94 5.753c.595-.36 1.143-.167.694.232"
></path>
</svg>
</a>
</div>
<div data-aos="fade-up" data-aos-delay="300" data-aos-offset="100" data-aos-easing="ease-out-quart">
<a href="#">
<svg aria-labelledby="simpleicons-messenger-icon" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path
d="M12 0C5.373 0 0 4.974 0 11.111c0 3.498 1.744 6.614 4.469 8.654V24l4.088-2.242c1.092.3 2.246.464 3.443.464 6.627 0 12-4.975 12-11.11S18.627 0 12 0zm1.191 14.963l-3.055-3.26-5.963 3.26L10.732 8l3.131 3.259L19.752 8l-6.561 6.963z"
></path>
</svg>
</a>
</div>
<div data-aos="fade-up" data-aos-delay="400" data-aos-offset="100" data-aos-easing="ease-out-quart">
<a href="#">
<svg aria-labelledby="simpleicons-slack-icon" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M9.879 10.995l1.035 3.085 3.205-1.074-1.035-3.074-3.205 1.08v-.017z"></path>
<path
d="M18.824 14.055l-1.555.521.54 1.61c.218.65-.135 1.355-.786 1.574-.15.045-.285.067-.435.063-.511-.015-.976-.338-1.155-.849l-.54-1.607-3.21 1.073.539 1.608c.211.652-.135 1.358-.794 1.575-.15.048-.285.067-.435.064-.51-.015-.976-.34-1.156-.85l-.539-1.619-1.561.524c-.15.045-.285.061-.435.061-.511-.016-.976-.345-1.155-.855-.225-.66.135-1.364.78-1.575l1.56-.525L7.5 11.76l-1.551.525c-.141.048-.285.066-.428.064-.495-.016-.975-.338-1.141-.848-.209-.65.135-1.354.796-1.574l1.56-.52-.54-1.605c-.21-.654.136-1.359.796-1.575.659-.22 1.363.136 1.574.783l.539 1.608L12.3 7.544l-.54-1.605c-.209-.645.135-1.35.789-1.574.652-.211 1.359.135 1.575.791l.54 1.621 1.555-.51c.651-.219 1.356.135 1.575.779.218.654-.135 1.359-.784 1.575l-1.557.524 1.035 3.086 1.551-.516c.652-.211 1.358.135 1.575.795.22.66-.135 1.365-.779 1.574l-.011-.029zm4.171-5.356C20.52.456 16.946-1.471 8.699 1.005.456 3.479-1.471 7.051 1.005 15.301c2.475 8.245 6.046 10.17 14.296 7.694 8.245-2.475 10.17-6.046 7.694-14.296z"
></path>
</svg>
</a>
</div>
<div data-aos="fade-up" data-aos-delay="500" data-aos-offset="100" data-aos-easing="ease-out-quart">
<a href="#">
<svg aria-labelledby="simpleicons-linkedin-icon" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<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.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 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>
</div>
</div>
</div>
</section>
</div>
</Layout>
================================================
FILE: src/pages/blog.astro
================================================
---
import Layout from '../layouts/Default.astro'
import Navbar from '../components/Navbar.astro'
import NavbarClone from '../components/NavbarClone.astro'
const title = 'Blog'
---
<Layout title={title}>
<div class="media-wrapper">
<!-- Landing page Hero -->
<section class="hero">
<div class="hero-head">
<!-- Cloned navbar -->
<NavbarClone />
<!-- Static navbar -->
<Navbar />
</div>
<!-- Hero Image and Title -->
<div class="hero-body">
<div class="container">
<div class="columns is-vcentered">
<!-- Landing page Title -->
<div class="column is-5 is-offset-1 landing-caption">
<div class="divider"></div>
<h1 class="title is-1 is-light is-semibold is-spaced main-title">News & Media</h1>
<h2 class="subtitle is-6 is-light is-thin">Cryptocurrency brought to the next level. Join our ICO for supercharged rates.</h2>
</div>
<!-- Hero image -->
<div class="column is-6">
<figure class="image">
<img src="/img/illustrations/media.svg" alt="" />
</figure>
</div>
</div>
</div>
</div>
</section>
<section class="section">
<div class="container">
<div class="columns">
<div class="column is-9">
<!-- Content wrapper -->
<div class="content-wrapper">
<!-- Post -->
<div class="blog-post">
<a href="/blog-single">
<!-- Featured image -->
<div class="featured-image">
<img src="/img/media/post4.svg" alt="" />
</div>
<!-- Content -->
<div class="content">
<div class="post-title">
Featured on Coinative <span class="blog-date">02.06.2020</span>
</div>
<p>Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı...</p>
<!-- Meta -->
<div class="post-meta">
<div class="author-block">
<div class="image is-32x32">
<img src="/img/team/glenn.jpg" alt="" />
</div>
<div class="author-name">
<span>by Glenn Dunward</span>
<span><small>in</small> Featured</span>
</div>
</div>
<div class="stats-block">
<div class="comments">
<iconify-icon class="iconify" icon="lucide:message-circle"></iconify-icon>
<span>0</span>
</div>
<div class="likes">
<iconify-icon class="iconify" icon="lucide:heart"></iconify-icon>
<span>39</span>
</div>
</div>
</div>
</div>
</a>
</div>
<!-- Post -->
<div class="blog-post">
<a href="/blog-single">
<!-- Featured image -->
<div class="featured-image">
<img src="/img/media/post1.svg" alt="" />
</div>
<!-- Content -->
<div class="content">
<div class="post-title">
Blockchain for dummies <span class="blog-date">27.05.2020</span>
</div>
<p>Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı...</p>
<!-- Meta -->
<div class="post-meta">
<div class="author-block">
<div class="image is-32x32">
<img src="/img/team/john.jpg" alt="" />
</div>
<div class="author-name">
<span>by John Cambell</span>
<span><small>in</small> Blockchain</span>
</div>
</div>
<div class="stats-block">
<div class="comments">
<iconify-icon class="iconify" icon="lucide:message-circle"></iconify-icon>
<span>0</span>
</div>
<div class="likes">
<iconify-icon class="iconify" icon="lucide:heart"></iconify-icon>
<span>39</span>
</div>
</div>
</div>
</div>
</a>
</div>
<!-- Post -->
<div class="blog-post">
<a href="/blog-single">
<!-- Featured image -->
<div class="featured-image">
<img src="/img/media/post5.svg" alt="" />
</div>
<!-- Content -->
<div class="content">
<div class="post-title">
Featured on Bit It <span class="blog-date">23.04.2020</span>
</div>
<p>Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı...</p>
<!-- Meta -->
<div class="post-meta">
<div class="author-block">
<div class="image is-32x32">
<img src="/img/team/helen.jpg" alt="" />
</div>
<div class="author-name">
<span>by Helen Miller</span>
<span><small>in</small> Featured</span>
</div>
</div>
<div class="stats-block">
<div class="comments">
<iconify-icon class="iconify" icon="lucide:message-circle"></iconify-icon>
<span>0</span>
</div>
<div class="likes">
<iconify-icon class="iconify" icon="lucide:heart"></iconify-icon>
<span>39</span>
</div>
</div>
</div>
</div>
</a>
</div>
<!-- Post -->
<div class="blog-post">
<a href="/blog-single">
<!-- Featured image -->
<div class="featured-image">
<img src="/img/media/post2.svg" alt="" />
</div>
<!-- Content -->
<div class="content">
<div class="post-title">
The Krypton chain algorythm <span class="blog-date">15.04.2020</span>
</div>
<p>Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı...</p>
<!-- Meta -->
<div class="post-meta">
<div class="author-block">
<div class="image is-32x32">
<img src="/img/team/joshua.jpg" alt="" />
</div>
<div class="author-name">
<span>by Joshua Stevens</span>
<span><small>in</small> Blockchain</span>
</div>
</div>
<div class="stats-block">
<div class="comments">
<iconify-icon class="iconify" icon="lucide:message-circle"></iconify-icon>
<span>0</span>
</div>
<div class="likes">
<iconify-icon class="iconify" icon="lucide:heart"></iconify-icon>
<span>39</span>
</div>
</div>
</div>
</div>
</a>
</div>
<!-- Post -->
<div class="blog-post">
<a href="/blog-single">
<!-- Featured image -->
<div class="featured-image">
<img src="/img/media/post3.svg" alt="" />
</div>
<!-- Content -->
<div class="content">
<!--div class="rounded"></div-->
<div class="post-title">
What is Crypto mining ? <span class="blog-date">02.04.2020</span>
</div>
<p>Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı...</p>
<!-- Meta -->
<div class="post-meta">
<div class="author-block">
<div class="image is-32x32">
<img src="/img/team/sandra.jpg" alt="" />
</div>
<div class="author-name">
<span>by Sandra Bernard</span>
<span><small>in</small> Cryptomining</span>
</div>
</div>
<div class="stats-block">
<div class="comments">
<iconify-icon class="iconify" icon="lucide:message-circle"></iconify-icon>
<span>0</span>
</div>
<div class="likes">
<iconify-icon class="iconify" icon="lucide:heart"></iconify-icon>
<span>39</span>
</div>
</div>
</div>
</div>
</a>
</div>
<!-- CTA -->
<div class="cta-wrapper has-text-centered">
<a href="#" class="button k-button k-primary raised has-gradient is-bold">
<span class="text">Load More</span>
<span class="front-gradient"></span>
</a>
</div>
</div>
<!-- /Content wrapper -->
</div>
<div class="column is-3">
<div class="search-widget">
<div class="control">
<!-- Field -->
<div class="control-material is-primary">
<input class="material-input" type="email" required />
<span class="material-highlight"></span>
<span class="bar"></span>
<label>Search articles</label>
<iconify-icon class="iconify" icon="lucide:search"></iconify-icon>
</div>
</div>
</div>
<div class="categories-widget">
<div class="widget-title">Categories</div>
<ul class="categories-list">
<li>
<a class="is-active" href="#">
<span>All Posts</span>
<span class="tag">53</span>
</a>
</li>
<li><a href="#">Blockchain</a></li>
<li><a href="#">Crypto Market</a></li>
<li><a href="#">Cryptomining</a></li>
<li><a href="#">Featured</a></li>
</ul>
</div>
<div class="tags-widget">
<div class="widget-title">Tags</div>
<div class="tags">
<span class="tag">Bitcoin</span>
<span class="tag">Cryptocurrency</span>
<span class="tag">Blockchain</span>
<span class="tag">Ethereum</span>
</div>
</div>
<div class="archives-widget">
<div class="widget-title">Archives</div>
<div class="select" tabindex="1">
<input class="selectopt" name="test" type="radio" id="opt1" checked />
<label for="opt1" class="option">Select Month</label>
<input class="selectopt" name="test" type="radio" id="opt2" />
<label for="opt2" class="option">January</label>
<input class="selectopt" name="test" type="radio" id="opt3" />
<label for="opt3" class="option">February</label>
<input class="selectopt" name="test" type="radio" id="opt4" />
<label for="opt4" class="option">March</label>
<input class="selectopt" name="test" type="radio" id="opt5" />
<label for="opt5" class="option">April</label>
<input class="selectopt" name="test" type="radio" id="opt6" />
<label for="opt6" class="option">May</label>
<input class="selectopt" name="test" type="radio" id="opt7" />
<label for="opt7" class="option">June</label>
<input class="selectopt" name="test" type="radio" id="opt8" />
<label for="opt8" class="option">July</label>
<input class="selectopt" name="test" type="radio" id="opt9" />
<label for="opt9" class="option">August</label>
<input class="selectopt" name="test" type="radio" id="opt10" />
<label for="opt10" class="option">September</label>
<input class="selectopt" name="test" type="radio" id="opt11" />
<label for="opt11" class="option">October</label>
<input class="selectopt" name="test" type="radio" id="opt12" />
<label for="opt12" class="option">November</label>
<input class="selectopt" name="test" type="radio" id="opt13" />
<label for="opt13" class="option">December</label>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</Layout>
================================================
FILE: src/pages/ico.astro
================================================
---
import Layout from '../layouts/Default.astro'
import Navbar from '../components/Navbar.astro'
import NavbarClone from '../components/NavbarClone.astro'
const title = 'ICO'
---
<Layout title={title}>
<!-- Landing page Hero -->
<section class="hero is-fullheight has-big-dark-gradient">
<div class="hero-head">
<!-- Cloned navbar -->
<NavbarClone />
<!-- Static navbar -->
<Navbar />
</div>
<!-- Hero Image and Title -->
<div class="hero-body">
<div class="container">
<div class="columns is-vcentered">
<!-- Landing page Title -->
<div class="column is-5 landing-caption">
<h1 class="title is-3 is-light is-semibold is-spaced main-title has-text-centered">Login to ICO</h1>
<form class="login-form">
<!-- Field -->
<div class="control-material is-primary">
<input class="material-input" type="email" required />
<span class="material-highlight"></span>
<span class="bar"></span>
<label>Email</label>
</div>
<!-- Field -->
<div class="control-material is-primary">
<input class="material-input" type="password" required />
<span class="material-highlight"></span>
<span class="bar"></span>
<label>Password</label>
</div>
<!-- Submit -->
<div>
<button class="button is-button k-button k-primary raised has-gradient is-bold is-fullwidth">
<span class="text">Login</span>
<span class="front-gradient"></span>
</button>
</div>
</form>
</div>
<!-- Hero image -->
<div class="column is-5 is-offset-1 ico-countdown">
<div x-data="initCountdown()" x-init="setupCountdown()" class="ico-card animated preFadeInUp fadeInUp">
<!-- Countdown -->
<ul id="countdown" class="is-ico">
<li id="days">
<div id="days-count" class="timer-number">00</div>
<div class="label">Days</div>
</li>
<li id="hours">
<div id="hours-count" class="timer-number">00</div>
<div class="label">Hours</div>
</li>
<li id="minutes">
<div id="minutes-count" class="timer-number">00</div>
<div class="label">Minutes</div>
</li>
<li id="seconds">
<div id="seconds-count" class="timer-number">00</div>
<div class="label">Seconds</div>
</li>
</ul>
<!-- Progress bar -->
<div class="progress-block">
<!-- Tags -->
<div class="progress-tags">
<div>Presale</div>
<div>Soft Cap</div>
<div>Bonus</div>
</div>
<progress class="progress ico-progress" value="65" max="100">65%</progress>
</div>
<!-- Button -->
<div class="button-block">
<a href="#" class="button k-button k-secondary raised has-gradient is-bold is-fullwidth rounded">
<span class="text">Register for ICO</span>
<span class="front-gradient"></span>
</a>
</div>
<!-- Icons -->
<div class="icon-block">
<i class="cf cf-btc"></i>
<i class="cf cf-eth"></i>
<i class="cf cf-ltc"></i>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Hero footer -->
<div class="hero-foot">
<div class="container">
<div class="tabs is-centered">
<!-- Client / partner list -->
<ul>
<li>
<a><img class="hero-logo" src="/img/clients/cryptomarket.svg" alt="" /> </a>
</li>
<li>
<a><img class="hero-logo" src="/img/clients/bitit.svg" alt="" /> </a>
</li>
<li>
<a><img class="hero-logo" src="/img/clients/coin.svg" alt="" /> </a>
</li>
</ul>
</div>
</div>
</div>
</section>
<!-- /Landing page Hero -->
</Layout>
================================================
FILE: src/pages/index.astro
================================================
---
import Layout from '../layouts/Default.astro'
import Navbar from '../components/Navbar.astro'
import NavbarClone from '../components/NavbarClone.astro'
import Starfall from '../components/Starfall.astro'
const title = 'Home'
---
<Layout title={title}>
<div class="dark-wrapper">
<!-- Landing page Hero -->
<section class="hero is-fullheight is-transparent">
<div class="hero-head">
<!-- Cloned navbar -->
<NavbarClone />
<!-- Static navbar -->
<Navbar />
</div>
<!-- Animated particles -->
<Starfall />
<!-- Hero Image and Title -->
<div class="hero-body">
<div class="container">
<div class="columns is-vcentered">
<!-- Landing page Title -->
<div class="column is-5 landing-caption">
<h1 class="title is-1 is-light is-semibold is-spaced main-title">Cryptocurrency Exchange Market</h1>
<h2 class="subtitle is-5 is-light is-thin">Cryptocurrency brought to the next level. Join our ICO for supercharged rates.</h2>
<!-- CTA -->
<p class="buttons">
<a href="#start" class="button k-button k-primary raised has-gradient is-fat is-bold">
<span class="text">Get Started</span>
<span class="front-gradient"></span>
</a>
<a href="#" class="button k-button k-primary raised has-gradient is-fat is-bold">
<span class="text">Learn More</span>
<span class="front-gradient"></span>
</a>
</p>
</div>
<!-- Hero image -->
<div class="column is-7">
<figure class="image">
<img src="/img/illustrations/buildings.svg" alt="" />
</figure>
</div>
</div>
</div>
</div>
<!-- Hero footer -->
<div class="hero-foot">
<div class="container">
<div class="tabs is-centered">
<!-- Client / partner list -->
<ul>
<li>
<a><img class="hero-logo" src="/img/clients/cryptomarket.svg" alt="" /> </a>
</li>
<li>
<a><img class="hero-logo" src="/img/clients/bitit.svg" alt="" /> </a>
</li>
<li>
<a><img class="hero-logo" src="/img/clients/coin.svg" alt="" /> </a>
</li>
</ul>
</div>
</div>
</div>
</section>
<!-- /Landing page Hero -->
<!-- Icon Features section -->
<section id="start" class="section is-transparent is-relative">
<!-- Container -->
<div class="container">
<div class="has-text-centered">
<a class="button k-button k-secondary raised has-gradient is-fat is-bold rounded">
<span class="text">Buy Tokens 20% off</span>
<span class="front-gradient"></span>
</a>
<div class="buy-title">We Accept</div>
<div class="accepted-currencies">
<div>
<iconify-icon class="iconify" icon="cryptocurrency:btc"></iconify-icon>
</div>
<div>
<iconify-icon class="iconify" icon="cryptocurrency:eth"></iconify-icon>
</div>
<div>
<iconify-icon class="iconify" icon="cryptocurrency:ltc"></iconify-icon>
</div>
<div>
<iconify-icon class="iconify" icon="cryptocurrency:xem"></iconify-icon>
</div>
</div>
</div>
<!-- Content wrapper -->
<div class="content-wrapper is-medium mt-6">
<div class="columns is-vcentered">
<!-- Feature -->
<div class="column is-4">
<div class="feature">
<img src="/img/icons/chained.svg" alt="" data-aos="fade-up" data-aos-delay="100" data-aos-offset="200" data-aos-easing="ease-out-quart" />
<h4 class="title is-6 is-tight is-light">Chaining</h4>
<p>Supercharged features to make you happy and lorem ipsum sit dolor amet</p>
</div>
</div>
<!-- Feature -->
<div class="column is-4">
<div class="feature">
<img src="/img/icons/stacked.svg" alt="" data-aos="fade-up" data-aos-delay="300" data-aos-offset="200" data-aos-easing="ease-out-quart" />
<h4 class="title is-6 is-tight is-light">Stacking</h4>
<p>Supercharged features to make you happy and lorem ipsum sit dolor amet</p>
</div>
</div>
<!-- Feature -->
<div class="column is-4">
<div class="feature">
<img src="/img/icons/compact.svg" alt="" data-aos="fade-up" data-aos-delay="500" data-aos-offset="200" data-aos-easing="ease-out-quart" />
<h4 class="title is-6 is-tight is-light">Managing</h4>
<p>Supercharged features to make you happy and lorem ipsum sit dolor amet</p>
</div>
</div>
</div>
<!-- Play video button -->
<div class="cta-wrapper has-text-centered">
<div class="video-button levitate js-modal-btn" data-video-id="6WG7D47tGb0">
<img src="/img/icons/play.svg" alt="" />
</div>
</div>
</div>
<!-- Content wrapper -->
</div>
<!-- /Container -->
</section>
<!-- /Icon Features section -->
<!-- Side Features section -->
<section id="big-gradient" class="section is-transparent">
<!-- Container -->
<div class="container">
<!-- Divider -->
<div class="divider is-centered"></div>
<!-- Title & subtitle -->
<h2 class="title is-light is-semibold has-text-centered is-spaced">Decentralized Exchange</h2>
<h4 class="subtitle is-6 is-light has-text-centered is-compact">
Viderer malorum sadipscing cum ei. Eu impetus perfecto sit, no sea labore detraxit. Primis mediocrem necessitatibus an vis. Ut sea pertinax perpetua, eruditi volumus quaestio ex mel, has ei
tota homero.
</h4>
<!-- Content wrapper -->
<div class="content-wrapper is-large">
<div class="columns is-vcentered">
<!-- Feature content -->
<div class="column is-5 is-offset-1">
<div class="side-feature-content">
<h3 class="title is-4 is-light">
<img src="/img/icons/ico/bitbanner.svg" alt="" />
<span>Token Building</span>
</h3>
<div class="divider is-long"></div>
<p class="is-light">
Viderer malorum sadipscing cum ei. Eu impetus perfecto sit, no sea labore detraxit. Primis mediocrem necessitatibus an vis. Eu impetus perfecto sit, no sea labore detraxit.
</p>
<div class="cta-wrapper">
<a href="/token" class="button k-button k-primary raised has-gradient is-bold">
<span class="text">Learn More</span>
<span class="front-gradient"></span>
</a>
</div>
</div>
</div>
<!-- Feature image -->
<div class="column is-7">
<img class="side-feature" src="/img/illustrations/token.svg" alt="" />
</div>
</div>
<div class="columns is-vcentered">
<!-- Feature image desktop -->
<div class="column is-7 is-hidden-mobile">
<img class="side-feature" src="/img/illustrations/blockchain-blocks.svg" alt="" />
</div>
<!-- Feature content -->
<div class="column is-5">
<div class="side-feature-content">
<h3 class="title is-4 is-light">
<img src="/img/icons/ico/bitnetwork.svg" alt="" />
<span>Cascading Blockchain</span>
</h3>
<div class="divider is-long"></div>
<p class="is-light">
Viderer malorum sadipscing cum ei. Eu impetus perfecto sit, no sea labore detraxit. Primis mediocrem necessitatibus an vis. Eu impetus perfecto sit, no sea labore detraxit.
</p>
<div class="cta-wrapper">
<a href="#" class="button k-button k-primary raised has-gradient is-bold">
<span class="text">Whitepaper</span>
<span class="front-gradient"></span>
</a>
</div>
</div>
</div>
<!-- Feature image only for mobile -->
<div class="column is-7 is-hidden-desktop is-hidden-tablet">
<img class="side-feature" src="/img/illustrations/blockchain-blocks.svg" alt="" />
</div>
</div>
<div class="columns is-vcentered">
<!-- Feature content -->
<div class="column is-5 is-offset-1">
<div class="side-feature-content">
<h3 class="title is-4 is-light">
<img src="/img/icons/ico/bitmining.svg" alt="" />
<span>Crypto Farming</span>
</h3>
<div class="divider is-long"></div>
<p class="is-light">
Viderer malorum sadipscing cum ei. Eu impetus perfecto sit, no sea labore detraxit. Primis mediocrem necessitatibus an vis. Eu impetus perfecto sit, no sea labore detraxit.
</p>
<div class="cta-wrapper">
<a href="#" class="button k-button k-primary raised has-gradient is-bold">
<span class="text">Join the ICO</span>
<span class="front-gradient"></span>
</a>
</div>
</div>
</div>
<!-- Feature image -->
<div class="column is-7">
<img class="side-feature" src="/img/illustrations/crypto-mining.svg" alt="" />
</div>
</div>
</div>
<!-- /Content wrapper -->
</div>
<!-- /Container -->
</section>
<!-- /Side Features section -->
<!-- ICO section -->
<section class="section is-medium is-end">
<!-- Container -->
<div class="container">
<!-- Divider -->
<div class="divider is-centered"></div>
<!-- Title & subtitle -->
<h2 class="title is-light is-semibold has-text-centered is-spaced">Join our ICO Now</h2>
<h4 class="subtitle is-6 is-light has-text-centered is-compact">
Viderer malorum sadipscing cum ei. Eu impetus perfecto sit, no sea labore detraxit. Primis mediocrem necessitatibus an vis. Ut sea pertinax perpetua, eruditi volumus quaestio ex mel, has ei
tota homero.
</h4>
<!-- Content wrapper -->
<div class="content-wrapper is-large">
<!-- Flying tabs wrapper -->
<div x-data="initTabs()" class="flying-wrapper">
<!-- Tabs container -->
<div class="flying-tabs-container">
<!-- Tabs -->
<div class="flying-tabs">
<div
@click="switchTabs($event)"
class="flying-child tab-1"
data-tab="tab-1"
:class=`{
'is-active': activeTab === 'tab-1',
'': activeTab != 'tab-1'
}`
>
<a href="#">ICO</a>
</div>
<div
@click="switchTabs($event)"
class="flying-child tab-2"
data-tab="tab-2"
:class=`{
'is-active': activeTab === 'tab-2',
'': activeTab != 'tab-2'
}`
>
<a href="#">TOKEN</a>
</div>
<div
@click="switchTabs($event)"
class="flying-child tab-3"
data-tab="tab-3"
:class=`{
'is-active': activeTab === 'tab-3',
'': activeTab != 'tab-3'
}`
>
<a href="#">PROFIT</a>
</div>
<div
@click="switchTabs($event)"
class="flying-child tab-4"
data-tab="tab-4"
:class=`{
'is-active': activeTab === 'tab-4',
'': activeTab != 'tab-4'
}`
>
<a href="#">BOUNTY</a>
</div>
<div class="slider"></div>
</div>
</div>
<!-- Tabs content wrapper -->
<div class="flying-tabs-content">
<!-- Tab 1 -->
<div class="tab-content" :class=`{
'is-active': activeTab === 'tab-1',
'': activeTab != 'tab-1'
}`>
<div class="columns is-vcentered tab-content-wrapper">
<!-- ICO Terms -->
<div class="column is-5 is-offset-1">
<div class="text-content">
<h4 class="title is-6 is-light animated preFadeInUp fadeInUp">ICO TERMS</h4>
<ul class="custom-bullet-list">
<li class="animated preFadeInUp fadeInUp">
<span>Presale</span>
<br />
<span class="item-content">Presale starts on Apr 8 2023 (9:00am GMT)</span>
</li>
<li class="animated preFadeInUp fadeInUp">
<span>Sale</span>
<br />
<span class="item-content">Token sales starts on Jun 8 2023 (12:00am GMT)</span>
</li>
<li class="animated preFadeInUp fadeInUp">
<span>Bonus</span>
<br />
<span class="item-content">Bonus starts on July 29 2023 (12:00am GMT)</span>
</li>
</ul>
</div>
</div>
<!-- ICO COuntdown -->
<div class="column is-5">
<!-- Card -->
<div x-data="initCountdown()" x-init="setupCountdown()" class="ico-card animated preFadeInUp fadeInUp">
<!-- Countdown -->
<ul id="countdown" class="is-ico">
<li id="days">
<div id="days-count" class="timer-number">00</div>
<div class="label">Days</div>
</li>
<li id="hours">
<div id="hours-count" class="timer-number">00</div>
<div class="label">Hours</div>
</li>
<li id="minutes">
<div id="minutes-count" class="timer-number">00</div>
<div class="label">Minutes</div>
</li>
<li id="seconds">
<div id="seconds-count" class="timer-number">00</div>
<div class="label">Seconds</div>
</li>
</ul>
<!-- Progress bar -->
<div class="progress-block">
<!-- Tags -->
<div class="progress-tags">
<div>Presale</div>
<div>Soft Cap</div>
<div>Bonus</div>
</div>
<progress class="progress ico-progress" value="65" max="100"> 65% </progress>
</div>
<!-- Button -->
<div class="button-block">
<a href="#" class="button k-button k-secondary raised has-gradient is-bold is-fullwidth rounded">
<span class="text">Join the ICO Now</span>
<span class="front-gradient"></span>
</a>
</div>
<!-- Icons -->
<div class="icon-block">
<i class="cf cf-btc"></i>
<i class="cf cf-eth"></i>
<i class="cf cf-ltc"></i>
</div>
</div>
</div>
</div>
</div>
<!-- /Tab 1 -->
<!-- Tab 2 -->
<div
class="tab-content"
:class=`{
'is-active': activeTab === 'tab-2',
'': activeTab != 'tab-2'
}`
>
<div class="columns is-vcentered tab-content-wrapper">
<!-- Tab content -->
<div class="column is-5 is-offset-1">
<div class="text-content">
<h4 class="title is-6 is-light animated preFadeInUp fadeInUp">TOKEN RATES</h4>
<ul class="custom-bullet-list">
<li class="animated preFadeInUp fadeInUp">
<span>Tokens Sales</span>
<br />
<span class="item-content">1 200 000 KP (22%)</span>
</li>
<li class="animated preFadeInUp fadeInUp">
<span>Token Exchange</span>
<br />
<span class="item-content">1 BTC = 2200 KP, 1 ETH = 825 KP</span>
</li>
<li class="animated preFadeInUp fadeInUp">
<span>Transations</span>
<br />
<span class="item-content">Minimal transaction amount is 1 BTC, 1 ETH, 1 LTC</span>
</li>
</ul>
</div>
</div>
<!-- Tab image -->
<div class="column is-5">
<img class="animated preFadeInUp fadeInUp" src="/img/illustrations/tokens.svg" alt="" />
</div>
</div>
</div>
<!-- /Tab 2 -->
<!-- Tab 3 -->
<div
class="tab-content"
:class=`{
'is-active': activeTab === 'tab-3',
'': activeTab != 'tab-3'
}`
>
<div class="columns is-vcentered tab-content-wrapper">
<!-- Tab content -->
<div class="column is-5 is-offset-1">
<div class="text-content">
<h4 class="title is-6 is-light animated preFadeInUp fadeInUp">PROFIT</h4>
<ul class="custom-bullet-list">
<li class="animated preFadeInUp fadeInUp">
<span>Tokens Sales</span>
<br />
<span class="item-content">1 200 000 KP (22%)</span>
</li>
<li class="animated preFadeInUp fadeInUp">
<span>Token Exchange</span>
<br />
<span class="item-content">1 BTC = 2200 KP, 1 ETH = 825 KP</span>
</li>
<li class="animated preFadeInUp fadeInUp">
<span>Transations</span>
<br />
<span class="item-content">Minimal transaction amount is 1 BTC, 1 ETH, 1 LTC</span>
</li>
</ul>
</div>
</div>
<!-- Tab image -->
<div class="column is-5">
<img class="animated preFadeInUp fadeInUp" src="/img/illustrations/charts.svg" alt="" />
</div>
</div>
</div>
<!-- /Tab 3 -->
<!-- Tab 4 -->
<div
class="tab-content"
:class=`{
'is-active': activeTab === 'tab-4',
'': activeTab != 'tab-4'
}`
>
<div class="columns is-vcentered tab-content-wrapper">
<!-- Tab content -->
<div class="column is-5 is-offset-1">
<div class="text-content">
<h4 class="title is-6 is-light animated preFadeInUp fadeInUp">REWARDS & BOUNTIES</h4>
<ul class="custom-bullet-list">
<li class="animated preFadeInUp fadeInUp">
<span>Tokens Sales</span>
<br />
<span class="item-content">1 200 000 KP (22%)</span>
</li>
<li class="animated preFadeInUp fadeInUp">
<span>Token Exchange</span>
<br />
<span class="item-content">1 BTC = 2200 KP, 1 ETH = 825 KP</span>
</li>
<li class="animated preFadeInUp fadeInUp">
<span>Transations</span>
<br />
<span class="item-content">Minimal transaction amount is 1 BTC, 1 ETH, 1 LTC</span>
</li>
</ul>
</div>
</div>
<!-- Tab image -->
<div class="column is-5">
<img class="animated preFadeInUp fadeInUp" src="/img/illustrations/bounty.svg" alt="" />
</div>
</div>
</div>
<!-- /Tab 4 -->
</div>
</div>
</div>
<!-- Content wrapper -->
</div>
<!-- /Container -->
</section>
<!-- /ICO section -->
<!-- App section -->
<section class="section is-medium is-darkest">
<!-- Container -->
<div class="container">
<!-- Divider -->
<div class="divider is-centered"></div>
<!-- Title -->
<h2 class="title is-light is-semibold has-text-centered is-spaced">Live Tracking</h2>
<h4 class="subtitle is-6 is-light has-text-centered is-compact">
Viderer malorum sadipscing cum ei. Eu impetus perfecto sit, no sea labore detraxit. Primis mediocrem necessitatibus an vis. Ut sea pertinax perpetua, eruditi volumus quaestio ex mel, has ei
tota homero.
</h4>
<!-- Content wrapper -->
<div class="content-wrapper is-large">
<!-- Row -->
<div class="columns is-vcentered">
<div class="column is-5">
<!-- Side feature -->
<div class="side-feature-content">
<!-- Title -->
<h3 class="title is-4 is-light">
<img src="/img/icons/ico/bitnetwork.svg" alt="" />
<span>Track everything with the App</span>
</h3>
<!-- Divider -->
<div class="divider is-long"></div>
<p class="is-light">
Viderer malorum sadipscing cum ei. Eu impetus perfecto sit, no sea labore detraxit. Primis mediocrem necessitatibus an vis. Eu impetus perfecto sit, no sea labore detraxit.
</p>
<!-- CTA -->
<div class="cta-wrapper">
<a href="#" class="button k-button k-primary raised has-gradient is-fat is-bold">
<span class="text">Download App</span>
<span class="front-gradient"></span>
</a>
</div>
</div>
</div>
<!-- Featured image -->
<div class="column is-7">
<img class="side-feature" src="/img/illustrations/krypton-app.svg" alt="" />
</div>
</div>
</div>
<!-- /Content wrapper -->
</div>
<!-- /Container -->
</section>
<!-- /App section -->
<!-- Company section -->
<section class="section is-medium has-big-dark-gradient">
<!-- Container -->
<div class="container">
<!-- Divider -->
<div class="divider is-centered"></div>
<!-- Title & subtitle -->
<h2 class="title is-light is-semibold has-text-centered is-spaced">Our Team</h2>
<h4 class="subtitle is-6 is-light has-text-centered is-compact">
Viderer malorum sadipscing cum ei. Eu impetus perfecto sit, no sea labore detraxit. Primis mediocrem necessitatibus an vis. Ut sea pertinax perpetua, eruditi volumus quaestio ex mel, has ei
tota homero.
</h4>
<!-- Content wrapper -->
<div class="content-wrapper is-large">
<div class="columns is-vcentered">
<div class="column is-hidden-mobile"></div>
<!-- Team member -->
<div class="column is-3">
<div class="team-member-container">
<!-- Card -->
<div class="dark-card">
<!-- Avatar wrapper -->
<div class="avatar">
<!-- Svg circle -->
<svg class="circle-chart" viewBox="0 0 33.83098862 33.83098862" width="140" height="140" xmlns="http://www.w3.org/2000/svg">
<!-- Track -->
<circle class="circle-chart-background" stroke-width="1" fill="none" cx="16.91549431" cy="16.91549431" r="15.91549431"></circle>
<!-- Stroke -->
<circle class="circle-chart-circle" stroke-width="1" stroke-dasharray="33,100" stroke-linecap="round" fill="none" cx="16.91549431" cy="16.91549431" r="15.91549431"></circle>
</svg>
<!-- Sketeched face -->
<img class="is-sketch" src="/img/team/john.svg" alt="" />
<!-- Real face -->
<img class="is-real" src="/img/team/john.jpg" alt="" />
</div>
<!-- Member meta -->
<div class="member-info">
<h4 class="title is-light is-6 is-tight">John Cambell</h4>
<div class="position">Founder / Ceo</div>
<p class="description">John is a Crypto enthusiast. He was one of the first bolckchain actors in the world.</p>
</div>
</div>
</div>
</div>
<!-- Team member -->
<div class="column is-3">
<div class="team-member-container">
<div class="dark-card">
<div class="avatar">
<svg class="circle-chart" viewBox="0 0 33.83098862 33.83098862" width="140" height="140" xmlns="http://www.w3.org/2000/svg">
<circle class="circle-chart-background" stroke-width="1" fill="none" cx="16.91549431" cy="16.91549431" r="15.91549431"></circle>
<circle class="circle-chart-circle" stroke-width="1" stroke-dasharray="33,100" stroke-linecap="round" fill="none" cx="16.91549431" cy="16.91549431" r="15.91549431"></circle>
</svg>
<img class="is-sketch" src="/img/team/lucy.svg" alt="" />
<img class="is-real" src="/img/team/lucy.jpg" alt="" />
</div>
<div class="member-info">
<h4 class="title is-light is-6 is-tight">Lucy Wong</h4>
<div class="position">Founder / Cfo</div>
<p class="description">Lucy is a Crypto enthusiast. He was one of the first bolckchain actors in the world.</p>
</div>
</div>
</div>
</div>
<!-- Team member -->
<div class="column is-3">
<div class="team-member-container">
<div class="dark-card">
<div class="avatar">
<svg class="circle-chart" viewBox="0 0 33.83098862 33.83098862" width="140" height="140" xmlns="http://www.w3.org/2000/svg">
<circle class="circle-chart-background" stroke-width="1" fill="none" cx="16.91549431" cy="16.91549431" r="15.91549431"></circle>
<circle class="circle-chart-circle" stroke-width="1" stroke-dasharray="33,100" stroke-linecap="round" fill="none" cx="16.91549431" cy="16.91549431" r="15.91549431"></circle>
</svg>
<img class="is-sketch" src="/img/team/joshua.svg" alt="" />
<img class="is-real" src="/img/team/joshua.jpg" alt="" />
</div>
<div class="member-info">
<h4 class="title is-light is-6 is-tight">Joshua Stevens</h4>
<div class="position">Engineer</div>
<p class="description">Joshua is a Crypto enthusiast. He was one of the first bolckchain actors in the world.</p>
</div>
</div>
</div>
</div>
<div class="column is-hidden-mobile"></div>
</div>
<div class="columns is-vcentered">
<div class="column is-hidden-mobile"></div>
<!-- Team member -->
<div class="column is-3">
<div class="team-member-container">
<div class="dark-card">
<div class="avatar">
<svg class="circle-chart" viewBox="0 0 33.83098862 33.83098862" width="140" height="140" xmlns="http://www.w3.org/2000/svg">
<circle class="circle-chart-background" stroke-width="1" fill="none" cx="16.91549431" cy="16.91549431" r="15.91549431"></circle>
<circle class="circle-chart-circle" stroke-width="1" stroke-dasharray="33,100" stroke-linecap="round" fill="none" cx="16.91549431" cy="16.91549431" r="15.91549431"></circle>
</svg>
<img class="is-sketch" src="/img/team/sara.svg" alt="" />
<img class="is-real" src="/img/team/sara.jpg" alt="" />
</div>
<div class="member-info">
<h4 class="title is-light is-6 is-tight">Sara Jackson</h4>
<div class="position">Founder / Ceo</div>
<p class="description">Sara is a Crypto enthusiast. He was one of the first bolckchain actors in the world.</p>
</div>
</div>
</div>
</div>
<!-- Team member -->
<div class="column is-3">
<div class="team-member-container">
<div class="dark-card">
<div class="avatar">
<svg class="circle-chart" viewBox="0 0 33.83098862 33.83098862" width="140" height="140" xmlns="http://www.w3.org/2000/svg">
<circle class="circle-chart-background" stroke-width="1" fill="none" cx="16.91549431" cy="16.91549431" r="15.91549431"></circle>
<circle class="circle-chart-circle" stroke-width="1" stroke-dasharray="33,100" stroke-linecap="round" fill="none" cx="16.91549431" cy="16.91549431" r="15.91549431"></circle>
</svg>
<img class="is-sketch" src="/img/team/mike.svg" alt="" />
<img class="is-real" src="/img/team/mike.jpg" alt="" />
</div>
<div class="member-info">
<h4 class="title is-light is-6 is-tight">Mike Kovalsky</h4>
<div class="position">Founder / Ceo</div>
<p class="description">Sara is a Crypto enthusiast. He was one of the first bolckchain actors in the world.</p>
</div>
</div>
</div>
</div>
<!-- Team member -->
<div class="column is-3">
<div class="team-member-container">
<div class="dark-card">
<div class="avatar">
<svg class="circle-chart" viewBox="0 0 33.83098862 33.83098862" width="140" height="140" xmlns="http://www.w3.org/2000/svg">
<circle class="circle-chart-background" stroke-width="1" fill="none" cx="16.91549431" cy="16.91549431" r="15.91549431"></circle>
<circle class="circle-chart-circle" stroke-width="1" stroke-dasharray="33,100" stroke-linecap="round" fill="none" cx="16.91549431" cy="16.91549431" r="15.91549431"></circle>
</svg>
<img class="is-sketch" src="/img/team/sandra.svg" alt="" />
<img class="is-real" src="/img/team/sandra.jpg" alt="" />
</div>
<div class="member-info">
<h4 class="title is-light is-6 is-tight">Sandra Bernard</h4>
<div class="position">Founder / Ceo</div>
<p class="description">Sandra is a Crypto enthusiast. He was one of the first bolckchain actors in the world.</p>
</div>
</div>
</div>
</div>
<div class="column is-hidden-mobile"></div>
</div>
<!-- Spaced divider -->
<div class="divider is-centered is-spacer"></div>
<!-- Title & subtitle -->
<h2 class="title is-light is-semibold has-text-centered is-spaced">Advisors</h2>
<h4 class="subtitle is-6 is-light has-text-centered is-compact">
Viderer malorum sadipscing cum ei. Eu impetus perfecto sit, no sea labore detraxit. Primis mediocrem necessitatibus an vis. Ut sea pertinax perpetua, eruditi volumus quaestio ex mel, has
ei tota homero.
</h4>
<!-- Content wrapper -->
<div class="content-wrapper is-large">
<div class="columns is-vcentered is-multiline">
<!-- Advisor -->
<div class="column is-one-fifth">
<div class="advisor-container has-text-centered">
<!-- Picture -->
<div class="photo">
<img src="/img/team/a1.jpg" alt="" data-aos="fade-down" data-aos-delay="100" data-aos-offset="200" data-aos-easing="ease-out-quart" />
</div>
<!-- Meta -->
<div class="info">
<div class="subtitle is-6 is-light is-compressed">Rafael Agostino</div>
<div class="position">Board Member</div>
</div>
</div>
</div>
<!-- Advisor -->
<div class="column is-one-fifth">
<div class="advisor-container has-text-centered">
<div class="photo">
<img src="/img/team/a2.jpg" alt="" data-aos="fade-down" data-aos-delay="300" data-aos-offset="200" data-aos-easing="ease-out-quart" />
</div>
<div class="info">
<div class="subtitle is-6 is-light is-compressed">Marysa Vosniak</div>
<div class="position">Board Member</div>
</div>
</div>
</div>
<!-- Advisor -->
<div class="column is-one-fifth">
<div class="advisor-container has-text-centered">
<div class="photo">
<img src="/img/team/a3.jpg" alt="" data-aos="fade-down" data-aos-delay="500" data-aos-offset="200" data-aos-easing="ease-out-quart" />
</div>
<div class="info">
<div class="subtitle is-6 is-light is-compressed">Glenn Mitchells</div>
<div class="position">Board Member</div>
</div>
</div>
</div>
<!-- Advisor -->
<div class="column is-one-fifth">
<div class="advisor-container has-text-centered">
<div class="photo">
<img src="/img/team/a4.jpg" alt="" data-aos="fade-down" data-aos-delay="700" data-aos-offset="200" data-aos-easing="ease-out-quart" />
</div>
<div class="info">
<div class="subtitle is-6 is-light is-compressed">Gary Simmons</div>
<div class="position">Crypto Finance Analyst</div>
</div>
</div>
</div>
<!-- Advisor -->
<div class="column is-one-fifth">
<div class="advisor-container has-text-centered">
<div class="photo">
<img src="/img/team/a5.jpg" alt="" data-aos="fade-down" data-aos-delay="900" data-aos-offset="200" data-aos-easing="ease-out-quart" />
</div>
<div class="info">
<div class="subtitle is-6 is-light is-compressed">Olga Broniszewska</div>
<div class="position">Crypto Finance Analyst</div>
</div>
</div>
</div>
</div>
</div>
<!-- /Content wrapper -->
<!-- Spaced divider -->
<div class="divider is-centered is-spacer"></div>
<!-- Title & subtitle -->
<h2 class="title is-light is-semibold has-text-centered is-spaced">FAQ</h2>
<h4 class="subtitle is-6 is-light has-text-centered is-compact">
Viderer malorum sadipscing cum ei. Eu impetus perfecto sit, no sea labore detraxit. Primis mediocrem necessitatibus an vis. Ut sea pertinax perpetua, eruditi volumus quaestio ex mel, has
ei tota homero.
</h4>
<!-- Content wrapper -->
<div class="content-wrapper is-large">
<div class="columns">
<div class="column is-5 is-offset-1">
<!-- Accordion -->
<div class="accordion">
<!-- Option -->
<div class="accordion-option">
<input type="checkbox" id="toggle1" class="accordion-toggle" />
<label class="accordion-title" for="toggle1"> What is Blockchain ? </label>
<div class="accordion-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
</div>
<!-- Option -->
<div class="accordion-option">
<input type="checkbox" id="toggle2" class="accordion-toggle" />
<label class="accordion-title" for="toggle2"> What is ICO ? </label>
<div class="accordion-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
</div>
<!-- Option -->
<div class="accordion-option">
<input type="checkbox" id="toggle3" class="accordion-toggle" />
<label class="accordion-title" for="toggle3"> Where to get the Whitepaper ? </label>
<div class="accordion-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
</div>
<!-- Option -->
<div class="accordion-option">
<input type="checkbox" id="toggle4" class="accordion-toggle" />
<label class="accordion-title" for="toggle4"> What is Krypton Core Innovation ? </label>
<div class="accordion-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
</div>
<!-- Option -->
<div class="accordion-option">
<input type="checkbox" id="toggle5" class="accordion-toggle" />
<label class="accordion-title" for="toggle5"> When will be the platform released ? </label>
<div class="accordion-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
</div>
</div>
<!-- /Accordion -->
</div>
<div class="column is-5">
<!-- Accordion -->
<div class="accordion">
<!-- Option -->
<div class="accordion-option">
<input type="checkbox" id="toggle6" class="accordion-toggle" />
<label class="accordion-title" for="toggle6"> How much tokens will be sold ? </label>
<div class="accordion-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
</div>
<!-- Option -->
<div class="accordion-option">
<input type="checkbox" id="toggle7" class="accordion-toggle" />
<label class="accordion-title" for="toggle7"> What happens if Soft Cap isn't reached ? </label>
<div class="accordion-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
</div>
<!-- Option -->
<div class="accordion-option">
<input type="checkbox" id="toggle8" class="accordion-toggle" />
<label class="accordion-title" for="toggle8"> How much do you want to raise with the ICO ? </label>
<div class="accordion-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
</div>
<!-- Option -->
<div class="accordion-option">
<input type="checkbox" id="toggle9" class="accordion-toggle" />
<label class="accordion-title" for="toggle9"> When will the tokens be distributed ? </label>
<div class="accordion-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
</div>
<!-- Option -->
<div class="accordion-option">
<input type="checkbox" id="toggle10" class="accordion-toggle" />
<label class="accordion-title" for="toggle10"> Will their be Bounties ? </label>
<div class="accordion-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
</div>
</div>
<!-- /Accordion -->
</div>
</div>
</div>
<!-- /Content wrapper -->
<!-- Spaced divider -->
<div class="divider is-centered is-spacer"></div>
<!-- Title & subtitle -->
<h2 class="title is-light is-semibold has-text-centered is-spaced">Media & Partners</h2>
<h4 class="subtitle is-6 is-light has-text-centered is-compact">
Viderer malorum sadipscing cum ei. Eu impetus perfecto sit, no sea labore detraxit. Primis mediocrem necessitatibus an vis. Ut sea pertinax perpetua, eruditi volumus quaestio ex mel, has
ei tota homero.
</h4>
<!-- Content wrapper -->
<div class="content-wrapper is-large">
<div class="columns">
<!-- Media section -->
<div class="column is-10 is-offset-1">
<!-- Post -->
<div class="blog-post">
<a href="#">
<!-- Featured image -->
<div class="featured-image">
<img src="/img/media/post1.svg" alt="" />
</div>
<!-- Content -->
<div class="content">
<div class="post-title">
Blockchain for dummies
<span class="blog-date">27.05.2021</span>
</div>
<p>Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı...</p>
<!-- Meta -->
<div class="post-meta">
<div class="author-block">
<div class="image is-32x32">
<img src="/img/team/john.jpg" alt="" />
</div>
<div class="author-name">by John Cambell</div>
</div>
<div class="stats-block">
<div class="comments">
<iconify-icon class="iconify" icon="lucide:message-circle"></iconify-icon>
<span>0</span>
</div>
<div class="likes">
<iconify-icon class="iconify" icon="lucide:heart"></iconify-icon>
<span>39</span>
</div>
</div>
</div>
</div>
</a>
</div>
<!-- Post -->
<div class="blog-post">
<a href="#">
<!-- Featured image -->
<div class="featured-image">
<img src="/img/media/post2.svg" alt="" />
</div>
<!-- Content -->
<div class="content">
<div class="post-title">
The Krypton chain algorythm
<span class="blog-date">15.04.2021</span>
</div>
<p>Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı...</p>
<!-- Meta -->
<div class="post-meta">
<div class="author-block">
<div class="image is-32x32">
<img src="/img/team/joshua.jpg" alt="" />
</div>
<div class="author-name">by Joshua Stevens</div>
</div>
<div class="stats-block">
<div class="comments">
<iconify-icon class="iconify" icon="lucide:message-circle"></iconify-icon>
<span>0</span>
</div>
<div class="likes">
<iconify-icon class="iconify" icon="lucide:heart"></iconify-icon>
<span>39</span>
</div>
</div>
</div>
</div>
</a>
</div>
<!-- Post -->
<div class="blog-post">
<a href="#">
<!-- Featured image -->
<div class="featured-image">
<img src="/img/media/post3.svg" alt="" />
</div>
<!-- Content -->
<div class="content">
<!--div class="rounded"></div-->
<div class="post-title">
What is Crypto mining ?
<span class="blog-date">02.04.2021</span>
</div>
<p>Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı...</p>
<!-- Meta -->
<div class="post-meta">
<div class="author-block">
<div class="image is-32x32">
<img src="/img/team/sandra.jpg" alt="" />
</div>
<div class="author-name">by Sandra Bernard</div>
</div>
<div class="stats-block">
<div class="comments">
<iconify-icon class="iconify" icon="lucide:message-circle"></iconify-icon>
<span>0</span>
</div>
<div class="likes">
<iconify-icon class="iconify" icon="lucide:heart"></iconify-icon>
<span>39</span>
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<!-- /Media section -->
</div>
<!-- CTA -->
<div class="cta-wrapper has-text-centered">
<a href="#" class="button k-button k-primary raised has-gradient is-fat is-bold">
<span class="text">More Articles</span>
<span class="front-gradient"></span>
</a>
</div>
<!-- Partner logos -->
<div class="partners">
<!-- Partner -->
<div class="partner-item">
<img src="/img/clients/cryptomarket.svg" alt="" />
</div>
<!-- Partner -->
<div class="partner-item">
<img src="/img/clients/bitit.svg" alt="" />
</div>
<!-- Partner -->
<div class="partner-item">
<img src="/img/clients/coin.svg" alt="" />
</div>
</div>
</div>
<!-- /Content wrapper -->
</div>
<!-- /Content wrapper -->
</div>
</section>
<!-- /Company section -->
<!-- Contact section -->
<section class="section is-medium is-darkest">
<!-- Container -->
<div class="container">
<!-- Divider -->
<div class="divider is-centered"></div>
<!-- Title & subtitle -->
<h2 class="title is-light is-semibold has-text-centered is-spaced">Get in Touch</h2>
<h4 class="subtitle is-6 is-light has-text-centered is-compact">
Viderer malorum sadipscing cum ei. Eu impetus perfecto sit, no sea labore detraxit. Primis mediocrem necessitatibus an vis. Ut sea pertinax perpetua, eruditi volumus quaestio ex mel, has ei
tota homero.
</h4>
<!-- Content wrapper -->
<div class="content-wrapper is-large">
<div class="columns">
<div class="column is-8 is-offset-2">
<!-- Contact icons -->
<div class="contact-icons">
<!-- Phone -->
<a class="contact-icon" data-aos="fade-up" data-aos-delay="100" data-aos-offset="200" data-aos-easing="ease-out-quart">
<img class="is-phone" src="/img/icons/phone.svg" alt="" />
</a>
<!-- Mail -->
<a class="contact-icon" data-aos="fade-up" data-aos-delay="300" data-aos-offset="200" data-aos-easing="ease-out-quart">
<img class="is-phone" src="/img/icons/mail.svg" alt="" />
</a>
<!-- Telegram -->
<a class="contact-icon" data-aos="fade-up" data-aos-delay="500" data-aos-offset="200" data-aos-easing="ease-out-quart">
<img class="is-telegram" src="/img/logo/telegram.svg" alt="" />
</a>
</div>
</div>
</div>
<div class="columns">
<div class="column is-6 is-offset-3">
<!-- Form -->
<form class="contact-form">
<!-- Field -->
<div class="control-material is-secondary">
<input class="material-input" type="text" required />
<span class="material-highlight"></span>
<span class="bar"></span>
<label>Name</label>
</div>
<!-- Field -->
<div class="control-material is-secondary">
<input class="material-input" type="email" required />
<span class="material-highlight"></span>
<span class="bar"></span>
<label>Email</label>
</div>
<!-- Field -->
<div class="control-material is-secondary">
<textarea rows="3"></textarea>
<span class="material-highlight"></span>
<span class="bar"></span>
<label>Message</label>
</div>
<!-- Submit -->
<div class="has-text-centered">
<button class="button is-button k-button k-primary raised has-gradient is-fat is-bold is-submit">
<span class="text">Send message</span>
<span class="front-gradient"></span>
</button>
</div>
</form>
<!-- /Form -->
</div>
</div>
</div>
<!-- Content wrapper -->
</div>
<!-- Container -->
</section>
<!-- Contact section -->
</div>
</Layout>
================================================
FILE: src/pages/roadmap.astro
================================================
---
import Layout from '../layouts/Default.astro'
import Navbar from '../components/Navbar.astro'
import NavbarClone from '../components/NavbarClone.astro'
const title = 'Roadmap'
---
<Layout title={title}>
<div class="roadmap-wrapper">
<!-- Landing page Hero -->
<section class="hero is-medium">
<div class="hero-head">
<!-- Cloned navbar -->
<NavbarClone />
<!-- Static navbar -->
<Navbar />
</div>
<div class="hero-body has-text-centered">
<div class="columns">
<div class="column is-6 is-offset-3">
<div class="roadmap-image">
<img src="/img/illustrations/world.svg" />
</div>
<h1 class="title is-2 is-light is-semibold is-spaced main-title">2023 Roadmap</h1>
<h2 class="subtitle is-5 is-light is-thin">Cryptocurrency brought to the next level. Join our ICO for supercharged rates.</h2>
<!-- CTA -->
<p>
<a href="#roadmap" class="button k-button k-primary raised has-gradient is-fat is-bold">
<span class="text">More details</span>
<span class="front-gradient"></span>
</a>
</p>
</div>
</div>
</div>
</section>
<section x-data="initRoadmap()" x-init="setupRoadmap()" id="roadmap" class="main-timeline">
<ul>
<li>
<div>
<span class="item-title">Platform Launch</span>
<time>January 16th</time>
<span class="item-content">
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium
</span>
<span class="more">
<iconify-icon class="iconify" icon="lucide:file-text"></iconify-icon>
<a href="#">Read Techpaper</a>
</span>
</div>
</li>
<li>
<div>
<span class="item-title">Presales starts</span>
<time>February 28th</time>
<span class="item-content">
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium
</span>
<span class="more">
<iconify-icon class="iconify" icon="lucide:file-text"></iconify-icon>
<a href="#">Read Whitepaper</a>
</span>
</div>
</li>
<li>
<div>
<span class="item-title">ICO starts</span>
<time>March 20th</time>
<span class="item-content">
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium
</span>
<span class="more">
<iconify-icon class="iconify" icon="lucide:file-text"></iconify-icon>
<a href="#">Read Whitepaper</a>
</span>
</div>
</li>
<li>
<div>
<span class="item-title">ICO phase 2</span>
<time>April 20th</time>
<span class="item-content">
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium
</span>
<span class="more">
<iconify-icon class="iconify" icon="lucide:file-text"></iconify-icon>
<a href="#">Read Whitepaper</a>
</span>
</div>
</li>
<li>
<div>
<span class="item-title">Development starts</span>
<time>May 9th</time>
<span class="item-content">
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium
</span>
<span class="more">
<iconify-icon class="iconify" icon="lucide:file-text"></iconify-icon>
<a href="#">Read Techpaper</a>
</span>
</div>
</li>
<li>
<div>
<span class="item-title">Krypton Meetup CA</span>
<time>June 30th</time>
<span class="item-content">
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium
</span>
<span class="more">
<iconify-icon class="iconify" icon="lucide:map-pin"></iconify-icon>
<a href="#">More details</a>
</span>
</div>
</li>
<li>
<div>
<span class="item-title">Krypton Wallet Release</span>
<time>July 25th</time>
<span class="item-content">
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium
</span>
<span class="more">
<iconify-icon class="iconify" icon="lucide:file-text"></iconify-icon>
<a href="#">Read Whitepaper</a>
</span>
</div>
</li>
<li>
<div>
<span class="item-title">Chain Alpha Release</span>
<time>August 12th</time>
<span class="item-content">
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium
</span>
<span class="more">
<iconify-icon class="iconify" icon="lucide:file-text"></iconify-icon>
<a href="#">Read Techpaper</a>
</span>
</div>
</li>
<li>
<div>
<span class="item-title">Token Sale</span>
<time>September 10th</time>
<span class="item-content">
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium
</span>
<span class="more">
<iconify-icon class="iconify" icon="lucide:file-text"></iconify-icon>
<a href="#">Read Whitepaper</a>
</span>
</div>
</li>
<li>
<div>
<span class="item-title">Security Audit</span>
<time>October 15th</time>
<span class="item-content">
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium
</span>
<span class="more">
<iconify-icon class="iconify" icon="lucide:file-text"></iconify-icon>
<a href="#">Read Whitepaper</a>
</span>
</div>
</li>
<li>
<div>
<span class="item-title">Chain Beta Release</span>
<time>November 25th</time>
<span class="item-content">
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium
</span>
<span class="more">
<iconify-icon class="iconify" icon="lucide:file-text"></iconify-icon>
<a href="#">Read Techpaper</a>
</span>
</div>
</li>
</ul>
</section>
<section>
<div class="roadmap-end">
<img src="/img/illustrations/roadmap-end.svg" alt="" />
</div>
<div class="follow-us">
<div data-aos="fade-up" data-aos-delay="100" data-aos-offset="100" data-aos-easing="ease-out-quart">
<a href="#">
<svg aria-labelledby="simpleicons-gitlab-icon" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path
d="M23.955 13.587l-1.342-4.135-2.664-8.189c-.135-.423-.73-.423-.867 0L16.418 9.45H7.582L4.919 1.263C4.783.84 4.185.84 4.05 1.26L1.386 9.449.044 13.587c-.121.375.014.789.331 1.023L12 23.054l11.625-8.443c.318-.235.453-.647.33-1.024"
></path>
</svg>
</a>
</div>
<div data-aos="fade-up" data-aos-delay="200" data-aos-offset="100" data-aos-easing="ease-out-quart">
<a href="#">
<svg aria-labelledby="simpleicons-telegram-icon" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M9.028 20.837c-.714 0-.593-.271-.839-.949l-2.103-6.92L22.263 3.37"></path>
<path d="M9.028 20.837c.552 0 .795-.252 1.105-.553l2.941-2.857-3.671-2.214"></path>
<path
d="M9.403 15.213l8.89 6.568c1.015.56 1.748.271 2-.942l3.62-17.053c.372-1.487-.564-2.159-1.534-1.72L1.125 10.263c-1.45.582-1.443 1.392-.264 1.753l5.455 1.7L18.94 5.753c.595-.36 1.143-.167.694.232"
></path>
</svg>
</a>
</div>
<div data-aos="fade-up" data-aos-delay="300" data-aos-offset="100" data-aos-easing="ease-out-quart">
<a href="#">
<svg aria-labelledby="simpleicons-messenger-icon" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path
d="M12 0C5.373 0 0 4.974 0 11.111c0 3.498 1.744 6.614 4.469 8.654V24l4.088-2.242c1.092.3 2.246.464 3.443.464 6.627 0 12-4.975 12-11.11S18.627 0 12 0zm1.191 14.963l-3.055-3.26-5.963 3.26L10.732 8l3.131 3.259L19.752 8l-6.561 6.963z"
></path>
</svg>
</a>
</div>
<div data-aos="fade-up" data-aos-delay="400" data-aos-offset="100" data-aos-easing="ease-out-quart">
<a href="#">
<svg aria-labelledby="simpleicons-slack-icon" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M9.879 10.995l1.035 3.085 3.205-1.074-1.035-3.074-3.205 1.08v-.017z"></path>
<path
d="M18.824 14.055l-1.555.521.54 1.61c.218.65-.135 1.355-.786 1.574-.15.045-.285.067-.435.063-.511-.015-.976-.338-1.155-.849l-.54-1.607-3.21 1.073.539 1.608c.211.652-.135 1.358-.794 1.575-.15.048-.285.067-.435.064-.51-.015-.976-.34-1.156-.85l-.539-1.619-1.561.524c-.15.045-.285.061-.435.061-.511-.016-.976-.345-1.155-.855-.225-.66.135-1.364.78-1.575l1.56-.525L7.5 11.76l-1.551.525c-.141.048-.285.066-.428.064-.495-.016-.975-.338-1.141-.848-.209-.65.135-1.354.796-1.574l1.56-.52-.54-1.605c-.21-.654.136-1.359.796-1.575.659-.22 1.363.136 1.574.783l.539 1.608L12.3 7.544l-.54-1.605c-.209-.645.135-1.35.789-1.574.652-.211 1.359.135 1.575.791l.54 1.621 1.555-.51c.651-.219 1.356.135 1.575.779.218.654-.135 1.359-.784 1.575l-1.557.524 1.035 3.086 1.551-.516c.652-.211 1.358.135 1.575.795.22.66-.135 1.365-.779 1.574l-.011-.029zm4.171-5.356C20.52.456 16.946-1.471 8.699 1.005.456 3.479-1.471 7.051 1.005 15.301c2.475 8.245 6.046 10.17 14.296 7.694 8.245-2.475 10.17-6.046 7.694-14.296z"
></path>
</svg>
</a>
</div>
<div data-aos="fade-up" data-aos-delay="500" data-aos-offset="100" data-aos-easing="ease-out-quart">
<a href="#">
<svg aria-labelledby="simpleicons-linkedin-icon" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<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.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 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>
</div>
</div>
</section>
</div>
</Layout>
================================================
FILE: src/pages/token.astro
================================================
---
import Layout from '../layouts/Default.astro'
import Navbar from '../components/Navbar.astro'
import NavbarClone from '../components/NavbarClone.astro'
const title = 'Token'
---
<Layout title={title}>
<div class="token-wrapper">
<!-- Landing page Hero -->
<section class="hero is-medium">
<div class="hero-head">
<!-- Cloned navbar -->
<NavbarClone />
<!-- Static navbar -->
<Navbar />
</div>
<div class="hero-body has-text-centered">
<div class="columns">
<div class="column is-6 is-offset-3">
<div class="token-image">
<img src="/img/illustrations/krypton-token.svg" />
</div>
<h1 class="title is-2 is-light is-semibold is-spaced main-title">The K Token</h1>
<h2 class="subtitle is-5 is-light is-thin">Cryptocurrency brought to the next level. Join our ICO for supercharged rates.</h2>
<!-- CTA -->
<p>
<a href="/#start" class="button k-button k-primary raised has-gradient is-fat is-bold">
<span class="text">More details</span>
<span class="front-gradient"></span>
</a>
</p>
</div>
</div>
</div>
</section>
<section class="section is-medium">
<div class="container">
<!-- Content wrapper -->
<div class="content-wrapper">
<div class="columns is-vcentered">
<!-- Feature content -->
<div class="column is-5 is-offset-1">
<div class="side-feature-content">
<h3 class="title is-4 is-light">Network Governance</h3>
<div class="divider"></div>
<p class="is-light">
Viderer malorum sadipscing cum ei. Eu impetus perfecto sit, no sea labore detraxit. Primis mediocrem necessitatibus an vis. Eu impetus perfecto sit, no sea labore detraxit.
</p>
</div>
</div>
<!-- Feature image -->
<div class="column is-7">
<img class="side-feature" src="/img/illustrations/krypton-token-network.svg" alt="" />
</div>
</div>
<div class="columns is-vcentered">
<!-- Feature image -->
<div class="column is-7">
<img class="side-feature" src="/img/illustrations/token-stack.svg" alt="" />
</div>
<!-- Feature content -->
<div class="column is-5">
<div class="side-feature-content">
<h3 class="title is-4 is-light">Value Stacking</h3>
<div class="divider"></div>
<p class="is-light">
Viderer malorum sadipscing cum ei. Eu impetus perfecto sit, no sea labore detraxit. Primis mediocrem necessitatibus an vis. Eu impetus perfecto sit, no sea labore detraxit.
</p>
</div>
</div>
</div>
<div class="columns is-vcentered">
<!-- Feature content -->
<div class="column is-5 is-offset-1">
<div class="side-feature-content">
<h3 class="title is-4 is-light">Increased Security</h3>
<div class="divider"></div>
<p class="is-light">
Viderer malorum sadipscing cum ei. Eu impetus perfecto sit, no sea labore detraxit. Primis mediocrem necessitatibus an vis. Eu impetus perfecto sit, no sea labore detraxit.
</p>
</div>
</div>
<!-- Feature image -->
<div class="column is-7">
<img class="side-feature" src="/img/illustrations/token-lock.svg" alt="" />
</div>
</div>
</div>
<!-- Spaced divider -->
<div class="token-documentation">
<div class="documentation-title">Documentation</div>
<div class="columns is-vcentered">
<div class="column is-5">
<div class="columns">
<div class="column is-6">
<ul>
<li class="is-active">English</li>
<li>Español</li>
<li>Français</li>
<li>Deutch</li>
</ul>
</div>
<div class="column is-6">
<ul>
<li>العربية</li>
<li>русский</li>
<li>Polski</li>
<li>日本語</li>
</ul>
</div>
</div>
</div>
<div class="column is-7">
<div class="columns is-vcentered has-text-centered">
<div class="column is-4">
<div class="document-block has-text-centered">
<img src="/img/icons/whitepaper.svg" />
<a href="/#start" class="button k-button k-primary raised has-gradient is-bold">
<span class="text">Whitepaper</span>
<span class="front-gradient"></span>
</a>
</div>
</div>
<div class="column is-4">
<div class="document-block has-text-centered">
<img src="/img/icons/techpaper.svg" />
<a href="/#start" class="button k-button k-primary raised has-gradient is-bold">
<span class="text">Techpaper</span>
<span class="front-gradient"></span>
</a>
</div>
</div>
<div class="column is-4">
<div class="document-block has-text-centered">
<img src="/img/icons/livechat.svg" />
<a href="/#start" class="button k-button k-secondary raised has-gradient is-bold">
<span class="text">Live Chat</span>
<span class="front-gradient"></span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Spaced divider -->
<div class="divider is-centered is-spacer"></div>
<!-- Title & subtitle -->
<h2 class="title is-light is-semibold has-text-centered is-spaced">ICO Repartition</h2>
<!-- Content wrapper -->
<div class="content-wrapper">
<div class="columns is-ico-details">
<div class="column is-4">
<div class="details-title">ICO structure</div>
<ul>
<li>Maximum token amount: 24 000 000</li>
<li>Tokens for sale: 18 000 000</li>
<li>Token: KPT</li>
<li>Target amount: $25 000 000</li>
<li>Token price: from $0.5 to $1.2</li>
<li>Know Your Customer (KYC): No</li>
</ul>
</div>
<div class="column is-4">
<div class="details-title">Pre ICO</div>
<ul>
<li>Maximum token amount: 24 000 000</li>
<li>Tokens for sale: 18 000 000</li>
<li>Token: KPT</li>
</ul>
<div class="details-title">ICO</div>
<ul>
<li>Maximum token amount: 24 000 000</li>
<li>Tokens for sale: 18 000 000</li>
<li>Token: KPT</li>
</ul>
</div>
<div class="column is-4">
<div class="details-title">Token Utility</div>
<ul>
<li>Maximum token amount: 24 000 000</li>
<li>Tokens for sale: 18 000 000</li>
<li>Token: KPT</li>
</ul>
</div>
</div>
<div class="columns is-vcentered has-text-centered">
<!-- ICO repartition -->
<div class="column is-6 is-offset-3">
<!-- Diagram -->
<img class="ico-repartition" src="/img/illustrations/ico-shares.svg" />
<!-- Legend block -->
<div class="repartition-details">
<!-- Legend item -->
<div class="repartition-block">
<div class="color-dot is-reward"></div>
<div class="share-title">Core</div>
<div class="percentage">10%</div>
</div>
<!-- Legend item -->
<div class="repartition-block">
<div class="color-dot is-presale"></div>
<div class="share-title">Pre ICO</div>
<div class="percentage">25%</div>
</div>
<!-- Legend item -->
<div class="repartition-block">
<div class="color-dot is-sale"></div>
<div class="share-title">ICO</div>
<div class="percentage">65%</div>
</div>
</div>
</div>
</div>
<!-- CTA -->
<div class="cta-wrapper has-text-centered">
<a href="/#start" class="button k-button k-primary raised has-gradient is-fat is-bold">
<span class="text">Join the ICO</span>
<span class="front-gradient"></span>
</a>
</div>
<div class="currencies">
<i class="cf cf-btc"></i>
<i class="cf cf-etc"></i>
<i class="cf cf-ltc"></i>
</div>
</div>
<!-- /Content wrapper -->
<!-- Spaced divider -->
<div class="divider is-centered is-spacer"></div>
<!-- Title & subtitle -->
<h2 class="title is-light is-semibold has-text-centered is-spaced">FAQ</h2>
<h4 class="subtitle is-6 is-light has-text-centered is-compact">
Viderer malorum sadipscing cum ei. Eu impetus perfecto sit, no sea labore detraxit. Primis mediocrem necessitatibus an vis. Ut sea pertinax perpetua, eruditi volumus quaestio ex mel, has ei
tota homero.
</h4>
<!-- Content wrapper -->
<div class="content-wrapper is-large">
<div class="columns">
<div class="column is-5 is-offset-1">
<!-- Accordion -->
<div class="accordion">
<!-- Option -->
<div class="accordion-option">
<input type="checkbox" id="toggle1" class="accordion-toggle" />
<label class="accordion-title" for="toggle1"> What is Blockchain ? </label>
<div class="accordion-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
</div>
<!-- Option -->
<div class="accordion-option">
<input type="checkbox" id="toggle2" class="accordion-toggle" />
<label class="accordion-title" for="toggle2"> What is ICO ? </label>
<div class="accordion-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
</div>
<!-- Option -->
<div class="accordion-option">
<input type="checkbox" id="toggle3" class="accordion-toggle" />
<label class="accordion-title" for="toggle3"> Where to get the Whitepaper ? </label>
<div class="accordion-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
</div>
<!-- Option -->
<div class="accordion-option">
<input type="checkbox" id="toggle4" class="accordion-toggle" />
<label class="accordion-title" for="toggle4"> What is Krypton Core Innovation ? </label>
<div class="accordion-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
</div>
<!-- Option -->
<div class="accordion-option">
<input type="checkbox" id="toggle5" class="accordion-toggle" />
<label class="accordion-title" for="toggle5"> When will be the platform released ? </label>
<div class="accordion-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
</div>
</div>
<!-- /Accordion -->
</div>
<div class="column is-5">
<!-- Accordion -->
<div class="accordion">
<!-- Option -->
<div class="accordion-option">
<input type="checkbox" id="toggle6" class="accordion-toggle" />
<label class="accordion-title" for="toggle6"> How much tokens will be sold ? </label>
<div class="accordion-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
</div>
<!-- Option -->
<div class="accordion-option">
<input type="checkbox" id="toggle7" class="accordion-toggle" />
<label class="accordion-title" for="toggle7"> What happens if Soft Cap isn't reached ? </label>
<div class="accordion-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
</div>
<!-- Option -->
<div class="accordion-option">
<input type="checkbox" id="toggle8" class="accordion-toggle" />
<label class="accordion-title" for="toggle8"> How much do you want to raise with the ICO ? </label>
<div class="accordion-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
</div>
<!-- Option -->
<div class="accordion-option">
<input type="checkbox" id="toggle9" class="accordion-toggle" />
<label class="accordion-title" for="toggle9"> When will the tokens be distributed ? </label>
<div class="accordion-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
</div>
<!-- Option -->
<div class="accordion-option">
<input type="checkbox" id="toggle10" class="accordion-toggle" />
<label class="accordion-title" for="toggle10"> Will their be Bounties ? </label>
<div class="accordion-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
</div>
</div>
<!-- /Accordion -->
</div>
</div>
</div>
<!-- /Content wrapper -->
</div>
</section>
</div>
</Layout>
================================================
FILE: src/styles/abstracts/_animations.scss
================================================
/*! _animations.scss | Krypton | CSS Ninja */
/* ==========================================================================
Animations
========================================================================== */
/***
TABLE OF CONTENTS
=============================================================================
0. Fade in Up animation
1. Levitate animation
2. Infinite rotate
3. Gelatine
4. Pulse animation
=============================================================================
***/
/* ==========================================================================
0. Fade in Up animation
========================================================================== */
.animated {
animation-duration: 0.5s;
animation-fill-mode: both;
-webkit-animation-duration: 0.5s;
-webkit-animation-fill-mode: both;
}
@-webkit-keyframes fadeInUp {
from {
-webkit-transform: translate3d(0, 20px, 0);
transform: translate3d(0, 20px, 0);
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
@keyframes fadeInUp {
from {
-webkit-transform: translate3d(0, 20px, 0);
transform: translate3d(0, 20px, 0);
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
.preFadeInUp {
opacity: 0;
}
.fadeInUp {
opacity: 0;
-webkit-animation-name: fadeInUp;
animation-name: fadeInUp;
}
/* ==========================================================================
1. Levitate animation
========================================================================== */
@-webkit-keyframes levitate {
from {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
50% {
-webkit-transform: translate(0, 10px);
transform: translate(0, 10px);
}
to {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
}
@keyframes levitate {
from {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
50% {
-webkit-transform: translate(0, 10px);
transform: translate(0, 10px);
}
to {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
}
.levitate {
-webkit-animation-name: levitate;
animation-name: levitate;
-webkit-animation-duration: 3s;
animation-duration: 3s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
/* ==========================================================================
2. Infinite rotate
========================================================================== */
@keyframes rotating {
from {
transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
}
to {
transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
}
}
@-webkit-keyframes rotating {
from {
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
}
to {
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
}
}
.rotating {
-webkit-animation: rotating 6s linear infinite;
-moz-animation: rotating 6s linear infinite;
-ms-animation: rotating 6s linear infinite;
-o-animation: rotating 6s linear infinite;
animation: rotating 6s linear infinite;
}
/* ==========================================================================
3. Gelatine animation
========================================================================== */
@-webkit-keyframes gelatine {
from, to {
-webkit-transform: scale(1, 1);
}
25% {
-webkit-transform: scale(0.9, 1.1);
}
50% {
-webkit-transform: scale(1.1, 0.9);
}
75% {
-webkit-transform: scale(0.95, 1.05);
}
}
@keyframes gelatine {
from, to {
transform: scale(1, 1);
}
25% {
transform: scale(0.9, 1.1);
}
50% {
transform: scale(1.1, 0.9);
}
75% {
transform: scale(0.95, 1.05);
}
}
//Settings
.gelatine {
-webkit-animation: gelatine 0.6s;
animation: gelatine 0.6s;
-webkit-animation-duration: 0.6s;
animation-duration: 0.6s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
/* ==========================================================================
4. Pulse animation
========================================================================== */
@keyframes pulse {
0% {
transform: scale(1);
opacity: 1;
}
25% {
transform: scale(1);
opacity: 1;
}
100% {
transform: scale(4.5);
opacity: 0;
}
}
================================================
FILE: src/styles/abstracts/_colors.scss
================================================
/*! _colors.scss | Krypton | CSS Ninja */
/* ==========================================================================
Krypton global colors
========================================================================== */
/***
TABLE OF CONTENTS
=============================================================================
0. Variables
=============================================================================
***/
/* ==========================================================================
0. Variables
========================================================================== */
$white: #fff;
$smoke-white: #fcfcfc;
$placeholder: #cecece;
$light-grey: #f9f9f9;
$muted-grey: #999;
$title-grey: #A9ABAC;
$fade-grey: #ededed;
$accent-grey: #ccc;
$dark-text: #4a4a4a;
$chosen-grey: #e0e0e0;
$chosen-dark-grey: #66676b;
$grey-6: #666;
$grey: #ccc;
$section-grey: #fcfcfc;
$light-blue: rgba(94, 147, 255, 0.9);
$sidebar: #344258;
$red: #FF7273;
$blue: #039BE5;
$green: #00b289;
$orange: #eda514;
================================================
FILE: src/styles/abstracts/_theme-default.scss
================================================
/*! _theme-default.scss | Krypton | Kit1 | CSS Ninja */
/* ==========================================================================
Default theme variables
========================================================================== */
/***
TABLE OF CONTENTS
=============================================================================
0. Colors Variables
1. Fonts Variables
2. Shadow variables
3. Gradient mixins
=============================================================================
***/
/* ==========================================================================
0. Colors Variables
========================================================================== */
$fullhd-enabled: false;
$primary: #7F00FF;
$primary-accent: #3f00fc;
$secondary: #00ff99;
$secondary-accent: #33ccff;
/* ==========================================================================
1. Fonts Variables
========================================================================== */
$font: 'Open Sans Variable', sans-serif;
$font-heading: 'Cabin Variable', sans-serif;
/* ==========================================================================
2. Shadow variables
========================================================================== */
//Base shadow
$base-shadow: rgba(0, 0, 0, 0.12);
//Primary box shadow
$primary-shadow-from: rgba(127, 0, 255, 0.42);
$primary-shadow-to: rgba(63, 0, 252, 0.2);
$primary-box-shadow: 0 14px 26px -12px $primary-shadow-from, 0 4px 23px 0px $base-shadow, 0 8px 10px -5px $primary-shadow-to !important;
//Secondary box shadow
$secondary-shadow-from: rgba(0, 255, 153, 0.42);
$secondary-shadow-to: rgba(51, 204, 255, 0.2);
$secondary-box-shadow: 0 14px 26px -12px $secondary-shadow-from, 0 4px 23px 0px $base-shadow, 0 8px 10px -5px $secondary-shadow-to !important;
.primary-gradient {
background: $primary;
background: -webkit-linear-gradient(to right, $primary, $primary-accent) !important;
background: linear-gradient(to right, $primary, $primary-accent) !important;
}
.secondary-gradient {
background: $secondary;
background: -webkit-linear-gradient(to right, $secondary, $secondary-accent) !important;
background: linear-gradient(to right, $secondary, $secondary-accent) !important;
}
/* ==========================================================================
3. Gradient mixins
========================================================================== */
@mixin theme-hero-gradient {
background-image: -webkit-linear-gradient(to bottom, #5202d8 0%, #3c019e 100%);
background-image: linear-gradient(to bottom, #5202d8 0%, #3c019e 100%);
}
@mixin primary-gradient-top {
background: $primary;
background: -webkit-linear-gradient(to top, $primary, $primary-accent) !important;
background: linear-gradient(to top, $primary, $primary-accent) !important;
}
@mixin primary-gradient-left {
background: $primary;
background: -webkit-linear-gradient(to left, $primary, $primary-accent) !important;
background: linear-gradient(to left, $primary, $primary-accent) !important;
}
@mixin primary-gradient-right {
background: $primary;
background: -webkit-linear-gradient(to right, $primary, $primary-accent) !important;
background: linear-gradient(to right, $primary, $primary-accent) !important;
}
@mixin secondary-gradient-top {
background: $secondary;
background: -webkit-linear-gradient(to top, $secondary, $secondary-accent) !important;
background: linear-gradient(to top, $secondary, $secondary-accent) !important;
}
@mixin secondary-gradient-right {
background: $secondary;
background: -webkit-linear-gradient(to right, $secondary, $secondary-accent) !important;
background: linear-gradient(to right, $secondary, $secondary-accent) !important;
}
@mixin secondary-gradient-left {
background: $secondary;
background: -webkit-linear-gradient(to left, $secondary, $secondary-accent) !important;
background: linear-gradient(to left, $secondary, $secondary-accent) !important;
}
================================================
FILE: src/styles/components/_backtotop.scss
================================================
/*
1. Back to top button
*/
/* ==========================================================================
1. Back to top button
========================================================================== */
.progress-wrap {
position: fixed;
right: 30px;
bottom: 30px;
height: 46px;
width: 46px;
cursor: pointer;
display: block;
border-radius: 50px;
box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.1);
z-index: 10000;
opacity: 0;
visibility: hidden;
transform: translateY(15px);
-webkit-transition: all 200ms linear;
transition: all 200ms linear;
z-index: 9;
}
.progress-wrap.active-progress {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.progress-wrap .inner-arrow {
position: absolute;
font-weight: 900;
text-align: center;
line-height: 24px;
font-size: 1rem;
color: $primary;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
height: 24px;
width: 24px;
cursor: pointer;
display: block;
z-index: 1;
-webkit-transition: all 200ms linear;
transition: all 200ms linear;
}
.progress-wrap:hover .inner-arrow {
opacity: .6;
}
.progress-wrap svg path {
fill: none;
}
.progress-wrap svg.progress-circle path {
stroke: $primary;
stroke-width: 4;
box-sizing: border-box;
-webkit-transition: all 200ms linear;
transition: all 200ms linear;
}
@keyframes border-transform {
0%,
100% {
border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%;
}
14% {
border-radius: 40% 60% 54% 46% / 49% 60% 40% 51%;
}
28% {
border-radius: 54% 46% 38% 62% / 49% 70% 30% 51%;
}
42% {
border-radius: 61% 39% 55% 45% / 61% 38% 62% 39%;
}
56% {
border-radius: 61% 39% 67% 33% / 70% 50% 50% 30%;
}
70% {
border-radius: 50% 50% 34% 66% / 56% 68% 32% 44%;
}
84% {
border-radius: 46% 54% 50% 50% / 35% 61% 39% 65%;
}
}
@media only screen and (max-width: 767px) {
.progress-wrap {
display: none;
}
}
================================================
FILE: src/styles/components/_buttons.scss
================================================
/*! _buttons.scss | Krypton | CSS Ninja */
/* ==========================================================================
Button styles
========================================================================== */
/***
TABLE OF CONTENTS
=============================================================================
0. Basic buttons
1. Colored buttons
=============================================================================
***/
/* ==========================================================================
0. Krypton button
========================================================================== */
//Base class
.button {
//Krypton modifier
&.k-button {
min-width: 130px;
font-size: .75rem;
height: 40px;
//fat modifier
&.is-fat {
padding: 26px 40px !important;
}
//If the element is a button rather than a link
&.is-button {
line-height: 0;
}
}
//Hover raised modifier
&.raised:hover {
box-shadow: 0 14px 26px -12px rgba(0, 0, 0, 0.42), 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2) !important;
}
//Uppercase button
&.upper-button {
text-transform: uppercase;
}
//Rounded buttons
&.rounded {
border-radius: 500px;
}
//Bold weight
&.is-bold {
font-weight: 500 !important;
text-transform: uppercase;
border-width: 2px;
}
//Slanted button
&.slanted {
transform: skewX(-18deg);
border: none !important;
.text {
transform: skewX(18deg);
position: relative;
display: block;
z-index: 3;
}
}
//Primary Krypton button
&.k-primary {
color: $white;
//Gradient modifier
&.has-gradient {
position: relative;
transition: all .6s ease-out !important;
border: none !important;
@include primary-gradient-top;
opacity: 1;
z-index: 0;
.text {
position: relative;
display: block;
z-index: 3;
opacity: 1 !important;
}
//Hover state
&:hover {
.front-gradient {
opacity: 0;
}
}
//Gradient front element
.front-gradient {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
border-radius: 3px;
@include primary-gradient-right;
opacity: 1;
transition: all .6s ease-out !important;
z-index: 1;
}
//Rounded modifier
&.rounded {
.front-gradient {
border-radius: 1000px;
}
}
//Raised modifier
&.raised {
&:hover {
box-shadow: $primary-box-shadow !important;
opacity: 0.95;
}
}
//Submit modifier
&.is-submit {
&:hover {
transform: translateY(-10px);
}
}
}
}
//Secondary Krypton button
&.k-secondary {
color: $white;
//Gradient modifier
&.has-gradient {
position: relative;
transition: all .6s ease-out !important;
border: none !important;
@include secondary-gradient-right;
opacity: 1;
z-index: 0;
.text {
position: relative;
display: block;
z-index: 3;
opacity: 1 !important;
}
//Hover state
&:hover {
.front-gradient {
opacity: 0;
}
}
//Gradient front element
.front-gradient {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
border-radius: 3px;
@include secondary-gradient-left;
opacity: 1;
transition: all .6s ease-out !important;
z-index: 1;
}
//Rounded modifier
&.rounded {
.front-gradient {
border-radius: 1000px;
}
}
//Raised modifier
&.raised {
&:hover {
box-shadow: $secondary-box-shadow !important;
opacity: 0.95;
}
}
}
}
}
/* ==========================================================================
1. Colored Buttons
========================================================================== */
//primary button
.button.primary-button {
outline: none;
border-color: $primary;
background-color: $primary;
color: $white;
transition: all 0.5s;
&:hover {
color: $white;
}
//raised state
&.raised:hover {
box-shadow: $primary-box-shadow;
opacity: 0.9 0.5;
}
//outlined button
&.btn-outlined {
border-color: $primary;
color: $primary !important;
background-color: transparent;
&:hover {
color: $white;
background-color: $primary;
}
}
&:focus {
border-color: $primary;
}
}
//secondary button
.button.secondary-button {
outline: none;
border-color: $secondary;
background-color: $secondary;
color: $white;
transition: all 0.5s;
&:hover {
color: $white;
}
//raised state
&.raised:hover {
box-shadow: $secondary-box-shadow;
opacity: 0.95;
}
//outlined button
&.btn-outlined {
border-color: $secondary;
color: $secondary !important;
background-color: transparent;
&:hover {
color: $white !important;
background-color: $secondary;
}
}
&:focus {
border-color: $secondary;
}
}
//Grey button
.button.grey-button {
outline: none;
border-color: $accent-grey;
background-color: $accent-grey;
color: $white;
transition: all 0.5s;
&:hover {
color: $white;
}
//raised state
&.raised:hover {
opacity: 0.8;
}
//outlined button
&.btn-outlined {
border-color: $accent-grey;
color: $accent-grey;
background-color: transparent;
&:hover {
color: $white;
background-color: $accent-grey;
}
}
&:focus {
border-color: $accent-grey;
}
}
================================================
FILE: src/styles/components/_forms.scss
================================================
/*! _forms.scss | Krypton | CSS Ninja */
/* ==========================================================================
Form components styles
========================================================================== */
/***
TABLE OF CONTENTS
=============================================================================
0. Material Inputs
1. Contact form
=============================================================================
***/
/* ==========================================================================
0. Material Inputs
========================================================================== */
//Material control
.control-material {
position: relative;
margin-bottom: 3em;
input, textarea {
border-radius: 0 !important;
border-color: rgba(0, 0, 0, 0.05);
resize: none;
}
//primary colors
&.is-primary {
input.material-input:focus ~ label, input:valid ~ label, textarea:focus ~ label {
color: $primary;
}
input, textarea {
color: $white;
border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
}
.bar:before {
@include primary-gradient-right;
}
.bar:after {
@include primary-gradient-left;
}
&.h
gitextract_i519kzgk/
├── .astro/
│ └── settings.json
├── .github/
│ ├── FUNDING.yml
│ ├── actions/
│ │ └── build-template-action/
│ │ ├── action.yml
│ │ └── script.sh
│ └── workflows/
│ ├── deploy.yml
│ ├── release.yml
│ └── standard-version.yml
├── .gitignore
├── .npmrc
├── .vscode/
│ ├── extensions.json
│ ├── launch.json
│ └── settings.json
├── CHANGELOG.md
├── Dockerfile
├── LICENSE.md
├── README.md
├── astro.config.mjs
├── docker-compose.yml
├── nginx/
│ └── alpinejs.conf
├── package.json
├── postcss.config.cjs
├── public/
│ └── api/
│ └── search.json
└── src/
├── components/
│ ├── BackToTop.astro
│ ├── Footer.astro
│ ├── Navbar.astro
│ ├── NavbarClone.astro
│ ├── Starfall.astro
│ └── Timer.astro
├── env.d.ts
├── js/
│ ├── libs/
│ │ ├── components/
│ │ │ ├── backtotop/
│ │ │ │ └── backtotop.js
│ │ │ ├── countdown/
│ │ │ │ └── countdown.js
│ │ │ ├── index.js
│ │ │ ├── like/
│ │ │ │ └── like.js
│ │ │ ├── navbar/
│ │ │ │ └── navbar.js
│ │ │ ├── pageloader/
│ │ │ │ └── pageloader.js
│ │ │ ├── roadmap/
│ │ │ │ └── roadmap.js
│ │ │ ├── sidebar/
│ │ │ │ └── sidebar.js
│ │ │ └── tabs/
│ │ │ └── tabs.js
│ │ └── utils/
│ │ ├── constants.js
│ │ └── utils.js
│ └── main.js
├── layouts/
│ ├── Default.astro
│ └── Minimal.astro
├── pages/
│ ├── blog-single.astro
│ ├── blog.astro
│ ├── ico.astro
│ ├── index.astro
│ ├── roadmap.astro
│ └── token.astro
└── styles/
├── abstracts/
│ ├── _animations.scss
│ ├── _colors.scss
│ └── _theme-default.scss
├── components/
│ ├── _backtotop.scss
│ ├── _buttons.scss
│ ├── _forms.scss
│ └── _hamburger.scss
├── layout/
│ ├── _blog.scss
│ ├── _faq.scss
│ ├── _features.scss
│ ├── _footer.scss
│ ├── _hero.scss
│ ├── _layout.scss
│ ├── _pageloader.scss
│ ├── _responsive.scss
│ ├── _team.scss
│ └── _timeline.scss
├── main.scss
└── utilities/
└── _utils.scss
SYMBOL INDEX (11 symbols across 10 files)
FILE: src/js/libs/components/backtotop/backtotop.js
function initBackToTop (line 5) | function initBackToTop() {
FILE: src/js/libs/components/countdown/countdown.js
function initCountdown (line 1) | function initCountdown() {
FILE: src/js/libs/components/like/like.js
function initLike (line 1) | function initLike() {
FILE: src/js/libs/components/navbar/navbar.js
function initNavbar (line 1) | function initNavbar() {
FILE: src/js/libs/components/pageloader/pageloader.js
function initPageLoader (line 1) | function initPageLoader() {
FILE: src/js/libs/components/roadmap/roadmap.js
function initRoadmap (line 1) | function initRoadmap() {
FILE: src/js/libs/components/sidebar/sidebar.js
function initSidebar (line 1) | function initSidebar() {
FILE: src/js/libs/components/tabs/tabs.js
function initTabs (line 1) | function initTabs() {
FILE: src/js/libs/utils/utils.js
function getUrlParams (line 1) | function getUrlParams(param) {
function insertBgImages (line 7) | function insertBgImages() {
FILE: src/js/main.js
method init (line 17) | init() {
Condensed preview — 68 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (307K chars).
[
{
"path": ".astro/settings.json",
"chars": 98,
"preview": "{\n\t\"devToolbar\": {\n\t\t\"enabled\": false\n\t},\n\t\"_variables\": {\n\t\t\"lastUpdateCheck\": 1714258612656\n\t}\n}"
},
{
"path": ".github/FUNDING.yml",
"chars": 23,
"preview": "github: cssninjaStudio\n"
},
{
"path": ".github/actions/build-template-action/action.yml",
"chars": 695,
"preview": "name: 'build template'\ndescription: 'build template archive'\n# We declare that the action takes two arguments in input\ni"
},
{
"path": ".github/actions/build-template-action/script.sh",
"chars": 998,
"preview": "#!/bin/bash\n\nDIRECTORY=`dirname $0`\nINPUT_PROJECT=$1\nINPUT_TAG=$2\n\nif [ -z $INPUT_PROJECT ] \nthen\n echo \"<project> miss"
},
{
"path": ".github/workflows/deploy.yml",
"chars": 2162,
"preview": "name: deploy\non:\n workflow_dispatch:\n push:\n paths-ignore:\n - 'README.md'\n - 'CHANGELOG.md'\n - 'LICE"
},
{
"path": ".github/workflows/release.yml",
"chars": 2829,
"preview": "name: release\non:\n # Automatically run when a semver tag is pushed\n push:\n tags:\n - 'v*.*.*'\n\njobs:\n release:"
},
{
"path": ".github/workflows/standard-version.yml",
"chars": 1128,
"preview": "name: standard-version\non:\n # Allow to be manually dispatched\n workflow_dispatch:\n inputs:\n options:\n d"
},
{
"path": ".gitignore",
"chars": 218,
"preview": "# build output\ndist/\n.output/\n*.zip\n\n# dependencies\nnode_modules/\n\n# logs\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*"
},
{
"path": ".npmrc",
"chars": 245,
"preview": "# Disable npm warning about missing optional peer dependencies\nstrict-peer-dependencies=false\nlegacy-peer-deps=true\n# Fo"
},
{
"path": ".vscode/extensions.json",
"chars": 87,
"preview": "{\n \"recommendations\": [\"astro-build.astro-vscode\"],\n \"unwantedRecommendations\": []\n}\n"
},
{
"path": ".vscode/launch.json",
"chars": 207,
"preview": "{\n \"version\": \"0.2.0\",\n \"configurations\": [\n {\n \"command\": \"./node_modules/.bin/astro dev\",\n \"name\": \"Dev"
},
{
"path": ".vscode/settings.json",
"chars": 39,
"preview": "{\n \"astro.typescript.enabled\": false\n}"
},
{
"path": "CHANGELOG.md",
"chars": 2430,
"preview": "# Changelog\n\nAll notable changes to this project will be documented in this file. See [standard-version](https://github."
},
{
"path": "Dockerfile",
"chars": 337,
"preview": "FROM bitnami/node:20 AS build\nWORKDIR /app\n\nRUN corepack enable\n\nCOPY package.json ./\nCOPY pnpm-lock.yaml ./\nCOPY .npmrc"
},
{
"path": "LICENSE.md",
"chars": 1076,
"preview": "MIT License\n\nCopyright (c) 2018-2023 cssninjaStudio\n\nPermission is hereby granted, free of charge, to any person obtaini"
},
{
"path": "README.md",
"chars": 1303,
"preview": "![Krypton Screenshot](https://media.cssninja.io/products/krypton/product.png \"Krypton\")\n\n# 👋 Krypton\n\n> Krypton is a fre"
},
{
"path": "astro.config.mjs",
"chars": 109,
"preview": "import { defineConfig } from 'astro/config';\n\n// https://astro.build/config\nexport default defineConfig({});\n"
},
{
"path": "docker-compose.yml",
"chars": 880,
"preview": "networks:\n cssninja-services:\n external: true\n\nservices:\n krypton-demo:\n image: digisquad/cssninja.krypton-demo:"
},
{
"path": "nginx/alpinejs.conf",
"chars": 856,
"preview": "server {\n listen 8080;\n server_name 0.0.0.0;\n error_page 500 502 503 504 /50x.html;\n "
},
{
"path": "package.json",
"chars": 1185,
"preview": "{\n \"name\": \"krypton\",\n \"version\": \"5.3.0\",\n \"description\": \"Krypton - Astro + Bulma + Alpine JS ICO/Crypto Starter\",\n"
},
{
"path": "postcss.config.cjs",
"chars": 69,
"preview": "module.exports = {\n plugins: [\n require('autoprefixer'),\n ],\n};\n"
},
{
"path": "public/api/search.json",
"chars": 2490,
"preview": "[\n {\n \"type\": \"user\",\n \"title\": \"Mary Smith\",\n \"content\": \"Los Angeles\",\n \"photoUrl\": \"/img/avatars"
},
{
"path": "src/components/BackToTop.astro",
"chars": 744,
"preview": "<div\n class=\"progress-wrap\"\n x-data=\"initBackToTop()\"\n x-init=\"setup()\"\n x-on:scroll.window=\"scroll()\"\n x-bind:clas"
},
{
"path": "src/components/Footer.astro",
"chars": 1920,
"preview": "<footer class=\"krypton-footer\">\n <div class=\"container\">\n <!-- Logo -->\n <div class=\"footer-logo\">\n <a href="
},
{
"path": "src/components/Navbar.astro",
"chars": 2292,
"preview": "<!-- Static navbar -->\n<nav x-data=\"initNavbar()\" class=\"navbar is-light\" :class=`{\n 'is-dark-mobile': mobileOpen,\n "
},
{
"path": "src/components/NavbarClone.astro",
"chars": 2388,
"preview": "<!-- Cloned navbar that comes in on scroll -->\n<nav x-data=\"initNavbar()\" x-on:scroll.window=\"scroll()\" id=\"navbar-clone"
},
{
"path": "src/components/Starfall.astro",
"chars": 1430,
"preview": "<div class=\"starfall\">\n <div class=\"falling-star\"></div>\n <div class=\"falling-star\"></div>\n <div class=\"falling-star\""
},
{
"path": "src/components/Timer.astro",
"chars": 457,
"preview": "<!-- Countdown timer -->\n<ul id=\"countdown\">\n <li id=\"days\">\n <div class=\"timer-number\">00</div>\n <div class=\"lab"
},
{
"path": "src/env.d.ts",
"chars": 84,
"preview": "/// <reference path=\"../.astro/types.d.ts\" />\n/// <reference types=\"astro/client\" />"
},
{
"path": "src/js/libs/components/backtotop/backtotop.js",
"chars": 1423,
"preview": "const progressWrap = document.querySelector(\".progress-wrap\");\nconst progressPath = document.querySelector(\".progress-wr"
},
{
"path": "src/js/libs/components/countdown/countdown.js",
"chars": 1370,
"preview": "export function initCountdown() {\n return {\n setupCountdown() {\n // Set the date we're counting down to\n v"
},
{
"path": "src/js/libs/components/index.js",
"chars": 483,
"preview": "import { initNavbar } from './navbar/navbar';\nimport { initTabs } from './tabs/tabs';\nimport { initCountdown } from './c"
},
{
"path": "src/js/libs/components/like/like.js",
"chars": 148,
"preview": "export function initLike() {\n return {\n isLiked: false,\n likeAction() {\n this.isLiked = !thi"
},
{
"path": "src/js/libs/components/navbar/navbar.js",
"chars": 607,
"preview": "export function initNavbar() {\n return {\n scrolled: false,\n height: 60,\n mobileOpen: false,\n "
},
{
"path": "src/js/libs/components/pageloader/pageloader.js",
"chars": 500,
"preview": "export function initPageLoader() {\n window.addEventListener('load', () => {\n const pageloader = document.getEl"
},
{
"path": "src/js/libs/components/roadmap/roadmap.js",
"chars": 1106,
"preview": "export function initRoadmap() {\n return {\n setupRoadmap() {\n // define variables\n const items = document.q"
},
{
"path": "src/js/libs/components/sidebar/sidebar.js",
"chars": 361,
"preview": "export function initSidebar() {\n return {\n closeSidebar() {\n this.$store.app.isSiderbarOpen = false;\n },\n\n "
},
{
"path": "src/js/libs/components/tabs/tabs.js",
"chars": 1762,
"preview": "export function initTabs() {\n return {\n activeTab: 'tab-1',\n switchTabs(e) {\n const tab = e."
},
{
"path": "src/js/libs/utils/constants.js",
"chars": 4138,
"preview": "export const env = 'development';\n\nexport const themeColors = {\n primary: '#00d1b2',\n secondary: '#00d1b2',\n ac"
},
{
"path": "src/js/libs/utils/utils.js",
"chars": 626,
"preview": "export function getUrlParams(param) {\n const queryString = window.location.search;\n const urlParams = new URLSearchPar"
},
{
"path": "src/js/main.js",
"chars": 1050,
"preview": "//Alpine JS and plugins import\nimport Alpine from \"alpinejs\"\nimport intersect from \"@alpinejs/intersect\"\nimport collapse"
},
{
"path": "src/layouts/Default.astro",
"chars": 1764,
"preview": "---\nimport { ViewTransitions } from 'astro:transitions'\nimport Footer from '../components/Footer.astro'\nimport BackToTop"
},
{
"path": "src/layouts/Minimal.astro",
"chars": 849,
"preview": "---\nimport { ViewTransitions } from 'astro:transitions'\nimport BackToTop from '../components/BackToTop.astro'\n\nimport '@"
},
{
"path": "src/pages/blog-single.astro",
"chars": 20042,
"preview": "---\nimport Layout from '../layouts/Default.astro'\nimport Navbar from '../components/Navbar.astro'\nimport NavbarClone fro"
},
{
"path": "src/pages/blog.astro",
"chars": 14628,
"preview": "---\nimport Layout from '../layouts/Default.astro'\nimport Navbar from '../components/Navbar.astro'\nimport NavbarClone fro"
},
{
"path": "src/pages/ico.astro",
"chars": 4485,
"preview": "---\nimport Layout from '../layouts/Default.astro'\nimport Navbar from '../components/Navbar.astro'\nimport NavbarClone fro"
},
{
"path": "src/pages/index.astro",
"chars": 58108,
"preview": "---\r\nimport Layout from '../layouts/Default.astro'\r\nimport Navbar from '../components/Navbar.astro'\r\nimport NavbarClone "
},
{
"path": "src/pages/roadmap.astro",
"chars": 12324,
"preview": "---\nimport Layout from '../layouts/Default.astro'\nimport Navbar from '../components/Navbar.astro'\nimport NavbarClone fro"
},
{
"path": "src/pages/token.astro",
"chars": 17618,
"preview": "---\nimport Layout from '../layouts/Default.astro'\nimport Navbar from '../components/Navbar.astro'\nimport NavbarClone fro"
},
{
"path": "src/styles/abstracts/_animations.scss",
"chars": 5073,
"preview": "/*! _animations.scss | Krypton | CSS Ninja */\n\n/* ======================================================================"
},
{
"path": "src/styles/abstracts/_colors.scss",
"chars": 1003,
"preview": "/*! _colors.scss | Krypton | CSS Ninja */\n\n/* =========================================================================="
},
{
"path": "src/styles/abstracts/_theme-default.scss",
"chars": 4022,
"preview": "/*! _theme-default.scss | Krypton | Kit1 | CSS Ninja */\n\n/* ============================================================"
},
{
"path": "src/styles/components/_backtotop.scss",
"chars": 1941,
"preview": "/*\n 1. Back to top button\n*/\n\n/* ==========================================================================\n1. Back t"
},
{
"path": "src/styles/components/_buttons.scss",
"chars": 7135,
"preview": "/*! _buttons.scss | Krypton | CSS Ninja */\n\n/* ========================================================================="
},
{
"path": "src/styles/components/_forms.scss",
"chars": 5301,
"preview": "/*! _forms.scss | Krypton | CSS Ninja */\n\n/* ==========================================================================\n"
},
{
"path": "src/styles/components/_hamburger.scss",
"chars": 3266,
"preview": "/* ==========================================================================\nHamburger menu icon\n======================"
},
{
"path": "src/styles/layout/_blog.scss",
"chars": 7454,
"preview": "/*! _blog.scss | Krypton | CSS Ninja */\n\n/* ==========================================================================\nB"
},
{
"path": "src/styles/layout/_faq.scss",
"chars": 2552,
"preview": "/*! _faq.scss | Krypton | CSS Ninja */\n\n/* ==========================================================================\nFA"
},
{
"path": "src/styles/layout/_features.scss",
"chars": 9250,
"preview": "/*! _features.scss | Krypton | CSS Ninja */\n\n/* ========================================================================"
},
{
"path": "src/styles/layout/_footer.scss",
"chars": 6729,
"preview": "/*! _footer.scss | Krypton | CSS Ninja */\n\n/* =========================================================================="
},
{
"path": "src/styles/layout/_hero.scss",
"chars": 873,
"preview": "$size: 8;\n$total: 40;\n\n.starfall {\n position: absolute;\n height: 100%;\n width: 100%;\n top: 0;\n left: 0;\n transform"
},
{
"path": "src/styles/layout/_layout.scss",
"chars": 32548,
"preview": "/*! _layout.scss | Krypton | CSS Ninja */\n\n/* =========================================================================="
},
{
"path": "src/styles/layout/_pageloader.scss",
"chars": 3668,
"preview": "/*! _pageloader.scss | Krypton | CSS Ninja */\n\n/* ======================================================================"
},
{
"path": "src/styles/layout/_responsive.scss",
"chars": 4205,
"preview": "/*! _responsive.scss | Krypton | CSS Ninja */\n\n/* ======================================================================"
},
{
"path": "src/styles/layout/_team.scss",
"chars": 4361,
"preview": "/*! _team.scss | Krypton | CSS Ninja */\n\n/* ==========================================================================\nT"
},
{
"path": "src/styles/layout/_timeline.scss",
"chars": 13394,
"preview": "/*! _theme-default.scss | Krypton | Kit1 | CSS Ninja */\n\n/* ============================================================"
},
{
"path": "src/styles/main.scss",
"chars": 1093,
"preview": "/*! core.scss | Krypton | CSS Ninja */\n\n/* ==========================================================================\nCo"
},
{
"path": "src/styles/utilities/_utils.scss",
"chars": 1483,
"preview": "body {\n overflow-x: hidden;\n}\n\n//Preloader\n#preloader {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n "
}
]
About this extraction
This page contains the full source code of the cssninjaStudio/krypton GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 68 files (280.8 KB), approximately 68.7k tokens, and a symbol index with 11 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.