initial commit

This commit is contained in:
Juthatip McDevitt 2024-04-09 08:36:18 -05:00
commit 34ceee0c76
30 changed files with 6730 additions and 0 deletions

View file

@ -0,0 +1,21 @@
module.exports = {
root: true,
env: { browser: true, es2020: true },
extends: [
'eslint:recommended',
'plugin:react/recommended',
'plugin:react/jsx-runtime',
'plugin:react-hooks/recommended',
],
ignorePatterns: ['dist', '.eslintrc.cjs'],
parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
settings: { react: { version: '18.2' } },
plugins: ['react-refresh'],
rules: {
'react/jsx-no-target-blank': 'off',
'react-refresh/only-export-components': [
'warn',
{ allowConstantExport: true },
],
},
}

24
awwwards_ss1/.gitignore vendored Normal file
View file

@ -0,0 +1,24 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
dist
dist-ssr
*.local
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

5
awwwards_ss1/README.md Normal file
View file

@ -0,0 +1,5 @@
# In this project, we recreate the design of OCHI design (https://ochi.design/) by using Vite + React.
#### Start project --> npm run dev
#
P.S. This is a non-responsive website

16
awwwards_ss1/index.html Normal file
View file

@ -0,0 +1,16 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Epilogue:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Awwwards | Ochi Design</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>

5403
awwwards_ss1/package-lock.json generated Normal file

File diff suppressed because it is too large Load diff

33
awwwards_ss1/package.json Normal file
View file

@ -0,0 +1,33 @@
{
"name": "awwwards_ss1",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
"preview": "vite preview"
},
"dependencies": {
"framer-motion": "^11.0.24",
"gsap": "^3.12.5",
"locomotive-scroll": "^5.0.0-beta.11",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-icons": "^5.0.1"
},
"devDependencies": {
"@types/react": "^18.2.66",
"@types/react-dom": "^18.2.22",
"@vitejs/plugin-react": "^4.2.1",
"autoprefixer": "^10.4.19",
"eslint": "^8.57.0",
"eslint-plugin-react": "^7.34.1",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.6",
"postcss": "^8.4.38",
"tailwindcss": "^3.4.3",
"vite": "^5.2.0"
}
}

View file

@ -0,0 +1,6 @@
export default {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}

View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

After

Width:  |  Height:  |  Size: 1.5 KiB

32
awwwards_ss1/src/App.jsx Normal file
View file

@ -0,0 +1,32 @@
import Hero from "./components/Hero"
import TextAnimation from "./components/TextAnimation"
import Navbar from "./components/Navbar"
import About from "./components/About"
import Eyes from "./components/Eyes"
import FeaturedProjects from "./components/FeaturedProjects"
import Footer from "./components/Footer"
import Ready from "./components/Ready"
import LocomotiveScroll from 'locomotive-scroll';
import ScrollDown from "./components/ScrollDown"
const App = () => {
const locomotiveScroll = new LocomotiveScroll();
return (
<div className="w-full h-screen bg-[#F1F1F1] text-[#212121]">
<Navbar/>
<Hero/>
<ScrollDown/>
<TextAnimation/>
<About/>
<Eyes/>
<FeaturedProjects/>
<Ready/>
<Footer/>
</div>
)
}
export default App

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 108 KiB

View file

@ -0,0 +1,51 @@
import imgModel from "../assets/model.jpg"
const About = () => {
return (
<div data-scroll data-scroll-speed="-0.15" className='about-text w-full pt-20 pb-20 bg-[#CDEA68] rounded-t-3xl'>
<div className="max-w-[1600px]">
<h1 className="text-[3.2vw] leading-[4vw] tracking-tight px-16">Ochi is a strategic partner for fast-growing tech businesses that need to raise funds, sell products,
explain complex ideas, and hire great people. </h1>
</div>
<div className="border-t-[1px] border-[#98AC52] mt-10"></div>
<div className="px-16 mt-5 grid grid-cols-2 gap-3">
<div className="text-[1vw]">What you can expect:</div>
<div className="grid grid-cols-2">
<div className="text-[1vw] pr-10">
<p className=" mb-5">We create tailored presentations to help you persuade your colleagues, clients, or investors.
Whether its live or digital, delivered for one or a hundred people. </p> <br />
<p>We believe the mix of strategy and design (with a bit of coffee) is what makes your message clear, convincing, and captivating.</p>
</div>
<div className="flex flex-col justify-center text-[1vw] mx-40 -mb-20">
<p className="mb-4">S:</p>
<p>Instagram </p>
<p>Behance </p>
<p>Facebook </p>
<p>Linkedin </p>
</div>
</div>
</div>
<div className="border-t-[1px] border-[#98AC52] mt-40"></div>
<div className="flex px-16 mt-5">
<div className=" w-1/2">
<p className="text-7xl text-[#212121] mb-8">Our approach:</p>
<button className="btn flex justify-center items-center gap-8">
<p className="text-[19px] uppercase">Read More</p>
<span className="w-3 h-3 bg-white rounded-full"></span>
</button>
</div>
<div className="w-1/2 h-[70vh]"><img src={imgModel} alt="" className="rounded-xl h-full "/></div>
</div>
</div>
)
}
export default About

View file

@ -0,0 +1,45 @@
import { useState, useEffect} from "react"
const Eyes = () => {
const [rotate, setRotate] = useState(0);
useEffect(() => {
window.addEventListener("mousemove", (e) => {
const mouseMoveX = e.clientX
const mouseMoveY = e.clientY
const deltaX = mouseMoveX - window.innerWidth/2;
const deltaY = mouseMoveY - window.innerHeight/2;
const angle = Math.atan2(deltaY, deltaX) * (180/Math.PI)
setRotate(angle-180)
})
})
return (
<div className="w-full h-screen overflow-hidden">
<div data-scroll data-scroll-speed="-0.8" className="w-full h-full relative bg-center bg-cover bg-[url('https://ochi.design/wp-content/uploads/2022/05/Top-Viewbbcbv-1-scaled.jpg')]">
<div className="flex gap-10 absolute top-1/2 left-1/2 -translate-x-[50%] -translate-y-[80%]">
<div className="flex items-center justify-center w-[15vw] h-[15vw] bg-[#F4F4F4] rounded-full">
<div className="flex items-center justify-center relative w-3/5 h-3/5 bg-[#212121] rounded-full">
<p className="text-white uppercase text-3xl">play</p>
<div style={{transform: `translate(-50%, -50%) rotate(${rotate}deg)`}} className="line absolute top-1/2 left-1/2 -translate-x-[50%] -translate-y-[50%] w-full h-[25px]">
<div className="w-[25px] h-[25px] bg-[#F4F4F4] rounded-full"></div>
</div>
</div>
</div>
<div className="flex items-center justify-center w-[15vw] h-[15vw] bg-[#F4F4F4] rounded-full">
<div className="flex items-center justify-center relative w-3/5 h-3/5 bg-[#212121] rounded-full">
<p className="text-white uppercase text-3xl">play</p>
<div style={{transform: `translate(-50%, -50%) rotate(${rotate}deg)`}} className="line absolute top-1/2 left-1/2 -translate-x-[50%] -translate-y-[50%] w-full h-[25px]">
<div className="w-[25px] h-[25px] bg-[#F4F4F4] rounded-full"></div>
</div>
</div>
</div>
</div>
</div>
</div>
)
}
export default Eyes

