Okrem hlavičky zmeny rozloženia v dash

Question 1

Som si istý, že to je niečo super jednoduché, ale snažím sa vytvoriť tabuľu v jazyku python je pomlčka. Nemám žiadne predchádzajúce skúsenosti v prístrojovej doske, alebo html. Podarilo vytvoriť div políčka v rozloženia chcem, ale keď som sa pridať hlavičku na jeden div je, že úplne ničí moje usporiadanie (Pozri priložené snímky obrazovky). Môže niekto prosím, pomôžte mi pochopiť, kde som sa pokazilo?

Tabuľa pred div

import dash
from dash import dcc
from dash import html
import pandas as pd
from dash.dependencies import Input, Output, State

app = dash.Dash()

app.layout = html.Div(
    
    [
        html.H1(
            children="ML Dashboard",
            className="main_title",
            style={
                "color": "black",
                "text-align": "center"
            },
        ),

        html.Div(
            [
                html.Div(
                    [
                       
                    ],
                    style={
                        "background-color": "#096484",
                        "height": "5vh",
                        "width": "20vw",
                        "margin-left": "9vw",
                    }
                ),
            ],
            style={
                "background-color": "#74B6CE",
                "height": "88vh",
                "width": "39vw",
                "margin-left": "1vw",
                "display": "inline-block"
            }
        ),

        html.Div(
            [

            ],
            style={
                "background-color": "#74B6CE",
                "height": "88vh",
                "width": "26vw",
                "margin-left": "1vw",
                "display": "inline-block"
            }
        ),

        html.Div(
            [
                html.Div(
                    [

                    ],
                    style={
                        "background-color": "#4796B3",
                        "height": "40vh",
                        "width": "24vw",
                        "margin-left": "1vw",
                        "margin-top": "3vh"
                    }
                ),

                html.Div(
                    [

                    ],
                    style={
                        "background-color": "#4796B3",
                        "height": "40vh",
                        "width": "24vw",
                        "margin-left": "1vw",
                        "margin-top": "1.5vh"
                    }
                ),

            ],
            style={
                "background-color": "#74B6CE",
                "height": "88vh",
                "width": "26vw",
                "margin-left": "1vw",
                "display": "inline-block"
            }
        ),

    ],
    style={
        "background-color": "#52ACCC",
        "height": "95vh",
        "width": "95vw",
        "margin-left": "2vw"
    }
)

if __name__ == '__main__':
    app.run_server(host='0.0.0.0', port=8080, debug=True)

Dashboard po div

import dash
from dash import dcc
from dash import html
import pandas as pd
from dash.dependencies import Input, Output, State

app = dash.Dash()

app.layout = html.Div(
    
    [
        html.H1(
            children="ML Dashboard",
            className="main_title",
            style={
                "color": "black",
                "text-align": "center"
            },
        ),

        html.Div(
            [
                html.Div(
                    [
                        html.H1(
                            children="PIPELINE",
                            className="title_1",
                            style={
                                "color": "white",
                                "text-align": "center"
                            },
                        ),
                    ],
                    style={
                        "background-color": "#096484",
                        "height": "5vh",
                        "width": "20vw",
                        "margin-left": "9vw",
                    }
                ),
            ],
            style={
                "background-color": "#74B6CE",
                "height": "88vh",
                "width": "39vw",
                "margin-left": "1vw",
                "display": "inline-block"
            }
        ),

        html.Div(
            [

            ],
            style={
                "background-color": "#74B6CE",
                "height": "88vh",
                "width": "26vw",
                "margin-left": "1vw",
                "display": "inline-block"
            }
        ),

        html.Div(
            [
                html.Div(
                    [

                    ],
                    style={
                        "background-color": "#4796B3",
                        "height": "40vh",
                        "width": "24vw",
                        "margin-left": "1vw",
                        "margin-top": "3vh"
                    }
                ),

                html.Div(
                    [

                    ],
                    style={
                        "background-color": "#4796B3",
                        "height": "40vh",
                        "width": "24vw",
                        "margin-left": "1vw",
                        "margin-top": "1.5vh"
                    }
                ),

            ],
            style={
                "background-color": "#74B6CE",
                "height": "88vh",
                "width": "26vw",
                "margin-left": "1vw",
                "display": "inline-block"
            }
        ),

    ],
    style={
        "background-color": "#52ACCC",
        "height": "95vh",
        "width": "95vw",
        "margin-left": "2vw"
    }
)

