London | ITP-Sep-2025 | Mohammad_Jafarzadeh | Sprint 1 | Wireframe #775
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
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 |
|---|---|---|
| @@ -0,0 +1,8 @@ | ||
| 1. What is the purpose of a README file? | ||
| A README file provides essential information about a project, including what it does, how to install and use it, dependencies, and how to contribute. It's often the first thing users or developers see when they visit your repository, and it helps them understand and get started quickly. | ||
|
|
||
| 2. What is the purpose of a wireframe? | ||
| A wireframe is a visual guide or blueprint that represents the layout and structure of a web page or app before it's developed. It focuses on functionality and placement of elements (like buttons, menus, and content areas), helping teams plan and agree on the design before writing any code. | ||
|
|
||
| 3. What is a branch in Git? | ||
| A branch in Git is a separate line of development that allows you to work on features, bug fixes, or experiments independently from the main codebase (usually the main or master branch). Once changes are complete, a branch can be merged back into the main project. |
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
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,166 @@ | ||
| body { | ||
| margin: 0; | ||
| min-height: 100vh; | ||
| display: flex; | ||
| flex-direction: column; | ||
| font-family: Arial, sans-serif; | ||
| background: AliceBlue; | ||
| color: Black; | ||
| overflow-x: hidden; | ||
| } | ||
|
|
||
| header { | ||
| width: 100%; | ||
| text-align: center; | ||
| padding: 15px; | ||
| background: MidnightBlue; | ||
| color: White; | ||
| } | ||
|
|
||
| header p { | ||
| color: White; | ||
| margin: 0; | ||
| } | ||
|
|
||
| footer { | ||
| position: fixed; | ||
| left: 0; | ||
| bottom: 0; | ||
| width: 100%; | ||
| text-align: center; | ||
| padding: 15px; | ||
| background: MidnightBlue; | ||
| color: White; | ||
| z-index: 100; | ||
| } | ||
|
|
||
| footer p { | ||
| color: White; | ||
| margin: 0; | ||
| } | ||
|
|
||
| main { | ||
| flex: 1; | ||
| display: grid; | ||
| grid-template-columns: 1fr 1fr; | ||
| gap: 20px; | ||
| max-width: 1200px; | ||
| margin: 0 auto 80px auto; | ||
| padding: 20px; | ||
| box-sizing: border-box; | ||
| width: 100vw; /* Prevent horizontal overflow from grid */ | ||
| } | ||
|
|
||
| article { | ||
| background: white; | ||
| padding: 20px; | ||
| border-radius: 8px; | ||
| box-shadow: 0 2px 8px rgba(0,0,0,0.08); | ||
| display: flex; | ||
| flex-direction: column; | ||
| align-items: center; | ||
| text-align: left; | ||
| } | ||
|
|
||
| img { | ||
| width: 100%; | ||
| max-width: 200px; | ||
| margin-bottom: 10px; | ||
| } | ||
|
|
||
| h1 { | ||
| margin: 0; | ||
| font-size: 2em; | ||
| } | ||
| h2 { | ||
| margin: 10px 0 0 0; | ||
| color: MidnightBlue; | ||
| } | ||
| p { | ||
| color: DarkSlateGray; | ||
| } | ||
|
|
||
| .button-link { | ||
| display: inline-block; | ||
| margin-top: 10px; | ||
| padding: 8px 18px; | ||
| background: RoyalBlue; | ||
| color: White; | ||
| border-radius: 4px; | ||
| text-decoration: none; | ||
| font-size: 1em; | ||
| transition: background 0.2s; | ||
| } | ||
| .button-link:hover { | ||
| background: Navy; | ||
| } | ||
|
|
||
| .social-media { | ||
| display: flex; | ||
| justify-content: center; | ||
| gap: 10px; | ||
| margin-top: 10px; | ||
| } | ||
| .social-media a { | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| width: 36px; | ||
| height: 36px; | ||
| border-radius: 50%; | ||
| background: Gainsboro; | ||
| color: Black; | ||
| text-decoration: none; | ||
| transition: background 0.2s, color 0.2s; | ||
| } | ||
| .social-media a:hover { | ||
| background: RoyalBlue; | ||
| color: White; | ||
| } | ||
| .social-media svg { | ||
| width: 18px; | ||
| height: 18px; | ||
| } | ||
|
|
||
|
|
||
| main > article:first-child { | ||
| grid-column: 1 / -1; | ||
| order: -1; | ||
| background: #fff; | ||
| padding: 32px 20px; | ||
| border-radius: 12px; | ||
| box-shadow: 0 4px 16px rgba(0,0,0,0.10); | ||
| display: flex; | ||
| flex-direction: column; | ||
| align-items: center; | ||
| text-align: left; | ||
| font-size: 1.35em; | ||
| } | ||
|
|
||
| main > article img { | ||
| width: 100%; | ||
| max-width: 200px; | ||
| margin-bottom: 10px; | ||
| object-fit: contain; | ||
| aspect-ratio: 1.5/1; | ||
| } | ||
|
|
||
| main > article:first-child img { | ||
| max-width: 200px; | ||
| aspect-ratio: unset; | ||
| } | ||
|
|
||
| @media (max-width: 768px) { | ||
| main { | ||
| grid-template-columns: 1fr; | ||
| padding: 10px; | ||
| } | ||
| article { | ||
| width: 100%; | ||
| max-width: 100%; | ||
| } | ||
| main > article:first-child { | ||
| font-size: 1.1em; | ||
| padding: 20px 8px; | ||
| } | ||
| } |
|
There was a problem hiding this comment. Can you remove this change from the PR? We want to stick to the exercise requirements and only modify files when directed. |
File renamed without changes
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.
Your styling is done well. In the future, you might want to consider adding custom properties to the :root{} selector. Commonly used colors, padding, styles, etc can be added to
rootfor easier maintenance in the future since the developer doesn't have to search through the CSS file to find where a common style is applied.