fluticasone
mushy canele
[class name=aspectratio]
display: block;
position: relative;
overflow: hidden;
width: 100%;
height: 0px;
padding-top: 55%;
background: #f8f8f8 url('https://i.imgur.com/xWTvlpL.jpg');
[/class]
[class name=aspectratio maxWidth=799px]
padding-top: 0px;
height: auto;
[/class]
[class name=maincontainer]
position: absolute;
display: block;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
width: 100%;
height: 100%;
[/class]
[class name=maincontainer maxWidth=799px]
position: relative;
height: auto;
[/class]
[class name=flexbox]
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-content: center;
align-items: center;
height: 100%;
width: 100%;
box-sizing: border-box;
padding: 7.5%;
overflow: hidden;
[/class]
[class name=flexbox maxWidth=799px]
display: block;
height: auto;
[/class]
[class name=title]
font-family: 'Playfair Display', serif;
font-size: 13vh;
text-transform: uppercase;
text-align: center;
color: #616161;
position: relative;
z-index: 2;
text-shadow: 5px 5px #FFFFFF;
[/class]
[class name=title maxWidth=799px]
font-size: 8vh;
[/class]
[class name=whitebox]
margin-top: -7.25vh;
flex: 1 0 0px;
background: #FFFFFF;
width: 60%;
position: relative;
z-index: 1;
padding: 5.5vh 6.5%;
[/class]
[class name=whitebox maxWidth=799px]
margin: auto;
margin-top: -5vh;
height: auto;
display: block;
width: 100%;
box-sizing: border-box;
padding: 6.5%;
padding-top: 5vh;
[/class]
[class name=whiteboxaspect]
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding: 5.5vh 6.5%;
display: flex;
flex-flow: row wrap;
justify-content: center;
align-content: center;
align-items: center;
[/class]
[class name=whiteboxaspect maxWidth=799px]
position: relative;
padding: 0;
[/class]
[class name=linksarea]
flex: 1 0 100px;
height: 100%;
overflow: hidden;
[/class]
[class name=linksarea maxWidth=799px]
width: 100%;
height: 100%;
margin-bottom: 25px;
min-width: 100%;
[/class]
[class name=linksflexbox]
width: 100%;
display: flex;
flex-flow: row wrap;
justify-content: space-evenly;
align-items: flex-start;
align-content: flex-start;
[/class]
[class name=textarea]
flex: 3 0 100px;
height: 100%;
overflow: hidden;
font-size: initial;
[/class]
[class name=scrollbox]
display: block;
padding-right: 150px;
margin: 10px;
margin-right: 0px;
width: calc(100% - 10px);
height: calc(100% - 20px);
overflow-x: visible;
overflow-y: scroll;
font-family: 'Raleway', sanserif;
font-size: .9em;
color: #9a9a9a;
[/class]
[class name=scrollbox maxWidth=799px]
display: block;
padding: 0px;
margin: 0px;
width: 100%;
height: auto;
overflow: visible;
[/class]
[class name=linkbox]
height: 4vh;
width: 4vh;
display: inline-block;
overflow: hidden;
font-size: 1.5vh;
display: flex;
flex-flow: row wrap;
justify-content: center;
align-content: center;
align-items: center;
margin: 2px;
border-radius: 2vh;
color: #9a9a9a;
opacity: .4;
background-color: #FFFFFF;
transition: color .8s ease-in-out, opacity .8s ease-in-out, background-color .8s ease-in-out;
[/class]
[class name=copypaste state=hover]
opacity: 1;
background-color: #4be63d;
color: #FFFFFF;
[/class]
[class name=copypaste maxWidth=799px]
opacity: 1;
color: #FFFFFF;
background-color: #4be63d;
[/class]
[class name=thinkingrequired state=hover]
opacity: 1;
color: #FFFFFF;
background-color: #f4b010;
[/class]
[class name=thinkingrequired maxWidth=799px]
opacity: 1;
color: #FFFFFF;
background-color: #f4b010;
[/class]
[class name=codingrequired state=hover]
opacity: 1;
color: #FFFFFF;
background-color: #f42a2a;
[/class]
[class name=codingrequired maxWidth=799px]
opacity: 1;
color: #FFFFFF;
background-color: #f42a2a;
[/class]
[class name=levels]
box-sizing: border-box;
width: 100%;
padding: 10px;
[/class]
[div class="aspectratio"]
[div class="maincontainer"]
[div class="flexbox"]
[div class="title"]snippets[/div]
[div class="whitebox"][div class=whiteboxaspect]
[div class="linksarea"]
[div class="scrollbox"]
[div class="linksflexbox"]
[div class="thinkingrequired linkbox"]01[/div]
[div class="copypaste linkbox"]02[/div]
[div class="thinkingrequired linkbox"]03[/div]
[div class="copypaste linkbox"]04[/div]
[/div]
[/div]
[/div]
[div class="textarea"]
[div class="scrollbox"]
Hello and welcome to SNIPPETS, a quick tutorial thread full of short bits of code that we think you might find useful. The codes here have varying levels of diffculty, listed below.
[div class="levels"] COPY PASTE
Copy paste codes, are, as the name implies, snippets that you simply copy paste into the correct area of your design to fulfill its purpose. They require no thinking on the user's part. They are plug and play.
THINKING REQUIRED
These snippets may require you to change the values, do some simple calculations, etc, to become useable. They likely won't require much background knowledge, but complete newbies may struggle to understand them.
CODING REQUIRED
Familiarity with basic principles behind javascript/css/html is required to use this, otherwise it will likely look like a mess. You can try as a beginner, but be warned that we may use jargon and less common properties to achieve a particular effect. Jank may be involved in these. [/div]
If you'd like to see these snippets of code in action, check out our showcase
[div class="levels"] COPY PASTE
Copy paste codes, are, as the name implies, snippets that you simply copy paste into the correct area of your design to fulfill its purpose. They require no thinking on the user's part. They are plug and play.
THINKING REQUIRED
These snippets may require you to change the values, do some simple calculations, etc, to become useable. They likely won't require much background knowledge, but complete newbies may struggle to understand them.
CODING REQUIRED
Familiarity with basic principles behind javascript/css/html is required to use this, otherwise it will likely look like a mess. You can try as a beginner, but be warned that we may use jargon and less common properties to achieve a particular effect. Jank may be involved in these. [/div]
If you'd like to see these snippets of code in action, check out our showcase
FEVER DREAMS
. In all likelihood, anything we post here we likely discovered via one of the designs there.
[/div]
[/div]
[/div][/div]
[/div]
[/div]
[/div]
Last edited by a moderator:
