London | 26-MAY-ITP | Yonatan Teklemariam | Sprint 2 | Feature/wireframe #1340
+262
−110
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,33 +1,97 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
|
|
||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <title>My Wireframe Design</title> | ||
| <link rel="stylesheet" href="style.css"> | ||
| </head> | ||
|
|
||
| <body> | ||
|
|
||
| <!-- header --> | ||
| <header class="page-header"> | ||
| <h1>Basics of Web Development Designs</h1> | ||
| <p>README files, wireframes, and Git branches explained clearly</p> | ||
| </header> | ||
|
|
||
| <!-- Hero Image Placeholder --> | ||
| <div class="hero"> | ||
| <img | ||
| src="https://thf.bing.com/th/id/OIP.YsDV0VqSm_xNM6gRZ8N9UgHaEK?w=271&h=180&c=7&r=0&o=7&cb=thfc1falcon&dpr=1.3&pid=1.7&rm=3" | ||
| alt="readme diagram" class="placeholder"> | ||
| </div> | ||
|
|
||
| <!-- Main Article --> | ||
| <main class="main-article"> | ||
| <h2>What is the purpose of a README file?</h2> | ||
| <p>A <strong>README</strong> file explains what a project is, how it works, and how to use it. It usually includes | ||
| installation | ||
| steps, usage instructions, and important notes. The purpose is to help anyone understand the project quickly | ||
| without reading the entire codebase. | ||
| A README.md is an important document in a repository that introduces the project and explains its purpose, setup, | ||
| and usage to help users and developers understand and contribute to it. | ||
| Uses Markdown (.md) for formatted documentation and is usually the first file users read in a project. | ||
| Provides a project overview, installation instructions, configuration details, and usage examples such as code or | ||
| command-line commands. | ||
| May include license information, contributor credits, and appears well-formatted on platforms like GitHub. | ||
| A README file is meant to act as the front door to a project, giving anyone who encounters it a clear and | ||
| immediate understanding of what the project is about and how to interact with it. It explains the project’s | ||
| purpose, its goals, and the problems it aims to solve, while also guiding users through installation, usage, and | ||
| any important requirements. A strong README also helps future contributors by documenting decisions, structure, | ||
| and expectations, making collaboration smoother and reducing confusion. It becomes a reference point that keeps | ||
| the project understandable even months or years later, ensuring that the work remains accessible not only to | ||
| others but also to the original creator when returning after a long break. | ||
| </p> | ||
| <br><br> | ||
| <a href="https://www.bing.com/ck/a?!&&p=0e549038c9976fa751249f6e377372e242f89736085ed98c81c4f553d43b47c5JmltdHM9MTc3OTMyMTYwMA&ptn=3&ver=2&hsh=4&fclid=208fb4e6-66f9-61be-37f1-a3e567b76078&psq=readme+file+meaning&u=a1aHR0cHM6Ly93d3cuZ2Vla3Nmb3JnZWVrcy5vcmcvZ2l0L3doYXQtaXMtcmVhZG1lLW1kLWZpbGUv" | ||
| aria-label="Read more about readme files" class="btn">Read More</a> | ||
| </main> | ||
|
|
||
| <!-- Small Articles Section --> | ||
| <div class="small-articles"> | ||
|
|
||
| <article class="small-article"> | ||
| <img | ||
| src="https://thf.bing.com/th/id/OIP.tW2YTG0Gl_HHGRa0SvM8hwHaFj?w=191&h=180&c=7&r=0&o=7&cb=thfc1falcon&dpr=1.3&pid=1.7&rm=3" | ||
| alt="wireframe diagram" class="placeholder-small"> | ||
| <h3>What is the purpose of a wireframe?</h3> | ||
| <p>A <strong>wireframe</strong> is a simple visual layout that shows the structure of a webpage before design or | ||
| coding begins. It | ||
| helps developers and designers plan where elements should go and how the page should flow.</p> | ||
| <a href="https://www.bing.com/ck/a?!&&p=b7ce4e20dfeb568901a83af5b4240b863c21d97b8e784467aa170932e2aba9b1JmltdHM9MTc3OTMyMTYwMA&ptn=3&ver=2&hsh=4&fclid=208fb4e6-66f9-61be-37f1-a3e567b76078&psq=wireframe+meaning&u=a1aHR0cHM6Ly93d3cuZ2Vla3Nmb3JnZWVrcy5vcmcvYmxvZ3Mvd2hhdC1pcy13aXJlZnJhbWluZy8" | ||
| aria-label="Read more about wireframes" class="btn">Read More</a> | ||
| </article> | ||
|
|
||
|
|
||
| <article class="small-article"> | ||
| <img | ||
| src="https://thf.bing.com/th/id/OIP.e8ErcddqmrslMLMzf3tLUgHaEK?w=333&h=187&c=7&r=0&o=7&cb=thfc1falcon&dpr=1.3&pid=1.7&rm=3" | ||
| alt="git branching diagram" class="placeholder-small"> | ||
| <h3>What is a branch in Git?</h3> | ||
| <p>A <strong>Git branch</strong> is a separate version of your project where you can work on new features without | ||
| affecting the | ||
| main code. Branches allow safe experimentation and make collaboration easier. Therefore.</p> | ||
| <a href="https://www.bing.com/ck/a?!&&p=a3106f4d918b1bd91968281781229db63f035c1379f56a2aaa6ebbb47092becfJmltdHM9MTc3OTMyMTYwMA&ptn=3&ver=2&hsh=4&fclid=208fb4e6-66f9-61be-37f1-a3e567b76078&psq=git+branching+means&u=a1aHR0cHM6Ly93d3cuZ2Vla3Nmb3JnZWVrcy5vcmcvZ2l0L2ludHJvZHVjdGlvbi10by1naXQtYnJhbmNoLw" | ||
|
There was a problem hiding this comment. All of these links are, I guess, taken from a bing.com search? URLs like this can change over time and become invalid. Can you make them point to the correct URLs for the pages you wanted to point to? |
||
| aria-label="Read more about Git branching" class="btn">Read More</a> | ||
| </article> | ||
|
|
||
| </div> | ||
| </main> | ||
| <!-- footer --> | ||
| <footer> | ||
| <div class="footer-note"> | ||
| <p>For more information, please contact us at: Email: <a href="mailto:info@mywireframedesign.com" | ||
| target="_blank">jante26uk@gmail.com</a></p> | ||
| <p>Telephone: <a href="tel:+1234567890" target="_blank">07350989507</a></p> | ||
|
There was a problem hiding this comment. The telephone number visible on page doesn't match the one in the |
||
| <p>Address: <a | ||
| href="https://www.google.com/maps/place/29+fauna+field,+dunstable/@51.8892291,-0.5159181,3a,75y,233.86h,90t/data=!3m4!1e1!3m2!1smLOk3gqmcMjC07E1hbElkg!2e0!4m2!3m1!1s0x48764f036c42a891:0xae3cf387fd9cf1dd?sa=X&ved=1t:3780&ictx=111" | ||
|
There was a problem hiding this comment. Did you use your real address and contact details in this section? It's usually not a good idea to post this information publicly on the net |
||
| target="_blank">29 | ||
| Fauna Field, Dusntable, UK</a></p><br> | ||
| </div> | ||
| <p>© 2026 My Wireframe Design. All rights reserved.</p> | ||
|
There was a problem hiding this comment. According to the readme, the footer needs to be fixed to the bottom of the viewport. Have you achieved that criteria yet? |
||
| </footer> | ||
| </body> | ||
|
|
||
| </html> | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,89 +1,177 @@ | ||
| * { | ||
| margin: 0; | ||
| padding: 0; | ||
| box-sizing: border-box; | ||
| font-family: 'Arial', sans-serif; | ||
| } | ||
|
|
||
| html, | ||
| body { | ||
| height: 100%; | ||
| } | ||
|
|
||
| body { | ||
| background-color: #3c3f72; | ||
| color: #080000; | ||
| font-family: 'Arial', sans-serif; | ||
| line-height: 1.5; | ||
| font-size: 1em; | ||
| display: flex; | ||
| flex-direction: column; | ||
| } | ||
|
|
||
| .page-header { | ||
| background-color: #d0bee3; | ||
| color: #1a082c; | ||
| text-align: center; | ||
| text-shadow: 2px 2px 4px rgba(225, 226, 237, 0.982); | ||
| margin-bottom: 40px; | ||
| padding: 30px; | ||
| font-size: 1.5em; | ||
| } | ||
|
|
||
| .page-header h1 { | ||
| font-size: 2em; | ||
| margin-bottom: 5px; | ||
| } | ||
|
|
||
| .hero .placeholder { | ||
| width: 100%; | ||
| height: 600px; | ||
| background-color: #d0bee3; | ||
| border: 2px dashed #1a082c; | ||
| border-radius: 10px; | ||
| margin-bottom: 20px; | ||
|
|
||
| } | ||
|
|
||
| .hero { | ||
| margin-right: 20px; | ||
| margin-left: 20px; | ||
| } | ||
|
|
||
| .main-article { | ||
| flex: 1; | ||
| background: white; | ||
| padding-top: 45px; | ||
| padding-left: 15px; | ||
| padding-right: 15px; | ||
| padding-bottom: 15px; | ||
| border: 2px solid #000; | ||
| border-radius: 10px; | ||
| margin-bottom: 20px; | ||
| text-align: justify; | ||
| margin-right: 20px; | ||
| margin-left: 20px; | ||
|
|
||
| } | ||
|
|
||
| .main-article p, | ||
| .small-article p { | ||
| font-size: 1.2em; | ||
| } | ||
|
|
||
|
|
||
| .small-article h3 { | ||
| font-size: 1em; | ||
| color: #350763; | ||
| margin-bottom: 15px; | ||
| text-shadow: 2px 2px 4px rgba(225, 226, 237, 0.982); | ||
| } | ||
|
|
||
|
|
||
| .main-article h2 { | ||
| color: #350763; | ||
| margin-bottom: 15px; | ||
| text-shadow: 2px 2px 4px rgba(225, 226, 237, 0.982); | ||
| } | ||
|
|
||
| .btn { | ||
| display: inline-block; | ||
| padding: 4px 14px; | ||
| background-color: #350763; | ||
| color: white; | ||
| text-decoration: none; | ||
| border-radius: 5px; | ||
| margin-top: 10px; | ||
| font-size: 1.2em; | ||
| font-weight: bold; | ||
| } | ||
|
|
||
| .btn:hover { | ||
| background-color: #c3e7fb; | ||
| color: #1a082c; | ||
| } | ||
|
|
||
| .small-articles { | ||
| display: flex; | ||
| gap: 20px; | ||
| margin-bottom: 20px; | ||
| margin-right: 20px; | ||
| margin-left: 20px; | ||
| text-align: justify; | ||
|
|
||
|
|
||
| } | ||
|
|
||
| .small-article { | ||
| flex: 1; | ||
| background: white; | ||
| padding: 15px; | ||
| border: 2px solid #000; | ||
| border-radius: 10px; | ||
| } | ||
|
|
||
| .small-article h3 { | ||
| color: #350763; | ||
| margin-bottom: 10px; | ||
| font-size: 1.2em; | ||
| } | ||
|
|
||
| .placeholder-small { | ||
| width: 100%; | ||
| height: 450px; | ||
| background-color: #d0bee3; | ||
| border: 2px dashed #1a082c; | ||
| border-radius: 10px; | ||
| margin-bottom: 15px; | ||
| } | ||
|
|
||
| footer { | ||
| background-color: #d0bee3; | ||
| color: #1a082c; | ||
| text-align: center; | ||
| text-shadow: 2px 2px 4px rgba(225, 226, 237, 0.982); | ||
| padding: 10px 15px; | ||
| line-height: 1.3; | ||
| font-size: 1em; | ||
| margin-top: auto; | ||
|
|
||
| } | ||
|
|
||
| footer p { | ||
| font-weight: bold; | ||
| } | ||
|
|
||
| .footer-note { | ||
| font-size: 22px; | ||
| color: #1a082c; | ||
| margin-bottom: 5px; | ||
| text-shadow: 2px 2px 4px rgba(210, 213, 244, 0.982); | ||
| padding-top: 10px; | ||
| padding-bottom: 10px; | ||
| padding-left: 15px; | ||
| padding-right: 15px; | ||
| border-bottom: none; | ||
| <<<<<<< HEAD | ||
| /* optional: remove the thick bar */ | ||
| =======>>>>>>>59daf8a (Updated wireframe HTML and CSS) border-radius: 10px; | ||
|
|
||
|
|
||
| } | ||
|
|
||
| .footer-note a:hover { | ||
| color: #c6e9e9; | ||
| text-shadow: 2px 2px 4px rgba(25, 32, 112, 0.982); | ||
|
|
||
| } |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
See my comment about the link URLs. Can you make these images have real src properties, rather than linking through bing?