Compare commits

..

2 Commits

Author SHA1 Message Date
5a530fe2a9 Change blog classes 2023-11-18 18:51:26 -06:00
ecfa3cd2c8 Add support to add blog entries on index 2023-11-17 21:00:46 -06:00
234 changed files with 9286 additions and 5325 deletions

View File

@@ -1,101 +0,0 @@
---
name: hugoplate-best-practices
description: Best practices and architectural patterns for working with the Hugoplate Hugo boilerplate. Use this when modifying theme tokens, configuration, content, layouts, or Tailwind v4 styles in a Hugoplate project.
license: MIT
---
# Hugoplate Agent Skill
This skill provides the best practices and architectural patterns for working with the **Hugoplate** boilerplate. Use this as your primary guide when modifying theme tokens, configuration, content, or layouts.
## 1. Core Architecture
Hugoplate is a modern Hugo boilerplate built with:
- **Hugo (Extended)**: Static site generator.
- **Tailwind CSS v4**: Utility-first CSS using Hugo Pipes and the `@theme` directive.
- **Hugo Modules**: Theme and feature functionality are imported as modules.
- **Theme Generator**: A custom Node.js script (`scripts/themeGenerator.js`) that syncs `data/theme.json` with Tailwind CSS variables.
## 2. Design System (`theme.json`)
All design tokens (colors, fonts, sizes) are managed in `exampleSite/data/theme.json`.
### 2.1 Color Tokens
- **Default (Light)**: `colors.default.theme_color` and `colors.default.text_color`.
- **Dark Mode**: `colors.darkmode.theme_color` and `colors.darkmode.text_color`.
- **Logic**: The `themeGenerator.js` script maps these to CSS variables (e.g., `--color-primary`, `--color-darkmode-primary`).
### 2.2 Typography
- **Google Fonts**: Defined in `fonts.font_family`. Use the syntax `Family:wght@weights` (e.g., `Inter:wght@400;700`).
- **Scale**: `fonts.font_size.scale` controls the heading hierarchy (H1-H6).
- **Base**: `fonts.font_size.base` sets the root font size in pixels.
### 2.3 Workflow: Design Changes
1. **Modify `theme.json`**: Update colors or fonts.
2. **Run Dev Server**: `npm run dev` or `yarn dev`. This automatically runs `themeGenerator.js` and `hugo server`.
3. **Verify**: Check `assets/css/generated-theme.css` to see the updated variables.
## 3. Configuration System
Configuration is split across several files in `exampleSite/config/_default/`:
- `hugo.toml`: Core site settings, build options, and asset fingerprinting.
- `params.toml`: Theme-specific toggles (dark mode, search, navigation, etc.).
- `menus.en.toml`: Menu structures for English.
- `languages.toml`: Multilingual setup.
- `module.toml`: Import declarations for Hugo Modules.
### 3.1 Feature Toggles (`params.toml`)
Most UI components (e.g., `preloader`, `announcement`, `cookies`) have an `enable` flag. Toggle them here without touching the code.
## 4. Content Development
Content is located in `exampleSite/content/english/`.
### 4.1 Section Content
Files in `content/english/sections/` are typically used for homepage sections. They often use `build.render = "never"` because they are pulled into `index.html` via `site.GetPage`.
### 4.2 Front Matter Standards
Always include `title`, `description` (for SEO), and `image` (feature image). Use `draft: false` to publish.
## 5. Layouts & Templates
- **Base**: `layouts/baseof.html` is the master wrapper.
- **Homepage**: `layouts/index.html` iterates through section files.
- **Partials**: Reusable fragments in `layouts/partials/`.
- **Overriding Modules**: To override a module partial, create a file with the same path in your local `layouts/` directory.
## 6. CSS & Tailwind Best Practices
- **Tailwind v4**: Uses `@theme` in `assets/css/main.css`. Avoid creating `tailwind.config.js` as it's not the primary way to configure v4 in this project.
- **Layers**: Add custom CSS to `assets/css/custom.css` or within `@layer` blocks in `main.css`.
- **Images**: Use the `partial "image"` for automatic Hugo responsive processing and WebP conversion.
## 7. Development Commands
| Command | Purpose |
| -------------------------- | ------------------------------------------------------ |
| `npm run dev` | Start dev server with theme watching. |
| `npm run build` | Production build with minification and fingerprinting. |
| `npm run update-modules` | Clean and update Hugo modules to latest. |
| `npm run remove-darkmode` | Permanently remove dark mode functionality. |
| `npm run remove-multilang` | Permanently remove multilingual support. |
## 8. Troubleshooting
- **Styles not updating**: Ensure `npm run dev` is running (it needs to regenerate `generated-theme.css`).
- **Classes missing**: Tailwind v4 in this project scans `hugo_stats.json`. If a new class isn't working, try a full rebuild.
- **Google Fonts error**: Check for spaces or incorrect weight syntax in `theme.json`.
## 9. AI Agent Guidelines
- **Always Read Context**: Before modifying a layout, check if a partial exists in `layouts/partials/essentials/` that might already handle it.
- **Prefer Tokens**: Never hardcode hex colors in CSS. Add them to `theme.json` and use the generated Tailwind classes.
- **Check Params**: Before writing logic to hide/show a section, check `params.toml` for an existing toggle.

View File

@@ -1,44 +0,0 @@
# Use an official node image as a parent image
FROM node:23
# Set environment variables for versions
ARG HUGO_VERSION=0.158.0
ARG GO_VERSION=1.24.0
# Install dependencies
RUN apt-get update && \
apt-get install -y ca-certificates openssl git curl wget build-essential && \
rm -rf /var/lib/apt/lists/*
# Determine architecture
RUN ARCH=$(uname -m) && \
if [ "$ARCH" = "aarch64" ]; then ARCH=arm64; else ARCH=amd64; fi && \
echo "Architecture: $ARCH"
# Download and install Hugo Extended
RUN ARCH=$(uname -m) && \
if [ "$ARCH" = "aarch64" ]; then ARCH=arm64; else ARCH=amd64; fi && \
wget -O hugo_extended_${HUGO_VERSION}.tar.gz https://github.com/gohugoio/hugo/releases/download/v${HUGO_VERSION}/hugo_extended_${HUGO_VERSION}_linux-${ARCH}.tar.gz && \
tar xf hugo_extended_${HUGO_VERSION}.tar.gz && \
mv hugo /usr/bin/hugo && \
rm hugo_extended_${HUGO_VERSION}.tar.gz && \
echo "Hugo installed"
# Download and install Go
RUN ARCH=$(uname -m) && \
if [ "$ARCH" = "aarch64" ]; then ARCH=arm64; else ARCH=amd64; fi && \
wget -O go${GO_VERSION}.linux-${ARCH}.tar.gz https://dl.google.com/go/go${GO_VERSION}.linux-${ARCH}.tar.gz && \
tar -C /usr/local -xzf go${GO_VERSION}.linux-${ARCH}.tar.gz && \
rm go${GO_VERSION}.linux-${ARCH}.tar.gz && \
echo "Go installed"
# Export Go path
ENV PATH=$PATH:/usr/local/go/bin
# Verify versions
RUN git --version && \
hugo version && \
go version
# Default shell
CMD ["/bin/bash"]

View File

@@ -1,23 +0,0 @@
{
"name": "Hugo",
"build": {
"dockerfile": "Dockerfile",
"args": {
"GO_VERSION": "1.24.0",
"HUGO_VERSION": "0.158.0"
}
},
"customizations": {
"vscode": {
"settings": {},
"extensions": [
"bradlc.vscode-tailwindcss",
"budparr.language-hugo-vscode",
"tamasfe.even-better-toml"
]
}
},
"remoteUser": "node",
"postCreateCommand": "npm run project-setup && npm install && npm run dev",
"forwardPorts": [1313]
}

View File

@@ -1,14 +0,0 @@
; https://editorconfig.org
root = true
[*]
charset = utf-8
end_of_line = lf
indent_size = 2
indent_style = space
trim_trailing_whitespace = true
insert_final_newline = true
[*.md]
trim_trailing_whitespace = false

View File

@@ -1,79 +0,0 @@
name: 🐛 Bug Report
description: Report any issues you encounter to make hugoplate even more efficient.
body:
- type: input
id: hugo-version
attributes:
label: What is your Hugo Extended Version
description: Check the [README](https://github.com/zeon-studio/hugoplate?tab=readme-ov-file#user-content--prerequisites) for the required version. Use "hugo version" in your terminal to see your Hugo version.
validations:
required: true
- type: input
id: go-version
attributes:
label: What is your Go Version
description: Check the [README](https://github.com/zeon-studio/hugoplate?tab=readme-ov-file#user-content--prerequisites) for the required version. Use "go version" in your terminal to see your Go version.
validations:
required: true
- type: input
id: node-version
attributes:
label: What is your Node.js Version
description: Check the [README](https://github.com/zeon-studio/hugoplate?tab=readme-ov-file#user-content--prerequisites) for the required version. Use "node -v" in your terminal to see your Node.js version.
validations:
required: true
- type: input
id: operating-system
attributes:
label: What is your Operating System
validations:
required: false
- type: checkboxes
id: make-sure
attributes:
label: Check for Existing Issues
description: |
Before reporting a problem, please confirm that you've searched thoroughly for any existing reports on the same issue. If no relevant issues are found, proceed with the report.
options:
- label: I have searched and found no relevant issues.
required: true
- type: textarea
id: expected-behavior
attributes:
label: Expected Behavior
description: A clear description of what you expected to happen.
validations:
required: true
- type: textarea
id: steps-to-reproduce
attributes:
label: Steps to Reproduce
description: |
Please explain the steps required to duplicate this issue. Include detailed commands and expected outcomes.
placeholder: |
1.
2.
3.
validations:
required: true
- type: input
id: reproduction-url
attributes:
label: Code Reproduction URL
description: Please reproduce this issue and provide a link to the repository.
placeholder: github.com/yourusername/repo
- type: textarea
id: additional-information
attributes:
label: Additional Information
description: |
List any other information that is relevant to your issue. You can use Markdown for formatting, including code blocks, links, etc.

View File

@@ -1,78 +0,0 @@
# workflow for building and deploying to GitHub Pages
name: Deploy Hugo site to Pages
on:
# Runs on pushes targeting the default branch
push:
branches: ["main"]
# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
permissions:
contents: read
pages: write
id-token: write
# Default to bash
defaults:
run:
shell: bash
# Environment variables available to all jobs and steps in this workflow
env:
HUGO_ENV: production
HUGO_VERSION: "0.158.0"
GO_VERSION: "1.23.3"
TINA_CLIENT_ID: ${{ secrets.TINA_CLIENT_ID }}
TINA_TOKEN: ${{ secrets.TINA_TOKEN }}
TINA_SEARCH_TOKEN: ${{ secrets.TINA_SEARCH_TOKEN }}
jobs:
# Build job
build:
runs-on: ubuntu-24.04-arm
steps:
- name: Install Hugo
run: |
wget -O ${{ runner.temp }}/hugo.deb https://github.com/gohugoio/hugo/releases/download/v${HUGO_VERSION}/hugo_extended_${HUGO_VERSION}_linux-arm64.deb \
&& sudo dpkg -i ${{ runner.temp }}/hugo.deb
- name: Install Go
run: |
wget -O ${{ runner.temp }}/go.deb https://dl.google.com/go/go${GO_VERSION}.linux-amd64.tar.gz \
&& sudo tar -C /usr/local -xzf ${{ runner.temp }}/go.deb
- name: Checkout
uses: actions/checkout@v4.2.2
with:
submodules: recursive
fetch-depth: 0
- name: Setup Pages
id: pages
uses: actions/configure-pages@v5
- name: Setup Project
run: npm run project-setup
- name: Install npm dependencies
run: npm install
- name: Build site
run: npm run build
- name: Upload artifact
uses: actions/upload-pages-artifact@v3.0.1
with:
path: ./public
# Deployment job
deploy:
environment:
name: github-pages
url: ${{ steps.deployment.outputs.page_url }}
runs-on: ubuntu-24.04-arm
needs: build
steps:
- name: Deploy to GitHub Pages
id: deployment
uses: actions/deploy-pages@v4.0.5

17
.gitignore vendored Executable file → Normal file
View File

@@ -1,16 +1 @@
Thumbs.db
.DS_Store
.dist
.tmp
.lock
.sass-cache
npm-debug.log
node_modules
builds
package-lock.json
public
resources
.hugo_build.lock
jsconfig.json
go.sum
yarn.lock
.DS_Store

View File

@@ -1,38 +0,0 @@
stages:
- build
variables:
HUGO_ENV: production
HUGO_VERSION: "0.158.0"
GO_VERSION: "1.23.3"
NODE_VERSION: "18.16.1"
cache:
paths:
- node_modules/
default:
image: node:${NODE_VERSION}
before_script:
- echo "USING NODE ${NODE_VERSION}"
- apt-get update && apt-get install -y curl
- curl -LO "https://github.com/gohugoio/hugo/releases/download/v${HUGO_VERSION}/hugo_extended_${HUGO_VERSION}_Linux-64bit.tar.gz"
- tar -xvf hugo_extended_${HUGO_VERSION}_Linux-64bit.tar.gz
- mv hugo /usr/local/bin/
- rm hugo_extended_${HUGO_VERSION}_Linux-64bit.tar.gz
- echo "HUGO ${HUGO_VERSION} INSTALLED"
- curl -LO "https://dl.google.com/go/go${GO_VERSION}.linux-amd64.tar.gz"
- tar -C /usr/local -xzf go${GO_VERSION}.linux-amd64.tar.gz
- export PATH=$PATH:/usr/local/go/bin
- rm go${GO_VERSION}.linux-amd64.tar.gz
- echo "GO ${GO_VERSION} INSTALLED"
- npm install
pages:
stage: build
script:
- npm run project-setup
- npm run build
artifacts:
paths:
- public

View File

@@ -1,59 +0,0 @@
{
"maxerr": 50,
"bitwise": true,
"camelcase": false,
"curly": true,
"eqeqeq": true,
"forin": true,
"freeze": true,
"immed": true,
"indent": 2,
"latedef": true,
"newcap": false,
"noarg": true,
"noempty": true,
"nonbsp": true,
"nonew": true,
"plusplus": false,
"undef": true,
"unused": false,
"strict": true,
"maxparams": false,
"maxdepth": 4,
"maxstatements": false,
"maxcomplexity": false,
"maxlen": 400,
"browser": true,
"devel": true,
"asi": false,
"boss": false,
"debug": false,
"eqnull": false,
"es3": false,
"es5": false,
"esversion": 12,
"moz": false,
"evil": true,
"expr": true,
"funcscope": false,
"globalstrict": false,
"iterator": false,
"lastsemic": false,
"laxbreak": false,
"laxcomma": false,
"loopfunc": true,
"multistr": true,
"noyield": false,
"notypeof": false,
"proto": false,
"scripturl": false,
"shadow": false,
"sub": false,
"supernew": false,
"validthis": false,
"globals": {
"jQuery": false,
"google": false,
"$": false
}
}

View File

@@ -1,5 +0,0 @@
{
"MD033": false,
"MD034": false,
"MD013": false
}

View File

@@ -1,13 +0,0 @@
{
"plugins": ["prettier-plugin-go-template"],
"overrides": [
{
"files": ["*.html"],
"options": {
"parser": "go-template",
"goTemplateBracketSpacing": true,
"bracketSameLine": true
}
}
]
}

View File

@@ -1,12 +0,0 @@
{
"content": "exampleSite/content",
"media": "exampleSite/assets/images",
"public": "exampleSite/static",
"configs": [
"exampleSite/config/_default",
"exampleSite/data",
"exampleSite/hugo.toml"
],
"custom-commit": false,
"arrangement": []
}

View File

@@ -1,7 +0,0 @@
{
"recommendations": [
"bradlc.vscode-tailwindcss",
"budparr.language-hugo-vscode",
"tamasfe.even-better-toml"
]
}

View File

@@ -1,3 +0,0 @@
{
"tailwindCSS.experimental.configFile": "./themes/hugoplate/assets/css/main.css"
}

25
.vscode/tasks.json vendored
View File

@@ -1,25 +0,0 @@
{
// See https://go.microsoft.com/fwlink/?LinkId=733558
"version": "2.0.0",
"tasks": [
{
"label": "Development",
"type": "shell",
"command": "yarn dev:example",
"isBackground": true,
"group": {
"kind": "test",
"isDefault": true
}
},
{
"label": "Build",
"type": "shell",
"command": "yarn build:example",
"group": {
"kind": "build",
"isDefault": true
}
}
]
}

26
LICENSE
View File

@@ -1,21 +1,21 @@
The MIT License (MIT)
Copyright (c) 2026 - Present, Sitepins
Copyright (c) 2020 StaticMania
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:
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.
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.

79
README.md Executable file → Normal file
View File

@@ -1,65 +1,50 @@
## 🌟 Roxo Hugo
<h1>Roxo Hugo</h1>
<img src="https://user-images.githubusercontent.com/16266381/76162082-10850b80-6164-11ea-8b20-f30b2611f92c.png" alt="screenshot" width="100%">
A Hugo-powered static website built with Tailwind CSS.
Roxo Hugo is a digital agency Hugo theme for creative agencies, freelancers, graphic designers, photographers. Can be used for any kind of corporate websites who provides digital services with many expertise such as Design, Digital Products, Development, Campaign & Content, Employer Branding, Animation & Motion Graphics ,Packaging & Product Design, Retail & Spacial, Print & Editorial Design, Concept/Text, Information Design etc. Roxo Hugos contact form is supported fabform.
### Prerequisites
## Table of Contents
To contribute effectively, you'll need some prerequisites installed on your machine:
- [Live Demo](#live-demo)
- [Installation](#installation)
- [Main Features](#features)
- [Support](#support)
- [Licensing](#licensing)
- [Hire](#hire)
- **Hugo Extended v0.161+**: [[https://gohugo.io/installation/](https://gohugo.io/installation/)]
- **Node v18+**: [[https://nodejs.org/en/download/](https://nodejs.org/en/download/)]
- **Go v1.22+**: [[https://go.dev/doc/install](https://go.dev/doc/install)]
## Live Demo
### Installation (as a theme)
Checkout the live demo [here](https://roxo-hugo.staticmania.com/)
To use Roxo in a new Hugo site, install the theme and configure your site with `hugo.toml` (not `config.toml`). The theme expects the Hugo config file to be named `hugo.toml`; using `config.toml` will result in a 404 / "page not found".
## Installation
```bash
hugo new site mysite
cd mysite
git submodule add https://github.com/furioustheme/roxo-hugo.git themes/roxo-hugo
```
1. Add the repository into your Hugo Project repository as a submodule, `git submodule add git@github.com:StaticMania/roxo-hugo.git themes/roxo-hugo`.
2. Copy the `data`, `content`, `static`, `resources` & `config.toml` files from the `exampleSite` directory and paste it on you Hugo Project repository/directory. From the site home directory:
Then create `hugo.toml` at the root of your site (copy `themes/roxo-hugo/exampleSite/hugo.toml` as a starting point) and set:
cp -a themes/roxo-hugo/exampleSite/* .
```toml
theme = "roxo-hugo"
```
3. Build your site with `hugo serve` and see the result at `http://localhost:1313/`.
Run the site:
```bash
hugo server
```
## Features
### Install Dependencies
* Responsive Ready.
* Powered by Bootstrap 4.
* Dedicated portfolio page.
* Blog Support.
* Well formatted code.
* Easy Customization.
* FabForm.io [static website form](https://fabform.io).
* Crafted for Design Agency/ Portfolio
Install all the necessary dependencies using the following command:
## Support
```bash
yarn install
```
Have some question or facing any technical trouble feel free to [Contact Us](https://staticmania.com/contact/)
### Project Setup
## Licensing
To set up the project, run the following command:
This Repository is licensed under the [MIT](https://github.com/StaticMania/roxo-hugo/blob/master/LICENSE) License
```bash
yarn project-setup
```
## Hire
### Development Command
Start the development server using the following command:
```bash
yarn dev
```
### Preview Command
Start the production server to preview your changes and test functionality:
```bash
yarn preview
```
Need help to build HUGO websites with your custom requirements. Feel free to [contact](https://staticmania.com/contact/) with us. We provide custom development service for HUGO.

View File

@@ -1 +0,0 @@
/* /en/404.html 404

View File

@@ -1,29 +0,0 @@
version: 1
frontend:
phases:
preBuild:
commands:
- yum install -y curl
- curl -LO "https://github.com/gohugoio/hugo/releases/download/v0.158.0/hugo_extended_0.158.0_Linux-64bit.tar.gz"
- tar -xvf hugo_extended_0.158.0_Linux-64bit.tar.gz
- mv hugo /usr/local/bin/
- rm hugo_extended_0.158.0_Linux-64bit.tar.gz
- echo "HUGO 0.158.0 INSTALLED"
- curl -LO "https://dl.google.com/go/go1.23.3.linux-amd64.tar.gz"
- tar -C /usr/local -xzf go1.23.3.linux-amd64.tar.gz
- export PATH=$PATH:/usr/local/go/bin
- rm go1.23.3.linux-amd64.tar.gz
- echo "GO 1.23.3 INSTALLED"
- npm install
build:
commands:
- npm run project-setup
- npm run build
artifacts:
# IMPORTANT - Please verify your build output directory
baseDirectory: /public
files:
- "**/*"
cache:
paths:
- node_modules/**/*

