ダッシュボードシンプルエヌnodejs🍋

エステFUE UNO DE MISプリメロスディースは、OSのenfocados enエルエルArovechamiennデ国連バックエンドque getionabaエルenvのo o masivoトラッドesデ国連は、basadoエヌPHP para obtener unarchivo csvをホストしています.
Abajo Teは、como利用者エステdiseを得ます.

veamos como se ve el dise se o o final🍋

🍋 Y - Tambi - en - tiene - un - campo para序論

エストlo puedes reciclar como uncomponentは、oフレームワークoを簡素化します.

conconimiento重要な点パラシュートで降下する人エルdesarrollo？

CSS/変数

:root {
    --main-bg-color: #0E0E0E;
    --secondary-bg-color: #161616;
    --blue-color: #4E54FF;
    --yellow-color: #F4E236;
    --bg-cards: rgba(255, 255, 255, 0.103);
}
}

ディスプレイグリッド

element {
    display: grid;
    grid-template-columns: 30% 70%;
}

ディスプレイ・フレックス

.contenedorLogo {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    padding-left: 20px;
}

CSS/ミキシングCSS

.contenedorPerfil img:hover~span {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    transform: translateX(7px);
    background: var(--blue-color);
    transition: 0.5s;
}

固定されたCSS/ポーション

.pencil {
    position: fixed;
    width: 75px;
    height: 75px;
    background-color: var(--yellow-color);
    left: 50px;
    bottom: 30px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

CSS/postion resetスタイル(入力)

.formularioArchivo input {
    width: 80%;
    height: 40px;
    border: none;
    border-bottom: 3px solid var(--yellow-color);
    margin: 20px;
    padding: 10px;
    background: transparent;
    outline: none;
    font-size: 1.3rem;
    color: #fff;
}

閉じたボタンのための

CSS/マイクロインタラクション

#closeOpen::after {
    content: "";
    position: absolute;
    width: 25px;
    height: 2px;
    background-color: var(--yellow-color);
    transform: rotate(45deg);
    transition: .4s;
}

#closeOpen:hover::after {
    transform: rotate(0deg);
    transition: .4s;
}

#closeOpen::before {
    content: "";
    position: absolute;
    width: 25px;
    height: 2px;
    background-color: var(--yellow-color);
    transform: rotate(-45deg);
    transition: .4s;
}

#closeOpen:hover::before {
    transform: rotate(0deg);
    transition: .4s;
}

Sí no conoces CSS te costará mil veces .

ジャバスクリプトque permiteモストラー/オカルタールエル

エステArtitaarioパラシュートコンティネンヌは、カルフォルニアデルElemementoプリンシパル、エレElememento permite que puvias enviar una peticiを得ます、置く、ポスト、削除、パラレンダーニアロスdatos desde el servidor tienes el botのnの主要なpara procesar todos estosを取得します.

Cは、digoエヌjs/フロントエンド

closeOpen.addEventListener('click', () => {
    contenedorPopUp.style.display = "none";
})

pencil.addEventListener('click', () => {
    contenedorPopUp.style.display = "grid";
})

エヌエルEncargaデCambiar La Propiedadは、何もブロックY Viceversaを表示しません.
エステes mi mi correo profesional [email protected],si me escribes te aseguro que tendr is s na una respuesta
アテメントメント
Link al repo
Link a la demo

ジョス・アマヤ