-
-
Notifications
You must be signed in to change notification settings - Fork 620
LONDON_10 | SAIM KORKMAZ | HTML/CSS WEEK_1 #597
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Open
nsaimk
wants to merge
9
commits into
CodeYourFuture:master
Choose a base branch
from
nsaimk:master
base: master
Could not load branches
Branch not found: {{ refName }}
Loading
Could not load tags
Nothing to show
Loading
Are you sure you want to change the base?
Some commits from the old base branch may be removed from the timeline,
and old review comments may become outdated.
Open
Changes from all commits
Commits
Show all changes
9 commits
Select commit
Hold shift + click to select a range
ceaa366
First Commit: added semantic html tags
nsaimk d3abfc2
main-container-up is done
nsaimk 788a064
container-down is done
nsaimk 9576bf2
Ready to go
nsaimk 783a4d1
Level-2 is done
nsaimk 74f020b
Level-2 is done
nsaimk 750ad96
Level-3 Meet Karma(homepage) is done
nsaimk 19a9eac
Last changes to check mobile version
nsaimk 09782b0
All levels are done
nsaimk File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
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": 5501 | ||
| } |
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,19 +1,110 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> | ||
| <head> | ||
| <meta charset="UTF-8" /> | ||
| <meta | ||
| name="viewport" | ||
| content="width=device-width, initial-scale=1, shrink-to-fit=no" | ||
| /> | ||
| <title>Karma</title> | ||
| <link href='https://fonts.googleapis.com/css?family=Roboto:400,500,300' rel='stylesheet' type='text/css'> | ||
| <link rel="stylesheet" href="css/normalize.css"> | ||
| <link rel="stylesheet" href="css/style.css"> | ||
| <link rel="shortcut icon" type="image/x-icon" href="favicon.ico"> | ||
| </head> | ||
| <body> | ||
|
|
||
| <link | ||
| href="https://fonts.googleapis.com/css?family=Roboto:400,500,300" | ||
| rel="stylesheet" | ||
| type="text/css" | ||
| /> | ||
| <link rel="stylesheet" href="css/normalize.css" /> | ||
| <link rel="stylesheet" href="css/style.css" /> | ||
| <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" /> | ||
| </head> | ||
| <body> | ||
| <!-- Add your HTML markup here --> | ||
| <!-- Remember: Use semantic HTML tags like <header>, <main>, <nav>, <footer>, <section> etc --> | ||
| <!-- All the images you need are in the 'img' folder --> | ||
|
|
||
| </body> | ||
| <header class="header"> | ||
| <img src="./img/karma-logo.svg" alt="" style="height: 50px" /> | ||
| <nav class="nav-desktop"> | ||
| <ul class="nav-list"> | ||
| <li class="nav-item"> | ||
| <a href="#"><strong>Meet Karma</strong></a> | ||
| </li> | ||
| <li class="nav-item"><a href="#">How it Works</a></li> | ||
| <li class="nav-item"><a href="./store.html">Store</a></li> | ||
| <li class="nav-item"><a href="#">Blog</a></li> | ||
| <li class="nav-item"><a href="#">Help</a></li> | ||
| <li class="nav-item"><a href="#">Login</a></li> | ||
| </ul> | ||
| </nav> | ||
| <button id="hamburger-menu"> | ||
| <span></span> | ||
| <span></span> | ||
| <span></span> | ||
| </button> | ||
| <!-- --> | ||
| <!-- <ul id="menu"> | ||
| <li><a href="#">Contact</a></li> | ||
| <li><a href="#">Login</a></li> | ||
| <li><a href="#">Blog</a></li> | ||
| </ul> | ||
|
|
||
| <script> | ||
| const button = document.querySelector("#hamburger-menu"); | ||
| const menu = document.querySelector("#menu"); | ||
|
|
||
| button.addEventListener("click", function () { | ||
| menu.style.display = | ||
| menu.style.display === "block" ? "none" : "block"; | ||
| }); | ||
| </script> --> | ||
| </header> | ||
| <!-- MAIN --> | ||
| <main class="main"> | ||
| <div class="main-container-up"> | ||
| <h1>Introducing Karma</h1> | ||
| <h2>Bring WiFi with you, everywhere you go.</h2> | ||
| <button class="up-button">Learn More</button> | ||
| </div> | ||
| <!-- --> | ||
| <div class="main-containe-down"> | ||
| <h1 class="down-h1">Everyone needs a little Karma.</h1> | ||
| <div class="icons"> | ||
| <div class="icon-1"> | ||
| <img src="./img/icon-devices.svg" alt="" width="130px" /> | ||
| <h3>Internet for all devices</h3> | ||
| </div> | ||
| <div class="icon-2"> | ||
| <img src="./img/icon-coffee.svg" alt="" width="130px" /> | ||
| <h3>Boost your productivity</h3> | ||
| </div> | ||
| <div class="icon-3"> | ||
| <img src="./img/icon-refill.svg" alt="" width="130px" /> | ||
| <h3>Pay as You Go</h3> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div class="line"></div> | ||
| </main> | ||
| <!-- FOOTER --> | ||
| <footer class="footer"> | ||
| <p><strong>Join us on</strong></p> | ||
| <div class="social-media-icons"> | ||
| <img | ||
| src="./img/twitter-icon.svg" | ||
| alt="twitter icon" | ||
| class="social_media_icon" | ||
| /> | ||
| <img | ||
| src="./img/facebook-icon.svg" | ||
| alt="facebook icon" | ||
| class="social_media_icon" | ||
| /> | ||
| <img | ||
| src="./img/instagram-icon.svg" | ||
| alt="instagram icon" | ||
| class="social_media_icon" | ||
| /> | ||
| </div> | ||
| <p style="color: rgb(199, 198, 198)">Karma mobility, inc.</p> | ||
| </footer> | ||
| </body> | ||
| </html> | ||
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.
please try to use more semantic tags. instead of div tag , you can use section tag.