View file

@ -0,0 +1,264 @@
import { GoDotFill } from "react-icons/go";
import { motion, useAnimation } from "framer-motion"
import {Power4} from "gsap/all"
const FeaturedProjects = () => {
const featureTop = [useAnimation(), useAnimation()]
const handleHoverStart = (index) => {
featureTop[index].start({y: "0"})
}
const handleHoverEnd = (index) => {
featureTop[index].start({y: "100%"})
}
const featurebottom = [useAnimation(), useAnimation()]
const handleHoverTextStart = (index) => {
featurebottom[index].start({y: "0"})
}
const handleHoverTextEnd = (index) => {
featurebottom[index].start({y: "100%"})
}
return (
<div data-scroll data-scroll-speed="-0.1" className="w-full pt-20 pb-20 bg-[#f1f1f1] rounded-t-3xl">
<div className="px-16">
<h1 className="pt-10 text-7xl text-[#212121] tracking-tight">Feature projects</h1>
</div>
<div className="border-t-[1px] border-[#b1b1b1] mt-16"></div>
<div className="px-16">
<div className="w-full flex gap-5 mt-20">
<div className="flex-col w-1/2">
<p className="flex items-center gap-2 mb-5 uppercase text-xl"><GoDotFill className="text-2xl"/>fyde</p>
<motion.div onHoverStart={() => handleHoverStart(0)} onHoverEnd={() => handleHoverEnd(0)} className=" h-[80vh] relative">
<h1 className="feature-text overflow-hidden absolute flex z-10 text-[10rem] uppercase font-bold text-[#CDEA68] tracking-tight right-0 translate-x-1/2 -translate-y-1/2 top-1/2">
{"fyde".split('').map((item, index) => <motion.span initial={{y: "100%"}} animate={featureTop[0]} transition={{ease: Power4.ease, delay: index*0.05}} key={item} className="inline-block">{item}</motion.span>)}
</h1>
<div className="w-full h-full rounded-xl overflow-hidden">
<img src={"https://ochi.design/wp-content/uploads/2023/10/Fyde_Illustration_Crypto_2-663x551.png"} alt="" className="w-full h-full"/>
</div>
</motion.div>
<div className="flex gap-2 mt-5 items-center text-center">
<span className="border border-[#212121] px-4 py-1 text-xl uppercase tracking-tight rounded-full">audit</span>
<span className="border border-[#212121] px-4 py-1 text-xl uppercase tracking-tight rounded-full">copywriting</span>
<span className="border border-[#212121] px-4 py-1 text-xl uppercase tracking-tight rounded-full">sales desk</span>
<span className="border border-[#212121] px-4 py-1 text-xl uppercase tracking-tight rounded-full">slides design</span>
</div>
</div>
<div className="flex-col w-1/2">
<p className="flex items-center gap-2 mb-5 uppercase text-xl"><GoDotFill className="text-2xl"/>vise</p>
<motion.div onHoverStart={() => handleHoverStart(1)} onHoverEnd={() => handleHoverEnd(1)} className="h-[80vh] relative">
<h1 className="feature-text absolute flex overflow-hidden z-10 text-[10rem] uppercase font-bold text-[#CDEA68] tracking-tight right-full translate-x-1/2 -translate-y-1/2 top-1/2">
{"vise".split('').map((item, index) => <motion.span initial={{y: "100%"}} animate={featureTop[1]} transition={{ease: Power4.ease, delay: index*0.05}} key={item} className="inline-block">{item}</motion.span>)}
</h1>
<div className="w-full h-full rounded-xl overflow-hidden">
<img src={"https://ochi.design/wp-content/uploads/2022/09/Vise_front2-663x551.jpg"} alt="" className="w-full h-full"/>
</div>
</motion.div>
<div className="flex gap-2 mt-5 items-center text-center">
<span className="border border-[#212121] px-4 py-1 text-xl uppercase tracking-tight rounded-full">agency</span>
<span className="border border-[#212121] px-4 py-1 text-xl uppercase tracking-tight rounded-full">company presentations</span>
</div>
</div>
</div>
</div>
<div className="px-16">
<div className="w-full flex gap-5 mt-20">
<div className="flex-col w-1/2">
<p className="flex items-center gap-2 mb-5 uppercase text-xl"><GoDotFill className="text-2xl"/>trawa</p>
<motion.div onHoverStart={() => handleHoverTextStart(0)} onHoverEnd={() => handleHoverTextEnd(0)} className=" h-[80vh] relative">
<h1 className="feature-text overflow-hidden absolute flex z-10 text-[10rem] uppercase font-bold text-[#CDEA68] tracking-tight right-0 translate-x-1/2 -translate-y-1/2 top-1/2">
{"trawa".split('').map((item, index) => <motion.span initial={{y: "100%"}} animate={featurebottom[0]} transition={{ease: Power4.ease, delay: index*0.05}} key={item} className="inline-block">{item}</motion.span>)}
</h1>
<div className="w-full h-full rounded-xl overflow-hidden">
<img src={"https://ochi.design/wp-content/uploads/2023/08/Frame-3875-663x551.jpg"} alt="" className="w-full h-full"/>
</div>
</motion.div>
<div className="flex gap-2 mt-16 items-center text-center">
<span className="border border-[#212121] px-4 py-1 text-xl uppercase tracking-tight rounded-full">brand identity</span>
<span className="border border-[#212121] px-4 py-1 text-xl uppercase tracking-tight rounded-full">design research</span>
<span className="border border-[#212121] px-4 py-1 text-xl uppercase tracking-tight rounded-full">investor desk</span>
</div>
</div>
<div className="flex-col w-1/2">
<p className="flex items-center gap-2 mb-5 uppercase text-xl"><GoDotFill className="text-2xl"/>Premium Blend</p>
<motion.div onHoverStart={() => handleHoverTextStart(1)} onHoverEnd={() => handleHoverTextEnd(1)} className="h-[80vh] relative">
<h1 className="feature-text absolute flex overflow-hidden z-10 text-[10rem] uppercase font-bold text-[#CDEA68] tracking-tight right-full translate-x-1/2 -translate-y-1/2 top-1/2">
{"Premium Blend".split('').map((item, index) => <motion.span initial={{y: "100%"}} animate={featurebottom[1]} transition={{ease: Power4.ease, delay: index*0.01}} key={item} className="inline-block">{item}</motion.span>)}
</h1>
<div className="w-full h-full rounded-xl overflow-hidden">
<img src={"https://ochi.design/wp-content/uploads/2022/12/PB-Front-4-663x551.png"} alt="" className="w-full h-full"/>
</div>
</motion.div>
<div className="flex gap-2 mt-16 items-center text-center">
<span className="border border-[#212121] px-4 py-1 text-xl uppercase tracking-tight rounded-full">brand template</span>
</div>
</div>
</div>
</div>
<div className="flex justify-center items-center text-center px-16 mt-40">
<button className="btn flex justify-center items-center gap-8">
<p className="text-[19px] uppercase">view all case studies</p>
<span className="w-3 h-3 bg-white rounded-full"></span>
</button>
</div>
{/*===== review section =====*/}
<div className="about-text">
<div className="px-16">
<h1 className="pt-10 text-7xl text-[#212121] tracking-tight">Clients reviews</h1>
</div>
<div className="border-t-[1px] border-[#b1b1b1] mt-16 "></div>
<div className="px-16 mt-5 grid grid-cols-2 gap-3 text-xl">
<div className="grid grid-cols-2">
<p className="">Karman Ventures </p>
<div className="">
<p className="mb-20">Services:</p>
<button className="btn-review uppercase mb-3 ">investor desk </button> <br />
<button className="btn-review uppercase mb-3">sales desk </button>
</div>
</div>
<div className="flex justify-between">
<div>
<p className="mb-20">William Barnes</p>
<img src={"https://ochi.design/wp-content/uploads/2023/02/William-Barnes-1-300x300.png"} alt="" className="w-[130px] rounded-xl"/>
<p className="mt-10 w-2/3">They were transparent about the time and the stages of the project. The end product is high quality,
and I feel confident about how they were handholding the client through the process.
I feel like I can introduce them to someone who needs to put a sales deck together from scratch, and they would be able to handhold the client experience
from 0 to 100 very effectively from story to design. 5/5</p>
</div>
<p className="text-xl text-gray-400 uppercase">read</p>
</div>
</div>
<div className="border-t-[1px] border-[#b1b1b1] mt-16 "></div>
<div className="px-16 mt-5 grid grid-cols-2 gap-3 text-xl">
<div>
<p>Planetly</p>
</div>
<div className="flex justify-between">
<p>Nina Walloch</p>
<p className="uppercase">read</p>
</div>
</div>
<div className="border-t-[1px] border-[#b1b1b1] mt-5 "></div>
<div className="px-16 mt-5 grid grid-cols-2 gap-3 text-xl">
<div>
<p>Workiz Easy </p>
</div>
<div className="flex justify-between">
<p>Tomer Levy</p>
<p className="uppercase">read</p>
</div>
</div>
<div className="border-t-[1px] border-[#b1b1b1] mt-5 "></div>
<div className="px-16 mt-5 grid grid-cols-2 gap-3 text-xl">
<div>
<p>Premium Blend </p>
</div>
<div className="flex justify-between">
<p>Ellen Kim</p>
<p className="uppercase">read</p>
</div>
</div>
<div className="border-t-[1px] border-[#b1b1b1] mt-5 "></div>
<div className="px-16 mt-5 grid grid-cols-2 gap-3 text-xl">
<div>
<p>Hypercare Systems </p>
</div>
<div className="flex justify-between">
<p>Brendan Goss</p>
<p className="uppercase">read</p>
</div>
</div>
<div className="border-t-[1px] border-[#b1b1b1] mt-5 "></div>
<div className="px-16 mt-5 grid grid-cols-2 gap-3 text-xl">
<div>
<p>Officevibe </p>
</div>
<div className="flex justify-between">
<p>Raff Labrie</p>
<p className="uppercase">read</p>
</div>
</div>
<div className="border-t-[1px] border-[#b1b1b1] mt-5 "></div>
<div className="px-16 mt-5 grid grid-cols-2 gap-3 text-xl">
<div>
<p>Orderlion </p>
</div>
<div className="flex justify-between">
<p>Stefan Strohmer</p>
<p className="uppercase">read</p>
</div>
</div>
<div className="border-t-[1px] border-[#b1b1b1] mt-5 "></div>
<div className="px-16 mt-5 grid grid-cols-2 gap-3 text-xl">
<div>
<p>Black Book </p>
</div>
<div className="flex justify-between">
<p>Jaci Smith</p>
<p className="uppercase">read</p>
</div>
</div>
<div className="border-t-[1px] border-[#b1b1b1] mt-5 "></div>
<div className="px-16 mt-5 grid grid-cols-2 gap-3 text-xl">
<div>
<p>Trawa Energy </p>
</div>
<div className="flex justify-between">
<p>David Budde</p>
<p className="uppercase">read</p>
</div>
</div>
<div className="border-t-[1px] border-[#b1b1b1] mt-5 "></div>
</div>
{/*===== cardHero section =====*/}
<div className="grid grid-cols-2 gap-5 px-16 pt-40 pb-40 bg-[#f1f1f1]">
<div className="w-full h-[55vh] bg-[#004D43] rounded-xl flex justify-center items-center relative">
<svg width="150" height="80" viewBox="0 0 72 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.8393 10.2032C4.22951 10.3257 -0.0459221 14.7356 0.000372391 20.2752C0.0412204 25.3548 4.57808 30.3608 10.6862 29.9226C15.5145 29.5768 19.9015 25.4119 19.8525 20.0057C19.8035 14.5995 15.1904 10.0916 9.8393 10.2032ZM9.89649 25.7005C6.87101 25.7005 4.39834 23.1144 4.40924 19.9839C4.39525 19.2507 4.52792 18.522 4.79947 17.8407C5.07102 17.1594 5.47597 16.5392 5.99056 16.0164C6.50515 15.4937 7.11902 15.0789 7.79613 14.7966C8.47324 14.5142 9.19995 14.3698 9.93362 14.372C10.6673 14.3742 11.3931 14.5228 12.0686 14.8092C12.744 15.0956 13.3554 15.514 13.8668 16.0398C14.3783 16.5656 14.7796 17.1882 15.0471 17.8711C15.3146 18.554 15.4429 19.2834 15.4246 20.0166C15.4409 23.1008 12.9111 25.7059 9.88832 25.7005H9.89649Z" fill="#CDEA68"></path>
<path d="M62.8086 29.4855H67.1222V10.6372H62.8086V29.4855Z" fill="#CDEA68"></path>
<path d="M67.6816 0.172852V6.13439H71.5322C71.6738 6.13439 71.8046 6.13439 72.0006 6.11534V0.172852H67.6816Z" fill="#CDEA68"></path>
<path d="M31.5648 25.7016C28.5393 25.7016 26.0667 23.1156 26.0776 19.9851C26.0936 18.5291 26.6764 17.1366 27.7023 16.1029C28.7282 15.0692 30.1166 14.4757 31.573 14.4482C32.4198 14.4541 33.2537 14.6557 34.0095 15.0373C34.7654 15.4188 35.4227 15.97 35.9301 16.6477L40.0667 15.0144C38.2884 12.0853 35.0669 10.1145 31.4995 10.1989C25.8897 10.3214 21.6142 14.7313 21.6605 20.2709C21.7014 25.3505 26.2382 30.3565 32.3464 29.9183C33.9908 29.7803 35.5761 29.2408 36.9631 28.347C38.3501 27.4532 39.4963 26.2326 40.3009 24.7924L36.2542 22.9931C35.7705 23.8086 35.0851 24.486 34.2638 24.9604C33.4426 25.4347 32.5132 25.69 31.5648 25.7016Z" fill="#CDEA68"></path>
<path d="M52.4097 10.1387C51.2512 10.1119 50.1066 10.3947 49.0941 10.958C48.0816 11.5212 47.2379 12.3445 46.6501 13.3427V0.172852H42.293V29.4688H46.6501C46.6501 29.1721 46.6501 18.7816 46.6501 18.7816C46.6501 15.6946 47.8619 13.4352 50.8084 13.4352C54.6046 13.4352 54.6209 17.4178 54.6209 19.6962C54.6209 22.9165 54.6209 25.5189 54.6209 28.7393V29.4987H59.0271C59.0271 29.3708 59.0488 29.2728 59.0488 29.1721C59.0488 25.5108 59.0951 21.8522 59.0325 18.1909C58.9916 15.6538 58.5015 10.1387 52.4097 10.1387Z" fill="#CDEA68"></path>
</svg>
<button className="absolute left-10 bottom-10 py-1 px-4 border border-[#CDEA68] rounded-full text-[#CDEA68] text-xl">&copy;2019-2022</button>
</div>
<div className="grid grid-cols-2 gap-5">
<div className="w-full h-[55vh] bg-[#212121] rounded-xl flex justify-center items-center relative">
<img src={"https://ochi.design/wp-content/uploads/2022/04/logo002.svg"} alt="" />
<button className="btn-1 absolute left-10 bottom-10 py-1 px-4 border border-[#f1f1f1] rounded-full text-[#f1f1f1] text-xl uppercase">rating 5.0 0n clutch</button>
</div>
<div className="w-full h-[55vh] bg-[#212121] rounded-xl flex justify-center items-center relative">
<img src={"https://ochi.design/wp-content/uploads/2022/04/logo003.png"} alt="" className="w-[100px] h-[100px]"/>
<button className="btn-1 absolute left-10 bottom-10 py-1 px-4 border border-[#f1f1f1] rounded-full text-[#f1f1f1] text-xl uppercase tracking-tighter">business bootcamp alumni</button>
</div>
</div>
</div>
</div>
)
}
export default FeaturedProjects