2
archetypes/default.md Normal file
View File

@@ -0,0 +1,2 @@
+++
+++

View File

@@ -1,62 +0,0 @@
html {
@apply text-base-sm md:text-base;
}
body {
@apply bg-body text-base font-primary font-normal leading-relaxed text-text overflow-x-hidden;
}
h1,
h2,
h3,
h4,
h5,
h6 {
@apply font-secondary font-bold leading-tight text-text-dark;
span {
@apply text-primary;
}
}
h1,
.h1 {
@apply text-h1-sm md:text-h1;
}
h2,
.h2 {
@apply text-h2-sm md:text-h2;
}
h3,
.h3 {
@apply text-h3-sm md:text-h3;
}
h4,
.h4 {
@apply text-h4;
}
h5,
.h5 {
@apply text-h5;
}
h6,
.h6 {
@apply text-h6;
}
b,
strong {
@apply font-semibold;
}
code {
@apply after:border-none;
}
blockquote > p {
@apply !my-0;
}

7
assets/css/bootstrap.css vendored Normal file

File diff suppressed because one or more lines are too long

View File

@@ -1,44 +0,0 @@
.btn {
@apply inline-block border-0 rounded-none px-10 py-3.75 font-secondary font-light text-white transition-colors duration-300 cursor-pointer;
&:focus {
box-shadow: none;
}
.btn-area {
@apply block overflow-hidden;
span {
@apply relative inline-block py-[2px] origin-left transition-transform duration-[900ms];
transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
&::after {
content: attr(data-text);
@apply absolute left-0 top-[150%] origin-left;
transform: skewY(30deg);
transition: transform 0.9s cubic-bezier(0.19, 1, 0.22, 1);
}
}
}
&:hover,
&:visited {
.btn-area {
span {
transform: translateY(-150%) skewY(7deg);
&::after {
transform: skewY(-7deg);
}
}
}
}
}
.btn-primary {
@apply border-primary bg-primary/85 hover:bg-primary text-text-light;
}
.btn-secondary {
@apply border-secondary bg-secondary/85 hover:bg-secondary text-text-light;
}

View File

@@ -1,67 +0,0 @@
/* section style */
.section {
@apply py-24 xl:py-28;
}
.section-sm {
@apply py-16 xl:py-20;
}
/* container */
.container {
@apply mx-auto xl:max-w-[1140px]! px-4;
}
/* social icons */
.social-icons {
@apply space-x-3;
}
.social-icons li {
@apply inline-block;
}
.social-icons li a {
@apply flex h-6 w-6 items-center justify-center text-center leading-9 text-text-dark;
}
.social-icons li a svg {
@apply h-5 w-5;
}
/* Form Controls */
.form-control {
@apply bg-transparent border-0 border-b border-primary mb-7 px-0 pb-2.5 pt-0 rounded-none font-light tracking-wider appearance-none h-10 transition-all duration-200 text-text-dark placeholder-text-dark outline-0 focus:ring-0;
}
.form-control:focus {
@apply shadow-none bg-transparent border-b border-text-dark outline-none;
}
select.form-control {
@apply h-10 cursor-pointer;
}
textarea.form-control {
@apply h-auto;
}
/* content style */
.content {
@apply prose max-w-none;
@apply prose-headings:mb-[.3em] prose-headings:mt-[.6em] prose-headings:text-text-dark;
@apply prose-h1:text-h1-sm md:prose-h1:text-h1;
@apply prose-h2:text-h2-sm md:prose-h2:text-h2;
@apply prose-h3:text-h3-sm md:prose-h3:text-h3;
@apply prose-p:text-base prose-p:text-text;
@apply prose-a:text-text prose-a:[&.btn]:no-underline;
@apply prose-img:max-w-full prose-img:rounded;
@apply prose-strong:text-text-dark;
@apply prose-hr:border-border;
@apply prose-pre:rounded-lg prose-pre:bg-light;
@apply prose-li:text-text;
@apply prose-blockquote:rounded-lg prose-blockquote:border prose-blockquote:border-l-[10px] prose-blockquote:border-primary prose-blockquote:bg-light prose-blockquote:px-8 prose-blockquote:py-10 prose-blockquote:font-secondary prose-blockquote:text-2xl prose-blockquote:not-italic prose-blockquote:text-text-dark;
@apply prose-table:relative prose-table:overflow-hidden prose-table:rounded-lg prose-table:before:absolute prose-table:before:left-0 prose-table:before:top-0 prose-table:before:h-full prose-table:before:w-full prose-table:before:rounded-[inherit] prose-table:before:border prose-table:before:border-border prose-table:before:content-[""];
@apply prose-thead:border-border prose-thead:bg-light;
@apply prose-th:relative prose-th:z-10 prose-th:px-4 prose-th:py-[18px] prose-th:text-text-dark;
@apply prose-tr:border-border;
@apply prose-td:relative prose-td:z-10 prose-td:px-3 prose-td:py-[18px];
}

View File

@@ -1,2 +0,0 @@
/* DO NOT WRITE ANY STYLE IN THIS FILE */
/* If you want to add your own styles, please write it in the `./assets/css/custom.css` file. */

View File

@@ -1,39 +0,0 @@
/**
* Auto-generated from "data/theme.json"
* DO NOT EDIT THIS FILE MANUALLY
* Run: node scripts/themeGenerator.js
*/
@theme {
/* === Colors === */
--color-primary: #E07B7B;
--color-secondary: #8BC5BF;
--color-tertiary: #F7F9FF;
--color-body: #fff;
--color-border: #eaeaea;
--color-light: #f6f6f6;
--color-dark: #040404;
--color-text: #9D9EA5;
--color-text-dark: #00113E;
--color-text-light: #fff;
/* === Font Families === */
--font-primary: Josefin Sans, sans-serif;
--font-secondary: Montserrat, sans-serif;
/* === Font Sizes === */
--text-base: 16px;
--text-base-sm: 12.8px;
--text-h6: 1.25rem;
--text-h6-sm: 1.125rem;
--text-h5: 1.5625rem;
--text-h5-sm: 1.40625rem;
--text-h4: 1.953125rem;
--text-h4-sm: 1.7578125rem;
--text-h3: 2.44140625rem;
--text-h3-sm: 2.197265625rem;
--text-h2: 3.0517578125rem;
--text-h2-sm: 2.74658203125rem;
--text-h1: 3.814697265625rem;
--text-h1-sm: 3.4332275390625rem;
}

View File

@@ -1,33 +0,0 @@
@import "tailwindcss";
@plugin "@tailwindcss/forms";
@plugin "@tailwindcss/typography";
@plugin 'tailwind-bootstrap-grid';
@source "hugo_stats.json";
/* Auto-generated theme from "data/theme.json"*/
@import "./generated-theme.css";
@import "./safe.css";
@import "./utilities.css";
@layer base {
@import "./base.css";
}
@layer components {
@import "./components.css";
@import "./navigation.css";
@import "./buttons.css";
}
@import "social-share.css";
@import "gallery-slider.css";
@import "images.css";
@import "toc.css";
@import "tab.css";
@import "accordion.css";
@import "modal.css";
@import "notice.css";
@import "module-overrides.css";
@import "custom.css";

View File

@@ -1,63 +0,0 @@
/* table of contents */
.table-of-content {
@apply overflow-hidden rounded;
}
/* share icons */
.share-icons .share-link {
@apply h-9 w-9 rounded leading-9 bg-primary hover:bg-primary;
}
.share-icons .share-icon svg {
}
.fediverse-input-wrapper {
@apply bg-body rounded;
input {
@apply rounded focus:border-primary focus:ring-0;
}
button {
@apply rounded bg-primary text-light hover:bg-primary;
}
}
/* notice */
.notice {
@apply rounded-lg;
}
/* tab */
.tab {
@apply border-border overflow-hidden rounded-lg border;
}
.tab-nav {
@apply border-border bg-light pl-4;
}
.tab-nav-item {
@apply text-text-dark px-8 !text-lg;
}
.tab-nav-item.active {
@apply border-dark;
}
.tab-content-panel {
@apply px-4 !pt-0;
}
/* accordion */
.accordion {
@apply border-border bg-light mb-6 overflow-hidden rounded-lg border;
}
.accordion-header {
@apply text-text-dark;
}
/* cookie consent */
.cookie-box {
@apply !rounded-lg;
}
/* slider */
.gallery-slider {
@apply !ml-0;
}

View File

@@ -1,43 +0,0 @@
.header {
@apply bg-body py-6;
}
/* navbar items */
.navbar {
@apply relative flex flex-wrap items-center justify-between;
}
.navbar-brand {
@apply text-text-dark text-xl font-semibold;
image {
@apply max-h-full max-w-full;
}
}
.navbar-nav {
@apply text-center lg:text-left;
}
.nav-link {
@apply text-text-dark hover:text-primary block p-3 cursor-pointer font-semibold transition lg:px-2 lg:py-3;
}
.nav-dropdown {
@apply mr-0;
}
.nav-dropdown > svg {
@apply pointer-events-none;
}
.nav-dropdown-list {
@apply bg-body z-10 min-w-[180px] rounded p-4 shadow-sm;
}
.nav-dropdown-item {
@apply [&:not(:last-child)]:mb-2;
}
.nav-dropdown-link {
@apply text-text-dark hover:text-primary block py-1 font-semibold transition;
}

View File

@@ -1,12 +0,0 @@
/* navbar toggler */
input#nav-toggle:checked + label #show-button {
@apply hidden;
}
input#nav-toggle:checked + label #hide-button {
@apply block;
}
input#nav-toggle:checked ~ div #nav-menu {
@apply max-lg:block;
}

40
assets/js/formhandler.js Normal file
View File

@@ -0,0 +1,40 @@
window.addEventListener("DOMContentLoaded", function() {
var form = document.getElementById("contact-form");
var button = document.getElementById("contact-form-button");
var status = document.getElementById("contact-form-status");
function success() {
form.reset();
button.style = "display: none ";
status.innerHTML = "Thanks! Contact form is submitted successfully.";
}
function error() {
status.innerHTML = "Oops! There was a problem.";
}
// handle the form submission event
form.addEventListener("submit", function(ev) {
ev.preventDefault();
var data = new FormData(form);
ajax(form.method, form.action, data, success, error);
});
});
// helper function for sending an AJAX request
function ajax(method, url, data, success, error) {
var xhr = new XMLHttpRequest();
xhr.open(method, url);
xhr.setRequestHeader("Accept", "application/json");
xhr.onreadystatechange = function() {
if (xhr.readyState !== XMLHttpRequest.DONE) return;
if (xhr.status === 200) {
success(xhr.response, xhr.responseType);
} else {
error(xhr.status, xhr.response, xhr.responseType);
}
};
xhr.send(data);
}

View File

@@ -1,43 +0,0 @@
// main script
(function () {
"use strict";
// Header shrink on scroll
(function () {
var header = document.getElementById("site-header");
if (!header) return;
// only enable shrink behavior when navbar_fixed param is true
var navbarFixed = header.dataset && header.dataset.navbarFixed === "true";
if (!navbarFixed) return;
var lastKnownScrollY = 0;
var ticking = false;
var threshold = 20;
function onScroll() {
lastKnownScrollY = window.scrollY || window.pageYOffset;
requestTick();
}
function requestTick() {
if (!ticking) {
requestAnimationFrame(update);
}
ticking = true;
}
function update() {
if (lastKnownScrollY > threshold) {
header.classList.add("py-2", "lg:py-3", "shadow-lg");
header.classList.remove("py-6", "lg:py-6");
} else {
header.classList.remove("py-2", "lg:py-3", "shadow-lg");
header.classList.add("py-6", "lg:py-6");
}
ticking = false;
}
window.addEventListener("scroll", onScroll, { passive: true });
// run on init
update();
})();
})();

614
assets/js/qrcode.js Normal file
View File

