1) HTML
2) CSS
 |
| how to make wedding card using html and Css |
so friends start the code
code with html
<!---->
<html lang="en">
<head>
<meta content="width=device-width, initial-scale=1.0" name="viewport"></meta>
<title>My profile card</title>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet"></link>
</head>
<body>
<div class="container">
<div class="wrapper">
<p>Welcome to my profile card!!</p>
<pre class="p_1">
★ ★ ★
★ ★
★ ★ ★
★ ★
★ ★ ★
</pre>
</div>
<div class="page_1">
<br />&nbsp<img alt="Profile Image" src="https://api.sololearn.com/uploads/avatars/20277663.jpg" />
<pre> <i>
Eshbo'ri <br />
level 16
</i>
</pre>
<hr linewidth="2" />
<h5 id="h_5"></h5>
</div>
</div>
<script>
var h_5 = document.querySelector('#h_5');
var text = "Hello!\nMy name is Eshbo'ri.\n I like C++ & Js,Python and I'm learning C++!.\n If you like this code upvote & comment!.";
var textlen = text.length;
var i = -1;
var time = setInterval(myfunc,180);
function myfunc(){
i++;
h_5.innerHTML += text.charAt(i);
if(i == textlen){
clearInterval(time);
h_5.innerHTML = "Thank you for visiting!.";
}
}
</script>
</body>
</html>
code with Css
body {
background-color:#FFf;
font-family:"Poppins",sans-serif;
}
img{
width:60px;
height:60px;
border-radius:100%;
}
.p_1{
margin-top:85px;
animation-iteration-count:infinite;
animation-duration:5s;
animation-timing-function:linear;
animation-name:animation_w;
font-size:20px;
font-weight:bold;
font-variant:small-caps;
}
@keyframes animation_w{
10%{color:red;}
30%{color:lightgreen;}
50%{color:orange;}
70%{color:yellow;}
90%{color:#fff;}
}
.container{
width:200px;
height:350px;
margin-left:60px;
transform:rotateZ(-10deg);
position:absolute;
box-shadow: 3px 3px 20px 12px lightgrey;
perspective:800px;
}
.wrapper{
width:200px;
border-radius:2%;
height:350px;
background:#4030A8;
position:fixed;
text-align:center;
transform-origin:left;
box-sizing:border-box;
animation-iteration-count:infinite;
animation-duration:25s;
animation:an_1 14s ease-out 1.5s alternate 2;
color:#FFF;
}
@keyframes an_1{
to{transform:rotateY(-150deg);}
}
.page_1{
width:200px;
height:350px;
background:#fef;
margin-top:-0px;
border-radius:2%;
box-shadow:1px 1px 1px 2px red;
}
pre{
margin-top:-72px;
margin-left:-4px;
}
hr{
background-color:red;
margin-top:-10px;
}
h5{
text-align:center;
}
Thanks for see this post
0 Comments