Codeer een ijsje

[vc_row type=”in_container” full_screen_row_position=”middle” scene_position=”center” text_color=”dark” text_align=”left” overlay_strength=”0.3″][vc_column column_padding=”no-extra-padding” column_padding_position=”all” background_color_opacity=”1″ background_hover_color_opacity=”1″ column_shadow=”none” width=”1/1″ tablet_text_alignment=”default” phone_text_alignment=”default” column_border_width=”none” column_border_style=”solid”][vc_column_text]

Codeer een ijsje

Jullie hebben het vast op elk medium al gehoord, en ja ook wij zullen het nog even melden! Vandaag wordt het rond de 29 graden! Heerlijk! Wij hadden trek in een ijsje en dat bracht ons op de gedachte om te laten zien hoe je een ijsje kan coderen.

HTML

Plak de onderstaande code in je tekst editor

[/vc_column_text][/vc_column][/vc_row][vc_row type=”in_container” full_screen_row_position=”middle” bg_color=”#e8e8e8″ scene_position=”center” text_color=”dark” text_align=”left” overlay_strength=”0.3″][vc_column column_padding=”no-extra-padding” column_padding_position=”all” background_color_opacity=”1″ background_hover_color_opacity=”1″ column_shadow=”none” width=”1/1″ tablet_text_alignment=”default” phone_text_alignment=”default” column_border_width=”none” column_border_style=”solid”][vc_column_text]<div class=”icecream”>
<div class=”ice”></div>
<div class=”dot”></div>
<div class=”dot”></div>
<div class=”dot”></div>
<div class=”waffle”></div>
</div>[/vc_column_text][/vc_column][/vc_row][vc_row type=”in_container” full_screen_row_position=”middle” scene_position=”center” text_color=”dark” text_align=”left” overlay_strength=”0.3″][vc_column column_padding=”no-extra-padding” column_padding_position=”all” background_color_opacity=”1″ background_hover_color_opacity=”1″ column_shadow=”none” width=”1/1″ tablet_text_alignment=”default” phone_text_alignment=”default” column_border_width=”none” column_border_style=”solid”][vc_column_text]

CSS

[/vc_column_text][/vc_column][/vc_row][vc_row type=”in_container” full_screen_row_position=”middle” bg_color=”#e8e8e8e” scene_position=”center” text_color=”dark” text_align=”left” overlay_strength=”0.3″][vc_column column_padding=”no-extra-padding” column_padding_position=”all” background_color_opacity=”1″ background_hover_color_opacity=”1″ column_shadow=”none” width=”1/1″ tablet_text_alignment=”default” phone_text_alignment=”default” column_border_width=”none” column_border_style=”solid”][vc_column_text]/* resets */
*{
margin: 0;
padding: 0;
border: 0;
box-sizing: border-box;
}
*:before, *:after{
box-sizing: border-box;
}
html, body{
min-height: 100%;
}
body{
background-color: #81F4E1;
}
/* for the ice cream and shadow */
.icecream{
position: absolute;
width: 10vw;
height: 27.5vw;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
}
.icecream:before{
content: “”;
position: absolute;
bottom: -5vw;
width: 10vw;
height: 2.5vw;
background-color: rgba(0, 0, 0, 0.5);
border-radius: 50%;
-webkit-filter: blur(20px);
filter: blur(20px);
}
 
/* let’s make some strawberry ice cream */
.icecream .ice{
position: absolute;
background-color: #FF729F;
border-radius: 50%;
width: 10vw;
height: 10vw;
z-index: 0;
}
.icecream .dot{
position: absolute;
background-color: #FF729F;
border-radius: 50%;
width: 1.66667vw;
height: 1.66667vw;
top: 7.5vw;
transform: translateY(-50%);
z-index: 2;
}
.icecream .dot:nth-of-type(2){
left: 3.33333vw;
}
.icecream .dot:nth-of-type(3){
left: 6.66667vw;
}
.icecream .dot:before{
content: “”;
position: absolute;
left: 100%;
border-radius: 50%;
background-color: #FF729F;
width: 100%;
height: 100%;
}
/* for the cone */
.icecream .waffle{
position: absolute;
top: 7.5vw;
z-index: 1;
}
.icecream .waffle:before{
content: “”;
position: absolute;
border-top: 20vw solid #CF9950;
border-left: 5vw solid transparent;
border-right: 5vw solid transparent;
}[/vc_column_text][/vc_column][/vc_row]