- Scan-ID:
- f4534cc8-abc5-4725-8f56-6e2026cb38d4Beendet
- Eingereichte URL:
- https://straw.page/
- Bericht beendet:
Links · 1 gefunden
Die von der Seite ausgehenden identifizierten Links
| Link | Text |
|---|---|
| https://twitter.com/okozzie_ |
JavaScript-Variablen · 46 gefunden
Globale JavaScript-Variablen, die in das Window Object einer Seite geladen werden, sind Variablen, die außerhalb von Funktionen deklariert werden und von jeder Stelle des Codes innerhalb des aktuellen Bereichs zugänglich sind
| Name | Typ |
|---|---|
| 0 | object |
| onbeforetoggle | object |
| documentPictureInPicture | object |
| onscrollend | object |
| $ | function |
| jQuery | function |
| seed | object |
| colorDictionary | object |
| colorRanges | object |
| randomColor | function |
Konsolenprotokoll-Meldungen · 2 gefunden
In der Web-Konsole protokollierte Meldungen
| Typ | Kategorie | Protokoll |
|---|---|---|
| verbose | dom |
|
| verbose | dom |
|
HTML
Der HTML-Rohtext der Seite
<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta charset="UTF-8"><title>Straw.Page - Extremely simple website builder</title><meta name="description" content="Straw.Page is the world's simplest website builder. Create unique websites from your mobile device."><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" crossorigin="anonymous"><link href="https://fonts.googleapis.com/css?family=Karla|PT+Sans+Narrow|Yantramanav:400,900|Roboto:900,400|Bangers|Krona+One|Nunito|Frank+Ruhl+Libre:400,900|Oswald|Source+Serif+Pro|Work+Sans|Open+Sans|Raleway:700|Lato|Passion+One|Lateef|Crimson+Text|Baloo+Paaji+2|Jost|Oswald|Montserrat|Lexend+Deca|Bungee+Shade|Rubik|Maven+Pro" rel="stylesheet"><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <meta name="robots" content="index, follow"><meta name="revisit-after" content="3 days"><link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png?v=2"><link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png?v=2"><link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png?v=2"><meta name="theme-color" content="#D50018"><meta property="og:site_name" content="https://straw.page"><meta property="og:title" content="Straw.Page"><meta property="og:description" content="Straw.Page is the world's simplest website builder. Create unique websites from your mobile device."><meta property="og:image" content="https://edge.webstraw.com/preview.jpeg"><meta property="og:url" content="https://straw.page"> <meta property="twitter:card" content="summary_large_image"><meta property="twitter:title" content="Straw.Page"><meta property="twitter:description" content="Straw.Page is the world's simplest website builder. Create unique websites from your mobile device."><meta property="twitter:image" content="https://edge.webstraw.com/preview.jpeg"><meta property="twitter:url" content="https://straw.page/"><meta property="twitter:site" content="@okozzie_"><meta property="twitter:creator" content="@okozzie_"><link rel="canonical" href="https://straw.page"> <script src="https://cdn.usefathom.com/script.js" data-site="ZXDYIAXN" defer=""></script> <style>* { outline: 0; margin: 0; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; } a,a:link,a:visited,.a:hover,.a:focus,a:active{ color: inherit; text-decoration: none; } .first { min-height: 100vh; background: #94c3f4; background: #0068ff; font-family: 'Yantramanav'; position: relative; transition: background 1s ease } .inner { display: grid; grid-template-rows: 50vh 1fr; position: relative } .intro { padding: 40px; text-align: center; position: relative; z-index: 9; position: sticky; top: 0 } .intro h1 { text-transform: uppercase; text-align: center; transform: scaleY(2.5); color: #df001d; font-size: 80px; position: relative; z-index: 99 } .intro h2 { background: #ff0; display: inline-block; border: 1px solid #000; font-weight: 100; opacity: 0.9; position: relative; top: -1px; z-index: 9; padding: 8px 16px; font-size: 18px; font-weight: 900; text-transform: uppercase } .environment { position: absolute; top: 0; left: 0; right: 0; height: 100vh; overflow-x: hidden } .clouds { height: 30vh; position: fixed; top: 0; left: 0; right: 0; text-transform: uppercase } .clouds span { color: #fff; font-size: 22px; display: block; position: absolute; transition: opacity 0.3s ease } .sun { position: fixed; top: 50%; left: 50%; --d: 0px; transform: translate(-50%,calc(10% + var(--d))); background: 0; height: 100vh; width: 70vw; max-width: 100%; max-width: 995px; width: 100vw; min-width: 70vw; border-top-left-radius: 100px; border-top-right-radius: 100px; border-radius: 50%; overflow: hidden; display: none } .sun span { display: inline-block; color: #ff0; color: #fdc138; padding: 0 4px; text-transform: uppercase; } .mid { text-align: center; position: relative; z-index: 9; } .mid h2 { color: #df001d; text-transform: uppercase; color: #000; font-weight: 100 } .part { background: rgba(255,0,0,0.4); color: #fff; padding: 20px; font-size: 16px; border: 1px solid #000 } .original p span { background: yellow; color: #000; padding: 0 4px; margin-right: 0px } .original p span.non { background: 0; padding: 0; color: #fff; font-style: italic } .part:nth-child(1){ background: #df001d; font-size: 21px; padding: 30px 20px; } .part:nth-child(20){ background: #ffd8d7; color: #000; } .part:nth-child(40){ background: #d5d4f5; color: #000 } .original button,.final button { background: #fff; padding: 4px 8px; border-radius: 20px; border: 1px solid #df001d; -webkit-appearance: none; appearance: none; padding: 10px 30px; font-size: 25px; font-family: 'Yantramanav'; border-radius: 40px; margin: 19px 0 0; border: 2px solid #000; color: #df001d; background: #fff; transition: all 0.3s ease } .original button:hover,.final button:hover { transform: scale(1.1); cursor: pointer; background: yellow; color: #000 } .original button:hover i,.final button:hover i { animation-name: rota; animation-duration: 1s; animation-iteration-count: infinite; animation-timing-function: linear; } @keyframes rota { 100% { transform: rotate(360deg) } } .original button i { position: relative; top: 1px; left: 1px } .content { max-width: 480px; width: 100%; margin: 0 auto; top: 50vh; transition: top 0.3s ease; } .hider { position: fixed; left: 50%; transform: translateX(-50%); top: 100vh; } .content > div { margin-bottom: 10px; margin-bottom: 0px } .content > div:last-child { margin-bottom: 0 } .interlude { background: yellow; padding: 20px; text-transform: uppercase; font-size: 18px; border: 1px solid #000; position: relative; overflow: hidden; color: #df001d } .interlude p { font-weight: 900 } .exclaim { position: absolute; top: 0; left: 0; right: 0; bottom: 0; text-align: left; color: rgba(255,0,0,0.3); word-break: break-all; pointer-events: none } .exclaim span { transform: rotate(-15deg); display: inline-block; padding: 0 2px } .left { display: grid; grid-template-columns: auto 1fr; position: relative; z-index: 9999 } .buildings { position: fixed; bottom: 0; left: 0; right: 0; height: 40vh; display: flex } .building > span { display: block; } .building > span span:nth-child(1) { padding-right: 4px } .building { text-transform: uppercase; font-size: 1.8vw; position: relative; z-index: 9; color: rgba(0,0,0,0.9); color: rgba(255,0,0,0.8); margin-right: 10px; line-height: 1.2; opacity: 0.5; transition: opacity 0.3s ease } .building:nth-child(1){ color: #feeaca } .building:nth-child(2){ color: #d5d4f5; top: calc(32px * 3) } .part:not(.original){ color: #fff; } .split { display: grid; grid-template-columns: 1fr; grid-gap: 10px; margin: 0 auto; max-width: 480px } .original,.interlude { max-width: 480px; margin: 0 auto } .area { display: grid } .split .part { display: grid } .part.lines { background: #fff; border: 2px solid #000; color: #000 } .lineSplit { display: grid; grid-template-columns: 1fr 1fr; } .lineSplit .left { display: grid; grid-template-rows: repeat(7, minmax(30px, auto)); grid-template-columns: 1fr; } .line { border-top: 1px solid #000; width: 100%; text-align: left; text-transform: uppercase; font-size: 22px; display: grid; grid-template-columns: 1fr 1fr } .line p span { background: #000; color: #fff; border-radius: 40px; padding: 2px 8px; display: inline-block; } .sun.tmpSun { top: 50%; transition: none; } .line:last-child { border-bottom: 1px solid #000; } .lineSplit .right { background: #bca27a; border: 1px solid #000 } .part.tagging { min-height: 400px; background-image: url("https://edge.webstraw.com/verycool/man.jpg"); background-size: cover; background-position: center; display: grid; grid-template-rows: 1fr 1fr 1fr; padding: 10px 40px } .tagging p { display: flex; align-items: flex-start; font-size: 30px; font-family: 'PT Sans Narrow'; text-transform: uppercase } .tagging p:nth-child(2) { justify-content: flex-end; align-items: center } .tagging p:last-child { display: grid; grid-template-columns: 1fr 1fr; align-items: flex-end } .tagging p:last-child span:nth-child(1){ text-align: left } .tagging p:last-child span:nth-child(2){ text-align: right } .random { position: relative; padding: 0; display: grid; min-height: 400px } .paint { display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(5, 1fr); grid-column-gap: 0px; grid-row-gap: 0px; height: 100% } .paint span:nth-child(1) { grid-area: 1 / 1 / 2 / 3; background: #f6ba0c} .paint span:nth-child(2) { grid-area: 1 / 3 / 2 / 6; background: #f3c9dd} .paint span:nth-child(3) { grid-area: 2 / 1 / 4 / 4; background: #fdf06f} .paint span:nth-child(4) { grid-area: 2 / 4 / 3 / 6; background: #b6cac0} .paint span:nth-child(5) { grid-area: 3 / 4 / 5 / 6; background: #e88565} .paint span:nth-child(6) { grid-area: 4 / 1 / 6 / 2; background: #9c9cdd} .paint span:nth-child(7) { grid-area: 4 / 2 / 5 / 4; background: #bdf6e9} .paint span:nth-child(8) { grid-area: 5 / 2 / 6 / 6; background: #1fde91} .paint span { display: block; background: #08f422; height: 100%; width: 100%; } .talk { position: absolute; top: 0; left: 0; right: 0; bottom: 0; height: 100%; padding: 20px; display: grid; } .talk p { text-align: left; font-size: 32px; color: #000; font-family: 'Times New Roman'; text-transform: lowercase } .talk p:last-child { display: flex; align-items: flex-end } .save { background: #333 } .save > p:first-child { color: #f8ebee; text-transform: uppercase; font-size: 40px; font-family: 'PT Sans Narrow' } .browser { background: #fff; padding: 0 } .browser .tabs { color: #000; display: flex; align-items: center; justify-content: flex-start } .browser .tabs span { display: inline-block; border-right: 1px solid #000; padding: 10px; font-size: 18px; text-transform: uppercase; opacity: 0.5 } .browser .tabs span:nth-child(1){ opacity: 1; } .mac { border-top: 1px solid #000; display: grid; grid-template-columns: auto 1fr } .traffic { display: flex; align-items: center; padding: 10px; border-right: 1px solid #000 } .traffic span { display: inline-block; height: 9px; width: 9px; border-radius: 50%; margin-right: 3px } .traffic span:nth-child(1) { background: #fa5557 } .traffic span:nth-child(2) { background: #e2c13e } .traffic span:nth-child(3) { background: #5dc438 } .bar { text-align: left; display: flex; align-items: center; color: #df001d; padding: 4px 8px; font-size: 17px } .bar p span { color: #6e6e6e } .site { border-top: 1px solid #000; color: #000; min-height: 200px; padding: 30px; font-size: 28px; display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; background: #ff0 } .site p span { color: #df001d } .site > span { position: absolute; top: 15px; left: 50%; transform: translateX(-50%); font-size: 15px; background: #000; color: #fff; padding: 4px 8px; border-radius: 40px; white-space: nowrap } .right { display: grid; grid-template-rows: 1fr; position: relative } .url { background: #fff; font-size: 14px; padding: 3px 8px; margin-top: 2px } .url span { color: #df001d } .window { background: rgba(255,255,255,0.3); padding: 5px; border-left: 1px solid #000; border-right: 1px solid #000 } .space { display: flex; align-items: center; justify-content: center; background: #fff; color: #df001d; text-transform: uppercase; font-size: 20px; position: relative; overflow: hidden; display: none } .marqHold { --lefter: 0px; transition: left 0.5s ease; display: flex; position: absolute; left: var(--lefter); white-space: nowrap; padding: 0; } .marqHold p { display: inline-block; padding: 0 10px } .right { background: #fff } .part.grad { background-image: url("https://edge.webstraw.com/three-min.jpg"); background-size: cover; min-height: 400px; display: flex; align-items: center; justify-content: center } .shape { height: 220px; width: 220px; background: #df001d; border-radius: 50%; position: relative } .shape p { position: absolute; top: 0; left: 0; font-family: 'Times New Roman'; color: #000; font-size: 45px; text-transform: lowercase } .shape p:last-child { bottom: 0; right: 0; top: initial; left: initial; color: #df001d } .content > div.final { background: #df001d; padding: 40px; } .content > div.finalTwitter { background: 0; border: 0; } .finalTwitter p { border: 2px solid #df001d; display: inline-block; background: #df001d; color: #fff; padding: 8px 16px; text-transform: uppercase; border-radius: 20px; transition: all 0.3s ease } .finalTwitter p:hover { transform: scale(1.2); cursor: pointer } .final button { margin: 0; padding: 11px 30px } .final p { padding-top: 12px } .sunset { background: #ff3a20 } .sun { display: block; pointer-events: none; opacity: 0; top: 200vh; font-size: 1.3vw; transition: top 0.3s ease } .sunset .sun { opacity: 1; top: 50% } .sunset .clouds span { opacity: 0.2; } .sunset .building { opacity: 0.1 } @media(max-width: 650px){ .sun { border-radius: 150px } } @media(max-width: 550px){ .sun { border-radius: 200px } } @media(max-width:600px){ .intro h1 { font-size: 60px } .mid { padding: 0 40px } .sun { text-align: center } } .analytics { background: #c8c8c8 } .analytics .explain h3 { color: #0768ac; text-transform: uppercase; font-size: 60px; transform: scaleY(2) } .analytics .explain h3 span { transform: scaleX(4); display: inline-block; font-weight: 100 } .countries { background: #fff; padding: 40px 80px; position: relative; } .countriesDrop { display: flex; flex-wrap: wrap; align-items: stretch; position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden; pointer-events: none; opacity: 0.5 } .countriesDrop span { display: inline-block; flex: 1; white-space: nowrap; padding: 4px; text-transform: uppercase; font-size: 18px; } .countryMain { position: relative; z-index: 9; color: #000; text-align: left } .topCountry { background: #ff0; text-align: left; padding: 2px 4px; border-bottom: 1px solid #000; } .bottomCountry { background: #fff; padding: 4px } .countryMain { display: grid; grid-gap: 10px; } .countryPiece { border: 1px solid #000; } .countryPiece:first-child { border-bottom: 0; font-weight: 900 } .pad { background: #1b1b1b; color: #fff; text-align: left; overflow: hidden; position: relative; } .innerPad { padding: 20px } .innerPad > p:first-child { color: #FFB928; font-size: 21px; padding-bottom: 15px; font-weight: 900 } .innerPad > div:empty::before { content: 'Our whole universe was in a hot dense state, then nearly fourteen billion years ago expansion started. Wait... The Earth began to cool, the autotrophs began to drool.'; font-size: 14px } .stylise { position: absolute; top: 0px; right: 0px; font-size: 12px; padding: 10px; } .stylise i { padding-left: 4px } .explainTag { background: #ff0; border: 1px solid #000; padding: 10px; text-transform: lowercase; font-size: 18px; } .what { padding: 20px 20px 0; display: grid; grid-template-columns: 1fr 1fr; grid-gap: 10px } .thing { border: 1px solid #000; padding: 10px; background: var(--c); --c: #c8c8c8; --f: #000 } .innerThing { border: 1px solid #000; background: #35f; min-height: 150px; position: relative; } .innerThing > p { position: absolute; bottom: 10px; padding: 4px 8px; border: 1px solid #000; background: var(--c); width: calc(100% - 20px); left: 50%; transform: translateX(-50%); text-transform: uppercase; color: var(--f); font-family: 'PT Sans Narrow'; text-align: left; font-weight: 900; } .thing:first-child { --c: #fb04bb; --f: #fff; } .thing:nth-child(2) { --c: #8a01fa; --f: #fff; } .thing:nth-child(3) { --c: #ddfd4b; --f: #000; } .thing:nth-child(4){ --c: #f22133; --f: #fff } .thing:nth-child(1) .innerThing { background-image: url(https://edge.webstraw.com/verycool/demo1.jpeg); background-size: cover; background-position: center } .thing:nth-child(2) .innerThing { background-image: url(https://edge.webstraw.com/verycool/demo3.jpeg); background-size: cover; background-position: bottom } .thing:nth-child(3) .innerThing { background-image: url(https://edge.webstraw.com/verycool/demo4.jpeg); background-size: cover; background-position: center } .thing:nth-child(4) .innerThing { background-image: url(https://edge.webstraw.com/verycool/demo2.jpeg); background-size: cover; background-position: bottom } .finalExplain { color: #000; padding-top: 16px } .menuOpen { color: #df001d; position: fixed; z-index: 9999; top: 15px; right: 15px; text-transform: uppercase; font-size: 20px; text-align: right } .menuSmall { padding: 10px 0 0; position: relative; top: -100vh; transition: all 0.3s ease } .menuSmall p { background: #df001d; color: #fff; padding: 0 0px; margin-bottom: 4px; transform: scaleY(2.5); transform-origin: top; margin-bottom: 46px } .bringDown { top: 0 } .menuOpen p:hover { cursor: pointer } @media(max-width:700px){ .building { font-size: 24px; } } @media(max-width:630px){ .analytics .explain h3 { font-size: 50px } } @media(max-width:530px){ .analytics .explain h3 { font-size: 40px } .intro h1 { font-size: 50px } .original button, .final button { font-size: 22px } .talk p { font-size: 29px } .site { font-size: 24px } .browser .tabs span { font-size: 16px } } @media(max-width:490px){ .part:nth-child(1) { font-size: 20px } .shape p { font-size: 40px } } @media(max-width:470px){ .site { font-size: 21px } .part.tagging { min-height: 350px } } @media(max-width:450px){ .intro h1 { font-size: 42px } .intro h2 { font-size: 15px } .part:nth-child(1){ font-size: 19px; } .interlude { font-size: 16px } .shape p { font-size: 35px; } .talk p { font-size: 24px; } .countries { padding: 40px 60px } .line { font-size: 20px; align-items: center } .space { font-size: 18px } .innerPad > p:first-child { font-size: 18px; } .innerPad > div:empty::before { font-size: 12px } .stylise i { font-size: 10px } } @media(max-width:430px){ .talk p { font-size: 21px; } .analytics .explain h3 { font-size: 33px } .original button, .final button { font-size: 20px; } .random { min-height: 350px } .what { padding: 20px 0 0; grid-template-columns: 1fr; max-width: 250px; margin: 0 auto; } .lineSplit { grid-template-columns: 1fr; grid-gap: 20px } .browser .tabs span { font-size: 14px; } .final button { font-size: 18px } .grad { min-height: 300px } .shape { height: 200px; width: 200px } } @media(max-width:403px){ .part:nth-child(1){ font-size: 18px; } .part.tagging { min-height: 300px } } @media(max-width:391px){ .final button { font-size: 16px } .final p { font-size: 15px } } .siteOverlay { position: fixed; top: 0; width: 100vw; right: -100vw; bottom: 0; background: #fff; z-index: 999999999999999999; transition: all 0.3s ease } .darkOverlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 99999999999999; background: rgba(0,0,0,0.5); display: none; } .showOverlay .siteOverlay { right: 0 } .login, .signUp,.forgot { margin: 0 auto; max-width: 400px; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #fff; z-index: 99999999999999; width: 90%; display: none; box-shadow: 0 0 0 1px #e6e6e6 } .prt { display: flex; align-items: center; padding: 10px 0; padding-top: 20px; padding-bottom: 5px; } .forgot .prt { padding-bottom: 10px } .prt:nth-child(2) { padding-bottom: 10px; padding-top: 5px; } .prt input { flex: 4; padding: 8px 15px; border: 1px solid #e6e6e6; width: 100%; outline: 0; background: #f9f9f9; } .prt p { flex: 3; margin: 0; font-family: Yantramanav; font-size: 17px; color: #6e6e6e; padding-right: 20px; } .loginWrap h2 { margin: 0; color: #444; font-family: Roboto; font-size: 18px; flex: 1; } .loginWrap { border-bottom: 1px solid #e6e6e6; padding: 10px 20px; display: flex; align-items: center; background: #f9f9f9; } .loginWrap p { font-size: 14px; flex: 1; text-align: right; font-family: Yantramanav; color: #6e6e6e; position: relative; top: 2px; } h2.no { background: red; color: #fff; } .coverLogin { background: #fff; padding: 0 20px; border-top: 0; } .coverLogin button { color: #6e6e6e; padding: 10px 40px; font-family: Yantramanav; border: 1px solid #e6e6e6; background: #f0f0f0; -webkit-appearance: none; font-size: 16px; width: 100%; margin: 10px 0 14px 0; font-weight: 900; transition: all 0.3s ease; } .coverLogin button i { font-size: 17px; font-weight: 900; left: 1px; } .coverLogin button:hover { cursor: pointer; color: #35f; } .coverLogin > p { color: #df001d; text-align: center; padding-bottom: 10px } .alternate { display: none; } .coverLogin i { position: relative; top: 1px; font-weight: 100; } .coverLogin button:hover i { animation-name: rota; animation-duration: 1s; animation-iteration-count: infinite; animation-timing-function: linear; font-weight: 900; } .forgot .coverLogin > span { font-family: 'Yantramanav'; display: block; font-size: 15px; color: #df001d; padding: 6px 0; display: none } .eyeHold { display: none } .eyeHold { --eyeballHeight: 40px; --eyeballWidth: 40px; --pupilColor: #000; display: grid; grid-template-columns: 1fr 1fr; grid-gap: 4px; margin: 0 0 0 auto; transform: translateY(-50%) } .eyeball { background: #fff; border: 1px solid #000; height: var(--eyeballHeight); width: var(--eyeballWidth); max-height: 100%; max-width: 100%; border-radius: 100%; display: inline-block; margin: 0 0 0 auto; position: relative; } .eyeball:last-child { margin: 0 auto 0 0 } .eyeball span { position: absolute; border-radius: 50%; display: block; top: 0; left: 0; right: 0; bottom: 0; transform: none; height: 100%; width: 100%; pointer-events: none; } .eyeball span { --pupilColor: #df001d } .eyeball span::after { content: ''; position: absolute; top: 0; right: 50%; transform: translateX(50%); margin: 15% 0; height: calc(100%/2); width: calc(100%/2); background: var(--pupilColor); border-radius: 100%; display: block; } .content > div.eyeHold { margin-bottom: 80px; margin-top: 20px; } div.part.goPremium { background: #df001d; padding: 15px 40px; font-size: 18px; } .goPremium a { text-decoration: underline; font-style: italic } .footer { display: none; background: #CB001D; color: #fff; display: grid; grid-template-columns: 3fr 1fr; text-align: left } .part.footer p { color: #fff } .simplify { background: #fff; color: #000; text-align: left; padding: 30px; font-size: 20px; } .simplify p { padding-bottom: 20px; color: #000 } .simplify p:last-child { padding-bottom: 0 } .simplify button { -webkit-appearance: none; appearance: none; border: 1px solid #000; padding: 6px 10px; background: #fff; font-size: 18px; font-family: 'Yantramanav'; transition: all 0.3s ease } .simplify button:hover { background: #000; color: #fff; cursor: pointer } .whoFor { font-size: 14px; text-transform: lowercase; transform: none; transition: all 0.3s ease } .whoFor:hover { transform: scaleX(1.5); cursor: pointer } .inter { position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); pointer-events: none; opacity: 0; z-index: 99999999; transition: opacity 0.3s ease } .inter .interludee { background-image: url("hand-min.png"); background-size: contain; height: 80vw; width: 80vw; background-position: center; background-repeat: no-repeat; --s: 0; transform: scale(var(--s)); transition: none; } .doing.inter .interludee { --s: 4; transition: all 4s ease } .inter p { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-family: 'Frank Ruhl Libre'; color: #df001d; font-size: 20px; opacity: 0; transition: all 0.3s ease } .splito { display: flex; align-items: center; justify-content: center; margin-top: 18px; } .loggo { font-size: 14px; text-transform: lowercase; transform: none; transition: all 0.3s ease; margin-right: 18px; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .loggo:hover { cursor: pointer } .doing.inter p { opacity: 1 } @media(max-width:500px){ .mid { padding: 0 30px } .innerThing { min-height: 200px } .part:nth-child(1){ border-top-right-radius: 20px; border-top-left-radius: 20px; } } @media(max-width:410px){ .part:nth-child(1){ font-size: 18px } .original button,.final button { font-size: 19px } }</style></head><body><div class="first"><div class="environment"><div class="clouds"><span style="top: 65%; left: 650px;">cloud</span><span style="top: 91%; left: 319px;">cloud</span><span style="top: 52%; left: 344.5px;">cloud</span><span style="font-size: 60px; top: 18%; left: 676px;">cloud</span><span style="top: 80%; left: 691.5px;">cloud</span><span style="top: 39%; left: 581.5px;">cloud</span><span style="top: 70%; left: 414px;">cloud</span><span style="font-size: 60px; top: 30%; left: 175px;">cloud</span><span style="top: 98%; left: 715px;">cloud</span><span style="top: 29%; left: 96px;">cloud</span><span style="top: 96%; left: 625.5px;">cloud</span><span style="top: 79%; left: 271px;">cloud</span><span style="top: 5%; left: 662.5px;">cloud</span><span style="top: 99%; left: 304px;">cloud</span><span style="top: 19%; left: 748px;">cloud</span></div><div class="sun" style="font-size: 20px;"><div class="innerSun"><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span><span>Sun</span></div></div><div class="buildings"><div class="building" style="color: rgb(244, 206, 241); top: calc(51px);"><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span></div><div class="building" style="color: rgb(238, 242, 236); top: calc(0px);"><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span></div><div class="building" style="color: rgb(248, 208, 235); top: calc(68px);"><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span></div><div class="building" style="color: rgb(204, 238, 248); top: calc(17px);"><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span></div><div class="building" style="color: rgb(206, 212, 203); top: calc(51px);"><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span></div><div class="building" style="color: rgb(233, 240, 225); top: calc(34px);"><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span></div><div class="building" style="color: rgb(241, 255, 218); top: calc(34px);"><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span></div><div class="building" style="color: rgb(205, 243, 200); top: calc(17px);"><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span></div><div class="building" style="color: rgb(224, 211, 223); top: calc(68px);"><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span></div><div class="building" style="color: rgb(228, 231, 210); top: calc(68px);"><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span></div><div class="building" style="color: rgb(219, 251, 243); top: calc(34px);"><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span></div><div class="building" style="color: rgb(208, 254, 209); top: calc(34px);"><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span></div><div class="building" style="color: rgb(225, 245, 214); top: calc(51px);"><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span></div><div class="building" style="color: rgb(238, 252, 216); top: calc(34px);"><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span></div><div class="building" style="color: rgb(224, 218, 255); top: calc(51px);"><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span><span>building</span></div></div></div><div class="darkOverlay"></div><div class="siteOverlay"></div><div class="login"> <div class="loginWrap"><h2>Sign in</h2><p>Forgot password</p></div><div class="coverLogin"><form action="" method="post"><div class="prt"><p>Email Address</p> <input type="email" name="username"></div><div class="prt"><p>Password</p> <input type="password" name="password"></div> <button type="submit">Continue <i class="fas fa-smile"></i></button></form></div> </div><div class="forgot"> <div class="loginWrap"><h2>Forgot password</h2></div> <div class="coverLogin"><div class="prt"> <p>Email Address</p><input type="email" class="emailForgot"> </div> <span>Check your email for a password reset link. Be sure to check your Spam folder if it doesn't show up</span><button type="submit">Send reset link <i class="fas fa-smile"></i></button> </div> </div><div class="signUp"> <div class="loginWrap"><h2>Sign up</h2></div> <div class="coverLogin"> <form action="" method="post"> <div class="prt"> <p>Email Address</p> <input type="email" name="usernameCreate"> </div> <div class="prt"> <p>Password</p> <input type="password" name="passwordCreate"> </div> <button type="submit">Continue <i class="fas fa-smile"></i></button> </form> </div> </div><div class="menuOpen"><p>Menu</p><div class="menuSmall"><p onclick="alert('Coming soon! :)')">Explore</p><a href="pricing"><p>Pricing</p></a><a href="https://twitter.com/okozzie_" target="_blank"><p>Twitter</p></a><p data-open="signIn">Log in</p><p data-open="signUp">Sign up</p></div></div><div class="inner"><div class="intro"><h1>Straw.Page</h1><h2>Extremely simple website builder</h2></div><div class="mid"><div class="content"><div class="part original"><p>Straw.Page lets you create <span class="non">unique websites</span> straight from your <span>phone</span></p><button type="button">Get Started for Free <i class="fas fa-grin-beam"></i></button><div class="splito"><p class="loggo">log in</p><p class="whoFor">Who's this for?</p></div></div><div class="window"></div><div class="interlude"><p>Create websites from your phone</p><div class="exclaim"><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span><span>!</span></div></div><div class="window"></div><div class="part random"><div class="paint"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div><div class="talk"><p>A drag and drop website builder that works on mobile.</p><p>experimental and built for the unconventional web.</p></div></div><div class="window"></div><div class="part simplify"><p>With <span>Straw.Page</span>, you can create your own <span>casual</span>, <span>dumb</span> or <span>professional</span> website to share with the world.</p><p>There's a bunch of themes to help you get started - all of which are hyper-flexible and extremely easy to customize.</p><p>You can also use it to create your own blog - public or private.</p><button type="button">Get Started for Free</button></div><div class="window"></div><div class="part analytics"><div class="explain"><h3><span style="width: 128px;">E</span>verything</h3><div class="what"><div class="thing"><div class="innerThing"><p>Landing pages</p></div></div><div class="thing"><div class="innerThing"><p>Store</p></div></div><div class="thing"><div class="innerThing"><p>Personal</p></div></div><div class="thing"><div class="innerThing"><p>Everything!</p></div></div></div><p class="finalExplain">...websites for everything!</p></div></div><div class="window"></div><div class="part browser"><div class="tabs"><span>Straw.Page</span><span>ZWD to USD</span><span>i need help</span></div><div class="mac"><div class="traffic"><span></span><span></span><span></span></div><div class="bar"><p><span>you.</span>straw.page</p></div></div><div class="site"><span>publishing to straw.page...</span><p>Publish your site to a subdomain or use your own <span>custom domain</span></p></div></div><div class="window"></div><div class="part countries"><div class="countriesDrop"><span style="background: rgb(171, 255, 158);">Eritrea</span><span style="background: rgb(161, 244, 122);">Ukraine</span><span style="background: rgb(122, 184, 239);">Venezuela</span><span style="background: rgb(191, 178, 255);">North Korea</span><span style="background: rgb(139, 244, 200);">Canada</span><span style="background: rgb(202, 109, 242);">Somaliland</span><span style="background: rgb(158, 117, 239);">Somalia</span><span style="background: rgb(252, 179, 231);">India</span><span style="background: rgb(197, 249, 164);">Colombia</span><span style="background: rgb(237, 187, 118);">Papa New Guinea</span><span style="background: rgb(239, 155, 201);">Belgium</span><span style="background: rgb(111, 226, 226);">France</span><span style="background: rgb(220, 255, 178);">United States</span><span style="background: rgb(234, 152, 242);">Mexico</span><span style="background: rgb(196, 227, 255);">Pakistan</span><span style="background: rgb(205, 244, 127);">China</span><span style="background: rgb(230, 177, 249);">Sudan</span><span style="background: rgb(252, 113, 187);">Kiribati</span><span style="background: rgb(192, 255, 178);">Uzbekistan</span><span style="background: rgb(142, 255, 189);">Switzerland</span><span style="background: rgb(209, 255, 145);">Ethiopia</span><span style="background: rgb(201, 255, 132);">Eswatini</span><span style="background: rgb(170, 246, 255);">Bangladesh</span><span style="background: rgb(244, 137, 205);">Germany</span><span style="background: rgb(244, 149, 152);">Somaliland</span><span style="background: rgb(242, 232, 128);">Ukraine</span><span style="background: rgb(146, 211, 239);">Papa New Guinea</span><span style="background: rgb(240, 170, 255);">Switzerland</span><span style="background: rgb(141, 252, 148);">United States</span><span style="background: rgb(177, 211, 249);">Venezuela</span><span style="background: rgb(134, 244, 171);">Somalia</span><span style="background: rgb(252, 213, 186);">Ethiopia</span><span style="background: rgb(247, 123, 185);">Sudan</span><span style="background: rgb(162, 128, 247);">Kiribati</span><span style="background: rgb(104, 214, 221);">Eritrea</span><span style="background: rgb(129, 132, 234);">Belgium</span><span style="background: rgb(168, 255, 240);">Colombia</span><span style="background: rgb(186, 204, 255);">China</span><span style="background: rgb(153, 144, 237);">North Korea</span><span style="background: rgb(242, 179, 152);">Bangladesh</span><span style="background: rgb(249, 203, 134);">Pakistan</span><span style="background: rgb(193, 252, 148);">Uzbekistan</span><span style="background: rgb(249, 247, 129);">India</span><span style="background: rgb(179, 247, 116);">Eswatini</span><span style="background: rgb(171, 177, 242);">Canada</span><span style="background: rgb(189, 255, 165);">France</span><span style="background: rgb(255, 229, 181);">Mexico</span><span style="background: rgb(197, 255, 170);">Germany</span><span style="background: rgb(122, 255, 239);">North Korea</span><span style="background: rgb(252, 176, 217);">United States</span><span style="background: rgb(252, 181, 184);">Venezuela</span><span style="background: rgb(255, 183, 209);">Ethiopia</span><span style="background: rgb(197, 255, 153);">France</span><span style="background: rgb(247, 175, 244);">Eritrea</span><span style="background: rgb(191, 241, 252);">Canada</span><span style="background: rgb(229, 244, 154);">Somaliland</span><span style="background: rgb(252, 191, 195);">Somalia</span><span style="background: rgb(234, 173, 247);">Eswatini</span><span style="background: rgb(239, 161, 141);">Papa New Guinea</span><span style="background: rgb(182, 255, 130);">Sudan</span><span style="background: rgb(255, 191, 192);">Switzerland</span><span style="background: rgb(247, 249, 114);">China</span><span style="background: rgb(233, 135, 242);">Uzbekistan</span><span style="background: rgb(244, 225, 173);">Colombia</span><span style="background: rgb(148, 244, 129);">Kiribati</span><span style="background: rgb(122, 255, 250);">Mexico</span><span style="background: rgb(252, 184, 246);">Germany</span><span style="background: rgb(255, 201, 223);">Belgium</span><span style="background: rgb(133, 234, 105);">India</span><span style="background: rgb(124, 182, 226);">Pakistan</span><span style="background: rgb(170, 255, 239);">Ukraine</span><span style="background: rgb(106, 237, 113);">Bangladesh</span></div><div class="countryMain"><div class="countryPiece"><div class="topCountry"><p>Analytics for your FUTURE website!</p></div></div><div class="countryPiece"><div class="topCountry"><p>Total Stats</p></div><div class="bottomCountry"><p>420 pageviews</p></div></div><div class="countryPiece"><div class="topCountry"><p>Where they are from</p></div><div class="bottomCountry"><p>United States - 405</p><p>Somaliland - 14</p><p>Pyongyang - 1</p></div></div><div class="countryPiece"><div class="topCountry"><p>How they discovered your website</p></div><div class="bottomCountry"><p>twitter.com - 220</p><p>notepin.co - 200</p></div></div></div></div><div class="window"></div><div class="part lines"><div class="lineSplit"><div class="left"><div class="line"><p>Straw.Page</p></div><div class="line"><p></p><p>Is</p></div><div class="line"></div><div class="line"><p>Also a</p></div><div class="line"></div><div class="line"><p></p><p>Blogging-</p></div><div class="line"><p>Platform</p></div></div><div class="right"><div class="space"><div class="marqHold" style="--lefter: -500px;"><p>Discover blogs</p><p>Custom domains</p><p>Private posts</p></div><div class="marqHold" style="--lefter: -500px;"><p>Discover blogs</p><p>Custom domains</p><p>Private posts</p></div></div><div class="pad"><div class="innerPad"><p>Heading</p><div></div></div><div class="stylise"><i class="fas fa-bold"></i><i class="fas fa-list"></i><i class="fas fa-italic"></i></div></div></div></div></div><div class="window"></div><div class="part tagging"><p>Piano</p><p>Human?</p><p><span>Forest</span><span>Chair</span></p></div><div class="explainTag"><p>Let artificial intelligence organize things for you automatically</p></div><div class="window"></div><div class="part goPremium"><p>OPTIONAL - Go <a href="pricing">Premium</a> for only $49/YEAR to get custom domains, analytics and more! :)</p></div><div class="window"></div><div class="part grad"><div class="shape"><p>STRAW</p><p>PAGE</p></div></div><div class="window"></div><div class="part final"><button type="button">Get Started for Free <i class="fas fa-grin-beam"></i></button><p>No signup required :)</p></div><div class="window"></div><div class="part footer"><div class="leftFooter"><a href="free-mobile-website-builder"><p>Free mobile website builder</p></a><a href="free-website-builder-for-kids"><p>Free website builder for kids</p></a></div><div class="rightFooter"><a href="https://twitter.com/okozzie_"><p>Twitter</p></a><a href="mailto:[email protected]"><p>Email</p></a></div></div><div class="part finalTwitter"><a href="https://twitter.com/okozzie_" target="_blank"><p>Follow me on twitter</p></a></div><div class="eyeHold"><div class="eyeball"><span></span></div><div class="eyeball"><span></span></div></div></div></div></div></div><div class="inter"><div class="interludee"></div><p>you.</p></div><script>var seed=null,colorDictionary={};loadColorBounds();var colorRanges=[]; function randomColor(e){if(void 0!==(e=e||{}).seed&&null!==e.seed&&e.seed===parseInt(e.seed,10))seed=e.seed;else if("string"==typeof e.seed)seed=stringToInteger(e.seed);else{if(void 0!==e.seed&&null!==e.seed)throw new TypeError("The seed value must be an integer or string");seed=null}var r,n;if(null!==e.count&&void 0!==e.count){for(var o=e.count,t=[],a=0;a<e.count;a++)colorRanges.push(!1);for(e.count=null;o>t.length;){var i=randomColor(e);null!==seed&&(e.seed=seed),t.push(i)}return e.count=o,t}return setFormat([r=pickHue(e),n=pickSaturation(r,e),pickBrightness(r,n,e)],e)};function pickHue(e){if(colorRanges.length>0){var r=randomWithin(t=getRealHueRange(e.hue)),n=(t[1]-t[0])/colorRanges.length,o=parseInt((r-t[0])/n);return!0===colorRanges[o]?o=(o+2)%colorRanges.length:colorRanges[o]=!0,(r=randomWithin(t=[(t[0]+o*n)%359,(t[0]+(o+1)*n)%359]))<0&&(r=360+r),r}var t;return(r=randomWithin(t=getHueRange(e.hue)))<0&&(r=360+r),r}function pickSaturation(e,r){if("monochrome"===r.hue)return 0;if("random"===r.luminosity)return randomWithin([0,100]);var n=getSaturationRange(e),o=n[0],t=n[1];switch(r.luminosity){case"bright":o=55;break;case"dark":o=t-10;break;case"light":t=55}return randomWithin([o,t])}function pickBrightness(e,r,n){var o=getMinimumBrightness(e,r),t=100;switch(n.luminosity){case"dark":t=o+20;break;case"light":o=(t+o)/2;break;case"random":o=0,t=100}return randomWithin([o,t])}function setFormat(e,r){switch(r.format){case"hsvArray":return e;case"hslArray":return HSVtoHSL(e);case"hsl":var n=HSVtoHSL(e);return"hsl("+n[0]+", "+n[1]+"%, "+n[2]+"%)";case"hsla":var o=HSVtoHSL(e),t=r.alpha||Math.random();return"hsla("+o[0]+", "+o[1]+"%, "+o[2]+"%, "+t+")";case"rgbArray":return HSVtoRGB(e);case"rgb":return"rgb("+HSVtoRGB(e).join(", ")+")";case"rgba":var a=HSVtoRGB(e);t=r.alpha||Math.random();return"rgba("+a.join(", ")+", "+t+")";default:return HSVtoHex(e)}}function getMinimumBrightness(e,r){for(var n=getColorInfo(e).lowerBounds,o=0;o<n.length-1;o++){var t=n[o][0],a=n[o][1],i=n[o+1][0],u=n[o+1][1];if(r>=t&&r<=i){var s=(u-a)/(i-t);return s*r+(a-s*t)}}return 0}function getHueRange(e){if("number"==typeof parseInt(e)){var r=parseInt(e);if(r<360&&r>0)return[r,r]}if("string"==typeof e)if(colorDictionary[e]){var n=colorDictionary[e];if(n.hueRange)return n.hueRange}else if(e.match(/^#?([0-9A-F]{3}|[0-9A-F]{6})$/i)){var o=HexToHSB(e)[0];return[o,o]}return[0,360]}function getSaturationRange(e){return getColorInfo(e).saturationRange}function getColorInfo(e){for(var r in e>=334&&e<=360&&(e-=360),colorDictionary){var n=colorDictionary[r];if(n.hueRange&&e>=n.hueRange[0]&&e<=n.hueRange[1])return colorDictionary[r]}return"Color not found"}function randomWithin(e){if(null===seed){var r=Math.random();return r+=.618033988749895,r%=1,Math.floor(e[0]+r*(e[1]+1-e[0]))}var n=e[1]||1,o=e[0]||0,t=(seed=(9301*seed+49297)%233280)/233280;return Math.floor(o+t*(n-o))}function HSVtoHex(e){var r=HSVtoRGB(e);function n(e){var r=e.toString(16);return 1==r.length?"0"+r:r}return"#"+n(r[0])+n(r[1])+n(r[2])}function defineColor(e,r,n){var o=n[0][0],t=n[n.length-1][0],a=n[n.length-1][1],i=n[0][1];colorDictionary[e]={hueRange:r,lowerBounds:n,saturationRange:[o,t],brightnessRange:[a,i]}}function loadColorBounds(){defineColor("monochrome",null,[[0,0],[100,0]]),defineColor("red",[-26,18],[[20,100],[30,92],[40,89],[50,85],[60,78],[70,70],[80,60],[90,55],[100,50]]),defineColor("orange",[18,46],[[20,100],[30,93],[40,88],[50,86],[60,85],[70,70],[100,70]]),defineColor("yellow",[46,62],[[25,100],[40,94],[50,89],[60,86],[70,84],[80,82],[90,80],[100,75]]),defineColor("green",[62,178],[[30,100],[40,90],[50,85],[60,81],[70,74],[80,64],[90,50],[100,40]]),defineColor("blue",[178,257],[[20,100],[30,86],[40,80],[50,74],[60,60],[70,52],[80,44],[90,39],[100,35]]),defineColor("purple",[257,282],[[20,100],[30,87],[40,79],[50,70],[60,65],[70,59],[80,52],[90,45],[100,42]]),defineColor("pink",[282,334],[[20,100],[30,90],[40,86],[60,84],[80,80],[90,75],[100,73]])}function HSVtoRGB(e){var r=e[0];0===r&&(r=1),360===r&&(r=359),r/=360;var n=e[1]/100,o=e[2]/100,t=Math.floor(6*r),a=6*r-t,i=o*(1-n),u=o*(1-a*n),s=o*(1-(1-a)*n),l=256,c=256,g=256;switch(t){case 0:l=o,c=s,g=i;break;case 1:l=u,c=o,g=i;break;case 2:l=i,c=o,g=s;break;case 3:l=i,c=u,g=o;break;case 4:l=s,c=i,g=o;break;case 5:l=o,c=i,g=u}return[Math.floor(255*l),Math.floor(255*c),Math.floor(255*g)]}function HexToHSB(e){e=3===(e=e.replace(/^#/,"")).length?e.replace(/(.)/g,"$1$1"):e;var r=parseInt(e.substr(0,2),16)/255,n=parseInt(e.substr(2,2),16)/255,o=parseInt(e.substr(4,2),16)/255,t=Math.max(r,n,o),a=t-Math.min(r,n,o),i=t?a/t:0;switch(t){case r:return[(n-o)/a%6*60||0,i,t];case n:return[60*((o-r)/a+2)||0,i,t];case o:return[60*((r-n)/a+4)||0,i,t]}}function HSVtoHSL(e){var r=e[0],n=e[1]/100,o=e[2]/100,t=(2-n)*o;return[r,Math.round(n*o/(t<1?t:2-t)*1e4)/100,t/2*100]}function stringToInteger(e){for(var r=0,n=0;n!==e.length&&!(r>=Number.MAX_SAFE_INTEGER);n++)r+=e.charCodeAt(n);return r}function getRealHueRange(e){if(isNaN(e)){if("string"==typeof e)if(colorDictionary[e]){var r=colorDictionary[e];if(r.hueRange)return r.hueRange}else if(e.match(/^#?([0-9A-F]{3}|[0-9A-F]{6})$/i)){return getColorInfo(HexToHSB(e)[0]).hueRange}}else{var n=parseInt(e);if(n<360&&n>0)return getColorInfo(e).hueRange}} function randomFrom(min, max) { return Math.floor(Math.random() * (max - min + 1) + min) } if($(window).width() < 700){ for(i=0;i<7;i++){ $(".clouds").append("<span>cloud</span>"); } } else { for(i=0;i<15;i++){ $(".clouds").append("<span>cloud</span>"); } } $(".clouds span").eq(3).css("font-size","60px"); $(".clouds span").eq(7).css("font-size","60px"); for(i=0;i<500;i++){ $(".exclaim").append("<span>!</span>"); $(".innerSun").append("<span>Sun</span>"); } for(i=0;i<100;i++){ $(".building").append("<span>building</span>"); } $(".building").each(function(){ randomRgb = randomFrom(220, 255); randomRgb = 'rgb('+randomFrom(200, 255)+','+randomFrom(200, 255)+','+randomFrom(200, 255)+')'; $(this).css("color",randomRgb); lH = parseInt($(".building").css("line-height")); $(this).css("top","calc("+lH+"px * "+randomFrom(0, 4)+")"); $(this).data("ratio",randomFrom(1,4)/2); }); $(".building").eq(100).css({ "font-size":"6vw", "font-weight":"900", "color":"#000", "opacity":"1", "top":"0" }); $(".building").eq(108).css({ "font-size":"6vw", "font-weight":"900", "color":"#000", "opacity":"1", "top":"0" }); $(".building").eq(8).css("top","calc("+lH+"px * "+randomFrom(4, 4)+")"); $(".clouds span").each(function(){ $(this).css("top",randomFrom(1,100)+"%"); $(this).css("left",randomFrom(1,100)+"%"); $(this).data("speed",randomFrom(1,3)); }); var isInstagram = navigator.userAgent.match(/instagram/i); if (!isInstagram) { setInterval(function(){ $(".clouds span").each(function(){ oldLeft = parseFloat($(this).css("left")); oldLeft-=(parseFloat($(this).data("speed"))/2); $(this).css("left",oldLeft+"px"); if(parseFloat($(this).css("left")) < 0-$(this).outerWidth()){ $(this).css("left","100%"); $(this).data("speed",randomFrom(1,3)); } }); },10); } else { $(".clouds").remove(); } oldScroll = $(window).scrollTop(); $(document).on("scroll",function(){ getTop = $(window).scrollTop(); if(1>0){ return true; } if(getTop > oldScroll){ $(".building").each(function(){ getRatio = parseFloat($(this).data("ratio")); getTop = $(this).position().top; $(this).css("top",getTop-getRatio+"px"); }); } else { $(".building").each(function(){ getRatio = parseFloat($(this).data("ratio")); getTop = $(this).position().top; $(this).css("top",getTop+getRatio+"px"); }); } oldScroll = $(window).scrollTop(); }); isPlay = true; tmpCounter = 1; function shuffleArr(a) { for (let i = a.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); [a[i], a[j]] = [a[j], a[i]]; } return a; } var countriesList = ["China","Somalia","Somaliland","Pakistan","India","Bangladesh","Ukraine","Canada","Uzbekistan","Kiribati","United States","Mexico","Colombia","Venezuela","Papa New Guinea","Ethiopia","Eritrea","Sudan","France","Belgium","Germany","North Korea","Switzerland","Eswatini"]; countriesList = shuffleArr(countriesList); for(l=0;l<countriesList.length;l++){ $(".countriesDrop").append("<span>"+countriesList[l]+"</span>"); } countriesList = shuffleArr(countriesList); for(l=0;l<countriesList.length;l++){ $(".countriesDrop").append("<span>"+countriesList[l]+"</span>"); } countriesList = shuffleArr(countriesList); for(l=0;l<countriesList.length;l++){ $(".countriesDrop").append("<span>"+countriesList[l]+"</span>"); } $(".countriesDrop span").each(function(){ $(this).css("background",randomColor({luminosity:'light'})); }); $(document).on("click",".menuOpen > p",function(){ $(".menuSmall").toggleClass("bringDown"); }); $("[data-open=signUp]").click(function(){ $(".signUp").fadeToggle(300); $(".darkOverlay").fadeToggle(200); }); $("[data-open=signIn],.loggo").click(function(){ $(".login").fadeToggle(300); $(".darkOverlay").fadeToggle(200); }); $(".darkOverlay").click(function(){ $(".login,.signUp,.forgot").fadeOut(300); $(".darkOverlay").fadeOut(200); }); $(document).on("click",".login .loginWrap p",function(){ $(".login").fadeOut(200); $(".forgot").fadeIn(200); }); $(document).on("click",".forgot button",function(){ var getEmail = $(".emailForgot").val(); $.ajax({ url: "reset", type: "POST", data: {email:getEmail}, success: function(data){ $(".forgot .coverLogin > span").show(200); } }); }); window.addEventListener('load', function() { $(".marqHold").each(function(){ getWidth = $(this).outerWidth(); $(this).after($(this).clone()); $(this).last().css("--lefter",getWidth+"px"); }); var retW = $(".analytics .explain h3 span").outerWidth(); $(".analytics .explain h3 span").css("width",retW*4+"px"); if($(window) > 600){ $(".sun").addClass("tmpSun"); var calcDiff = $(window).height() - ($(".innerSun").offset().top+$(".innerSun").outerHeight()); if(calcDiff > 0){ $(".sun").css("--d",(calcDiff*1.2)+"px"); } if(parseInt($(".sun").css("font-size")) < 20){ $(".sun").css("font-size","20px"); } $(".sun").removeClass("tmpSun"); } if(parseInt($(".sun").css("font-size")) < 20){ $(".sun").css("font-size","20px"); } setInterval(function(){ if(isPlay){ $(".marqHold").each(function(){ if($(this).offset().left+$(this).outerWidth()<$(".right").offset().left){ newAppend = $(this).parent().find(".marqHold").last().clone(); getWidth = $(this).outerWidth(); shifter = parseInt($(this).css("--lefter"))+getWidth; $(newAppend).css("--lefter",(getWidth+shifter)+"px"); $(this).parent().append(newAppend); oldPos = (parseInt($(newAppend).css("--lefter"))-100)+"px"; $(newAppend).css("--lefter",oldPos); $(this).remove(); } else { oldPos = (parseInt($(this).css("--lefter"))-100)+"px"; $(this).css("--lefter",oldPos); } }); } },1000); }); $(document).on("mouseover",".original button,.final button,.simplify button",function(){ $(".first").addClass("sunset"); }); $(document).on("mouseout",".original button,.final button,.simplify button",function(){ if($(".content").hasClass("hider")){ return false; } $(".first").removeClass("sunset"); }); function drawShape(){ } handleTmp = setInterval(drawShape, 1000); $(document).on("click",".original button,.final button,.simplify button",function(e){ if($(this).hasClass("dashgo")){ return; } $(".content").addClass("hider"); try { window.fathom.trackGoal('XXP1NO23', 0); } catch(err){ } setTimeout(function(){ window.location.href = "make?themes"; },300); }); $(document).on("click",".whoFor",function(){ if($(".inter").hasClass("doing")){ return false; } $(".inter").addClass("doing"); $(".inter").css("opacity","1"); setTimeout(function(){ $(".inter").css("opacity","0"); setTimeout(function(){ $(".inter").removeClass("doing"); },300); },4000); }); $(document).on("mousemove touchmove scroll",function(e){ var currentY = e.originalEvent.touches ? e.originalEvent.touches[0].pageY : e.pageY; var currentX = e.originalEvent.touches ? e.originalEvent.touches[0].pageX : e.pageX; $(".eyeball span").each(function(){ var eye = $(this); var eyeX = (eye.offset().left) + (eye.width() / 2); var eyeY = (eye.offset().top) + (eye.height() / 2); rad = Math.atan2(currentX - eyeX, currentY - eyeY); rot = (rad * (180 / Math.PI) * -1) + 180; eye.css({ '-webkit-transform': 'rotate(' + rot + 'deg)', '-moz-transform': 'rotate(' + rot + 'deg)', '-ms-transform': 'rotate(' + rot + 'deg)', 'transform': 'rotate(' + rot + 'deg)' }); }); });</script><script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'8df6559e8d233857',t:'MTczMTA3Njk5Ny4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script><iframe height="1" width="1" style="position: absolute; top: 0px; left: 0px; border: none; visibility: hidden;"></iframe></body></html>