CLICK TO ENLARGE 😇
📄 Description🎓 Objectives
🔨 Tech stack
📂 Files description
💻 Installation and how to use
🔧 What's next?
👷 Authors
This project started with an idea from Eonvorax, a peer from Holberton School. He wanted a simple way to create a landing page without using complicated templates. We worked together to design a basic and user-friendly page for one of his projects, focusing on what's most important.
- Start from a simple idea: provide an easy-to-use landing page template.
- Build the project using only HTML, CSS, and a bit of JavaScript.
- Ensure the design is responsive and adapts well to all devices.
- Make the template easy to modify and customize:
- Logo
- Titles
- Text
- Colors
- Keep the code clean and well-organized for easy maintenance.
- Offer a minimalist and beginner-friendly solution for personal or small projects.
- Encourage others to reuse and adapt the template freely.
| FILE | DESCRIPTION |
|---|---|
assets |
Contains the resources required for the repository. |
index.html |
Main HTML structure for the project. |
style.css |
Styles and animations for the project. |
script.js |
Behavior script for interactivity. |
README.md |
The README file you are currently reading 😉. |
Installation:
- Clone this repository:
- Open your preferred Terminal.
- Navigate to the directory where you want to clone the repository.
- Run the following command:
git clone https://github.com/fchavonet/web-basic_landing_page_template.gitHow to use:
-
Open the
index.htmlfile in your code editor. -
Customize the page title and logo:
- In the
<head>section, change the content inside<title>:
<title>My Awesome Project</title>
- Also change the logo text inside the
<header>:
<h1><a href="#">MY AWESOME PROJECT</a></h1>
- In the
-
Edit the content:
- You can modify titles (inside
<h3>or<h4>tags) and text content (inside<p>tags) to fit your project.
<h3 class="hidden-left">Your new title here</h3> <p class="hidden-right">Your custom description here.</p>
- You can modify titles (inside
-
Update social media links:
- At the bottom of the
index.htmlfile (in the<footer>), edit thehrefattributes inside each social link.
<a class="social-icon" href="YOURGITHUBLINKHERE.com" target="_blank"> <img src="./assets/images/social_icon-github.png" title="GitHub" alt="Github social icon"> </a>
- At the bottom of the
-
Customize the colors:
- Open the
style.cssfile and scroll to the:rootsection at the top. - Adjust these variables to match your brand’s color palette. This will automatically update all major color elements across the site.
:root { --primary-color: rgb(62.5, 125, 250); --secondary-color: rgb(50, 100, 200); --primary-dark-color: rgb(2, 4, 9); --secondary-dark-color: rgb(14, 17, 22); --primary-light-color: rgb(245, 245, 245); --secondary-light-color: rgb(240, 240, 240); }
- Open the
-
Change the images:
- Replace the existing images in the folder
./assets/images/screenshotswith your own. - Keep the same file names to avoid breaking image links.
- Replace the existing images in the folder
📌 For gallery images, try to preserve the original proportions to maintain the layout.
-
Open the
index.htmlfile in your web browser to see your modifications. -
Deploy your page:
- You can host it for free using GitHub Pages:
- Push your code to a GitHub repository.
- Go to the repository
settings > Pages, set the source to main branch ans save.. - Your site will be live at https://your-username.github.io/repo-name.
- You can host it for free using GitHub Pages:
| Desktop view | Mobile view |
|---|---|
|
|
- Add essential SEO tags to improve search engine visibility.
- Replace the custom animation system with the Animate On Scroll (AOS) library for smoother and more efficient animations, especially on mobile devices.
- Create a JSON configuration file to manage editable page content (logo, titles, texts, etc.) more easily.
- A big thank you to my friends Pierre and Yoann, always available to test and provide feedback on my projects.
Fabien CHAVONET
- Github: @fchavonet