Skip to content

Explore the source code of a sleek website prototype crafted with HTML and Tailwind CSS. This project showcases the Clipboard app, designed to revolutionize how users track and organize copied content.

Notifications You must be signed in to change notification settings

gizellemanu/Clipboard-Website

Folders and files

NameName
Last commit message
Last commit date

Latest commit

862ae65 · Jul 10, 2024

History

7 Commits
Jul 3, 2024
Jul 3, 2024
Jul 3, 2024
Jul 3, 2024
Jul 3, 2024
Jul 10, 2024
Jul 3, 2024
Jul 3, 2024
Jul 3, 2024
Jul 3, 2024
Jul 3, 2024

Repository files navigation

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

About

Explore the source code of a sleek website prototype crafted with HTML and Tailwind CSS. This project showcases the Clipboard app, designed to revolutionize how users track and organize copied content.

Topics

Resources

Stars

Watchers

Forks