diff --git a/css/globals.css b/css/globals.css new file mode 100644 index 0000000..039b51c --- /dev/null +++ b/css/globals.css @@ -0,0 +1,59 @@ +@import url("https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"); + +@font-face { + font-family: "Liberation Sans-Bold"; + font-style: normal; + font-weight: 700; + src: url("../fonts/LiberationSans-Bold.ttf") format("truetype"); +} +@font-face { + font-family: "Liberation Mono-Bold"; + font-style: normal; + font-weight: 700; + src: url("../fonts/LiberationMono-Bold.ttf") format("truetype"); +} +@font-face { + font-family: "Liberation Sans-Regular"; + font-style: normal; + font-weight: 400; + src: url("../fonts/LiberationSans-Regular.ttf") format("truetype"); +} +.screen a { + display: contents; + text-decoration: none; +} + +.container-center-horizontal { + display: flex; + flex-direction: row; + justify-content: center; + pointer-events: none; + width: 100%; +} + +.container-center-horizontal > * { + flex-shrink: 0; + pointer-events: auto; +} + +.valign-text-middle { + display: flex; + flex-direction: column; + justify-content: center; +} + +.hidden, +.hidden * { + pointer-events: none; + visibility: hidden; +} + +.smart-layers-pointers, +.smart-layers-pointers * { + pointer-events: auto; + visibility: visible; +} + +* { + box-sizing: border-box; +} diff --git a/css/mobile.css b/css/mobile.css new file mode 100644 index 0000000..15058b1 --- /dev/null +++ b/css/mobile.css @@ -0,0 +1,1931 @@ +/* screen - desktop */ + +.desktop { + align-items: flex-start; + background-color: var(--white); + display: flex; + flex-direction: column; + height: 1853px; + width: 1280px; +} + +.desktop .header { + align-items: flex-end; + background-color: var(--brand2); + display: flex; + height: 722px; + width: 1280px; +} + +.desktop .overlap-group-1 { + height: 662px; + position: relative; + width: 1280px; +} + +.desktop .hero-tilt { + height: 80px; + left: 0; + position: absolute; + top: 582px; + width: 1280px; +} + +.desktop .group-24 { + align-items: flex-start; + display: flex; + flex-direction: column; + left: 10px; + position: absolute; + top: 0; + width: 1264px; +} + +.desktop .flex-row { + align-items: center; + display: flex; + margin-left: -0.17px; + min-width: 1260px; +} + +.desktop .brand { + display: block; + height: 60px; + width: 316px; + opacity: 0; +transform: translate(-25px, 0); +} + +.desktop .brand.bp3-animate-enter { + animation: bp3-animate-enter-frames 0.20s ease-in-out 0.00s 1 normal forwards; + display: block; + opacity: 0; +transform: translate(-25px, 0); +} + +@keyframes bp3-animate-enter-frames { + from{opacity: 0; +transform: translate(-25px, 0); +} +to{opacity: 1; +transform: translate(0,0); +} +} + +.desktop .menu { + height: 27px; + margin-bottom: 1.0px; + margin-left: 619px; + position: relative; + width: 325px; + opacity: 0; +transform: translate(25px, 0); +} + +.desktop .menu.bp3-animate-enter1 { + animation: bp3-animate-enter1-frames 0.20s ease-in-out 0.00s 1 normal forwards; + opacity: 0; +transform: translate(25px, 0); +} + +@keyframes bp3-animate-enter1-frames { + from{opacity: 0; +transform: translate(25px, 0); +} +to{opacity: 1; +transform: translate(0,0); +} +} + +.desktop .about { + left: -5px; + letter-spacing: 0; + line-height: 27px; + position: absolute; + text-align: right; + top: 0; + white-space: nowrap; +} + +.desktop .support { + left: 108px; + letter-spacing: 0; + line-height: 27px; + position: absolute; + text-align: right; + top: 0; + white-space: nowrap; +} + +.desktop .connect { + left: 249px; + letter-spacing: 0; + line-height: 27px; + position: absolute; + text-align: right; + top: 0; + white-space: nowrap; +} + +.desktop .overlap-group2 { + height: 532px; + margin-top: 64px; + position: relative; + width: 1256px; +} + +.desktop .overlap-group1 { + height: 532px; + left: 0; + position: absolute; + top: 0; + width: 1256px; +} + +.desktop .hero-text { + left: 0; + letter-spacing: 0; + line-height: 72px; + position: absolute; + top: 5px; + width: 632px; +} + +.desktop .hero-text-1 { + left: 0; + letter-spacing: 0; + line-height: 27px; + position: absolute; + top: 261px; + width: 632px; +} + +.desktop .stack4 { + height: 508px; + left: 628px; + position: absolute; + top: 0; + width: 628px; +} + +.desktop .human1 { + height: 249px; + left: 563px; + position: absolute; + top: 283px; + width: 173px; +} + +.desktop .buttons { + align-items: flex-start; + display: flex; + height: 44px; + left: 0; + position: absolute; + top: 355px; +} + +.desktop .button { + background-color: var(--brand1); + height: 44px; + pointer-events: auto; + position: relative; + transition: all 0.2s ease; + width: 125px; +} + +.desktop .text-i13631421432 { + height: 14px; + left: 20px; + letter-spacing: 0; + line-height: 14px; + position: absolute; + text-align: center; + top: 15px; + white-space: nowrap; +} + +.desktop .button-1 { + align-items: center; + background-color: var(--light-gray); + display: flex; + height: 44px; + justify-content: flex-end; + margin-left: 20px; + min-width: 141px; + padding: 0 18px; +} + +.desktop .text-i13631422432 { + height: 14px; + letter-spacing: 0; + line-height: 14px; + min-width: 103px; + text-align: center; + white-space: nowrap; +} + +.desktop .aim { + align-items: flex-end; + background-color: var(--brand3); + display: flex; + flex-direction: column; + height: 495px; + padding: 20px 8px; + width: 1280px; +} + +.desktop .reclaim-hosting { + letter-spacing: 0; + line-height: 72px; + min-height: 72px; + text-align: center; + white-space: nowrap; + width: 1262px; + opacity: 0; +transform: translate(0, 25px); +} + +.desktop .reclaim-hosting.bp3-animate-enter2 { + animation: bp3-animate-enter2-frames 0.20s ease-in-out 0.00s 1 normal forwards; + opacity: 0; +transform: translate(0, 25px); +} + +@keyframes bp3-animate-enter2-frames { + from{opacity: 0; +transform: translate(0, 25px); +} +to{opacity: 1; +transform: translate(0,0); +} +} + +.desktop .hero-text-2 { + align-self: center; + letter-spacing: 0; + line-height: 27px; + margin-left: 2.0px; + margin-top: 20px; + min-height: 54px; + text-align: center; + width: 632px; + opacity: 0; +} + +.desktop .hero-text-2.bp3-animate-enter3 { + animation: bp3-animate-enter3-frames 0.20s ease-in-out 0.00s 1 normal forwards; + opacity: 0; +} + +@keyframes bp3-animate-enter3-frames { + from{opacity: 0; +} +to{opacity: 1; +} +} + +.desktop .flex-row-1 { + align-items: flex-start; + align-self: center; + display: flex; + margin-top: 40px; + min-width: 1260px; +} + +.desktop .box { + background-color: var(--white); + box-shadow: 10px 10px 0px #00b856; + height: 175px; + position: relative; + width: 610px; + opacity: 0; +transform: translate(-25px, 0); +} + +.desktop .box.bp3-animate-enter4 { + animation: bp3-animate-enter4-frames 0.20s ease-in-out 0.00s 1 normal forwards; + opacity: 0; +transform: translate(-25px, 0); +} + +@keyframes bp3-animate-enter4-frames { + from{opacity: 0; +transform: translate(-25px, 0); +} +to{opacity: 1; +transform: translate(0,0); +} +} + +.desktop .frame-4 { + align-items: flex-end; + display: flex; + height: 60px; + justify-content: flex-end; + left: 10px; + position: absolute; + top: 10px; +} + +.desktop .overlap-group { + height: 78px; + margin-bottom: -18px; + position: relative; + width: 560px; +} + +.desktop .text { + left: 0; + letter-spacing: 0; + line-height: 48px; + position: absolute; + top: 30px; + white-space: nowrap; + width: 512px; +} + +.desktop .icon-dove { + height: 60px; + left: 500px; + position: absolute; + top: 0; + width: 60px; +} + +.desktop .text-1 { + left: 40px; + letter-spacing: 0; + line-height: 27px; + position: absolute; + top: 108px; + white-space: nowrap; + width: 592px; +} + +.desktop .box-1 { + background-color: var(--white); + box-shadow: 10px 10px 0px #00b856; + height: 175px; + margin-left: 39px; + position: relative; + width: 610px; + opacity: 0; +transform: translate(-25px, 0); +} + +.desktop .box-1.bp3-animate-enter5 { + animation: bp3-animate-enter5-frames 0.20s ease-in-out 0.00s 1 normal forwards; + opacity: 0; +transform: translate(-25px, 0); +} + +@keyframes bp3-animate-enter5-frames { + from{opacity: 0; +transform: translate(-25px, 0); +} +to{opacity: 1; +transform: translate(0,0); +} +} + +.desktop .icon-dove-1 { + height: 60px; + left: 500px; + position: absolute; + top: 0; + width: 61px; +} + +.desktop .text-5 { + letter-spacing: 0; + line-height: 24px; + margin-top: 50px; + min-height: 24px; + text-align: center; + white-space: nowrap; + width: 1262px; + opacity: 0; +} + +.desktop .text-5.bp3-animate-enter6 { + animation: bp3-animate-enter6-frames 0.20s ease-in-out 0.00s 1 normal forwards; + opacity: 0; +} + +@keyframes bp3-animate-enter6-frames { + from{opacity: 0; +} +to{opacity: 1; +} +} + +.desktop .frame-25 { + align-items: flex-start; + display: flex; + height: 529px; + width: 1280px; +} + +.desktop .overlap-group2-1 { + height: 489px; + position: relative; + width: 1280px; +} + +.desktop .hero-tilt-1 { + height: 40px; + left: 0; + position: absolute; + top: 60px; + width: 1280px; +} + +.desktop .frame-26 { + background-color: var(--brand3); + height: 60px; + left: 0; + position: absolute; + top: 0; + width: 1280px; +} + +.desktop .group-26 { + align-items: center; + display: flex; + flex-direction: column; + left: 10px; + position: absolute; + top: 0; + width: 1264px; +} + +.desktop .human2 { + height: 100px; + margin-right: 4.34px; + width: 101px; +} + +.desktop .overlap-group-2 { + height: 122px; + margin-right: 2.0px; + margin-top: 20px; + position: relative; + width: 1262px; +} + +.desktop .a-joint-mission { + left: 0; + letter-spacing: 0; + line-height: 72px; + position: absolute; + text-align: center; + top: 0; + white-space: nowrap; + width: 1262px; + opacity: 0; +transform: translate(0, 25px); +} + +.desktop .a-joint-mission.bp3-animate-enter7 { + animation: bp3-animate-enter7-frames 0.20s ease-in-out 0.00s 1 normal forwards; + opacity: 0; +transform: translate(0, 25px); +} + +@keyframes bp3-animate-enter7-frames { + from{opacity: 0; +transform: translate(0, 25px); +} +to{opacity: 1; +transform: translate(0,0); +} +} + +.desktop .hero-text-3 { + left: 315px; + letter-spacing: 0; + line-height: 27px; + position: absolute; + text-align: center; + top: 68px; + width: 632px; + opacity: 0; +} + +.desktop .hero-text-3.bp3-animate-enter8 { + animation: bp3-animate-enter8-frames 0.20s ease-in-out 0.00s 1 normal forwards; + opacity: 0; +} + +@keyframes bp3-animate-enter8-frames { + from{opacity: 0; +} +to{opacity: 1; +} +} + +.desktop .frame-20 { + align-items: flex-start; + display: flex; + height: 100px; + justify-content: flex-end; + margin-right: 4.0px; + margin-top: 47px; + min-width: 433px; +} + +.desktop .logo-autonomic { + display: block; + height: 80px; + width: 99px; + opacity: 0; +} + +.desktop .logo-autonomic.bp3-animate-enter9 { + animation: bp3-animate-enter9-frames 0.20s ease-in-out 0.00s 1 normal forwards; + display: block; + opacity: 0; +} + +@keyframes bp3-animate-enter9-frames { + from{opacity: 0; +} +to{opacity: 1; +} +} + +.desktop .logo-platform6 { + display: block; + height: 80px; + margin-left: 82px; + width: 71px; + opacity: 0; +} + +.desktop .logo-platform6.bp3-animate-enter10 { + animation: bp3-animate-enter10-frames 0.20s ease-in-out 0.00s 1 normal forwards; + display: block; + opacity: 0; +} + +@keyframes bp3-animate-enter10-frames { + from{opacity: 0; +} +to{opacity: 1; +} +} + +.desktop .logo-wa { + display: block; + height: 80px; + margin-left: 90px; + margin-top: 5px; + width: 91px; + opacity: 0; +} + +.desktop .logo-wa.bp3-animate-enter11 { + animation: bp3-animate-enter11-frames 0.20s ease-in-out 0.00s 1 normal forwards; + display: block; + opacity: 0; +} + +@keyframes bp3-animate-enter11-frames { + from{opacity: 0; +} +to{opacity: 1; +} +} + +.desktop .frame-21 { + align-items: center; + display: flex; + margin-right: 4.0px; + margin-top: 20px; + min-width: 630px; +} + +.desktop .logo-cni { + display: block; + height: 80px; + width: 292px; + opacity: 0; +} + +.desktop .logo-cni.bp3-animate-enter12 { + animation: bp3-animate-enter12-frames 0.20s ease-in-out 0.00s 1 normal forwards; + display: block; + opacity: 0; +} + +@keyframes bp3-animate-enter12-frames { + from{opacity: 0; +} +to{opacity: 1; +} +} + +.desktop .logo-mediablaze { + display: block; + height: 50px; + margin-left: 54px; + margin-top: 0; + width: 284px; + opacity: 0; +} + +.desktop .logo-mediablaze.bp3-animate-enter13 { + animation: bp3-animate-enter13-frames 0.20s ease-in-out 0.00s 1 normal forwards; + display: block; + opacity: 0; +} + +@keyframes bp3-animate-enter13-frames { + from{opacity: 0; +} +to{opacity: 1; +} +} + +.desktop .frame-28 { + align-items: center; + background-color: var(--brand2); + display: flex; + height: 107px; + padding: 0 25px; + width: 1280px; +} + +.desktop .hero-text-4 { + letter-spacing: 0; + line-height: 27px; + min-height: 27px; + text-align: center; + white-space: nowrap; + width: 1192px; +} +/* screen - mobile */ + +.mobile { + align-items: flex-start; + background-color: var(--white); + display: flex; + flex-direction: column; + height: 2257px; + width: 375px; +} + +.mobile .header { + align-items: center; + background-color: var(--brand2); + display: flex; + flex-direction: column; + height: 933px; + overflow: hidden; + width: 375px; +} + +.mobile .brand { + display: block; + height: 60px; + margin-right: 14.34px; + margin-top: 20px; + width: 321px; + opacity: 0; +transform: translate(-25px, 0); +} + +.mobile .brand.bp1-animate-enter { + animation: bp1-animate-enter-frames 0.20s ease-in-out 0.00s 1 normal forwards; + display: block; + opacity: 0; +transform: translate(-25px, 0); +} + +@keyframes bp1-animate-enter-frames { + from{opacity: 0; +transform: translate(-25px, 0); +} +to{opacity: 1; +transform: translate(0,0); +} +} + +.mobile .menu { + height: 27px; + margin-top: 22px; + position: relative; + width: 335px; + opacity: 0; +transform: translate(25px, 0); +} + +.mobile .menu.bp1-animate-enter1 { + animation: bp1-animate-enter1-frames 0.20s ease-in-out 0.00s 1 normal forwards; + opacity: 0; +transform: translate(25px, 0); +} + +@keyframes bp1-animate-enter1-frames { + from{opacity: 0; +transform: translate(25px, 0); +} +to{opacity: 1; +transform: translate(0,0); +} +} + +.mobile .about { + left: 3px; + letter-spacing: 0; + line-height: 27px; + position: absolute; + text-align: center; + top: 0; + white-space: nowrap; +} + +.mobile .support { + left: 114px; + letter-spacing: 0; + line-height: 27px; + position: absolute; + text-align: center; + top: 0; + white-space: nowrap; +} + +.mobile .connect { + left: 255px; + letter-spacing: 0; + line-height: 27px; + position: absolute; + text-align: center; + top: 0; + white-space: nowrap; +} + +.mobile .hero-text { + letter-spacing: 0; + line-height: 48px; + margin-left: 2.0px; + margin-top: 20px; + min-height: 144px; + width: 337px; +} + +.mobile .hero-text-1 { + letter-spacing: 0; + line-height: 27px; + margin-left: 2.0px; + margin-top: 20px; + min-height: 108px; + width: 337px; +} + +.mobile .overlap-group { + height: 308px; + margin-right: 0.49px; + margin-top: 38px; + position: relative; + width: 365px; +} + +.mobile .stack4 { + height: 279px; + left: 20px; + position: absolute; + top: 0; + width: 345px; +} + +.mobile .human1 { + height: 120px; + left: 0; + position: absolute; + top: 188px; + width: 85px; +} + +.mobile .buttons { + align-items: flex-start; + display: flex; + margin-left: 1.0px; + margin-top: 40px; + min-width: 286px; +} + +.mobile .button { + background-color: var(--brand1); + height: 44px; + pointer-events: auto; + position: relative; + transition: all 0.2s ease; + width: 125px; +} + +.mobile .text-i13629856432 { + height: 14px; + left: 20px; + letter-spacing: 0; + line-height: 14px; + position: absolute; + text-align: center; + top: 15px; + white-space: nowrap; +} + +.mobile .button-1 { + align-items: center; + background-color: var(--light-gray); + display: flex; + height: 44px; + justify-content: flex-end; + margin-left: 20px; + min-width: 141px; + padding: 0 18px; +} + +.mobile .text-i13629857432 { + height: 14px; + letter-spacing: 0; + line-height: 14px; + min-width: 103px; + text-align: center; + white-space: nowrap; +} + +.mobile .hero-tilt { + height: 40px; + margin-top: 40px; + width: 375px; +} + +.mobile .aim { + align-items: center; + background-color: var(--brand3); + display: flex; + flex-direction: column; + height: 618px; + padding: 20px 0; + width: 375px; +} + +.mobile .group-23 { + align-items: flex-start; + display: flex; + flex-direction: column; + margin-left: 4.0px; + min-height: 176px; + width: 339px; +} + +.mobile .reclaim-hosting { + letter-spacing: 0; + line-height: 48px; + min-height: 48px; + text-align: center; + white-space: nowrap; + width: 337px; + opacity: 0; +transform: translate(0, 25px); +} + +.mobile .reclaim-hosting.bp1-animate-enter2 { + animation: bp1-animate-enter2-frames 0.20s ease-in-out 0.00s 1 normal forwards; + opacity: 0; +transform: translate(0, 25px); +} + +@keyframes bp1-animate-enter2-frames { + from{opacity: 0; +transform: translate(0, 25px); +} +to{opacity: 1; +transform: translate(0,0); +} +} + +.mobile .hero-text-2 { + letter-spacing: 0; + line-height: 27px; + margin-top: 20px; + min-height: 108px; + width: 337px; + opacity: 0; +} + +.mobile .hero-text-2.bp1-animate-enter3 { + animation: bp1-animate-enter3-frames 0.20s ease-in-out 0.00s 1 normal forwards; + opacity: 0; +} + +@keyframes bp1-animate-enter3-frames { + from{opacity: 0; +} +to{opacity: 1; +} +} + +.mobile .box { + background-color: var(--white); + box-shadow: 10px 10px 0px #00b856; + height: 147px; + margin-top: 20px; + position: relative; + width: 355px; + opacity: 0; +transform: translate(-25px, 0); +} + +.mobile .box.bp1-animate-enter4 { + animation: bp1-animate-enter4-frames 0.20s ease-in-out 0.00s 1 normal forwards; + opacity: 0; +transform: translate(-25px, 0); +} + +@keyframes bp1-animate-enter4-frames { + from{opacity: 0; +transform: translate(-25px, 0); +} +to{opacity: 1; +transform: translate(0,0); +} +} + +.mobile .frame-4 { + align-items: flex-start; + display: flex; + height: 60px; + left: 10px; + position: absolute; + top: 10px; +} + +.mobile .text { + color: var(--brand1); + font-family: var(--font-family-liberation_sans-bold); + font-size: var(--font-size-m); + font-weight: 700; + letter-spacing: 0; + line-height: 27px; + min-height: 27px; + white-space: nowrap; + width: 267px; +} + +.mobile .icon-dove { + height: 60px; + margin-left: 8px; + width: 60px; +} + +.mobile .text-1 { + left: 10px; + letter-spacing: 0; + line-height: 27px; + position: absolute; + top: 80px; + width: 337px; +} + +.mobile .box-1 { + background-color: var(--white); + box-shadow: 10px 10px 0px #00b856; + height: 147px; + margin-top: 20px; + position: relative; + width: 355px; + opacity: 0; +transform: translate(-25px, 0); +} + +.mobile .box-1.bp1-animate-enter5 { + animation: bp1-animate-enter5-frames 0.20s ease-in-out 0.00s 1 normal forwards; + opacity: 0; +transform: translate(-25px, 0); +} + +@keyframes bp1-animate-enter5-frames { + from{opacity: 0; +transform: translate(-25px, 0); +} +to{opacity: 1; +transform: translate(0,0); +} +} + +.mobile .text-10 { + letter-spacing: 0; + line-height: 24px; + margin-left: 2.0px; + margin-top: 20px; + min-height: 48px; + text-align: center; + width: 337px; + opacity: 0; +} + +.mobile .text-10.bp1-animate-enter6 { + animation: bp1-animate-enter6-frames 0.20s ease-in-out 0.00s 1 normal forwards; + opacity: 0; +} + +@keyframes bp1-animate-enter6-frames { + from{opacity: 0; +} +to{opacity: 1; +} +} + +.mobile .frame-25 { + align-items: center; + display: flex; + flex-direction: column; + height: 599px; + width: 375px; +} + +.mobile .overlap-group1 { + height: 100px; + position: relative; + width: 375px; +} + +.mobile .hero-tilt-1 { + height: 40px; + left: 0; + position: absolute; + top: 60px; + width: 375px; +} + +.mobile .frame-26 { + background-color: var(--brand3); + height: 60px; + left: 0; + position: absolute; + top: 0; + width: 375px; +} + +.mobile .human2 { + height: 100px; + left: 137px; + position: absolute; + top: 0; + width: 102px; +} + +.mobile .a-joint-mission { + letter-spacing: 0; + line-height: 48px; + margin-left: 2.0px; + margin-top: 20px; + min-height: 48px; + text-align: center; + white-space: nowrap; + width: 337px; + opacity: 0; +transform: translate(0, 25px); +} + +.mobile .a-joint-mission.bp1-animate-enter7 { + animation: bp1-animate-enter7-frames 0.20s ease-in-out 0.00s 1 normal forwards; + opacity: 0; +transform: translate(0, 25px); +} + +@keyframes bp1-animate-enter7-frames { + from{opacity: 0; +transform: translate(0, 25px); +} +to{opacity: 1; +transform: translate(0,0); +} +} + +.mobile .hero-text-3 { + letter-spacing: 0; + line-height: 27px; + margin-left: 2.0px; + margin-top: 20px; + min-height: 81px; + width: 337px; + opacity: 0; +} + +.mobile .hero-text-3.bp1-animate-enter8 { + animation: bp1-animate-enter8-frames 0.20s ease-in-out 0.00s 1 normal forwards; + opacity: 0; +} + +@keyframes bp1-animate-enter8-frames { + from{opacity: 0; +} +to{opacity: 1; +} +} + +.mobile .frame-20 { + align-items: flex-start; + display: flex; + height: 100px; + justify-content: flex-end; + margin-left: 1.0px; + margin-top: 20px; + min-width: 334px; +} + +.mobile .logo-autonomic { + display: block; + height: 80px; + width: 99px; + opacity: 0; +} + +.mobile .logo-autonomic.bp1-animate-enter9 { + animation: bp1-animate-enter9-frames 0.20s ease-in-out 0.00s 1 normal forwards; + display: block; + opacity: 0; +} + +@keyframes bp1-animate-enter9-frames { + from{opacity: 0; +} +to{opacity: 1; +} +} + +.mobile .logo-platform6 { + display: block; + height: 80px; + margin-left: 33px; + width: 70px; + opacity: 0; +} + +.mobile .logo-platform6.bp1-animate-enter10 { + animation: bp1-animate-enter10-frames 0.20s ease-in-out 0.00s 1 normal forwards; + display: block; + opacity: 0; +} + +@keyframes bp1-animate-enter10-frames { + from{opacity: 0; +} +to{opacity: 1; +} +} + +.mobile .logo-wa { + display: block; + height: 80px; + margin-left: 41px; + margin-top: 5px; + width: 91px; + opacity: 0; +} + +.mobile .logo-wa.bp1-animate-enter11 { + animation: bp1-animate-enter11-frames 0.20s ease-in-out 0.00s 1 normal forwards; + display: block; + opacity: 0; +} + +@keyframes bp1-animate-enter11-frames { + from{opacity: 0; +} +to{opacity: 1; +} +} + +.mobile .frame-21 { + align-items: flex-end; + display: flex; + flex-direction: column; + margin-top: 20px; + min-height: 150px; + padding: 0 21.2px; + width: 335px; +} + +.mobile .logo-cni { + display: block; + height: 80px; + width: 292px; + opacity: 0; +} + +.mobile .logo-cni.bp1-animate-enter12 { + animation: bp1-animate-enter12-frames 0.20s ease-in-out 0.00s 1 normal forwards; + display: block; + opacity: 0; +} + +@keyframes bp1-animate-enter12-frames { + from{opacity: 0; +} +to{opacity: 1; +} +} + +.mobile .logo-mediablaze { + align-self: center; + display: block; + height: 50px; + margin-left: 1.0px; + margin-top: 20px; + width: 284px; + opacity: 0; +} + +.mobile .logo-mediablaze.bp1-animate-enter13 { + animation: bp1-animate-enter13-frames 0.20s ease-in-out 0.00s 1 normal forwards; + display: block; + opacity: 0; +} + +@keyframes bp1-animate-enter13-frames { + from{opacity: 0; +} +to{opacity: 1; +} +} + +.mobile .frame-28 { + align-items: center; + background-color: var(--brand2); + display: flex; + height: 107px; + padding: 0 18px; + width: 375px; +} + +.mobile .hero-text-4 { + letter-spacing: 0; + line-height: 27px; + margin-left: 2px; + min-height: 27px; + text-align: center; + white-space: nowrap; + width: 337px; +} +/* screen - tablet */ + +.tablet { + align-items: flex-start; + background-color: var(--white); + display: flex; + flex-direction: column; + height: 2050px; + width: 768px; +} + +.tablet .overlap-group { + height: 1394px; + position: relative; + width: 768px; +} + +.tablet .header { + align-items: center; + background-color: var(--brand2); + display: flex; + flex-direction: column; + height: 933px; + left: 0; + padding: 20px 0; + position: absolute; + top: 0; + width: 768px; +} + +.tablet .brand { + display: block; + height: 60px; + margin-right: 15.34px; + width: 321px; + opacity: 0; +transform: translate(-25px, 0); +} + +.tablet .brand.bp2-animate-enter { + animation: bp2-animate-enter-frames 0.20s ease-in-out 0.00s 1 normal forwards; + display: block; + opacity: 0; +transform: translate(-25px, 0); +} + +@keyframes bp2-animate-enter-frames { + from{opacity: 0; +transform: translate(-25px, 0); +} +to{opacity: 1; +transform: translate(0,0); +} +} + +.tablet .menu { + height: 27px; + margin-right: 0; + margin-top: 22px; + position: relative; + width: 686px; + opacity: 0; +transform: translate(25px, 0); +} + +.tablet .menu.bp2-animate-enter1 { + animation: bp2-animate-enter1-frames 0.20s ease-in-out 0.00s 1 normal forwards; + opacity: 0; +transform: translate(25px, 0); +} + +@keyframes bp2-animate-enter1-frames { + from{opacity: 0; +transform: translate(25px, 0); +} +to{opacity: 1; +transform: translate(0,0); +} +} + +.tablet .about { + left: 178px; + letter-spacing: 0; + line-height: 27px; + position: absolute; + text-align: center; + top: 0; + white-space: nowrap; +} + +.tablet .support { + left: 290px; + letter-spacing: 0; + line-height: 27px; + position: absolute; + text-align: center; + top: 0; + white-space: nowrap; +} + +.tablet .connect { + left: 431px; + letter-spacing: 0; + line-height: 27px; + position: absolute; + text-align: center; + top: 0; + white-space: nowrap; +} + +.tablet .hero-text { + letter-spacing: 0; + line-height: 48px; + margin-left: 2.0px; + margin-top: 20px; + min-height: 96px; + text-align: center; + width: 486px; +} + +.tablet .hero-text-1 { + letter-spacing: 0; + line-height: 27px; + margin-left: 2.0px; + margin-top: 19px; + min-height: 54px; + text-align: center; + width: 642px; +} + +.tablet .overlap-group1-1 { + height: 478px; + margin-left: 25.59px; + margin-top: 19px; + position: relative; + width: 538px; +} + +.tablet .stack4 { + height: 402px; + left: 40px; + position: absolute; + top: 0; + width: 498px; +} + +.tablet .human1 { + height: 180px; + left: 0; + position: absolute; + top: 267px; + width: 128px; +} + +.tablet .buttons { + align-items: flex-start; + display: flex; + height: 44px; + left: 113px; + position: absolute; + top: 434px; +} + +.tablet .button { + background-color: var(--brand1); + height: 44px; + pointer-events: auto; + position: relative; + transition: all 0.2s ease; + width: 125px; +} + +.tablet .text-i13630520432 { + height: 14px; + left: 20px; + letter-spacing: 0; + line-height: 14px; + position: absolute; + text-align: center; + top: 15px; + white-space: nowrap; +} + +.tablet .button-1 { + align-items: center; + background-color: var(--light-gray); + display: flex; + height: 44px; + justify-content: flex-end; + margin-left: 20px; + min-width: 141px; + padding: 0 18px; +} + +.tablet .text-i13630521432 { + height: 14px; + letter-spacing: 0; + line-height: 14px; + min-width: 103px; + text-align: center; + white-space: nowrap; +} + +.tablet .hero-tilt { + height: 40px; + margin-top: 40px; + width: 768px; +} + +.tablet .aim { + align-items: flex-end; + background-color: var(--brand3); + display: flex; + flex-direction: column; + height: 497px; + left: 0; + padding: 20px 18px; + position: absolute; + top: 897px; + width: 768px; +} + +.tablet .group-23 { + align-items: flex-start; + display: flex; + flex-direction: column; + margin-right: 18px; + min-height: 122px; + width: 692px; +} + +.tablet .reclaim-hosting { + letter-spacing: 0; + line-height: 48px; + min-height: 48px; + text-align: center; + white-space: nowrap; + width: 690px; + opacity: 0; +transform: translate(0, 25px); +} + +.tablet .reclaim-hosting.bp2-animate-enter2 { + animation: bp2-animate-enter2-frames 0.20s ease-in-out 0.00s 1 normal forwards; + opacity: 0; +transform: translate(0, 25px); +} + +@keyframes bp2-animate-enter2-frames { + from{opacity: 0; +transform: translate(0, 25px); +} +to{opacity: 1; +transform: translate(0,0); +} +} + +.tablet .hero-text-2 { + letter-spacing: 0; + line-height: 27px; + margin-top: 20px; + min-height: 54px; + text-align: center; + width: 642px; + opacity: 0; +} + +.tablet .hero-text-2.bp2-animate-enter3 { + animation: bp2-animate-enter3-frames 0.20s ease-in-out 0.00s 1 normal forwards; + opacity: 0; +} + +@keyframes bp2-animate-enter3-frames { + from{opacity: 0; +} +to{opacity: 1; +} +} + +.tablet .flex-row { + align-items: flex-start; + display: flex; + margin-right: 22px; + margin-top: 74px; + min-width: 688px; +} + +.tablet .box { + background-color: var(--white); + box-shadow: 10px 10px 0px #00b856; + height: 207px; + position: relative; + width: 335px; + opacity: 0; +transform: translate(-25px, 0); +} + +.tablet .box.bp2-animate-enter4 { + animation: bp2-animate-enter4-frames 0.20s ease-in-out 0.00s 1 normal forwards; + opacity: 0; +transform: translate(-25px, 0); +} + +@keyframes bp2-animate-enter4-frames { + from{opacity: 0; +transform: translate(-25px, 0); +} +to{opacity: 1; +transform: translate(0,0); +} +} + +.tablet .frame-4 { + align-items: flex-end; + display: flex; + height: 60px; + justify-content: flex-end; + left: 10px; + position: absolute; + top: 10px; +} + +.tablet .overlap-group1 { + height: 106px; + margin-bottom: -46px; + position: relative; + width: 305px; +} + +.tablet .text-1 { + left: 0; + letter-spacing: 0; + line-height: 48px; + position: absolute; + top: 10px; + width: 247px; +} + +.tablet .icon-dove { + height: 60px; + left: 245px; + position: absolute; + top: 0; + width: 60px; +} + +.tablet .text-1-1 { + left: 20px; + letter-spacing: 0; + line-height: 27px; + position: absolute; + top: 136px; + width: 317px; +} + +.tablet .box-1 { + background-color: var(--white); + box-shadow: 10px 10px 0px #00b856; + height: 207px; + margin-left: 18px; + position: relative; + width: 335px; + opacity: 0; +transform: translate(-25px, 0); +} + +.tablet .box-1.bp2-animate-enter5 { + animation: bp2-animate-enter5-frames 0.20s ease-in-out 0.00s 1 normal forwards; + opacity: 0; +transform: translate(-25px, 0); +} + +@keyframes bp2-animate-enter5-frames { + from{opacity: 0; +transform: translate(-25px, 0); +} +to{opacity: 1; +transform: translate(0,0); +} +} + +.tablet .text-15 { + letter-spacing: 0; + line-height: 24px; + margin-top: 30px; + min-height: 24px; + text-align: center; + white-space: nowrap; + width: 730px; + opacity: 0; +} + +.tablet .text-15.bp2-animate-enter6 { + animation: bp2-animate-enter6-frames 0.20s ease-in-out 0.00s 1 normal forwards; + opacity: 0; +} + +@keyframes bp2-animate-enter6-frames { + from{opacity: 0; +} +to{opacity: 1; +} +} + +.tablet .frame-25 { + align-items: center; + display: flex; + flex-direction: column; + height: 549px; + width: 768px; +} + +.tablet .overlap-group2 { + height: 100px; + position: relative; + width: 768px; +} + +.tablet .hero-tilt-1 { + height: 40px; + left: 0; + position: absolute; + top: 60px; + width: 768px; +} + +.tablet .frame-26 { + background-color: var(--brand3); + height: 60px; + left: 0; + position: absolute; + top: 0; + width: 768px; +} + +.tablet .human2 { + height: 100px; + left: 333px; + position: absolute; + top: 0; + width: 102px; +} + +.tablet .a-joint-mission { + letter-spacing: 0; + line-height: 48px; + margin-left: 2.0px; + margin-top: 20px; + min-height: 48px; + text-align: center; + white-space: nowrap; + width: 730px; + opacity: 0; +transform: translate(0, 25px); +} + +.tablet .a-joint-mission.bp2-animate-enter7 { + animation: bp2-animate-enter7-frames 0.20s ease-in-out 0.00s 1 normal forwards; + opacity: 0; +transform: translate(0, 25px); +} + +@keyframes bp2-animate-enter7-frames { + from{opacity: 0; +transform: translate(0, 25px); +} +to{opacity: 1; +transform: translate(0,0); +} +} + +.tablet .hero-text-3 { + letter-spacing: 0; + line-height: 27px; + margin-left: 2.0px; + margin-top: 20px; + min-height: 54px; + text-align: center; + width: 642px; + opacity: 0; +} + +.tablet .hero-text-3.bp2-animate-enter8 { + animation: bp2-animate-enter8-frames 0.20s ease-in-out 0.00s 1 normal forwards; + opacity: 0; +} + +@keyframes bp2-animate-enter8-frames { + from{opacity: 0; +} +to{opacity: 1; +} +} + +.tablet .frame-20 { + align-items: flex-start; + display: flex; + height: 100px; + justify-content: flex-end; + margin-top: 47px; + min-width: 640px; +} + +.tablet .logo-autonomic { + display: block; + height: 80px; + width: 99px; + opacity: 0; +} + +.tablet .logo-autonomic.bp2-animate-enter9 { + animation: bp2-animate-enter9-frames 0.20s ease-in-out 0.00s 1 normal forwards; + display: block; + opacity: 0; +} + +@keyframes bp2-animate-enter9-frames { + from{opacity: 0; +} +to{opacity: 1; +} +} + +.tablet .logo-platform6 { + display: block; + height: 80px; + margin-left: 186px; + width: 70px; + opacity: 0; +} + +.tablet .logo-platform6.bp2-animate-enter10 { + animation: bp2-animate-enter10-frames 0.20s ease-in-out 0.00s 1 normal forwards; + display: block; + opacity: 0; +} + +@keyframes bp2-animate-enter10-frames { + from{opacity: 0; +} +to{opacity: 1; +} +} + +.tablet .logo-wa { + display: block; + height: 80px; + margin-left: 194px; + margin-top: 5px; + width: 91px; + opacity: 0; +} + +.tablet .logo-wa.bp2-animate-enter11 { + animation: bp2-animate-enter11-frames 0.20s ease-in-out 0.00s 1 normal forwards; + display: block; + opacity: 0; +} + +@keyframes bp2-animate-enter11-frames { + from{opacity: 0; +} +to{opacity: 1; +} +} + +.tablet .frame-21 { + align-items: center; + display: flex; + margin-top: 20px; + min-width: 640px; +} + +.tablet .logo-cni { + display: block; + height: 80px; + width: 292px; + opacity: 0; +} + +.tablet .logo-cni.bp2-animate-enter12 { + animation: bp2-animate-enter12-frames 0.20s ease-in-out 0.00s 1 normal forwards; + display: block; + opacity: 0; +} + +@keyframes bp2-animate-enter12-frames { + from{opacity: 0; +} +to{opacity: 1; +} +} + +.tablet .logo-mediablaze { + display: block; + height: 50px; + margin-left: 64px; + margin-top: 0; + width: 284px; + opacity: 0; +} + +.tablet .logo-mediablaze.bp2-animate-enter13 { + animation: bp2-animate-enter13-frames 0.20s ease-in-out 0.00s 1 normal forwards; + display: block; + opacity: 0; +} + +@keyframes bp2-animate-enter13-frames { + from{opacity: 0; +} +to{opacity: 1; +} +} + +.tablet .frame-28 { + align-items: center; + background-color: var(--brand2); + display: flex; + height: 107px; + padding: 0 38px; + width: 768px; +} + +.tablet .hero-text-4 { + letter-spacing: 0; + line-height: 27px; + margin-left: 2px; + min-height: 27px; + text-align: center; + white-space: nowrap; + width: 690px; +} +@media screen and (max-width: 767px) { + .screen.desktop { + display: none; + } + .screen.tablet { + display: none; + } +} +@media screen and (min-width: 768px) and (max-width: 1279px) { + .screen.desktop { + display: none; + } + .screen.mobile { + display: none; + } +} +@media screen and (min-width: 1280px) { + .screen.mobile { + display: none; + } + .screen.tablet { + display: none; + } +} \ No newline at end of file diff --git a/css/styleguide.css b/css/styleguide.css new file mode 100644 index 0000000..acdfbbd --- /dev/null +++ b/css/styleguide.css @@ -0,0 +1,88 @@ +:root { + --brand1: #00aa44; + --brand2: #f7f2c6; + --brand3: #d9f2e3; + --light-gray: #0000000d; + --off-black: #00000066; + --white: #ffffff; + + --font-size-l: 32px; + --font-size-m: 18px; + --font-size-s: 16px; + --font-size-xl: 48px; + --font-size-xs: 14px; + + --font-family-liberation_mono-bold: "Liberation Mono-Bold", Helvetica; + --font-family-liberation_sans-bold: "Liberation Sans-Bold", Helvetica; + --font-family-liberation_sans-regular: "Liberation Sans-Regular", Helvetica; +} +.liberationsans-bold-black-18px { + color: var(--off-black); + font-family: var(--font-family-liberation_sans-bold); + font-size: var(--font-size-m); + font-style: normal; + font-weight: 700; +} + +.liberationmono-bold-black-18px { + color: var(--off-black); + font-family: var(--font-family-liberation_mono-bold); + font-size: var(--font-size-m); + font-style: normal; + font-weight: 700; +} + +.liberationsans-bold-white-18px { + color: var(--white); + font-family: var(--font-family-liberation_sans-bold); + font-size: var(--font-size-m); + font-style: normal; + font-weight: 700; +} + +.liberationsans-bold-jade-32px { + color: var(--brand1); + font-family: var(--font-family-liberation_sans-bold); + font-size: var(--font-size-l); + font-style: normal; + font-weight: 700; +} + +.liberationsans-bold-jade-48px { + color: var(--brand1); + font-family: var(--font-family-liberation_sans-bold); + font-size: var(--font-size-xl); + font-style: normal; + font-weight: 700; +} + +.liberationmono-bold-white-14px { + color: var(--white); + font-family: var(--font-family-liberation_mono-bold); + font-size: var(--font-size-xs); + font-style: normal; + font-weight: 700; +} + +.liberationmono-bold-jade-14px { + color: var(--brand1); + font-family: var(--font-family-liberation_mono-bold); + font-size: var(--font-size-xs); + font-style: normal; + font-weight: 700; +} + +.liberationsans-regular-normal-black-16px { + color: var(--off-black); + font-family: var(--font-family-liberation_sans-regular); + font-size: var(--font-size-s); + font-style: normal; + font-weight: 400; +} + +.liberationsans-bold-white-18px-2 { + font-family: var(--font-family-liberation_sans-bold); + font-size: var(--font-size-m); + font-style: normal; + font-weight: 700; +} diff --git a/fonts/LiberationMono-Bold.ttf b/fonts/LiberationMono-Bold.ttf new file mode 100644 index 0000000..bf6d450 Binary files /dev/null and b/fonts/LiberationMono-Bold.ttf differ diff --git a/fonts/LiberationSans-Bold.ttf b/fonts/LiberationSans-Bold.ttf new file mode 100644 index 0000000..916abee Binary files /dev/null and b/fonts/LiberationSans-Bold.ttf differ diff --git a/fonts/LiberationSans-Regular.ttf b/fonts/LiberationSans-Regular.ttf new file mode 100644 index 0000000..59d2e25 Binary files /dev/null and b/fonts/LiberationSans-Regular.ttf differ diff --git a/img/---background-10@2x.png b/img/---background-10@2x.png new file mode 100644 index 0000000..4a8b30e Binary files /dev/null and b/img/---background-10@2x.png differ diff --git a/img/---background-2@2x.png b/img/---background-2@2x.png new file mode 100644 index 0000000..7cd6580 Binary files /dev/null and b/img/---background-2@2x.png differ diff --git a/img/---background-3@2x.png b/img/---background-3@2x.png new file mode 100644 index 0000000..3e4ce0f Binary files /dev/null and b/img/---background-3@2x.png differ diff --git a/img/---background-6@2x.png b/img/---background-6@2x.png new file mode 100644 index 0000000..fc23f48 Binary files /dev/null and b/img/---background-6@2x.png differ diff --git a/img/---background-8@2x.png b/img/---background-8@2x.png new file mode 100644 index 0000000..8d220c2 Binary files /dev/null and b/img/---background-8@2x.png differ diff --git a/img/---ink-10@2x.png b/img/---ink-10@2x.png new file mode 100644 index 0000000..ff2339f Binary files /dev/null and b/img/---ink-10@2x.png differ diff --git a/img/---ink-11@2x.png b/img/---ink-11@2x.png new file mode 100644 index 0000000..885cf83 Binary files /dev/null and b/img/---ink-11@2x.png differ diff --git a/img/---ink-12@2x.png b/img/---ink-12@2x.png new file mode 100644 index 0000000..e70dbd9 Binary files /dev/null and b/img/---ink-12@2x.png differ diff --git a/img/---ink-15@2x.png b/img/---ink-15@2x.png new file mode 100644 index 0000000..aa058e0 Binary files /dev/null and b/img/---ink-15@2x.png differ diff --git a/img/---ink-16@2x.png b/img/---ink-16@2x.png new file mode 100644 index 0000000..74699e7 Binary files /dev/null and b/img/---ink-16@2x.png differ diff --git a/img/---ink-17@2x.png b/img/---ink-17@2x.png new file mode 100644 index 0000000..329437c Binary files /dev/null and b/img/---ink-17@2x.png differ diff --git a/img/---ink-18@2x.png b/img/---ink-18@2x.png new file mode 100644 index 0000000..7de350e Binary files /dev/null and b/img/---ink-18@2x.png differ diff --git a/img/---ink-19@2x.png b/img/---ink-19@2x.png new file mode 100644 index 0000000..a1f7b4d Binary files /dev/null and b/img/---ink-19@2x.png differ diff --git a/img/---ink-1@2x.png b/img/---ink-1@2x.png new file mode 100644 index 0000000..682af0e Binary files /dev/null and b/img/---ink-1@2x.png differ diff --git a/img/---ink-20@2x.png b/img/---ink-20@2x.png new file mode 100644 index 0000000..ae66907 Binary files /dev/null and b/img/---ink-20@2x.png differ diff --git a/img/---ink-3@2x.png b/img/---ink-3@2x.png new file mode 100644 index 0000000..98d04af Binary files /dev/null and b/img/---ink-3@2x.png differ diff --git a/img/---ink-4@2x.png b/img/---ink-4@2x.png new file mode 100644 index 0000000..12a7821 Binary files /dev/null and b/img/---ink-4@2x.png differ diff --git a/img/---ink-5@2x.png b/img/---ink-5@2x.png new file mode 100644 index 0000000..f40d043 Binary files /dev/null and b/img/---ink-5@2x.png differ diff --git a/img/---ink-7@2x.png b/img/---ink-7@2x.png new file mode 100644 index 0000000..2d8edea Binary files /dev/null and b/img/---ink-7@2x.png differ diff --git a/img/---ink-8@2x.png b/img/---ink-8@2x.png new file mode 100644 index 0000000..f03c24f Binary files /dev/null and b/img/---ink-8@2x.png differ diff --git a/img/---ink-9@2x.png b/img/---ink-9@2x.png new file mode 100644 index 0000000..8a95113 Binary files /dev/null and b/img/---ink-9@2x.png differ diff --git a/img/---ink@2x.png b/img/---ink@2x.png new file mode 100644 index 0000000..6ed387c Binary files /dev/null and b/img/---ink@2x.png differ diff --git a/img/brand-1@2x.png b/img/brand-1@2x.png new file mode 100644 index 0000000..aa415c3 Binary files /dev/null and b/img/brand-1@2x.png differ diff --git a/img/brand-1@2x.svg b/img/brand-1@2x.svg new file mode 100644 index 0000000..5de3529 --- /dev/null +++ b/img/brand-1@2x.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/img/brand-2@2x.png b/img/brand-2@2x.png new file mode 100644 index 0000000..89d074b Binary files /dev/null and b/img/brand-2@2x.png differ diff --git a/img/brand-2@2x.svg b/img/brand-2@2x.svg new file mode 100644 index 0000000..83574ec --- /dev/null +++ b/img/brand-2@2x.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/img/brand-5@2x.png b/img/brand-5@2x.png new file mode 100644 index 0000000..ee2444b Binary files /dev/null and b/img/brand-5@2x.png differ diff --git a/img/brand@2x.png b/img/brand@2x.png new file mode 100644 index 0000000..4e85c26 Binary files /dev/null and b/img/brand@2x.png differ diff --git a/img/brand@2x.svg b/img/brand@2x.svg new file mode 100644 index 0000000..287cd0b --- /dev/null +++ b/img/brand@2x.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/img/frame-11@2x.png b/img/frame-11@2x.png new file mode 100644 index 0000000..50388af Binary files /dev/null and b/img/frame-11@2x.png differ diff --git a/img/frame-13-2@2x.png b/img/frame-13-2@2x.png new file mode 100644 index 0000000..7ce1718 Binary files /dev/null and b/img/frame-13-2@2x.png differ diff --git a/img/frame-13@2x.png b/img/frame-13@2x.png new file mode 100644 index 0000000..2314826 Binary files /dev/null and b/img/frame-13@2x.png differ diff --git a/img/group-1@2x.png b/img/group-1@2x.png new file mode 100644 index 0000000..6bba94d Binary files /dev/null and b/img/group-1@2x.png differ diff --git a/img/group-2@2x.png b/img/group-2@2x.png new file mode 100644 index 0000000..9661c14 Binary files /dev/null and b/img/group-2@2x.png differ diff --git a/img/group-4-1@2x.png b/img/group-4-1@2x.png new file mode 100644 index 0000000..cf3c6b8 Binary files /dev/null and b/img/group-4-1@2x.png differ diff --git a/img/group-4-2@2x.png b/img/group-4-2@2x.png new file mode 100644 index 0000000..86cef74 Binary files /dev/null and b/img/group-4-2@2x.png differ diff --git a/img/group-4@2x.png b/img/group-4@2x.png new file mode 100644 index 0000000..cfd344c Binary files /dev/null and b/img/group-4@2x.png differ diff --git a/img/group@2x.png b/img/group@2x.png new file mode 100644 index 0000000..e4adfe9 Binary files /dev/null and b/img/group@2x.png differ diff --git a/img/hero-tilt-1@1x.svg b/img/hero-tilt-1@1x.svg new file mode 100644 index 0000000..0a33dfd --- /dev/null +++ b/img/hero-tilt-1@1x.svg @@ -0,0 +1,3 @@ + + + diff --git a/img/hero-tilt-2@2x.png b/img/hero-tilt-2@2x.png new file mode 100644 index 0000000..7b50138 Binary files /dev/null and b/img/hero-tilt-2@2x.png differ diff --git a/img/hero-tilt-3@2x.png b/img/hero-tilt-3@2x.png new file mode 100644 index 0000000..bf4b925 Binary files /dev/null and b/img/hero-tilt-3@2x.png differ diff --git a/img/hero-tilt-4@1x.png b/img/hero-tilt-4@1x.png new file mode 100644 index 0000000..b1ba094 Binary files /dev/null and b/img/hero-tilt-4@1x.png differ diff --git a/img/hero-tilt-5@1x.png b/img/hero-tilt-5@1x.png new file mode 100644 index 0000000..6c5b9f7 Binary files /dev/null and b/img/hero-tilt-5@1x.png differ diff --git a/img/hero-tilt@1x.svg b/img/hero-tilt@1x.svg new file mode 100644 index 0000000..25b850c --- /dev/null +++ b/img/hero-tilt@1x.svg @@ -0,0 +1,3 @@ + + + diff --git a/img/human1-1@2x.svg b/img/human1-1@2x.svg new file mode 100644 index 0000000..ab11483 --- /dev/null +++ b/img/human1-1@2x.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/img/human1-2@2x.svg b/img/human1-2@2x.svg new file mode 100644 index 0000000..a2a5424 --- /dev/null +++ b/img/human1-2@2x.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/img/human1@2x.svg b/img/human1@2x.svg new file mode 100644 index 0000000..f4ef727 --- /dev/null +++ b/img/human1@2x.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/img/human2-1@2x.svg b/img/human2-1@2x.svg new file mode 100644 index 0000000..ac01d50 --- /dev/null +++ b/img/human2-1@2x.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/img/human2-2@2x.svg b/img/human2-2@2x.svg new file mode 100644 index 0000000..10cbe33 --- /dev/null +++ b/img/human2-2@2x.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/img/human2@2x.png b/img/human2@2x.png new file mode 100644 index 0000000..f5546d8 Binary files /dev/null and b/img/human2@2x.png differ diff --git a/img/human2@2x.svg b/img/human2@2x.svg new file mode 100644 index 0000000..17fe6b1 --- /dev/null +++ b/img/human2@2x.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/img/icon-dove-1@2x.svg b/img/icon-dove-1@2x.svg new file mode 100644 index 0000000..a368909 --- /dev/null +++ b/img/icon-dove-1@2x.svg @@ -0,0 +1,3 @@ + + + diff --git a/img/icon-dove-2@2x.svg b/img/icon-dove-2@2x.svg new file mode 100644 index 0000000..9ad85d6 --- /dev/null +++ b/img/icon-dove-2@2x.svg @@ -0,0 +1,3 @@ + + + diff --git a/img/icon-dove@2x.png b/img/icon-dove@2x.png new file mode 100644 index 0000000..493c727 Binary files /dev/null and b/img/icon-dove@2x.png differ diff --git a/img/icon-dove@2x.svg b/img/icon-dove@2x.svg new file mode 100644 index 0000000..2f61d3c --- /dev/null +++ b/img/icon-dove@2x.svg @@ -0,0 +1,3 @@ + + + diff --git a/img/icon-handshake@2x.png b/img/icon-handshake@2x.png new file mode 100644 index 0000000..497135a Binary files /dev/null and b/img/icon-handshake@2x.png differ diff --git a/img/icon-handshake@2x.svg b/img/icon-handshake@2x.svg new file mode 100644 index 0000000..ef35d8e --- /dev/null +++ b/img/icon-handshake@2x.svg @@ -0,0 +1,3 @@ + + + diff --git a/img/logo-autonomic-1@2x.svg b/img/logo-autonomic-1@2x.svg new file mode 100644 index 0000000..303c354 --- /dev/null +++ b/img/logo-autonomic-1@2x.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/img/logo-autonomic@2x.png b/img/logo-autonomic@2x.png new file mode 100644 index 0000000..d2badb0 Binary files /dev/null and b/img/logo-autonomic@2x.png differ diff --git a/img/logo-autonomic@2x.svg b/img/logo-autonomic@2x.svg new file mode 100644 index 0000000..f0e3ab8 --- /dev/null +++ b/img/logo-autonomic@2x.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/img/logo-cni-1@2x.svg b/img/logo-cni-1@2x.svg new file mode 100644 index 0000000..8e5fc97 --- /dev/null +++ b/img/logo-cni-1@2x.svg @@ -0,0 +1,73 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/img/logo-cni-2@2x.svg b/img/logo-cni-2@2x.svg new file mode 100644 index 0000000..4a4e80b --- /dev/null +++ b/img/logo-cni-2@2x.svg @@ -0,0 +1,73 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/img/logo-cni@2x.png b/img/logo-cni@2x.png new file mode 100644 index 0000000..57a6d0c Binary files /dev/null and b/img/logo-cni@2x.png differ diff --git a/img/logo-cni@2x.svg b/img/logo-cni@2x.svg new file mode 100644 index 0000000..f306401 --- /dev/null +++ b/img/logo-cni@2x.svg @@ -0,0 +1,73 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/img/logo-mediablaze-1@2x.svg b/img/logo-mediablaze-1@2x.svg new file mode 100644 index 0000000..bfe0fc6 --- /dev/null +++ b/img/logo-mediablaze-1@2x.svg @@ -0,0 +1,40 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/img/logo-mediablaze@2x.png b/img/logo-mediablaze@2x.png new file mode 100644 index 0000000..aa8087f Binary files /dev/null and b/img/logo-mediablaze@2x.png differ diff --git a/img/logo-mediablaze@2x.svg b/img/logo-mediablaze@2x.svg new file mode 100644 index 0000000..0138e9f --- /dev/null +++ b/img/logo-mediablaze@2x.svg @@ -0,0 +1,40 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/img/logo-platform6-1@2x.svg b/img/logo-platform6-1@2x.svg new file mode 100644 index 0000000..47d6e86 --- /dev/null +++ b/img/logo-platform6-1@2x.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/img/logo-platform6-2@2x.svg b/img/logo-platform6-2@2x.svg new file mode 100644 index 0000000..a04f35b --- /dev/null +++ b/img/logo-platform6-2@2x.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/img/logo-platform6@2x.png b/img/logo-platform6@2x.png new file mode 100644 index 0000000..2974866 Binary files /dev/null and b/img/logo-platform6@2x.png differ diff --git a/img/logo-platform6@2x.svg b/img/logo-platform6@2x.svg new file mode 100644 index 0000000..177c13e --- /dev/null +++ b/img/logo-platform6@2x.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/img/logo-wa-1@2x.svg b/img/logo-wa-1@2x.svg new file mode 100644 index 0000000..0cf1b51 --- /dev/null +++ b/img/logo-wa-1@2x.svg @@ -0,0 +1,30 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/img/logo-wa-2@2x.svg b/img/logo-wa-2@2x.svg new file mode 100644 index 0000000..14c7b6d --- /dev/null +++ b/img/logo-wa-2@2x.svg @@ -0,0 +1,30 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/img/logo-wa@2x.png b/img/logo-wa@2x.png new file mode 100644 index 0000000..889af84 Binary files /dev/null and b/img/logo-wa@2x.png differ diff --git a/img/logo-wa@2x.svg b/img/logo-wa@2x.svg new file mode 100644 index 0000000..709e4de --- /dev/null +++ b/img/logo-wa@2x.svg @@ -0,0 +1,30 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/img/path-1@2x.png b/img/path-1@2x.png new file mode 100644 index 0000000..cd32e9d Binary files /dev/null and b/img/path-1@2x.png differ diff --git a/img/path-2@2x.png b/img/path-2@2x.png new file mode 100644 index 0000000..d9f4a68 Binary files /dev/null and b/img/path-2@2x.png differ diff --git a/img/path@2x.png b/img/path@2x.png new file mode 100644 index 0000000..4846550 Binary files /dev/null and b/img/path@2x.png differ diff --git a/img/stack4-1@2x.svg b/img/stack4-1@2x.svg new file mode 100644 index 0000000..170985e --- /dev/null +++ b/img/stack4-1@2x.svg @@ -0,0 +1,126 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/img/stack4-2@2x.svg b/img/stack4-2@2x.svg new file mode 100644 index 0000000..fb72b94 --- /dev/null +++ b/img/stack4-2@2x.svg @@ -0,0 +1,121 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/img/stack4@1x.svg b/img/stack4@1x.svg new file mode 100644 index 0000000..0714089 --- /dev/null +++ b/img/stack4@1x.svg @@ -0,0 +1,121 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/img/stack@1x.png b/img/stack@1x.png new file mode 100644 index 0000000..6005d45 Binary files /dev/null and b/img/stack@1x.png differ diff --git a/img/stack@1x.svg b/img/stack@1x.svg new file mode 100644 index 0000000..aacc300 --- /dev/null +++ b/img/stack@1x.svg @@ -0,0 +1,122 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/img/subtract-1@2x.png b/img/subtract-1@2x.png new file mode 100644 index 0000000..e513247 Binary files /dev/null and b/img/subtract-1@2x.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..030099e --- /dev/null +++ b/index.html @@ -0,0 +1,447 @@ + + + + + + + + + + + + + + + + +
+
+
+
+ +
+
+ +
+
ABOUT
+
SUPPORT
+
CONNECT
+
+
+
+
+

A DIY framework for community-owned computing

+
+ We believe in a world where our technology services are run by people we know, instead of remote, + profit-hungry advertising companies. +
+ +
+
+
+
TRY IT OUT
+
+
+
GET IN TOUCH
+
+
+
+
+
+
+
+
+ Reclaim hosting +
+
+ Our goal is to reclaim the means of hosting, by making it easy for small organisations to run servers using + their own hardware. +
+
+
+
+
+
libre software platform
+ +
+
+
+ Open source server hosting using capsul-flask +
+
+
+
+
+
co-operative algorithm
+ +
+
+
+ Open source server hosting using capsul-flask +
+
+
+

+ Fig. 2: The two parts of Serverscoop. Part platform, part community. +

+
+
+
+ +
+
+ +
+
+ A joint mission +
+
+ Serverscoop is the collective effort of new and established entities in the tech co-operative space. +
+
+
+ +
+
+ +
+
+
+
+
+
+ LINKS | MAY | LOOK | LIKE | THIS +
+
+
+
+
+
+
+ +
+
ABOUT
+
SUPPORT
+
CONNECT
+
+
A DIY framework for community-owned computing
+
+ We believe in a world where our technology services are run by people we know, instead of remote, + profit-hungry advertising companies. +
+
+ +
+
+
+
TRY IT OUT
+
+
+
GET IN TOUCH
+
+
+ +
+
+
+
+ Reclaim hosting +
+
+ Our goal is to reclaim the means of hosting, by making it easy for small organisations to run servers + using their own hardware. +
+
+
+
+
libre software platform
+ +
+
+ Open source server hosting using capsul-flask +
+
+
+
+
co-operative algorithm
+ +
+
+ Open source server hosting using capsul-flask +
+
+

+ Fig. 2: The two parts of Serverscoop. Part platform, part community. +

+
+
+
+ +
+ +
+
+ A joint mission +
+
+ Serverscoop is the collective effort of new and established entities in the tech co-operative space. +
+
+ +
+
+ +
+
+
+
+ LINKS | MAY | LOOK | LIKE | THIS +
+
+
+
+
+
+
+
+ +
+
ABOUT
+
SUPPORT
+
CONNECT
+
+
A DIY framework for community-owned computing
+
+ We believe in a world where our technology services are run by people we know, instead of remote, + profit-hungry advertising companies. +
+
+ +
+
+
TRY IT OUT
+
+
+
GET IN TOUCH
+
+
+
+ +
+
+
+
+ Reclaim hosting +
+
+ Our goal is to reclaim the means of hosting, by making it easy for small organisations to run servers + using their own hardware. +
+
+
+
+
+
+
libre software platform
+ +
+
+
+ Open source server hosting using capsul-flask +
+
+
+
+
+
co-operative algorithm
+ +
+
+
+ Open source server hosting using capsul-flask +
+
+
+

+ Fig. 2: The two parts of Serverscoop. Part platform, part community. +

+
+
+
+
+ +
+ +
+
+ A joint mission +
+
+ Serverscoop is the collective effort of new and established entities in the tech co-operative space. +
+
+ +
+
+ +
+
+
+
+ LINKS | MAY | LOOK | LIKE | THIS +
+
+
+
+ + +