Skip to content

Instantly share code, notes, and snippets.

/fiddle.css

Created March 20, 2018 12:25
Show Gist options
  • Save anonymous/b3012a3c62c569c6d053768bec9ae551 to your computer and use it in GitHub Desktop.
Save anonymous/b3012a3c62c569c6d053768bec9ae551 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
fiddle.css
#DIV_1 {
bottom: 0px;
box-sizing: border-box;
color: rgb(4, 4, 2);
cursor: default;
display: flex;
height: 646.75px;
left: 0px;
min-height: auto;
min-width: auto;
position: relative;
right: 0px;
text-decoration: none solid rgb(4, 4, 2);
text-size-adjust: 100%;
top: 0px;
width: 752px;
column-rule-color: rgb(4, 4, 2);
align-items: flex-start;
perspective-origin: 376px 323.375px;
transform-origin: 376px 323.375px;
fill: rgb(4, 4, 2);
caret-color: rgb(4, 4, 2);
border: 0px none rgb(4, 4, 2);
font: normal normal 400 normal 17px / 22.95px -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
margin: 36px 0px 0px;
outline: rgb(4, 4, 2) none 0px;
padding: 36px 0px 64px;
}/*#DIV_1*/
#DIV_2 {
box-sizing: border-box;
color: rgb(4, 4, 2);
cursor: default;
display: flex;
height: 442px;
max-width: 100%;
min-height: auto;
min-width: auto;
text-decoration: none solid rgb(4, 4, 2);
text-size-adjust: 100%;
width: 360px;
column-rule-color: rgb(4, 4, 2);
align-items: flex-start;
perspective-origin: 180px 221px;
transform-origin: 180px 221px;
fill: rgb(4, 4, 2);
caret-color: rgb(4, 4, 2);
border: 0px none rgb(4, 4, 2);
flex: 0 0 auto;
flex-flow: column nowrap;
font: normal normal 400 normal 17px / 22.95px -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
outline: rgb(4, 4, 2) none 0px;
}/*#DIV_2*/
#IMG_3 {
box-sizing: border-box;
color: rgb(4, 4, 2);
cursor: default;
display: block;
height: 259px;
min-height: auto;
min-width: auto;
text-decoration: none solid rgb(4, 4, 2);
text-size-adjust: 100%;
width: 300px;
column-rule-color: rgb(4, 4, 2);
perspective-origin: 150px 129.5px;
transform-origin: 150px 129.5px;
fill: rgb(4, 4, 2);
caret-color: rgb(4, 4, 2);
border: 0px none rgb(4, 4, 2);
font: normal normal 400 normal 17px / 22.95px -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
outline: rgb(4, 4, 2) none 0px;
}/*#IMG_3*/
#DIV_4 {
box-sizing: border-box;
color: rgb(17, 17, 17);
cursor: default;
height: 55px;
min-height: auto;
min-width: auto;
text-align: left;
text-decoration: none solid rgb(17, 17, 17);
text-size-adjust: 100%;
width: 326.844px;
column-rule-color: rgb(17, 17, 17);
perspective-origin: 163.422px 27.5px;
transform-origin: 163.422px 27.5px;
fill: rgb(17, 17, 17);
caret-color: rgb(17, 17, 17);
border: 0px none rgb(17, 17, 17);
flex: 0 0 auto;
font: normal normal 700 normal 50px / 55px -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
margin: 0px 0px 12px;
outline: rgb(17, 17, 17) none 0px;
}/*#DIV_4*/
#DIV_5 {
box-sizing: border-box;
color: rgb(153, 153, 153);
cursor: default;
height: 44px;
min-height: auto;
min-width: auto;
text-decoration: none solid rgb(153, 153, 153);
text-size-adjust: 100%;
width: 360px;
column-rule-color: rgb(153, 153, 153);
perspective-origin: 180px 22px;
transform-origin: 180px 22px;
fill: rgb(153, 153, 153);
caret-color: rgb(153, 153, 153);
border: 0px none rgb(153, 153, 153);
font: normal normal 400 normal 17px / 22.95px -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
margin: 0px 0px 12px;
outline: rgb(153, 153, 153) none 0px;
}/*#DIV_5*/
#I_6 {
box-sizing: border-box;
color: rgb(153, 153, 153);
cursor: default;
text-decoration: none solid rgb(153, 153, 153);
text-size-adjust: 100%;
column-rule-color: rgb(153, 153, 153);
perspective-origin: 0px 0px;
transform-origin: 0px 0px;
fill: rgb(153, 153, 153);
caret-color: rgb(153, 153, 153);
border: 0px none rgb(153, 153, 153);
font: italic normal 400 normal 17px / 22.95px -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
outline: rgb(153, 153, 153) none 0px;
}/*#I_6*/
#DIV_7 {
box-sizing: border-box;
color: rgb(4, 4, 2);
cursor: default;
height: 60px;
min-height: auto;
min-width: auto;
text-decoration: none solid rgb(4, 4, 2);
text-size-adjust: 100%;
width: 360px;
column-rule-color: rgb(4, 4, 2);
perspective-origin: 180px 30px;
transform-origin: 180px 30px;
fill: rgb(4, 4, 2);
caret-color: rgb(4, 4, 2);
border: 0px none rgb(4, 4, 2);
font: normal normal 400 normal 17px / 22.95px -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
outline: rgb(4, 4, 2) none 0px;
}/*#DIV_7*/
#DIV_8 {
box-sizing: border-box;
color: rgb(4, 4, 2);
cursor: default;
height: 60px;
max-width: 500px;
text-decoration: none solid rgb(4, 4, 2);
text-size-adjust: 100%;
width: 360px;
column-rule-color: rgb(4, 4, 2);
perspective-origin: 180px 30px;
transform-origin: 180px 30px;
fill: rgb(4, 4, 2);
caret-color: rgb(4, 4, 2);
border: 0px none rgb(4, 4, 2);
font: normal normal 400 normal 17px / 22.95px -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
outline: rgb(4, 4, 2) none 0px;
}/*#DIV_8*/
#DIV_9 {
box-sizing: border-box;
color: rgb(4, 4, 2);
cursor: default;
display: flex;
height: 34px;
text-decoration: none solid rgb(4, 4, 2);
text-size-adjust: 100%;
width: 360px;
column-rule-color: rgb(4, 4, 2);
perspective-origin: 180px 17px;
transform-origin: 180px 17px;
fill: rgb(4, 4, 2);
caret-color: rgb(4, 4, 2);
border: 0px none rgb(4, 4, 2);
font: normal normal 400 normal 15px / 20.25px -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
outline: rgb(4, 4, 2) none 0px;
}/*#DIV_9*/
#DIV_10 {
bottom: 0px;
box-sizing: border-box;
color: rgb(4, 4, 2);
cursor: text;
display: flex;
height: 34px;
left: 0px;
min-height: auto;
min-width: auto;
position: relative;
right: 0px;
text-decoration: none solid rgb(4, 4, 2);
text-size-adjust: 100%;
top: 0px;
width: 213.781px;
column-rule-color: rgb(4, 4, 2);
align-items: center;
perspective-origin: 106.891px 17px;
transform-origin: 106.891px 17px;
fill: rgb(4, 4, 2);
caret-color: rgb(4, 4, 2);
background: rgb(255, 255, 255) none repeat scroll 0% 0% / auto padding-box border-box;
border: 1px solid rgb(231, 230, 229);
border-radius: 3px 3px 3px 3px;
flex: 1 1 0%;
font: normal normal 400 normal 14px / 20px -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
outline: rgb(4, 4, 2) none 0px;
padding: 4px 10px;
}/*#DIV_10*/
#INPUT_11 {
color: rgb(4, 4, 2);
display: block;
height: 20px;
min-height: auto;
min-width: auto;
text-decoration: none solid rgb(4, 4, 2);
text-size-adjust: 100%;
width: 191.781px;
column-rule-color: rgb(4, 4, 2);
perspective-origin: 95.8906px 10px;
transform-origin: 95.8906px 10px;
fill: rgb(4, 4, 2);
caret-color: rgb(4, 4, 2);
background: rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box;
border: 0px none rgb(4, 4, 2);
font: normal normal 400 normal 14px / 20px -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
outline: rgb(4, 4, 2) none 0px;
padding: 0px;
}/*#INPUT_11*/
#DIV_12 {
box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
box-sizing: border-box;
color: rgb(235, 87, 87);
cursor: pointer;
display: flex;
height: 34px;
min-height: auto;
min-width: auto;
text-decoration: none solid rgb(235, 87, 87);
text-size-adjust: 100%;
width: 138.219px;
column-rule-color: rgb(235, 87, 87);
align-items: center;
perspective-origin: 69.1094px 17px;
transform-origin: 69.1094px 17px;
user-select: none;
fill: rgb(235, 87, 87);
caret-color: rgb(235, 87, 87);
background: rgba(235, 87, 87, 0.03) none repeat scroll 0% 0% / auto padding-box border-box;
border: 1px solid rgb(249, 200, 200);
border-radius: 3px 3px 3px 3px;
flex: 0 0 auto;
font: normal normal 500 normal 15px / 20.25px -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
margin: 0px 0px 0px 8px;
outline: rgb(235, 87, 87) none 0px;
padding: 6px 16px;
transition: background 0.14s ease-in 0s;
}/*#DIV_12*/
#DIV_13 {
box-sizing: border-box;
color: rgb(165, 165, 165);
cursor: default;
height: 18px;
text-decoration: none solid rgb(165, 165, 165);
text-size-adjust: 100%;
width: 360px;
column-rule-color: rgb(165, 165, 165);
perspective-origin: 180px 9px;
transform-origin: 180px 9px;
fill: rgb(165, 165, 165);
caret-color: rgb(165, 165, 165);
border: 0px none rgb(165, 165, 165);
font: normal normal 300 normal 14px / 18.9px -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
margin: 8px 0px 0px;
outline: rgb(165, 165, 165) none 0px;
}/*#DIV_13*/
#DIV_14 {
box-sizing: border-box;
color: rgb(4, 4, 2);
cursor: default;
height: 36px;
min-height: auto;
min-width: auto;
text-decoration: none solid rgb(4, 4, 2);
text-size-adjust: 100%;
width: 56px;
column-rule-color: rgb(4, 4, 2);
perspective-origin: 28px 18px;
transform-origin: 28px 18px;
fill: rgb(4, 4, 2);
caret-color: rgb(4, 4, 2);
border: 0px none rgb(4, 4, 2);
flex: 0 0 auto;
font: normal normal 400 normal 17px / 22.95px -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
outline: rgb(4, 4, 2) none 0px;
}/*#DIV_14*/
#DIV_15 {
box-sizing: border-box;
color: rgb(4, 4, 2);
cursor: default;
height: 546.75px;
max-width: 100%;
min-height: auto;
min-width: auto;
text-decoration: none solid rgb(4, 4, 2);
text-size-adjust: 100%;
width: 270px;
column-rule-color: rgb(4, 4, 2);
perspective-origin: 135px 273.375px;
transform-origin: 135px 273.375px;
fill: rgb(4, 4, 2);
caret-color: rgb(4, 4, 2);
border: 0px none rgb(4, 4, 2);
flex: 0 0 auto;
font: normal normal 400 normal 17px / 22.95px -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
outline: rgb(4, 4, 2) none 0px;
}/*#DIV_15*/
#DIV_16 {
bottom: 0px;
box-shadow: rgba(0, 0, 0, 0.25) 0px 12px 30px 0px;
box-sizing: border-box;
color: rgb(4, 4, 2);
cursor: default;
height: 546.75px;
left: 0px;
max-width: 270px;
position: relative;
right: 0px;
text-decoration: none solid rgb(4, 4, 2);
text-size-adjust: 100%;
top: 0px;
width: 270px;
column-rule-color: rgb(4, 4, 2);
perspective-origin: 135px 273.375px;
transform-origin: 135px 273.375px;
fill: rgb(4, 4, 2);
caret-color: rgb(4, 4, 2);
background: rgb(29, 29, 29) none repeat scroll 0% 0% / auto padding-box border-box;
border: 0px none rgb(4, 4, 2);
border-radius: 15% 15% 15% 15% / 7% 7% 7% 7%;
font: normal normal 400 normal 17px / 22.95px -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
outline: rgb(4, 4, 2) none 0px;
overflow: hidden;
}/*#DIV_16*/
#DIV_17 {
background-position: 50% 50%;
box-sizing: border-box;
color: rgb(4, 4, 2);
cursor: default;
height: 546.75px;
text-decoration: none solid rgb(4, 4, 2);
text-size-adjust: 100%;
width: 270px;
column-rule-color: rgb(4, 4, 2);
perspective-origin: 135px 273.375px;
transform-origin: 135px 273.375px;
fill: rgb(4, 4, 2);
caret-color: rgb(4, 4, 2);
background: rgba(0, 0, 0, 0) url("https://www.notion.so/images/chrome-mobile.png") no-repeat scroll 50% 50% / cover padding-box border-box;
border: 0px none rgb(4, 4, 2);
font: normal normal 400 normal 17px / 22.95px -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
outline: rgb(4, 4, 2) none 0px;
padding: 0px 0px 546.75px;
}/*#DIV_17*/
#DIV_18 {
bottom: 61.4062px;
box-sizing: border-box;
color: rgb(4, 4, 2);
cursor: default;
height: 420.547px;
left: 18px;
position: absolute;
right: 18px;
text-decoration: none solid rgb(4, 4, 2);
text-size-adjust: 100%;
top: 0px;
width: 234px;
column-rule-color: rgb(4, 4, 2);
perspective-origin: 117px 210.266px;
transform-origin: 117px 210.266px;
fill: rgb(4, 4, 2);
caret-color: rgb(4, 4, 2);
border: 0px none rgb(4, 4, 2);
font: normal normal 400 normal 17px / 22.95px -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
margin: 64.7969px 0px 0px;
outline: rgb(4, 4, 2) none 0px;
}/*#DIV_18*/
#IMG_19 {
box-sizing: border-box;
color: rgb(4, 4, 2);
cursor: default;
height: 415.547px;
text-decoration: none solid rgb(4, 4, 2);
text-size-adjust: 100%;
width: 234px;
column-rule-color: rgb(4, 4, 2);
perspective-origin: 117px 207.766px;
transform-origin: 117px 207.766px;
fill: rgb(4, 4, 2);
caret-color: rgb(4, 4, 2);
border: 0px none rgb(4, 4, 2);
border-radius: 2px 2px 2px 2px;
font: normal normal 400 normal 17px / 22.95px -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
outline: rgb(4, 4, 2) none 0px;
}/*#IMG_19*/
Raw
fiddle.html
<div id="DIV_1">
<div id="DIV_2">
<img src="/front/mobile/hero-mobile.png" id="IMG_3" alt='' />
<div id="DIV_4">
Notion for iOS
</div>
<div id="DIV_5">
<i id="I_6">Notes! Tasks! Wikis!</i> Notion gives you a flexible and collaborative editor on the go.
</div>
<div id="DIV_7">
<div id="DIV_8">
<div id="DIV_9">
<div id="DIV_10">
<input type="phone" placeholder="Enter your phone number" id="INPUT_11" />
</div>
<div id="DIV_12">
Send App Link
</div>
</div>
<div id="DIV_13">
We will forward you the App Store link. No spam.
</div>
</div>
</div>
</div>
<div id="DIV_14">
</div>
<div id="DIV_15">
<div id="DIV_16">
<div id="DIV_17">
</div>
<div id="DIV_18">
<img src="/front/mobile/mobile-hero.gif" id="IMG_19" alt='' />
</div>
</div>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment