https://github.com/el634dev/calm-clone

Created a clone of the Calm website using HTML, Vanilla CSS, JavaScript and Bootstrap 5
https://github.com/el634dev/calm-clone

bootstrap5 clone-website html-css-javascript

Last synced: 12 months ago
JSON representation

Created a clone of the Calm website using HTML, Vanilla CSS, JavaScript and Bootstrap 5

• Host: GitHub
• URL: https://github.com/el634dev/calm-clone
• Owner: el634dev
• Created: 2023-10-27T20:13:43.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2023-12-04T19:19:50.000Z (over 2 years ago)
• Last Synced: 2025-01-30T10:30:30.276Z (over 1 year ago)
• Topics: bootstrap5, clone-website, html-css-javascript
• Language: HTML
• Homepage: https://calm-clone-sooty.vercel.app
• Size: 1.27 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Calm Website Clone

> Created a clone of the Calm website

>

> Live demo [_here_](https://calm-clone-sooty.vercel.app/)

> 

> Original Website [_here_ ](https://www.calm.com)

- Make sure to open the original website in a new window or tab

  

## Table of Contents

* [General Info](#general-information)

* [Technologies Used](#technologies-used)

* [Important](#important)

* [Setup](#setup)

* [Project Status](#project-status)

* [Icons](#icons)

* [Video](#video)

## Important

- Make sure to link Bootstrap in your HTML file at the top with the meta tags but below it or you will not see any changes made with Bootstrap

- If you use vanilla CSS link it below your Bootstrap link or CSS could override Bootstrap

## General Information

- Project is built using HTML, CSS 3, JavaScript and Bootstrap 5

- The purpose of this project is to practice with Bootstrap 

- This project was undertaken for fun

  

## Technologies Used

- ![HTML5](https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge&logo=html5&logoColor=white)

- ![CSS3](https://img.shields.io/badge/css3-%231572B6.svg?style=for-the-badge&logo=css3&logoColor=white)

- ![JavaScript](https://img.shields.io/badge/javascript-%23323330.svg?style=for-the-badge&logo=javascript&logoColor=%23F7DF1E)

- ![Bootstrap](https://img.shields.io/badge/bootstrap-%238511FA.svg?style=for-the-badge&logo=bootstrap&logoColor=white)

- ![Visual Studio Code](https://img.shields.io/badge/Visual%20Studio%20Code-0078d7.svg?style=for-the-badge&logo=visual-studio-code&logoColor=white)

  

## Setup

- The requirements for this project are simple and do not require much setup. You will need a code editor of your choice. I used VSCode because I could see the project in the browser using Live Server. 

- There are no dependencies for this project, only additional plugins if you would like to set them up in VSCode. 

- If you are unsure, then I would say Live Server if you would like to see your project and the changes you make to your project.

  >

   a. You can get Live Server by heading over to VSCode then clicking the on blocks in the side menu and search for Live Server then install

- You can download VSCode for free and this is developed by Microsoft.

  >

    b. Start by searching for VSCode in your browser and then download using the appropriate instllation link for your operating system.

## Project Status

Project is: _complete_ 

## Icons

- [Bootstrap Icons](https://icons.getbootstrap.com/)

- [Font Awesome](https://fontawesome.com/download)

## Video

[ByteGrad](https://www.youtube.com/watch?v=z70GTU3p72I)

- Change navbar from transparent to a solid color