View file

@ -0,0 +1,70 @@
const Footer = () => {
return (
<div data-scroll data-scroll-speed="-0.2" className="w-full h-full flex bg-[#F1F1F1] rounded-t-3xl">
<div className="px-16 w-1/2 h-full flex flex-col justify-between gap-3 text-xl">
<div className="mt-20 uppercase font-bold tracking-tight">
<p className="feature-text text-[170px] leading-none">eye-</p>
<p className="feature-text text-[170px] leading-none -mt-8">opening</p>
</div>
<div className="mb-10">
<svg width="72" height="30" viewBox="0 0 72 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.8393 10.2032C4.22951 10.3257 -0.0459221 14.7356 0.000372391 20.2752C0.0412204 25.3548 4.57808 30.3608 10.6862 29.9226C15.5145 29.5768 19.9015 25.4119 19.8525 20.0057C19.8035 14.5995 15.1904 10.0916 9.8393 10.2032ZM9.89649 25.7005C6.87101 25.7005 4.39834 23.1144 4.40924 19.9839C4.39525 19.2507 4.52792 18.522 4.79947 17.8407C5.07102 17.1594 5.47597 16.5392 5.99056 16.0164C6.50515 15.4937 7.11902 15.0789 7.79613 14.7966C8.47324 14.5142 9.19995 14.3698 9.93362 14.372C10.6673 14.3742 11.3931 14.5228 12.0686 14.8092C12.744 15.0956 13.3554 15.514 13.8668 16.0398C14.3783 16.5656 14.7796 17.1882 15.0471 17.8711C15.3146 18.554 15.4429 19.2834 15.4246 20.0166C15.4409 23.1008 12.9111 25.7059 9.88832 25.7005H9.89649Z" fill="currentColor"></path>
<path d="M62.8086 29.4855H67.1222V10.6372H62.8086V29.4855Z" fill="currentColor"></path>
<path d="M67.6816 0.172852V6.13439H71.5322C71.6738 6.13439 71.8046 6.13439 72.0006 6.11534V0.172852H67.6816Z" fill="currentColor"></path>
<path d="M31.5648 25.7016C28.5393 25.7016 26.0667 23.1156 26.0776 19.9851C26.0936 18.5291 26.6764 17.1366 27.7023 16.1029C28.7282 15.0692 30.1166 14.4757 31.573 14.4482C32.4198 14.4541 33.2537 14.6557 34.0095 15.0373C34.7654 15.4188 35.4227 15.97 35.9301 16.6477L40.0667 15.0144C38.2884 12.0853 35.0669 10.1145 31.4995 10.1989C25.8897 10.3214 21.6142 14.7313 21.6605 20.2709C21.7014 25.3505 26.2382 30.3565 32.3464 29.9183C33.9908 29.7803 35.5761 29.2408 36.9631 28.347C38.3501 27.4532 39.4963 26.2326 40.3009 24.7924L36.2542 22.9931C35.7705 23.8086 35.0851 24.486 34.2638 24.9604C33.4426 25.4347 32.5132 25.69 31.5648 25.7016Z" fill="currentColor"></path>
<path d="M52.4097 10.1387C51.2512 10.1119 50.1066 10.3947 49.0941 10.958C48.0816 11.5212 47.2379 12.3445 46.6501 13.3427V0.172852H42.293V29.4688H46.6501C46.6501 29.1721 46.6501 18.7816 46.6501 18.7816C46.6501 15.6946 47.8619 13.4352 50.8084 13.4352C54.6046 13.4352 54.6209 17.4178 54.6209 19.6962C54.6209 22.9165 54.6209 25.5189 54.6209 28.7393V29.4987H59.0271C59.0271 29.3708 59.0488 29.2728 59.0488 29.1721C59.0488 25.5108 59.0951 21.8522 59.0325 18.1909C58.9916 15.6538 58.5015 10.1387 52.4097 10.1387Z" fill="currentColor"></path>
</svg>
</div>
</div>
<div className="w-1/2">
<div className="mt-20 uppercase font-bold tracking-tight">
<p className="feature-text text-[170px] leading-none">Presentations</p>
</div>
<div className="text-xl mt-10">
<p className="mb-5">S:</p>
<p>Instagram</p>
<p>Behance</p>
<p>Facebook</p>
<p>Linkedin</p>
</div>
<div className="w-5/6 flex justify-between">
<div className="text-xl mt-10">
<p className="mb-5">L:</p>
<p>202-1965 W 4th Ave</p>
<p>Vancouver, Canada</p> <br />
<p>30 Chukarina St</p>
<p>Lviv, Ukraine</p>
</div>
<div className="text-xl mt-10">
<p className="mb-5">M:</p>
<p>Home</p>
<p>Services</p>
<p>Our work</p>
<p>About us</p>
<p>insights</p>
<p>contact us</p>
</div>
</div>
<div className="text-xl mt-10">
<p className="mb-5">E:</p>
<p>hello@ochi.design</p>
</div>
<div className="flex justify-between text-[#cecece]">
<div className="text-xl mt-14">
<p>&copy; ochi design 2024. Legal Terms</p>
</div>
<div className="text-xl mt-14 pr-16">
<p className="mb-5">Website by Obys</p>
</div>
</div>
</div>
</div>
)
}
export default Footer

