Create Modern Landing Page with HTML CSS JS | Shery.js

 Create Modern Landing Page with HTML CSS JS | Shery.js  


here is the links: https://www.npmjs.com/package/sheryjs




index.html file contain these code:

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://unpkg.com/sheryjs/dist/Shery.css" /> <!-- Recommended -->
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/sheryjs/dist/Shery.css" />
<link rel="stylesheet" href="style.css">
</head>

<body>
<div id="main">
<div id="back">
<img src="image/IMG_7564.JPG" alt="">
<img src="image/IMG_7565.JPG" alt="">
<img src="image/IMG_7566.JPG" alt="">
<img src="image/IMG_7567.JPG" alt="">
<img src="image/IMG_7568.JPG" alt="">
</div>
<div id="top">
<div id="workingarea">
<div id="nav" class="flexs">
<div class="leftnav flexs">
<img src="image/raybanlogo.png" />
<ul>
<li>
<a href="/">Product</a>
<a href="/">About</a>
</li>
</ul>
</div>

<div class="rightnav flexs">
<ul>
<li>
<a href="/">SHop</a>
<a href="/">About</a>
</li>
</ul>
</div>

</div>

<div class="hero">
<div class="hero_left">

<div class="elem">
<h1 class="text-target">David change</h1>
<h2>Krishna Kharal</h2>
<h3>Shova Ghimire</h3>
</div>

<button>Explore NOw</button>

</div>

<div class="hero_right">
<p>Lorem ipsum dolor sit amet consectetur...</p>
<img class="imagediv" src="https://plus.unsplash.com/premium_photo-1673792686302-7555a74de717?q=80&w=1374&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam harum non reiciendis autem architecto labore doloribus, cupiditate error tenetur, velit ratione temporibus ipsum nam sunt officiis mollitia. Architecto, porro officiis!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam harum non reiciendis autem architecto labore doloribus, cupiditate error tenetur, velit ratione temporibus ipsum nam sunt officiis mollitia. Architecto, porro officiis!</p>
</div>

</div>

</div>
</div>
</div>
</body>
<script type="text/javascript" src="https://unpkg.com/sheryjs/dist/Shery.js"></script> <!-- Recommended -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/0.155.0/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/automat/controlkit.js@master/bin/controlKit.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/sheryjs/dist/Shery.js"></script> <!-- Recommended -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/sheryjs/dist/Shery.js"></script>

<script src="script.js"></script>
</html>


style.css code:

*{
margin: 0;
padding: 0;
box-sizing: border-box;
}

html,body{
width: 100%;
height: 100%;
}

#main{
width: 100%;
height: 100vh;
/* background-color: rgb(139, 82, 82); */
}

#back{
width: 100%;
height: 100vh;
}

#back img{
width: 100%;
height: 100%;
object-fit: cover;
}


#top{
width: 100%;
position: absolute;
top:0;
left: 0;
height: 100vh;
pointer-events: none;
/* background-color: rgba(14, 7, 7, 0.329); */
}

#workingarea{
width: 80%;
max-width: 1600px;
position: relative;
margin: 0 auto;
height: 100vh;
}

#nav{
width: 100%;
padding: 20px 0;
display: flex;
justify-content: space-between;
align-items: center;
}

#nav img{
height: 60px;
}

.flexs{
display: flex;
justify-content: space-between;
align-items: center;
}

ul li{
list-style-type: none;
}

