https://github.com/ibrahimalsabr/leon-template

A project for creating a Leon Template using HTML and CSS
https://github.com/ibrahimalsabr/leon-template

background-image css css-flexbox css-grid hovercss html responsive-web-design

Last synced: 3 months ago
JSON representation

A project for creating a Leon Template using HTML and CSS

• Host: GitHub
• URL: https://github.com/ibrahimalsabr/leon-template
• Owner: IbrahimAlsabr
• Created: 2022-07-19T12:44:14.000Z (almost 3 years ago)
• Default Branch: master
• Last Pushed: 2022-07-21T10:06:00.000Z (almost 3 years ago)
• Last Synced: 2025-02-01T14:23:41.361Z (5 months ago)
• Topics: background-image, css, css-flexbox, css-grid, hovercss, html, responsive-web-design
• Language: HTML
• Homepage: https://ibrahimalsabr.github.io/Leon-Template/
• Size: 2.88 MB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md

Awesome Lists containing this project

README

        

# Leon-Template

This is a project for creating a [Leon Template] using HTML and CSS.

I created it to improve my coding skills by building realistic projects.

## Table of contents

- [Overview](#overview)

  - [The objective](#the-objective)

  - [Screenshot](#screenshot)

  - [Links](#links)

- [My process](#my-process)

  - [Built with](#built-with)

  - [CSS properties used](#CSS-properties-used)

  - [Layout](#Layout)

  - [Useful resources](#useful-resources)

- [Author](#author)

- [Acknowledgments](#acknowledgments)

## Overview

### The objective

Users should be able to:

- View the optimal layout depending on their device's screen size

- See hover states for interactive elements

### Screenshot

#### Landing Screen 

![Landing Screen](https://github.com/IbrahimAlsabr/Leon-Template/blob/master/design/screenshots/landing-screen.jpg?raw=true")

#### Feature Large Screen 

![Landing Screen](https://github.com/IbrahimAlsabr/Leon-Template/blob/master/design/screenshots/feature-large-screen.jpg?raw=true")

#### Feature Medium Screen 

![Landing Screen](https://github.com/IbrahimAlsabr/Leon-Template/blob/master/design/screenshots/feature-medium-screen.jpg?raw=true")

#### Feature Small Screen 

![Landing Screen](https://github.com/IbrahimAlsabr/Leon-Template/blob/master/design/screenshots/feature-screen-mobile.jpg?raw=true")

#### Service Large Screen 

![Desktop Screen](https://github.com/IbrahimAlsabr/Leon-Template/blob/master/design/screenshots/service-large-screen.jpg?raw=true)

#### Service Medium Screen

![Desktop Screen](https://github.com/IbrahimAlsabr/Leon-Template/blob/master/design/screenshots/service-medium-screen.jpg?raw=true)

#### Small Screen

![Landing Screen](https://github.com/IbrahimAlsabr/Leon-Template/blob/master/design/screenshots/feature-small-screen.png?raw=true")

### Links

- Source Code URL:  [here](https://github.com/IbrahimAlsabr/Leon-Template)

- Live Site URL: [here](https://ibrahimalsabr.github.io/Leon-Template/)

## My process

### Built with

[![HTML](https://img.shields.io/badge/HTML5-E34F26?style=for-the-badge&logo=html5&logoColor=white)](https://developer.mozilla.org/fr/) 

[![CSS3](https://img.shields.io/badge/CSS3-1572B6?style=for-the-badge&logo=css3&logoColor=white)](https://developer.mozilla.org/fr/docs/Web/CSS)

### CSS properties used

- Media Queries And Responsive Design

- Flexbox

- CSS Grid

- Position

- Mobile-first workflow

### Layout

The designs were created to the following widths:

- Small screen: 768px

- Medium screen: 992px

- Large screen: 1200px

### Useful resources

- [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element) 

- [W3 Schools](https://www.w3schools.com/TAGS/default.ASP) 

- [Summary CSS Course](https://elzero.org/category/courses/css-course/)

## Author

[![GitHub](https://img.shields.io/badge/GitHub-100000?style=for-the-badge&logo=github&logoColor=white)](https://github.com/IbrahimAlsabr)

[![LinkedIn](https://img.shields.io/badge/LinkedIn-0077B5?style=for-the-badge&logo=linkedin&logoColor=white)](https://www.linkedin.com/in/ibrahim-alsabr-188939231/)

[![Twitter](https://img.shields.io/badge/Twitter-1DA1F2?style=for-the-badge&logo=twitter&logoColor=white)](https://twitter.com/home?lang=fr)

## Acknowledgments

* [Elzero Academy](https://elzero.org/)