if __name__ == '__main__':
    app.run_server(host='0.0.0.0', port=8080, debug=True)

Question 2

Vzrušujúce, že ste začíname s Dash — je to úžasné web rámec a skutočnosť, že je to všetko Python je win-win; skvelý spôsob, ako začať.

Pár veci, hoci ja by som upozorniť na:

Myslím si, že to bude trochu cez palubu s vnorené div"s, ak nie ste úplne pripojený k presný štýl máte zdieľané vo vašom príklad, ja by som odporučil len pomocou jednej hlavnej Div pre najviac časť
Je to najmä Dash-špecifické hračkou, že všetky CSS štýl kľúčových slov musia byť napísané v "camel prípade" (napr. camelCase); takže, vlastne ani jedna marže alebo akékoľvek iné nastavenia štýlu obsahujúce pomlčky boli skutočne implementované/rendered

Ja som za predpokladu, príklad šablóny máte zadarmo na použitie, ktoré som v podstate kopírovať, prilepiť a zjednodušené dole pomerne rýchlo z nedokončenej open source github repo som pracoval na tzv "dash-webapp-šablóny"!

Vyzerá to, ako je táto, možno to zmysel pre vás a môžete ho použiť ako jumping off point?

@import url('https://fonts.googleapis.com/css?family=Cinzel:300,400,500,600,700|Muli:200,300,400,500,600|Open+Sans:200,300,400,500,600|Oswald:200,300,400,500,600&amp;subset=latin-ext');
@import url('https://fonts.googleapis.com/css?family=Montserrat:200,200i,300,300i,400,400i,500,500i');
@import url('https://fonts.googleapis.com/css?family=Raleway:300,400,500,600,800&amp;subset=latin-ext');
@import url('https://fonts.googleapis.com/css?family=Roboto+Mono:200,300,400,500');