View file

@ -0,0 +1,44 @@
import { MdArrowOutward } from "react-icons/md";
import {motion} from "framer-motion"
const boxSlide = {
initial:{width: 0},
animate:{width: "150px", transition:{ease: [0.76, 0, 0.24, 1], duration: 1}},
};
const Hero = () => {
return (
<div data-scroll data-scroll-speed="-0.3" className="w-full h-[90vh] bg-[#F1F1F1] pt-1">
<div className="home-text mt-48 pl-16">
<div className="flex justify-between">
<h1 className="uppercase text-[150px] tracking-tight font-bold leading-none">We create</h1>
<div className="border flex-col bg-[#E73C37] text-center text-[#f1f1f1] p-4">
<p className="text-xl font-semibold mb-4">W.</p>
<p className="home-text-2 [writing-mode:sideways-lr] text-sm">Site of the Day</p>
</div>
</div>
<div className="flex gap-2 -mt-12 items-center">
<motion.p className="bg-[#B5D252] w-[150px] h-[108px] rounded-md -mt-4" variants={boxSlide} initial="initial" animate="animate"></motion.p>
<h1 className="uppercase text-[150px] tracking-tight font-bold leading-none">eye-opening</h1>
</div>
<h1 className="uppercase text-[150px] tracking-tight font-bold leading-none -mt-6">presentations</h1>
</div>
<div className="border-t-[1px] mt-36 border-[#b1b1b1]">
<div className="flex justify-between px-16 mt-5 text-[21px]">
<p>For public and private companies</p>
<p>From the first pitch to IPO</p>
<div className="flex gap-2 items-center cursor-pointer">
<p className="uppercase border border-[#202020] py-1 px-4 rounded-full hover:bg-[#202020] hover:text-[#dedede] transition duration-300 ease-in-out">start the project</p>
<span className="p-2 border border-[#202020] rounded-full hover:bg-[#202020] hover:text-[#dedede] transition duration-300 ease-in-out"><MdArrowOutward className="text-xl"/></span>
</div>
</div>
</div>
</div>
)
}
export default Hero

