Search This Blog
Subjects Lists
Friday, March 27, 2026
C++ Program to Create C++ Project to do Sunflower field with sky, cloud and sun
Your welcome to our website COMPUTER SOFT SKILLS, after reading this article you can make this in just 2 minutes.
YOU CAN COPY THIS CODE AND SAVE IN YOUR SYSTEM.
Sunday, January 25, 2026
Happy Republic Day Wish Using HTML and CSS | 26 January wish using HTML/CSS
Happy Republic Day Wish Using HTML and CSS, 26 January wish using HTML/CSS
<!-- WELCOME ALL OF YOU ON COMPUTER SOFT SKILLS CHANNEL ------>
<!-- 26 January Republic Day Wish Using HTML/CSS ------>
<!DOCTYPE html>
<html>
<head>
<title>Happy Republic Day</title><style>
*{
margin:0;
padding:0;
font-family:"Montserrat",sans-serif;
box-sizing: border-box;
}
body{
height: 100vh;
background: linear-gradient(160deg,darkorange 5%,white 20%, white 80%, lawngreen 100%);
display:flex;
justify-content:center;
align-items:center;
flex-direction: column;
overflow:hidden;
}
.chakra{
position: relative;
width:250px;
height: 250px;
color: blue;
border: 10px solid currentcolor;
border-radius: 50%;
transform:rotateY(180deg);
animation: outer .5s cubic-bezier(0.25, 1, 0.7, 1.35), rotate 35s linear infinite 5s;
}
.chakra .spikes,
.chakra .spikes .spike{
position: absolute;
top: 0;
left:0;
width: 100%;
height: 100%;
pointer-events: none;
}
.chakra .spikes .spike{
transform:rotate(calc(15deg * var(--i)));
}
.chakra .spikes .spike::before{
content:"";
position: absolute;
width: 16px;
height:16px;
background: currentcolor;
border-radius:50%;
top: -8px;
left: calc(50% - 8px);
animation: circle 2s linear calc(-0.05s * var(--i));
}
.chakra .spikes .spike::after{
content:"";
position: absolute;
width: 10px;
height:50%;
background: currentcolor;
top: -8px;
left: calc(50% - 5px);
transform-origin: bottom;
transform: rotate(7.5deg);
clip-path:polygon(50% 5%, 100% 50%, 50% 95%, 0% 50%);
animation: spike 4s linear calc(-0.05s * var(--i))
}
.chakra::after{
content:"";
position: absolute;
width: 25px;
height:25px;
background: currentcolor;
border-radius:50%;
top: calc(50% - 12px);
left:calc(50% - 12px);
animation: inner 2s cubic-bezier(0.25, 1, 0.7, 1.35)
}
h1{
font-size: 45px;
color: red;
text-transform: uppercase;
margin-top: 25px;
display: flex;
gap: 25px;
font-weight: 600;
overflow: hidden;
}
h1 span{
animation: text 5s ease calc(-0.3s * var(--i))
}
h2{
font-size: 80px;
font-weight: 700;
color: Green;
animation: text 5s ease-in-out;
}
@keyframes outer{
0%{
transform: rotateY(180deg) scale(0);
}
}
@keyframes rotate{
to{transform: rotateY(180deg) rotate(-360deg)
}
}
@keyframes inner{
0%, 75%{
transform: scale(0);
}
}
@keyframes circle{
0%,90%{
opacity: 0;
}
}
@keyframes spike{
0%, 90%{
opacity: 0;
clip-path: polygon(50% 90%, 100% 90%, 90% 95%, 0 50%)
}
}
@keyframes text{
0%,80%{
opacity: 0;
transform: translateY(100%)
}
}
</style>
</head>
<body>
<div class="chakra">
<div class="spikes">
<div class="spike" style="--i: 1"></div>
<div class="spike" style="--i: 2"></div>
<div class="spike" style="--i: 3"></div>
<div class="spike" style="--i: 4"></div>
<div class="spike" style="--i: 5"></div>
<div class="spike" style="--i: 6"></div>
<div class="spike" style="--i: 7"></div>
<div class="spike" style="--i: 8"></div>
<div class="spike" style="--i: 9"></div>
<div class="spike" style="--i: 10"></div>
<div class="spike" style="--i: 11"></div>
<div class="spike" style="--i: 12"></div>
<div class="spike" style="--i: 13"></div>
<div class="spike" style="--i: 14"></div>
<div class="spike" style="--i: 15"></div>
<div class="spike" style="--i: 16"></div>
<div class="spike" style="--i: 17"></div>
<div class="spike" style="--i: 18"></div>
<div class="spike" style="--i: 19"></div>
<div class="spike" style="--i: 20"></div>
<div class="spike" style="--i: 21"></div>
<div class="spike" style="--i: 22"></div>
<div class="spike" style="--i: 23"></div>
<div class="spike" style="--i: 24"></div>
</div>
</div>
<h1>
<span style="--i: 3">Happy</span>
<span style="--i: 2">Republic</span>
<span style="--i: 1">Day</span>
</h1>
<br>
<h2>
<span style="--i: 1">2026</span>
</h2>
</body>
</html>
Saturday, January 10, 2026
3D Social Media Button Using HTML and CSS | 3D Button Using HTML and CSS | SOcial Media Button Creating by HTML and CSS
3D Social Media Button Using HTML and CSS | 3D Button Using HTML and CSS | SOcial Media Button Creating by HTML and CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>compter soft skills</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
<style>
*
body {
background-repeat: no-repeat;
background-size: 100% 100%;
background-attachment: fixed;
background-image: url(bi.jpg)
}
{
font-family: "Roboto", sans-serif;
padding: 0;
margin: 0;
box-sizing: border-box;
}
ul {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
margin: 0;
padding: 0;
}
ul li {
list-style: none;
margin: 0 5px;
}
ul li a .fa-brands {
font-size: 40px;
color: black;
line-height: 80px;
transition: 0.5s;
padding-right: 14px;
}
ul li a span {
padding: 0;
margin: 0;
position: absolute;
top: 30px;
letter-spacing: 4px;
transition: 0.5s;
}
ul li a {
text-decoration: none;
display: absolute;
display: block;
width: 210px;
height: 80px;
background: white;
padding-left: 20px;
text-align: left;
transform: rotate(-30deg) skew(25deg) translate(0, 0);
transition: 0.5s;
box-shadow: -20px 20px 10px rgba(248, 8, 228, 0.5);
}
ul li a::before {
content: '';
position: absolute;
top: 10px;
left: -20px;
height: 100%;
width: 20px;
background-color: #ee0000d1;
transform: 0.5s;
transform: rotate(0deg) skewY(-45deg);
}
ul li a::after {
content: '';
position: absolute;
bottom: -20px;
left: -10px;
height: 20px;
width: 100%;
background: #ee0000d1;
transform: 0.5s;
transform: rotate(0deg) skewX(-45deg);
}
ul li a:hover {
transform: rotate(-30deg) skew(25deg) translate(20px, -15px);
box-shadow: -50px 50px 50px rgba(0, 0, 0, 0.5);
}
ul li:hover .fa-brands {
color: #fff;
}
ul li:hover span {
color: #fff;
}
ul li:hover:nth-child(1) a {
background: #3b5998;
}
ul li:hover:nth-child(1) a::before {
background: #0e4bc7;
}
ul li:hover:nth-child(1) a::after {
background: #0e4bc7;
}
ul li:hover:nth-child(2) a {
background: #00bbff;
}
ul li:hover:nth-child(2) a::before {
background: #00bbffb3;
}
ul li:hover:nth-child(2) a::after {
background: #0293c7b3;
}
ul li:hover:nth-child(3) a {
background: #ff1e00;
}
ul li:hover:nth-child(3) a::before {
background: #b33a2b;
}
ul li:hover:nth-child(3) a::after {
background: #e66a5a;
}
ul li:hover:nth-child(4) a {
background: #ff002f;
}
ul li:hover:nth-child(4) a::before {
background: #d81c3f;
}
ul li:hover:nth-child(4) a::after {
background: #e46880;
}
</style>
</head>
<body>
<ul>
<li>
<a href="#">
<i class="fa-brands fa-facebook-f" aria-hidden="true"></i>
<span>- Facebook</span>
</a>
</li>
<li>
<a href="#">
<i class="fa-brands fa-twitter" aria-hidden="true"></i>
<span>- Twitter</span>
</a>
</li>
<li>
<a href="#">
<i class="fa-brands fa-google-plus-g" aria-hidden="true"></i>
<span>- Google</span>
</a>
</li>
<li>
<a href="#">
<i class="fa-brands fa-instagram" aria-hidden="true"></i>
<span>- Instgram</span>
</a>
</li>
</ul>
</body>
</html>
Featured Post
C++ Program to Create C++ Project to do Sunflower field with sky, cloud and sun
C++ Program to Create C++ Project to do Sunflower field with sky, cloud and sun HELLO VIEWERS YOU MIGHT BE INTERESTED IN THIS POST. Your wel...
Popular Posts
-
//...........WELCOE ALL OF YOU ON ROHIT TECH STUDY CHANNEL.................// //....>>>>>.......C++ PROGRAM TO DRAW HEART AN...
-
MOCING TRAIN PROJECT IN C++ LANGUAGE //.......... WELCOME ALL OF YOU ON ROHIT TECH STUDY CHANNEL................// //,,,,, ,,,,, C++ PROGRA...
-
3D CAR ANIMATION IN C++ LANGUAGE | C++ PROJECT Download source code // WELCOME ALL OF YOU ON ROHIT TECH STUDY CHANNEL // // Animated 3D Ca...