a{
text-decoration: none;
color: white;
font-weight: bold;
letter-spacing: 1px;
font-size: 13px;
text-transform: uppercase;
pointer-events: all;
margin: 0 20px;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

.hero{
width:100%;
position: absolute;
top:30%;
padding: 0.3rem 2rem;
left: 0;
display: flex;
flex-direction: row;
font-family: "kajiro";
justify-content: space-between;
}

.hero_left{
width: 40%;
color: white;
}


.hero_left .elem h1{
font-size: 5vw;
font-weight: bold;
font-family: "kajiro";
}

.hero_left button{
padding: 1rem 2rem;
margin-top: 30px;
font-size: 15px;
border-radius: 100px;
text-transform: uppercase;
cursor: pointer;
background-color: blueviolet;
cursor: pointer;
color: white;
outline: none;
border: none;
font-family: monospace;
}

.hero_right{
width: 40%;
color: white;
width:25%;
display: flex;
flex-direction: column;
align-items: flex-end;
}

.hero_right p{
font-size: 14px;
font-weight: 300;
text-align: right;
margin-bottom: 10px;
}

/* .hero_right p:nth-child(3){
color: gray;
text-transform: capitalize;
} */

.imagediv{
width: 100%;
background-color: white;
height: 200px;
object-fit: cover;
border-radius: 9px;
margin-bottom: 10px;
}


script.js code:

Shery.imageEffect("#back", {
style: 5,
gooey: true,
});

// Shery.imageMasker("#back" /* Element to target.*/, {
// //Parameters are optional.
// mouseFollower: true,
// text: "Shery",
// ease: "cubic-bezier(0.23, 1, 0.320, 1)",
// duration: 1,
// });

// Shery.mouseFollower({
// //Parameters are optional.
// skew: true,
// ease: "cubic-bezier(0.23, 1, 0.320, 1)",
// duration: 1,
// });


// Shery.textAnimate(".text-target" /* Element to target.*/, {
// //Parameters are optional.
// style: 1,
// y: 150,
// delay: 0.1,
// duration: 3,
// ease: "cubic-bezier(0.23, 1, 0.320, 1)",
// multiplier: 0.1,
// });




Comments

Post a Comment

Popular posts from this blog

Lets build a Markdown blog using Next.js, Shadcn, Tailwind, Pieces, Remark & Rehype 🔥

 Building a Markdown blog using **Next.js**, **Shadcn**, **Tailwind CSS**, **Pieces**, **Remark**, and **Rehype** is a fantastic idea! This stack will give you a modern, performant, and highly customizable blog. Let’s break it down step by step. --- ### **1. Set Up Next.js Project** Start by creating a new Next.js project: ```bash npx create-next-app@latest my-markdown-blog cd my-markdown-blog ``` --- ### **2. Install Tailwind CSS** Install Tailwind CSS and configure it: ```bash npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p ``` Update `tailwind.config.js`: ```javascript /** @type {import('tailwindcss').Config} */ module.exports = {   content: [     "./app/**/*.{js,ts,jsx,tsx}",     "./pages/**/*.{js,ts,jsx,tsx}",     "./components/**/*.{js,ts,jsx,tsx}",   ],   theme: {     extend: {},   },   plugins: [], }; ``` Add Tailwind to your `globals.css`: ```css @tailwind base; @tailwind components; @...
Read more

React Portflio Website Basic to Advance

To build a React-based portfolio website with Tailwind CSS, follow these steps to integrate Tailwind and style your components. 1. Set Up Tailwind CSS in Your React Project First, create a new React project and install Tailwind CSS.   npx create-react-app portfolio-website  cd portfolio-website  npm install -D tailwindcss postcss autoprefixer  npx tailwindcss init After running ,    npx tailwindcss init   a    tailwind.config.js  file will be created. Now, configure Tailwind to purge unused styles by editing tailwind.config.js as follows: tailwind.config.js /** @type {import('tailwindcss').Config} */ module . exports = {   content : [     " ./src/**/*.{js,jsx,ts,tsx} " ,   ],   theme : {     extend : {},   },   plugins : [], } 2. Add Tailwind Directives to CSS Create a new file  src / index .css   (or edit the existing one) to include the Tailwind directives: sr...
Read more

Todo List app using html,js and tailwind.css with features login,logout,storing the data in localstorage addtodos,deletetodos and updating todos,toastify library and many more

Image
  Here's a fully functional To-Do List app with login/logout functionality, item management (add, edit, delete), and local storage for data persistence. The app uses HTML, CSS (with Tailwind CSS for design), and JavaScript for the logic. File Structure: index.html - The main structure of the app style.css - Custom styles (if needed) script.js - JavaScript logic for the app You can use Tailwind CSS CDN for simplicity to quickly apply beautiful styles. Features Breakdown: Login/Logout : The user can log in by entering a username and password. After logging in, they can manage their to-do list. If not logged in, they are redirected to the login screen. To-Do Management : The user can add, edit, and delete items from the to-do list. Local Storage : All data is stored in the browser's local storage, so the data persists even after the page is refreshed. Tailwind CSS : The app uses Tailwind CSS to create a clean, responsive, and modern design. You can run this code by creating th...
Read more