#codevember -28 Christmas Tree

Developer
Sasha
Size
2,892 Kb
Views
68,816
  1. #codevember -28 Christmas Tree Previews
  2. #codevember -28 Christmas Tree HTML Codes
  3. #codevember -28 Christmas Tree CSS Codes
  4. #codevember -28 Christmas Tree JS Codes

How do I make an #codevember -28 christmas tree?

Hover to see the magic! :) . What is a #codevember -28 christmas tree? How do you make a #codevember -28 christmas tree? This script and codes were developed by Sasha on 12 June 2022, Sunday.

#codevember -28 Christmas Tree Previews
IQ Test

#codevember -28 Christmas Tree - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>#codevember -28 Christmas Tree</title> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container"> <div class="star"></div> <div class="pressie"> <div class="cover"></div> <div class="wrap"> </div> <div class="ribbon"></div> </div> <div class="tree"> <div class="base"> </div> <div class="layer"> <div class="line"> </div> <div class="bauble one"></div></div> <div class="layer two"> <div class="line two"> </div> <div class="bauble two"></div> <div class="socks"> <div class="top"> </div> <div class="foot"></div></div> </div> <div class="layer three"> <div class="line three"> </div> <div class="bauble three"></div> <div class="socks two"> <div class="top"> </div> <div class="foot two"></div></div> </div> </div> <div class="layer four"> <div class="bauble four"></div> <div class="star two"></div> <div class="line four"> </div> </div> </div>
</div>
<br>
<br>
<br> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

#codevember -28 Christmas Tree - Script Codes CSS Codes

body{ background: #FFF;
}
.container { position: absolute; left: 300px; top: 50px;
}
.socks { position: absolute; top: 80px; left: 10px; z-index: 1; transform: rotate(10deg);
}
.socks.two { position: absolute; top: 143px; left: -40px; z-index: 1; transform: rotate(-10deg);
}
.socks:hover { animation: 1.9s deco linear infinite;
}
.top { position: absolute; width: 15px; height: 35px; background: #E54B4B; border-radius: 5px;
}
.foot { position: absolute; top: 20px; left: 0; width: 25px; height: 15px; border-radius: 30px; background: #E54B4B;
}
.foot.two { position: absolute; top: 20px; left: -10px; width: 25px; height: 15px; border-radius: 30px; background: #E54B4B;
}
.tree { position: absolute;
}
.base { width: 210px; height: 10px; background: #CCC; position: absolute; top: 304px; left: -45px; border-radius: 100%;
}
.base:after { content: ''; width: 20px; height: 20px; background: #84714F; position: absolute; top: -25px; left: 83px;
}
.layer { position: absolute; width: 0;	height: 0;	border-left: 50px solid transparent;	border-right: 50px solid transparent;	border-bottom: 100px solid #499F68;
}
.layer.two{ position: absolute; top: 30px; left: -10px; border-left: 60px solid transparent;	border-right: 60px solid transparent;	border-bottom: 120px solid #499F68;
}
.layer.three{ position: absolute; top: 50px; left: -30px; border-left: 80px solid transparent;	border-right: 80px solid transparent;	border-bottom: 160px solid #499F68;
}
.layer.four{ position: absolute; top: 80px; left: -50px; border-left: 100px solid transparent;	border-right: 100px solid transparent;	border-bottom: 200px solid #499F68;
}
.bauble { z-index: 1; position: absolute; border-radius: 100%;
}
.bauble.one { top: 65px; width: 13px; height: 13px; background: #FFE066;
}
.bauble.two { top: 105px; left: -30px; width: 13px; height: 13px; background: #FFE066;
}
.bauble.three { top: 110px; left: 15px; width: 13px; height: 13px; background: #FFE066;
}
.bauble.four { top: 163px; left: -30px; width: 13px; height: 13px; background: #FFE066;
}
.deco { position: absolute; top: 130px; left: 30px; width: 50px; height: 20px; background: #EF476F;
/* border-radius: 100% 100% 100% 100%; */ transform: rotate(0deg);
}
.deco:after {
}
.line { z-index: 1; position: absolute; top: 70px; left: -43px; width: 70px; height: 0; background: #FFE066; border: 1px dashed #FFF; transform: rotate(-30deg);
}
.line.two { top: 93px; left: -50px; width: 85px; height: 0; background: #FFE066; border: 1px dashed #FFF; transform: rotate(-30deg);
}
.line.three { top: 123px; left: -60px; width: 106px; height: 0; background: #FFE066; border: 1px dashed #FFF; transform: rotate(-30deg);
}
.line.four { top: 153px; left: -80px; width: 136px; height: 0; background: #FFE066; border: 1px dashed #FFF; transform: rotate(-30deg);
}
.pressie { z-index: 1; position: absolute; top: 250px; left: 120px; width: 60px; height: 60px; background: #F45B69;
}
.cover { position: absolute; left: -3px; width: 66px; height: 10px; background: #F45B69; border-bottom: 1px solid #AAA;
}
.wrap { position: absolute; left: 25px; background: #59C3C3; width: 10px; height: 60px;
}
.ribbon { position: absolute; top: -30px; left: 10px; background: #FFF; width: 12px; height: 25px; border-radius: 0 80% 20% 80%; border: 3px solid #59C3C3; transform: rotate(-10deg);
}
.ribbon:after { position: absolute; top: 0; left: 20px; background: #FFF; width: 12px; height: 25px; border-radius: 0 80% 20% 80%; border: 3px solid #59C3C3; transform: rotate(60deg); content: '';
}
.pressie:hover { animation: 0.5s move linear infinite;
}
@keyframes move { 0% { transform: rotate(10deg)} 50%{transform: rotate(-30deg)} 100%{transform: rotate(10deg)}
}
@keyframes deco { 0% { transform: rotate(5deg)} 50%{transform: rotate(-10deg)} 100%{transform: rotate(5deg)}
}
.light { box-shadow: 1px 1px 10px #CCC, -2px 1px 10px #CCC, 0 -1px 10px #CCC
}
.star { z-index: 1; position: absolute; left: -49px; top: -40px; display: block; color: red; width: 0px; height: 0px; border-right: 100px solid transparent; border-bottom: 70px solid #FFE066; border-left: 100px solid transparent; transform: rotate(35deg) scale(.2);
}
.star:before { border-bottom: 80px solid #FFE066; border-left: 30px solid transparent; border-right: 30px solid transparent; position: absolute; height: 0; width: 0; top: -45px; left: -65px; display: block; content: ''; transform: rotate(-35deg);
}
.star:after { position: absolute; display: block; color: red; top: 3px; left: -105px; width: 0px; height: 0px; border-right: 100px solid transparent; border-bottom: 70px solid #FFE066; border-left: 100px solid transparent; transform:rotate(-70deg); content: '';
}
.star.two { transform: rotate(23deg) scale(.1); position: absolute; top: 102px; left: -60px;
}
.star-light {
}

#codevember -28 Christmas Tree - Script Codes JS Codes

$('.container').on('mouseover', function(){ $('.bauble').addClass('light'); $('.star').addClass('star-light');
})
$('.container').on('mouseout', function(){ $('.bauble').removeClass('light');
})
#codevember -28 Christmas Tree - Script Codes
#codevember -28 Christmas Tree - Script Codes
Home Page Home
Developer Sasha
Username sashatran
Uploaded June 12, 2022
Rating 4
Size 2,892 Kb
Views 68,816
Do you need developer help for #codevember -28 Christmas Tree?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Sasha (sashatran) Script Codes
Name
Input UI Animation
Google Inspired Floating Action Button
CSS Gallery Hover Effect
Pages of 2017
Flexgrow illustration
Moving head with Parallax.js
CSS Shop
SVG Filter Gooey Share, Social Media Button
Animated CSS Tooltip
CSS Girl
Create amazing web content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!