View file

@ -0,0 +1,26 @@
const Navbar = () => {
return (
<div className="nav-text w-full px-16 py-6 flex justify-between items-center fixed z-[999] backdrop-blur-sm">
<div>
<svg width="72" height="30" viewBox="0 0 72 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.8393 10.2032C4.22951 10.3257 -0.0459221 14.7356 0.000372391 20.2752C0.0412204 25.3548 4.57808 30.3608 10.6862 29.9226C15.5145 29.5768 19.9015 25.4119 19.8525 20.0057C19.8035 14.5995 15.1904 10.0916 9.8393 10.2032ZM9.89649 25.7005C6.87101 25.7005 4.39834 23.1144 4.40924 19.9839C4.39525 19.2507 4.52792 18.522 4.79947 17.8407C5.07102 17.1594 5.47597 16.5392 5.99056 16.0164C6.50515 15.4937 7.11902 15.0789 7.79613 14.7966C8.47324 14.5142 9.19995 14.3698 9.93362 14.372C10.6673 14.3742 11.3931 14.5228 12.0686 14.8092C12.744 15.0956 13.3554 15.514 13.8668 16.0398C14.3783 16.5656 14.7796 17.1882 15.0471 17.8711C15.3146 18.554 15.4429 19.2834 15.4246 20.0166C15.4409 23.1008 12.9111 25.7059 9.88832 25.7005H9.89649Z" fill="currentColor"></path>
<path d="M62.8086 29.4855H67.1222V10.6372H62.8086V29.4855Z" fill="currentColor"></path>
<path d="M67.6816 0.172852V6.13439H71.5322C71.6738 6.13439 71.8046 6.13439 72.0006 6.11534V0.172852H67.6816Z" fill="currentColor"></path>
<path d="M31.5648 25.7016C28.5393 25.7016 26.0667 23.1156 26.0776 19.9851C26.0936 18.5291 26.6764 17.1366 27.7023 16.1029C28.7282 15.0692 30.1166 14.4757 31.573 14.4482C32.4198 14.4541 33.2537 14.6557 34.0095 15.0373C34.7654 15.4188 35.4227 15.97 35.9301 16.6477L40.0667 15.0144C38.2884 12.0853 35.0669 10.1145 31.4995 10.1989C25.8897 10.3214 21.6142 14.7313 21.6605 20.2709C21.7014 25.3505 26.2382 30.3565 32.3464 29.9183C33.9908 29.7803 35.5761 29.2408 36.9631 28.347C38.3501 27.4532 39.4963 26.2326 40.3009 24.7924L36.2542 22.9931C35.7705 23.8086 35.0851 24.486 34.2638 24.9604C33.4426 25.4347 32.5132 25.69 31.5648 25.7016Z" fill="currentColor"></path>
<path d="M52.4097 10.1387C51.2512 10.1119 50.1066 10.3947 49.0941 10.958C48.0816 11.5212 47.2379 12.3445 46.6501 13.3427V0.172852H42.293V29.4688H46.6501C46.6501 29.1721 46.6501 18.7816 46.6501 18.7816C46.6501 15.6946 47.8619 13.4352 50.8084 13.4352C54.6046 13.4352 54.6209 17.4178 54.6209 19.6962C54.6209 22.9165 54.6209 25.5189 54.6209 28.7393V29.4987H59.0271C59.0271 29.3708 59.0488 29.2728 59.0488 29.1721C59.0488 25.5108 59.0951 21.8522 59.0325 18.1909C58.9916 15.6538 58.5015 10.1387 52.4097 10.1387Z" fill="currentColor"></path>
</svg>
</div>
<div className="flex gap-10 text-xl tracking-tight cursor-pointer">
<p className="nav-topic">Services</p>
<p className="nav-topic">Our work</p>
<p className="nav-topic">About us</p>
<p className="nav-topic">Insights</p>
<div className=" ml-80">
<p className="nav-topic">Contact us</p>
</div>
</div>
</div>
)
}
export default Navbar

