london_class9_Meysam_Arshadi_HTML_CSS_Week_2 #500
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 |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| { | ||
| "liveServer.settings.port": 5502 | ||
| } |
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,25 +1,25 @@ | ||
| # karma-clone | ||
|
|
||
| The aim of this exercise is to create a page that looks just like this one: | ||
|
|
||
|  | ||
|
|
||
| ### Set up | ||
|
|
||
| - **Fork and clone** this repo. | ||
| - To fork, hit the 'fork' button in the top right corner of this page on Github. | ||
| Now you should be on your own Github repository - you'll know this because your name should now be in the repo name at the top of the Github page. | ||
| - To clone, click the green button that says 'Code' on that page. | ||
| Now the code is on your own machine (this happened when you cloned), AND it's linked to your own Karma repository on Github (which was created when you forked). | ||
|
|
||
| # Instructions | ||
|
|
||
| - **Edit `index.html` and `style.css`** to re-create the design above. | ||
| - Remember, use semantic HTML to re-create the structure, and style each element using CSS to make a perfect copy of the above image. | ||
| - All the images and icons you need can be found in the `img` folder, and the font 'Roboto' is already loaded into the project. | ||
| - **Only create the desktop design** for now. | ||
|
|
||
| ### Submitting your work | ||
|
|
||
| - **Commit and push your code often** (for example every half an hour)so you get into the habit and you avoid losing any code that you write if your machine crashes for example. | ||
| - Once you're ready to submit your homework for review, do a final push and **create a Pull Request**. If you're unsure how to do this, [have a look here](https://syllabus.codeyourfuture.io/git/cheatsheet/#i-want-to-send-my-code-to-volunteers-pushing). | ||
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,247 @@ | ||
| body { | ||
| font-family: "Roboto", sans-serif; | ||
| -webkit-font-smoothing: antialiased; | ||
| color: black; | ||
| } | ||
|
|
||
| a:hover { | ||
| color: orange; | ||
| } | ||
|
|
||
| a, | ||
| li { | ||
| text-decoration: none; | ||
| } | ||
|
|
||
| a:visited { | ||
| text-decoration: none; | ||
| color: inherit; | ||
| } | ||
|
|
||
| button { | ||
| padding: 20px; | ||
| border: 0px; | ||
| background: none; | ||
| font-weight: 100; | ||
| } | ||
|
|
||
| hr { | ||
| display: block; | ||
| margin-top: 40; | ||
| margin-bottom: 0.5em; | ||
| margin-left: 100px; | ||
|
There was a problem hiding this comment. rem are usually more responsive than pixels, you can read more https://chiamakaikeanyi.dev/sizing-in-css-px-vs-em-vs-rem/ |
||
| margin-right: 100px; | ||
| border-width: 1px; | ||
| opacity: 30%; | ||
| } | ||
|
|
||
| #navbar-button { | ||
| padding: 10px; | ||
| } | ||
|
|
||
| /* ---------- Main ---------- */ | ||
|
|
||
| .body { | ||
| display: grid; | ||
| grid-template-rows: auto auto 1fr auto; | ||
| grid-template-columns: auto 1fr auto; | ||
| margin: 10px; | ||
| margin-right: 0%; | ||
| } | ||
|
|
||
| header { | ||
| grid-column: 1 / -1; | ||
| display: flex; | ||
| flex-direction: row; | ||
| flex-direction: row; | ||
| align-content: center; | ||
| justify-content: space-around; | ||
| margin-top: 0px; | ||
| margin-bottom: 0px; | ||
| font-weight: 100; | ||
| background-color: #fdf6f8; | ||
| } | ||
|
|
||
| .navbar-logo { | ||
| width: 2%; | ||
| } | ||
|
|
||
| /* --------------- Footer -------------*/ | ||
|
|
||
| footer { | ||
| grid-column: 1 / -1; | ||
| display: flex; | ||
| flex-direction: column; | ||
| align-items: center; | ||
| margin-top: 0%; | ||
| } | ||
|
|
||
| footer > h4, | ||
| h3 { | ||
| font-weight: 100; | ||
| align-items: center; | ||
| } | ||
|
|
||
| .social-media-handles { | ||
| display: flex; | ||
| flex-direction: row; | ||
| margin: 0%; | ||
| } | ||
|
|
||
| .twitter-handle { | ||
| grid-column: 1; | ||
| grid-row: 1; | ||
| width: 30px; | ||
| height: 30px; | ||
| border: 1px solid rgba(0, 0, 0, 0.3); | ||
| border-radius: 50px; | ||
| opacity: 60%; | ||
| margin: 10px; | ||
| padding: 5px; | ||
| } | ||
|
|
||
| .facebook-handle { | ||
| grid-column: 2; | ||
| grid-row: 1; | ||
| width: 30px; | ||
| height: 30px; | ||
| border: 1px solid rgba(0, 0, 0, 0.3); | ||
| border-radius: 50px; | ||
| opacity: 60%; | ||
| margin: 10px; | ||
| padding: 5px; | ||
| } | ||
|
|
||
| .instagram-handle { | ||
| width: 30px; | ||
| height: 30px; | ||
| border: 1px solid rgba(0, 0, 0, 0.3); | ||
| border-radius: 50px; | ||
| opacity: 60%; | ||
| margin: 10px; | ||
| padding: 5px; | ||
| } | ||
|
|
||
| .karma-mobility { | ||
| color: rgb(104, 103, 103); | ||
| } | ||
|
|
||
| /* | ||
| /* | ||
| /* ---------- Store Page Starts Here --------- */ | ||
| /* | ||
| */ | ||
|
|
||
| :root { | ||
| --color-gray: #737888; | ||
| --color-lighter-gray: #e3e5ed; | ||
| --color-light-gray: #f7f7fa; | ||
| } | ||
|
|
||
| .store-container { | ||
| grid-column: 1 / -1; | ||
| display: flex; | ||
| flex-direction: row; | ||
| justify-content: space-evenly; | ||
| } | ||
|
|
||
| .form-container { | ||
| display: flex; | ||
| flex-direction: column; | ||
| align-items: center; | ||
| min-width: 40%; | ||
| max-width: 65%rem; | ||
| padding: 10vw 2rem 0; | ||
| margin: 0 auto; | ||
| height: 100vh; | ||
| } | ||
|
|
||
| .store-main-image { | ||
| max-width: 50%; | ||
| } | ||
|
|
||
| /* | ||
| /* | ||
| /* ---------- Store Form Starts Here --------- */ | ||
| /* | ||
| */ | ||
|
|
||
| .form { | ||
| display: flex; | ||
| flex-direction: column; | ||
| justify-content: flex-start; | ||
| margin-left: 45px; | ||
| margin-right: 45px; | ||
| } | ||
|
|
||
| .form > h1 { | ||
| color: orangered; | ||
| font-weight: 100; | ||
| line-height: 2; | ||
| } | ||
|
|
||
| .field { | ||
| display: flex; | ||
| flex-direction: column; | ||
| padding: 0.5rem; | ||
| border-radius: 0.25rem; | ||
| color: #737888; | ||
| margin-right: 2%; | ||
| } | ||
|
|
||
| label { | ||
| display: block; | ||
| margin-top: 0.25em; | ||
| margin-bottom: 0.25rem; | ||
| } | ||
|
|
||
| .req { | ||
| color: red; | ||
| } | ||
|
|
||
| .form-names, | ||
| .form-city-postcode { | ||
| display: flex; | ||
| flex-direction: row; | ||
| justify-content: flex-start; | ||
| } | ||
|
|
||
| .select-a-colour { | ||
| display: flex; | ||
| flex-direction: row; | ||
| margin-top: 0%; | ||
| } | ||
|
|
||
| .radio-button, | ||
| .checkbox { | ||
| display: flex; | ||
| flex-direction: row; | ||
| padding: 0.5rem; | ||
| color: #737888; | ||
| margin-right: 2%; | ||
| cursor: pointer; | ||
| } | ||
|
|
||
| #karma-orange, | ||
| #space-gray { | ||
| margin-right: 10px; | ||
| } | ||
|
|
||
| #checkbox { | ||
| margin-left: 10px; | ||
| } | ||
|
|
||
| .button { | ||
| background-color: orangered; | ||
| font-size: 0.8rem; | ||
| font-weight: 600; | ||
| color: #fff; | ||
| padding: 1rem; | ||
| border-radius: 0.25rem; | ||
| border: 0; | ||
| outline: 0; | ||
| margin-top: 5%; | ||
| } | ||
| .button:focus-visible { | ||
| background-color: #333; | ||
| } | ||
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.
Usually you want have in the PR only changes related to the feature. Linter often change existing code, this should be avoided as it will make the file history harder to read (continuous changes on the "blame" section and history that are not feature related and wrong authors compared to the original author). This is , of course, more related to a work environment than this solo project, but thought to mention for the future :)