@@ -0,0 +1,614 @@
/**
* @fileoverview
* - Using the 'QRCode for Javascript library'
* - Fixed dataset of 'QRCode for Javascript library' for support full-spec.
* - this library has no dependencies.
*
* @author davidshimjs
* @see <a href="http://www.d-project.com/" target="_blank">http://www.d-project.com/</a>
* @see <a href="http://jeromeetienne.github.com/jquery-qrcode/" target="_blank">http://jeromeetienne.github.com/jquery-qrcode/</a>
*/
var QRCode;
(function () {
//---------------------------------------------------------------------
// QRCode for JavaScript
//
// Copyright (c) 2009 Kazuhiko Arase
//
// URL: http://www.d-project.com/
//
// Licensed under the MIT license:
// http://www.opensource.org/licenses/mit-license.php
//
// The word "QR Code" is registered trademark of
// DENSO WAVE INCORPORATED
// http://www.denso-wave.com/qrcode/faqpatent-e.html
//
//---------------------------------------------------------------------
function QR8bitByte(data) {
this.mode = QRMode.MODE_8BIT_BYTE;
this.data = data;
this.parsedData = [];
// Added to support UTF-8 Characters
for (var i = 0, l = this.data.length; i < l; i++) {
var byteArray = [];
var code = this.data.charCodeAt(i);
if (code > 0x10000) {
byteArray[0] = 0xF0 | ((code & 0x1C0000) >>> 18);
byteArray[1] = 0x80 | ((code & 0x3F000) >>> 12);
byteArray[2] = 0x80 | ((code & 0xFC0) >>> 6);
byteArray[3] = 0x80 | (code & 0x3F);
} else if (code > 0x800) {
byteArray[0] = 0xE0 | ((code & 0xF000) >>> 12);
byteArray[1] = 0x80 | ((code & 0xFC0) >>> 6);
byteArray[2] = 0x80 | (code & 0x3F);
} else if (code > 0x80) {
byteArray[0] = 0xC0 | ((code & 0x7C0) >>> 6);
byteArray[1] = 0x80 | (code & 0x3F);
} else {
byteArray[0] = code;
}
this.parsedData.push(byteArray);
}
this.parsedData = Array.prototype.concat.apply([], this.parsedData);
if (this.parsedData.length != this.data.length) {
this.parsedData.unshift(191);
this.parsedData.unshift(187);
this.parsedData.unshift(239);
}
}
QR8bitByte.prototype = {
getLength: function (buffer) {
return this.parsedData.length;
},
write: function (buffer) {
for (var i = 0, l = this.parsedData.length; i < l; i++) {
buffer.put(this.parsedData[i], 8);
}
}
};
function QRCodeModel(typeNumber, errorCorrectLevel) {
this.typeNumber = typeNumber;
this.errorCorrectLevel = errorCorrectLevel;
this.modules = null;
this.moduleCount = 0;
this.dataCache = null;
this.dataList = [];
}
QRCodeModel.prototype={addData:function(data){var newData=new QR8bitByte(data);this.dataList.push(newData);this.dataCache=null;},isDark:function(row,col){if(row<0||this.moduleCount<=row||col<0||this.moduleCount<=col){throw new Error(row+","+col);}
return this.modules[row][col];},getModuleCount:function(){return this.moduleCount;},make:function(){this.makeImpl(false,this.getBestMaskPattern());},makeImpl:function(test,maskPattern){this.moduleCount=this.typeNumber*4+17;this.modules=new Array(this.moduleCount);for(var row=0;row<this.moduleCount;row++){this.modules[row]=new Array(this.moduleCount);for(var col=0;col<this.moduleCount;col++){this.modules[row][col]=null;}}
this.setupPositionProbePattern(0,0);this.setupPositionProbePattern(this.moduleCount-7,0);this.setupPositionProbePattern(0,this.moduleCount-7);this.setupPositionAdjustPattern();this.setupTimingPattern();this.setupTypeInfo(test,maskPattern);if(this.typeNumber>=7){this.setupTypeNumber(test);}
if(this.dataCache==null){this.dataCache=QRCodeModel.createData(this.typeNumber,this.errorCorrectLevel,this.dataList);}
this.mapData(this.dataCache,maskPattern);},setupPositionProbePattern:function(row,col){for(var r=-1;r<=7;r++){if(row+r<=-1||this.moduleCount<=row+r)continue;for(var c=-1;c<=7;c++){if(col+c<=-1||this.moduleCount<=col+c)continue;if((0<=r&&r<=6&&(c==0||c==6))||(0<=c&&c<=6&&(r==0||r==6))||(2<=r&&r<=4&&2<=c&&c<=4)){this.modules[row+r][col+c]=true;}else{this.modules[row+r][col+c]=false;}}}},getBestMaskPattern:function(){var minLostPoint=0;var pattern=0;for(var i=0;i<8;i++){this.makeImpl(true,i);var lostPoint=QRUtil.getLostPoint(this);if(i==0||minLostPoint>lostPoint){minLostPoint=lostPoint;pattern=i;}}
return pattern;},createMovieClip:function(target_mc,instance_name,depth){var qr_mc=target_mc.createEmptyMovieClip(instance_name,depth);var cs=1;this.make();for(var row=0;row<this.modules.length;row++){var y=row*cs;for(var col=0;col<this.modules[row].length;col++){var x=col*cs;var dark=this.modules[row][col];if(dark){qr_mc.beginFill(0,100);qr_mc.moveTo(x,y);qr_mc.lineTo(x+cs,y);qr_mc.lineTo(x+cs,y+cs);qr_mc.lineTo(x,y+cs);qr_mc.endFill();}}}
return qr_mc;},setupTimingPattern:function(){for(var r=8;r<this.moduleCount-8;r++){if(this.modules[r][6]!=null){continue;}
this.modules[r][6]=(r%2==0);}
for(var c=8;c<this.moduleCount-8;c++){if(this.modules[6][c]!=null){continue;}
this.modules[6][c]=(c%2==0);}},setupPositionAdjustPattern:function(){var pos=QRUtil.getPatternPosition(this.typeNumber);for(var i=0;i<pos.length;i++){for(var j=0;j<pos.length;j++){var row=pos[i];var col=pos[j];if(this.modules[row][col]!=null){continue;}
for(var r=-2;r<=2;r++){for(var c=-2;c<=2;c++){if(r==-2||r==2||c==-2||c==2||(r==0&&c==0)){this.modules[row+r][col+c]=true;}else{this.modules[row+r][col+c]=false;}}}}}},setupTypeNumber:function(test){var bits=QRUtil.getBCHTypeNumber(this.typeNumber);for(var i=0;i<18;i++){var mod=(!test&&((bits>>i)&1)==1);this.modules[Math.floor(i/3)][i%3+this.moduleCount-8-3]=mod;}
for(var i=0;i<18;i++){var mod=(!test&&((bits>>i)&1)==1);this.modules[i%3+this.moduleCount-8-3][Math.floor(i/3)]=mod;}},setupTypeInfo:function(test,maskPattern){var data=(this.errorCorrectLevel<<3)|maskPattern;var bits=QRUtil.getBCHTypeInfo(data);for(var i=0;i<15;i++){var mod=(!test&&((bits>>i)&1)==1);if(i<6){this.modules[i][8]=mod;}else if(i<8){this.modules[i+1][8]=mod;}else{this.modules[this.moduleCount-15+i][8]=mod;}}
for(var i=0;i<15;i++){var mod=(!test&&((bits>>i)&1)==1);if(i<8){this.modules[8][this.moduleCount-i-1]=mod;}else if(i<9){this.modules[8][15-i-1+1]=mod;}else{this.modules[8][15-i-1]=mod;}}
this.modules[this.moduleCount-8][8]=(!test);},mapData:function(data,maskPattern){var inc=-1;var row=this.moduleCount-1;var bitIndex=7;var byteIndex=0;for(var col=this.moduleCount-1;col>0;col-=2){if(col==6)col--;while(true){for(var c=0;c<2;c++){if(this.modules[row][col-c]==null){var dark=false;if(byteIndex<data.length){dark=(((data[byteIndex]>>>bitIndex)&1)==1);}
var mask=QRUtil.getMask(maskPattern,row,col-c);if(mask){dark=!dark;}
this.modules[row][col-c]=dark;bitIndex--;if(bitIndex==-1){byteIndex++;bitIndex=7;}}}
row+=inc;if(row<0||this.moduleCount<=row){row-=inc;inc=-inc;break;}}}}};QRCodeModel.PAD0=0xEC;QRCodeModel.PAD1=0x11;QRCodeModel.createData=function(typeNumber,errorCorrectLevel,dataList){var rsBlocks=QRRSBlock.getRSBlocks(typeNumber,errorCorrectLevel);var buffer=new QRBitBuffer();for(var i=0;i<dataList.length;i++){var data=dataList[i];buffer.put(data.mode,4);buffer.put(data.getLength(),QRUtil.getLengthInBits(data.mode,typeNumber));data.write(buffer);}
var totalDataCount=0;for(var i=0;i<rsBlocks.length;i++){totalDataCount+=rsBlocks[i].dataCount;}
if(buffer.getLengthInBits()>totalDataCount*8){throw new Error("code length overflow. ("
+buffer.getLengthInBits()
+">"
+totalDataCount*8
+")");}
if(buffer.getLengthInBits()+4<=totalDataCount*8){buffer.put(0,4);}
while(buffer.getLengthInBits()%8!=0){buffer.putBit(false);}
while(true){if(buffer.getLengthInBits()>=totalDataCount*8){break;}
buffer.put(QRCodeModel.PAD0,8);if(buffer.getLengthInBits()>=totalDataCount*8){break;}
buffer.put(QRCodeModel.PAD1,8);}
return QRCodeModel.createBytes(buffer,rsBlocks);};QRCodeModel.createBytes=function(buffer,rsBlocks){var offset=0;var maxDcCount=0;var maxEcCount=0;var dcdata=new Array(rsBlocks.length);var ecdata=new Array(rsBlocks.length);for(var r=0;r<rsBlocks.length;r++){var dcCount=rsBlocks[r].dataCount;var ecCount=rsBlocks[r].totalCount-dcCount;maxDcCount=Math.max(maxDcCount,dcCount);maxEcCount=Math.max(maxEcCount,ecCount);dcdata[r]=new Array(dcCount);for(var i=0;i<dcdata[r].length;i++){dcdata[r][i]=0xff&buffer.buffer[i+offset];}
offset+=dcCount;var rsPoly=QRUtil.getErrorCorrectPolynomial(ecCount);var rawPoly=new QRPolynomial(dcdata[r],rsPoly.getLength()-1);var modPoly=rawPoly.mod(rsPoly);ecdata[r]=new Array(rsPoly.getLength()-1);for(var i=0;i<ecdata[r].length;i++){var modIndex=i+modPoly.getLength()-ecdata[r].length;ecdata[r][i]=(modIndex>=0)?modPoly.get(modIndex):0;}}
var totalCodeCount=0;for(var i=0;i<rsBlocks.length;i++){totalCodeCount+=rsBlocks[i].totalCount;}
var data=new Array(totalCodeCount);var index=0;for(var i=0;i<maxDcCount;i++){for(var r=0;r<rsBlocks.length;r++){if(i<dcdata[r].length){data[index++]=dcdata[r][i];}}}
for(var i=0;i<maxEcCount;i++){for(var r=0;r<rsBlocks.length;r++){if(i<ecdata[r].length){data[index++]=ecdata[r][i];}}}
return data;};var QRMode={MODE_NUMBER:1<<0,MODE_ALPHA_NUM:1<<1,MODE_8BIT_BYTE:1<<2,MODE_KANJI:1<<3};var QRErrorCorrectLevel={L:1,M:0,Q:3,H:2};var QRMaskPattern={PATTERN000:0,PATTERN001:1,PATTERN010:2,PATTERN011:3,PATTERN100:4,PATTERN101:5,PATTERN110:6,PATTERN111:7};var QRUtil={PATTERN_POSITION_TABLE:[[],[6,18],[6,22],[6,26],[6,30],[6,34],[6,22,38],[6,24,42],[6,26,46],[6,28,50],[6,30,54],[6,32,58],[6,34,62],[6,26,46,66],[6,26,48,70],[6,26,50,74],[6,30,54,78],[6,30,56,82],[6,30,58,86],[6,34,62,90],[6,28,50,72,94],[6,26,50,74,98],[6,30,54,78,102],[6,28,54,80,106],[6,32,58,84,110],[6,30,58,86,114],[6,34,62,90,118],[6,26,50,74,98,122],[6,30,54,78,102,126],[6,26,52,78,104,130],[6,30,56,82,108,134],[6,34,60,86,112,138],[6,30,58,86,114,142],[6,34,62,90,118,146],[6,30,54,78,102,126,150],[6,24,50,76,102,128,154],[6,28,54,80,106,132,158],[6,32,58,84,110,136,162],[6,26,54,82,110,138,166],[6,30,58,86,114,142,170]],G15:(1<<10)|(1<<8)|(1<<5)|(1<<4)|(1<<2)|(1<<1)|(1<<0),G18:(1<<12)|(1<<11)|(1<<10)|(1<<9)|(1<<8)|(1<<5)|(1<<2)|(1<<0),G15_MASK:(1<<14)|(1<<12)|(1<<10)|(1<<4)|(1<<1),getBCHTypeInfo:function(data){var d=data<<10;while(QRUtil.getBCHDigit(d)-QRUtil.getBCHDigit(QRUtil.G15)>=0){d^=(QRUtil.G15<<(QRUtil.getBCHDigit(d)-QRUtil.getBCHDigit(QRUtil.G15)));}
return((data<<10)|d)^QRUtil.G15_MASK;},getBCHTypeNumber:function(data){var d=data<<12;while(QRUtil.getBCHDigit(d)-QRUtil.getBCHDigit(QRUtil.G18)>=0){d^=(QRUtil.G18<<(QRUtil.getBCHDigit(d)-QRUtil.getBCHDigit(QRUtil.G18)));}
return(data<<12)|d;},getBCHDigit:function(data){var digit=0;while(data!=0){digit++;data>>>=1;}
return digit;},getPatternPosition:function(typeNumber){return QRUtil.PATTERN_POSITION_TABLE[typeNumber-1];},getMask:function(maskPattern,i,j){switch(maskPattern){case QRMaskPattern.PATTERN000:return(i+j)%2==0;case QRMaskPattern.PATTERN001:return i%2==0;case QRMaskPattern.PATTERN010:return j%3==0;case QRMaskPattern.PATTERN011:return(i+j)%3==0;case QRMaskPattern.PATTERN100:return(Math.floor(i/2)+Math.floor(j/3))%2==0;case QRMaskPattern.PATTERN101:return(i*j)%2+(i*j)%3==0;case QRMaskPattern.PATTERN110:return((i*j)%2+(i*j)%3)%2==0;case QRMaskPattern.PATTERN111:return((i*j)%3+(i+j)%2)%2==0;default:throw new Error("bad maskPattern:"+maskPattern);}},getErrorCorrectPolynomial:function(errorCorrectLength){var a=new QRPolynomial([1],0);for(var i=0;i<errorCorrectLength;i++){a=a.multiply(new QRPolynomial([1,QRMath.gexp(i)],0));}
return a;},getLengthInBits:function(mode,type){if(1<=type&&type<10){switch(mode){case QRMode.MODE_NUMBER:return 10;case QRMode.MODE_ALPHA_NUM:return 9;case QRMode.MODE_8BIT_BYTE:return 8;case QRMode.MODE_KANJI:return 8;default:throw new Error("mode:"+mode);}}else if(type<27){switch(mode){case QRMode.MODE_NUMBER:return 12;case QRMode.MODE_ALPHA_NUM:return 11;case QRMode.MODE_8BIT_BYTE:return 16;case QRMode.MODE_KANJI:return 10;default:throw new Error("mode:"+mode);}}else if(type<41){switch(mode){case QRMode.MODE_NUMBER:return 14;case QRMode.MODE_ALPHA_NUM:return 13;case QRMode.MODE_8BIT_BYTE:return 16;case QRMode.MODE_KANJI:return 12;default:throw new Error("mode:"+mode);}}else{throw new Error("type:"+type);}},getLostPoint:function(qrCode){var moduleCount=qrCode.getModuleCount();var lostPoint=0;for(var row=0;row<moduleCount;row++){for(var col=0;col<moduleCount;col++){var sameCount=0;var dark=qrCode.isDark(row,col);for(var r=-1;r<=1;r++){if(row+r<0||moduleCount<=row+r){continue;}
for(var c=-1;c<=1;c++){if(col+c<0||moduleCount<=col+c){continue;}
if(r==0&&c==0){continue;}
if(dark==qrCode.isDark(row+r,col+c)){sameCount++;}}}
if(sameCount>5){lostPoint+=(3+sameCount-5);}}}
for(var row=0;row<moduleCount-1;row++){for(var col=0;col<moduleCount-1;col++){var count=0;if(qrCode.isDark(row,col))count++;if(qrCode.isDark(row+1,col))count++;if(qrCode.isDark(row,col+1))count++;if(qrCode.isDark(row+1,col+1))count++;if(count==0||count==4){lostPoint+=3;}}}
for(var row=0;row<moduleCount;row++){for(var col=0;col<moduleCount-6;col++){if(qrCode.isDark(row,col)&&!qrCode.isDark(row,col+1)&&qrCode.isDark(row,col+2)&&qrCode.isDark(row,col+3)&&qrCode.isDark(row,col+4)&&!qrCode.isDark(row,col+5)&&qrCode.isDark(row,col+6)){lostPoint+=40;}}}
for(var col=0;col<moduleCount;col++){for(var row=0;row<moduleCount-6;row++){if(qrCode.isDark(row,col)&&!qrCode.isDark(row+1,col)&&qrCode.isDark(row+2,col)&&qrCode.isDark(row+3,col)&&qrCode.isDark(row+4,col)&&!qrCode.isDark(row+5,col)&&qrCode.isDark(row+6,col)){lostPoint+=40;}}}
var darkCount=0;for(var col=0;col<moduleCount;col++){for(var row=0;row<moduleCount;row++){if(qrCode.isDark(row,col)){darkCount++;}}}
var ratio=Math.abs(100*darkCount/moduleCount/moduleCount-50)/5;lostPoint+=ratio*10;return lostPoint;}};var QRMath={glog:function(n){if(n<1){throw new Error("glog("+n+")");}
return QRMath.LOG_TABLE[n];},gexp:function(n){while(n<0){n+=255;}
while(n>=256){n-=255;}
return QRMath.EXP_TABLE[n];},EXP_TABLE:new Array(256),LOG_TABLE:new Array(256)};for(var i=0;i<8;i++){QRMath.EXP_TABLE[i]=1<<i;}
for(var i=8;i<256;i++){QRMath.EXP_TABLE[i]=QRMath.EXP_TABLE[i-4]^QRMath.EXP_TABLE[i-5]^QRMath.EXP_TABLE[i-6]^QRMath.EXP_TABLE[i-8];}
for(var i=0;i<255;i++){QRMath.LOG_TABLE[QRMath.EXP_TABLE[i]]=i;}
function QRPolynomial(num,shift){if(num.length==undefined){throw new Error(num.length+"/"+shift);}
var offset=0;while(offset<num.length&&num[offset]==0){offset++;}
this.num=new Array(num.length-offset+shift);for(var i=0;i<num.length-offset;i++){this.num[i]=num[i+offset];}}
QRPolynomial.prototype={get:function(index){return this.num[index];},getLength:function(){return this.num.length;},multiply:function(e){var num=new Array(this.getLength()+e.getLength()-1);for(var i=0;i<this.getLength();i++){for(var j=0;j<e.getLength();j++){num[i+j]^=QRMath.gexp(QRMath.glog(this.get(i))+QRMath.glog(e.get(j)));}}
return new QRPolynomial(num,0);},mod:function(e){if(this.getLength()-e.getLength()<0){return this;}
var ratio=QRMath.glog(this.get(0))-QRMath.glog(e.get(0));var num=new Array(this.getLength());for(var i=0;i<this.getLength();i++){num[i]=this.get(i);}
for(var i=0;i<e.getLength();i++){num[i]^=QRMath.gexp(QRMath.glog(e.get(i))+ratio);}
return new QRPolynomial(num,0).mod(e);}};function QRRSBlock(totalCount,dataCount){this.totalCount=totalCount;this.dataCount=dataCount;}
QRRSBlock.RS_BLOCK_TABLE=[[1,26,19],[1,26,16],[1,26,13],[1,26,9],[1,44,34],[1,44,28],[1,44,22],[1,44,16],[1,70,55],[1,70,44],[2,35,17],[2,35,13],[1,100,80],[2,50,32],[2,50,24],[4,25,9],[1,134,108],[2,67,43],[2,33,15,2,34,16],[2,33,11,2,34,12],[2,86,68],[4,43,27],[4,43,19],[4,43,15],[2,98,78],[4,49,31],[2,32,14,4,33,15],[4,39,13,1,40,14],[2,121,97],[2,60,38,2,61,39],[4,40,18,2,41,19],[4,40,14,2,41,15],[2,146,116],[3,58,36,2,59,37],[4,36,16,4,37,17],[4,36,12,4,37,13],[2,86,68,2,87,69],[4,69,43,1,70,44],[6,43,19,2,44,20],[6,43,15,2,44,16],[4,101,81],[1,80,50,4,81,51],[4,50,22,4,51,23],[3,36,12,8,37,13],[2,116,92,2,117,93],[6,58,36,2,59,37],[4,46,20,6,47,21],[7,42,14,4,43,15],[4,133,107],[8,59,37,1,60,38],[8,44,20,4,45,21],[12,33,11,4,34,12],[3,145,115,1,146,116],[4,64,40,5,65,41],[11,36,16,5,37,17],[11,36,12,5,37,13],[5,109,87,1,110,88],[5,65,41,5,66,42],[5,54,24,7,55,25],[11,36,12],[5,122,98,1,123,99],[7,73,45,3,74,46],[15,43,19,2,44,20],[3,45,15,13,46,16],[1,135,107,5,136,108],[10,74,46,1,75,47],[1,50,22,15,51,23],[2,42,14,17,43,15],[5,150,120,1,151,121],[9,69,43,4,70,44],[17,50,22,1,51,23],[2,42,14,19,43,15],[3,141,113,4,142,114],[3,70,44,11,71,45],[17,47,21,4,48,22],[9,39,13,16,40,14],[3,135,107,5,136,108],[3,67,41,13,68,42],[15,54,24,5,55,25],[15,43,15,10,44,16],[4,144,116,4,145,117],[17,68,42],[17,50,22,6,51,23],[19,46,16,6,47,17],[2,139,111,7,140,112],[17,74,46],[7,54,24,16,55,25],[34,37,13],[4,151,121,5,152,122],[4,75,47,14,76,48],[11,54,24,14,55,25],[16,45,15,14,46,16],[6,147,117,4,148,118],[6,73,45,14,74,46],[11,54,24,16,55,25],[30,46,16,2,47,17],[8,132,106,4,133,107],[8,75,47,13,76,48],[7,54,24,22,55,25],[22,45,15,13,46,16],[10,142,114,2,143,115],[19,74,46,4,75,47],[28,50,22,6,51,23],[33,46,16,4,47,17],[8,152,122,4,153,123],[22,73,45,3,74,46],[8,53,23,26,54,24],[12,45,15,28,46,16],[3,147,117,10,148,118],[3,73,45,23,74,46],[4,54,24,31,55,25],[11,45,15,31,46,16],[7,146,116,7,147,117],[21,73,45,7,74,46],[1,53,23,37,54,24],[19,45,15,26,46,16],[5,145,115,10,146,116],[19,75,47,10,76,48],[15,54,24,25,55,25],[23,45,15,25,46,16],[13,145,115,3,146,116],[2,74,46,29,75,47],[42,54,24,1,55,25],[23,45,15,28,46,16],[17,145,115],[10,74,46,23,75,47],[10,54,24,35,55,25],[19,45,15,35,46,16],[17,145,115,1,146,116],[14,74,46,21,75,47],[29,54,24,19,55,25],[11,45,15,46,46,16],[13,145,115,6,146,116],[14,74,46,23,75,47],[44,54,24,7,55,25],[59,46,16,1,47,17],[12,151,121,7,152,122],[12,75,47,26,76,48],[39,54,24,14,55,25],[22,45,15,41,46,16],[6,151,121,14,152,122],[6,75,47,34,76,48],[46,54,24,10,55,25],[2,45,15,64,46,16],[17,152,122,4,153,123],[29,74,46,14,75,47],[49,54,24,10,55,25],[24,45,15,46,46,16],[4,152,122,18,153,123],[13,74,46,32,75,47],[48,54,24,14,55,25],[42,45,15,32,46,16],[20,147,117,4,148,118],[40,75,47,7,76,48],[43,54,24,22,55,25],[10,45,15,67,46,16],[19,148,118,6,149,119],[18,75,47,31,76,48],[34,54,24,34,55,25],[20,45,15,61,46,16]];QRRSBlock.getRSBlocks=function(typeNumber,errorCorrectLevel){var rsBlock=QRRSBlock.getRsBlockTable(typeNumber,errorCorrectLevel);if(rsBlock==undefined){throw new Error("bad rs block @ typeNumber:"+typeNumber+"/errorCorrectLevel:"+errorCorrectLevel);}
var length=rsBlock.length/3;var list=[];for(var i=0;i<length;i++){var count=rsBlock[i*3+0];var totalCount=rsBlock[i*3+1];var dataCount=rsBlock[i*3+2];for(var j=0;j<count;j++){list.push(new QRRSBlock(totalCount,dataCount));}}
return list;};QRRSBlock.getRsBlockTable=function(typeNumber,errorCorrectLevel){switch(errorCorrectLevel){case QRErrorCorrectLevel.L:return QRRSBlock.RS_BLOCK_TABLE[(typeNumber-1)*4+0];case QRErrorCorrectLevel.M:return QRRSBlock.RS_BLOCK_TABLE[(typeNumber-1)*4+1];case QRErrorCorrectLevel.Q:return QRRSBlock.RS_BLOCK_TABLE[(typeNumber-1)*4+2];case QRErrorCorrectLevel.H:return QRRSBlock.RS_BLOCK_TABLE[(typeNumber-1)*4+3];default:return undefined;}};function QRBitBuffer(){this.buffer=[];this.length=0;}
QRBitBuffer.prototype={get:function(index){var bufIndex=Math.floor(index/8);return((this.buffer[bufIndex]>>>(7-index%8))&1)==1;},put:function(num,length){for(var i=0;i<length;i++){this.putBit(((num>>>(length-i-1))&1)==1);}},getLengthInBits:function(){return this.length;},putBit:function(bit){var bufIndex=Math.floor(this.length/8);if(this.buffer.length<=bufIndex){this.buffer.push(0);}
if(bit){this.buffer[bufIndex]|=(0x80>>>(this.length%8));}
this.length++;}};var QRCodeLimitLength=[[17,14,11,7],[32,26,20,14],[53,42,32,24],[78,62,46,34],[106,84,60,44],[134,106,74,58],[154,122,86,64],[192,152,108,84],[230,180,130,98],[271,213,151,119],[321,251,177,137],[367,287,203,155],[425,331,241,177],[458,362,258,194],[520,412,292,220],[586,450,322,250],[644,504,364,280],[718,560,394,310],[792,624,442,338],[858,666,482,382],[929,711,509,403],[1003,779,565,439],[1091,857,611,461],[1171,911,661,511],[1273,997,715,535],[1367,1059,751,593],[1465,1125,805,625],[1528,1190,868,658],[1628,1264,908,698],[1732,1370,982,742],[1840,1452,1030,790],[1952,1538,1112,842],[2068,1628,1168,898],[2188,1722,1228,958],[2303,1809,1283,983],[2431,1911,1351,1051],[2563,1989,1423,1093],[2699,2099,1499,1139],[2809,2213,1579,1219],[2953,2331,1663,1273]];
function _isSupportCanvas() {
return typeof CanvasRenderingContext2D != "undefined";
}
// android 2.x doesn't support Data-URI spec
function _getAndroid() {
var android = false;
var sAgent = navigator.userAgent;
if (/android/i.test(sAgent)) { // android
android = true;
var aMat = sAgent.toString().match(/android ([0-9]\.[0-9])/i);
if (aMat && aMat[1]) {
android = parseFloat(aMat[1]);
}
}
return android;
}
var svgDrawer = (function() {
var Drawing = function (el, htOption) {
this._el = el;
this._htOption = htOption;
};
Drawing.prototype.draw = function (oQRCode) {
var _htOption = this._htOption;
var _el = this._el;
var nCount = oQRCode.getModuleCount();
var nWidth = Math.floor(_htOption.width / nCount);
var nHeight = Math.floor(_htOption.height / nCount);
this.clear();
function makeSVG(tag, attrs) {
var el = document.createElementNS('http://www.w3.org/2000/svg', tag);
for (var k in attrs)
if (attrs.hasOwnProperty(k)) el.setAttribute(k, attrs[k]);
return el;
}
var svg = makeSVG("svg" , {'viewBox': '0 0 ' + String(nCount) + " " + String(nCount), 'width': '100%', 'height': '100%', 'fill': _htOption.colorLight});
svg.setAttributeNS("http://www.w3.org/2000/xmlns/", "xmlns:xlink", "http://www.w3.org/1999/xlink");
_el.appendChild(svg);
svg.appendChild(makeSVG("rect", {"fill": _htOption.colorLight, "width": "100%", "height": "100%"}));
svg.appendChild(makeSVG("rect", {"fill": _htOption.colorDark, "width": "1", "height": "1", "id": "template"}));
for (var row = 0; row < nCount; row++) {
for (var col = 0; col < nCount; col++) {
if (oQRCode.isDark(row, col)) {
var child = makeSVG("use", {"x": String(col), "y": String(row)});
child.setAttributeNS("http://www.w3.org/1999/xlink", "href", "#template")
svg.appendChild(child);
}
}
}
};
Drawing.prototype.clear = function () {
while (this._el.hasChildNodes())
this._el.removeChild(this._el.lastChild);
};
return Drawing;
})();
var useSVG = document.documentElement.tagName.toLowerCase() === "svg";
// Drawing in DOM by using Table tag
var Drawing = useSVG ? svgDrawer : !_isSupportCanvas() ? (function () {
var Drawing = function (el, htOption) {
this._el = el;
this._htOption = htOption;
};
/**
* Draw the QRCode
*
* @param {QRCode} oQRCode
*/
Drawing.prototype.draw = function (oQRCode) {
var _htOption = this._htOption;
var _el = this._el;
var nCount = oQRCode.getModuleCount();
var nWidth = Math.floor(_htOption.width / nCount);
var nHeight = Math.floor(_htOption.height / nCount);
var aHTML = ['<table style="border:0;border-collapse:collapse;">'];
for (var row = 0; row < nCount; row++) {
aHTML.push('<tr>');
for (var col = 0; col < nCount; col++) {
aHTML.push('<td style="border:0;border-collapse:collapse;padding:0;margin:0;width:' + nWidth + 'px;height:' + nHeight + 'px;background-color:' + (oQRCode.isDark(row, col) ? _htOption.colorDark : _htOption.colorLight) + ';"></td>');
}
aHTML.push('</tr>');
}
aHTML.push('</table>');
_el.innerHTML = aHTML.join('');
// Fix the margin values as real size.
var elTable = _el.childNodes[0];
var nLeftMarginTable = (_htOption.width - elTable.offsetWidth) / 2;
var nTopMarginTable = (_htOption.height - elTable.offsetHeight) / 2;
if (nLeftMarginTable > 0 && nTopMarginTable > 0) {
elTable.style.margin = nTopMarginTable + "px " + nLeftMarginTable + "px";
}
};
/**
* Clear the QRCode
*/
Drawing.prototype.clear = function () {
this._el.innerHTML = '';
};
return Drawing;
})() : (function () { // Drawing in Canvas
function _onMakeImage() {
this._elImage.src = this._elCanvas.toDataURL("image/png");
this._elImage.style.display = "block";
this._elCanvas.style.display = "none";
}
// Android 2.1 bug workaround
// http://code.google.com/p/android/issues/detail?id=5141
if (this._android && this._android <= 2.1) {
var factor = 1 / window.devicePixelRatio;
var drawImage = CanvasRenderingContext2D.prototype.drawImage;
CanvasRenderingContext2D.prototype.drawImage = function (image, sx, sy, sw, sh, dx, dy, dw, dh) {
if (("nodeName" in image) && /img/i.test(image.nodeName)) {
for (var i = arguments.length - 1; i >= 1; i--) {
arguments[i] = arguments[i] * factor;
}
} else if (typeof dw == "undefined") {
arguments[1] *= factor;
arguments[2] *= factor;
arguments[3] *= factor;
arguments[4] *= factor;
}
drawImage.apply(this, arguments);
};
}
/**
* Check whether the user's browser supports Data URI or not
*
* @private
* @param {Function} fSuccess Occurs if it supports Data URI
* @param {Function} fFail Occurs if it doesn't support Data URI
*/
function _safeSetDataURI(fSuccess, fFail) {
var self = this;
self._fFail = fFail;
self._fSuccess = fSuccess;
// Check it just once
if (self._bSupportDataURI === null) {
var el = document.createElement("img");
var fOnError = function() {
self._bSupportDataURI = false;
if (self._fFail) {
self._fFail.call(self);
}
};
var fOnSuccess = function() {
self._bSupportDataURI = true;
if (self._fSuccess) {
self._fSuccess.call(self);
}
};
el.onabort = fOnError;
el.onerror = fOnError;
el.onload = fOnSuccess;
el.src = "data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="; // the Image contains 1px data.
return;
} else if (self._bSupportDataURI === true && self._fSuccess) {
self._fSuccess.call(self);
} else if (self._bSupportDataURI === false && self._fFail) {
self._fFail.call(self);
}
};
/**
* Drawing QRCode by using canvas
*
* @constructor
* @param {HTMLElement} el
* @param {Object} htOption QRCode Options
*/
var Drawing = function (el, htOption) {
this._bIsPainted = false;
this._android = _getAndroid();
this._htOption = htOption;
this._elCanvas = document.createElement("canvas");
this._elCanvas.width = htOption.width;
this._elCanvas.height = htOption.height;
el.appendChild(this._elCanvas);
this._el = el;
this._oContext = this._elCanvas.getContext("2d");
this._bIsPainted = false;
this._elImage = document.createElement("img");
this._elImage.alt = "Scan me!";
this._elImage.style.display = "none";
this._el.appendChild(this._elImage);
this._bSupportDataURI = null;
};
/**
* Draw the QRCode
*
* @param {QRCode} oQRCode
*/
Drawing.prototype.draw = function (oQRCode) {
var _elImage = this._elImage;
var _oContext = this._oContext;
var _htOption = this._htOption;
var nCount = oQRCode.getModuleCount();
var nWidth = _htOption.width / nCount;
var nHeight = _htOption.height / nCount;
var nRoundedWidth = Math.round(nWidth);
var nRoundedHeight = Math.round(nHeight);
_elImage.style.display = "none";
this.clear();
for (var row = 0; row < nCount; row++) {
for (var col = 0; col < nCount; col++) {
var bIsDark = oQRCode.isDark(row, col);
var nLeft = col * nWidth;
var nTop = row * nHeight;
_oContext.strokeStyle = bIsDark ? _htOption.colorDark : _htOption.colorLight;
_oContext.lineWidth = 1;
_oContext.fillStyle = bIsDark ? _htOption.colorDark : _htOption.colorLight;
_oContext.fillRect(nLeft, nTop, nWidth, nHeight);
// 안티 앨리어싱 방지 처리
_oContext.strokeRect(
Math.floor(nLeft) + 0.5,
Math.floor(nTop) + 0.5,
nRoundedWidth,
nRoundedHeight
);
_oContext.strokeRect(
Math.ceil(nLeft) - 0.5,
Math.ceil(nTop) - 0.5,
nRoundedWidth,
nRoundedHeight
);
}
}
this._bIsPainted = true;
};
/**
* Make the image from Canvas if the browser supports Data URI.
*/
Drawing.prototype.makeImage = function () {
if (this._bIsPainted) {
_safeSetDataURI.call(this, _onMakeImage);
}
};
/**
* Return whether the QRCode is painted or not
*
* @return {Boolean}
*/
Drawing.prototype.isPainted = function () {
return this._bIsPainted;
};
/**
* Clear the QRCode
*/
Drawing.prototype.clear = function () {
this._oContext.clearRect(0, 0, this._elCanvas.width, this._elCanvas.height);
this._bIsPainted = false;
};
/**
* @private
* @param {Number} nNumber
*/
Drawing.prototype.round = function (nNumber) {
if (!nNumber) {
return nNumber;
}
return Math.floor(nNumber * 1000) / 1000;
};
return Drawing;
})();
/**
* Get the type by string length
*
* @private
* @param {String} sText
* @param {Number} nCorrectLevel
* @return {Number} type
*/
function _getTypeNumber(sText, nCorrectLevel) {
var nType = 1;
var length = _getUTF8Length(sText);
for (var i = 0, len = QRCodeLimitLength.length; i <= len; i++) {
var nLimit = 0;
switch (nCorrectLevel) {
case QRErrorCorrectLevel.L :
nLimit = QRCodeLimitLength[i][0];
break;
case QRErrorCorrectLevel.M :
nLimit = QRCodeLimitLength[i][1];
break;
case QRErrorCorrectLevel.Q :
nLimit = QRCodeLimitLength[i][2];
break;
case QRErrorCorrectLevel.H :
nLimit = QRCodeLimitLength[i][3];
break;
}
if (length <= nLimit) {
break;
} else {
nType++;
}
}
if (nType > QRCodeLimitLength.length) {
throw new Error("Too long data");
}
return nType;
}
function _getUTF8Length(sText) {
var replacedText = encodeURI(sText).toString().replace(/\%[0-9a-fA-F]{2}/g, 'a');
return replacedText.length + (replacedText.length != sText ? 3 : 0);
}
/**
* @class QRCode
* @constructor
* @example
* new QRCode(document.getElementById("test"), "http://jindo.dev.naver.com/collie");
*
* @example
* var oQRCode = new QRCode("test", {
* text : "http://naver.com",
* width : 128,
* height : 128
* });
*
* oQRCode.clear(); // Clear the QRCode.
* oQRCode.makeCode("http://map.naver.com"); // Re-create the QRCode.
*
* @param {HTMLElement|String} el target element or 'id' attribute of element.
* @param {Object|String} vOption
* @param {String} vOption.text QRCode link data
* @param {Number} [vOption.width=256]
* @param {Number} [vOption.height=256]
* @param {String} [vOption.colorDark="#000000"]
* @param {String} [vOption.colorLight="#ffffff"]
* @param {QRCode.CorrectLevel} [vOption.correctLevel=QRCode.CorrectLevel.H] [L|M|Q|H]
*/
QRCode = function (el, vOption) {
this._htOption = {
width : 256,
height : 256,
typeNumber : 4,
colorDark : "#000000",
colorLight : "#ffffff",
correctLevel : QRErrorCorrectLevel.H
};
if (typeof vOption === 'string') {
vOption = {
text : vOption
};
}
// Overwrites options
if (vOption) {
for (var i in vOption) {
this._htOption[i] = vOption[i];
}
}
if (typeof el == "string") {
el = document.getElementById(el);
}
if (this._htOption.useSVG) {
Drawing = svgDrawer;
}
this._android = _getAndroid();
this._el = el;
this._oQRCode = null;
this._oDrawing = new Drawing(this._el, this._htOption);
if (this._htOption.text) {
this.makeCode(this._htOption.text);
}
};
/**
* Make the QRCode
*
* @param {String} sText link data
*/
QRCode.prototype.makeCode = function (sText) {
this._oQRCode = new QRCodeModel(_getTypeNumber(sText, this._htOption.correctLevel), this._htOption.correctLevel);
this._oQRCode.addData(sText);
this._oQRCode.make();
this._el.title = sText;
this._oDrawing.draw(this._oQRCode);
this.makeImage();
};
/**
* Make the Image from Canvas element
* - It occurs automatically
* - Android below 3 doesn't support Data-URI spec.
*
* @private
*/
QRCode.prototype.makeImage = function () {
if (typeof this._oDrawing.makeImage == "function" && (!this._android || this._android >= 3)) {
this._oDrawing.makeImage();
}
};
/**
* Clear the QRCode
*/
QRCode.prototype.clear = function () {
this._oDrawing.clear();
};
/**
* @name QRCode.CorrectLevel
*/
QRCode.CorrectLevel = QRErrorCorrectLevel;
})();

