vamik2001
3 years ago
committed by
GitHub
parent
120204995f
commit
b96578e892
@ -0,0 +1,23 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
<title>Document</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="container">
|
||||||
|
<div class="box"></div>
|
||||||
|
<div class="box"></div>
|
||||||
|
<div class="box"></div>
|
||||||
|
<div class="box"></div>
|
||||||
|
<div class="box"></div>
|
||||||
|
<div class="box"></div>
|
||||||
|
<div class="box"></div>
|
||||||
|
<div class="box"></div>
|
||||||
|
<div class="box"></div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,20 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<link rel="stylesheet" href="style.css" />
|
||||||
|
<title>Document</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="container">
|
||||||
|
<div class="box"><h1>Header</h1></div>
|
||||||
|
<div class="box"></div>
|
||||||
|
<div class="box"></div>
|
||||||
|
<div class="box">4</div>
|
||||||
|
<div class="box">5</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,43 @@
|
|||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
background: rgb(255, 90, 90);
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(3, 1fr);
|
||||||
|
grid-gap: 10px;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box {
|
||||||
|
margin: 0.2em;
|
||||||
|
background: rgb(233, 233, 233);
|
||||||
|
padding: 6vh;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.container :nth-child(1){
|
||||||
|
grid-column: span 3;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
background-color: blueviolet;
|
||||||
|
}
|
||||||
|
.container :nth-child(2){
|
||||||
|
grid-row: span 2;
|
||||||
|
background-color: blueviolet;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container :nth-child(5){
|
||||||
|
grid-column: span 2;
|
||||||
|
background-color: rgb(233, 132, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@media(max-width:370px){
|
||||||
|
.container{
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
After Width: | Height: | Size: 766 KiB |
|
After Width: | Height: | Size: 90 KiB |
@ -0,0 +1,68 @@
|
|||||||
|
@import url('https://fonts.googleapis.com/css2?family=Silkscreen&display=swap');
|
||||||
|
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
font-family: 'Silkscreen', cursive;
|
||||||
|
position: absolute;
|
||||||
|
background-image: url("img/rhamely-yrWL7KrigPo-unsplash.jpg");
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
border: 3px solid black;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
background: rgb(54, 54, 54, 0.3);
|
||||||
|
/* position: absolute; */
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar .links ul {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar .links ul li {
|
||||||
|
display: flex;
|
||||||
|
list-style-type: none;
|
||||||
|
margin: 1em;
|
||||||
|
margin-top: 0.2em;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
text-decoration: none;
|
||||||
|
/* position: absolute; */
|
||||||
|
padding: 5px;
|
||||||
|
color: rgb(39, 26, 26);
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover {
|
||||||
|
background-color: rgb(54, 54, 54, 0.4);
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.bg {
|
||||||
|
|
||||||
|
margin: 200px;
|
||||||
|
padding: 30px;
|
||||||
|
background-color: rgb(54, 54, 54, 0.4);
|
||||||
|
text-align: center;
|
||||||
|
color: rgb(0, 0, 0);
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
@ -0,0 +1,87 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<link rel="stylesheet" href="index.css" />
|
||||||
|
<title>Document</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header class="navbar">
|
||||||
|
<div class="links">
|
||||||
|
<ul>
|
||||||
|
<li><a href="#">Contact</a></li>
|
||||||
|
<li><a href="#">About Us</a></li>
|
||||||
|
<li><a href="#">Blog</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<main>
|
||||||
|
<div class="bg">
|
||||||
|
<h2>Landing Page</h2>
|
||||||
|
<p>
|
||||||
|
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos
|
||||||
|
dignissimos vero enim repellendus dolor, nemo tempora amet ut
|
||||||
|
recusandae reprehenderit reiciendis similique aut voluptate nam,
|
||||||
|
provident totam, at voluptatem eaque. Reprehenderit ipsum architecto
|
||||||
|
voluptate, aut quas eveniet numquam cumque delectus ratione in unde,
|
||||||
|
ab, reiciendis saepe iure velit eaque? Laborum iure esse mollitia a
|
||||||
|
rerum illum excepturi sapiente inventore numquam molestias
|
||||||
|
necessitatibus debitis incidunt odio sequi architecto, odit quibusdam
|
||||||
|
nam nesciunt fugiat deleniti. Iste placeat blanditiis at atque
|
||||||
|
repellat totam deserunt suscipit dolorem facilis earum nam illo
|
||||||
|
laudantium quia, commodi molestias maxime aperiam soluta similique.
|
||||||
|
Hic sequi ipsum non voluptatibus in consequuntur, vel ipsam architecto
|
||||||
|
animi autem. Distinctio dicta molestias dolorum eos incidunt! Quam
|
||||||
|
quia pariatur dignissimos autem dolorum et obcaecati aspernatur
|
||||||
|
asperiores impedit facere quis saepe, consectetur dolore enim fuga.
|
||||||
|
Nam sint eaque repellat! Suscipit numquam modi necessitatibus
|
||||||
|
provident dolores, velit asperiores tenetur eius non quis eveniet quo
|
||||||
|
explicabo eaque odio sint, porro recusandae excepturi rem iste.
|
||||||
|
Aspernatur veritatis fuga asperiores debitis? Optio quasi sed a
|
||||||
|
provident distinctio nihil libero nam delectus. Eligendi culpa
|
||||||
|
reiciendis vel quia perspiciatis ad corporis natus dolor, magnam
|
||||||
|
incidunt fugit? Beatae recusandae commodi laboriosam quos corrupti
|
||||||
|
cupiditate ea obcaecati, soluta nam veniam at nobis.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<!-- <div class="row">
|
||||||
|
<div class="column">
|
||||||
|
<img src="/w3images/wedding.jpg" style="width:100%">
|
||||||
|
<img src="/w3images/rocks.jpg" style="width:100%">
|
||||||
|
<img src="/w3images/falls2.jpg" style="width:100%">
|
||||||
|
<img src="/w3images/paris.jpg" style="width:100%">
|
||||||
|
<img src="/w3images/nature.jpg" style="width:100%">
|
||||||
|
<img src="/w3images/mist.jpg" style="width:100%">
|
||||||
|
<img src="/w3images/paris.jpg" style="width:100%">
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<img src="/w3images/underwater.jpg" style="width:100%">
|
||||||
|
<img src="/w3images/ocean.jpg" style="width:100%">
|
||||||
|
<img src="/w3images/wedding.jpg" style="width:100%">
|
||||||
|
<img src="/w3images/mountainskies.jpg" style="width:100%">
|
||||||
|
<img src="/w3images/rocks.jpg" style="width:100%">
|
||||||
|
<img src="/w3images/underwater.jpg" style="width:100%">
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<img src="/w3images/wedding.jpg" style="width:100%">
|
||||||
|
<img src="/w3images/rocks.jpg" style="width:100%">
|
||||||
|
<img src="/w3images/falls2.jpg" style="width:100%">
|
||||||
|
<img src="/w3images/paris.jpg" style="width:100%">
|
||||||
|
<img src="/w3images/nature.jpg" style="width:100%">
|
||||||
|
<img src="/w3images/mist.jpg" style="width:100%">
|
||||||
|
<img src="/w3images/paris.jpg" style="width:100%">
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<img src="/w3images/underwater.jpg" style="width:100%">
|
||||||
|
<img src="/w3images/ocean.jpg" style="width:100%">
|
||||||
|
<img src="/w3images/wedding.jpg" style="width:100%">
|
||||||
|
<img src="/w3images/mountainskies.jpg" style="width:100%">
|
||||||
|
<img src="/w3images/rocks.jpg" style="width:100%">
|
||||||
|
<img src="/w3images/underwater.jpg" style="width:100%">
|
||||||
|
</div>
|
||||||
|
</div> -->
|
||||||
|
</main>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
After Width: | Height: | Size: 3.2 MiB |
|
After Width: | Height: | Size: 4.6 MiB |
|
After Width: | Height: | Size: 2.4 MiB |
|
After Width: | Height: | Size: 1.0 MiB |
|
After Width: | Height: | Size: 1.2 MiB |
|
After Width: | Height: | Size: 1.9 MiB |
@ -0,0 +1,69 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<link
|
||||||
|
rel="stylesheet"
|
||||||
|
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200"
|
||||||
|
/>
|
||||||
|
<link rel="stylesheet" href="style.css" />
|
||||||
|
<title>Parallax</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<nav class="navbar">
|
||||||
|
<div class="items">
|
||||||
|
<ul>
|
||||||
|
<li>Home</li>
|
||||||
|
<li>Contact</li>
|
||||||
|
<li>Blog</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<div class="greet-container" id="greete-container">
|
||||||
|
<h2 id="greet" class="greet">Hello,</h2>
|
||||||
|
</div>
|
||||||
|
<div class="about-container">
|
||||||
|
<h1 class="about">About us</h1>
|
||||||
|
<p class="about">
|
||||||
|
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Distinctio
|
||||||
|
autem maiores nemo rem dolorem necessitatibus, quas, vero vitae
|
||||||
|
veritatis porro eligendi nulla sed ullam ratione sunt error, itaque
|
||||||
|
ipsa exercitationem. Quis doloremque enim illum natus, nihil alias
|
||||||
|
aperiam doloribus velit?
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<ul>
|
||||||
|
<li>Facebook</li>
|
||||||
|
<li>Instagram</li>
|
||||||
|
<li>Discord</li>
|
||||||
|
<li>Company</li>
|
||||||
|
<li>E-mail</li>
|
||||||
|
<li>Support</li>
|
||||||
|
</ul>
|
||||||
|
</footer>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
<script src="main.js"></script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const d = new Date();
|
||||||
|
let time = d.getHours();
|
||||||
|
if (time >= 1 && time < 12) {
|
||||||
|
var greet = (document.getElementById("greet").innerText +=
|
||||||
|
"Good Morning");
|
||||||
|
} else if (time >= 12 && time < 18) {
|
||||||
|
var greet = (document.getElementById("greet").innerText +=
|
||||||
|
"Good afternoon");
|
||||||
|
} else {
|
||||||
|
var greet = (document.getElementById("greet").innerText += "Good Evening");
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,6 @@
|
|||||||
|
const parallax=document.getElementsByClassName("greete-container");
|
||||||
|
|
||||||
|
window.addEventListener("scroll",function(){
|
||||||
|
let offset=window.pageYOffset;
|
||||||
|
parallax.style.backgroundPositionY=offset*7+"px";
|
||||||
|
})
|
||||||
@ -0,0 +1,139 @@
|
|||||||
|
* {
|
||||||
|
border: 0;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
||||||
|
overflow-x: hidden;
|
||||||
|
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.navbar {
|
||||||
|
/* position: absolute; */
|
||||||
|
display: flex;
|
||||||
|
background-color: rgba(109, 104, 104, 0.616);
|
||||||
|
height: 7vh;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar ul {
|
||||||
|
display: flex;
|
||||||
|
margin: 10px;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar ul li {
|
||||||
|
margin-right: 3ch;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* *************************************************************************************** */
|
||||||
|
main {
|
||||||
|
|
||||||
|
background: hsl(204 100% 5%);
|
||||||
|
background: hsl(204 100% 5%);
|
||||||
|
/* background: conic-gradient(
|
||||||
|
hsl(100 100% 60%),
|
||||||
|
hsl(200 100% 60%),
|
||||||
|
hsl(100 100% 60%)
|
||||||
|
) fixed; */
|
||||||
|
color: white;
|
||||||
|
min-block-size: 200vh;
|
||||||
|
min-inline-size: 100%;
|
||||||
|
padding: 5vmin;
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: grid;
|
||||||
|
place-content: center;
|
||||||
|
font-family: system-ui;
|
||||||
|
font-size: min(200%, 5vmin);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
main div {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-weight: bold;
|
||||||
|
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
/* *************************************************************************************** */
|
||||||
|
|
||||||
|
|
||||||
|
/* *************************************************************************************** */
|
||||||
|
/* 1st div */
|
||||||
|
|
||||||
|
.greet {
|
||||||
|
color: rgb(0, 0, 0);
|
||||||
|
font-size: 5vw;
|
||||||
|
background: rgba(255, 255, 255, 0.796);
|
||||||
|
padding: 8px 24px;
|
||||||
|
border-radius: 16px;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
main div:nth-child(1) {
|
||||||
|
background: rgba(181, 141, 141, 0.759);
|
||||||
|
background-image: url(img/luca-bravo-O453M2Liufs-unsplash.jpg);
|
||||||
|
background-size: cover;
|
||||||
|
background-attachment: fixed;
|
||||||
|
/* position: absolute; */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* *************************************************************************************** */
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.about-conatiner {
|
||||||
|
|
||||||
|
background-color: black;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.about-container h1{
|
||||||
|
padding: 100px;
|
||||||
|
position: absolute;
|
||||||
|
font-size: 30vh;
|
||||||
|
text-decoration: line-through;
|
||||||
|
z-index: 0;
|
||||||
|
opacity: 0.4;
|
||||||
|
background-color: black;
|
||||||
|
background-image: linear-gradient(60deg, #b4b4b4, #da435f);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.about {
|
||||||
|
|
||||||
|
background-color: black;
|
||||||
|
background: radial-gradient(hsl(100 100% 60%),
|
||||||
|
hsl(200 100% 60%)) fixed;
|
||||||
|
background: conic-gradient(hsl(100 100% 60%),
|
||||||
|
hsl(200 100% 60%),
|
||||||
|
hsl(100 100% 60%)) fixed;
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
text-align: center;
|
||||||
|
z-index: 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
footer {
|
||||||
|
background: rgb(206, 204, 210);
|
||||||
|
padding: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer ul {
|
||||||
|
display: grid;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer ul li {
|
||||||
|
margin: 20px;
|
||||||
|
grid-template-rows: repeat(1, 1fr);
|
||||||
|
}
|
||||||
|
After Width: | Height: | Size: 35 KiB |
|
After Width: | Height: | Size: 34 KiB |
@ -0,0 +1,27 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<link
|
||||||
|
rel="stylesheet"
|
||||||
|
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200"
|
||||||
|
/>
|
||||||
|
<link rel="stylesheet" href="style.css" />
|
||||||
|
<title>Document</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<nav>
|
||||||
|
<div class="items">
|
||||||
|
<span class="material-symbols-outlined"> home </span>
|
||||||
|
<span class="material-symbols-outlined"> person_filled </span>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<div class="parallax">
|
||||||
|
<img src="img/circuit.svg" class="bg" alt="" />
|
||||||
|
<div class="text-box"><h1>Welcome</h1></div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,126 @@
|
|||||||
|
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,300;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Silkscreen&display=swap');
|
||||||
|
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
font-family: 'Poppins', sans-serif;
|
||||||
|
font-family: 'Silkscreen', cursive;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
/* background: linear-gradient(109.6deg, rgb(36, 45, 57) 11.2%, rgb(16, 37, 60) 51.2%, rgb(0, 0, 0) 98.6%); */
|
||||||
|
background: black;
|
||||||
|
overflow-x: hidden;
|
||||||
|
background-size: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav {
|
||||||
|
position: absolute;
|
||||||
|
background: rgb(25, 24, 24);
|
||||||
|
height: 100%;
|
||||||
|
position: fixed;
|
||||||
|
z-index: 11;
|
||||||
|
}
|
||||||
|
|
||||||
|
.material-symbols-outlined {
|
||||||
|
display: block;
|
||||||
|
color: aliceblue;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.material-symbols-outlined:hover {
|
||||||
|
color: #fff;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all ease-in 0.2s;
|
||||||
|
text-shadow:
|
||||||
|
0 0 7px #fff,
|
||||||
|
0 0 10px #fff,
|
||||||
|
0 0 21px #fff,
|
||||||
|
0 0 42px #1f4a5d,
|
||||||
|
0 0 82px #1e5269,
|
||||||
|
0 0 92px #215266,
|
||||||
|
0 0 102px #28637c,
|
||||||
|
0 0 151px #1f6482;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg {
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: cover;
|
||||||
|
background-attachment: fixed;
|
||||||
|
opacity: 0.3;
|
||||||
|
z-index: -2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.parallax .text-box {
|
||||||
|
|
||||||
|
/* text-align: center; */
|
||||||
|
top: 30%;
|
||||||
|
left: 60%;
|
||||||
|
position: absolute;
|
||||||
|
padding: 5rem;
|
||||||
|
color: aliceblue;
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-box {
|
||||||
|
/* background: rgba(0, 0, 0, 0.5); */
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
height: 2px;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
overflow: hidden;
|
||||||
|
border-radius: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-box::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
z-index: -3;
|
||||||
|
width: 100px;
|
||||||
|
height: 550px;
|
||||||
|
background: #000428;
|
||||||
|
/* fallback for old browsers */
|
||||||
|
background: -webkit-linear-gradient(to right, #004e92, #000428);
|
||||||
|
/* Chrome 10-25, Safari 5.1-6 */
|
||||||
|
background: linear-gradient(to right, #004e92, #000428);
|
||||||
|
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
animation: animate 4s linear infinite;
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-box::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
inset: 4px;
|
||||||
|
background: rgba(0, 0, 0);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-box h1 {
|
||||||
|
position: relative;
|
||||||
|
z-index: 4;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes animate {
|
||||||
|
0% {
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.text h1 {
|
||||||
|
position: relative;
|
||||||
|
color: #fff;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
After Width: | Height: | Size: 679 KiB |
@ -0,0 +1,33 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<link rel="stylesheet" href="style.css" />
|
||||||
|
<title>Neon</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<nav>
|
||||||
|
<div class="items skeleton">
|
||||||
|
<ul>
|
||||||
|
<li><a href="#">Home</a> </li>
|
||||||
|
<li><a href="#">Contact</a> </li>
|
||||||
|
<li><a href="#">Blog</a> </li>
|
||||||
|
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<div class="container skeleton">
|
||||||
|
<h1 contenteditable="true skeleton">Hello, world</h1>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card-parent">
|
||||||
|
<div class="card">!?</div>
|
||||||
|
<div class="card">Nani?</div>
|
||||||
|
<div class="card">what????????</div>
|
||||||
|
<div class="card">pardon..</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,130 @@
|
|||||||
|
@import url('https://fonts.googleapis.com/css2?family=Raleway+Dots&display=swap');
|
||||||
|
@import url('https://fonts.googleapis.com/css2?family=Gemunu+Libre:wght@200&display=swap');
|
||||||
|
@import url('https://fonts.googleapis.com/css2?family=Gemunu+Libre:wght@200&family=Silkscreen&display=swap');
|
||||||
|
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
font-family: 'Poppins', sans-serif;
|
||||||
|
font-family: 'Raleway Dots', cursive;
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.skeleton {
|
||||||
|
|
||||||
|
|
||||||
|
animation: skeleton-loading 1s linear infinite alternate;
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes animation {
|
||||||
|
0% {
|
||||||
|
background-color: hsl(200, 20%, 70%);
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
background-color: hsl(200, 20%, 95%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
min-height: 100vh;
|
||||||
|
background: #07252d;
|
||||||
|
overflow-x: hidden;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.container h1 {
|
||||||
|
position: relative;
|
||||||
|
font-size: 10vw;
|
||||||
|
letter-spacing: 15px;
|
||||||
|
color: #0e3742;
|
||||||
|
text-transform: uppercase;
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
-webkit-box-reflect: below 1px linear-gradient(transparent, #0008);
|
||||||
|
line-height: 0.73em;
|
||||||
|
outline: none;
|
||||||
|
animation: animate 3s linear infinite;
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes animate {
|
||||||
|
|
||||||
|
0%,
|
||||||
|
18%,
|
||||||
|
20%,
|
||||||
|
50.1%,
|
||||||
|
60%,
|
||||||
|
65.1%,
|
||||||
|
80%,
|
||||||
|
90.1%,
|
||||||
|
92% {
|
||||||
|
color: #0e3742;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
18.1%,
|
||||||
|
20.1%,
|
||||||
|
30%,
|
||||||
|
50%,
|
||||||
|
60.1%,
|
||||||
|
65%,
|
||||||
|
80.1%,
|
||||||
|
90%,
|
||||||
|
90.2%,
|
||||||
|
100% {
|
||||||
|
color: #fff;
|
||||||
|
box-shadow: 0 0 10px #03bcf4,
|
||||||
|
0 0 20px #03bcf4,
|
||||||
|
0 0 40px #03bcf4,
|
||||||
|
0 0 60px #03bcf4,
|
||||||
|
0 0 160px #03bcf4,
|
||||||
|
;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
nav {
|
||||||
|
background: transparent;
|
||||||
|
border-bottom: 4px solid white;
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.items {
|
||||||
|
padding: 1rem;
|
||||||
|
-webkit-box-reflect: below 1px linear-gradient(transparent, #0008);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.items ul {
|
||||||
|
display: flex;
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.items ul li {
|
||||||
|
margin-right: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.items ul li a {
|
||||||
|
color: rgb(255, 255, 255);
|
||||||
|
text-decoration: none;
|
||||||
|
font-family: 'Gemunu Libre', sans-serif;
|
||||||
|
font-family: 'Silkscreen', cursive;
|
||||||
|
font-size: 2vh;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover {
|
||||||
|
border-bottom: 3px solid white;
|
||||||
|
border-radius: 2px;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
Loading…
Reference in new issue