View file

@ -0,0 +1,16 @@
const Ready = () => {
return (
<div data-scroll data-scroll-speed="0.1" className="w-full bg-[#CDEA68] rounded-t-3xl pt-48 pb-40 flex flex-col justify-center items-center text-center">
<div className="text-ready flex flex-col uppercase font-bold text-[290px] tracking-tight leading-none">
<p>Ready</p>
<p className="-mt-12">to start</p>
<p className="-mt-12">the project?</p>
</div>
<button className="btn uppercase text-xl mb-4">start the project</button>
<p className="uppercase text-xl mb-4">or</p>
<button className="btn-2 uppercase text-xl">hello@ochi.design</button>
</div>
)
}
export default Ready

View file

@ -0,0 +1,9 @@
const ScrollDown = () => {
return (
<div data-scroll data-scroll-sections data-scroll-speed="0" className="w-full h-[20vh] bg-[#F1F1F1] flex justify-center text-center mt-5">
<p className="text-xl text-[#cecece]">Scroll down</p>
</div>
)
}
export default ScrollDown

View file

@ -0,0 +1,24 @@
import {motion} from "framer-motion"
const slider = {
initial:{x: 0,},
animate:{x: "-100%", transition:{ease: "linear", repeat: Infinity, duration: 120},},
};
const TextAnimation = () => {
return (
<div data-scroll data-scroll-sections data-scroll-speed="-0.1" className="bg-[#F1F1F1]">
<div className="marquee-text w-full pt-28 pb-20 bg-[#004D43] rounded-t-3xl">
<div className="flex border-t-[1px] border-b-[1px] border-[#ffffff50] text-[#FFFFFF] overflow-hidden whitespace-nowrap gap-40">
<motion.h1 className="text-[400px] font-bold uppercase leading-none -mb-20" variants={slider} initial="initial" animate="animate">
We are ochi We are ochi We are ochi We are ochi We are ochi We are ochi We are ochi We are ochi We are ochi We are ochi
</motion.h1>
</div>
</div>
</div>
)
}
export default TextAnimation

View file

@ -0,0 +1,87 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
html{
scrollbar-width: none;
}
.home-text, .feature-text, .text-ready{
font-family: "Bebas Neue", sans-serif;
}
.nav-text, .marquee-text, .home-text-2, .about-text{
font-family: "Epilogue", sans-serif;
}
.nav-text{
font-weight: 400;
}
.nav-topic{
display: inline-block;
position: relative;
text-decoration: none;
}
.nav-topic::after{
content: '';
position: absolute;
width: 100%;
transform: scaleX(0);
border-radius: 5px;
height: 1px;
bottom: 0;
left: 0;
background: currentcolor;
transform-origin: bottom right;
transition: transform 0.25s ease-out;
}
.nav-topic:hover::after{
transform: scaleX(1);
transform-origin: bottom left;
}
.btn{
padding: 20px 40px;
border-radius: 50px;
color: white;
background: linear-gradient(#212121, #212121 50%, black 50%, black);
background-size: 100% 200%;
transition: 0.3s;
}
.btn:hover{
background-position: 100% 100%;
}
.btn-1{
color: white;
background: linear-gradient(#212121, #212121 50%, white 50%, white);
background-size: 100% 200%;
transition: 0.3s;
}
.btn-1:hover{
color: #212121;
background-position: 100% 100%;
}
.btn-2{
padding: 20px 40px;
border-radius: 50px;
border: 1px solid #212121;
color: #212121;
background: linear-gradient(transparent, transparent 50%, black 50%, black);
background-size: 100% 200%;
transition: 0.3s;
}
.btn-2:hover{
color: white;
background-position: 100% 100%;
}
.btn-review{
padding: 6px 12px;
border: 1px solid #212121;
border-radius: 50px;
transition: ease-in-out 0.3s;
}
.btn-review:hover{
background-color: #212121;
color: white;
display: inline-block;
visibility: visible;
}

10
awwwards_ss1/src/main.jsx Normal file
View file

@ -0,0 +1,10 @@
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'
ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<App />
</React.StrictMode>,
)

View file

@ -0,0 +1,13 @@
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {
},
},
plugins: [],
}

View file

@ -0,0 +1,7 @@
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
})

1
awwwards_ss2/.gitignore vendored Normal file
View file

@ -0,0 +1 @@
video.mp4

1
awwwards_ss2/README.MD Normal file
View file

@ -0,0 +1 @@
### In this project, we recreate the design of Sundown Studio (https://www.sundown-studio.com/) by using HTML, CSS, JavaScript.

BIN
awwwards_ss2/icon.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.7 KiB

168
awwwards_ss2/index.html Normal file
View file

