Coding club?

We aren't anywhere near Christmas but here's a simple tutorial to make a Christmas tree using CSS.

http://www.cssviking.com/css-christmas-tree#comment-2483

Cssviking.com originally posted this in 2012 but it would make a good exercise for coding clubs.

.ctree {
    background-color: #FFFFFF;
    border: 1px solid black;
    margin: 15px;
    height: 350px;
    position: relative;
}
.ctree .trunk {
    border-color: brown transparent;
    border-style: solid;
    border-width: 0 14px 300px;
    bottom: 0;
    left: 50%;
    height: 0px;
    position: absolute;
    width: 0;
}
.ctree .branches {
    border-bottom-left-radius: 50% 20px;
    border-bottom-right-radius: 50% 20px;
    border-color: green transparent;
    border-style: solid;
    border-width: 0 100px 120px;
    bottom: -270px;
    height: 0px;
    left: -100px;
    position: absolute;
    width: 0;
}
.ctree .branches.middle {
    border-bottom-left-radius: 50% 15px;
    border-bottom-right-radius: 50% 15px;
    border-width: 0 80px 100px;
    bottom: -176px;
    left: -80px;
}
.ctree .branches.top {
    border-bottom-left-radius: 50% 12px;
    border-bottom-right-radius: 50% 12px;
    border-width: 0 60px 80px;
    bottom: -100px;
    left: -60px;
}
.ctree .band {
    background-color: transparent;
    border-color: white;
    border-style: solid;
    border-width: 6px;
    border-radius: 103px;
    clip: rect(152px, 260px, 260px, 82px);
    margin-bottom: 15px;
    height: 200px;
    right: -50px;
    margin-left: -165px;
    position: absolute;
    bottom: -110px;
    width: 200px;
}
.ctree .middle .band {
    bottom: -92px; 
    clip: rect(162px, 260px, 260px, 95px);    
    right: -50px;
}
.ctree .top .band {
    bottom: -77px; 
    clip: rect(172px, 260px, 260px, 110px);    
    right: -50px;
}
.ctree .star {
    border-color: yellow transparent;
    border-style: solid;
    border-width: 0 30px 21px;
    -moz-border-end-style:dashed !important;
    display: block;
    height: 0px;
    left: -28px;
    position: absolute;
    top: -10px;
    -moz-transform: rotate(35deg);
    -ms-transform: rotate(35deg);
    -webkit-transform: rotate(35deg);
    transform: rotate(35deg);
    width: 0px;
}
.star:before {
    border-color: yellow transparent;
    border-style: solid;
    border-width: 0 9px 21px;
    -moz-border-end-style:dashed !important;
    content: '';
    display: block;
    height: 0;
    left: -22px;
    position: absolute;
    top: -14px;
    -moz-transform: rotate(-35deg);
    -ms-transform: rotate(-35deg);
    -webkit-transform: rotate(-35deg);
    transform:rotate(-35deg);
    width: 0;
}
.star:after {
    border-color: yellow transparent;
    border-style: solid;
    border-width: 0 30px 21px;
    -moz-border-end-style:dashed !important;
    content: '';
    display: block;
    height: 0px;
    left: -34px;
    position: absolute;
    top: 3px;
    -moz-transform: rotate(-70deg);
    -ms-transform: rotate(-70deg);
    -webkit-transform: rotate(-70deg);
    transform: rotate(-70deg);
    width: 0px;
}