35
assets/js/script.js Normal file
View File

@@ -0,0 +1,35 @@
$(document).ready(function() {
"use strict";
// Scroll to top
$("a[href='#top']").click(function() {
$("html, body").animate({ scrollTop: 0 }, "slow");
return false;
});
// Smooth scroll
$('a.scroll-to').on('click', function (event) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: ($($anchor.attr('href')).offset().top - 50)
}, 700);
event.preventDefault();
});
$('.site-testimonial-item').on('mouseenter', function(){
$('.site-testimonial-item').addClass('inactive');
$(this).removeClass('inactive').addClass('active');
});
$('.site-testimonial-item').on('mouseleave', function(){
$('.site-testimonial-item').removeClass('inactive');
$('.site-testimonial-item').removeClass('active');
});
});
$(window).on('scroll', function () {
var windscroll = $(window).scrollTop();
if (windscroll >= 100) {
$('.site-navigation').addClass('nav-bg');
} else {
$('.site-navigation').removeClass('nav-bg');
}
});

50
assets/js/vendor.js Normal file

File diff suppressed because one or more lines are too long

View File

@@ -1,179 +0,0 @@
/*!***************************************************
* Google Map
*****************************************************/
window.marker = null;
function initialize() {
var map,
mapId = document.getElementById("map");
var latitude = mapId.getAttribute("data-latitude");
var longitude = mapId.getAttribute("data-longitude");
var mapMarker = mapId.getAttribute("data-marker");
var mapMarkerName = mapId.getAttribute("data-marker-name");
var nottingham = new google.maps.LatLng(latitude, longitude);
var style = [
{
featureType: "administrative",
elementType: "all",
stylers: [
{
saturation: "-100",
},
],
},
{
featureType: "administrative.province",
elementType: "all",
stylers: [
{
visibility: "off",
},
],
},
{
featureType: "landscape",
elementType: "all",
stylers: [
{
saturation: -100,
},
{
lightness: 65,
},
{
visibility: "on",
},
],
},
{
featureType: "poi",
elementType: "all",
stylers: [
{
saturation: -100,
},
{
lightness: "50",
},
{
visibility: "simplified",
},
],
},
{
featureType: "road",
elementType: "all",
stylers: [
{
saturation: "-100",
},
],
},
{
featureType: "road.highway",
elementType: "all",
stylers: [
{
visibility: "simplified",
},
],
},
{
featureType: "road.arterial",
elementType: "all",
stylers: [
{
lightness: "30",
},
],
},
{
featureType: "road.local",
elementType: "all",
stylers: [
{
lightness: "40",
},
],
},
{
featureType: "transit",
elementType: "all",
stylers: [
{
saturation: -100,
},
{
visibility: "simplified",
},
],
},
{
featureType: "water",
elementType: "geometry",
stylers: [
{
hue: "#ffff00",
},
{
lightness: -25,
},
{
saturation: -97,
},
],
},
{
featureType: "water",
elementType: "labels",
stylers: [
{
lightness: -25,
},
{
saturation: -100,
},
],
},
];
var mapOptions = {
center: nottingham,
mapTypeId: google.maps.MapTypeId.ROADMAP,
backgroundColor: "#000",
zoom: 15,
panControl: !1,
zoomControl: !0,
mapTypeControl: !1,
scaleControl: !1,
streetViewControl: !1,
overviewMapControl: !1,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE,
},
};
map = new google.maps.Map(document.getElementById("map"), mapOptions);
var mapType = new google.maps.StyledMapType(style, {
name: "Grayscale",
});
map.mapTypes.set("grey", mapType);
map.setMapTypeId("grey");
var marker_image = mapMarker;
var pinIcon = new google.maps.MarkerImage(
marker_image,
null,
null,
null,
new google.maps.Size(30, 50),
);
marker = new google.maps.Marker({
position: nottingham,
map: map,
icon: pinIcon,
title: mapMarkerName,
});
}
var map = document.getElementById("map");
if (map != null) {
google.maps.event.addDomListener(window, "load", initialize);
}

