https://github.com/petsamuel/error-page

A basic landing page design challenge by devchallenges using vanilla CSS and HTML.
https://github.com/petsamuel/error-page

Last synced: 7 days ago
JSON representation

A basic landing page design challenge by devchallenges using vanilla CSS and HTML.

• Host: GitHub
• URL: https://github.com/petsamuel/error-page
• Owner: Petsamuel
• Created: 2022-10-09T22:42:03.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2022-10-10T00:55:39.000Z (about 2 years ago)
• Last Synced: 2023-03-05T20:09:17.390Z (over 1 year ago)
• Language: CSS
• Size: 260 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        


{404-Error-Page}




   Solution for a challenge from  Devchallenges.io.





  


    

      Demo

    

     | 

    

      Solution

    

     | 

    

      Challenge

    

  



## Table of Contents

- [Overview](#overview)

  - [Built With](#built-with)

- [Features](#features)

- [Contact](#contact)

- [Acknowledgements](#acknowledgements)

## Overview

![screenshot](/127.0.0.1_3000_index.html.png)

A basic landing page design challenge by devchallenges using vanilla CSS and HTML.

Following the mobile first responsive design method, I developed the single webpage utilizing both semantic and non-semantic forms of element organization.

As seen here, the section element was wrapped in the main element (semantic).

``` html

 

      

        
404 NOT FOUND

      

      

        


        


          
I have bad news for you

          
The page you are looking for might be removed or is temporarily unavailable

          

          


            Back to homepage

          

        

      

    

```

using the root pseudo class i was able to defined required styles for the pages, the image is being passed directly to the Scarecrow class.


however the container class element the property of flex, makes the the image and the text to display on the same row.

as seen here in the Css.

``` css

/* pseudo class deceleration*/

:root {

    --Scarecrow: url("/assets/images/Scarecrow.png");

    --font1: "Inconsolata";

    --line-height: 36px;

    --letter-spacing: -0.035em;

    --text-color: #4F4F4F;

}

.container {

    display: flex;

    justify-content: space-between;

    gap:10%;

}

.Scarecrow {

    content: var(--Scarecrow);

    width: 50%;

}

.button {

    width: 216px;

    height: 68px;

    background: #333333;

    font-family: 'Space Mono';

    display:flex;

    justify-content: center;

}

a {

    color: white;

    font-style: normal;

    font-weight: 700;

    font-size: 14px;

    line-height: 21px;

    letter-spacing: -0.035em;

    text-transform: uppercase;

    align-self: center;

     

}

```

### Built With

- [html](https://reactjs.org/)

- [Css](https://vuejs.org/)

## Features

This application/site was created as a submission to a [DevChallenges](https://devchallenges.io/challenges) challenge. The [challenge](https://devchallenges.io/challenges/wBunSb7FPrIepJZAg0sY) was to build an application to complete the given user stories.

## Contact

- GitHub [Petsamuel](https://github.com/Petsamuel/)

- Twitter [@Bieefilled](https://twitter.com/Bieefilled)