Code snippet

Your code snippet will appear below. Copy-paste the snippet into an editor and modify the code as required. Companion video tutorials → provide additional guidance for most features. Snippets are free for both commercial or personal use, subject to the terms of use.

Div boxes with arrows
the main arrow box
.arrowBox{
width: 200px;
height: 30px;
background-color: #ffc728;
border-radius: 5px;
position: fixed;
top: 3em;
left: 230px;
padding: 10px;
font-family: Roboto, sans-serif;
font-size: 14px;
line-height: 22px;
color: #313333;
text-align: center;
}
the arrow itself
.arrowBox:after{
content: ' ';
width: 0px;
height: 0px;
border-top: 10px solid #ffc728;
border-left: 10px solid transparent;
border-bottom:10px solid transparent;
border-right:10px solid transparent;
position: absolute;
left: 50%;
top: 100%;
margin-left: -10px;
body section showing div and arrow
<div class="arrowBox">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
End

Outlined (see-through) div boxes with arrows
the main container
.seethroughArrowBox{
position: relative;
max-width: 600px;
height: auto;
border: 2px solid #ffffff;
margin: 100px auto;
padding: 30px;
box-sizing: border-box;
}
the arrow pointer
.seethroughArrowBox:after{
position: absolute;
width: 50px;
height: 50px;
border-top: 0px solid #ffffff;
border-right: 2px solid #ffffff;
border-bottom: 2px solid #ffffff;
border-left: 0px solid #ffffff;
top:100%;
left: 50%;
margin-left: -25px;
content: '';
transform: rotate(45deg);
margin-top: -25px;
background: #de302f;
}
body section showing see-through div and arrow
<div class="seethroughArrowBox">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
End

Borders around div boxes with arrows
this creates a typical div box
.borderedArrowBox{
position: relative;
max-width: 450px;
height: auto;
background: #ffffff;
padding: 40px;
font-size: 14px;
line-height: 1.7;
margin: 50px auto;
box-sizing: border-box;
border: 4px solid #000000;
}
this creates the arrow boxes
.borderedArrowBox:after, .borderedArrowBox:before{
position: absolute;
content: '';
width: 0;
height: 0;
top: 100%;
left: 50%;
}
this creates creates the inner arrow (the pointer) which has the same colour as the div's fill colour, in this case #ffffff
.borderedArrowBox:after{
border-top: 20px solid #ffffff;
border-right: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid transparent;
margin-left: -20px;
}
this creates the outer arrow (the border) which has the same colour as the div's border, in this case #000000. This also forms the border for the inner arrow.
.borderedArrowBox:before{
border-top: 25px solid #000000;
border-right: 25px solid transparent;
border-bottom: 25px solid transparent;
border-left: 25px solid transparent;
margin-left: -25px;
}
body section showing border around box with arrow
<div class="borderedArrowBox">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
End

Vertically & horizontally centering div
this makes the div centered vertically and horizontally in the body or another div. Values for position, width, height, top, left can be changed to your specifications.
.centeredDiv{
background-color: #000;
position: absolute;
width: 650px;
height: 100px;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
body section showing vertically & horiztonally centered div
<div class="centeredDiv">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
End

Vertically & horizontally centering text
styling for the div box holding the text
.holdingDiv{
position: relative;
width: 500px;
height: 500px;
background-color: #ffc728;
margin: 0 auto;
padding: 50px;
}
styling for the paragraph
.centeredText{
position: relative;
font-size: 16px;
line-height: 24px;
color: #222222;
font-family: 'Roboto', sans-serif;
text-align: center;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
body section showing vertically & horiztonally centered text
<div class="holdingDiv">
<p class="centeredText">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
End

Slanted razor blade divs
this creates a normal div
.slantedDiv{
position: relative;
width: 100%;
height: auto;
background: rgba(40, 40, 40, 1);
box-sizing: border-box;
padding: 30px;
color: #fff;
margin-bottom: 200px;
}
this adds the slant or blade beneath the normal div
.slantedDiv:after{
position: absolute;
width: 100%;
height: 100%;
content: '';
background: inherit;
z-index: -1;
top: 0;
right: 0;
bottom: 0;
left: 0;
transform-origin: top left;
transform: skewY(4deg);
}
changing the transform-origin property's values to top right, or bottom left shifts the position of the razor blade, whereas changing the transform: skewY values alters the severity of the skew.
body section showing the slanted razor blade div
<div class="slantedDiv">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
End

CSS animations & keyframes
styles the arrow glyph
.animatedArrow{
position: relative;
font-size: 48px;
text-align: center;
transform: rotate(90deg);
animation: bouncearrow 1s infinite;
color: #ffc728;
}
sets the animation from start to finish, in this case the position (up and down) and the colour (yellow to black) of the arrow
@keyframes bouncearrow{
0%{top: 0px;}
50%{top: 20px; color: #000000;}
100%{top: 0px;}
}
body section showing the animated bouncing arrow
<div class="animatedArrow">
⇢
</div>
End

Sliding toggle checkboxes
styles the overall holder for the checkbox
.myLabel{
position: relative;
display: block;
width: 60px;
height: 30px;
margin-bottom: 15px;
cursor: pointer;
}
removes the default checkbox square
.myLabel input{
display: none;
}
adds the groove for the slider
.slidinggroove{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: #ababab;
border-radius: 20px;
transition: all 0.3s ease;
}
adds the slider itself which moves back and forth
.slidinggroove:after{
position: absolute;
content: "";
width: 28px;
height: 28px;
border-radius: 50%;
background: #fff;
top: 1px;
left: 1px;
transition: all 0.3s ease;
}
styles the slider when checked
input:checked + .slidinggroove{
background: #5fcf80;
}
moves the slider when checked
input:checked + .slidinggroove:after{
transform: translateX(30px);
}
styles the text in the slider
.labelterm{
position: relative;
top: 5px;
margin-left: 65px;
font-size: 16px;
color: #222;
font-family: 'Roboto', sans-serif;
}
styles the text when slider is clicked
.ontext{
position: absolute;
top: 10px;
left: 7px;
font-size: 9px;
color: #fff;
font-family: 'Roboto', sans-serif;
}
styles the text when slider is unclicked
.offtext{
position: absolute;
top: 10px;
left: 36px;
font-size: 9px;
color: #333333;
font-family: 'Roboto', sans-serif;
}
body section showing three instances of the slider
<div class="myLabel">
<input type="checkbox" id="coding">
<div class="slidinggroove">
<span class="ontext">ON</span>
<span class="offtext">OFF</span>
</div>
<label class="myLabel" for="coding" name="skills">
<p class="labelterm">Coding</p>
</label>
</div>

<div class="myLabel">
<input type="checkbox" id="design">
<div class="slidinggroove">
<span class="ontext">YES</span>
<span class="offtext">NO</span>
</div>
<label class="myLabel" for="design" name="skills">
<p class="labelterm">Design</p>
</label>
</div>

<div class="myLabel">
<input type="checkbox" id="gameplay">
<div class="slidinggroove">
<span class="ontext">1</span>
<span class="offtext">0</span>
</div>
<label class="myLabel" for="gameplay" name="skills">
<p class="labelterm">Gameplay</p>
</label>
</div>
End

Replicating form fields
styles the form holder
form{
max-width: 350px;
padding: 20px;
background: #5C97B8;
margin: 100px auto;
font-family: 'Roboto', sans-serif;
color: #fff;
font-weight: 300;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.15em;
border-top-right-radius: 50px;
box-shadow: 0px 8px 20px rgba(0,0,0,0.15);
}
styles the input fields
input{
-webkit-appearance: none;
appearance: none;
background: rgba(255,255,255,0.75);
padding: 10px;
font-size: 14px;
font-family: 'Roboto', sans-serif;
border: none;
border-bottom: 1px solid #5C97B8;
border-radius: 30px;
width: 90%;
margin-bottom: 10px;
outline: none;
}
styles the input focus
input:focus{
border-bottom: 1px solid #391262;
}
styles the div that shows the input values, along with the heading and submit button (not important to the actual functionality)
.creditcard{
background: #4D3F98;
color: #fff;
border-radius: 15px;
max-width: 100%;
height: auto;
margin: 25px auto;
padding: 20px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.creditcard h1{
font-size: 11px;
color: #fff;
font-family: 'Roboto', sans-serif;
text-align: right;
padding: 2px;
letter-spacing: 0.5em;
text-transform: uppercase;
font-weight: 300;
margin-bottom: 10px;
}
button{
padding: 8px;
background-color: #E78532;
color: #fff;
font-size: 14px;
font-family: 'Roboto', sans-serif;
border: 1px solid #E78532;
width: 100%;
cursor: pointer;
border-radius: 30px;
outline: none;
}
styles the static fields, in the div, that capture the inputted values
input.mycreditcard{
background: none;
text-transform: uppercase;
color: #fff !important;
width: 100%;
margin-bottom: 6px;
border-bottom: none;
font-size: 15px;
letter-spacing: 0.16em;
padding: 0px;
font-family: 'Assistant', sans-serif;
}
body section showing the replicating form
<form>
<h2>Ticket Collection</h2>

<p>First and Last Name
<input type="text" placeholder = "First and Last Name" id="yourName" oninput = "confirmyourName.value = yourName.value">
</p>

<p>Reservation Number
<input type="text" placeholder = "Reservation Number" id="resNumber" oninput = "confirmresNumber.value = resNumber.value">
</p>

<p>Coupon Code
<input type="text" placeholder = "Coupon Code" id="couponCode" oninput = "confirmcouponCode.value = couponCode.value">
</p>

<p>Number of Pax
<input type="range" min="0" max="10" value="0" id="pax" oninput = "confirmPax.value = pax.value">
</p>

<div class='creditcard'>
<h1>Ticket</h1>
<p>
<input type="text" class="mycreditcard" id="confirmyourName" readonly>
<input type="text" class="mycreditcard" id="confirmresNumber" readonly>
<input type="text" class="mycreditcard" id="confirmcouponCode" readonly>
<input type="text" class="mycreditcard" id="confirmPax" readonly>
</p>
</div>

<p style="margin-bottom: 25px;">
<button>Confirm & Deliver</button>
</p>
</form>
End

Animated form placeholder
styles the form holder
form{
display: block;
position: relative;
width: 400px;
height: 400px;
background: #fff;
margin: 50px auto;
padding: 30px;
}
styles the form label
label{
display: block;
position: relative;
top: -20px;
left: 0px;
color: #999;
font-family: 'Helvetica', sans-serif;
font-size: 16px;
z-index: 1;
transition: all 0.3s ease-out;
}
styles the form input
input{
display: block;
position: relative;
background: none;
border: none;
border-bottom: 1px solid #ddd;
width: 100%;
font-family: 'Helvetica', sans-serif;
font-weight: bold;
font-size: 16px;
z-index: 2;
}
styles the input when clicked on, and has valid content
input:focus, input:valid{
outline: none;
border-bottom: 1px solid #00aced;
}
styles the valid input and label content after being clicked on
input:focus + label, input:valid + label{
top: -40px;
font-size: 11px;
color: #00aced;
}
body section showing the form with animated placeholders
<form>
<input type="text" name="yourname" required autocomplete = "off" />
<label for="yourname">Your Name</label>
<input type="text" name="yoursite" required autocomplete = "off" />
<label for="yoursite">Your Website</label>
</form>
End

Responsive websites
styles the main flex container
.mainFlexcontainer{
position: relative;
max-width: 600px;
height: auto;
background: #ffffff;
margin: 50px;
display: flex;
flex-direction: row;
}
styles the left container inside the flex container
.mfcl{
background: #ffffff;
flex: 2;
padding: 20px;
font-size: 12px;
}
styles the right container inside the flex container
.mfcr{
position: relative;
background: #A07FB2;
color: #ffffff;
font-size: 2vmax;
text-align: center;
flex: 1 5%;
padding: 20px;
line-height: 1.1;
font-weight: 100;
}
media query (responsive) begins at 900px; note the encompassing opening brace for the media query, which contains all the individual elements' CSS styles
@media screen and (max-width:900px){
styles the main flex container at less than 900px
.mainFlexcontainer{
margin: 50px 0px;
flex-direction: column;
}
styles the pseudo class of the right container inside the flex container
.mfcr:after{
position: absolute;
content: '';
width: 0px;
height: 0px;
top: 100%;
left: 50%;
border-top: 10px solid #A07FB2;
border-right: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid transparent;
margin-left: -10px;
}
note the encompassing closing brace for the media query, which contains all the individual elements' CSS styles
}
body section showing the container; adjust your browser window to see the results
<section class="mainFlexcontainer">
<section class="mfcr">Quality Policy.</section>
<section class="mfcl">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</section>
</section>

<section class="mainFlexcontainer">
<section class="mfcr">Operations Procedure.</section>
<section class="mfcl">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</section>
</section>

<section class="mainFlexcontainer">
<section class="mfcr">Work Instructions.</section>
<section class="mfcl">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</section>
</section>
End

Flip card effect
styles the main flex container holding three white containers side by side
.flexHolder{
position: relative;
display: flex;
flex-direction: row;
max-width: 1280px;
margin: 48px auto;
background-color: #eeeeee;
box-sizing: border-box;
}
styles the three white containers holding each of the front (yellow) and back (black) cards
.flexitem{
position: relative;
display: block;
flex: 1;
margin: 16px 8px;
background-color: #ffffff;
box-sizing: border-box;
}
styles the card holding the front and back faces; this card is invisible to viewers so that only the front (yellow) and back (black) cards are visible
.thecard{
position: relative;
width: 100%;
height: 100%;
min-height: 320px;
cursor: pointer;
transform-style: preserve-3d;
transition: all 0.8s ease;
}
styles the psuedo class controlling the flip effect on mouseover and mouseout
.thecard:hover{
transform: rotateY(180deg);
}
styles the front (yellow) face of the card which shows by default
.thefront{
position: relative;
width: 100%;
height: 100%;
min-height: 320px;
padding: 16px;
backface-visibility: hidden;
overflow: hidden;
background: #ffc728;
color: #000;
font-family: Roboto, Helvetica, sans-serif;
box-sizing: border-box;
}
styles the back (black) face of the card which shows on mouseover
.theback{
position: absolute;
top: 0;
left: 0;
width: 100%;
min-height: 320px;
height: 100%;
padding: 16px;
backface-visibility: hidden;
overflow: hidden;
background: #111111;
color: #ffffff;
font-family: Roboto, Helvetica, sans-serif;
box-sizing: border-box;
text-align: center;
transform: rotateY(180deg);
}
media query makes the main holding container responsive
@media screen and (max-width: 768px){
.flexHolder{
flex-direction: column;
}
}
body section showing the flip card effect in a responsive container
<div class="flexHolder">

<div class="flexitem">
<div class="thecard">
<div class="thefront"><h1>Front of Card 1</h1><p>This is the front of the card. It contains important information. Please see overleaf for more details.</p></div>
<div class="theback"><h1>Back of Card 1</h1><p>Your use of this site is subject to the terms and conditions governing this and all transactions.</p>
<button>Submit</button></div>
</div>
</div>

<div class="flexitem">
<div class="thecard">
<div class="thefront"><h1>Front of Card 2</h1><p>This is the front of the card. It contains important information. Please see overleaf for more details.</p></div>
<div class="theback"><h1>Back of Card 2</h1><p>Your use of this site is subject to the terms and conditions governing this and all transactions.</p>
<button>Submit</button></div>
</div>
</div>

<div class="flexitem">
<div class="thecard">
<div class="thefront"><h1>Front of Card 3</h1><p>This is the front of the card. It contains important information. Please see overleaf for more details.</p></div>
<div class="theback"><h1>Back of Card 3</h1><p>Your use of this site is subject to the terms and conditions governing this and all transactions.</p>
<button>Submit</button></div>
</div>
</div>

</div>
End

Hover card effect
styles the holding container
.container{
position: relative;
display: block;
width: 320px;
height: 320px;
background: #000;
background: url('image.jpg');
background-size: cover;
margin: 120px auto;
border-radius: 32px;
transform: scale(1);
transition: all 0.3s ease-in-out;
}
styles the internal container that shows on hover
.hoverDiv{
position: relative;
display: block;
width: 100%;
height: 100%;
padding: 24px;
background: rgba(0,0,0,0.8);
color: #fff;
opacity: 0;
border-radius: 32px;
transition: all 0.3s ease-in-out;
transition-delay: 0.3s;
box-sizing: border-box;
}
this is the main line of code that targets the internal container
.container:hover .hoverDiv{
add properties here that you want to change when a user hovers; note that most properties with numeric values can be animated but properties without numbers, like display:block, will not animate
opacity: 1;
}
this scales up the holding container on hover
.container:hover{
transform: scale(1.03);
}
body section showing the hover card effect
<div class="container">
<div class="hoverDiv"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p></div>
</div>
End

Sliding card effect
styles the overall container
.overall--container{
position: relative;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 48px;
width: 100%;
max-width: 1312px;
padding: 16px;
margin: 100px auto;
box-sizing: border-box;
}
styles the individual internal containers
.overall--item{
position: relative;
display: block;
width: 100%;
box-sizing: border-box;
}
styles the container holding the slideable divs
.holding--container{
position: relative;
display: block;
background: #ffffff;
max-width: 100%;
min-height: 320px;
box-sizing: border-box;
}
styles the static top container
.top--block{
position: relative;
display: block;
font-weight: 800;
z-index: 1;
max-width: 100%;
min-height: 240px;
padding: 48px;
background: #f4f4f4;
color: #222222;
box-shadow: 0px 4px 6px rgba(0,0,0,0.2);
cursor: pointer;
box-sizing: border-box;
}
styles the slideable middle container
.middle--block{
position: relative;
display: block;
margin-top: -220px;
max-width: 100%;
padding: 24px 48px 8px 48px;
background: #ffc728;
color: #222222;
transition: all 0.64s cubic-bezier(0.2, 0.4, 0.2, 1) 0.2s;
box-sizing: border-box;
}
styles the static bottom container
.bottom--block{
position: relative;
display: block;
font-size: 10px;
letter-spacing: 0.8px;
font-weight: 500;
max-width: 100%;
padding: 48px 48px 24px 48px;
background: #222222;
color: #f4f4f4;
box-sizing: border-box;
}
controls what happens to the slideable middle container, on hover
.holding--container:hover .middle--block{
margin-top: 0px;
}
media query makes the containers responsive at tablet sizes
@media screen and (max-width: 1200px){
.flexbox--container{
grid-template-columns: 1fr 1fr;
}
.top--block{
min-height: 400px;
}
.bottom--block{
padding: 72px 48px 24px 48px;
}
}
media query makes the containers responsive at phone sizes
@media screen and (max-width: 768px){
.flexbox--container{
grid-template-columns: auto;
}
}
body section showing the sliding card effect in a responsive container
<div class="overall--container">

<div class="overall--item">
<div class="holding--container">
<div class="top--block"><h1>Top block: Polar Wildlife Conservation Report</h1></div>
<div class="middle--block"><p>Middle block: Survey assembled from paleoclimatic records reveals new insight into early penguin migratory patterns.</p></div>
<div class="bottom--block">Bottom block: ABRIL T. MUSEO</div>
</div>
</div>

<div class="overall--item">
<div class="holding--container">
<div class="top--block"><h1>Top block: Alien Ice</h1></div>
<div class="middle--block"><p>Middle block: Measuring meltwater influence and sediment run-off rate in Antarctica's oldest and deepest fjords.</p></div>
<div class="bottom--block">Bottom block: TISA VOLKORN</div>
</div>
</div>

<div class="overall--item">
<div class="holding--container">
<div class="top--block"><h1>Top block: Subscribe</h1></div>
<div class="middle--block"><p>Middle block: Subscribe to our award-winning research, work, and news stories</p></div>
<div class="bottom--block">Bottom block: SUBSCRIBE</div>
</div>
</div>

</div>
End

Low poly mountains
styles the first mountain
.mountain{
position: absolute;
content: '';
bottom: 0;
left: 120px;
border-top: 0px solid transparent;
border-right: 180px solid transparent;
border-bottom: 350px solid #5ad07d;
border-left: 180px solid transparent;
z-index: 5;
}
styles the mountain's shadow
.mountain-shadow{
position: absolute;
content: '';
bottom: 0;
left: 300px;
border-top: 0px solid transparent;
border-right: 140px solid transparent;
border-bottom: 350px solid #357639;
border-left: 0px solid transparent;
z-index: 5;
transform-origin: top right;
transform: skewX(18deg);
}
styles the snow caps
.snow{
position: absolute;
content: '';
bottom: -98px;
left: -50px;
border-top: 0px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid #dddddd;
border-left: 50px solid transparent;
z-index: 6;
}
styles the shadow of the snow caps
.snow-shadow{
position: absolute;
content: '';
bottom: -87px;
left: 0px;
border-top: 0px solid transparent;
border-right: 35px solid transparent;
border-bottom: 100px solid #cccccc; 
border-left: 0px solid transparent; 
z-index: 6;
transform-origin: top right;
transform: skewY(-18deg);
}
styles the inverted jagged bits of snow; because the peak is inverted, the top has a border
.snow-jagged{
position: absolute;
content: '';
bottom: -130px;
left: -45px;
border-top: 40px solid #dddddd;
border-right: 25px solid transparent;
border-bottom: 0px solid transparent;
border-left: 25px solid transparent;
z-index: 6;
}
styles the next mountain
.mountain-1{
position: absolute;
content: '';
bottom: 0;
left: 60px;
border-top: 0px solid transparent;
border-right: 130px solid transparent;
border-bottom: 150px solid #68F193;
border-left: 130px solid transparent;
z-index: 5;
}
styles the next mountain's shadow
.mountain-shadow-1{
position: absolute;
content: '';
bottom: 0;
left: 190px;
border-top: 0px solid transparent;
border-right: 100px solid transparent;
border-bottom: 150px solid #40945C;
border-left: 0px solid transparent;
z-index: 5;
transform-origin: top right;
transform: skewX(18deg);
}
body section showing the low poly mountains
<div class="mountain">
<div class="snow"></div>
<div class="snow-jagged"></div>
</div>

<div class="mountain-shadow">
<div class="snow-shadow"></div>
</div>

<div class="mountain-1"></div>
<div class="mountain-shadow-1"></div>
End

CSS accordion
styles the accordion holding container
.accordionbox{
max-width: 480px;
margin: 100px auto 0px auto;
z-index: 2;
}
styles the checkbox labels
.accordionbox label{
font-family: 'PT Sans Narrow', sans-serif;
padding: 10px;
position: relative;
display: block;
cursor: pointer;
color: #111111;
font-size: 18px;
background: #ffc728;
border-bottom: 2px solid #efa202;
transition: all 0.3s ease;
}
styles the checkbox labels on hover
.accordionbox label:hover{
background: #f3f1ee;
}
hides the default checkbox square
.accordionbox input{
display: none;
}
styles the initial dropdown content box
.insidebox{
height: 0px;
padding: 0px 15px;
font-size: 13px;
font-family: 'PT Sans', sans-serif;
color: #111111;
background: #ffffff;
overflow: hidden;
transition: all 0.3s ease;
}
styles the clicked dropdown content box
.accordionbox input:checked ~ .insidebox{
height: 250px;
overflow: scroll;
}
shows the + sign when the boxes are closed
input[type=checkbox] + label::before {
content: "+ ";
}
shows the - sign when the boxes are open
input[type=checkbox]:checked + label::before {
content: "– ";
}
additional styling, not related to the accordion
a.appbtn{
font-size: 14px;
text-decoration: none;
cursor: pointer;
display: block;
width: 90%;
padding: 13px;
text-align: center;
background: #263238;
color: #ffffff;
margin: 20px auto;
transition: all 0.3s ease;
}
a.appbtn:hover{
background: #5fcf80;
}
.applicationbox{
position: relative;
display: inline-block;
background: #263238;
color: #ffffff;
text-align: center;
padding: 10px;
max-width: 100px;
margin: 10px;
}
.applicationbox1{
position: relative;
display: inline-block;
background: #263238;
color: #ffffff;
text-align: center;
padding: 10px;
max-width: 100px;
margin: 10px;
}
.applicationbox::after{
position: absolute;
width: 0;
height: 0;
content: '';
top: 50%;
left: 100%;
border-top: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid #263238;
margin-top: -10px;
}
.pagetitle{
position: absolute;
top: 40px;
left: 30px;
color: #ffffff;
font-size: 32px;
line-height: 0.5;
font-family: 'Baskerville', serif;
font-weight: 400;
z-index: 2;
opacity: 0.5;
letter-spacing: 0.01em;
padding-bottom: 0;
margin-bottom: 0;
}
body section showing the accordion
<div class="pagetitle">Graduate Admissions<br/><span style="font-size: 9px; letter-spacing: 0.02em;">DEPARTMENT OF ASTRONOMY AND GEOPHYSICAL SCIENCES</span>></div>

<div class="accordionbox">

<div>
<input id="tab-one" name="myaccordion" type="checkbox" />
<label for="tab-one">Application</label>
<div class="insidebox">
<p>Welcome. We're very glad that you are considering studying for a postgraduate course with us. We know making an application to study can be a trying time. So we've made the applications process as streamlined as possible to provide you with a smooth experience and quick response time. Begin your application by clicking on the 'Start My Application' link below. An admissions officer will be with you at every step of the process and on-hand to answer any queries you may have. We wish you the very best with your application and studies.</p><p><a class="appbtn" href="https://www.qc.sg">Start My Application</a></p>
</div>
</div>

<div>
<input id="tab-two" name="myaccordion" type="checkbox" />
<label for="tab-two">Timeline</label>
<div class="insidebox">
<p>When we have received all your documents and references we can begin to assess your application. In 90% of cases a decision on an application is made within 30 to 45 days, and 65% of cases receive a decision within 2 weeks. In some cases, where applications include additional checks, the process may take longer. If this is the case we will notify you within 45 days of receiving your application, with next steps. A typical application process is illustrated below:</p>
<div class="applicationbox">1<br/>Application Received<br/>(2-3 days)</div>
<div class="applicationbox">2<br/>Review + Assessement<br/>(14-30 days)</div>
<div class="applicationbox1">3<br/>Decision Communicated<br/>(1-2 days)</div>
</div>
</div>

<div>
<input id="tab-three" name="myaccordion" type="checkbox" />
<label for="tab-three">Department</label>
<div class="insidebox">
<p>Contact your department representative for specific queries on your application, or get in touch with the university general queries office.</p>
<p>
Dr Tisa Volkorn
Department Vice-Chair
E: tisa.volkorn@qc.sg
T: +44 1234 5678
</p>
<p>Making an application using a Mac? Scroll down to check out this keyboard shortcuts video.</p>
<p style="text-align: center;"><iframe class="themovie" width="400" height="225" src="https://www.youtube.com/embed/C7KjROVwGBQ?controls=1" allowfullscreen="allowfullscreen"></iframe></p>
</div>
</div>

</div>
End

Dynamic text slider
styles the holding container and is non-essential to functionality
.homepagebox{
max-width: 80%;
position: absolute;
padding: 80px;
top: 50%;
left: 50%;
transform:translate(-50%, -50%);
border-top: 1px solid #B1A8E5;
border-right: 1px solid #B1A8E5;
border-bottom: 1px solid #ABC9DC;
border-left: 1px solid #ABC9DC;
}
styles the static h1 tag with the word 'communication'
h1{
font-family: 'Roboto', sans-serif;
display: block;
position: relative;
color: #ABC9DC;
text-align: center;
font-size: 5vw;
line-height: 0.4;
letter-spacing: -0.04em;
font-weight: 100;
margin-top: -13px;
padding: 0;
}
styles the dynamic h1 class where all the changes are controlled from
.changingtext::before{
content: "humanising";
display: block;
position: relative;
color: #B1A8E5;
text-align: center;
font-family: 'Roboto', sans-serif;
font-size: 5vw;
line-height: 1;
letter-spacing: -0.02em;
font-weight: 800;
animation-name: mychangingtext;
animation-duration: 8s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
these are the keyframes that change the titles in the dynamic h1; this sequence uses varying opacities to produce a smoother transition between titles; feel free to further tweak or change these according to your preferences
@keyframes mychangingtext{
0% {content: "humanising"; opacity: 0.58;}
10% {content: "humanising"; opacity: 1;}
19% {content: "humanising"; opacity: 0;}
20% {content: "energising"; opacity: 0;}
30% {content: "energising"; opacity: 1;}
39% {content: "energising"; opacity: 0;}
40% {content: "socialising"; opacity: 0;}
50% {content: "socialising"; opacity: 1;}
59% {content: "socialising"; opacity: 0;}
60% {content: "monetising"; opacity: 0;}
70% {content: "monetising"; opacity: 1;}
79% {content: "monetising"; opacity: 0;}
80% {content: "transforming"; opacity: 0;}
90% {content: "transforming"; opacity: 1;}
99% {content: "transforming"; opacity: 0;}
100% {content: "humanising"; opacity: 0;}
}
body section showing the dynamic text slider; note the HTML itself comprises just one container holding two h1 tags
<div class="homepagebox">
<h1 class="changingtext"></h1>
<h1>communication.</h1>
</div>
End

Flexboxes
styles the holding flexbox container
.holdingContainer{
max-width: 100%;
display: flex;
background: #ffc728;
padding: 50px;
box-sizing: border-box;
flex-direction: row;
}
styles the internal left container
.internalcontainerL{
flex: 1;
background: red;
padding: 30px;
font-size: 12px;
font-family: 'Roboto', sans-serif;
margin: 3px;
}
styles the internal middle container
.internalcontainerM{
flex: 1;
background: pink;
padding: 30px;
font-size: 12px;
font-family: 'Roboto', sans-serif;
margin: 3px;
}
styles the internal right container
.internalcontainerR{
flex: 1;
background: cyan;
padding: 30px;
font-size: 12px;
font-family: 'Roboto', sans-serif;
margin: 3px;
}
at mobile device sizes the containers stack above each other instead of sitting side by side owing to the flex-direction: column property-value pair; flex-direction: column-reverse also stacks the containers but in a reverse order,putting the right container on top and the left container at the bottom
@media screen and (max-width: 768px){
.holdingContainer{
flex-direction: column-reverse;
}
}
body section showing the flexbox with its three internal containers
<div class="holdingContainer">

<div class="internalcontainerL">
<h1>Evaluations</h1><img class="dasimages" src="https://www.qc.sg/wp-content/uploads/2016/11/Chinese-Lantern.jpg" width="100%"/>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>

<div class="internalcontainerM">
<h1>Due Dilligence</h1><img class="dasimages" src="https://www.qc.sg/wp-content/uploads/2016/11/Chinese-Lantern.jpg" width="100%"/>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>

<div class="internalcontainerR">
<h1>Mergers & Acquisitions</h1><img class="dasimages" src="https://www.qc.sg/wp-content/uploads/2016/11/Chinese-Lantern.jpg" width="100%"/>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>

</div>
End

Masonry layout
styles the holding masonry container
.masonryholder{
column-count: 4;
column-gap: 20px;
max-width: 1600px;
margin: 0 auto;
}
styles the individual masonry blocks
.masonryblocks{
display: inline-block;
background: #ebeded;
padding: 20px;
margin: 0 0 15px;
width: 100%;
box-sizing: border-box;
}
styles the images in the individual masonry blocks
.masonryblocks img{
width: 100%;
}
masonry layout narrower than 768px screen width
@media screen and (max-width:768px){
.masonryholder{
column-count: 1;
}
}
masonry layout wider than 768px screen width
@media screen and (min-width:769px){
.masonryholder{
column-count: 2;
}
}
masonry layout wider than 1080px screen width
@media screen and (min-width:1080px){
.masonryholder{
column-count: 3;
}
}
masonry layout wider than 1200px screen width
@media screen and (min-width:1200px){
.masonryholder{
column-count: 4;
}
}
body section showing the masonry layout; resize your window to see the results at diferent widths
<div class="masonryholder">

<div class="masonryblocks"><img src="https://github.com/arjunkhara/css-images/blob/master/Mercury.png?raw=true">Mercury</div>

<div class="masonryblocks"><img src="https://github.com/arjunkhara/css-images/blob/master/Venus.png?raw=true">Venus</div>

<div class="masonryblocks"><img src="https://github.com/arjunkhara/css-images/blob/master/Earth.png?raw=true">Earth</div>

<div class="masonryblocks"><img src="https://github.com/arjunkhara/css-images/blob/master/Mars.png?raw=true">Mars<br/>An analysis of Mars reveals a number of underlying bio-chemical harmonies that may point to primitive life at a cellular level. The recent discovery of frozen water at the poles, coupled with a large sub-surface lake, have rekindled excitement about our red neighbour.</div>

<div class="masonryblocks"><img src="https://github.com/arjunkhara/css-images/blob/master/Jupiter.png?raw=true">Jupiter</div>

<div class="masonryblocks"><img src="https://github.com/arjunkhara/css-images/blob/master/Saturn.png?raw=true">Saturn</div>

<div class="masonryblocks"><img src="https://github.com/arjunkhara/css-images/blob/master/Uranus.png?raw=true">Uranus</div>

<div class="masonryblocks"><img src="https://github.com/arjunkhara/css-images/blob/master/Neptune.png?raw=true">Neptune</div>

<div class="masonryblocks"><img src="https://github.com/arjunkhara/css-images/blob/master/Pluto.png?raw=true">Pluto<br/>There used to be nine planets. The demotion of Pluto has not been without controversy and the the International Astronomical Union has not escaped criticism, along with prominent names in its ranks, for its role in recategorising Pluto as a member of the Kuiper Belt.</div>

</div>
End

Sticky position
styles the entire holding container
.mainContainer{
position: relative;
display: block;
max-width: 1160px;
padding: 24px;
margin: 0 auto;
background: #ffffff;
box-sizing: border-box;
}
sets and styles sticky nav bar
.flex--container{
position: -webkit-sticky;
position: sticky;
display: flex;
flex-direction: row;
top: 0;
width: 100%;
color: #ffffff;
border-bottom: 16px solid #ffffff;
z-index: 1;
box-sizing: border-box;
}
sets and styles items in sticky nav bar
.flex--items{
flex: 1;
text-align: center;
padding: 16px;
border-right: 1px solid #ffffff;
background: #1865f2;
}
styles the content holding container
.content--container{
position: relative;
display: block;
width: 100%;
padding: 16px;
margin: 0 auto;
box-sizing: border-box;
}
styles the container in the content holding container
.flex--content{
display: flex;
flex-direction: row;
margin-top: 56px;
}
container holding the long paragraph block; do not apply sticky here
.flex--contentL{
flex-grow: 0;
flex-shrink: 0;
flex-basis: 39%;
}
sticky div surrounding the paragraph block
.keyword--block{
background: #ffffff;
position: -webkit-sticky;
position: sticky;
top: 100px;
display: block;
}
container holding the long paragraph block
.flex--contentR{
flex-grow: 0;
flex-shrink: 0;
flex-basis: 61%;
}
responsive media query for mobile devices
@media screen and (max-width: 768px){
.tagline{
float: none;
}
.flex-container, .flex-content{
flex-direction: column;
}
}
body section showing the sticky effect
<div class="mainContainer">

<h1>Journal</h1>
<div class="flex--container"><div class="flex--items">Home</div><div class="flex--items">Articles</div><div class="flex--items">Citations</div><div class="flex--items">Access</div><div class="flex--items">Contact</div></div>

<div class="content--container">
<div class="flex--content">
<div class="flex--contentL">
<div class="keyword--block">
<p>Keywords: Branding, Commonalities, Procedure</p>
</div>
</div>

<div class="flex--contentR">
<h3>Copy and paste this parapgraph several times to ensure adequate page scrolling</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quam quam, faucibus tristique felis at, dignissim faucibus ipsum. Fusce nec leo ut mauris lacinia egestas. Ut eu sem maximus, dictum mauris ac, venenatis lorem. Nullam at sagittis tortor, at dictum nibh. Morbi luctus elit odio, quis sollicitudin tortor tincidunt ac. Maecenas rhoncus iaculis neque, sit amet commodo elit placerat eu. Cras varius ante elementum ipsum tempor bibendum. Mauris dapibus magna lectus, id vehicula augue lacinia nec. Morbi ac ipsum quis sapien malesuada ultrices.</p>
</div>
</div>
</div>
</div>
End