404 not found

jorggev · Aug 24, 2023 · 91f1714 · 91f1714
1 parent 5657124
commit 91f1714
Show file tree

Hide file tree

Showing 5 changed files with 254 additions and 113 deletions.
diff --git a/404-not-found-master/README.md b/404-not-found-master/README.md
@@ -1,17 +1,13 @@
 <!-- Please update value in the {}  -->
 
-<h1 align="center">{Your project name}</h1>
+<h1 align="center">404 NOT FOUND</h1>
 
 <div align="center">
    Solution for a challenge from  <a href="http://devchallenges.io" target="_blank">Devchallenges.io</a>.
 </div>
 
 <div align="center">
   <h3>
-    <a href="https://{your-demo-link.your-domain}">
-      Demo
-    </a>
-    <span> | </span>
     <a href="https://{your-url-to-the-solution}">
       Solution
     </a>
@@ -25,51 +21,32 @@
 <!-- TABLE OF CONTENTS -->
 
 ## Table of Contents
-
-- [Overview](#overview)
-  - [Built With](#built-with)
+- [Built With](#built-with)
 - [Features](#features)
-- [Contact](#contact)
 - [Acknowledgements](#acknowledgements)
+- [Contact](#contact)
 
-<!-- OVERVIEW -->
-
-## Overview
-
-![screenshot](https://user-images.githubusercontent.com/16707738/92399059-5716eb00-f132-11ea-8b14-bcacdc8ec97b.png)
-
-Introduce your projects by taking a screenshot or a gif. Try to tell visitors a story about your project by answering:
 
-- Where can I see your demo?
-- What was your experience?
-- What have you learned/improved?
-- Your wisdom? :)
 
 ### Built With
+- [HTML](https://reactjs.org/)
+- [CSS](https://vuejs.org/)
 
-<!-- This section should list any major frameworks that you built your project using. Here are a few examples.-->
 
-- [React](https://reactjs.org/)
-- [Vue.js](https://vuejs.org/)
-- [Tailwind](https://tailwindcss.com/)
 
 ## Features
-
-<!-- List the features of your application or follow the template. Don't share the figma file here :) -->
-
 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.
 
 
+
 ## Acknowledgements
+- [Steps to replicate a design with only HTML and CSS](https://devchallenges-blogs.web.app/how-to-replicate-design/)
 
-<!-- This section should list any articles or add-ons/plugins that helps you to complete the project. This is optional but it will help you in the future. For exmpale -->
 
-- [Steps to replicate a design with only HTML and CSS](https://devchallenges-blogs.web.app/how-to-replicate-design/)
-- [Node.js](https://nodejs.org/)
-- [Marked - a markdown parser](https://github.com/chjj/marked)
 
 ## Contact
-
-- Website [your-website.com](https://{your-web-site-link})
-- GitHub [@your-username](https://{github.com/your-usermame})
-- Twitter [@your-twitter](https://{twitter.com/your-username})
+- Email: [email protected]
+- GitHub [@jorggev](https://{github.com/jorggev})
+- Twitter [@jorggev27](https://{twitter.com/jorggev27})
+- Instagram [@jorggev](https://{instagram.com/jorggev/})
+- Linkedin [Jorge Villalba](https://{linkedin.com/in/jorggevillalba/})
diff --git a/404-not-found-master/css/style.css b/404-not-found-master/css/style.css
@@ -0,0 +1,208 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  outline: 2px solid rgba(229, 25, 25, 0) !important;
+}
+
+/* -------------------------------------------------------------------------------- */
+/*                                MEDIA QUERIES                                     */
+/* -------------------------------------------------------------------------------- */
+/* ----------------------------------320PX------------------------------------------ */
+@media screen and (min-width: 320px) {
+  header {
+    top: 40px;
+    left: 77px;
+    font-family: Space Mono;
+  }
+
+  .header {
+    color: #333333;
+    margin: 5px;
+    margin-bottom: 50px;
+    height: 25px;
+    top: 40px;
+    left: 77px;
+    font-weight: bold;
+  }
+
+  .container {
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: repeat(2, 1fr);
+    height: 70vh;
+    width: 100%;
+    color: #333333;
+  }
+
+  .container-img {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .scarecrow-img {
+    position: relative;
+    height: 238px;
+    bottom: 20px;
+  }
+
+  .text {
+    padding: 20px;
+    display: grid;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .text-one {
+    font-family: Space Mono;
+    font-weight: 800;
+    text-align: left;
+    top: 265px;
+    margin-bottom: 20px;
+  }
+
+  .text-two {
+    font-family: Space Mono;
+    font-weight: 100;
+    line-height: 20px;
+    letter-spacing: -0.09em;
+    text-align: left;
+    height: 108px;
+    top: 491px;
+    left: 736px;
+    width: 250px;
+  }
+
+  .boton-conteiner {
+    font-family: Space Mono;
+    background-color: #333333;
+    color: white;
+    width: 220px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .boton {
+    padding: 20px;
+    font-size: 10px;
+    letter-spacing: 0.05em;
+  }
+
+  .boton a{
+    text-decoration: none;
+    color: white;
+  }
+
+  footer {
+    font-size: 12px;
+    font-weight: 700;
+    line-height: 17px;
+    text-align: center;
+    color: #bdbdbd;
+    margin-top: 90px;
+  }
+
+  footer a{
+    color: #bdbdbd;
+    text-decoration: none;
+  }
+}
+
+/* ----------------------------------1024px------------------------------------------ */
+@media screen and (min-width: 768px) {
+  header {
+    top: 40px;
+    left: 77px;
+    margin: 20px;
+  }
+
+  .header {
+    color: #333333;
+    margin: 5px;
+    margin-bottom: 50px;
+    width: 200px;
+    height: 25px;
+    top: 40px;
+    left: 77px;
+    font-size: 24px;
+  }
+
+  .container {
+    height: 70vh;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: 1fr;
+    align-items: center;
+    justify-content: center;
+    color: #333333;
+  }
+
+  .container-img {
+    width: 539px;
+    height: 447px;
+    top: 265px;
+    left: 77px;
+    margin-left: 200px;
+  }
+
+  .scarecrow-img {
+    width: 100%;
+    height: 448px;
+    bottom: 20px;
+  }
+
+  .text-one {
+    font-family: Space Mono;
+    font-size: 64px;
+    font-weight: 700;
+    text-align: left;
+    width: 500px;
+    height: 190px;
+    top: 265px;
+    line-height: 95px;
+    letter-spacing: -0.1em;
+  }
+
+  .text-two {
+    font-family: Space Mono;
+    font-size: 24px;
+    font-weight: 400;
+    line-height: 36px;
+    letter-spacing: -0.035em;
+    text-align: left;
+    width: 381px;
+    height: 108px;
+    top: 491px;
+    left: 736px;
+  }
+
+  .boton-conteiner {
+    background-color: #333333;
+    color: white;
+    width: 216px;
+    height: 68px;
+    top: 663px;
+    left: 740px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    margin-top: 30px;
+  }
+
+  .boton {
+    font-size: 14px;
+    letter-spacing: 0.05em;
+  }
+
+  footer {
+    font-size: 14px;
+  }
+
+  footer a{
+    color: #bdbdbd;
+    text-decoration: none;
+  }
+}
diff --git a/404-not-found-master/Scarecrow.png → 404-not-found-master/img/Scarecrow.png b/404-not-found-master/Scarecrow.png → 404-not-found-master/img/Scarecrow.png
diff --git a/404-not-found-master/devchallenges.png → 404-not-found-master/img/devchallenges.png b/404-not-found-master/devchallenges.png → 404-not-found-master/img/devchallenges.png