Edie homepage Creation

Solution for a challenge from Devchallenges.io.

Demo | Solution | Challenge

Table of Contents

• Overview
  • Built With
• Features
• How to use
• Contact
• Acknowledgements

Overview


The 3 steps for this design

For create this design, I have started with the mobile version for write the base of all items of this project and with the media(min-width:xxxpx) I change the specifical element somme the flex-direction:column in row. With the big screen, I change the font size and modify the size of images and box container.

For the menu / nav

For create this, in mobile version I used the JS for actived or not with the addEventListener("click"). With this action, I change the opacity of the menu and with a animation I move the menu to open the box.

The box in column

For move the if the size of screen is smaller, the box change of row. For this I use the flex-wrap: wrap; .

The flex grid

For create the differently special box with the display: grid, it is easyer fot create the specifical design with the images and box persona.

Built With

• Js vanilla / localStorage
• HTML 5
• CSS 3

Features

This application/site was created as a submission to a DevChallenges challenge. The challenge was to build an application to complete the given user stories.

How To Use

To clone and run this application, you'll need Git and Node.js (which comes with npm) installed on your computer. From your command line:

# Clone this repository
$ git clone https://github.com/your-user-name/your-project-name
# Install dependencies
$ npm install
# Run the app
$ npm start

Acknowledgements

• Steps to replicate a design with only HTML and CSS
• Node.js
• Marked - a markdown parser

Contact

• Website your-website.com
• GitHub @antozr