Iniciando o projeto CRUD e estrutura de pastas

style.css

+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
+
+/* =========================================
+RESET
+========================================= */
+
+*{
+    margin:0;
+    padding:0;
+    box-sizing:border-box;
+    font-family:'Poppins',sans-serif;
+}
+
+/* =========================================
+BODY + CÉU
+========================================= */
+
+body{
+
+    min-height:100vh;
+
+    overflow-x:hidden;
+
+    color:white;
+
+    position:relative;
+
+    background:
+    linear-gradient(
+        to bottom,
+        #38bdf8 0%,
+        #7dd3fc 25%,
+        #bae6fd 55%,
+        #e0f2fe 100%
+    );
+
+}
+
+/* =========================================
+NUVENS
+========================================= */
+
+body::before{
+
+    content:"";
+
+    position:fixed;
+
+    inset:0;
+
+    z-index:-2;
+
+    opacity:0.45;
+
+    background:
+
+    radial-gradient(circle at 10% 15%, white 0 55px, transparent 60px),
+    radial-gradient(circle at 18% 18%, white 0 40px, transparent 45px),
+    radial-gradient(circle at 26% 15%, white 0 55px, transparent 60px),
+
+    radial-gradient(circle at 70% 12%, white 0 65px, transparent 70px),
+    radial-gradient(circle at 78% 15%, white 0 45px, transparent 50px),
+    radial-gradient(circle at 86% 12%, white 0 65px, transparent 70px),
+
+    radial-gradient(circle at 40% 35%, white 0 70px, transparent 75px),
+    radial-gradient(circle at 50% 38%, white 0 50px, transparent 55px),
+    radial-gradient(circle at 60% 35%, white 0 70px, transparent 75px);
+
+}
+
+/* =========================================
+BRILHO DO SOL
+========================================= */
+
+body::after{
+
+    content:"";
+
+    position:fixed;
+
+    top:-120px;
+    right:-120px;
+
+    width:350px;
+    height:350px;
+
+    border-radius:50%;
+
+    background:
+    radial-gradient(
+        circle,
+        rgba(255,255,255,0.95) 0%,
+        rgba(255,255,255,0.5) 40%,
+        transparent 75%
+    );
+
+    z-index:-3;
+
+}
+
+/* =========================================
+HEADER
+========================================= */
+
+header{
+
+    width:100%;
+
+    padding:28px;
+
+    text-align:center;
+
+    font-size:45px;
+
+    font-weight:700;
+
+    letter-spacing:2px;
+
+    color:white;
+
+    background:
+    linear-gradient(
+        135deg,
+        #ef4444,
+        #dc2626,
+        #991b1b
+    );
+
+    border-bottom:6px solid #ffcb05;
+
+    box-shadow:
+    0 10px 30px rgba(0,0,0,0.25);
+
+    text-shadow:
+    0 0 10px rgba(0,0,0,0.3);
+
+}
+
+/* =========================================
+CONTAINER
+========================================= */
+
+.container{
+
+    width:90%;
+
+    max-width:1450px;
+
+    margin:40px auto;
+
+}
+
+/* =========================================
+TIMES
+========================================= */
+
+.times{
+
+    display:flex;
+
+    flex-wrap:wrap;
+
+    gap:15px;
+
+    margin-bottom:30px;
+
+}
+
+/* =========================================
+BOTÕES DOS TIMES
+========================================= */
+
+.time-btn{
+
+    padding:14px 22px;
+
+    border:none;
+
+    border-radius:15px;
+
+    background:
+    linear-gradient(
+        135deg,
+        #ef4444,
+        #dc2626
+    );
+
+    color:white;
+
+    font-weight:700;
+
+    font-size:16px;
+
+    cursor:pointer;
+
+    transition:0.3s;
+
+    box-shadow:
+    0 6px 18px rgba(0,0,0,0.25);
+
+}
+
+.time-btn:hover{
+
+    transform:
+    translateY(-4px)
+    scale(1.05);
+
+    background:
+    linear-gradient(
+        135deg,
+        #ffcb05,
+        #f59e0b
+    );
+
+    color:#111827;
+
+}
+
+/* BOTÃO ATIVO */
+
+.active{
+
+    background:
+    linear-gradient(
+        135deg,
+        #ffcb05,
+        #f59e0b
+    );
+
+    color:#111827;
+
+}
+
+/* =========================================
+GRID
+========================================= */
+
+.grid{
+
+    display:grid;
+
+    grid-template-columns:1fr 1fr;
+
+    gap:35px;
+
+}
+
+/* =========================================
+CARDS
+========================================= */
+
+.card{
+
+    background:
+    rgba(255,255,255,0.22);
+
+    backdrop-filter:blur(16px);
+
+    border:
+    2px solid rgba(255,255,255,0.35);
+
+    border-radius:30px;
+
+    padding:32px;
+
+    box-shadow:
+    0 15px 40px rgba(0,0,0,0.18);
+
+}
+
+/* =========================================
+TITULOS
+========================================= */
+
+.card h2{
+
+    color:#991b1b;
+
+    font-size:34px;
+
+    margin-bottom:20px;
+
+    text-shadow:
+    0 2px 8px rgba(255,255,255,0.35);
+
+}
+
+/* =========================================
+FORM
+========================================= */
+
+form{
+
+    display:flex;
+
+    flex-direction:column;
+
+    gap:18px;
+
+}
+
+/* =========================================
+INPUTS
+========================================= */
+
+input,
+select{
+
+    padding:16px;
+
+    border:none;
+
+    border-radius:14px;
+
+    background:
+    rgba(255,255,255,0.9);
+
+    color:#111827;
+
+    font-size:16px;
+
+    outline:none;
+
+    transition:0.3s;
+
+    box-shadow:
+    inset 0 2px 5px rgba(0,0,0,0.08);
+
+}
+
+option{
+    color:black;
+}
+
+/* FOCUS */
+
+input:focus,
+select:focus{
+
+    border:
+    2px solid #ef4444;
+
+    box-shadow:
+    0 0 18px rgba(239,68,68,0.45);
+
+}
+
+/* =========================================
+BOTÃO PRINCIPAL
+========================================= */
+
+button{
+
+    padding:16px;
+
+    border:none;
+
+    border-radius:14px;
+
+    background:
+    linear-gradient(
+        135deg,
+        #ef4444,
+        #dc2626
+    );
+
+    color:white;
+
+    font-size:17px;
+
+    font-weight:700;
+
+    cursor:pointer;
+
+    transition:0.3s;
+
+    box-shadow:
+    0 6px 20px rgba(0,0,0,0.25);
+
+}
+
+button:hover{
+
+    transform:
+    scale(1.04);
+
+    background:
+    linear-gradient(
+        135deg,
+        #ffcb05,
+        #f59e0b
+    );
+
+    color:#111827;
+
+}
+
+/* =========================================
+INFO TIME
+========================================= */
+
+.team-info{
+
+    margin-bottom:20px;
+
+    font-size:21px;
+
+    font-weight:700;
+
+    color:#111827;
+
+}
+
+/* =========================================
+LISTA
+========================================= */
+
+.pokemon-list{
+
+    display:flex;
+
+    flex-direction:column;
+
+    gap:22px;
+
+}
+
+/* =========================================
+CARD POKEMON
+========================================= */
+
+.pokemon{
+
+    background:
+    rgba(255,255,255,0.88);
+
+    border-radius:26px;
+
+    padding:22px;
+
+    display:flex;
+
+    justify-content:space-between;
+
+    align-items:center;
+
+    border:
+    2px solid rgba(255,255,255,0.4);
+
+    transition:0.35s;
+
+    box-shadow:
+    0 10px 30px rgba(0,0,0,0.15);
+
+}
+
+/* HOVER */
+
+.pokemon:hover{
+
+    transform:
+    translateY(-5px)
+    scale(1.01);
+
+    background:white;
+
+}
+
+/* =========================================
+LEFT
+========================================= */
+
+.pokemon-left{
+
+    display:flex;
+
+    align-items:center;
+
+    gap:18px;
+
+}
+
+/* =========================================
+IMAGEM
+========================================= */
+
+.pokemon-left img{
+
+    width:130px;
+
+    height:130px;
+
+    object-fit:contain;
+
+    filter:
+    drop-shadow(0 0 12px rgba(0,0,0,0.22));
+
+    transition:0.3s;
+
+}
+
+.pokemon:hover img{
+
+    transform:
+    scale(1.08);
+
+}
+
+/* =========================================
+INFO
+========================================= */
+
+.pokemon-info h3{
+
+    font-size:30px;
+
+    color:#b91c1c;
+
+}
+
+.pokemon-info p{
+
+    margin-top:6px;
+
+    color:#1f2937;
+
+    text-transform:capitalize;
+
+    font-weight:600;
+
+}
+
+/* =========================================
+RIGHT
+========================================= */
+
+.pokemon-right{
+
+    display:flex;
+
+    flex-direction:column;
+
+    gap:14px;
+
+    align-items:flex-end;
+
+}
+
+/* =========================================
+TIPOS
+========================================= */
+
+.tipos{
+
+    display:flex;
+
+    flex-wrap:wrap;
+
+    gap:10px;
+
+}
+
+/* =========================================
+TIPO
+========================================= */
+
+.tipo{
+
+    padding:10px 16px;
+
+    border-radius:30px;
+
+    background:
+    linear-gradient(
+        135deg,
+        #ef4444,
+        #b91c1c
+    );
+
+    color:white;
+
+    font-size:14px;
+
+    font-weight:700;
+
+    text-transform:capitalize;
+
+    box-shadow:
+    0 4px 10px rgba(0,0,0,0.18);
+
+}
+
+/* =========================================
+MEGA BADGE
+========================================= */
+
+.mega-badge{
+
+    background:
+    linear-gradient(
+        135deg,
+        #7c3aed,
+        #5b21b6
+    );
+
+    color:white;
+
+    padding:6px 12px;
+
+    border-radius:20px;
+
+    font-size:12px;
+
+    font-weight:700;
+
+    margin-left:10px;
+
+    box-shadow:
+    0 4px 10px rgba(0,0,0,0.2);
+
+}
+
+/* =========================================
+BOTÃO REMOVER
+========================================= */
+
+.delete-btn{
+
+    background:
+    linear-gradient(
+        135deg,
+        #dc2626,
+        #991b1b
+    );
+
+    color:white;
+
+    padding:11px 18px;
+
+    border:none;
+
+    border-radius:12px;
+
+    font-weight:700;
+
+    cursor:pointer;
+
+    transition:0.3s;
+
+}
+
+.delete-btn:hover{
+
+    transform:
+    scale(1.05);
+
+    background:
+    linear-gradient(
+        135deg,
+        #991b1b,
+        #7f1d1d
+    );
+
+}
+
+/* =========================================
+RESPONSIVO
+========================================= */
+
+@media(max-width:950px){
+
+    .grid{
+
+        grid-template-columns:1fr;
+
+    }
+
+    .pokemon{
+
+        flex-direction:column;
+
+        align-items:flex-start;
+
+        gap:20px;
+
+    }
+
+    .pokemon-right{
+
+        align-items:flex-start;
+
+    }
+
+}
\ No newline at end of file