77
assets/scss/_buttons.scss Executable file
View File

@@ -0,0 +1,77 @@
.btn{
font-family: $secondary-font;
border: none;
color: $white !important;
padding: 20px 45px;
border-radius: 0;
&:focus{
box-shadow: none;
}
@include desktop{
padding: 17px 40px;
}
.btn-area{
display: block;
overflow: hidden;
span{
position: relative;
display: inline-block;
padding: 2px 0;
transition: transform .9s cubic-bezier(.19,1,.22,1);
transform-origin: left center;
&::after{
content: attr(data-text);
position: absolute;
top: 150%;
left: 0;
transform: skewY(30deg);
transform-origin: left center;
transition: transform .9s cubic-bezier(.19,1,.22,1);
}
}
}
&:hover{
.btn-area{
span{
transform: translateY(-150%) skewY(7deg);
&::after{
transform: skewY(-7deg);
}
}
}
}
&:visited{
.btn-area{
span{
transform: translateY(-150%) skewY(7deg);
&::after{
transform: skewY(-7deg);
}
}
}
}
}
.btn-sm{
padding: 15px 40px !important;
}
.btn-sm-rounded{
border-radius: 40px;
}
.btn-primary{
background: $primary-color;
color: $white;
&:hover{
background: darken($color: $primary-color, $amount: 10);
}
}
.btn-secondary{
background: $secondary-color;
color: $white;
&:hover{
background: darken($color: $secondary-color, $amount: 10);
}
}

70
assets/scss/_common.scss Executable file
View File

@@ -0,0 +1,70 @@
// html{
// scroll-behavior: smooth;
// }
body {
background: $body-color;
}
.section-title{
margin-bottom: 70px;
@include desktop{
text-align: center;
}
h2{
font-weight: 300;
letter-spacing: 2px;
text-transform: uppercase;
margin-bottom: 15px;
@include desktop{
font-size: 40px;
}
}
p{
font-size: 20px;
font-weight: 300;
}
}
.form-control{
background: transparent;
border-radius: 0;
margin-bottom: 30px;
padding: 0 0 10px 0;
border-width: 0 0 1px 0;
border-color: $primary-color;
font-weight: 300;
letter-spacing: 1px;
-webkit-appearance: none;
height: 42px;
&:focus{
box-shadow: none;
background: transparent;
border-color: $text-color;
}
}
select.form-control{
height: 42px !important;
position: relative;
}
.select-wrapper{
position: relative;
&::before{
content: '';
position: absolute;
width: 16px;
height: 10px;
background: url('../images/angle-down-select.svg');
background-size: contain;
background-repeat: no-repeat;
right: 15px;
top: 50%;
transform: translateY(-80%);
}
}
textarea.form-control{
height: auto;
}

42
assets/scss/_mixins.scss Executable file
View File

@@ -0,0 +1,42 @@
@mixin mobile-xs{
@media(max-width:400px){
@content;
}
}
@mixin mobile{
@media(max-width:575px){
@content;
}
}
@mixin tablet{
@media(max-width:767px){
@content;
}
}
@mixin desktop{
@media(max-width:991px){
@content;
}
}
@mixin desktop-lg{
@media(max-width:1200px){
@content;
}
}
@mixin desktop-xl{
@media(max-width:1400px){
@content;
}
}
@mixin desktop-4k{
@media(min-width:2000px){
@content;
}
}
@mixin size($size){
width: $size; height: $size;
}

43
assets/scss/_typography.scss Executable file
View File

@@ -0,0 +1,43 @@
@import url('https://fonts.googleapis.com/css?family=Josefin+Sans:300,400,600,700|Montserrat:300,400,500,600,700&display=swap');
body{
font-family: $primary-font;
font-size: 16px;
color: $text-color;
}
h1, h2, h3, h4, h5, h6{
font-family: $secondary-font;
font-weight: 600;
color: $text-color-dark;
}
p{
font-size: 16px;
color: $text-color;
}
h1{
font-size: 60px;
}
h2{
font-size: 50px;
}
h3{
font-size: 30px;
}
h4{
font-size: 25px;
}
h5{
font-size: 18px;
}
h6{
font-size: 15px;
font-weight: 300;
}

17
assets/scss/_variables.scss Executable file
View File

@@ -0,0 +1,17 @@
//site color variables
$body-color: #fff;
$primary-color: #EAA4A4;
$secondary-color: #ADD6D2;
$text-color: #9D9EA5;
$text-color-dark: #00113E;
$site-ease: cubic-bezier(0.36, 0.03, 0, 0.91);
$gray: #F7F9FF;
$dark-gray: #646569;
// solid colors
$white: #fff;
$black: #000;
// Font Variables
$primary-font: 'Josefin Sans', sans-serif;
$secondary-font: 'Montserrat', sans-serif;

View File

@@ -0,0 +1,45 @@
.site-about{
&-header{
padding-top: 80px;
background-color: $gray;
@include mobile{
padding-top: 60px;
text-align: center;
}
}
&-wrapper{
display: flex;
align-items: center;
flex-wrap: wrap;
}
&-company{
background: $primary-color;
width: 40%;
padding: 70px 38px;
@include desktop{
width: 100%;
margin-bottom: 20px;
}
h1{
color: $white;
font-weight: 400;
font-size: 25px;
line-height: 60px;
text-transform: uppercase;
letter-spacing: 1px;
}
}
&-description{
width: 60%;
padding-left: 50px;
@include desktop{
width: 100%;
padding: 0 38px;
}
p{
font-size: 25px;
font-weight: 300;
margin-bottom: 0;
}
}
}

View File

@@ -0,0 +1,89 @@
.site{
&-blog{
@extend .site-project;
@include mobile{
padding: 70px 0;
}
&.details{
padding: 150px 0 80px;
@include tablet{
padding: 100px 0 60px;
}
}
&-header{
padding: 150px 0 0;
@include mobile{
padding: 100px 0 0;
}
h1{
font-weight: 700;
text-transform: uppercase;
letter-spacing: 10px;
margin-bottom: 20px;
@include mobile{
font-size: 35px;
}
}
p{
line-height: 28px;
margin-bottom: 0;
}
}
&-pagination{
@extend .site-project-pagination;
}
&-post{
@extend .site-project-item;
&-thumb{
@extend .site-project-item-thumb;
}
&-content{
@extend .site-project-item-content;
@include mobile{
padding: 15px 25px 40px;
}
span{
font-size: 14px;
}
h3{
margin-bottom: 15px;
@include mobile{
font-size: 20px;
}
}
a.read-more{
color: $primary-color;
letter-spacing: 2px;
@include mobile{
transform: translateY(22px);
}
}
}
}
&-details{
img{
max-width: 100%;
margin-bottom: 20px;
}
.blog-title{
font-size: 40px;
}
.feature-image{
margin: 20px 0 30px;
}
h2,h3,h4,h5,h6{
margin-bottom: 15px;
}
blockquote{
p{
color: $text-color-dark;
font-size: 18px;
}
}
cite{
margin-top: 10px;
display: block;
}
}
}
}

View File

@@ -0,0 +1,24 @@
.site-client{
padding: 100px 0 50px;
.section-title{
margin-bottom: 100px;
}
&-wrapper{
display: flex;
flex-wrap: wrap;
@include desktop{
justify-content: center;
}
}
&-item{
text-align: center;
width: 20%;
margin-bottom: 50px;
@include desktop{
width: 33.33%;
}
@include mobile{
width: 50%;
}
}
}

View File

@@ -0,0 +1,50 @@
.site-contact{
padding: 150px 0 100px;
background: $gray;
@include mobile{
padding: 120px 0 100px;
}
&-title{
font-weight: 700;
@include tablet{
font-size: 40px;
}
span{
color: $primary-color;
}
}
&-form{
margin-top: 20px;
h4{
font-weight: 300;
text-transform: uppercase;
margin-bottom: 50px;
letter-spacing: 3px;
@include tablet{
font-size: 20px;
}
@include desktop{
margin-bottom: 70px;
}
}
}
}
.contact-form-generator {
margin-top: 20px;
a{
color: $text-color-dark;
font-size: 13px;
text-transform: uppercase;
margin-bottom: 50px;
letter-spacing: 3px;
&:hover{
text-decoration: none;
}
@include tablet{
font-size: 20px;
}
@include desktop{
margin-bottom: 70px;
}
}
}

View File

@@ -0,0 +1,27 @@
.site-counter{
padding: 85px 0;
color: $white;
background: $secondary-color;
.section-title{
margin-bottom: 40px;
}
@include mobile{
padding: 50px 0;
}
&-item{
@include desktop{
margin-bottom: 30px;
text-align: center;
}
&-title{
font-size: 20px;
font-weight: 300;
}
&-number{
color: $white;
font-size: 60px;
margin-bottom: 0;
font-weight: 700;
}
}
}

View File

@@ -0,0 +1,49 @@
.site-cta{
padding: 130px 0;
background-size: cover;
background-position: center center;
@include desktop{
padding: 100px 0;
}
&-title{
font-size: 70px;
font-weight: 700;
letter-spacing: 10px;
margin-bottom: 60px;
@include desktop{
letter-spacing: 5px;
}
@include desktop-lg{
font-size: 50px;
margin-bottom: 40px;
}
@include mobile{
font-size: 40px;
letter-spacing: 1;
}
}
&-buttons{
margin: 0;
padding: 0;
li{
display: inline-block;
@include mobile{
display: block;
}
&:not(:last-child){
margin-right: 40px;
@include mobile{
margin-right: 0;
margin-bottom: 20px;
}
}
.btn{
@include mobile{
display: block;
width: 90%;
margin: 0 auto;
}
}
}
}
}

View File

@@ -0,0 +1,21 @@
.site-expertise{
padding: 100px 0;
background: $gray;
&-list{
padding: 0;
margin: 10px 0 0 20px;
@include mobile{
text-align: center;
margin: 0;
}
li{
list-style: none;
font-size: 25px;
font-weight: 300;
color: $text-color-dark;
&:not(:last-child){
margin-bottom: 10px;
}
}
}
}

View File

@@ -0,0 +1,81 @@
.site-footer{
background: $secondary-color;
padding: 100px 0;
&-logo{
margin-bottom: 50px;
@include mobile{
text-align: center;
}
}
&-widget{
@include desktop{
margin-bottom: 40px;
}
@include mobile{
text-align: center;
}
&-title{
color: $white;
margin-bottom: 30px;
@include desktop{
margin-bottom: 20px;
}
}
&-description{
color: $white;
line-height: 30px;
a{
color: $white;
}
}
&-links{
margin: 0;
padding: 0;
li{
list-style: none;
a{
color: $white;
transition: all 0.3s $site-ease;
display: block;
}
&:not(:last-child){
a{
padding-bottom: 9px;
}
}
}
}
&-top{
@include mobile{
text-align: center;
display: block;
}
img{
margin-bottom: 20px;
}
p{
color: $white;
}
&:hover{
text-decoration: none;
}
}
}
&-copyright{
p{
color: $white;
margin: 50px auto 0;
text-align: center;
}
a{
color: $text-color-dark;
transition: all .3s ease;
@include tablet{
font-size: 20px;
}
@include desktop{
margin-bottom: 70px;
}
}
}
}

View File

@@ -0,0 +1,58 @@
.site-hero{
position: relative;
height: 100vh;
background-size: cover;
background-position: center center;
display: flex;
align-items: center;
justify-content: center;
@include desktop{
height: auto;
padding: 200px 0;
}
@include mobile{
padding: 150px 0;
}
&-content{
h1{
margin-bottom: 75px;
@include desktop-lg{
font-size: 50px;
margin-bottom: 50px;
}
@include mobile{
font-size: 40px;
}
}
&-buttons{
margin: 0;
padding: 0;
li{
display: inline-block;
@include mobile{
display: block;
}
&:not(:last-child){
margin-right: 30px;
@include mobile{
margin-right: 0;
margin-bottom: 20px;
}
}
.btn{
font-weight: 600;
@include mobile{
width: 90%;
margin: 0 auto;
display: block;
}
}
}
}
}
&-scroll{
position: absolute;
left: 50%; bottom: 70px;
transform: translateX(-50%);
}
}

View File

@@ -0,0 +1,89 @@
.site-navigation{
padding: 20px 0;
background: $white;
position: fixed;
top: 0;
width: 100%;
z-index: 1000;
transition: all 0.3s cubic-bezier(0.55, 0.085, 0.68, 0.53);
@include desktop{
background: $white;
margin: 10px;
border-radius: 5px;
top: 0;
width: calc(100% - 20px);
box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.09);
}
@include mobile{
padding: 15px;
}
.navbar-brand{
padding: 0;
margin: 0;
img{
max-width: 78px;
}
}
.nav-item{
@include desktop{
text-align: center;
}
.nav-link{
font-family: $secondary-font;
color: $text-color-dark;
transition: all .3s ease;
padding: 15px 18px;
position: relative;
}
&:last-child{
margin-left: 15px;
}
}
.navbar-toggler{
outline: 0;
padding: 0;
.icon-bar {
height: 2px;
width: 25px;
transition: all 0.2s;
background: $primary-color;
display: block;
&:not(:last-child){
margin-bottom: 5px;
}
&:nth-child(1){
transform: rotate(45deg);
transform-origin: 10% 10%;
}
&:nth-child(2){
opacity: 0;
filter: alpha(opacity=0);
}
&:nth-child(3){
transform: rotate(-45deg);
transform-origin: 10% 90%;
}
}
&.collapsed{
.icon-bar{
&:nth-child(1){
transform: rotate(0);
}
&:nth-child(2){
opacity: 1;
filter: alpha(opacity=1);
}
&:nth-child(3){
transform: rotate(0);
}
}
}
}
&.nav-bg{
padding: 12px 0;
box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.09);
@include mobile{
padding: 15px;
}
}
}

View File

@@ -0,0 +1,257 @@
.site-project{
padding: 120px 0;
overflow: hidden;
&-item{
position: relative;
margin-bottom: 30px;
transition: all 0.3s ease-in;
&-thumb{
img{
width: 100%;
}
}
&-content{
position: absolute;
background: $gray;
width: 100%;
padding: 45px 50px;
bottom: 0;
transition: all .3s $site-ease;
@include tablet{
padding: 30px;
padding-bottom: 75px;
}
span{
font-family: $secondary-font;
color: $primary-color;
display: block;
margin-bottom: 10px;
}
h3{
margin-bottom: 0;
a{
color: $text-color-dark;
transition: 0.3s ease;
&:hover{
text-decoration: none;
color: $primary-color;
}
}
}
a.read-more{
position: absolute;
bottom: 40px;
display: block;
width: 100%;
color: $text-color;
opacity: 0;
transform: translateY(20px);
transition: all 0.3s $site-ease;
@include tablet{
transform: translateY(0);
opacity: 1;
}
}
}
&:hover{
box-shadow:
0px 30px 45px 0px rgba(0, 0, 0, 0.01),
0px 30px 45px 0px rgba(0, 0, 0, 0.02),
0px 30px 45px 0px rgba(0, 0, 0, 0.03),
0px 30px 45px 0px rgba(0, 0, 0, 0.04);
.site-project-item-content{
a{
transform: translateY(0);
opacity: 1;
}
padding-bottom: 75px;
}
}
}
&-cta{
margin-top: 30px;
display: inline-block;
position: relative;
font-family: $secondary-font;
font-size: 18px;
font-weight: 500;
color: $primary-color;
&::before{
content: '';
position: absolute;
height: 2px;
width: 100%;
background: $primary-color;
bottom: -2px;
transition: transform 0.3s $site-ease;
transform-origin: right;
transform: scaleX(0);
}
&:hover{
color: $primary-color;
text-decoration: none;
&::before{
transform: scaleX(1);
transform-origin: left;
}
}
}
&-header{
padding: 170px 0 100px;
background: $gray;
@include tablet{
padding: 120px 0 80px;
}
&-content{
h1{
font-size: 55px;
span{
color: $primary-color;
}
@include tablet{
font-size: 40px;
}
}
@include desktop{
text-align: center;
margin-bottom: 30px;
}
}
&-action{
display: block;
text-align: center;
span{
display: block;
font-size: 30px;
font-weight: 300;
color: $text-color-dark;
margin-bottom: 20px;
@include tablet{
font-size: 25px;
}
}
img{
width: 66px;
@include tablet{
width: 40px;
}
}
&:hover{
text-decoration: none;
}
}
}
&-pagination{
margin-top: 40px;
.pagination{
justify-content: center;
.page-item{
&:not(:last-child){
margin-right: 10px;
}
.page-link{
font-size: 24px;
border-radius: 0;
border: none;
padding: 12px 20px;
color: $text-color-dark;
font-weight: 300;
transition: all 0.3s ease;
}
&.active{
.page-link{
background-color: $primary-color;
color: $white;
}
}
&.disabled{
opacity: 0.3;
cursor: not-allowed;
}
}
}
}
&-single{
&-section{
padding: 250px 0 100px;
@include tablet{
padding: 100px 0;
}
}
h1{
font-size: 40px;
font-weight: 500;
margin-bottom: 40px;
}
&-image{
display: flex;
flex-wrap: wrap;
margin-bottom: 30px;
img{
width: 48%;
&:nth-child(2n){
margin-left: auto;
}
@include tablet{
width: 100%;
}
}
}
&-description{
margin-bottom: 50px;
p{
margin-bottom: 30px;
}
}
&-action{
a{
position: relative;
font-size: 24px;
font-weight: 300;
color: $text-color-dark;
display: flex;
margin-left: auto;
justify-content: flex-end;
@include mobile{
transform: translateX(-10px);
}
.link-area{
display: inline-block;
overflow: hidden;
span{
position: relative;
display: block;
padding: 2px 0;
transition: transform .9s cubic-bezier(.19,1,.22,1);
transform-origin: left center;
&::after{
content: attr(data-text);
position: absolute;
top: 150%;
left: 0;
transform: skewY(30deg);
transform-origin: left center;
transition: transform .9s cubic-bezier(.19,1,.22,1);
}
}
}
&:hover{
text-decoration: none;
.link-area{
span{
transform: translateY(-150%) skewY(7deg);
&::after{
transform: skewY(-7deg);
}
}
}
}
}
img{
filter: invert(1);
transform: rotate(90deg);
margin-left: 30px;
}
}
}
}