@ -0,0 +1,168 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="shortcut icon" href="icon.png" type="image/x-icon">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/locomotive-scroll@3.5.4/dist/locomotive-scroll.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
<title>Awwwards | Sundown Studio</title>
</head>
<body>
<div id="overlay-image"></div>
<div id="main" class="main">
<div id="home-1" class="home-1">
<nav>
<img src="https://uploads-ssl.webflow.com/64d3dd9edfb41666c35b15b7/64d3dd9edfb41666c35b15c2_Sundown%20logo.svg"alt="">
<div id="navbar">
<p><a href="#">Work</a></p>
<p><a href="#">Studio</a></p>
<p><a href="#">Contact</a></p>
</div>
<h3>Menu</h3>
</nav>
<div id="hero-top">
<div id="left">
<h3>Sundown is a multi-disciplinary studio focused on creating unique, end-to-end experiences and environments.</h3>
</div>
<div id="right">
<h1>SPACES <br> THAT <br> INSPIRE</h1>
</div>
</div>
<div id="hero-bottom">
<div id="hero-1"></div>
<div id="hero-2"></div>
<div id="hero-3"></div>
</div>
<video src="video.mp4" autoplay loop muted></video>
</div>
<div id="home-2" class="home-2">
<div id="home-2-top" class="home-2-top">
<div class="text-moving">
<h1>EXPERIENCES</h1><div id="dot"></div>
<h1>CONTENT</h1><div id="dot"></div>
<h1>ENVIRONMENTS</h1><div id="dot"></div>
</div>
<div class="text-moving">
<h1>EXPERIENCES</h1><div id="dot"></div>
<h1>CONTENT</h1><div id="dot"></div>
<h1>ENVIRONMENTS</h1><div id="dot"></div>
</div>
<div class="text-moving">
<h1>EXPERIENCES</h1><div id="dot"></div>
<h1>CONTENT</h1><div id="dot"></div>
<h1>ENVIRONMENTS</h1><div id="dot"></div>
</div>
</div>
<div id="home-2-bottom" class="home-2-bottom">
<h1>We are a group of design- driven, goal-focused creators, producers, and designers who believe that the details make all the difference.</h1>
<div id="home-2-bottom2" class="home-2-bottom2">
<img src="https://uploads-ssl.webflow.com/64d3dd9edfb41666c35b15b7/64d3dd9edfb41666c35b15d1_Holding_thumb-p-500.jpg" alt="">
<p>We love to create, we love to solve, we love to collaborate, and we love to turn amazing ideasinto reality.
We're here to partner with you through every step of the process and know that relationships are the most important things we build.</p>
</div>
</div>
<div id="sunspot" class="sunspot"></div>
</div>
<div id="home-3" class="home-3">
<div class="container">
<div class="topic" data-image="https://assets-global.website-files.com/64d3dd9edfb41666c35b15d4/64d3dd9edfb41666c35b1694_Copy%2520of%2520211023_NikeCHI_PlayNewKids_Beauty-26-p-1080.webp">
<div class="overlay"></div>
<div class="topic-line">
<h2>Play New Kidvision</h2>
<div>
<p>nike</p>
<span>environment</span>
</div>
</div>
</div>
<div class="topic" data-image="https://assets-global.website-files.com/64d3dd9edfb41666c35b15d4/64d3dd9edfb41666c35b1733_Nike_HOI_50th_SU22_FL1_5388-p-1080.webp">
<div class="overlay"></div>
<div class="topic-line">
<h2>Makers Studio HOI</h2>
<div>
<p>nike</p>
<span>experiential</span>
</div>
</div>
</div>
<div class="topic" data-image="https://assets-global.website-files.com/64d3dd9edfb41666c35b15d4/64d3dd9edfb41666c35b170d_AM704059-p-1080.webp">
<div class="overlay"></div>
<div class="topic-line">
<h2>NYFW Popup</h2>
<div>
<p>afterpay</p>
<span>experiential</span>
</div>
</div>
</div>
<div class="topic" data-image="https://assets-global.website-files.com/64d3dd9edfb41666c35b15d4/6605aaa26f3ef72564bcd41a_Copy-of-Capezio-RAW.01_32_55_23.Still050-p-1080.jpg">
<div class="overlay"></div>
<div class="topic-line">
<h2>Capezio NYC Flagship</h2>
<div>
<p>capezio</p>
<span>environment</span>
</div>
</div>
</div>
<div class="topic" data-image="https://assets-global.website-files.com/64d3dd9edfb41666c35b15d4/64d3dd9edfb41666c35b16f6_Copy%2520of%2520Nike_Soho_50th_SU22_FL1_6409-p-1080.webp">
<div class="overlay"></div>
<div class="topic-line">
<h2>50th Aniversary</h2>
<div>
<p>nike</p>
<span>environment</span>
</div>
</div>
</div>
<div class="topic" data-image="https://assets-global.website-files.com/64d3dd9edfb41666c35b15d4/64d3dd9edfb41666c35b163f_Copy%2520of%2520DSC04192-p-1080.webp">
<div class="overlay"></div>
<div class="topic-line">
<h2>Converse SoHo</h2>
<div>
<p>converse</p>
<span>environment</span>
</div>
</div>
</div>
<div class="topic" data-image="https://assets-global.website-files.com/64d3dd9edfb41666c35b15d4/6606de7b8e3eac1fa870f480_melo-portrait-2-p-1080.jpg">
<div class="overlay"></div>
<div class="topic-line">
<h2>Carmelo Anthony 7pm In Brooklyn Set</h2>
<div>
<p>wave sports entertainment</p>
<span>environment</span>
</div>
</div>
</div>
<div class="topic" data-image="https://assets-global.website-files.com/64d3dd9edfb41666c35b15d4/660ae77734c1cb76f81e4be9_Copy-of-Copy-of-KelceHousParty_WaveSports_0504-p-1080.jpg">
<div class="overlay"></div>
<div class="topic-line">
<h2>Kelce Super Bowl Party</h2>
<div>
<p>wave sports entertainment</p>
<span>experiential</span>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/locomotive-scroll@3.5.4/dist/locomotive-scroll.js"></script>
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<script src="main.js"></script>
</body>
</html>

21
awwwards_ss2/main.js Normal file
View file

