Curso Webflow Designer - 13. Guía de Estilos Generales

Поділитися
Вставка
  • Опубліковано 14 гру 2024

КОМЕНТАРІ • 3

  • @stevend2748
    @stevend2748 2 роки тому

    Aca es donde empieza el proyecto grande!!
    0:00 - intro
    0:42 - Clear canvas by deleting the element "container" (from the previous project).
    0:56 - Click on "Style Manager" and click on "Clean Up" to delete all the classes that are not added to any specific page elements in the project.
    1:28 - Anatomy of new project from Adobe XD.
    3:00 - Save the colors from Adobe XD to Webflow
    3:30 - Since we have some colors SAVED from the previous project we'll just modify to the new HEX colors. Gold will now be used for buttons.
    5:22 - Create a new page "Style Guide" and add the each kind of element that is seen in Adobe XD: Container, Heading H1, Heading H2, Paragraph, Button
    7:03 - Bajada de Titulo: Add a Paragraph and give it a class of "page-header__bajada"
    8:01 - Add a custom font that is not default in Webflow's dropdown
    9:02 - Select "Body (All Pages)" and change the Font Color to Dark Slate Grey, Font Size: 1REM
    ------ H1 -------------
    9:34 - H1 is 56px but we want to use REM instead. Use franciscoamk.com/herramientas/rem/ to change figure out 56px = 3.5REM.
    10:09 - Select H1 and select the global class "All H1 Headings". Change Margin Top to 0. and Margin Bottom to 1.6REM (which is equal to one text line)
    10:42 - Change font Color to Gold (notice the color is still called "Blue Violet" as from the previous project). Font Size: 3.5EM. Font Weight: 400 (Regular),
    11:04 - Line height is 70px but this is calculated to be 1.25EM
    ------ H2 -------------
    12:05 - The H2 is 32px = 2 REM. Select "All H2 Headings" and change the font size to 2EM. Line height: 1.2EM
    12:54 - Margin Top and Bottom: 1.6REM
    ------ paragraph and Button -------------
    13:14 - Paragraphs
    13:31 - Select the Button and give it a class of "btn". Select Background color: gold. Padding Top and Bottom: 0.7REM and Padding Left and right: 2REM.
    15:32 - texto de bajada
    16:33 - Don't center the Heading elements and paragraphs but instead center their parent element.

  • @ericksonmanuelholguin2776
    @ericksonmanuelholguin2776 4 роки тому

    Hola amigo, vengo siguiendo tus videos desde hace tiempo y la verdad es que me parecen maravillosos, sobre todo el curso de UI, también estoy al tanto de este curso, por ende, podrías dejarme saber donde pusiste el archivo.xd para el proyecto?

    • @FranciscoAMK
      @FranciscoAMK  4 роки тому

      uff, creo que ya no tengo ese archivo :(