Click the W to go back to the Dashboard and create a new website!
Contadores Públicos Certificados

Hernández Irigoyen Contadores Asociados, S.C.

Fiscal – Asesoría – Auditoría – Supervisión – Contabilidad

NOSOTROS

Hernández Irigoyen Contadores Asociados, S.C.

Fundada el 14 de Abril, 1969.

Es una Firma de Contadores Públicos Certificados que apoya e impulsa a las nuevas generaciones de contadores y cuenta entre sus socios con varios jóvenes entusiastas bien preparados, que colaboran hombro con hombro con los socios fundadores para auxiliar a empresas nacionales e internacionales, así como a personas físicas en la consultoría y servicios integrales tales como: AUDITORÍA, ASESORÍA, SUPERVISIÓN, ORGANIZACIÓN y CONTABILIDAD, logrando con esto la optimización de sus operaciones.

mISIÓN

Proporcionar un servicio de auditoría, contables, de consultoría y financieros de excelencia dándo a nuestros clientes un beneficio adicional con un trato personalizado

    VISIÓN

    Proveer un servicio oportuno, de muy alta calidad y de constante apoyo, dentro de un ambiente positivo, el cual permite crecer y mejorar todas las facetas de nuestros servicios.

    #2 LAYOUT ELEMENTS

    Basic layout elements

    Add elements to your website by clicking on the [ + ] icon in the upper left hand corner. Below are some of the most basic structure elements in web design - sections, containers and columns. 

    A Section takes up 100% of the width of the browser window if you add it to the Body (the canvas of a website).
    It’s great for the big horizontal sections of a website.

    Section Element

    A Container is a 960px block centered in the middle of the browser. Usually most website content is added inside of a Container so that it’s centered. Containers are usually added to the Body or a Section element.

    Container Element

    Adding Columns are the fastest way to build a unique website layout. To edit how many columns you want in different devices, just click on the Gear Icon in the top right corner to access element settings.

    Responsive Columns
    #3 Designing with CSS

    Styling your elements

    Select an element and add a class in the right style panel (Brush Icon). In this panel you can add text and graphic styles like font color, line height, gradients, borders, shadows, and more. Visual web design is way more fun than coding right?

    button design example
    Add to Cart ➜
    Style it yourself
    Button Text ➜
    TIP: This button already has a class ”Button” with some basic styles. Select the button and try to add the gradient, border, rounded corners, inside/outside shadows, hover state styles, and transition for the hover styles – all using the style panel.
    What you created
    Button Text ➜
    apply the ‘button’ class
    Button Text
    TIP: In web design you can apply a class to many elements to make them look the same. Apply the “Button” class that you styled to the link above by clicking the [+] at the top of the Style panel and typing “Button” to find that class. 
    Form Design example

    Thanks!

    Your rock my socks!

    Oops! Something went wrong while submitting the form :(

    Style it yourself

    Thank you! Your submission has been received!

    Oops! Something went wrong while submitting the form :(

    TIP: First create classes for the text fields and button (apply the same class to both fields). Then change border styles, background color, and add styles for the hover & pressed states. Don’t forget to style the “Success” state for the Form element, found in the settings panel (Gear Icon in top right). 
    Typography example

    Lakewood Stout

    The Dark Beer of Lakewood, Colorado

    The legendary stout was born out of the beautiful matrimony of a mountain man and his most beloved thing, the city of Lakewood in Colorado. The mountain man also loved his axe and his single-shot Remington rifle, but not as much as he loved his city. He dreamed of her flowy rivers and majestic mountains. So he named his greatest stout after her. Thus the glorious stout was birthed out of a mountain man’s heart.

    “I crafted this glorious beer to express my undying love for my beautiful city.”

    - Mountain Man

    Style it yourself

    Lakewood Stout

    The Dark Beer of Lakewood, Colorado

    The legendary stout was born out of the beautiful matrimony of a mountain man and his most beloved thing, the city of Lakewood in Colorado. The mountain man also loved his axe and his single-shot Remington rifle, but not as much as he loved his city. He dreamed of her flowy rivers and majestic mountains. So he named his greatest stout after her. Thus the glorious stout was birthed out of a mountain man’s heart.

    “I crafted this glorious beer to express my undying love for my beautiful city.”

    - Mountain Man

    TIP: Go ahead and add custom typography and styles to the background. Cool tip: If you add typography styles to a parent block, all of its children text elements will inherit those text styles. In CSS this behavior is called “cascading”. 
    #4 Layout with CSS

    Building web layouts with CSS

    Similar to adding style to an element, to change the position of an element first add a class and then edit the position properties. You’ll learn about Margin, Padding, Display, Float, Overflow, and Position. 

    Margin & Padding example
    Breaking News

    Federal Agents Raid Gunshop, Find Weapons

    Store owner Steve Witmere previously arrested for blackmarket bazooka trading. Confesses to involvement in Russian mafia.

    Among the numerous bazookas found in the gunshop were tens of thousands of illegally obtained paintings valued at at least $10,000. Thats a heavy price to pay for these dumb paintings.

    Description: Margin and padding can be found in the Position palette of the Style panel. Adding Margin will add space outside of a block, and adding Padding will add space inside of a block.
    Add spacing Yourself
    Breaking News

    Federal Agents Raid Gunshop, Find Weapons

    Store owner Steve Witmere previously arrested for blackmarket bazooka trading. Confesses to involvement in Russian mafia.

    Among the numerous bazookas found in the gunshop were tens of thousands of illegally obtained paintings valued at at least $10,000. Thats a heavy price to pay for these dumb paintings.

    TIP: Start by adding padding on all sides of the main grey block (parent element). Then add bottom margin to add spacing between the individual text elements (children elements). Hint: Hold SHIFT while using the margin/padding control to apply to all sides and ALT to also apply to the opposing side.
    ‘Display: Block’ examples

    This heading is set to Display: Block

    This paragraph is set to Display: Block. So it fills the width of the parent window and stacks on top of other blocks. 

    Button with Display: BlockButton with Display: BlockThis link is set to Display: BlockThis link is set to Display: Block
    Description: Setting elements’ Display Setting to Block will make them stack on top of each other and fill 100% the width of its parent block. Most elements actually have this setting by default. 
    Make them ’Display:Block’ yourself
    This is a ButtonThis is a ButtonLinks are Display: Inline by defaultLinks are Display: Inline by default
    TIP: Select these elements (some are Inline Block and some are Inline) and make them Display: Block so that they stack on top of each other. 
    ‘Display: inline-block’ example
    Description: Setting elements’ Display Setting to Inline-Block will make the width of the block conform to the width of the contents inside it. That means if their content is small enough they can stack next to each other. You can copy paste the buttons above and edit the text inside to see how it works.
    make them inline-block yourself
    DownloadEdit
    TIP: Select the elements above and make them Display: Inline-block so they stack next to each other. You’ll see that the images stack next to the buttons. Tip: Dropping the buttons and images into separate Div Blocks will make them stack on top of each other (because Div Blocks are Display: Block by default).
    Float example

    Join Our Newsletter

    Thank you! Your submission has been received!

    Oops! Something went wrong while submitting the form :(

    Description: Setting Display: Inline-Block or Floating (this example) are the most common ways to stack elements side by side. In this example I’ll show you how to float something. 
    Float it yourself

    Join Our Newsletter

    Thank you! Your submission has been received!

    Oops! Something went wrong while submitting the form :(

    TIP: First select the text field, make it Float: Left and give it a percentage width (ex: 60%). Then set the button to Float: Left as well and set another percentage width (ex: 40%) so they both add up to 100%. That’s a manual way to force any element to stack side by side. 
    Absolute Position Example

    My Cup of Joe

    This is a photo caption text.

    Description: If you set Position to Absolute on an element, you’ll be able to position it in anywhere inside its parent block. To choose which parent to position inside of, set the parent element’s Position to Relative. Note: When elements are absolute positioned they float above other elements.
    Style It Yourself

    My Cup of Joe

    This is a photo caption for my favorite cup of Joe.

    TIP: First select the Image Wrapper element and set its Position to Relative. Next select the caption, drag it into the image set it’s Position to Absolute and choose the 7th preset. To position the Featured badge into the correct place choose the 2nd preset and manually position it.
    #5 Style Cascading

    Utilizing Cascading Styles

    You can easily create variations of an element by adding additional classes on top of each other and adding different styles on those classes. Check out the example below where we have different variations of a button. 

    Shared button styles example
    NORMAL Button
    GREEN Button
    RED Button
    NORMAL Button
    Design the buttons yourself
    GREEN Button
    RED Button
    TIP: Select the second button and click on the [+] next to the class to add another class. You can call it “Green”. Then give it different styles. These styles will override the base styles of the first class. Then create the Red button. 
    #6 media queries

    Designing for different devices

    In Webflow you first design your website for desktop devices and then make changes on mobile devices (access the Device icons in the top bar). Adding styles in a mobile device will override the desktop styles. 

    Responsive Heading example

    This is some heading text that gets smaller in mobile devices.

    Description: This heading is really big on the desktop, but we want it to be smaller on mobile devices. Click in the devices in the top bar to see that the text size and line height was decreased.
    Fix It yourself

    Make this big heading text get smaller in mobile devices.

    TIP: Select this heading on the Tablet device and make the font size and line height smaller. Do the same for Phone Landscape and Phone Portrait devices. You can see that the 
    Responsive Button example
    Button Text
    Description: This button is meant to be small on Desktop screens because it’s easy to click with the mouse cursor. We made it bigger on mobile devices so that it’s easier to tap with the finger
    Button Text
    Fix It yourself
    TIP: Go to the Tablet device and increase the padding of the button. When you do that it will override the previous styles set on Desktop and will cascade down to all the devices below Tablet. 
    Responsive Columns example

    Column 1

    This is some text inside of a div block.

    Column 2

    This is some text inside of a div block.

    Column 3

    This is some text inside of a div block.
    Description: The Columns Element in Webflow can be customized for each device. By default columns stack next to each other on Desktop and stack on top of each other on mobile devices. 

    Column 1

    This is some text inside of a div block.

    Column 2

    This is some text inside of a div block.

    Column 3

    This is some text inside of a div block.
    Fix It yourself
    TIP: Select a Column or Row element above (you can also use the Breadcrumb bar at the bottom or the Navigator panel on the right to find it), go to the element settings (Gear icon in the top right corner) and make sure the columns stack on mobile devices.
    #7 Resources

    Need more help?

    You got it! There are tons of people learning Webflow and web design every day. A great place to start is the video tutorials. Then head on over to the support center or community forum. 

    (You can click on the links above by going into Preview Mode – the eye icon in the top left corner)