View File

@@ -0,0 +1,51 @@
.site-team{
padding: 100px 0;
&-member{
background: $gray;
padding: 65px 30px 30px;
margin: 50px 0 30px;
position: relative;
@include tablet{
text-align: center;
}
&-image{
position: absolute;
width: 100px; height: 100px;
border-radius: 50%;
overflow: hidden;
left: 30px; top: 0;
transform: translateY(-50%);
@include tablet{
left: 50%;
transform: translate(-50%, -50%);
}
}
&-content{
h3{
font-size: 20px;
color: $primary-color;
margin-bottom: 10px;
font-weight: 500;
}
p{
font-size: 18px;
color: $text-color-dark;
margin-bottom: 20px;
font-weight: 300;
}
}
&-social{
margin: 0;
padding: 0;
li{
display: inline-block;
a{
color: $text-color-dark;
}
&:not(:last-child){
margin-right: 10px;
}
}
}
}
}

View File

@@ -0,0 +1,42 @@
.site-testimonial{
background: $gray;
padding: 100px 0;
overflow: hidden;
&-item{
background: $white;
padding: 30px;
margin-bottom: 30px;
transition: all 0.3s ease-in;
&.active{
box-shadow: 0px 30px 45px 0px rgba(0, 0, 0, 0.05);
}
&.inactive{
opacity: 0.4;
}
&-header{
display: flex;
align-items: center;
margin-bottom: 20px;
.thumb{
width: 80px;
img{
width: 100%;
}
margin-right: 15px;
}
.person{
h5{
margin-bottom: 5px;
}
p{
margin-bottom: 0;
color: $dark-gray;
}
}
}
&-body{
margin-bottom: 0;
font-weight: 300;
}
}
}

36
assets/scss/style.scss Executable file
View File

@@ -0,0 +1,36 @@
@import "variables";
@import "typography";
@import "mixins";
@import "buttons";
@import "common";
@import "components/navigation";
@import "components/hero";
@import "components/counter";
@import "components/project";
@import "components/blog";
@import "components/testimonial";
@import "components/cta";
@import "components/about";
@import "components/expertise";
@import "components/client";
@import "components/team";
@import "components/contact";
@import "components/footer";

View File

@@ -0,0 +1,25 @@
---
label: Blog Post
hide_body: false
fields:
- type: text
name: title
label: title
- type: datetime
name: date
label: date
- type: file
name: image
label: image
- type: file
name: feature_image
label: feature_image
- type: text
name: author
label: author
pages:
- content/blog/Design-inspiration:-the-best-projects-from-December.md
- content/blog/Design-inspiration:-the-best-projects-from-November.md
- content/blog/Pt-chooses-Classic-Blue-for-its-colour-of-the-year-2020.md
- content/blog/The-10-biggest-rebrands-and-logo-designs-of-2019.md
- content/blog/the-10-biggest-product-stories-of-2019.md

View File

@@ -0,0 +1,15 @@
---
label: Clients
hide_body: true
fields:
- type: boolean
name: enable
label: enable
- type: text
name: title
label: title
- type: image_gallery
name: client_logos
label: client_logos
pages:
- data/clients.yml

View File

@@ -0,0 +1,25 @@
---
label: Portfolio
hide_body: false
fields:
- type: text
name: title
label: title
- type: datetime
name: date
label: date
- type: text
name: type
label: type
- type: file
name: image
label: image
- type: list
name: category
label: category
- type: image_gallery
name: project_images
label: project_images
pages:
- content/portfolio/seamless-watch.md
- content/portfolio/use-less-brand.md

View File

@@ -0,0 +1,34 @@
---
label: Team
hide_body: true
fields:
- type: boolean
name: enable
label: enable
- type: text
name: title
label: title
- type: field_group_list
name: members
label: members
fields:
- type: file
name: image
label: image
- type: text
name: name
label: name
- type: text
name: designation
label: designation
- type: text
name: medium
label: medium
- type: text
name: linkedIn
label: linkedIn
- type: text
name: instagram
label: instagram
pages:
- data/team.yml

View File

@@ -0,0 +1,31 @@
---
label: Testimonial
hide_body: true
fields:
- type: boolean
name: enable
label: enable
- type: text
name: title
label: title
- type: text
name: subtitle
label: subtitle
- type: field_group_list
name: testimonial_item
label: testimonial_item
fields:
- type: file
name: thumb
label: thumb
- type: text
name: name
label: name
- type: text
name: company_position
label: company_position
- type: textarea
name: quote
label: quote
pages:
- data/testimonial.yml

View File

@@ -0,0 +1,62 @@
---
new_page_extension: md
auto_deploy: false
admin_path:
webhook_url:
sections:
- type: document
path: data/counter.yml
label: Counter
- type: document
path: data/team.yml
label: Team
- type: document
path: data/clients.yml
label: Clients
- type: document
path: data/testimonial.yml
label: Testimonials
- type: document
path: config.toml
label: Configuration
- type: directory
path: content
label: Pages
create: all
match: "*"
- type: directory
path: content/blog
label: Blog
create: all
match: "**/*"
- type: directory
path: content/contact
label: Contact
create: all
match: "**/*"
- type: directory
path: content/about
label: About
create: all
match: "**/*"
- type: directory
path: content/portfolio
label: Portfolio
create: all
match: "**/*"
upload_dir: static/images
public_path: "/images"
front_matter_path: ''
use_front_matter_path: false
file_template: ":filename:"
build:
preview_env:
- HUGO_ENV=staging
- HUGO_VERSION=0.63.2
preview_output_directory: public
preview_docker_image: forestryio/hugo:latest
mount_path: "/srv"
working_dir: "/srv"
instant_preview_command: hugo server -D -E -F --port 8080 --bind 0.0.0.0 --renderToDisk
-d public
version: 0.63.2

View File

@@ -1 +0,0 @@
/* Add your own custom styles here */

Binary file not shown.

Before

Width:  |  Height:  |  Size: 74 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 697 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 254 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 58 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 210 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 74 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 189 KiB

144
exampleSite/config.toml Normal file
View File

@@ -0,0 +1,144 @@
baseURL = "http://example.org/"
languageCode = "en-us"
title = "Roxo | Creative Design Agency"
theme = "roxo-hugo"
summarylength = 25
# Site Menus
[menu]
# Navbar Menus
[[menu.nav]]
name = "Home"
url = ""
weight = 1
[[menu.nav]]
name = "About"
url = "about"
weight = 2
[[menu.nav]]
name = "Portfolio"
url = "portfolio"
weight = 3
[[menu.nav]]
name = "Blog"
url = "blog"
weight = 4
[[menu.nav]]
name = "Get in touch"
url = "contact"
weight = 5
# Site Params
[params]
logo = "images/logo.png"
logo_footer = "images/logo-footer.png"
favicon_icon = "images/favicon.ico"
favicon_shortcut_icon = "images/favicon.png"
custom_stylesheets = [] # [ "scss/my_1.scss", "scss/my_2.scss" ]
dateFormat = "26 FEB 1994"
# Meta data
description = "Roxo Hugo themes | Design Agency Template by StaticMania"
author = "StaticMania"
# Google Analitycs
googleAnalitycsID = "Your ID"
# We're using formspree.io for form handling, paste your formspree url below
fabform = "https://fabform.io/f/USAg2Jl"
# Contact Form
[params.contactForm]
placeholder_first_name = "First Name"
placeholder_last_name = "Last Name"
placeholder_email = "Email"
placeholder_project_type = "Project Type"
placeholder_about_the_project = "About the Project"
send_message = "Send Message"
[[params.contactForm.projectType]]
value = "gd"
title = "Graphics Design"
[[params.contactForm.projectType]]
value = "wd"
title = "Web Design"
# Navbar Action Button
[params.navAction]
status = true
name = "Get in touch"
url = "contact"
# Banner Section
[params.banner]
enable = true
background_image = "images/backgrounds/hero-background.jpg"
heading = "Were a Design Studio That Belies In the Great Ideas"
tagline = "WE WORK HARD, WE PLAY HARD"
primary_button = "See Our Works"
primary_button_url = "portfolio"
secondary_button = "Connect with Us"
secondary_button_url = "contact"
[params.blog]
read_more = "read more"
[params.portfolio]
enable = true
title = "OUR RECENT WORKS"
subtitle = "Crafting experiences and seeking to make the complex clear & beautiful."
view_project = "view project"
more_works = "MORE WORKS"
scroll_down = "scroll down"
[params.call_to_action]
enable = true
background_image = "images/backgrounds/cta-background.jpg"
title = "LETS WORK TOGETHER"
primary_button = "Submit Query"
primary_button_url = "contact"
secondary_button = "Not Convinced"
secondary_button_url = "portfolio"
[params.footer]
params.footer.qr_print = false
# Footer Contact Info
[params.footer.contactInfo]
title = "Contact Info"
address = "713 Elmwood St.<br>Prior Lake, MN 55372"
phone = "409-896-1444"
email = "info@roxo.co"
# Footer Sitemap
[params.footer.sitemap]
title = "Sitemap"
[[params.footer.sitemap.link]]
name = "About Company"
url = "about"
[[params.footer.sitemap.link]]
name = "Projects"
url = "portfolio"
[[params.footer.sitemap.link]]
name = "Blog"
url = "blog"
[[params.footer.sitemap.link]]
name = "Contact"
url = "contact"
# Footer Social Media
[params.footer.social]
title = "Social Media"
[[params.footer.social.link]]
name = "Medium"
url = "#"
[[params.footer.social.link]]
name = "Behance"
url = "#"
[[params.footer.social.link]]
name = "Dribbble"
url = "#"
[[params.footer.social.link]]
name = "Instagram"
url = "#"
# Footer Service
[params.footer.service]
title = "We help brands:"
description = "develop design solutions<br>produce valuable cultural content<br>create fresh brand experience"
[params.footer.back_to_top]
description = "I want to <br> visit again"

View File

@@ -1,6 +0,0 @@
################ English language ##################
[en]
label = "En"
locale = "en-us"
contentDir = "content/english"
weight = 1

View File

@@ -1,72 +0,0 @@
############# English navigation ##############
# main menu
[[main]]
name = "Home"
url = "/"
weight = 1
[[main]]
name = "About"
url = "/about"
weight = 2
[[main]]
name = "Portfolio"
url = "/portfolio"
weight = 3
[[main]]
name = "Blog"
url = "/blog"
weight = 4
# footer menu
# Contact section
[[footer_01]]
name = "Contact Info" # This acts as the section title
title = true # Flag to identify this as a section title
weight = 0 # Lower weight to appear first
[[footer_01]]
name = "713 Elmwood St. Prior Lake, MN 55372"
url = "https://www.google.com/maps?q=713+Elmwood+St,+Prior+Lake,+MN+55372"
weight = 1
[[footer_01]]
name = "409-896-1444"
url = "tell:409-896-1444"
weight = 2
[[footer_01]]
name = "info@roxo.co"
url = "mailto:info@roxo.co"
weight = 3
# Sitemap section
[[footer_02]]
name = "Sitemap" # This acts as the section title
title = true # Flag to identify this as a section title
weight = 0 # Lower weight to appear first
[[footer_02]]
name = "Elements"
url = "/elements"
weight = 1
[[footer_02]]
name = "Projects"
url = "/projects"
weight = 2
[[footer_02]]
name = "Blog"
url = "/blog"
weight = 3
[[footer_02]]
name = "Contact"
url = "/contact"
weight = 4

View File

@@ -1,73 +0,0 @@
[hugoVersion]
extended = true
min = "0.158.0"
max = "0.165.0"
[[imports]]
path = "github.com/gethugothemes/hugo-modules/llms-txt"
[[imports]]
path = "github.com/gethugothemes/hugo-modules/pwa"
[[imports]]
path = "github.com/gethugothemes/hugo-modules/images"
[[imports]]
path = "github.com/gethugothemes/hugo-modules/videos"
[[imports]]
path = "github.com/gethugothemes/hugo-modules/icons/font-awesome"
[[imports]]
path = "github.com/gethugothemes/hugo-modules/gzip-caching"
[[imports]]
path = "github.com/gethugothemes/hugo-modules/adsense"
[[imports]]
path = "github.com/gethugothemes/hugo-modules/accordion"
[[imports]]
path = "github.com/gethugothemes/hugo-modules/table-of-contents"
[[imports]]
path = "github.com/gethugothemes/hugo-modules/tab"
[[imports]]
path = "github.com/gethugothemes/hugo-modules/modal"
[[imports]]
path = "github.com/gethugothemes/hugo-modules/gallery-slider"
[[imports]]
path = "github.com/gethugothemes/hugo-modules/components/preloader"
[[imports]]
path = "github.com/gethugothemes/hugo-modules/components/social-share"
[[imports]]
path = "github.com/gethugothemes/hugo-modules/components/cookie-consent"
[[imports]]
path = "github.com/gethugothemes/hugo-modules/components/custom-script"
[[imports]]
path = "github.com/gethugothemes/hugo-modules/components/render-link"
[[imports]]
path = "github.com/gethugothemes/hugo-modules/shortcodes/button"
[[imports]]
path = "github.com/gethugothemes/hugo-modules/shortcodes/notice"
[[imports]]
path = "github.com/gethugothemes/hugo-modules/shortcodes/mermaid"
[[imports]]
path = "github.com/gethugothemes/hugo-modules/seo-tools/basic-seo"
[[imports]]
path = "github.com/gethugothemes/hugo-modules/seo-tools/site-verifications"
[[imports]]
path = "github.com/gethugothemes/hugo-modules/seo-tools/google-tag-manager"

View File

@@ -1,108 +0,0 @@
#################### default parameters ############################
# favicon module: https://github.com/gethugothemes/hugo-modules/tree/master/images#favicon-implementation
favicon = "images/favicon.png"
# logo module: https://github.com/gethugothemes/hugo-modules/tree/master/images#logo-implementation
logo = "images/logo.png"
# use `px` or `x` with logo_width, example: "100px".
# Note: logo_width is not work with .svg file
logo_width = "68px"
logo_height = "32px"
# if logo_webp set false, will not generate WEBP version of logo | default is true
logo_webp = true
# logo text will only show when logo is missing.
logo_text = "Roxo"
# navbar fixed to top
navbar_fixed = true
# theme-mode
theme_switcher = true
theme_default = "system" # available options [light/dark/system]
# Main Sections
mainSections = ["blog"]
# contact form action
contact_form_action = "#" # contact form works with [https://airform.io/] or [https://formspree.io]
# google tag manager, see https://developers.google.com/tag-manager/
google_tag_manager = "" # example: G-XXXXXXXXXX
google_adsense = "" # example: ca-pub-xxxxxxxxxxxxxxxx
# custom script on header, example: custom_script= "<script>console.log(\"Hello World\")</script>"
custom_script = ""
# copyright
copyright = "© Copyright 2026 - All Rights Reserved by [Sitepins](https://sitepins.com)"
# Preloader
# preloader module: https://github.com/gethugothemes/hugo-modules/tree/master/components/preloader
[preloader]
enable = false
preloader = "" # use jpg, png, svg or gif format.
# Navigation button
[navigation_button]
enable = true
label = "Get In Touch"
link = "/contact"
# LLMs Configuration
# LLMs module: https://github.com/gethugothemes/hugo-modules/tree/master/llms-txt
[llms]
# Set to false to disable /llms.txt generation
generate_llms_txt = true
# Set to false to disable /llms-full.txt generation
generate_llms_full_txt = true
# Limit to specific paths (e.g. "/about/", "/blog/*", "/blog/**"). Empty = all pages.
include = []
# Exclude specific paths (same wildcard formats as include). Include takes priority on conflicts.
exclude = []
# seo meta data for OpenGraph / Twitter Card
# seo module: https://github.com/gethugothemes/hugo-modules/tree/master/seo-tools/basic-seo
[metadata]
keywords = ["Boilerplate", "Hugo"]
description = "A Hugo powered static website built with Tailwind CSS."
author = "sitepins"
twitter = "sitepins"
image = "images/og-image.png"
# site verifications
# verification module: https://github.com/gethugothemes/hugo-modules/tree/master/seo-tools/site-verifications
[site_verification]
google = "" # Your verification code
bing = "" # Your verification code
baidu = "" # Your verification code
facebook = "" # Your verification code
mastodon = "" # Your verification code
# cookies
# cookies module: https://github.com/gethugothemes/hugo-modules/tree/master/components/cookie-consent
[cookies]
enable = false
expire_days = 60
content = "This site uses cookies. By continuing to use this website, you agree to their use."
button = "I Accept"
# diagrams
[mermaid]
js_url = 'https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.esm.min.mjs'
# google map
[google_map]
enable = true
map_api_key = "AIzaSyCcABaamniA6OL5YvYSpB3pFMNrXwXnLwU"
map_latitude = "51.5223477"
map_longitude = "-0.1622023"
map_marker = "images/marker.png"
# Subscription
[subscription]
enable = false
# mailchimp subsciption
mailchimp_form_action = "https://gmail.us4.list-manage.com/subscribe/post?u=463ee871f45d2d93748e77cad&amp;id=a0a2c6d074" # replace this url with yours
mailchimp_form_name = "b_463ee871f45d2d93748e77cad_a0a2c6d074"
# Footer
[footer]
footer_logo = "images/logo-footer.png"
footer_title = "We help brands"
footer_description = "develop design solutions produce valuable cultural content create fresh brand experience"
back_to_top = "I want to visit again"

