Skip to content

Latest commit

 

History

History
204 lines (150 loc) · 8.31 KB

README.md

File metadata and controls

204 lines (150 loc) · 8.31 KB

English

Clipboard Website

This repository contains the source code for a website developed using HTML and Tailwind CSS. The website is a prototype for the Clipboard app, which allows users to track and organize everything they copy.

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

  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

  • Description: Introduces the Clipboard app and its benefits.
  • Buttons:
    • Download for iOS: Button to download the app for iOS.
    • Download for Mac: Button to download the app for Mac.

Snippets Section

  • Description: Explains how Clipboard stores and organizes copied text snippets.

Features Section

  • Quick Search: Easily search your snippets by content, category, web address, application, and more.
  • iCloud Sync: Instantly saves and syncs snippets across all your devices.
  • Complete History: Retrieve any snippet from the first moment you started using the app.

Access Anywhere Section

  • Description: Shows that snippets can be accessed from anywhere.

Supercharge Section

  • Tools:
    • Create Blacklists: Easily organize snippets by creating blacklists.
    • Plain Text Snippets: Remove unwanted formatting from copied text for a consistent look.
    • Sneak Preview: Quick preview of all snippets on your Clipboard for easy access.

References Section

  • Description: Displays logos of major companies that use or support Clipboard.

Bottom CTA Section

  • Description: Call to action to download the app.
  • Buttons:
    • Download for iOS: Button to download the app for iOS.
    • Download for Mac: Button to download the app for Mac.

Folder Structure

├── css
│   └── style.css        # Main CSS file
├── images
│   └── ...              # Images used on the website
├── index.html           # Main HTML file
├── input.css            # Input CSS file
├── package-lock.json    # Package lock file
├── package.json         # Project manifest file
└── tailwind.config.js   # Tailwind CSS configuration file

Portugues

Clipboard Website

Este repositório contém o código-fonte de um site desenvolvido em HTML e Tailwind CSS. O site é um protótipo do aplicativo Clipboard, que permite aos usuários rastrear e organizar tudo o que copiam.

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

  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

  • Descrição: Introduz o aplicativo Clipboard e suas vantagens.
  • Botões:
    • Download for iOS: Botão para baixar o aplicativo para iOS.
    • Download for Mac: Botão para baixar o aplicativo para Mac.

Seção Snippets

  • Descrição: Explica como o Clipboard armazena e organiza trechos de texto copiados.

Seção Features

  • Quick Search: Pesquisa rápida por conteúdo, categoria, endereço web, aplicativo, e mais.
  • iCloud Sync: Sincronização instantânea de snippets em todos os dispositivos.
  • Complete History: Recupera qualquer snippet desde o início do uso do aplicativo.

Seção Access Anywhere

  • Descrição: Mostra que os snippets podem ser acessados de qualquer lugar.

Seção Supercharge

  • Ferramentas:
    • Create Blacklists: Criação de listas negras para organizar snippets.
    • Plain Text Snippets: Remoção de formatação indesejada dos textos copiados.
    • Sneak Preview: Visualização rápida de todos os snippets.

Seção References

  • Descrição: Mostra logotipos de grandes empresas que usam ou apoiam o Clipboard.

Seção Bottom CTA

  • Descrição: Chamada para ação para baixar o aplicativo.
  • Botões:
    • Download for iOS: Botão para baixar o aplicativo para iOS.
    • Download for Mac: Botão para baixar o aplicativo para Mac.

Estrutura de Pastas

├── css
│   └── style.css        # Arquivo CSS principal
├── images
│   └── ...              # Imagens usadas no site
├── index.html           # Arquivo HTML principal
├── input.css            # Arquivo CSS de entrada
├── 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