a { color: rgb(146, 146, 146); cursor: pointer; text-decoration: none; -o-transition: color 2.0s ease-out, background .1s ease-in; -ms-transition: color 2.0s ease-out, background .1s ease-in; -moz-transition: color 2.0s ease-out, background .1s ease-in; -webkit-transition: color 2.0s ease-out, background .1s ease-in; transition: all 1.67s ease-out; padding: 10px 10px 10px 10px }
a.fails { color: rgb(146, 146, 146); }
a.success { box-shadow: inset 0px 0px 20px 2px #96ffa2ab, 0px 0px 0px 4px rgb(165, 255, 200); border-radius: 18px; padding: 4px 50px 4px 10px; color: #147b01 !important; }
a.tool-ref { background: #dcdcdc4f; padding: 1px 3px 2px 3px; font-weight: 600; vertical-align: bottom; border-radius: 5px; color: rgb(35, 84, 148); border: 1px inset transparent }
a.tool-ref:hover { background: #fff; border: 1px outset #00ffc8; color: #3df5b4; text-decoration: underline }
a:hover, a:focus { color: #00efb8 !important; transition-duration: 2.75 s !important; transition-property: transform !important }
a:hover:before, a:focus:before, span:hover:before { pointer-events: none; position: absolute; z-index: -1; content: ''; opacity: .75; color: radial-gradient(ellipse at center, rgba(0, 0, 0, .11) 50 %, rgba(0, 0, 0, 0.30) 90 %) !important; transition-duration: 1.5 s; transition-property: transform opacity 0.95 }
blockquote { border-left: 4px lightgrey solid; padding-left: 1rem; margin-top: 2rem; margin-bottom: 2rem; margin-left: 0rem }
body { font-size: 1.15rem; line-height: 1.1; font-weight: 400; font-family: "Oswald", "Muli", "Open Sans", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; color: rgb(50, 50, 50) }
body { margin: 0; overflow-x: hidden; text-align: center }
button#clear-pipeline { background-color: #cccccc24 !important; color: #000000bd !important; border: 2px outset; border-color: #d4d4d4a3; }
button#initiate-pipeline { font-size: 90%; padding: .67% 6% .67% 6%; border-width: 1px; margin: 2%; mix-blend-mode: color; letter-spacing: 8px; text-transform: uppercase; border-radius: 200px }
button#initiate-pipeline:hover { border-color: #00ffb54a; border-width: 0.5px; box-shadow: inset 0px -30px 0px -5px #efefef4a; background-blend-mode: exclusion; background: #ffffff5e; animation: pact-gradient-text-flow 5s infinite linear; }
button#refresh-downloads-links:hover { border: 2px inset #d9d9d921 }
button#sign-on-submit, button#log-out-submit, button#refresh-downloads-links, button.submit-buttons { background: rgb(65, 0, 255); mix-blend-mode: luminosity; margin-top: 1px; border: 2px outset #aaa; font-size: 60%; border-radius: 100px; letter-spacing: .5rem; display: inline-flex; }
button#sign-on-submit:hover, button#log-out-submit:hover, button.submit-buttons:hover { background-color: rgba(117, 117, 117, 0.5) !important; filter: invert(1) brightness(0.75) contrast(1.5) saturate(2) }
button, .button { margin-bottom: 0rem }
button, .button, button:focus { outline: none !important }
code { font-family: 'Roboto Mono', monospace; font-size: 0.85rem !important }
div.dash-spreadsheet, .dash-freeze-left, .dash-spreadsheet, .dash-spreadsheet-container, .dash-freeze-left, .dash-grow { max-width: 100% !important }
h1 { font-size: 3.5rem; font-family: 'Montserrat'; text-rendering: optimizeLegibility; color: #0d04a5; font-weight: 500; text-decoration: none; border-bottom: 0.0px solid gray; line-height: 4rem; text-decoration: underline }
h2 { font-family: 'Oswald', serif; color: var(--pph-color-8); cursor: default; font-weight: 300; font-size: 2rem; }
h3 { font-size: 2.0rem; font-family: 'Montserrat', sans-serif; font-weight: 300; color: rgb(32, 92, 188); cursor: default }
h4 { font-size: 1.5rem; font-family: 'Oswald', sans-serif; color: var(--pph-color-57); font-weight: 400; cursor: default }
h5 { font-size: 1.2rem; font-family: 'Muli', sans-serif; cursor: default }
h6 { font-size: 1.1rem; color: #333; font-weight: 400 }
header.a:link { color: rgb(18, 116, 165) }
hr { margin-top: 2%; justify-content: center; margin-bottom: 3% }
hr { margin-top: 3rem; margin-bottom: 3.5rem; border-width: 0; border-top: 1px solid #E1E1E1 }
input, textarea, select, fieldset { margin-bottom: 0rem }
input:-internal-autofill-previewed, input:-internal-autofill-selected, textarea:-internal-autofill-previewed, textarea:-internal-autofill-selected, select:-internal-autofill-previewed, select:-internal-autofill-selected { background-color: #ffffff00 !important }
label, legend { display: block; margin-bottom: 0px }
label>.label-body { display: inline-block }
p { margin-top: 0 }
p, h2, h4, h5, h6 { margin-top: .5%; margin-bottom: 1% }
p, ul, ol { margin-bottom: 0.75rem }
pre, dl, figure, table, form { margin-bottom: 0rem }
section.wrapper { padding: 10px 0 }
span.menubar-title:hover { color: rgb(13, 4, 145) !important }

.button, button, input[type="submit"], input[type="reset"], input[type="button"] { display: inline-block; padding: 0 25px; color: #000000; text-align: center; font-size: 14px; font-weight: 500; font-family: "Cinzel", serif !important; line-height: 32px; text-decoration: none; white-space: nowrap; background-color: #ffffffcc !important; border-radius: 30px; border: 1px ridge #00000050; cursor: pointer; box-sizing: border-box }
.button.button-primary, button.button-primary, input[type="submit"].button-primary, input[type="reset"].button-primary, input[type="button"].button-primary { color: #00000075 !important; background-color: #33C3F050; border-color: #33C3F0 }
.button.button-primary:hover, button.button-primary:hover, input[type="submit"].button-primary:hover, input[type="reset"].button-primary:hover, input[type="button"].button-primary:hover, .button.button-primary:focus, button.button-primary:focus, input[type="submit"].button-primary:focus, input[type="reset"].button-primary:focus, input[type="button"].button-primary:focus { color: #00000075 !important; background-color: transparent; border-color: #1EAEDB }
.button:focus, button:focus, input[type="submit"]:focus, input[type="reset"]:focus, input[type="button"]:focus { color: #5C5D86; border-color: #00000075 !important }
.button:hover, button:hover, input[type="submit"]:hover, input[type="reset"]:hover, input[type="button"]:hover { border-color: #00FFC050; background: #00000075 }
.fader-line-long { display: flex; border: none; color: #fff0; height: 1px; background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 650, from(rgba(200, 210, 220, 0.5)), to(#fff0)); }
.fader-line-short { display: flex; border: none; color: #fff0; height: 1px; background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 350, from(rgba(120, 120, 150, 0.5)), to(#fff0)) }
.hr-style-2 { border-top: 3px double #8c8b8b; margin: 10px 10px 10px 10px; width: 67% }
.hvr-float-shadow, .workflow-css label { display: inline-block; vertical-align: middle; position: relative; -webkit-transition-duration: 1.0s; transition-duration: 1.0s; -webkit-transition-property: transform; transition-property: transform; text-rendering: optimizeLegibility }
.hvr-float-shadow:before, .workflow-css label:before { pointer-events: none; position: absolute; z-index: 99; content: ''; top: 180%; left: -10%; height: 6px; width: 120%; opacity: 0.05; background: -webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%); background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%); -webkit-transition-duration: 0.15s; transition-duration: 0.15s; -webkit-transition-property: transform, opacity; transition-property: transform, opacity }
.hvr-float-shadow:hover, .hvr-float-shadow:focus, .hvr-float-shadow:active, .workflow-css label:hover, .workflow-css label:focus, .workflow-css label:active { -webkit-transform: translateY(-1px)translateY(-1px); color: rgba(0, 215, 198, 1.0); opacity: 0.99; animation-name: anim-rainbow-flow-keys; animation-duration: 1s; animation-iteration-count: infinite; mix-blend-mode: hard-light }
.hvr-float-shadow:hover:before, .hvr-float-shadow:focus:before, .hvr-float-shadow:active:before, .workflow-css label:hover:before, .workflow-css label:focus:before, .workflow-css label:active:before { opacity: 0.9; -webkit-transform: translateY(-1px); transform: translateY(1px) }

<!DOCTYPE html>
<html>

<head>

</head>

<body>
  <div>
    <h1>ML Dashboard</h1>
    <h2>PIPELINE</h2>
    <hr style="margin-left: 25%; width: 50%;">
    <h3 style="margin-top: -10px; text-align: center;">Step One: Upload [e.g., insert expected data input files].</h3>
    <h2 style="margin-top: -0.75%;">Then, click “Launch Pipeline” to launch analysis.</h2>
    <hr style="margin-left: 25%; width: 50%;">
    <div id="upload-data">
      <div class="" aria-disabled="false" style="position: relative;">
        <div style="background-color: rgba(255, 255, 255, 0.5); border-color: transparent; border-radius: 100px; border-style: solid; border-width: 1px; box-shadow: rgba(0, 0, 50, 0.16) 0px 1px 5px 2px; margin: 2% 15%; padding: 0.5%; text-align: center;">Drag/Drop ⤓ file(s) here —or—<a class="hvr-float-shadow" style="font-weight: 400; margin-bottom: 5px;">
    
    John Collins           
    
    
          2021-11-19 19:54:35

John Collins · Answer 1 · 2021-11-19T19:54:35

Vzrušujúce, že ste začíname s Dash — je to úžasné web rámec a skutočnosť, že je to všetko Python je win-win; skvelý spôsob, ako začať.

Pár veci, hoci ja by som upozorniť na:

Myslím si, že to bude trochu cez palubu s vnorené div"s, ak nie ste úplne pripojený k presný štýl máte zdieľané vo vašom príklad, ja by som odporučil len pomocou jednej hlavnej Div pre najviac časť
Je to najmä Dash-špecifické hračkou, že všetky CSS štýl kľúčových slov musia byť napísané v "camel prípade" (napr. camelCase); takže, vlastne ani jedna marže alebo akékoľvek iné nastavenia štýlu obsahujúce pomlčky boli skutočne implementované/rendered

Ja som za predpokladu, príklad šablóny máte zadarmo na použitie, ktoré som v podstate kopírovať, prilepiť a zjednodušené dole pomerne rýchlo z nedokončenej open source github repo som pracoval na tzv "dash-webapp-šablóny"!

Vyzerá to, ako je táto, možno to zmysel pre vás a môžete ho použiť ako jumping off point?

@import url('https://fonts.googleapis.com/css?family=Cinzel:300,400,500,600,700|Muli:200,300,400,500,600|Open+Sans:200,300,400,500,600|Oswald:200,300,400,500,600&amp;subset=latin-ext');
@import url('https://fonts.googleapis.com/css?family=Montserrat:200,200i,300,300i,400,400i,500,500i');
@import url('https://fonts.googleapis.com/css?family=Raleway:300,400,500,600,800&amp;subset=latin-ext');
@import url('https://fonts.googleapis.com/css?family=Roboto+Mono:200,300,400,500');

a { color: rgb(146, 146, 146); cursor: pointer; text-decoration: none; -o-transition: color 2.0s ease-out, background .1s ease-in; -ms-transition: color 2.0s ease-out, background .1s ease-in; -moz-transition: color 2.0s ease-out, background .1s ease-in; -webkit-transition: color 2.0s ease-out, background .1s ease-in; transition: all 1.67s ease-out; padding: 10px 10px 10px 10px }
a.fails { color: rgb(146, 146, 146); }
a.success { box-shadow: inset 0px 0px 20px 2px #96ffa2ab, 0px 0px 0px 4px rgb(165, 255, 200); border-radius: 18px; padding: 4px 50px 4px 10px; color: #147b01 !important; }
a.tool-ref { background: #dcdcdc4f; padding: 1px 3px 2px 3px; font-weight: 600; vertical-align: bottom; border-radius: 5px; color: rgb(35, 84, 148); border: 1px inset transparent }
a.tool-ref:hover { background: #fff; border: 1px outset #00ffc8; color: #3df5b4; text-decoration: underline }
a:hover, a:focus { color: #00efb8 !important; transition-duration: 2.75 s !important; transition-property: transform !important }
a:hover:before, a:focus:before, span:hover:before { pointer-events: none; position: absolute; z-index: -1; content: ''; opacity: .75; color: radial-gradient(ellipse at center, rgba(0, 0, 0, .11) 50 %, rgba(0, 0, 0, 0.30) 90 %) !important; transition-duration: 1.5 s; transition-property: transform opacity 0.95 }
blockquote { border-left: 4px lightgrey solid; padding-left: 1rem; margin-top: 2rem; margin-bottom: 2rem; margin-left: 0rem }
body { font-size: 1.15rem; line-height: 1.1; font-weight: 400; font-family: "Oswald", "Muli", "Open Sans", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; color: rgb(50, 50, 50) }
body { margin: 0; overflow-x: hidden; text-align: center }
button#clear-pipeline { background-color: #cccccc24 !important; color: #000000bd !important; border: 2px outset; border-color: #d4d4d4a3; }
button#initiate-pipeline { font-size: 90%; padding: .67% 6% .67% 6%; border-width: 1px; margin: 2%; mix-blend-mode: color; letter-spacing: 8px; text-transform: uppercase; border-radius: 200px }
button#initiate-pipeline:hover { border-color: #00ffb54a; border-width: 0.5px; box-shadow: inset 0px -30px 0px -5px #efefef4a; background-blend-mode: exclusion; background: #ffffff5e; animation: pact-gradient-text-flow 5s infinite linear; }
button#refresh-downloads-links:hover { border: 2px inset #d9d9d921 }
button#sign-on-submit, button#log-out-submit, button#refresh-downloads-links, button.submit-buttons { background: rgb(65, 0, 255); mix-blend-mode: luminosity; margin-top: 1px; border: 2px outset #aaa; font-size: 60%; border-radius: 100px; letter-spacing: .5rem; display: inline-flex; }
button#sign-on-submit:hover, button#log-out-submit:hover, button.submit-buttons:hover { background-color: rgba(117, 117, 117, 0.5) !important; filter: invert(1) brightness(0.75) contrast(1.5) saturate(2) }
button, .button { margin-bottom: 0rem }
button, .button, button:focus { outline: none !important }
code { font-family: 'Roboto Mono', monospace; font-size: 0.85rem !important }
div.dash-spreadsheet, .dash-freeze-left, .dash-spreadsheet, .dash-spreadsheet-container, .dash-freeze-left, .dash-grow { max-width: 100% !important }
h1 { font-size: 3.5rem; font-family: 'Montserrat'; text-rendering: optimizeLegibility; color: #0d04a5; font-weight: 500; text-decoration: none; border-bottom: 0.0px solid gray; line-height: 4rem; text-decoration: underline }
h2 { font-family: 'Oswald', serif; color: var(--pph-color-8); cursor: default; font-weight: 300; font-size: 2rem; }
h3 { font-size: 2.0rem; font-family: 'Montserrat', sans-serif; font-weight: 300; color: rgb(32, 92, 188); cursor: default }
h4 { font-size: 1.5rem; font-family: 'Oswald', sans-serif; color: var(--pph-color-57); font-weight: 400; cursor: default }
h5 { font-size: 1.2rem; font-family: 'Muli', sans-serif; cursor: default }
h6 { font-size: 1.1rem; color: #333; font-weight: 400 }
header.a:link { color: rgb(18, 116, 165) }
hr { margin-top: 2%; justify-content: center; margin-bottom: 3% }
hr { margin-top: 3rem; margin-bottom: 3.5rem; border-width: 0; border-top: 1px solid #E1E1E1 }
input, textarea, select, fieldset { margin-bottom: 0rem }
input:-internal-autofill-previewed, input:-internal-autofill-selected, textarea:-internal-autofill-previewed, textarea:-internal-autofill-selected, select:-internal-autofill-previewed, select:-internal-autofill-selected { background-color: #ffffff00 !important }
label, legend { display: block; margin-bottom: 0px }
label>.label-body { display: inline-block }
p { margin-top: 0 }
p, h2, h4, h5, h6 { margin-top: .5%; margin-bottom: 1% }
p, ul, ol { margin-bottom: 0.75rem }
pre, dl, figure, table, form { margin-bottom: 0rem }
section.wrapper { padding: 10px 0 }
span.menubar-title:hover { color: rgb(13, 4, 145) !important }

.button, button, input[type="submit"], input[type="reset"], input[type="button"] { display: inline-block; padding: 0 25px; color: #000000; text-align: center; font-size: 14px; font-weight: 500; font-family: "Cinzel", serif !important; line-height: 32px; text-decoration: none; white-space: nowrap; background-color: #ffffffcc !important; border-radius: 30px; border: 1px ridge #00000050; cursor: pointer; box-sizing: border-box }
.button.button-primary, button.button-primary, input[type="submit"].button-primary, input[type="reset"].button-primary, input[type="button"].button-primary { color: #00000075 !important; background-color: #33C3F050; border-color: #33C3F0 }
.button.button-primary:hover, button.button-primary:hover, input[type="submit"].button-primary:hover, input[type="reset"].button-primary:hover, input[type="button"].button-primary:hover, .button.button-primary:focus, button.button-primary:focus, input[type="submit"].button-primary:focus, input[type="reset"].button-primary:focus, input[type="button"].button-primary:focus { color: #00000075 !important; background-color: transparent; border-color: #1EAEDB }
.button:focus, button:focus, input[type="submit"]:focus, input[type="reset"]:focus, input[type="button"]:focus { color: #5C5D86; border-color: #00000075 !important }
.button:hover, button:hover, input[type="submit"]:hover, input[type="reset"]:hover, input[type="button"]:hover { border-color: #00FFC050; background: #00000075 }
.fader-line-long { display: flex; border: none; color: #fff0; height: 1px; background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 650, from(rgba(200, 210, 220, 0.5)), to(#fff0)); }
.fader-line-short { display: flex; border: none; color: #fff0; height: 1px; background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 350, from(rgba(120, 120, 150, 0.5)), to(#fff0)) }
.hr-style-2 { border-top: 3px double #8c8b8b; margin: 10px 10px 10px 10px; width: 67% }
.hvr-float-shadow, .workflow-css label { display: inline-block; vertical-align: middle; position: relative; -webkit-transition-duration: 1.0s; transition-duration: 1.0s; -webkit-transition-property: transform; transition-property: transform; text-rendering: optimizeLegibility }
.hvr-float-shadow:before, .workflow-css label:before { pointer-events: none; position: absolute; z-index: 99; content: ''; top: 180%; left: -10%; height: 6px; width: 120%; opacity: 0.05; background: -webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%); background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%); -webkit-transition-duration: 0.15s; transition-duration: 0.15s; -webkit-transition-property: transform, opacity; transition-property: transform, opacity }
.hvr-float-shadow:hover, .hvr-float-shadow:focus, .hvr-float-shadow:active, .workflow-css label:hover, .workflow-css label:focus, .workflow-css label:active { -webkit-transform: translateY(-1px)translateY(-1px); color: rgba(0, 215, 198, 1.0); opacity: 0.99; animation-name: anim-rainbow-flow-keys; animation-duration: 1s; animation-iteration-count: infinite; mix-blend-mode: hard-light }
.hvr-float-shadow:hover:before, .hvr-float-shadow:focus:before, .hvr-float-shadow:active:before, .workflow-css label:hover:before, .workflow-css label:focus:before, .workflow-css label:active:before { opacity: 0.9; -webkit-transform: translateY(-1px); transform: translateY(1px) }

<!DOCTYPE html>
<html>

<head>

</head>

<body>
  <div>
    <h1>ML Dashboard</h1>
    <h2>PIPELINE</h2>
    <hr style="margin-left: 25%; width: 50%;">
    <h3 style="margin-top: -10px; text-align: center;">Step One: Upload [e.g., insert expected data input files].</h3>
    <h2 style="margin-top: -0.75%;">Then, click “Launch Pipeline” to launch analysis.</h2>
    <hr style="margin-left: 25%; width: 50%;">
    <div id="upload-data">
      <div class="" aria-disabled="false" style="position: relative;">
        <div style="background-color: rgba(255, 255, 255, 0.5); border-color: transparent; border-radius: 100px; border-style: solid; border-width: 1px; box-shadow: rgba(0, 0, 50, 0.16) 0px 1px 5px 2px; margin: 2% 15%; padding: 0.5%; text-align: center;">Drag/Drop ⤓ file(s) here —or—<a class="hvr-float-shadow" style="font-weight: 400; margin-bottom: 5px;">
    
    John Collins           
    
    
          2021-11-19 19:54:35

Okrem hlavičky zmeny rozloženia v dash

Otázka

Najlepšiu odpoveď

V iných jazykoch

Táto stránka je v iných jazykoch

Populárne v tejto kategórii

Obľúbené otázky v tejto kategórii