🇧🇷 5 layouts de sites mais comuns na internet
Este projeto foi desenvolvido com as tecnologias HTML, CSS e Javascript.
Durante a criação, foram utilizadas tags HTML semânticas, propriedade CSS flex, responsividade e manipulação de CSS com Javascript. Para mais detalhes de implementação, o vídeo está disponível no YouTube: https://www.youtube.com/watch?v=sSkmBxsaJWg
🇱🇷 5 most common website layouts on the internet
This project was developed with HTML, CSS and Javascript technologies.
During the creation, semantic HTML tags, CSS flex property, responsiveness and CSS manipulation with Javascript were used. For more implementation details, the video is available on YouTube: https://www.youtube.com/watch?v=sSkmBxsaJWg
Layout 1
🇧🇷 Primeiro layout - Mostra todas as tags HTML semânticas uma abaixo da outra. Quando apresentado em telas menores, como smartphones, o menu fica oculto, sendo exibido apenas quando o botão de menu no canto superior direito é clicado.
🇱🇷 First layout - Shows all semantic HTML tags one below the other. When presented on smaller screens such as smartphones, the menu is hidden, being displayed only when the menu button in the upper right corner is clicked.
Download links
HTML Layout Template - Expansive
Layout 2
🇧🇷 Segundo layout - As tags de navegação ficam à esquerda, as tags relacionadas à direita e a principal "main" no centro com o conteúdo principal do site. Quando apresentado em telas menores, como smartphones, o menu fica oculto, sendo exibido apenas quando o botão de menu no canto superior direito é clicado.
🇱🇷 Second layout - navigation tags are on the left, related tags on the right and the main "main" in the center with the main content of the site. When presented on smaller screens such as smartphones, the menu is hidden, being displayed only when the menu button in the upper right corner is clicked.
Download links
HTML Layout Template - Expansive
Layout 3
🇧🇷 Terceiro layout - O menu de navegação está abaixo do cabeçalho alinhado ao centro. O aside com o conteúdo relacionado fica à direita do main que tem o conteúdo principal do site. Quando apresentado em telas menores, como smartphones, o menu fica oculto, sendo exibido apenas quando o botão de menu no canto superior direito é clicado.
🇱🇷 Third layout - The navigation menu is below the center-aligned header. The aside is to the right of the main which has the main content of the site. When presented on smaller screens such as smartphones, the menu is hidden, being displayed only when the menu button in the upper right corner is clicked.
Download links
HTML Layout Template - Expansive
Layout 4
🇧🇷 Quarto layout - Exibe o menu na parte superior do site no lado esquerdo do cabeçalho. O aside com o conteúdo relacionado fica à direita do main que tem o conteúdo principal do site. Quando apresentado em telas menores, como smartphones, o menu fica oculto, sendo exibido apenas quando o botão de menu no canto superior direito é clicado.
🇱🇷 Fourth layout - Displays the menu at the top of the site on the left side of the header. The side with related content is to the right of the main one that has the main content of the site. When presented on smaller screens such as smartphones, the menu is hidden, being displayed only when the menu button in the upper right corner is clicked.
Download links
HTML Layout Template - Expansive
Layout 5
🇧🇷 Quinto layout - Exibe o menu na parte superior do site no lado esquerdo do cabeçalho. O aside com o conteúdo relacionado fica à esquerda do main que tem o conteúdo principal do site. Quando apresentado em telas menores, como smartphones, o menu fica oculto, sendo exibido apenas quando o botão de menu no canto superior direito é clicado.
🇱🇷 Fifth layout - Displays the menu at the top of the site on the left side of the header. The side with related content is to the left of the main one that has the main content of the site. When presented on smaller screens such as smartphones, the menu is hidden, being displayed only when the menu button in the upper right corner is clicked.