PR

<!
DOCTYPE html>
<html>
<head>
<title>Craft&Crocheting</title>
<link charset="UTF-8">
<link rel="stylesheet" href="vacuta.css" type="text/css">
<script type="module"
src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
<script nomodule
src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>
</head>
<body>
</head>
<body>
<div class="up">
<table>
<tr>
<td> <img class="flw2" src="pngwing.com (15).png"></td>
<td> <h1>Craft&Crocheting</h1></td>
<td> <img class="flw" src="pngwing.com (15).png"></td>
</tr>
</table>
</div>
<hr id="hr1">
<hr id="hr2">
<hr id="hr3">
<div id="slidebar" onclick="show()">
<ul>
<li><a href="#">Home<ion-icon name="home-outline" class="home"></ion-
icon></a></li>
<li><a href="#">Metode plata<ion-icon name="card-outline"
class="card"></ion-icon></a></li>
<li><a href="#">Despre mine<ion-icon name="person-outline"
class="man"></ion-icon></a></li>
<li><a href="#">Instagram<ion-icon name="logo-instagram"
class="Instagram"></ion-icon></a></li>
<li><a href="#">Informati<ion-icon name="information-circle-outline"
class="info"></ion-icon></ion-icon></a></li>
</ul>
</div>
<div class="box">
<hr id="h1">
<hr id="h2">
<div class="buy">
<a href="#">
<span></span>
<span></span>
<span></span>
<span></span>
Cumpara
</a>
</div>
</div>
<div class="dsp"></div>
<button onclick="showConfetti()">
<span>🎉</span>
<span>Like</span>
</button>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/confetti.browser.min.j
s"></script>
<script src="script.js"></script>
</body>
</html>
---------------------------------------------------
*{
margin: 0;
padding: 0;
text-decoration: none;
}
body{
background: linear-gradient(to right,#6DB2F8,#006EDC);
font-family: sans-serif;
}
.up{
position: relative;
width: 100%;
background-color: #003A76 ;
box-shadow: 0 8px 60px black,
0 8px 8px black,
0 -4px 4px gray;
}
.flw{
position: relative;
top: 2px;
left: 8px;
height: 9.5%;
width: 5.5%;
animation: rotate 2s infinite;
}
@keyframes rotate{
from{
transform: rotate(0);
}
to{
transform: rotate(360deg);
}
}
.up table{position: relative;

left: 250px;
font-size: 150%;
}
h1{
font-family: 'Poppins', sans-serif;
background-image: linear-gradient( 43deg,#4158D0 0%, #C850C0 46%, #8926F2
100%);
-webkit-background-clip: text;
color: transparent;
}
.flw2{
position: relative;
left: 550px;
height: 9.5%;
width: 5.5%;
animation: rotate 2s infinite;
}
#slidebar{
position: fixed;
width: 200px;
height: 100%;
left: -170px;
background: #042331;
transition: 0.5s ease;
}
#slidebar li{
font-size: 20px;
padding: 30px;
border-bottom: 1px solid gray;
}
a{
color: white;
font-size: 16px;
}
ul li:hover a{
padding-left: 25px;
transition: 0.2s ease;
}
#slidebar:hover{
left: 0
}
.home{
position: relative;
left: 103px;
}
.card{
position: relative;
left: 52.5px;
}
.man{
position: relative;
font-size: 20px;
left: 52.5px;
}
.Instagram{
position: relative;
left: 74px;
}
.info{
position: relative;
left: 80px;
font-size: 22px;
}
.box{
position: relative;
top: 50px;
left: 700px;
width: 600px;
height: 500px;
border: 1.5px solid #0F20AF;
background: transparent;
border-radius: 10px;
box-shadow: 0 8px 60px black,
0 8px 8px black,
0 -4px 4px gray;
}
#h1{
position: relative;
top: 40px;
opacity: .5;
}
#h2{
position: relative;
top: 430px;
opacity: .5;
}
.buy a{
position: absolute;
top:445px;
left: 380px;
color: black;
padding: 5px 15px;
font-size: 26px;
letter-spacing: 2px;
text-decoration: none;
box-shadow: 0 5px 50px rgba(0,0,0,.5);
overflow: hidden;
}
.buy a::before{
content: '';
position: absolute;
top: 2px;
left: 2px;
bottom: 2px;
width: 50%;
background: rgba(255,255, 255, 0.05);
}
.buy a span:nth-child(1){
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 3px;
background: linear-gradient(to right , #0ec070, #1779ff);
animation: animate1 2s linear infinite;
animation-delay: 1s;
}
@keyframes animate1{
0%{
transform: translateX(-100%);
}
100%{
transform: translateX(100%);
}
}
position: absolute;
top: 0;
right: 0;
width: 3px;
height: 100%;
background: linear-gradient(to bottom , #0ec070, #1779ff);
}
0%{
transform: translateY(-100%);
}
100%{
transform: translateY(100%);
}
}
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 3px;
background: linear-gradient(to left , #0ec070, #1779ff);
}
0%{
transform: translateX(100%);
}
100%{
transform: translateX(-100%);
}
}
position: absolute;
top: 0;
left: 0;
width: 3px;
height: 100%;
background: linear-gradient(to top , #0ec070, #1779ff);
animation-delay: 1s;
}
0%{
transform: translateY(100%);
}
100%{
transform: translateY(-100%);
}
}
.dsp{
position: relative;
top: 100px;
left: 300px;
width: 1200px;
height: 250px;
border: 1px solid black;
box-shadow: inset 0 8px 30px black,
inset 0 8px 8px black,
inset 0 -4px 4px gray;
}
button{
position: relative;
left: 1300px;
cursor: pointer;
font-family: sans-serif;
background: #404663;
color: #fff;
font-size: 2rem;
font-weight: 400;
padding: 0.5rem 1.25rem;
border-radius: 0.5em;
display: flex;
gap: 0.5em;
box-shadow: 0px 1.7px 2.2px #00000005
0px 4px 5.3px #00000007
0px 7.5px 10px #00000009
0px 13.4px 17.9px #0000000b
0px 25.1px 33.4px #0000000d
0px 60px 80px #00000012;
transition: transform 0.3s;
}
button:active{
transform: scale(1.05);
}

PR

Uploaded by

Copyright:

Available Formats

PR

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

PR

Uploaded by

Copyright:

Available Formats

<!

<div id="slidebar" onclick="show()">

.up table{position: relative;

You might also like