Loopstudios-Website

This repository contains the source code of a website developed in HTML and Tailwind CSS. The website is a pre-styled website prototype, where you can add your content without worrying about the design. It's like having a ready-made website skeleton, where you just need to fill in the information. You can use this template to create websites for businesses, personal portfolios, or any other purpose, saving time and effort in visual development.

Certificate of Completion

This project was developed during the course Tailwind CSS From Scratch | Learn By Building Projects, taught by Brad Traversy.
You can view the certificate of completion below:
Certificate of Completion

Table of Contents

• Installation
• Using VSCode and the GoLive Extension
• Main Features
• Folder Structure

Installation

1. Clone the repository:

   git clone https://github.com/your-username/your-repository.git
   

2. Navigate to the project directory:

   cd your-repository
   

Using VSCode and the GoLive Extension

To view the website locally, you can use Visual Studio Code with the GoLive extension. Follow the steps below:

1. Install Visual Studio Code: If you do not have VSCode installed, download it here.

2. Install the GoLive extension:

   • Open VSCode.
   • Go to the Extensions tab (or press Ctrl+Shift+X).
   • Search for "Live Server" and install the extension by Ritwick Dey.

3. Open the project in VSCode:

   • Navigate to the project directory and right-click.
   • Select "Open with Code" (or open VSCode and use File > Open Folder...).

4. Start the GoLive server:

   • With the project open in VSCode, right-click the index.html file in the sidebar.
   • Select "Open with Live Server".
   • This will open a new browser window with the website rendered.

Main Features

Hero Section

• Introduces the site with a striking title and a navigation menu.
• The navigation menu includes links to various sections of the site and features a hamburger menu for mobile devices.
• Responsive design ensures that the menu is intuitive and accessible on different devices.

Feature Section

• Highlights the main feature of the site, which is interactive VR experiences.
• Displays an image and a brief description of the main feature.
• Utilizes responsive design for desktops and mobile devices, ensuring a consistent experience across different screens.

Creations Section

• Showcases various VR creations with images and titles.
• Each creation is represented by an image and a title, allowing users to preview the content.
• The hover effect applied to the images adds subtle interactivity for desktop users, making the experience more engaging.

Footer Section

• Contains navigation links, social media icons, and copyright information.
• Navigation links provide quick access to various sections of the site, facilitating navigation.
• Social media icons are links to social media profiles, allowing users to connect with Loopstudios on various platforms.

Folder Structure

├── css
│   └── style.css        # Main CSS file
├── images
│   ├── desktop          # Images used on the site for desktop
│   │   └── ...          # Desktop-specific images
│   └── mobile           # Images used on the site for mobile devices
│   │   └── ...          # Mobile-specific images
│   └── ...              # Images used on the site
├── index.html           # Main HTML file
├── js
│   └── script.js        # Main JavaScript file
├── package-lock.json    # Package lock file
├── package.json         # Project manifest file
└── tailwind.config.js   # Tailwind CSS configuration file

Loopstudios-Website

Este repositório contém o código-fonte de um site desenvolvido em HTML e Tailwind CSS. O site é um protótipo de site pré-estilizado, onde você pode adicionar seu conteúdo sem precisar se preocupar com o design. É como ter um esqueleto de site pronto, onde você só precisa preencher as informações. Você pode usar este modelo para criar sites para empresas, portfólios pessoais ou qualquer outra finalidade, economizando tempo e esforço no desenvolvimento visual.

Certificado de Conclusão

Este projeto foi desenvolvido durante o curso Tailwind CSS From Scratch | Learn By Building Projects, ministrado por Brad Traversy.
Você pode visualizar o certificado de conclusão abaixo:
Certificado de Conclusão

Índice

• Instalação
• Usando o VSCode e a extensão GoLive
• Funcionalidades Principais
• Estrutura de Pastas

Instalação

1. Clone o repositório:

   git clone https://github.com/seu-usuario/seu-repositorio.git
   

2. Navegue até o diretório do projeto:

   cd seu-repositorio
   

Usando o VSCode e a extensão GoLive

Para visualizar o site localmente, você pode usar o Visual Studio Code com a extensão GoLive. Siga os passos abaixo:

1. Instale o Visual Studio Code: Se você ainda não tem o VSCode instalado, baixe-o aqui.

2. Instale a extensão GoLive:

   • Abra o VSCode.
   • Vá para a aba de Extensões (ou pressione Ctrl+Shift+X).
   • Pesquise por "Live Server" e instale a extensão de Ritwick Dey.

3. Abra o projeto no VSCode:

   • Navegue até o diretório do projeto e clique com o botão direito do mouse.
   • Selecione "Abrir com Code" (ou abra o VSCode e use Arquivo > Abrir Pasta...).

4. Inicie o servidor GoLive:

   • Com o projeto aberto no VSCode, clique com o botão direito no arquivo index.html na barra lateral.
   • Selecione "Open with Live Server".
   • Isso abrirá uma nova janela do navegador com o site sendo renderizado.

Funcionalidades Principais

Seção Hero

• Introduz o site com um título marcante e um menu de navegação.
• O menu de navegação inclui links para várias seções do site e possui um menu de hambúrguer para dispositivos móveis.
• O design responsivo garante que o menu seja intuitivo e acessível em diferentes dispositivos.

Seção Features

• Destaca o principal recurso do site, que são experiências VR interativas.
• Exibe uma imagem e uma breve descrição do recurso principal.
• Utiliza um design responsivo para desktops e dispositivos móveis, garantindo uma experiência consistente em diferentes telas.

Seção Criação

• Mostra várias criações de VR com imagens e títulos.
• Cada criação é representada por uma imagem e um título, permitindo que os usuários tenham uma prévia do conteúdo.
• O efeito hover aplicado às imagens adiciona uma interatividade sutil para usuários de desktop, tornando a experiência mais envolvente.

Seção Rodapé

• Contém links de navegação, ícones de mídia social e informações de direitos autorais.
• Os links de navegação fornecem acesso rápido a várias seções do site, facilitando a navegação.
• Os ícones de mídia social são links para perfis de redes sociais, permitindo que os usuários se conectem com o Loopstudios em várias plataformas.

Estrutura de Pastas

├── css
│   └── style.css        # Arquivo CSS principal
├── images
│   ├── desktop          # Imagens usadas no site para desktop
│   │   └── ...          # Imagens específicas para desktop
│   └── mobile           # Imagens usadas no site para dispositivos móveis
│   │   └── ...          # Imagens específicas para dispositivos móveis
│   └── ...              # Imagens usadas no site
├── index.html           # Arquivo HTML principal
├── js
│   └── script.js        # Arquivo JavaScript principal
├── package-lock.json    # Arquivo de bloqueio de versão de pacote
├── package.json         # Arquivo de manifesto do projeto
└── tailwind.config.js   # Arquivo de configuração do Tailwind CSS