Compare commits
4 Commits
| Author | SHA1 | Date |
|---|---|---|
Julian
|
8773e19db5 | |
|
Julian
|
b672d14289 | |
|
Julian
|
2266a45178 | |
|
Julian
|
5c33d0d5c9 |
|
|
@ -0,0 +1,39 @@
|
|||
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
font-size: 100%;
|
||||
font: inherit;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
|
||||
display: block;
|
||||
}
|
||||
|
||||
body {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
ol, ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
blockquote, q {
|
||||
quotes: none;
|
||||
}
|
||||
|
||||
blockquote:before, blockquote:after {
|
||||
content: "";
|
||||
content: none;
|
||||
}
|
||||
|
||||
q:before, q:after {
|
||||
content: "";
|
||||
content: none;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
font-size: 100%;
|
||||
font: inherit;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
|
||||
display: block;
|
||||
}
|
||||
|
||||
body {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
ol, ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
blockquote, q {
|
||||
quotes: none;
|
||||
}
|
||||
|
||||
blockquote:before, blockquote:after {
|
||||
content: "";
|
||||
content: none;
|
||||
}
|
||||
|
||||
q:before, q:after {
|
||||
content: "";
|
||||
content: none;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
|
@ -0,0 +1,757 @@
|
|||
/* Colors primary*/
|
||||
/* Base preferences*/
|
||||
html {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
html *,
|
||||
html :before,
|
||||
html :after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #F9F9F9;
|
||||
background-image: url("/images/background-lume-installer.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-position: bottom;
|
||||
font-family: "Roboto", "Arial", serif;
|
||||
}
|
||||
|
||||
/* Fonts */
|
||||
@font-face {
|
||||
src: url(../fonts/Roboto-Light.ttf) format("trueType");
|
||||
font-family: "Roboto", "Arial", sans-serif;
|
||||
font-weight: 300;
|
||||
}
|
||||
@font-face {
|
||||
src: url(../fonts/Roboto-LightItalic.ttf) format("trueType");
|
||||
font-family: "Roboto", "Arial", sans-serif;
|
||||
font-weight: 300;
|
||||
}
|
||||
@font-face {
|
||||
src: url(../fonts/Roboto-Regular.ttf) format("trueType");
|
||||
font-family: "Roboto", "Arial", sans-serif;
|
||||
font-weight: 400;
|
||||
}
|
||||
@font-face {
|
||||
src: url(../Roboto-Italic.ttf) format("trueType");
|
||||
font-family: "Roboto", "Arial", sans-serif;
|
||||
font-weight: 400;
|
||||
}
|
||||
@font-face {
|
||||
src: url(../fonts/Roboto-Medium.ttf) format("trueType");
|
||||
font-family: "Roboto", "Arial", sans-serif;
|
||||
font-weight: 500;
|
||||
}
|
||||
@font-face {
|
||||
src: url(../fonts/Roboto-MediumItalic.ttf) format("trueType");
|
||||
font-family: "Roboto", "Arial", sans-serif;
|
||||
font-weight: 500;
|
||||
}
|
||||
@font-face {
|
||||
src: url(../fonts/Roboto-Bold.ttf) format("trueType");
|
||||
font-family: "Roboto", "Arial", sans-serif;
|
||||
font-weight: 600;
|
||||
}
|
||||
@font-face {
|
||||
src: url(../fonts/Roboto-BoldItalic.ttf) format("trueType");
|
||||
font-family: "Roboto", "Arial", sans-serif;
|
||||
font-weight: 600;
|
||||
}
|
||||
em {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
strong {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 65px;
|
||||
font-weight: 600;
|
||||
line-height: 1.1;
|
||||
color: #151515;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 680px) {
|
||||
h1 {
|
||||
font-size: 48px;
|
||||
line-height: 1.1;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 480px) {
|
||||
h1 {
|
||||
font-size: 32px;
|
||||
line-height: 1.1;
|
||||
}
|
||||
}
|
||||
h2 {
|
||||
font-size: 26px;
|
||||
font-weight: 600;
|
||||
line-height: 1.025;
|
||||
color: #151515;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 480px) {
|
||||
h2 {
|
||||
font-size: 22px;
|
||||
line-height: 1.2;
|
||||
}
|
||||
}
|
||||
h3 {
|
||||
font-size: 32px;
|
||||
font-weight: 600;
|
||||
line-height: 1.025;
|
||||
color: #151515;
|
||||
margin: 0 0 24px 0;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 18px;
|
||||
line-height: 1.7;
|
||||
font-weight: 300;
|
||||
color: #151515;
|
||||
}
|
||||
|
||||
p + p {
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
/* Content container*/
|
||||
.content-container {
|
||||
max-width: 1280px;
|
||||
padding: 10px 50px 12px 50px;
|
||||
margin: 0 auto;
|
||||
position: center;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 860px) {
|
||||
.content-container {
|
||||
padding: 20px 30px 12px 30px;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 480px) {
|
||||
.content-container {
|
||||
padding: 10px 20px 12px 20px;
|
||||
}
|
||||
}
|
||||
/* Header */
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
width: 150px;
|
||||
margin: 0 0 0 2px;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 480px) {
|
||||
.header {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
width: 100px;
|
||||
margin: 0 0 0 2px;
|
||||
}
|
||||
}
|
||||
.donate-btn {
|
||||
margin-top: 8px;
|
||||
background-color: #ff005e;
|
||||
padding: 12px 28px 14px 28px;
|
||||
display: inline-block;
|
||||
border: 0;
|
||||
border-radius: 50px;
|
||||
cursor: pointer;
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.donate-btn:hover {
|
||||
background-color: #10E260;
|
||||
color: #151515;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 480px) {
|
||||
.donate-btn {
|
||||
margin-top: 0px;
|
||||
padding: 10px 20px 12px 20px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
/* Heading and portal */
|
||||
.section-introduction {
|
||||
display: -ms-grid;
|
||||
display: grid;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 150px 0 0 0;
|
||||
}
|
||||
|
||||
.download-card {
|
||||
background-color: rgba(255, 255, 255, 0.4);
|
||||
border: 0.5px solid rgba(16, 226, 96, 0.3);
|
||||
border-radius: 8px;
|
||||
box-shadow: 0px 0px 50px 15px rgba(16, 226, 96, 0.1);
|
||||
padding: 24px;
|
||||
margin: 56px 0 0 0;
|
||||
}
|
||||
|
||||
.heading-introduction {
|
||||
z-index: 2;
|
||||
margin: 0 0 0 0;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 400px) {
|
||||
.section-introduction {
|
||||
margin: 90px 0 0 0;
|
||||
}
|
||||
}
|
||||
.section-portal {
|
||||
margin-top: -300px;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 940px) {
|
||||
.section-portal {
|
||||
margin-top: -350px;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 350px) {
|
||||
.section-introduction {
|
||||
z-index: 2;
|
||||
margin: 70px 0 0 0;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 680px) {
|
||||
.section-portal {
|
||||
margin-top: -320px;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 480px) {
|
||||
.section-portal {
|
||||
margin-top: -240px;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 400px) {
|
||||
.section-portal {
|
||||
margin-top: -215px;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 350px) {
|
||||
.section-portal {
|
||||
margin-top: -200px;
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes portal-spin {
|
||||
0% {
|
||||
-webkit-transform: rotate(359deg);
|
||||
transform: rotate(359deg);
|
||||
}
|
||||
}
|
||||
@keyframes portal-spin {
|
||||
0% {
|
||||
-webkit-transform: rotate(359deg);
|
||||
transform: rotate(359deg);
|
||||
}
|
||||
}
|
||||
.portal-frame {
|
||||
--portal-color: #2A82DE;
|
||||
max-width: 500px;
|
||||
aspect-ratio: 1;
|
||||
--portal-browserbugfix: perspective(2077px) translateZ(-0.1px);
|
||||
-webkit-transform: var(--portal-browserbugfix) scaleX(1);
|
||||
transform: var(--portal-browserbugfix) scaleX(1);
|
||||
-webkit-filter: contrast(1.75);
|
||||
filter: contrast(1.75);
|
||||
overflow: hidden;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.portal, .portal::before {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
-webkit-animation: portal-spin 7s infinite linear;
|
||||
animation: portal-spin 7s infinite linear;
|
||||
}
|
||||
|
||||
.portal {
|
||||
--portal-img: url("/images/portal.png");
|
||||
--portal-mask: var(--portal-img) top left / 100% 100% no-repeat;
|
||||
-webkit-mask: var(--portal-mask);
|
||||
mask: var(--portal-mask);
|
||||
}
|
||||
|
||||
.portal::before {
|
||||
content: "";
|
||||
animation-direction: reverse;
|
||||
background: linear-gradient(#10E260 25%, transparent 125%, #2A82DE 25%), var(--portal-color);
|
||||
}
|
||||
|
||||
.background-1 {
|
||||
background-color: #fff;
|
||||
border: 0.5px solid rgba(16, 226, 96, 0.3);
|
||||
box-shadow: 0px 0px 50px 15px rgba(16, 226, 96, 0.1);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
/* Download component*/
|
||||
.section-download {
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.download-title span {
|
||||
display: block;
|
||||
font-size: 16px;
|
||||
font-weight: 300;
|
||||
color: #151515;
|
||||
text-align: center;
|
||||
margin: 16px 0 0 0;
|
||||
}
|
||||
|
||||
.platform span {
|
||||
display: block;
|
||||
margin: 8px 0 16px 0;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: #151515;
|
||||
}
|
||||
|
||||
.download-button {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: 24px 0 16px 0;
|
||||
}
|
||||
|
||||
.btn img {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin: -3px 6px 0 0;
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: inline-block;
|
||||
border: 0;
|
||||
border-radius: 6px;
|
||||
background: linear-gradient(to right, #10E260 0%, #2A82DE 80%);
|
||||
padding: 10px 30px 12px 30px;
|
||||
font-family: "Roboto", "Arial", sans-serif;
|
||||
font-weight: 500;
|
||||
font-size: 18px;
|
||||
line-height: 1.6;
|
||||
color: #FFFFFF;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background: #10E260;
|
||||
color: #151515;
|
||||
}
|
||||
|
||||
.os-options span {
|
||||
display: block;
|
||||
margin: 16px 0 0 0;
|
||||
font-size: 12px;
|
||||
font-weight: 300;
|
||||
color: #000000;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 480px) {
|
||||
.section-download {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.download-title {
|
||||
margin: -6px 0 16px 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.download-button {
|
||||
margin: 20px 0 12px 0;
|
||||
}
|
||||
|
||||
.btn {
|
||||
font-size: 16px;
|
||||
padding: 8px 20px 10px 20px;
|
||||
}
|
||||
|
||||
.os-options span {
|
||||
margin: 2px 0 0 0;
|
||||
}
|
||||
}
|
||||
/* Advantages*/
|
||||
.section-advantages {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
gap: 80px;
|
||||
margin: 80px 60px 0 60px;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 960px) {
|
||||
.section-advantages {
|
||||
gap: 40px;
|
||||
margin: 60px 0px 0 0px;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 680px) {
|
||||
.section-advantages {
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
gap: 30px;
|
||||
margin: 60px 0px 0 0px;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 400px) {
|
||||
.section-advantages {
|
||||
margin: 45px 0px 0 0px;
|
||||
}
|
||||
}
|
||||
.advantage-card {
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 680px) {
|
||||
.advantage-card {
|
||||
width: 70%;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 480px) {
|
||||
.advantage-card {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.advantage-card span {
|
||||
display: block;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: #2A82DE;
|
||||
margin: 10px 0 14px 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.advantage-card p {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 1.4;
|
||||
font-weight: 400;
|
||||
color: #151515;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.advantage-card img {
|
||||
display: block;
|
||||
height: 24px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* Text image component */
|
||||
.text-image {
|
||||
margin: 80px 0 0 0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 5%;
|
||||
}
|
||||
|
||||
.content-body {
|
||||
max-width: 50%;
|
||||
}
|
||||
|
||||
.content-body p {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.content-img {
|
||||
max-width: 40%;
|
||||
}
|
||||
|
||||
.content-img img {
|
||||
max-width: 100%;
|
||||
margin: 0 0 0 0;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
.text-image {
|
||||
margin: 80px 0 0 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
gap: 20%;
|
||||
}
|
||||
|
||||
.content-body {
|
||||
max-width: 80%;
|
||||
}
|
||||
|
||||
.content-img {
|
||||
max-width: 80%;
|
||||
margin: 0 0 24px 0;
|
||||
}
|
||||
|
||||
.column-reverse {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 480px) {
|
||||
.text-image {
|
||||
margin: 50px 0 0 0;
|
||||
gap: 20%;
|
||||
}
|
||||
|
||||
.content-body {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.content-body p {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.content-img {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
/* Text component */
|
||||
.text {
|
||||
margin: 80px 0 0 0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.text-body {
|
||||
max-width: 95%;
|
||||
}
|
||||
|
||||
.text-body p {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
.text {
|
||||
margin: 80px 0 0 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
gap: 20%;
|
||||
}
|
||||
|
||||
.text-body {
|
||||
max-width: 80%;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 480px) {
|
||||
.text {
|
||||
margin: 50px 0 0 0;
|
||||
}
|
||||
|
||||
.text-body {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.text-body p {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
/* Donations */
|
||||
.section-donate {
|
||||
margin-top: 56px;
|
||||
}
|
||||
|
||||
.section-donate h1 {
|
||||
font-size: 40px;
|
||||
font-weight: 600;
|
||||
line-height: 1.1;
|
||||
color: #151515;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.section-donate .btn {
|
||||
margin: 32px 0 0 0;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 680px) {
|
||||
.section-donate h1 {
|
||||
font-size: 36px;
|
||||
line-height: 1.2;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 480px) {
|
||||
.section-donate h1 {
|
||||
font-size: 30px;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.section-donate {
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.donate-heading {
|
||||
margin: 0 0 32px 0;
|
||||
}
|
||||
|
||||
.section-donate .btn {
|
||||
margin: 8px 0 0 0;
|
||||
}
|
||||
}
|
||||
/* Modal box*/
|
||||
.modal-box {
|
||||
position: fixed;
|
||||
background-color: rgba(42, 130, 222, 0.95);
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 999;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
.modal-box:target {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
.modal-box > div {
|
||||
width: 500px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
-webkit-transform: translate(-50%, -50%);
|
||||
transform: translate(-50%, -50%);
|
||||
transform: translate(-50%, -50%);
|
||||
padding: 20px 40px 20px 40px;
|
||||
background: white;
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
.modal-box h4 {
|
||||
font-size: 26px;
|
||||
font-weight: 600;
|
||||
line-height: 1.025;
|
||||
color: #151515;
|
||||
text-align: left;
|
||||
margin: 20px 0 20px 0;
|
||||
}
|
||||
|
||||
.modal-box .btn {
|
||||
margin: 16px 0 0 0;
|
||||
}
|
||||
|
||||
.modal-box ol {
|
||||
display: block;
|
||||
font-size: 16px;
|
||||
line-height: 1.6;
|
||||
font-weight: 300;
|
||||
color: #151515;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.modal-close {
|
||||
color: #151515;
|
||||
font-size: 14px;
|
||||
position: absolute;
|
||||
right: 40px;
|
||||
text-align: right;
|
||||
top: 20px;
|
||||
width: 70px;
|
||||
text-decoration: underline;
|
||||
}
|
||||
.modal-close:hover {
|
||||
color: #2A82DE;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 680px) {
|
||||
.modal-box > div {
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 480px) {
|
||||
.modal-box h4 {
|
||||
font-size: 22px;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.modal-box > div {
|
||||
padding: 20px 24px 20px 24px;
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
.modal-box ol {
|
||||
font-size: 14px;
|
||||
margin: 20px 0 16px 0;
|
||||
}
|
||||
}
|
||||
/* Footer */
|
||||
.section-footer {
|
||||
margin: 80px 0 0 0;
|
||||
}
|
||||
|
||||
.footer-divider {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.footer-divider img {
|
||||
width: 50px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
footer {
|
||||
margin: 16px 0 0 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: row;
|
||||
vertical-align: middle;
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
.company p {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.github a {
|
||||
font-size: 14px;
|
||||
color: #2A82DE;
|
||||
text-decoration: underline;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.github img {
|
||||
width: 18px;
|
||||
vertical-align: middle;
|
||||
margin: 2px 2px 0 0;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 580px) {
|
||||
.section-footer {
|
||||
margin-top: 60px;
|
||||
}
|
||||
|
||||
.footer-divider {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
footer {
|
||||
margin: 16px 0 0 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
gap: 6px;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,895 @@
|
|||
/* Colors primary*/
|
||||
$primary-green: #10E260;
|
||||
$primary-blue: #2A82DE;
|
||||
$dark: #151515;
|
||||
$white: #ffffff;
|
||||
$background-grey: #F9F9F9;
|
||||
|
||||
|
||||
/* Base preferences*/
|
||||
html {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
html *,
|
||||
html :before,
|
||||
html :after {
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: $background-grey;
|
||||
background-image: url('/images/background-lume-installer.png');
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-position: bottom;
|
||||
font-family: "Roboto", 'Arial', serif;
|
||||
}
|
||||
|
||||
|
||||
/* Fonts */
|
||||
@font-face {
|
||||
src: url(../fonts/Roboto-Light.ttf) format("trueType");
|
||||
font-family: "Roboto", 'Arial', sans-serif;
|
||||
font-weight: 300;
|
||||
}
|
||||
@font-face {
|
||||
src: url(../fonts/Roboto-LightItalic.ttf) format("trueType");
|
||||
font-family: "Roboto", 'Arial', sans-serif;
|
||||
font-weight: 300;
|
||||
}
|
||||
@font-face {
|
||||
src: url(../fonts/Roboto-Regular.ttf) format("trueType");
|
||||
font-family: "Roboto", 'Arial', sans-serif;
|
||||
font-weight: 400;
|
||||
}
|
||||
@font-face {
|
||||
src: url(../Roboto-Italic.ttf) format("trueType");
|
||||
font-family: "Roboto", 'Arial', sans-serif;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
src: url(../fonts/Roboto-Medium.ttf) format("trueType");
|
||||
font-family: "Roboto", 'Arial', sans-serif;
|
||||
font-weight: 500;
|
||||
}
|
||||
@font-face {
|
||||
src: url(../fonts/Roboto-MediumItalic.ttf) format("trueType");
|
||||
font-family: "Roboto", 'Arial', sans-serif;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
src: url(../fonts/Roboto-Bold.ttf) format("trueType");
|
||||
font-family: "Roboto", 'Arial', sans-serif;
|
||||
font-weight: 600;
|
||||
}
|
||||
@font-face {
|
||||
src: url(../fonts/Roboto-BoldItalic.ttf) format("trueType");
|
||||
font-family: "Roboto", 'Arial', sans-serif;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
em {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
strong {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 65px;
|
||||
font-weight: 600;
|
||||
line-height: 1.1;
|
||||
color: $dark;
|
||||
text-align: center;
|
||||
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 680px) {
|
||||
h1 {
|
||||
font-size: 48px;
|
||||
line-height: 1.1;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 480px) {
|
||||
h1 {
|
||||
font-size: 32px;
|
||||
line-height: 1.1;
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 26px;
|
||||
font-weight: 600;
|
||||
line-height: 1.025;
|
||||
color: $dark;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 480px) {
|
||||
h2 {
|
||||
font-size: 22px;
|
||||
line-height: 1.2;
|
||||
}
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 32px;
|
||||
font-weight: 600;
|
||||
line-height: 1.025;
|
||||
color: $dark;
|
||||
margin: 0 0 24px 0;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 18px;
|
||||
line-height: 1.7;
|
||||
font-weight: 300;
|
||||
color: $dark;
|
||||
}
|
||||
|
||||
p + p {
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
|
||||
/* Content container*/
|
||||
.content-container {
|
||||
max-width: 1280px;
|
||||
padding: 10px 50px 12px 50px;
|
||||
margin: 0 auto;
|
||||
position: center;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 860px) {
|
||||
.content-container {
|
||||
padding: 20px 30px 12px 30px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 480px) {
|
||||
.content-container {
|
||||
padding: 10px 20px 12px 20px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Header */
|
||||
.header {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-pack: justify;
|
||||
-ms-flex-pack: justify;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
width: 150px;
|
||||
margin: 0 0 0 2px;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 480px) {
|
||||
.header {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
width: 100px;
|
||||
margin: 0 0 0 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.donate-btn {
|
||||
margin-top: 8px;
|
||||
background-color: #ff005e;
|
||||
padding: 12px 28px 14px 28px;
|
||||
display: inline-block;
|
||||
border: 0;
|
||||
border-radius: 50px;
|
||||
cursor: pointer;
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.donate-btn:hover {
|
||||
background-color: $primary-green;
|
||||
color: $dark;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 480px) {
|
||||
.donate-btn {
|
||||
margin-top: 0px;
|
||||
padding: 10px 20px 12px 20px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Heading and portal */
|
||||
.section-introduction {
|
||||
display: -ms-grid;
|
||||
display: grid;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
margin: 150px 0 0 0;
|
||||
}
|
||||
|
||||
.download-card {
|
||||
background-color: rgba(255, 255, 255, 0.4);
|
||||
border: 0.5px solid rgba(16, 226, 96, 0.3);
|
||||
border-radius: 8px;
|
||||
-webkit-box-shadow: 0px 0px 50px 15px rgba(16,226,96,0.10);
|
||||
box-shadow: 0px 0px 50px 15px rgba(16,226,96,0.10);
|
||||
padding: 24px;
|
||||
margin: 56px 0 0 0;
|
||||
}
|
||||
|
||||
.heading-introduction {
|
||||
z-index: 2;
|
||||
margin: 0 0 0 0;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 400px) {
|
||||
.section-introduction {
|
||||
margin: 90px 0 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
.section-portal {
|
||||
margin-top: -300px;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 940px) {
|
||||
.section-portal {
|
||||
margin-top: -350px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 350px) {
|
||||
.section-introduction {
|
||||
z-index: 2;
|
||||
margin: 70px 0 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 680px) {
|
||||
.section-portal {
|
||||
margin-top: -320px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 480px) {
|
||||
.section-portal {
|
||||
margin-top: -240px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 400px) {
|
||||
.section-portal {
|
||||
margin-top: -215px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 350px) {
|
||||
.section-portal {
|
||||
margin-top: -200px;
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes portal-spin { 0% { -webkit-transform: rotate(359deg); transform: rotate(359deg); } }
|
||||
|
||||
@keyframes portal-spin { 0% { -webkit-transform: rotate(359deg); transform: rotate(359deg); } }
|
||||
.portal-frame {
|
||||
--portal-color: #2A82DE;
|
||||
max-width: 500px;
|
||||
aspect-ratio: 1;
|
||||
--portal-browserbugfix: perspective(2077px) translateZ(-0.1px);
|
||||
-webkit-transform: var(--portal-browserbugfix, ) scaleX(1);
|
||||
-ms-transform: var(--portal-browserbugfix, ) scaleX(1);
|
||||
transform: var(--portal-browserbugfix, ) scaleX(1);
|
||||
-webkit-filter: contrast(1.75);
|
||||
filter: contrast(1.75);
|
||||
overflow: hidden;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.portal, .portal::before {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
-webkit-animation: portal-spin 7s infinite linear;
|
||||
animation: portal-spin 7s infinite linear;
|
||||
}
|
||||
.portal {
|
||||
--portal-img: url('/images/portal.png');
|
||||
--portal-mask: var(--portal-img) top left / 100% 100% no-repeat;
|
||||
-webkit-mask: var(--portal-mask);
|
||||
mask: var(--portal-mask);
|
||||
}
|
||||
.portal::before {
|
||||
content: "";
|
||||
animation-direction: reverse;
|
||||
background: -webkit-gradient(
|
||||
linear, left top, left bottom, color-stop(25%, #10E260), color-stop(125%, transparent), color-stop(25%, #2A82DE)
|
||||
), var(--portal-color);
|
||||
background: -o-linear-gradient(
|
||||
#10E260 25%, transparent 125%, #2A82DE 25%
|
||||
), var(--portal-color);
|
||||
background: linear-gradient(
|
||||
#10E260 25%, transparent 125%, #2A82DE 25%
|
||||
), var(--portal-color);
|
||||
}
|
||||
|
||||
|
||||
.background-1 {
|
||||
background-color: #fff;
|
||||
border: 0.5px solid rgba(16, 226, 96, 0.3);
|
||||
-webkit-box-shadow: 0px 0px 50px 15px rgba(16,226,96,0.10);
|
||||
box-shadow: 0px 0px 50px 15px rgba(16,226,96,0.10);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
|
||||
/* Download component*/
|
||||
.section-download {
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.download-title span {
|
||||
display: block;
|
||||
font-size: 16px;
|
||||
font-weight: 300;
|
||||
color: $dark;
|
||||
text-align: center;
|
||||
margin: 16px 0 0 0;
|
||||
}
|
||||
|
||||
.platform span {
|
||||
display: block;
|
||||
margin: 8px 0 16px 0;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: $dark;
|
||||
}
|
||||
|
||||
.download-button {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
margin: 24px 0 16px 0;
|
||||
}
|
||||
|
||||
.btn img {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin: -3px 6px 0 0;
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: inline-block;
|
||||
border: 0;
|
||||
border-radius: 6px;
|
||||
background: -o-linear-gradient(left, #10E260 0%, #2A82DE 80%);
|
||||
background: -webkit-gradient(linear, left top, right top, from(#10E260), color-stop(80%, #2A82DE));
|
||||
background: linear-gradient(to right, #10E260 0%, #2A82DE 80%);
|
||||
padding: 10px 30px 12px 30px;
|
||||
font-family: "Roboto", 'Arial', sans-serif;
|
||||
font-weight: 500;
|
||||
font-size: 18px;
|
||||
line-height: 1.6;
|
||||
color: #FFFFFF;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
.btn:hover {
|
||||
background: #10E260;
|
||||
color: #151515;
|
||||
}
|
||||
|
||||
.os-options span {
|
||||
display: block;
|
||||
margin: 16px 0 0 0;
|
||||
font-size: 12px;
|
||||
font-weight: 300;
|
||||
color: #000000;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 480px) {
|
||||
.section-download {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.download-title {
|
||||
margin: -6px 0 16px 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.download-button {
|
||||
margin: 20px 0 12px 0;
|
||||
}
|
||||
|
||||
.btn {
|
||||
font-size: 16px;
|
||||
padding: 8px 20px 10px 20px;
|
||||
}
|
||||
|
||||
.os-options span {
|
||||
margin: 2px 0 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Advantages*/
|
||||
.section-advantages {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: horizontal;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
-ms-flex-pack: distribute;
|
||||
justify-content: space-around;
|
||||
gap: 80px;
|
||||
margin: 80px 60px 0 60px;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 960px) {
|
||||
.section-advantages {
|
||||
gap: 40px;
|
||||
margin: 60px 0px 0 0px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 680px) {
|
||||
.section-advantages {
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
-webkit-box-pack: end;
|
||||
-ms-flex-pack: end;
|
||||
justify-content: flex-end;
|
||||
gap: 30px;
|
||||
margin: 60px 0px 0 0px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 400px) {
|
||||
.section-advantages {
|
||||
margin: 45px 0px 0 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.advantage-card {
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 680px) {
|
||||
.advantage-card {
|
||||
width: 70%;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 480px) {
|
||||
.advantage-card {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.advantage-card span {
|
||||
display: block;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: $primary-blue;
|
||||
margin: 10px 0 14px 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.advantage-card p {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 1.4;
|
||||
font-weight: 400;
|
||||
color: $dark;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.advantage-card img {
|
||||
display: block;
|
||||
height: 24px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
|
||||
/* Text image component */
|
||||
.text-image {
|
||||
margin: 80px 0 0 0;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: horizontal;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
-webkit-box-pack: justify;
|
||||
-ms-flex-pack: justify;
|
||||
justify-content: space-between;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
gap: 5%;
|
||||
}
|
||||
|
||||
.content-body {
|
||||
max-width: 50%;
|
||||
}
|
||||
|
||||
.content-body p {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.content-img {
|
||||
max-width: 40%;
|
||||
}
|
||||
|
||||
.content-img img {
|
||||
max-width: 100%;
|
||||
margin: 0 0 0 0;
|
||||
}
|
||||
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
.text-image {
|
||||
margin: 80px 0 0 0;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
-webkit-box-pack: start;
|
||||
-ms-flex-pack: start;
|
||||
justify-content: flex-start;
|
||||
gap: 20%;
|
||||
}
|
||||
|
||||
.content-body {
|
||||
max-width: 80%;
|
||||
}
|
||||
|
||||
.content-img {
|
||||
max-width: 80%;
|
||||
margin: 0 0 24px 0;
|
||||
}
|
||||
|
||||
.column-reverse {
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: reverse;
|
||||
-ms-flex-direction: column-reverse;
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 480px) {
|
||||
.text-image {
|
||||
margin: 50px 0 0 0;
|
||||
gap: 20%;
|
||||
}
|
||||
|
||||
.content-body {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.content-body p {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.content-img {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Text component */
|
||||
.text {
|
||||
margin: 80px 0 0 0;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: horizontal;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
-webkit-box-pack: justify;
|
||||
-ms-flex-pack: justify;
|
||||
justify-content: space-between;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.text-body {
|
||||
max-width: 95%;
|
||||
}
|
||||
|
||||
.text-body p {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
.text {
|
||||
margin: 80px 0 0 0;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
-webkit-box-pack: start;
|
||||
-ms-flex-pack: start;
|
||||
justify-content: flex-start;
|
||||
gap: 20%;
|
||||
}
|
||||
|
||||
.text-body {
|
||||
max-width: 80%;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 480px) {
|
||||
.text {
|
||||
margin: 50px 0 0 0;
|
||||
}
|
||||
|
||||
.text-body {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.text-body p {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Donations */
|
||||
.section-donate {
|
||||
margin-top: 56px;
|
||||
}
|
||||
|
||||
.section-donate h1 {
|
||||
font-size: 40px;
|
||||
font-weight: 600;
|
||||
line-height: 1.1;
|
||||
color: $dark;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.section-donate .btn {
|
||||
margin: 32px 0 0 0;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 680px) {
|
||||
.section-donate h1 {
|
||||
font-size: 36px;
|
||||
line-height: 1.2;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 480px) {
|
||||
.section-donate h1 {
|
||||
font-size: 30px;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.section-donate {
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.donate-heading {
|
||||
margin: 0 0 32px 0;
|
||||
}
|
||||
|
||||
.section-donate .btn {
|
||||
margin: 8px 0 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Modal box*/
|
||||
.modal-box {
|
||||
position: fixed;
|
||||
background-color: rgba(42, 130, 222, 0.95);
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 999;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: all 0.3s;
|
||||
|
||||
&:target {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
& > div {
|
||||
width: 500px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
-webkit-transform: translate(-50%, -50%);
|
||||
-ms-transform: translate(-50%, -50%);
|
||||
transform: translate(-50%, -50%);
|
||||
transform: translate(-50%, -50%);
|
||||
padding: 20px 40px 20px 40px;
|
||||
background: white;
|
||||
border-radius: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-box h4 {
|
||||
font-size: 26px;
|
||||
font-weight: 600;
|
||||
line-height: 1.025;
|
||||
color: $dark;
|
||||
text-align: left;
|
||||
margin: 20px 0 20px 0;
|
||||
}
|
||||
|
||||
.modal-box .btn {
|
||||
margin: 16px 0 0 0;
|
||||
}
|
||||
|
||||
.modal-box ol {
|
||||
display: block;
|
||||
font-size: 16px;
|
||||
line-height: 1.6;
|
||||
font-weight: 300;
|
||||
color: $dark;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.modal-close {
|
||||
color: $dark;
|
||||
font-size: 14px;
|
||||
position: absolute;
|
||||
right: 40px;
|
||||
text-align: right;
|
||||
top: 20px;
|
||||
width: 70px;
|
||||
text-decoration: underline;
|
||||
&:hover {
|
||||
color: $primary-blue;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 680px) {
|
||||
.modal-box {
|
||||
|
||||
&:target {
|
||||
|
||||
}
|
||||
& > div {
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 480px) {
|
||||
.modal-box h4 {
|
||||
font-size: 22px;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.modal-box {
|
||||
|
||||
&:target {
|
||||
|
||||
}
|
||||
& > div {
|
||||
padding: 20px 24px 20px 24px;
|
||||
border-radius: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-box ol {
|
||||
font-size: 14px;
|
||||
margin: 20px 0 16px 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Footer */
|
||||
.section-footer {
|
||||
margin: 80px 0 0 0;
|
||||
}
|
||||
|
||||
.footer-divider {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.footer-divider img {
|
||||
width: 50px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
footer {
|
||||
margin: 16px 0 0 0;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
-webkit-box-orient: horizontal;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
vertical-align: middle;
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
.company p {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.github a {
|
||||
font-size: 14px;
|
||||
color: $primary-blue;
|
||||
text-decoration: underline;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.github img {
|
||||
width: 18px;
|
||||
vertical-align: middle;
|
||||
margin: 2px 2px 0 0;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 580px) {
|
||||
.section-footer {
|
||||
margin-top: 60px;
|
||||
}
|
||||
|
||||
.footer-divider {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
footer {
|
||||
margin: 16px 0 0 0;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
gap: 6px;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,102 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Donate | Lume Web</title>
|
||||
<meta name="description" content="Donate Lume Web and help us grow">
|
||||
<link rel="icon" type="image/x-icon" href="/favicon.png">
|
||||
<link rel="stylesheet" href="./css/reset.css" type="text/css" />
|
||||
<link rel="stylesheet" href="./css/style.css" type="text/css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="content-container">
|
||||
|
||||
<div class="header">
|
||||
<a href="/"><img class="logo" src="images/logo-lumeweb.png" alt="Logo Lume"></a>
|
||||
<a href="#"><button class="donate-btn">Donate</button></a>
|
||||
</div>
|
||||
|
||||
|
||||
<section class="section-donate">
|
||||
<h1>Support Lume Web, help us create a safe Web3 for mankind</h1>
|
||||
<div class="download">
|
||||
<div class="download-button">
|
||||
<a href="#"><button class="btn">Make a donation</button></a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<section class="section-advantages">
|
||||
<div class="advantage-card">
|
||||
<img src="images/icon-code.svg" alt="Icon code">
|
||||
<span>Development spending</span>
|
||||
<p>All donations are spent on active development of Lume Web.</p>
|
||||
</div>
|
||||
<div class="advantage-card">
|
||||
<img src="images/icon-shield.svg" alt="Icon shield">
|
||||
<span>Help pioneer Web3</span>
|
||||
<p>Donec a orci at massa placerat vestibulum. Sed posuere mauris et ligula volutpat, sit amet fermentum velit dictum. Donec diam justo.</p>
|
||||
</div>
|
||||
<div class="advantage-card">
|
||||
<img src="images/icon-grid.svg" alt="Icon grid">
|
||||
<span>Help us grow</span>
|
||||
<p>Help us grow, so we can create the Web3 together and think of new ways to make it even easier to...</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<section class="text-image">
|
||||
<div class="content-img">
|
||||
<img src="images/image-roadmap.jpg" alt="Roadmap image"/>
|
||||
</div>
|
||||
<div class="content-body">
|
||||
<h3>Why we ask for your donations</h3>
|
||||
<p>Sed eget placerat libero. Sed elementum, ante id convallis posuere, leo dolor condimentum lectus, nec imperdiet sem lectus ac lectus. Nullam ultricies non magna ut mollis. Proin et sem a lacus euismod mollis at sed augue. Vivamus in consequat tortor. Vivamus non erat ut lectus iaculis pretium.</p>
|
||||
<p>Aliquam lacinia velit ut magna bibendum, sit amet ornare tortor fermentum. Aliquam convallis leo vitae mi iaculis, sed posuere augue scelerisque.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<section class="text">
|
||||
<div class="text-body">
|
||||
<h3>Payment possibilities</h3>
|
||||
<p>Nam imperdiet leo massa, in ornare sapien varius non. Cras feugiat, lectus vel efficitur malesuada, lacus tortor porttitor mauris, sed consectetur ipsum ante vel libero. Donec auctor faucibus quam, quis sagittis mi sollicitudin eget. Fusce efficitur eu nisi vitae tempor. Maecenas elementum quam sit amet lorem pulvinar, eu tincidunt velit gravida. Phasellus turpis risus, consectetur quis libero sit amet, tempus varius diam.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<section class="text-image column-reverse">
|
||||
<div class="content-body">
|
||||
<h3>The way we are different</h3>
|
||||
<p>Sed eget placerat libero. Sed elementum, ante id convallis posuere, leo dolor condimentum lectus, nec imperdiet sem lectus ac lectus. Nullam ultricies non magna ut mollis. Proin et sem a lacus euismod mollis at sed augue. Vivamus in consequat tortor. Vivamus non erat ut lectus iaculis pretium.</p>
|
||||
<p>Aliquam lacinia velit ut magna bibendum, sit amet ornare tortor fermentum. Aliquam convallis leo vitae mi iaculis, sed posuere augue scelerisque.</p>
|
||||
</div>
|
||||
<div class="content-img">
|
||||
<img src="images/image-development-race.png" alt="Roadmap image"/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<section class="section-footer">
|
||||
<div class="footer-divider">
|
||||
<a href="/"><img class="logo" src="images/logo-lume-single.png" alt="Logo single"></a>
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<div class="company">
|
||||
<p>Hammer Technologies LLC</p>
|
||||
</div>
|
||||
<div class="github">
|
||||
<img src="/images/icon-github.png" alt="Github icon">
|
||||
<a href="https://github.com/pcfreak30" target="blank">View on Github</a>
|
||||
</div>
|
||||
</footer>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 74 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 267 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" viewBox="0 0 24 24"><path fill="#2A82DE" d="M20,16c-0.8,0-1.6,0.3-2.1,0.9l-2.2-1.3c0.2-0.5,0.3-1,0.3-1.6c0-2-1.5-3.7-3.5-3.9V7.9C13.9,7.7,15,6.5,15,5c0-1.7-1.3-3-3-3S9,3.3,9,5c0,1.5,1.1,2.7,2.5,2.9v2.1C9.5,10.3,8,12,8,14c0,0.6,0.1,1.1,0.3,1.6l-2.2,1.3C5.6,16.3,4.8,16,4,16c-1.7,0-3,1.3-3,3s1.3,3,3,3c1.7,0,3-1.3,3-3c0-0.5-0.1-0.9-0.3-1.3l2.2-1.3C9.6,17.4,10.7,18,12,18c1.3,0,2.4-0.6,3.1-1.6l2.2,1.3C17.1,18.1,17,18.5,17,19c0,1.7,1.3,3,3,3c1.7,0,3-1.3,3-3C23,17.3,21.7,16,20,16z M4,21c-1.1,0-2-0.9-2-2s0.9-2,2-2c1.1,0,2,0.9,2,2C6,20.1,5.1,21,4,21z M10,5c0-1.1,0.9-2,2-2c1.1,0,2,0.9,2,2c0,1.1-0.9,2-2,2S10,6.1,10,5z M12,17c-1.7,0-3-1.3-3-3s1.3-3,3-3c1.7,0,3,1.3,3,3C15,15.7,13.7,17,12,17z M20,21c-1.1,0-2-0.9-2-2s0.9-2,2-2c1.1,0,2,0.9,2,2C22,20.1,21.1,21,20,21z"/></svg>
|
||||
|
After Width: | Height: | Size: 842 B |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" viewBox="0 0 24 24"><path fill="#2A82DE" d="M6,9V5.5C6,4.1,7.1,3,8.5,3C8.8,3,9,2.8,9,2.5S8.8,2,8.5,2C6.6,2,5,3.6,5,5.5V9c0,1.4-1.1,2.5-2.5,2.5C2.2,11.5,2,11.7,2,12s0.2,0.5,0.5,0.5C3.9,12.5,5,13.6,5,15v3.5C5,20.4,6.6,22,8.5,22C8.8,22,9,21.8,9,21.5S8.8,21,8.5,21C7.1,21,6,19.9,6,18.5V15c0-1.3-0.7-2.4-1.7-3C5.3,11.4,6,10.3,6,9z M21.5,11.5c-1.4,0-2.5-1.1-2.5-2.5V5.5C19,3.6,17.4,2,15.5,2C15.2,2,15,2.2,15,2.5S15.2,3,15.5,3C16.9,3,18,4.1,18,5.5V9c0,1.3,0.7,2.4,1.7,3c-1,0.6-1.7,1.7-1.7,3v3.5c0,1.4-1.1,2.5-2.5,2.5c-0.3,0-0.5,0.2-0.5,0.5s0.2,0.5,0.5,0.5c1.9,0,3.5-1.6,3.5-3.5V15c0-1.4,1.1-2.5,2.5-2.5c0.3,0,0.5-0.2,0.5-0.5S21.8,11.5,21.5,11.5z"/></svg>
|
||||
|
After Width: | Height: | Size: 721 B |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" viewBox="0 0 24 24"><path fill="#2A82DE" d="M21,8v1.5c0,0.276123,0.223877,0.5,0.5,0.5S22,9.776123,22,9.5V8c-0.0018311-1.6561279-1.3438721-2.9981689-3-3h-6.1396484l-0.3163452-0.9492188C12.1364746,2.8253784,10.989624,1.9989014,9.6982422,2H5C3.3438721,2.0018311,2.0018311,3.3438721,2,5v13c0.0018311,1.6561279,1.3438721,2.9981689,3,3h6.5c0.276123,0,0.5-0.223877,0.5-0.5S11.776123,20,11.5,20H5c-1.1040039-0.0014038-1.9985962-0.8959961-2-2V5c0.0014038-1.1040039,0.8959961-1.9985962,2-2h4.6982422c0.8607788-0.0007324,1.6251831,0.550293,1.8964844,1.3671875l0.4306641,1.2910156C12.09375,5.8622437,12.28479,5.9998169,12.5,6H19C20.1040039,6.0014038,20.9985962,6.8959961,21,8z M22,16.0508423V14.5c0-1.3807373-1.1192627-2.5-2.5-2.5S17,13.1192627,17,14.5v1.5508423C15.8594971,16.2832642,15.0010986,17.2910767,15,18.5v2c0.0012817,1.380188,1.119812,2.4987183,2.5,2.5h4c1.380188-0.0012817,2.4987183-1.119812,2.5-2.5v-2C23.9989014,17.2910767,23.1405029,16.2832642,22,16.0508423z M18,14.5c0-0.8284302,0.6715698-1.5,1.5-1.5s1.5,0.6715698,1.5,1.5V16h-3V14.5z M23,20.5c-0.0009155,0.828064-0.671936,1.4990845-1.5,1.5h-4c-0.828064-0.0009155-1.4990845-0.671936-1.5-1.5v-2c0.0009155-0.828064,0.671936-1.4990845,1.5-1.5h4c0.828064,0.0009155,1.4990845,0.671936,1.5,1.5V20.5z"/></svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.4 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" viewBox="0 0 24 24"><path fill="#2A82DE" d="M21.5,13h-8.0005493C13.2234497,13.0001831,12.9998169,13.223999,13,13.5v8.0005493C13.0001831,21.7765503,13.223999,22.0001831,13.5,22h8.0006104C21.7765503,21.9998169,22.0001831,21.776001,22,21.5v-8.0006104C21.9998169,13.2234497,21.776001,12.9998169,21.5,13z M21,21h-7v-7h7V21z M10.5,2H2.4993896C2.2234497,2.0001831,1.9998169,2.223999,2,2.5v8.0005493C2.0001831,10.7765503,2.223999,11.0001831,2.5,11h8.0006104C10.7765503,10.9998169,11.0001831,10.776001,11,10.5V2.4993896C10.9998169,2.2234497,10.776001,1.9998169,10.5,2z M10,10H3V3h7V10z M10.5,13H2.4993896C2.2234497,13.0001831,1.9998169,13.223999,2,13.5v8.0005493C2.0001831,21.7765503,2.223999,22.0001831,2.5,22h8.0006104C10.7765503,21.9998169,11.0001831,21.776001,11,21.5v-8.0006104C10.9998169,13.2234497,10.776001,12.9998169,10.5,13z M10,21H3v-7h7V21z M21.5,2h-8.0005493C13.2234497,2.0001831,12.9998169,2.223999,13,2.5v8.0005493C13.0001831,10.7765503,13.223999,11.0001831,13.5,11h8.0006104C21.7765503,10.9998169,22.0001831,10.776001,22,10.5V2.4993896C21.9998169,2.2234497,21.776001,1.9998169,21.5,2z M21,10h-7V3h7V10z"/></svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" viewBox="0 0 24 24"><path fill="#2A82DE" d="M17,9V7c0-2.7614136-2.2385864-5-5-5S7,4.2385864,7,7v2c-1.6561279,0.0018311-2.9981689,1.3438721-3,3v7c0.0018311,1.6561279,1.3438721,2.9981689,3,3h10c1.6561279-0.0018311,2.9981689-1.3438721,3-3v-7C19.9981689,10.3438721,18.6561279,9.0018311,17,9z M8,7c0-2.2091675,1.7908325-4,4-4s4,1.7908325,4,4v2H8V7z M19,19c-0.0014038,1.1040039-0.8959961,1.9985962-2,2H7c-1.1040039-0.0014038-1.9985962-0.8959961-2-2v-7c0.0014038-1.1040039,0.8959961-1.9985962,2-2h10c1.1040039,0.0014038,1.9985962,0.8959961,2,2V19z M12,13c-0.276123,0-0.5,0.223877-0.5,0.5v4.0005493C11.5001831,17.7765503,11.723999,18.0001831,12,18h0.0006104c0.2759399-0.0001831,0.4995728-0.223999,0.4993896-0.5v-4C12.5,13.223877,12.276123,13,12,13z"/></svg>
|
||||
|
After Width: | Height: | Size: 823 B |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" viewBox="0 0 24 24"><path fill="#2A82DE" d="M19.9894409,3.753418c-0.0565796-0.2703857-0.3215942-0.4437256-0.59198-0.387207c-2.4692383,0.5215454-5.0441284-0.0050659-7.1103516-1.4541016c-0.1722412-0.1210938-0.4019775-0.1210938-0.5742188,0C9.6466064,3.361084,7.0717773,3.8876343,4.6025391,3.3662109C4.5689697,3.3591919,4.53479,3.3556519,4.5004883,3.3556519C4.2242432,3.3554688,4.0001831,3.5792236,4,3.8554688v8.0185547c0.0016479,2.9362183,1.4152222,5.6925659,3.7988281,7.4072266l3.9101562,2.8037109C11.7937622,22.1459961,11.8955688,22.178833,12,22.1787109c0.1044312,0.0001221,0.2062378-0.0326538,0.2910156-0.093689l3.9101562-2.803772C18.5847778,17.5665894,19.9983521,14.8102417,20,11.8740234V3.8554688C20,3.821167,19.99646,3.7869873,19.9894409,3.753418z M19,11.8740234c-0.0010986,2.6139526-1.2591553,5.0679321-3.3808594,6.5947266L12,21.0634766L8.3808594,18.46875C6.2591553,16.9418945,5.0010986,14.4879761,5,11.8740234V4.453125c2.4417725,0.3648682,4.9324951-0.1789551,7-1.5283203c2.067627,1.348999,4.5582275,1.8928223,7,1.5283203V11.8740234z"/></svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 56 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 286 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 83 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 170 KiB |
|
|
@ -0,0 +1,121 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Lume Web</title>
|
||||
<meta name="description" content="Lume Web">
|
||||
<link rel="icon" type="image/x-icon" href="/favicon.png">
|
||||
<link rel="stylesheet" href="./css/reset.css" type="text/css" />
|
||||
<link rel="stylesheet" href="./css/style.css" type="text/css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="content-container">
|
||||
|
||||
<div class="header">
|
||||
<a href="/"><img class="logo" src="images/logo-lumeweb.png" alt="Logo Lume"></a>
|
||||
<a href="donate.html"><button class="donate-btn">Donate</button></a>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="section-introduction">
|
||||
<div class="heading-introduction">
|
||||
<h1>Lume Web, your personal and private gateway to web3</h1>
|
||||
</div>
|
||||
<div class="section-portal">
|
||||
<div class="portal-frame">
|
||||
<div class="portal"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<section class="section-download">
|
||||
<div>
|
||||
<h2>Download Lume Web Extension</h2>
|
||||
</div>
|
||||
<div class="download">
|
||||
<div class="download-title">
|
||||
<span>Chrome and Brave installer</span>
|
||||
</div>
|
||||
<div class="download-button">
|
||||
<a href="#open-modal"><button class="btn">Download for Windows</button></a>
|
||||
<div id="open-modal" class="modal-box">
|
||||
<div>
|
||||
<a href="#" title="Close" class="modal-close">Cancel</a>
|
||||
<h4>How to install</h4>
|
||||
<ol>
|
||||
<li>1. Click the LumeWeb installer</li>
|
||||
<li>2. Launch the extension from your browser</li>
|
||||
</ol>
|
||||
<div class="download-button">
|
||||
<a href="#"><button class="btn">Download for Windows</button></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="os-options">
|
||||
<span>More OS options in the near future</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<section class="section-advantages">
|
||||
<div class="advantage-card">
|
||||
<img src="images/icon-lock.svg" alt="Icon lock">
|
||||
<span>It's private</span>
|
||||
<p>Nam iaculis quis magna et fringilla. Nulla maximus ornare egestas. Phasellus a magna nunc. </p>
|
||||
</div>
|
||||
<div class="advantage-card">
|
||||
<img src="images/icon-folder-lock.svg" alt="Icon folder lock">
|
||||
<span>It's personal</span>
|
||||
<p>Donec a orci at massa placerat vestibulum. Sed posuere mauris et ligula volutpat, sit amet fermentum velit dictum. Donec diam justo.</p>
|
||||
</div>
|
||||
<div class="advantage-card">
|
||||
<img src="images/icon-channel.svg" alt="Icon channel">
|
||||
<span>It's your gateway</span>
|
||||
<p>In feugiat pretium pretium. Praesent odio quam, venenatis eu sagittis non, vulputate vel mi. Etiam arcu orci, sodales quis nisi pulvinar, viverra blandit est.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<section class="text-image"">
|
||||
<div class="content-img">
|
||||
<img src="images/portal-image.jpg" alt="Portal"/>
|
||||
</div>
|
||||
<div class="content-body">
|
||||
<h3>Lume Web grants your access to web3</h3>
|
||||
<p>Sed eget placerat libero. Sed elementum, ante id convallis posuere, leo dolor condimentum lectus, nec imperdiet sem lectus ac lectus. Nullam ultricies non magna ut mollis. Proin et sem a lacus euismod mollis at sed augue. Vivamus in consequat tortor. Vivamus non erat ut lectus iaculis pretium.</p>
|
||||
<p>Aliquam lacinia velit ut magna bibendum, sit amet ornare tortor fermentum. Aliquam convallis leo vitae mi iaculis, sed posuere augue scelerisque.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="text">
|
||||
<div class="text-body">
|
||||
<h3>This is a text only component</h3>
|
||||
<p>Nam imperdiet leo massa, in ornare sapien varius non. Cras feugiat, lectus vel efficitur malesuada, lacus tortor porttitor mauris, sed consectetur ipsum ante vel libero. Donec auctor faucibus quam, quis sagittis mi sollicitudin eget. Fusce efficitur eu nisi vitae tempor. Maecenas elementum quam sit amet lorem pulvinar, eu tincidunt velit gravida. Phasellus turpis risus, consectetur quis libero sit amet, tempus varius diam.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<section class="section-footer">
|
||||
<div class="footer-divider">
|
||||
<a href="/"><img class="logo" src="images/logo-lume-single.png" alt="Logo single"></a>
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<div class="company">
|
||||
<p>Hammer Technologies LLC</p>
|
||||
</div>
|
||||
<div class="github">
|
||||
<img src="/images/icon-github.png" alt="Github icon">
|
||||
<a href="https://github.com/pcfreak30" target="blank">View on Github</a>
|
||||
</div>
|
||||
</footer>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Lume Web Extension Installer</title>
|
||||
<link rel="stylesheet" href="./css/reset.css" type="text/css" />
|
||||
<link rel="stylesheet" href="./css/style.css" type="text/css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="content-container">
|
||||
|
||||
<img class="header-icon" src="/images/logo-lume-single.png">
|
||||
<h1>Extension installed succesfully</h1>
|
||||
<div class="paragraph">
|
||||
<img src="images/icon-check.svg" /><p>All done, fully powered and ready to go!</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
font-size: 100%;
|
||||
font: inherit;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
|
||||
display: block;
|
||||
}
|
||||
|
||||
body {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
ol, ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
blockquote, q {
|
||||
quotes: none;
|
||||
}
|
||||
|
||||
blockquote:before, blockquote:after {
|
||||
content: "";
|
||||
content: none;
|
||||
}
|
||||
|
||||
q:before, q:after {
|
||||
content: "";
|
||||
content: none;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
|
@ -0,0 +1,290 @@
|
|||
/* Base preferences*/
|
||||
html {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
html *,
|
||||
html :before,
|
||||
html :after {
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #F9F9F9;
|
||||
background-image: url('/images/background-lume-installer.png');
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-position: bottom;
|
||||
font-family: "Roboto", 'Arial', serif;
|
||||
margin: 120px 40px 40px 40px;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 480px) {
|
||||
body {
|
||||
margin: 60px 20px 40px 20px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Fonts */
|
||||
@font-face {
|
||||
src: url(../fonts/Roboto-Light.ttf) format("trueType");
|
||||
font-family: "Roboto", 'Arial', sans-serif;
|
||||
font-weight: 300;
|
||||
}
|
||||
@font-face {
|
||||
src: url(../fonts/Roboto-LightItalic.ttf) format("trueType");
|
||||
font-family: "Roboto", 'Arial', sans-serif;
|
||||
font-weight: 300;
|
||||
}
|
||||
@font-face {
|
||||
src: url(../fonts/Roboto-Regular.ttf) format("trueType");
|
||||
font-family: "Roboto", 'Arial', sans-serif;
|
||||
font-weight: 400;
|
||||
}
|
||||
@font-face {
|
||||
src: url(../Roboto-Italic.ttf) format("trueType");
|
||||
font-family: "Roboto", 'Arial', sans-serif;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
src: url(../fonts/Roboto-Medium.ttf) format("trueType");
|
||||
font-family: "Roboto", 'Arial', sans-serif;
|
||||
font-weight: 500;
|
||||
}
|
||||
@font-face {
|
||||
src: url(../fonts/Roboto-MediumItalic.ttf) format("trueType");
|
||||
font-family: "Roboto", 'Arial', sans-serif;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
src: url(../fonts/Roboto-Bold.ttf) format("trueType");
|
||||
font-family: "Roboto", 'Arial', sans-serif;
|
||||
font-weight: 600;
|
||||
}
|
||||
@font-face {
|
||||
src: url(../fonts/Roboto-BoldItalic.ttf) format("trueType");
|
||||
font-family: "Roboto", 'Arial', sans-serif;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 22px;
|
||||
font-weight: 600;
|
||||
margin: 0 0 28px 0;
|
||||
color: #2A82DE;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 480px) {
|
||||
h1 {
|
||||
font-size: 20px;
|
||||
margin: 0 0 20px 0;
|
||||
line-height: 1.25;
|
||||
}
|
||||
}
|
||||
|
||||
.header-icon {
|
||||
width: 40px;
|
||||
margin: 0 0 10px -2px;
|
||||
}
|
||||
|
||||
strong {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
|
||||
/* Content container */
|
||||
.content-container {
|
||||
background-color: #fff;
|
||||
border: 0.5px solid rgba(16, 226, 96, 0.3);
|
||||
-webkit-box-shadow: 0px 0px 50px 15px rgba(16,226,96,0.10);
|
||||
box-shadow: 0px 0px 50px 15px rgba(16,226,96,0.10);
|
||||
border-radius: 8px;
|
||||
max-width: 600px;
|
||||
padding: 20px 50px 20px 50px;
|
||||
margin: 0 auto;
|
||||
position: center;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 480px) {
|
||||
.content-container {
|
||||
padding: 20px 20px 20px 30px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Notice message */
|
||||
.notice {
|
||||
background-color: #e7f2ff;
|
||||
border: 0.5px solid #2A82DE;
|
||||
border-left: 4px solid #2A82DE;
|
||||
border-radius: 4px;
|
||||
padding: 16px 20px 16px 22px;
|
||||
}
|
||||
|
||||
.notice-content {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.notice-content span {
|
||||
display: block;
|
||||
font-family: "Roboto", 'Arial', sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 1.4;
|
||||
color: #2A82DE;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 480px) {
|
||||
.notice {
|
||||
padding: 14px 12px 15px 16px;
|
||||
}
|
||||
|
||||
.notice-content img {
|
||||
width: 20px;
|
||||
margin: 0 8px 2px 0;
|
||||
}
|
||||
|
||||
.notice-content span {
|
||||
font-size: 13px;
|
||||
line-height: 1.35;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Paragraph */
|
||||
.paragraph {
|
||||
display: inline-block;
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
|
||||
.paragraph p {
|
||||
font-family: "Roboto", 'Arial', sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 15px;
|
||||
line-height: 1.6;
|
||||
color: #151515;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.paragraph p + p {
|
||||
padding: 24px 0 0 0;
|
||||
}
|
||||
|
||||
.paragraph img {
|
||||
display: inline-block;
|
||||
width: 22px;
|
||||
vertical-align: middle;
|
||||
margin: 0 8px 2px 0;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 480px) {
|
||||
.paragraph p {
|
||||
font-size: 14px;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.paragraph p + p {
|
||||
padding: 20px 0 0 0;
|
||||
}
|
||||
|
||||
.paragraph img {
|
||||
width: 20px;
|
||||
margin: 0 8px 2px 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Buttons */
|
||||
.action-button {
|
||||
margin-top: 42px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 480px) {
|
||||
.action-button {
|
||||
margin-top: 38px;
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: inline-block;
|
||||
border: 0;
|
||||
border-radius: 4px;
|
||||
background: -webkit-gradient(linear, left top, right top, from(#10E260), color-stop(80%, #2A82DE));
|
||||
background: -o-linear-gradient(left, #10E260 0%, #2A82DE 80%);
|
||||
background: linear-gradient(to right, #10E260 0%, #2A82DE 80%);
|
||||
padding: 10px 30px 12px 30px;
|
||||
font-family: "Roboto", 'Arial', sans-serif;
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
line-height: 1.6;
|
||||
color: #FFFFFF;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
.btn:hover {
|
||||
background: #10E260;
|
||||
color: #151515;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 379px) {
|
||||
.btn {
|
||||
padding: 8px 22px 10px 22px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Link style */
|
||||
.link {
|
||||
display: inline-block;
|
||||
margin: 0 0 0 16px;
|
||||
font-family: "Roboto", 'Arial', sans-serif;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
color: #158AFF;
|
||||
text-decoration: none;
|
||||
}
|
||||
.link:hover {
|
||||
color: #8862F9;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 379px) {
|
||||
.link {
|
||||
margin: 0 0 0 8px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Rotating icon */
|
||||
@-webkit-keyframes rotating {
|
||||
from {
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
@keyframes rotating {
|
||||
from {
|
||||
-ms-transform: rotate(0deg);
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
-ms-transform: rotate(360deg);
|
||||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
.rotating {
|
||||
-webkit-animation: rotating 2s linear infinite;
|
||||
animation: rotating 2s linear infinite;
|
||||
}
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
|
|
@ -0,0 +1,12 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 25.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:#3490DC;}
|
||||
</style>
|
||||
<path class="st0" d="M15.8,8.6l-5.6,5.6l-2.5-2.5c0,0,0,0,0,0c-0.2-0.2-0.5-0.2-0.7,0c-0.2,0.2-0.2,0.5,0,0.7l2.8,2.8
|
||||
c0.1,0.1,0.2,0.1,0.4,0.1c0.1,0,0.3-0.1,0.4-0.1l6-6c0,0,0,0,0,0c0.2-0.2,0.2-0.5,0-0.7C16.3,8.4,16,8.4,15.8,8.6z M12,2
|
||||
C6.5,2,2,6.5,2,12s4.5,10,10,10c5.5,0,10-4.5,10-10C22,6.5,17.5,2,12,2z M12,21c-5,0-9-4-9-9s4-9,9-9c5,0,9,4,9,9C21,17,17,21,12,21
|
||||
z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 774 B |
Binary file not shown.
|
After Width: | Height: | Size: 8.1 KiB |
|
|
@ -0,0 +1,33 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Lume Web Extension Installer</title>
|
||||
<link rel="stylesheet" href="./css/reset.css" type="text/css" />
|
||||
<link rel="stylesheet" href="./css/style.css" type="text/css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="content-container">
|
||||
|
||||
<img class="header-icon" src="/images/logo-lume-single.png"><h1>Lume Web Extension Installer</h1>
|
||||
<div class="paragraph">
|
||||
<p>Click install to load the Lume Web Extension into Chrome and Brave.</p>
|
||||
</div>
|
||||
|
||||
<div class="notice">
|
||||
|
||||
<div class="notice-content">
|
||||
<span>Please ensure your Chrome and/or Brave browser is <strong>completely closed</strong> before proceeding.</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="action-button">
|
||||
<a href="installer.html"><button class="btn">Install extension</button></a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Lume Web Extension Installer</title>
|
||||
<link rel="stylesheet" href="./css/reset.css" type="text/css" />
|
||||
<link rel="stylesheet" href="./css/style.css" type="text/css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="content-container">
|
||||
|
||||
<img class="header-icon rotating" src="/images/logo-lume-single.png">
|
||||
<h1>Installing Extension</h1>
|
||||
<div class="paragraph">
|
||||
<p>Downloading your personal gateway into web3...</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
|
||||
Loading…
Reference in New Issue