Merge b96578e892 into 120204995f
vamik2001
3 years ago
committed by
GitHub
commit
299baf7fe2
@ -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