@ -0,0 +1,21 @@
//overlay-image
function topicOverlayAnimation() {
var topic = document.querySelector(".container")
var fixed = document.querySelector("#overlay-image")
topic.addEventListener("mouseenter", function () {
fixed.style.display = "block"
})
topic.addEventListener("mouseleave", function () {
fixed.style.display = "none"
})
var topicHead = document.querySelectorAll(".topic")
topicHead.forEach(function (e) {
e.addEventListener("mouseenter", function () {
var image = e.getAttribute("data-image")
fixed.style.backgroundImage = `url(${image})`
})
})
}
topicOverlayAnimation()
//

332
awwwards_ss2/style.css Normal file
View file

@ -0,0 +1,332 @@
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
html, body{
height: 100%;
width: 100%;
background-color: #EFEAE3;
color: black;
}
a{
text-decoration: none;
color: inherit;
}
.main{
position: relative;
z-index: 9;
}
/*===== Home1 =====*/
.home-1{
min-height: 100vh;
width: 100%;
position: relative;
padding: 0 2.5rem;
}
.home-1 video{
position: relative;
border-radius: 30px;
margin-top: 4.8rem;
width: 100%;
}
nav {
padding: 2.5rem 0;
width: 100%;
display: flex;
align-items: center;
position: relative;
justify-content: space-between;
z-index: 99;
}
nav h3 {
display: none;
}
#navbar{
display: flex;
align-items: center;
gap: 1.2rem;
}
#navbar p{
padding: 0.6rem 1.2rem;
border: 1px solid #0000003c;
border-radius: 50px;
font-size: 18px;
font-weight: 500;
color: #000000bb;
transition: all ease 0.3s;
position: relative;
overflow: hidden;
}
#navbar p::after{
content: "";
position: absolute;
height: 100%;
width: 100%;
background-color: black;
left: 0;
bottom: -100%;
border-radius: 50%;
transition: all ease 0.3s;
}
#navbar p:hover::after{
bottom: 0;
border-radius: 0;
}
#navbar p a{
color: #000000bb;
position: relative;
z-index: 9;
}
#navbar p:hover a{
color: white;
}
#hero-top{
height: 65vh;
width: 100%;
display: flex;
align-items: flex-end;
justify-content: space-between;
border-bottom: 1px solid #0000003c;
padding-bottom: 3rem;
}
#left h3{
width: 480px;
font-size: 2rem;
font-weight: 600;
line-height: 2rem;
letter-spacing: -2px;
}
#right h1{
font-size: 12rem;
font-weight: 600;
text-align: right;
line-height: 9rem;
letter-spacing: -10px;
}
#hero-bottom{
position: absolute;
width: 55.2rem;
height: 43.2rem;
right: 0;
top: 65vh;
}
#hero-1{
background-color: #FE320A;
height: 100%;
width: 100%;
border-top-left-radius: 50%;
border-bottom-left-radius: 50%;
filter: blur(10px);
position: absolute;
}
#hero-2{
background: linear-gradient(#FE320A, #fe3f0a);
height: 36rem;
width: 36rem;
border-radius: 50%;
position: absolute;
animation-name: anime2;
animation-duration: 5s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-direction: alternate;
filter: blur(25px);
}
#hero-3{
background: linear-gradient(#FE320A, #fe3f0a);
height: 36rem;
position: absolute;
width: 36rem;
border-radius: 50%;
filter: blur(25px);
animation-name: anime1;
animation-duration: 5s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-direction: alternate;
}
@keyframes anime1{
from {
transform: translate(55%, -3%);
}
to {
transform: translate(0%, 10%);
}
}
@keyframes anime2{
from {
transform: translate(5%, -5%);
}
to {
transform: translate(-20%, 30%);
}
}
/*===== Home2 =====*/
.home-2{
min-height: 100vh;
width: 100%;
background-color: #EFEAE3;
padding: 9.5rem 0;
position: relative;
}
.home-2-top{
overflow-x: auto;
white-space: nowrap;
scrollbar-width: none; /* Firefox 64 ===> -ms-overflow-style: none; (IE 11)*/
}
.text-moving{
white-space: nowrap;
display: inline-block;
animation-name: textmoving;
animation-duration: 10s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
.home-2-top h1 {
font-size: 10rem;
display: inline-block;
}
#dot{
height: 70px;
width: 70px;
border-radius: 50%;
display: inline-block;
background-color: #FE320A;
margin: 1.2rem 2.4rem;
}
@keyframes textmoving {
from {
transform: translateX(0);
}
to {
transform: translateX(-100%);
}
}
.home-2-bottom{
height: 80vh;
width: 100%;
padding: 5.4rem;
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
z-index: 9;
}
.home-2-bottom h1{
font-size: 4.6rem;
width: 60%;
line-height: 5rem;
font-weight: 600;
letter-spacing: -3px;
}
.home-2-bottom2{
width: 20%;
}
.home-2-bottom2 img{
width: 100%;
margin-top: 20rem;
border-radius: 15px;
}
.home-2-bottom2 p{
margin-top: 4rem;
font-size: 16px;
}
.home-2 .sunspot{
height: 32vw;
width: 32vw;
position: absolute;
border-radius: 50%;
background: linear-gradient(to top right, #ff2d03, #ff5c0b);
top: 58%;
left: 25%;
filter: blur(20px);
animation-name: sunspot;
animation-duration: 6s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: ease-in-out;
}
@keyframes sunspot{
from {
filter: blur(20px);
transform: translate(10%, -10%) skew(0);
}
to {
filter: blur(30px);
transform: translate(-10%, 10%) skew(-12deg);
}
}
/*===== Home3 =====*/
.home-3{
min-height: 100vh;
width: 100%;
background-color: #EFEAE3;
padding: 4.8rem 0;
}
.topic{
height: 150px;
width: 100%;
position: relative;
border-bottom: 1px solid #38383864;
overflow: hidden;
display: flex;
align-items: center;
padding: 0 2.4rem;
}
.topic h2{
font-size: 3.6rem;
position: relative;
z-index: 9;
}
.topic .overlay{
height: 100%;
width: 100%;
background-color: orange;
position: absolute;
left: 0;
top: -100%;
transition: all ease 0.25s;
}
.topic:hover .overlay, .topic-line:hover .overlay{
top: 0;
cursor: pointer;
}
.topic-line{
height: 150px;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
text-align: end;
}
.topic-line p{
text-transform: uppercase;
font-size: 16px;
position: relative;
z-index: 9;
}
.topic-line span{
text-transform: capitalize;
font-size: 16px;
position: relative;
z-index: 9;
color: gray;
}
#overlay-image{
height: 550px;
width: 450px;
border-radius: 15px;
position: fixed;
z-index: 99;
left: 50%;
top: 25%;
display: none;
background-size: cover;
background-position: center;
}
/*===== Home4 =====*/