web.htmlcss
Open in Telegram
Learn HTML CSS and JavaScript..
Show moreThe country is not specifiedThe category is not specified
6 045
Subscribers
+824 hours
+337 days
+19930 days
Posts Archive
6 045
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body{
display:flex;
justify-content:center;
align-items:center;
min-height:100vh;
background:#262626;
}
.container{
width:300px;
height:395px;
position:relative;
overflow:hidden;
border:2px groove #fff;
}
.imagebox{
width:100%;
height:100%;
transition:.5s;
}
.imagebox img{
width:100%;
height:100%;
}
.box{
width:0px;
height:0px;
position:absolute;
background:rgba(255,255,255,0.2);
transition:1s ease;
}
.left-top{
top:0;
left:0;
}
.right-top{
top:0;
right:0;
}
.left-bottom{
bottom:0;
left:0;
}
.right-bottom{
bottom:0;
right:0;
}
.container:hover .box{
width:100%;
height:100%;
}
.container:hover .imagebox
{
transform:rotate(30deg) scale(1.8);
}
.content{
position:absolute;
top:0;
width:100%;
height:100%;
opacity:0;
transition-delay:0.4s;
transition-duration:0.6s;
}
.content h2{
text-align:center;
color:orange;
text-shadow:0px 1px 3px #000;
text-transform:uppercase;
}
.content p{
padding:30px;
text-align:justify;
font-family:fantasy;
font-weight:bolder;
line-height:23px;
font-size:13px;
}
.content a{
color:#fff;
background:orange;
padding:15px 15px;
margin-left:70px;
text-decoration:none;
font-weight:bolder;
font-size:12px;
box-shadow:0px 3px 10px
rgba(0,0,0,0.5);
}
.container:hover .content{
opacity:1;
}
</style>
</head>
<body>
<div class="container">
<div class="imagebox">
<img src="bhediya-poster.jpg">
</div>
<div class="box left-top"></div>
<div class="box right-top"></div>
<div class="box left-bottom"></div>
<div class="box right-bottom"></div>
<div class="content">
<h2>Bhediya Movie</h2>
<p>
Bhediya is an upcoming Indian
Hindi-language comedy horror
film directed by Amar Kaushik.
Produced by Dinesh Vijan, it
stars Varun Dhawan and Kriti
Sanon. It is the third installment
in Vijan's horror-comedy universe,
scheduled to release on 25 November 2022.
</p>
<a href="#">
Play Trailer on YouTube
</a>
</div>
</div>
</body>
</html>
6 045
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body{
display:flex;
justify-content:center;
align-items:center;
height:100vh;
}
.items{
width:70px;
height:10px;
border-radius:50px;
background:red;
transform-origin:0px 100px;
animation:a 2s linear alternate
infinite;
}
.item1{
background:red;
animation-delay:0s;
}
.item2{
background:black;
animation-delay:0.5s;
}
.item3{
background:yellow;
animation-delay:1s;
}
@keyframes a{
0%{
background:yellow;
height:1px;
}
50%{
background:#262626;
height:30px;
}
100%{
background:red;
height:100px;
}
}
</style>
</head>
<body>
<div class="container">
<div class="items item1"></div>
<div class="items item2" ></div>
<div class="items item3" ></div>
</div>
</body>
</html>
6 045
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body{
display:flex;
justify-content:center;
align-items:center;
min-height:100vh;
background:#262626;
}
.container{
width:150px;
height:50px;
perspective:600px;
}
.flip{
width:100%;
height:100%;
position:relative;
transform-style:preserve-3d;
transition:transform 0.5s;
}
.container:hover .flip{
transform:rotateX(180deg);
}
.front,.back{
width:100%;
height:100%;
position:absolute;
background:#55c2da;
backface-visibility:hidden;
border-radius:30px;
}
.back{
transform:rotateX(180deg);
}
p{
font-weight:bold;
font-family:sans-serif;
text-align:center;
color:black;
}
</style>
</head>
<body>
<div class="container">
<div class="flip">
<div class="front">
<p>Click me</p>
</div>
<div class="back">
<p>Thank you !</p>
</div>
</div>
</div>
</body>
</html>
6 045
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body{
display:flex;
justify-content:center;
align-items:center;
height:100vh;
}
div{
position:absolute;
}
button{
padding:10px 50px;
border:none;
font-size:20px;
font-weight:800;
letter-spacing:1px;
background:#262626;
color:#fff;
text-transform:uppercase;
}
button::before{
content:" ";
width:30px;
height:30px;
position:absolute;
top:-5px;
left:-5px;
border-top:3px solid #000;
border-left:3px solid #000;
transition:0.6s;
}
button::after{
content:" ";
width:30px;
height:30px;
position:absolute;
bottom:-5px;
right:-5px;
border-bottom:3px solid #000;
border-right:3px solid #000;
transition:0.6s;
}
button:hover:before,
button:hover:after{
width:100%;
height:100%;
}
</style>
</head>
<body>
<div>
<button>Button</button>
</div>
</body>
</html>
6 045
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body{
display:flex;
justify-content:center;
align-items:center;
height:100vh;
background:#262626;
}
.items{
width:25px;
height:100px;
background:red;
position:relative;
border-radius:30px 0px 30px 0px;
animation:rotate 4s linear
infinite;
}
.item1{
top:100px;
background:blue;
animation-delay:0.5s;
}
.item2{
background:green;
animation-delay:1s;
}
.item3{
top:-100px;
background:red;
animation-delay:1.5s;
}
@keyframes rotate{
0%{
transform:rotate(0deg);
}
50%{
transform:rotate(360deg);
}
100%{
transform:rotate(0deg);
}
}
</style>
</head>
<body>
<div class="conatainer">
<div class="items item1"></div>
<div class="items item2"></div>
<div class="items item3"></div>
</div>
</body>
</html>
6 045
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body{
display:flex;
justify-content:center;
align-items:center;
height:100vh;
background:#2C2C2C;
}
.container{
width:290px;
height:190px;
background:linear-gradient(60deg,
#000,#434343);
border-radius:10px;
box-shadow: rgba(0, 0, 0,.7)
0px 4px 12px;
}
.container .card{
width:100%;
height:100%;
margin:0 auto;
position:relative;
z-index:1;
border-radius:10px;
transition:1s;
box-shadow:rgba(0, 0, 0,.7)
0px 4px 12px;
}
.card img{
width:100%;
height:100%;
border-radius:10px;
}
.container .content{
width:100%;
height:100%;
border-radius:10px;
transform:translateY(-168px);
transition:1s;
}
.content h3,p{
text-align:center;
color:transparent;
background:linear-gradient(#41311b,
#f8c842);
-webkit-background-clip: text;
text-shadow:0px 6px 10px
rgba(0,0,0,.5);
}
.content h3{
font-size:25px;
text-transform:uppercase;
}
.content p{
margin-top:-15px;
font-family:monospace;
}
.container:hover .card{
width:60%;
height:70%;
opacity:1;
transform:translateY(-40px);
}
.container:hover .content{
transform:translateY(-40px);
}
</style>
</head>
<body>
<div class="container">
<div class="card">
<img src="https://wallpapers.com/images/hd/iron-man-tony-stark-ouqxo5w2b59h0042.webp">
</div>
<div class="content" >
<h3>iron man</h3>
<p>Hey Friends i am iron
man.</p>
</div>
</div>
</body>
</html>
6 045
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
*{
}
body{
display:flex;
justify-content:center;
align-items:center;
min-height:100vh;
background:linear-gradient(45deg, #f09433, #ff5acd);
}
.card{
width:320px;
height:190px;
position:relative;
background:#fff;
border-radius:20px;
transition:0.5s;
box-shadow:0px 15px 50px rgba(0,0,0,.35);
}
.card:hover{
height:350px;
}
.card .imgbox{
width:130px;
height:130px;
position:absolute;
top:-30%;
left:50%;
transform:translateX(-50%);
background:#fff;
border-radius:50%;
box-shadow:0px 15px 50px rgba(0,0,0,.35);
transition:0.5s;
}
.card:hover .imgbox
{
width:170px;
height:170px;
}
.imgbox img{
width:100%;
height:100%;
border-radius:50%;
}
.card .content{
position:absolute;
width:100%;
height:100%;
display:flex;
justify-content:center;
align-items:flex-end;
overflow:hidden;
}
.card .content .details{
padding:20px;
padding-bottom:30px;
text-align:center;
width:100%;
transition:0.5s;
transform:translateY(150px);
}
.card:hover .content .details
{
transform:translateY(0px);
}
.card .content .details h2
{
font-size:1.25em;
font-weight:600;
color:#555;
line-height:1.2em;
}
.card .content .details h2 span
{
font-size:0.75em;
font-weight:500;
opacity:0.5;
}
.card .content .details .data
{
display:flex;
justify-content:space-between;
margin:20px 0;
}
.card .content .details .data h3
{
font-size:1em;
color:#555;
line-height:1.2em;
font-weight:600;
}
.card .content .details .data h3 span
{
font-size:0.85em;
font-weight:400;
opacity:0.5;
}
.card .content .details .btn
{
display:flex;
justify-content:space-between;
gap:20px;
}
.card .content .details .btn button
{
padding:10px 35px;
border-radius:5px;
border:none;
outline:none;
font-size:1em;
font-weight:500;
background:#ff5f95;
color:#fff;
}
.card .content .details .btn button:nth-child(2)
{
border:1px solid #999;
color:#999;
background:#fff;
}
</style>
</head>
<body>
<div class="card">
<div class="imgbox">
<img src="logo.jpg">
</div>
<div class="content">
<div class="details">
<h2>web.htmlcss<br><span>Frontend Developer</span></h2>
<div class="data">
<h3>65<br><span>Posts</span></h3>
<h3>19.7K<br><span>Followers</span></h3>
<h3>95<br><span>Following</span></h3>
</div>
<div class="btn">
<button>Follow</button>
<button>Message</button>
</div>
</div>
</div>
</div>
</body>
</html>
6 045
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body{
background:#1B2631;
}
div{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
div input{
width:45px;
height:45px;
color:#fff;
font-weight:bold;
border-radius:50px;
border:3px solid #FF4500;
outline:none;
transition:2s ease;
padding-left:15px;
padding-right:13px;
box-sizing:border-box;
background:#1B2631;
box-shadow:0px 0px 5px #FF4500,
0px 0px 5px #FF4500;
}
div input::placeholder{
color:#fff;
font-weight:bold;
opacity:0;
}
div input:focus::placeholder{
opacity:1;
}
div input:hover{
width:250px;
}
</style>
</head>
<body>
<div>
<input type="search" placeholder="Search . . ." >
</div>
</body>
</html>