View File

@@ -1,13 +0,0 @@
# defaultContentLanguageInSubdir must be true for this to work.
# Other languages redirects
# [[redirects]]
# from = '/fr/**'
# to = '/fr/404.html'
# status = 404
# Default language must be last.
# [[redirects]]
# from = '/**'
# to = '/en/404.html'
# status = 404

View File

@@ -0,0 +1,8 @@
---
title: "About Us"
date: 2018-07-12T18:19:33+06:00
heading : "WE ARE ROXO DESIGN. AN AWARD-WINNING CREATIVE STUDIO IN FLORIDA."
description : "We are specialized in developing forward-thinking brand identities, websites, illustration and animation for all types of customers. And we do this by bringing our customers through each phase of the design process with us."
expertise_title: "Expertise"
expertise_sectors: ["Customer Experience Design", "Digital Products", "Development", "Campaign & Content", "Employer Branding", "Animation & Motion Graphics", "Packaging & Product Design", "Retail & Spacial", "Print & Editorial Design", "Concept/Text", "Information Design"]
---

View File

@@ -0,0 +1,36 @@
---
title: "Design Inspiration: The Best Projects From December"
date: 2019-12-24T13:45:06+06:00
image: images/blog/blog-post-04.jpg
feature_image: images/blog/blog-details-image.jpg
author: Alexender Schoitiz
---
### Black Lines brand identity, by & Smith
Black Lines wants it to be as easy to serve a Negroni as it is a pint of lager. The drinks company is seeking to revolutionise the bar experience by serving cocktails by draught with a changing menu of drinks (as well as same favourite stand-bys). A pink grapefruit spritz was served through the summer while a new pear and white tea fizz joins the line-up for winter.
1. ROFL means Rolling on floor laughing.
2. STFU means Shut the *freak* up.
3. LMK means Let me know.
4. ILY means I love you.
5. YOLO means You only live once.
6. SMH means Shaking my head.
The company was previously known as Hingston + Co. but has been given a complete rebrand — including a new logo, tap badges, website and branded material — by London-based design studio & Smith. The new identity is based on the Kandinsky abstract painting, Black Lines, and true to its name, is mostly black and white with a few flashes of colour. According to & Smith, the identity brings together “art and science” and has been brought to life through collaborations with nine illustrators.
1. ROFL means Rolling on floor laughing.
2. STFU means Shut the *freak* up.
3. LMK means Let me know.
4. ILY means I love you.
5. YOLO means You only live once.
6. SMH means Shaking my head.
![blog-details-image-02](https://user-images.githubusercontent.com/16266381/71399826-2009b380-264f-11ea-9bc3-59d7fa9a9994.jpg)
Black Lines wants it to be as easy to serve a Negroni as it is a pint of lager. The drinks company is seeking to revolutionise the bar experience by serving cocktails by draught with a changing menu of drinks (as well as same favourite stand-bys). A pink grapefruit spritz was served through the summer while a new pear and white tea fizz joins the line-up for winter.
> "The public is more familiar with bad design than good design. It is, in effect, conditioned to prefer bad design, because that is what it lives with. The new becomes threatening, the old reassuring."
> Paul Rand, graphic designer

View File

@@ -0,0 +1,37 @@
---
title: "Design Inspiration: The Best Projects From November"
date: 2019-12-24T13:36:06+06:00
image: images/blog/blog-post-02.jpg
feature_image: images/blog/blog-details-image.jpg
author: Alexender Schoitiz
---
### Black Lines brand identity, by & Smith
Black Lines wants it to be as easy to serve a Negroni as it is a pint of lager. The drinks company is seeking to revolutionise the bar experience by serving cocktails by draught with a changing menu of drinks (as well as same favourite stand-bys). A pink grapefruit spritz was served through the summer while a new pear and white tea fizz joins the line-up for winter.
1. ROFL means Rolling on floor laughing.
2. STFU means Shut the *freak* up.
3. LMK means Let me know.
4. ILY means I love you.
5. YOLO means You only live once.
6. SMH means Shaking my head.
The company was previously known as Hingston + Co. but has been given a complete rebrand — including a new logo, tap badges, website and branded material — by London-based design studio & Smith. The new identity is based on the Kandinsky abstract painting, Black Lines, and true to its name, is mostly black and white with a few flashes of colour. According to & Smith, the identity brings together “art and science” and has been brought to life through collaborations with nine illustrators.
1. ROFL means Rolling on floor laughing.
2. STFU means Shut the *freak* up.
3. LMK means Let me know.
4. ILY means I love you.
5. YOLO means You only live once.
6. SMH means Shaking my head.
![blog-details-image-02](https://user-images.githubusercontent.com/16266381/71399826-2009b380-264f-11ea-9bc3-59d7fa9a9994.jpg)
Black Lines wants it to be as easy to serve a Negroni as it is a pint of lager. The drinks company is seeking to revolutionise the bar experience by serving cocktails by draught with a changing menu of drinks (as well as same favourite stand-bys). A pink grapefruit spritz was served through the summer while a new pear and white tea fizz joins the line-up for winter.
> "The public is more familiar with bad design than good design. It is, in effect, conditioned to prefer bad design, because that is what it lives with. The new becomes threatening, the old reassuring."
> Paul Rand, graphic designer

View File

@@ -0,0 +1,36 @@
---
title: "Pt Chooses Classic Blue for Its Colour of the Year 2020"
date: 2019-12-24T13:32:54+06:00
image: images/blog/blog-post-03.jpg
feature_image: images/blog/blog-details-image.jpg
author: Alexender Schoitiz
---
### Black Lines brand identity, by & Smith
Black Lines wants it to be as easy to serve a Negroni as it is a pint of lager. The drinks company is seeking to revolutionise the bar experience by serving cocktails by draught with a changing menu of drinks (as well as same favourite stand-bys). A pink grapefruit spritz was served through the summer while a new pear and white tea fizz joins the line-up for winter.
1. ROFL means Rolling on floor laughing.
2. STFU means Shut the *freak* up.
3. LMK means Let me know.
4. ILY means I love you.
5. YOLO means You only live once.
6. SMH means Shaking my head.
The company was previously known as Hingston + Co. but has been given a complete rebrand — including a new logo, tap badges, website and branded material — by London-based design studio & Smith. The new identity is based on the Kandinsky abstract painting, Black Lines, and true to its name, is mostly black and white with a few flashes of colour. According to & Smith, the identity brings together “art and science” and has been brought to life through collaborations with nine illustrators.
1. ROFL means Rolling on floor laughing.
2. STFU means Shut the *freak* up.
3. LMK means Let me know.
4. ILY means I love you.
5. YOLO means You only live once.
6. SMH means Shaking my head.
![blog-details-image-02](https://user-images.githubusercontent.com/16266381/71399826-2009b380-264f-11ea-9bc3-59d7fa9a9994.jpg)
Black Lines wants it to be as easy to serve a Negroni as it is a pint of lager. The drinks company is seeking to revolutionise the bar experience by serving cocktails by draught with a changing menu of drinks (as well as same favourite stand-bys). A pink grapefruit spritz was served through the summer while a new pear and white tea fizz joins the line-up for winter.
> "The public is more familiar with bad design than good design. It is, in effect, conditioned to prefer bad design, because that is what it lives with. The new becomes threatening, the old reassuring."
> Paul Rand, graphic designer

View File

@@ -0,0 +1,37 @@
---
title: "The 10 Biggest Rebrands and Logo Designs of 2019"
date: 2019-12-24T13:40:00+06:00
image: images/blog/blog-post-01.jpg
feature_image: images/blog/blog-details-image.jpg
author: Alexender Schoitiz
---
### Black Lines brand identity, by & Smith
Black Lines wants it to be as easy to serve a Negroni as it is a pint of lager. The drinks company is seeking to revolutionise the bar experience by serving cocktails by draught with a changing menu of drinks (as well as same favourite stand-bys). A pink grapefruit spritz was served through the summer while a new pear and white tea fizz joins the line-up for winter.
1. ROFL means Rolling on floor laughing.
2. STFU means Shut the *freak* up.
3. LMK means Let me know.
4. ILY means I love you.
5. YOLO means You only live once.
6. SMH means Shaking my head.
The company was previously known as Hingston + Co. but has been given a complete rebrand — including a new logo, tap badges, website and branded material — by London-based design studio & Smith. The new identity is based on the Kandinsky abstract painting, Black Lines, and true to its name, is mostly black and white with a few flashes of colour. According to & Smith, the identity brings together “art and science” and has been brought to life through collaborations with nine illustrators.
1. ROFL means Rolling on floor laughing.
2. STFU means Shut the *freak* up.
3. LMK means Let me know.
4. ILY means I love you.
5. YOLO means You only live once.
6. SMH means Shaking my head.
![blog-details-image-02](https://user-images.githubusercontent.com/16266381/71399826-2009b380-264f-11ea-9bc3-59d7fa9a9994.jpg)
Black Lines wants it to be as easy to serve a Negroni as it is a pint of lager. The drinks company is seeking to revolutionise the bar experience by serving cocktails by draught with a changing menu of drinks (as well as same favourite stand-bys). A pink grapefruit spritz was served through the summer while a new pear and white tea fizz joins the line-up for winter.
> "The public is more familiar with bad design than good design. It is, in effect, conditioned to prefer bad design, because that is what it lives with. The new becomes threatening, the old reassuring."
> Paul Rand, graphic designer

View File

@@ -0,0 +1,6 @@
---
title : "Roxo Blog"
date : 2019-12-23T20:17:01+06:00
description : "By fusing strategy & design we help our partners build their brands, drive business, & stand out from the noise in saturated markets! Follow our blog for the latest case studies and projects."
---

View File

@@ -0,0 +1,36 @@
---
title: "The 10 Biggest Product Stories of 2019"
date: 2019-12-24T12:58:17+06:00
image: images/blog/blog-post-04.jpg
feature_image: images/blog/blog-details-image.jpg
author: Alexender Schoitiz
---
### Black Lines brand identity, by & Smith
Black Lines wants it to be as easy to serve a Negroni as it is a pint of lager. The drinks company is seeking to revolutionise the bar experience by serving cocktails by draught with a changing menu of drinks (as well as same favourite stand-bys). A pink grapefruit spritz was served through the summer while a new pear and white tea fizz joins the line-up for winter.
1. ROFL means Rolling on floor laughing.
2. STFU means Shut the *freak* up.
3. LMK means Let me know.
4. ILY means I love you.
5. YOLO means You only live once.
6. SMH means Shaking my head.
The company was previously known as Hingston + Co. but has been given a complete rebrand — including a new logo, tap badges, website and branded material — by London-based design studio & Smith. The new identity is based on the Kandinsky abstract painting, Black Lines, and true to its name, is mostly black and white with a few flashes of colour. According to & Smith, the identity brings together “art and science” and has been brought to life through collaborations with nine illustrators.
1. ROFL means Rolling on floor laughing.
2. STFU means Shut the *freak* up.
3. LMK means Let me know.
4. ILY means I love you.
5. YOLO means You only live once.
6. SMH means Shaking my head.
![blog-details-image-02](https://user-images.githubusercontent.com/16266381/71399826-2009b380-264f-11ea-9bc3-59d7fa9a9994.jpg)
Black Lines wants it to be as easy to serve a Negroni as it is a pint of lager. The drinks company is seeking to revolutionise the bar experience by serving cocktails by draught with a changing menu of drinks (as well as same favourite stand-bys). A pink grapefruit spritz was served through the summer while a new pear and white tea fizz joins the line-up for winter.
> "The public is more familiar with bad design than good design. It is, in effect, conditioned to prefer bad design, because that is what it lives with. The new becomes threatening, the old reassuring."
> Paul Rand, graphic designer

View File

@@ -0,0 +1,7 @@
---
title : "Contact"
date : 2019-12-23T20:17:01+06:00
heading : "Dont be shy. Say <span>Hello.</span>"
form_heading : "TELL US ABOUT YOUR PROJECT"
---

View File

@@ -1,36 +0,0 @@
---
# Banner
banner:
title: We're a Design Studio That Believes in Great Ideas
content: WE WORK HARD, WE PLAY HARD
image: /images/hero-background.jpg
button_primary:
enable: true
label: Connect With Us
link: /contact
button_secondary:
enable: true
label: See Our Work
link: /portfolio
# Company Stats
company_stats:
enable: true
title: THE PROOF IS IN THE PUDDING!
stats:
- name: Happy Clients
count: 250+
- name: Projects Completed
count: 100+
- name: Cups of coffee
count: 350+
- name: Telephone Talks
count: 775+
# Recent Works:
recent_works:
enable: true
title: OUR RECENT WORKS
description: Crafting experiences and seeking to make the complex clear & beautiful.
---

View File

@@ -1,23 +0,0 @@
---
title: "WE ARE ROXO DESIGN. AN AWARD-WINNING CREATIVE STUDIO IN FLORIDA."
meta_title: "About Us"
description: "We are specialized in developing forward-thinking brand identities, websites, illustration and animation for all types of customers. And we do this by bringing our customers through each phase of the design process with us."
image: "/images/blog/blog-details-image-02.jpg"
expertise_title: "Expertise"
expertise_sectors:
[
"Customer Experience Design",
"Digital Products",
"Development",
"Campaign & Content",
"Employer Branding",
"Animation & Motion Graphics",
"Packaging & Product Design",
"Retail & Spacial",
"Print & Editorial Design",
"Concept/Text",
"Information Design",
]
layout: "about"
draft: false
---

View File

@@ -1,5 +0,0 @@
---
title: "Roxo Blog"
meta_title: ""
description: "By fusing strategy & design we help our partners build their brands, drive business, & stand out from the noise in saturated markets! Follow our blog for the latest case studies and projects."
---

View File

@@ -1,31 +0,0 @@
---
title: "How to build an Application with modern Technology"
meta_title: ""
description: "Black Lines brand identity, by & Smith Black Lines wants it to be
as easy to serve a Negroni as it is a pint of lager."
date: 2022-04-04T05:00:00.000Z
image: "/images/blog/blog-post-01.jpg"
author: "John Doe"
draft: false
---
Nemo vel ad consectetur namut rutrum ex, venenatis sollicitudin urna. Aliquam erat volutpat. Integer eu ipsum sem. Ut bibendum lacus vestibulum maximus suscipit. Quisque vitae nibh iaculis neque blandit euismod.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo vel ad consectetur ut aperiam. Itaque eligendi natus aperiam? Excepturi repellendus consequatur quibusdam optio expedita praesentium est adipisci dolorem ut eius!
## Creative Design
Nam ut rutrum ex, venenatis sollicitudin urna. Aliquam erat volutpat. Integer eu ipsum sem. Ut bibendum lacus vestibulum maximus suscipit. Quisque vitae nibh iaculis neque blandit euismod.
> Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo vel ad consectetur ut aperiam. Itaque eligendi natus aperiam? Excepturi repellendus consequatur quibusdam optio expedita praesentium est adipisci dolorem ut eius!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo vel ad consectetur ut aperiam. Itaque eligendi natus aperiam? Excepturi repellendus consequatur quibusdam optio expedita praesentium est adipisci dolorem ut eius!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo vel ad consectetur ut aperiam. Itaque eligendi natus aperiam? Excepturi repellendus consequatur quibusdam optio expedita praesentium est adipisci dolorem ut eius.
Nam ut rutrum ex, venenatis sollicitudin urna. Aliquam erat volutpat. Integer eu ipsum sem. Ut bibendum lacus vestibulum maximus suscipit. Quisque vitae nibh iaculis neque blandit euismod.
> Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo vel ad consectetur ut aperiam. Itaque eligendi natus aperiam? Excepturi repellendus consequatur quibusdam optio expedita praesentium est adipisci dolorem ut eius!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo vel ad consectetur ut aperiam. Itaque eligendi natus aperiam? Excepturi repellendus consequatur quibusdam optio expedita praesentium est adipisci dolorem ut eius!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo vel ad consectetur ut aperiam. Itaque eligendi natus aperiam? Excepturi repellendus consequatur quibusdam optio expedita praesentium est adipisci dolorem ut eius.

View File

@@ -1,21 +0,0 @@
---
title: "How to build an Application with modern Technology"
meta_title: ""
description: "Black Lines brand identity, by & Smith Black Lines wants it to be as easy to serve a Negroni as it is a pint of lager."
date: 2022-04-04T05:00:00Z
image: "/images/blog/blog-post-02.jpg"
author: "Sam Wilson"
draft: false
---
Nemo vel ad consectetur namut rutrum ex, venenatis sollicitudin urna. Aliquam erat volutpat. Integer eu ipsum sem. Ut bibendum lacus vestibulum maximus suscipit. Quisque vitae nibh iaculis neque blandit euismod. Nemo vel ad consectetur namut rutrum ex, venenatis sollicitudin urna. Aliquam erat volutpat. Integer eu ipsum sem. Ut bibendum lacus vestibulum maximus suscipit. Quisque vitae nibh iaculis neque blandit euismod.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo vel ad consectetur ut aperiam. Itaque eligendi natus aperiam? Excepturi repellendus consequatur quibusdam optio expedita praesentium est adipisci dolorem ut eius!
## Creative Design
Nam ut rutrum ex, venenatis sollicitudin urna. Aliquam erat volutpat. Integer eu ipsum sem. Ut bibendum lacus vestibulum maximus suscipit. Quisque vitae nibh iaculis neque blandit euismod.
> Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo vel ad consectetur ut aperiam. Itaque eligendi natus aperiam? Excepturi repellendus consequatur quibusdam optio expedita praesentium est adipisci dolorem ut eius!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo vel ad consectetur ut aperiam. Itaque eligendi natus aperiam? Excepturi repellendus consequatur quibusdam optio expedita praesentium est adipisci dolorem ut eius!

View File

@@ -1,21 +0,0 @@
---
title: "How to build an Application with modern Technology"
meta_title: ""
description: "Black Lines brand identity, by & Smith Black Lines wants it to be as easy to serve a Negroni as it is a pint of lager."
date: 2022-04-04T05:00:00Z
image: "/images/blog/blog-post-03.jpg"
author: "John Doe"
draft: false
---
Nemo vel ad consectetur namut rutrum ex, venenatis sollicitudin urna. Aliquam erat volutpat. Integer eu ipsum sem. Ut bibendum lacus vestibulum maximus suscipit. Quisque vitae nibh iaculis neque blandit euismod.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo vel ad consectetur ut aperiam. Itaque eligendi natus aperiam? Excepturi repellendus consequatur quibusdam optio expedita praesentium est adipisci dolorem ut eius!
## Creative Design
Nam ut rutrum ex, venenatis sollicitudin urna. Aliquam erat volutpat. Integer eu ipsum sem. Ut bibendum lacus vestibulum maximus suscipit. Quisque vitae nibh iaculis neque blandit euismod.
> Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo vel ad consectetur ut aperiam. Itaque eligendi natus aperiam? Excepturi repellendus consequatur quibusdam optio expedita praesentium est adipisci dolorem ut eius!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo vel ad consectetur ut aperiam. Itaque eligendi natus aperiam? Excepturi repellendus consequatur quibusdam optio expedita praesentium est adipisci dolorem ut eius!

View File

@@ -1,21 +0,0 @@
---
title: "How to build an Application with modern Technology"
meta_title: ""
description: "Black Lines brand identity, by & Smith Black Lines wants it to be as easy to serve a Negroni as it is a pint of lager."
date: 2022-04-04T05:00:00Z
image: "/images/blog/blog-post-04.jpg"
author: "John Doe"
draft: false
---
Nemo vel ad consectetur namut rutrum ex, venenatis sollicitudin urna. Aliquam erat volutpat. Integer eu ipsum sem. Ut bibendum lacus vestibulum maximus suscipit. Quisque vitae nibh iaculis neque blandit euismod.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo vel ad consectetur ut aperiam. Itaque eligendi natus aperiam? Excepturi repellendus consequatur quibusdam optio expedita praesentium est adipisci dolorem ut eius!
## Creative Design
Nam ut rutrum ex, venenatis sollicitudin urna. Aliquam erat volutpat. Integer eu ipsum sem. Ut bibendum lacus vestibulum maximus suscipit. Quisque vitae nibh iaculis neque blandit euismod.
> Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo vel ad consectetur ut aperiam. Itaque eligendi natus aperiam? Excepturi repellendus consequatur quibusdam optio expedita praesentium est adipisci dolorem ut eius!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo vel ad consectetur ut aperiam. Itaque eligendi natus aperiam? Excepturi repellendus consequatur quibusdam optio expedita praesentium est adipisci dolorem ut eius!

View File

@@ -1,21 +0,0 @@
---
title: "How to build an Application with modern Technology"
meta_title: ""
description: "Black Lines brand identity, by & Smith Black Lines wants it to be as easy to serve a Negroni as it is a pint of lager."
date: 2022-04-04T05:00:00Z
image: "/images/blog/blog-post-01.jpg"
author: "John Doe"
draft: false
---
Nemo vel ad consectetur namut rutrum ex, venenatis sollicitudin urna. Aliquam erat volutpat. Integer eu ipsum sem. Ut bibendum lacus vestibulum maximus suscipit. Quisque vitae nibh iaculis neque blandit euismod.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo vel ad consectetur ut aperiam. Itaque eligendi natus aperiam? Excepturi repellendus consequatur quibusdam optio expedita praesentium est adipisci dolorem ut eius!
## Creative Design
Nam ut rutrum ex, venenatis sollicitudin urna. Aliquam erat volutpat. Integer eu ipsum sem. Ut bibendum lacus vestibulum maximus suscipit. Quisque vitae nibh iaculis neque blandit euismod.
> Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo vel ad consectetur ut aperiam. Itaque eligendi natus aperiam? Excepturi repellendus consequatur quibusdam optio expedita praesentium est adipisci dolorem ut eius!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo vel ad consectetur ut aperiam. Itaque eligendi natus aperiam? Excepturi repellendus consequatur quibusdam optio expedita praesentium est adipisci dolorem ut eius!

View File

@@ -1,21 +0,0 @@
---
title: "How to build an Application with modern Technology"
meta_title: ""
description: "Black Lines brand identity, by & Smith Black Lines wants it to be as easy to serve a Negroni as it is a pint of lager."
date: 2022-04-04T05:00:00Z
image: "/images/blog/blog-post-04.jpg"
author: "John Doe"
draft: false
---
Nemo vel ad consectetur namut rutrum ex, venenatis sollicitudin urna. Aliquam erat volutpat. Integer eu ipsum sem. Ut bibendum lacus vestibulum maximus suscipit. Quisque vitae nibh iaculis neque blandit euismod.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo vel ad consectetur ut aperiam. Itaque eligendi natus aperiam? Excepturi repellendus consequatur quibusdam optio expedita praesentium est adipisci dolorem ut eius!
## Creative Design
Nam ut rutrum ex, venenatis sollicitudin urna. Aliquam erat volutpat. Integer eu ipsum sem. Ut bibendum lacus vestibulum maximus suscipit. Quisque vitae nibh iaculis neque blandit euismod.
> Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo vel ad consectetur ut aperiam. Itaque eligendi natus aperiam? Excepturi repellendus consequatur quibusdam optio expedita praesentium est adipisci dolorem ut eius!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo vel ad consectetur ut aperiam. Itaque eligendi natus aperiam? Excepturi repellendus consequatur quibusdam optio expedita praesentium est adipisci dolorem ut eius!

View File

@@ -1,21 +0,0 @@
---
title: "How to build an Application with modern Technology"
meta_title: ""
description: "Black Lines brand identity, by & Smith Black Lines wants it to be as easy to serve a Negroni as it is a pint of lager."
date: 2022-04-04T05:00:00Z
image: "/images/blog/blog-post-03.jpg"
author: "John Doe"
draft: false
---
Nemo vel ad consectetur namut rutrum ex, venenatis sollicitudin urna. Aliquam erat volutpat. Integer eu ipsum sem. Ut bibendum lacus vestibulum maximus suscipit. Quisque vitae nibh iaculis neque blandit euismod.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo vel ad consectetur ut aperiam. Itaque eligendi natus aperiam? Excepturi repellendus consequatur quibusdam optio expedita praesentium est adipisci dolorem ut eius!
## Creative Design
Nam ut rutrum ex, venenatis sollicitudin urna. Aliquam erat volutpat. Integer eu ipsum sem. Ut bibendum lacus vestibulum maximus suscipit. Quisque vitae nibh iaculis neque blandit euismod.
> Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo vel ad consectetur ut aperiam. Itaque eligendi natus aperiam? Excepturi repellendus consequatur quibusdam optio expedita praesentium est adipisci dolorem ut eius!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo vel ad consectetur ut aperiam. Itaque eligendi natus aperiam? Excepturi repellendus consequatur quibusdam optio expedita praesentium est adipisci dolorem ut eius!

View File

@@ -1,21 +0,0 @@
---
title: "How to build an Application with modern Technology"
meta_title: ""
description: "Black Lines brand identity, by & Smith Black Lines wants it to be as easy to serve a Negroni as it is a pint of lager."
date: 2022-04-04T05:00:00Z
image: "/images/blog/blog-post-02.jpg"
author: "Sam Wilson"
draft: false
---
Nemo vel ad consectetur namut rutrum ex, venenatis sollicitudin urna. Aliquam erat volutpat. Integer eu ipsum sem. Ut bibendum lacus vestibulum maximus suscipit. Quisque vitae nibh iaculis neque blandit euismod.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo vel ad consectetur ut aperiam. Itaque eligendi natus aperiam? Excepturi repellendus consequatur quibusdam optio expedita praesentium est adipisci dolorem ut eius!
## Creative Design
Nam ut rutrum ex, venenatis sollicitudin urna. Aliquam erat volutpat. Integer eu ipsum sem. Ut bibendum lacus vestibulum maximus suscipit. Quisque vitae nibh iaculis neque blandit euismod.
> Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo vel ad consectetur ut aperiam. Itaque eligendi natus aperiam? Excepturi repellendus consequatur quibusdam optio expedita praesentium est adipisci dolorem ut eius!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo vel ad consectetur ut aperiam. Itaque eligendi natus aperiam? Excepturi repellendus consequatur quibusdam optio expedita praesentium est adipisci dolorem ut eius!

View File

@@ -1,9 +0,0 @@
---
title: "Dont be shy. Say <span>Hello.</span>"
meta_title: "Contact Us"
description: "this is meta description"
layout: "contact"
draft: false
form_heading: "TELL US ABOUT YOUR PROJECT"
---

View File

@@ -1,252 +0,0 @@
---
title: "Elements"
# meta title
meta_title: ""
# meta description
description: "This is meta description"
# save as draft
draft: false
---
{{< toc >}}
Here is an example of headings. You can use this heading by the following markdown rules. For example: use `#` for heading 1 and use `######` for heading 6.
# Heading 1
## Heading 2
### Heading 3
#### Heading 4
##### Heading 5
###### Heading 6
---
### Emphasis
The emphasis, aka italics, with _asterisks_ or _underscores_.
Strong emphasis, aka bold, with **asterisks** or **underscores**.
The combined emphasis with **asterisks and _underscores_**.
Strike through uses two tildes. ~~Scratch this.~~
---
### Button
{{< button label="Button" link="/" style="solid" >}}
---
### Link
[I'm an inline-style link](https://www.google.com)
[I'm an inline-style link with title](https://www.google.com "Google's Homepage")
[I'm a relative reference to a repository file](../blob/master/LICENSE)
URLs and URLs in angle brackets will automatically get turned into links.
<http://www.example.com> or <http://www.example.com> and sometimes
example.com (but not on Github, for example).
Some text to show that the reference links can follow later.
---
### Paragraph
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam nihil enim maxime corporis cumque totam aliquid nam sint inventore optio modi neque laborum officiis necessitatibus, facilis placeat pariatur! Voluptatem, sed harum pariatur adipisci voluptates voluptatum cumque, porro sint minima similique magni perferendis fuga! Optio vel ipsum excepturi tempore reiciendis id quidem? Vel in, doloribus debitis nesciunt fugit sequi magnam accusantium modi neque quis, vitae velit, pariatur harum autem a! Velit impedit atque maiores animi possimus asperiores natus repellendus excepturi sint architecto eligendi non, omnis nihil. Facilis, doloremque illum. Fugit optio laborum minus debitis natus illo perspiciatis corporis voluptatum rerum laboriosam.
---
### Ordered List
1. List item
2. List item
3. List item
4. List item
5. List item
---
### Unordered List
- List item
- List item
- List item
- List item
- List item
---
### Notice
{{< notice "note" >}}
This is a simple note.
{{< /notice >}}
{{< notice "quote" >}}
This is a simple quote.
{{< /notice >}}
{{< notice "tip" >}}
This is a simple tip.
{{< /notice >}}
{{< notice "info" >}}
This is a simple info.
{{< /notice >}}
{{< notice "warning" >}}
This is a simple warning.
{{< /notice >}}
---
### Tab
{{< tabs >}}
{{< tab "Tab 1" >}}
#### Hey There, I am a tab
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
{{< /tab >}}
{{< tab "Tab 2" >}}
#### I wanna talk about the assassination attempt
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
{{< /tab >}}
{{< tab "Tab 3" >}}
#### We know youre dealing in stolen ore
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
{{< /tab >}}
{{< /tabs >}}
---
### Accordions
{{< accordion "Why should you need to do this?" >}}
- Lorem ipsum dolor sit amet consectetur adipisicing elit.
- Lorem ipsum dolor sit amet consectetur adipisicing elit.
- Lorem ipsum dolor sit amet consectetur
{{< /accordion >}}
{{< accordion "How can I adjust Horizontal centering" >}}
- Lorem ipsum dolor sit amet consectetur adipisicing elit.
- Lorem ipsum dolor sit amet consectetur adipisicing elit.
- Lorem ipsum dolor sit amet consectetur
{{< /accordion >}}
{{< accordion "Should you use Negative margin?" >}}
- Lorem ipsum dolor sit amet consectetur adipisicing elit.
- Lorem ipsum dolor sit amet consectetur adipisicing elit.
- Lorem ipsum dolor sit amet consectetur
{{< /accordion >}}
---
### Code and Syntax Highlighting
This is an `Inline code` sample.
```javascript
var s = "JavaScript syntax highlighting";
alert(s);
```
```python
s = "Python syntax highlighting"
print s
```
```c { linenos=true }
#include <stdio.h>
int main(void)
{
printf("hello, world\n");
return 0;
}
```
```mermaid
flowchart TD
A[Start] --> B{Is it?}
B -- Yes --> C[OK]
C --> D[Rethink]
D --> B
B -- No ----> E[End]
```
---
### Blockquote
> Did you come here for something in particular or just general Riker-bashing? And blowing into maximum warp speed, you appeared for an instant to be in two places at once.
---
### Tables
| Tables | Are | Cool |
| ------------- | :-----------: | ----: |
| col 3 is | right-aligned | $1600 |
| col 2 is | centered | $12 |
| zebra stripes | are neat | $1 |
---
### Image
{{< image src="images/og-image.png" caption="" alt="alter-text" height="" width="" position="center" command="fill" option="q100" class="img-fluid" title="image title" webp="false" >}}
---
### Gallery
{{< gallery dir="images/gallery" class="" height="400" width="400" webp="true" command="Fit" option="" zoomable="true" >}}
---
### Slider
{{< slider dir="images/gallery" class="max-w-[600px] ml-0" height="400" width="400" webp="true" command="Fit" option="" zoomable="true" >}}
---
### Youtube video
{{< youtube ResipmZmpDU >}}
---
### Custom video
{{< video src="https://www.w3schools.com/html/mov_bbb.mp4" width="100%" height="auto" autoplay="false" loop="false" muted="false" controls="true" class="rounded-lg" >}}

View File

@@ -1,33 +0,0 @@
---
title: "Privacy"
# meta title
meta_title: ""
# meta description
description: "This is meta description"
# save as draft
draft: false
---
#### Responsibility of Contributors
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Purus, donec nunc eros, ullamcorper id feugiat quisque aliquam sagittis. Sem turpis sed viverra massa gravida pharetra. Non dui dolor potenti eu dignissim fusce. Ultrices amet, in curabitur a arcu a lectus morbi id. Iaculis erat sagittis in tortor cursus. Molestie urna eu tortor, erat scelerisque eget. Nunc hendrerit sed interdum lacus. Lorem quis viverra sed
pretium, aliquam sit. Praesent elementum magna amet, tincidunt eros, nibh in leo. Malesuada purus, lacus, at aliquam suspendisse tempus. Quis tempus amet, velit nascetur sollicitudin. At sollicitudin eget amet in. Eu velit nascetur sollicitudin erhdfvssfvrgss eget viverra nec elementum. Lacus, facilisis tristique lectus in.
#### Gathering of Personal Information
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Purus, donec nunc eros, ullamcorper id feugiat quisque aliquam sagittis. Sem turpis sed viverra massa gravida pharetra. Non dui dolor potenti eu dignissim fusce. Ultrices amet, in curabitur a arcu a lectus morbi id. Iaculis erat sagittis in tortor cursus. Molestie urna eu tortor, erat scelerisque eget. Nunc hendrerit sed interdum lacus. Lorem quis viverra sed
#### Protection of Personal- Information
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Purus, donec nunc eros, ullamcorper id feugiat quisque aliquam sagittis. Sem turpis sed viverra massa gravida pharetra. Non dui dolor potenti eu dignissim fusce. Ultrices amet, in curabitur a arcu a lectus morbi id. Iaculis erat sagittis in tortor cursus.
Molestie urna eu tortor, erat scelerisque eget. Nunc hendrerit sed interdum lacus. Lorem quis viverra sed
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Purus, donec nunc eros, ullamcorper id feugiat
#### Privacy Policy Changes
1. Sll the Themefisher items are designed to be with the latest , We check all
2. comments that threaten or harm the reputation of any person or organization
3. personal information including, but limited to, email addresses, telephone numbers
4. Any Update come in The technology Customer will get automatic Notification.

View File

@@ -1,17 +0,0 @@
---
enable: true
title: "LET'S WORK TOGETHER"
image: "/images/cta-background.jpg"
button_primary:
enable: true
label: "Not Convinced"
link: "/portfolio"
button_secondary:
enable: true
label: "Submit Query"
link: "/contact"
# don't create a separate page
build:
render: "never"
---

View File

@@ -1,19 +0,0 @@
---
enable: true
title: "Who trust our judgment"
client_logos:
- "/images/clients/client-logo-one.png"
- "/images/clients/client-logo-two.png"
- "/images/clients/client-logo-three.png"
- "/images/clients/client-logo-four.png"
- "/images/clients/client-logo-five.png"
- "/images/clients/client-logo-six.png"
- "/images/clients/client-logo-seven.png"
- "/images/clients/client-logo-eight.png"
- "/images/clients/client-logo-nine.png"
- "/images/clients/client-logo-ten.png"
# don't create a separate page
build:
render: "never"
---

View File

@@ -1,99 +0,0 @@
---
enable: true
title: "Team that makes the difference"
members:
- image: /images/team/team-member-one.jpg
name: PABLO ESCOBAR
designation: Creative Director
social:
- name: medium
icon: fa-brands fa-medium
link: https://medium.com
- name: x
icon: fa-brands fa-x-twitter
link: https://x.com
- name: linkedin
icon: fa-brands fa-linkedin
link: https://linkedin.com
- image: /images/team/team-member-two.jpg
name: MONTINO RIAU
designation: Product Manager
social:
- name: medium
icon: fa-brands fa-medium
link: https://medium.com
- name: x
icon: fa-brands fa-x-twitter
link: https://x.com
- name: linkedin
icon: fa-brands fa-linkedin
link: https://linkedin.com
- image: /images/team/team-member-three.jpg
name: ALEX NAASRI
designation: Chief Design Officer
social:
- name: medium
icon: fa-brands fa-medium
link: https://medium.com
- name: x
icon: fa-brands fa-x-twitter
link: https://x.com
- name: linkedin
icon: fa-brands fa-linkedin
link: https://linkedin.com
- image: /images/team/team-member-four.jpg
name: HONGMAN CHIOA
designation: UX Researcher
social:
- name: medium
icon: fa-brands fa-medium
link: https://medium.com
- name: x
icon: fa-brands fa-x-twitter
link: https://x.com
- name: linkedin
icon: fa-brands fa-linkedin
link: https://linkedin.com
- image: /images/team/team-member-five.jpg
name: SANTIO ANDRESS
designation: Content Researcher
social:
- name: medium
icon: fa-brands fa-medium
link: https://medium.com
- name: x
icon: fa-brands fa-x-twitter
link: https://x.com
- name: linkedin
icon: fa-brands fa-linkedin
link: https://linkedin.com
- image: /images/team/team-member-six.jpg
name: RAMESH PAUL
designation: Creative Designer
social:
- name: medium
icon: fa-brands fa-medium
link: https://medium.com
- name: x
icon: fa-brands fa-x-twitter
link: https://x.com
- name: linkedin
icon: fa-brands fa-linkedin
link: https://linkedin.com
# don't create a separate page
build:
render: "never"
---

Some files were not shown because too many files have changed in this diff Show More