diff --git a/Form-Controls/index.html b/Form-Controls/index.html index 4344b144..e6a327ba 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -1,28 +1,101 @@ - - - - My form exercise - - - - - -
-

Product Pick

-
-
-
- - -
+ + + + My form exercise + + + + + + + -
- - + +
+

Product Pick

- \ No newline at end of file +
+
+
+
+ + +
+
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+
+ +
+ +
+
+
+ +
+ + diff --git a/Form-Controls/styles.css b/Form-Controls/styles.css index e69de29b..bb916d0d 100644 --- a/Form-Controls/styles.css +++ b/Form-Controls/styles.css @@ -0,0 +1,135 @@ +body { + display: flex; + justify-content: center; + + text-align: center; + margin: 14rem; + padding: 8rem; + + font-family: "Work Sans", sans-serif; + + font-style: normal; + font-size: 1rem; + background-image: url("https://images.unsplash.com/photo-1563291074-2bf8677ac0e5?q=80&w=1907&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"); +} + +html, +body { + height: 100%; + margin: 0; +} + +form { + min-height: 40rem; + padding: 2rem; + text-align: left; + font-weight: 300; + margin: 2rem; + background: #ffffff; + max-width: 600px; + border-radius: 8px; + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); + display: flex; + flex-direction: column; + align-items: center; + justify-content: flex-start; + font-size: 18px; +} + +.user-input { + margin: 1.5rem 0; + border-radius: 4px; + outline: none; + width: 100%; + max-width: 400px; + + line-height: 5.5; +} + +.submit { + padding: 16px; + + border-radius: 5px; + color: white; + background-color: #c9184a; + border: none; + font-weight: 800; + box-shadow: #c9184a 0 2px 8px 0; + + text-transform: uppercase; + -webkit-animation-duration: 1s; + animation-duration: 1s; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; + animation-iteration-count: infinite; + -webkit-animation-iteration-count: infinite; +} + +.submit:hover { + cursor: pointer; + animation-name: bounce; + -moz-animation-name: bounce; +} + +.footer { + position: static; + display: block; + margin: auto; + font-size: 1rem; + padding: 10rem 1rem; +} + +input:focus { + border-color: #c9184a; + box-shadow: #c9184a 0 2px 8px 0; +} +input { + padding: 6px; + border-radius: 3px; + border: 1px solid black; + margin: 2rem; +} + +@media (max-width: 480px) { + header { + font-size: 1.5em; + text-align: center; + } + + .btn { + text-align: center; + } + .submit { + display: block; + margin: auto; + } + + footer { + padding: 8px; + font-size: 0.8em; + } +} + +@keyframes bounce { + 0%, + 100%, + 20%, + 50%, + 80% { + -webkit-transform: translateY(0); + -ms-transform: translateY(0); + transform: translateY(0); + } + 40% { + -webkit-transform: translateY(-30px); + -ms-transform: translateY(-30px); + transform: translateY(-30px); + } + 60% { + -webkit-transform: translateY(-15px); + -ms-transform: translateY(-15px); + transform: translateY(-15px); + } +} diff --git a/Wireframe/README.md b/Wireframe/README.md deleted file mode 100644 index 83b77c7e..00000000 --- a/Wireframe/README.md +++ /dev/null @@ -1,42 +0,0 @@ -# Wireframe - -![Wireframe](./wireframe.png) - -Using the provided wireframe, create a new webpage explaining: - -1. What is Git? -2. Why do developers need Git? -3. What is a branch in Git? - -The page should NOT use any framework like Bootstrap. - -## Learning Objectives - -- Apply a consistent color scheme to links and text on the webpage -- Use semantic HTML tags to structure the webpage -- Create a page header with a title and description -- Create an articles section with three articles, each including a title, summary, and a link -- Create a page footer and fix it to the bottom of the viewport -- Use the :first-child pseudo-class to style the first article so that it stands out from the others -- Use version control by committing often and pushing regularly to GitHub -- Don't use any frameworks; write your own layout using HTML and CSS - -Use the wireframe sketch provided to lay out the page. Please note that this is just a sketch - you can choose the colors, fonts, and images that you want to use on the page. - -## Acceptance Criteria - -- [ ] The webpage has a consistent color scheme for links and text. -- [ ] Semantic HTML tags are used to structure the webpage. -- [ ] The page header includes a title and description. -- [ ] The articles section has three articles, each including a title, summary, and a link. -- [ ] The page footer is fixed to the bottom of the viewport. -- [ ] The first article is styled using the :first-child pseudo-class. -- [ ] The webpage is styled using a linked .css file. -- [ ] The webpage is properly committed and pushed to a branch on GitHub. -- [ ] The webpage does not use any frameworks such as Bootstrap. - -## Resources - -- [Wireframe](https://www.productplan.com/glossary/wireframe/) -- [Semantic HTML](https://www.w3schools.com/html/html5_semantic_elements.asp) -- [:first-child](https://developer.mozilla.org/en-US/docs/Web/CSS/:first-child) diff --git a/Wireframe/css/style.css b/Wireframe/css/style.css deleted file mode 100644 index e69de29b..00000000 diff --git a/Wireframe/index.html b/Wireframe/index.html deleted file mode 100644 index 67544158..00000000 --- a/Wireframe/index.html +++ /dev/null @@ -1,13 +0,0 @@ - - - - - - Wireframe - - - - - - -