Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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

This is a project for creating Elzero Template using HTML and CSS.
https://github.com/ibrahimalsabr/elzero-template

background-image css css-animations css-flexbox css-grid hover-effects html media-queries responsive-design

Last synced: 26 days ago
JSON representation

This is a project for creating Elzero Template using HTML and CSS.

Host: GitHub
URL: https://github.com/ibrahimalsabr/elzero-template
Owner: IbrahimAlsabr
Created: 2022-08-01T16:43:31.000Z (over 2 years ago)
Default Branch: main
Last Pushed: 2022-08-02T13:08:19.000Z (over 2 years ago)
Last Synced: 2023-03-10T04:47:11.836Z (almost 2 years ago)
Topics: background-image, css, css-animations, css-flexbox, css-grid, hover-effects, html, media-queries, responsive-design
Language: HTML
Homepage: https://ibrahimalsabr.github.io/Elzero-Template/
Size: 9.12 MB
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

        
# Elzero-Template

This is a project for creating a [Elzero 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)

  - [Template Design](#template-design)

  - [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 (Responsive Design)

- See hover and animation states for interactive elements

### Template Design

#### Landing Screen 

![Landing Screen](design/elzero-design.png?raw=true")

### Links

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

- Live Site URL: [here](https://ibrahimalsabr.github.io/Elzero-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

- Desktop-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/)