Sección de contacto

Curso Práctico de Maquetación en CSS

Introducción

Lo que aprenderás sobre maquetación en CSS

Chrome Devtools

Análisis y creación del proyecto

Diseño del proyecto

Setup del proyecto

Creando la página principal

Arquitectura del header en HTML

Estilos en el header

Agregando íconos

Agregando imágenes al header

Manejo de Grid para posicionar contenedores

Manejo de imágenes de Background

Agregando fuentes

Terminando el Home

Creando página de Blogs

Blog page

Manejo de clases

Estilos en blogs html

Agregando imagen

Estilos del botón

Trabajando la sección de post

Grid Container

Creando página de Blog

Crear la pantalla de blog

Agregando estilos a la página de blog

Creando página de perfil

Sección de contacto

Maquetando perfil HTML

Manejando estilos en la página de perfil

Blog responsivo

Media Queries

Cierre

Cierre del curso

You don't have access to this class

Keep learning! Join and start boosting your career

If you already have an account,

Resources

How to create a contact section for your website?

Adding a well-designed contact section to your website is crucial to facilitate communication between your users and your business. In this guide we are going to see how to do it, using HTML and CSS to implement unique and customizable styles to your project.

How to structure the contact section in HTML?

Let's start with the basic HTML structure. Make sure you have a main container with two inner containers. Here's how to organize it:

<div class="contact-section"> <div class="contact-info"> <img src="path/to/image-news.png" alt="News Icon"> <h2>Contact</h2> <p>We have beenthe best choice for our clients for years. Contact us for more information.</p> <a href="mailto:[email protected]">Write to us</a> </div> <div class="contact-forms"> <img src="path/to/image-alert.png" alt="Alert Icon"> <h2>Write</h2> <p>We arehere to help you. Fill out the form and we will attend your request as soon as possible.</p> </div></div></div>

How to apply styles to your contact section?

Now that you have the basic structure, the next step is to add styles with CSS to make it look good and functional. Here's how to do it:

.contact-section { width: 100%; min-height: 250px; background-color: #f1f1f1; /* Use your preferred background color */ text-align: center; padding-bottom: 50px;}
.contact-info, .contact-forms { display: inline-block; width: 49.5%; height: 100%;}
.contact-info h2, .contact-forms h2 { font-size: 24px;}
.contact-info p, .contact-forms p { margin-bottom: 20px;}
.contact-section img { width: 100px; /* Adjust the size according to your needs */} }
.contact-section a { display: inline-block; padding: 5px 10px; border: 1px solid black; color: black; text-decoration: none;}
 @mediascreen and (max-width: 768px) { .contact-info, .contact-forms { width: 100%; display: block; }}

This CSS code takes care of aligning both blocks in a row and centering the text. You can adjust the colors, sizes and alignments according to the style of your web project.

What to do if the containers do not align correctly?

Alignment problems are common, especially when you work with display and positioning. Here are some recommendations:

Use display: inline-block; it allows you to place two or more elements side by side.
Check margins and paddings: Make sure they are not interfering with the design.
Modify the size of the images if they take more space than necessary.

In case you don't achieve the desired effect, remember that web design requires patience and you will often have to play with different properties until you reach the ideal result. By following these instructions, you should be able to build an effective contact section that complements your website.

What is the next step in web development?

Once you have implemented the contact section, you can continue with the rest of your project. Encourage yourself to continue learning, for example, how to optimize all your pages to ensure that your website is attractive and functional on all devices. There are always new techniques to discover, such as flexbox or CSS grid, to further improve your web design skills.

Don't stop here, keep exploring and perfecting your skills as a web developer - you're on the right track!

Contributions 157

Questions 10

Sort by:

Want to see more contributions, questions and answers from the community?

Cynthia Jazmín Romero

5 years ago

Acá está la mía 😄
![](

Sergio Estrella

Profe Platzi

5 years ago

Se siente genial cuando, al principio te demoras un montón en maquetar y dar estilos, pero poco a poco vas practicando, vas mejorando y lo haces mejor y más rápido! 😄

Hector L. Santiago Perez

5 years ago

screencapture-127-0-0-1-5500-JS-Basico-perfil-html-2020-05-14-00_40_49.png

Joel William Mendoza Paucara

5 years ago

Mi codigo

.contact-main-container {
    background-color: rgba(33, 35, 47, 0.226);
    display: grid;
    grid-template-columns: repeat(2, 300px);
    justify-content: space-around;
}
.contact {
    display: flex;
    padding: 100px 0;
}
.contact img {
    height: 90px;
    margin-right: 10px;
}```

Joel Dominguez Merino

4 years ago

Hay una forma de hacer en HTML que cuando quieran poner un email de contacto este habra el correo automáticamente.
Pueden hacerlo con el siguiente atributo en la etiqueta a

<a href="mailto:[email protected]">[email protected]</a>

Yo lo hago cuando no es un correo verdadero.
No sé que tan bueno sea con un correo real si les manden mucho spam o algo así.
Pero sé los comparto por si alguien no lo conocía.