-
-
Notifications
You must be signed in to change notification settings - Fork 456
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
Patch3 #1051
Closed
Closed
Patch3 #1051
Changes from all commits
Commits
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
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.
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.
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 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,157 @@ | ||
| *{ | ||
| margin: 0; | ||
| padding: 0; | ||
| box-sizing: border-box; | ||
| scroll-behavior: smooth; | ||
| } | ||
| body { | ||
| font-family: 'poppins', sans-serif; | ||
| color: #171a20; | ||
|
|
||
| } | ||
|
|
||
| .desktop { | ||
| display: none; | ||
| } | ||
|
|
||
| @media (min-width: 1200px) { | ||
| .desktop { | ||
| display: initial; | ||
| } | ||
| } | ||
|
|
||
| header { | ||
| display: grid; | ||
| grid-template-columns: auto 1fr auto; | ||
| padding: 5px 10px; | ||
| position: fixed; | ||
| top: 0; | ||
| z-index: 2; | ||
| width: 100%; | ||
| font-weight: 500; | ||
| } | ||
|
|
||
| a.logo { | ||
| height: 12px; | ||
| width: 100px; | ||
| color: inherit; | ||
| } | ||
|
|
||
| header a { | ||
| color: inherit; | ||
| } | ||
|
|
||
| header nav a { | ||
| text-decoration: none; | ||
| padding: 5px 10px; | ||
| } | ||
|
|
||
| header nav.center { | ||
| text-align: center; | ||
| } | ||
|
|
||
| header nav.right{ | ||
| text-align: end; | ||
| } | ||
|
|
||
| section{ | ||
| height: 100vh; | ||
| background-size: cover; | ||
| background-position: center center; | ||
| } | ||
|
|
||
| section .content{ | ||
| width: 100%; | ||
| height: 100vh; | ||
| padding-top: 15vh; | ||
| padding-bottom: 15vh; | ||
| text-align: center; | ||
| display: grid; | ||
| grid-template-rows: min-content auto min-content; | ||
| } | ||
|
|
||
| section h1{ | ||
| font-size: 3rem; | ||
| } | ||
|
|
||
| section a{ | ||
| color: inherit; | ||
| } | ||
|
|
||
| section .buttons a{ | ||
| display: block; | ||
| background-color: #eee; | ||
| color: inherit; | ||
| border-radius: 25px; | ||
| padding: 12px 50px; | ||
| text-transform: uppercase; | ||
| text-decoration: none; | ||
| font-size: 12px; | ||
| font-weight: 500; | ||
| } | ||
|
|
||
| section .buttons a:first-child{ | ||
| background-color: #222; | ||
| color: #fff; | ||
| } | ||
|
|
||
| section .buttons{ | ||
| display: grid; | ||
| row-gap: 20px; | ||
| } | ||
| @media (min-width: 768px) { | ||
| section .buttons{ | ||
| max-width: 640px; | ||
| margin: 0 auto; | ||
| grid-template-columns: 1fr 1fr; | ||
| column-gap: 20px; | ||
| } | ||
| } | ||
|
|
||
| aside{ | ||
| position: fixed; | ||
| transition: right .4s ease-in-out; | ||
| right: -320px; | ||
| width: 320px; | ||
| height: 100vh; | ||
| background-color: white; | ||
| padding: 80px 30px; | ||
| z-index: 4; | ||
| font-weight: 500; | ||
| } | ||
|
|
||
| aside.active{ | ||
| right: 0; | ||
| } | ||
|
|
||
| aside a{ | ||
| display: block; | ||
| color: inherit; | ||
| text-decoration: none; | ||
| padding: 8px 0; | ||
| font-size: 15px; | ||
| } | ||
|
|
||
| aside button.close{ | ||
| position: absolute; | ||
| top: 10px; | ||
| right: 10px; | ||
| border: none; | ||
| font-size: 30px; | ||
| padding: 10px; | ||
| background-color: transparent; | ||
| font-family: sans-serif; | ||
| cursor: pointer; | ||
| } | ||
|
|
||
| .backdrop{ | ||
| display: none; | ||
| position: fixed; | ||
| inset: 0; | ||
| background-color: rgba(0, 0, 0, .35); | ||
| backdrop-filter: blur(5px); | ||
| } | ||
|
|
||
| .backdrop.active{ | ||
| display: block; | ||
| } |
This file contains 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,138 @@ | ||
| <html lang="en"> | ||
|
|
||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <link rel="stylesheet" href="tesla.css"> | ||
| <link rel="preconnect" href="https://fonts.googleapis.com"> | ||
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | ||
| <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap" rel="stylesheet"> | ||
| <title>Electric Cars, Solar Clean Energy</title> | ||
| <link rel="shortcut icon" href="https://pngimg.com/uploads/tesla_logo/tesla_logo_PNG19.png" type="image/x-icon"> | ||
| </head> | ||
|
|
||
| <body> | ||
| <header> | ||
| <a href="" class="logo"> | ||
| <svg class="tds-icon tds-icon-logo-wordmark tds-site-logo-icon" viewBox="0 0 342 35" | ||
| xmlns="http://www.w3.org/2000/svg"> | ||
| <path | ||
| d="M0 .1a9.7 9.7 0 0 0 7 7h11l.5.1v27.6h6.8V7.3L26 7h11a9.8 9.8 0 0 0 7-7H0zm238.6 0h-6.8v34.8H263a9.7 9.7 0 0 0 6-6.8h-30.3V0zm-52.3 6.8c3.6-1 6.6-3.8 7.4-6.9l-38.1.1v20.6h31.1v7.2h-24.4a13.6 13.6 0 0 0-8.7 7h39.9v-21h-31.2v-7h24zm116.2 28h6.7v-14h24.6v14h6.7v-21h-38zM85.3 7h26a9.6 9.6 0 0 0 7.1-7H78.3a9.6 9.6 0 0 0 7 7zm0 13.8h26a9.6 9.6 0 0 0 7.1-7H78.3a9.6 9.6 0 0 0 7 7zm0 14.1h26a9.6 9.6 0 0 0 7.1-7H78.3a9.6 9.6 0 0 0 7 7zM308.5 7h26a9.6 9.6 0 0 0 7-7h-40a9.6 9.6 0 0 0 7 7z" | ||
| fill="currentColor"></path> | ||
| </svg> | ||
| </a> | ||
| <nav class="center desktop"> | ||
| <a href="im">Model S</a> | ||
| <a href="">Model 3</a> | ||
| <a href="">Model X</a> | ||
| <a href="">Model Y</a> | ||
| <a href="">Solar Roof</a> | ||
| <a href="">Solar Panels</a> | ||
| </nav> | ||
| <nav class="right"> | ||
| <a href="" class="desktop">Shop</a> | ||
| <a href="" class="desktop">Account</a> | ||
| <a href="" id="menubtn">Menu</a> | ||
| </nav> | ||
| </header> | ||
| <div class="backdrop"></div> | ||
| <aside> | ||
| <button class="close">×</button> | ||
| <a href="">Model S</a> | ||
| <a href="">Model 3</a> | ||
| <a href="">Model X</a> | ||
| <a href="">Model Y</a> | ||
| <a href="">Solar Roof</a> | ||
| <a href="">Solar Panels</a> | ||
| <a href="">Powerwall</a> | ||
| <a href="">Existing Inventory</a> | ||
| <a href="">Used Inventory</a> | ||
| <a href="">Demo Drive</a> | ||
| <a href="">Fleet</a> | ||
| <a href="">Commercial Energy</a> | ||
| <a href="">Utilities</a> | ||
| <a href="">Charging</a> | ||
| <a href="">Careers</a> | ||
| <a href="">Find Us</a> | ||
| <a href="">Events</a> | ||
| <a href="">Investor Relations</a> | ||
| <a href="">Shop</a> | ||
| <a href="">Account</a> | ||
| </aside> | ||
|
|
||
| <section style="background-image: url(img/model-3.jpg);"> | ||
| <div class="content"> | ||
| <h1>Model 3</h1> | ||
| <p>Order online for <a href="">Touchless Delivery</a></p> | ||
| <div class="buttons"> | ||
| <a href="">Custon order</a> | ||
| <a href="">Exisiting Inventory</a> | ||
| </div> | ||
| </div> | ||
| </section> | ||
| <section style="background-image: url(img/model-y.jpg);"> | ||
| <div class="content"> | ||
| <h1>Model 3</h1> | ||
| <p>Order online for <a href="">Touchless Delivery</a></p> | ||
| <div class="buttons"> | ||
| <a href="">Custon order</a> | ||
| <a href="">Exisiting Inventory</a> | ||
| </div> | ||
| </div> | ||
| </section> | ||
| <section style="background-image: url(img/model-s.jpg);"> | ||
| <div class="content"> | ||
| <h1>Model 3</h1> | ||
| <p>Order online for <a href="">Touchless Delivery</a></p> | ||
| <div class="buttons"> | ||
| <a href="">Custon order</a> | ||
| <a href="">Exisiting Inventory</a> | ||
| </div> | ||
| </div> | ||
| </section> | ||
| <section style="background-image: url(img/model-x.jpg);"> | ||
| <div class="content"> | ||
| <h1>Model 3</h1> | ||
| <p>Order online for <a href="">Touchless Delivery</a></p> | ||
| <div class="buttons"> | ||
| <a href="">Custon order</a> | ||
| <a href="">Exisiting Inventory</a> | ||
| </div> | ||
| </div> | ||
| </section> | ||
| <section style="background-image: url(img/solarpanels.jpg);"> | ||
| <div class="content"> | ||
| <h1>Model 3</h1> | ||
| <p>Order online for <a href="">Touchless Delivery</a></p> | ||
| <div class="buttons"> | ||
| <a href="">Custon order</a> | ||
| <a href="">Exisiting Inventory</a> | ||
| </div> | ||
| </div> | ||
| </section> | ||
| <section style="background-image: url(img/roof.jpg);"> | ||
| <div class="content"> | ||
| <h1>Model 3</h1> | ||
| <p>Order online for <a href="">Touchless Delivery</a></p> | ||
| <div class="buttons"> | ||
| <a href="">Custon order</a> | ||
| <a href="">Exisiting Inventory</a> | ||
| </div> | ||
| </div> | ||
| </section> | ||
| <section style="background-image: url(img/accessories.jpg);"> | ||
| <div class="content"> | ||
| <h1>Model 3</h1> | ||
| <p>Order online for <a href="">Touchless Delivery</a></p> | ||
| <div class="buttons"> | ||
| <a href="">Custon order</a> | ||
| <a href="">Exisiting Inventory</a> | ||
| </div> | ||
| </div> | ||
| </section> | ||
|
|
||
| <script src="tesla.js"></script> | ||
| </body> | ||
|
|
||
| </html> | ||
This file contains 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,22 @@ | ||
| const openMenu = () =>{ | ||
| document.querySelector('.backdrop').className = 'backdrop active'; | ||
| document.querySelector('aside').className = 'active'; | ||
| } | ||
| const closeMenu = () =>{ | ||
| document.querySelector('.backdrop').className = 'backdrop'; | ||
| document.querySelector('aside').className = ''; | ||
| } | ||
|
|
||
| document.getElementById('menubtn').onclick = e =>{ | ||
| e.preventDefault(); | ||
| openMenu(); | ||
| } | ||
|
|
||
| document.querySelector('aside button.close').onclick = e => { | ||
| closeMenu(); | ||
| } | ||
|
|
||
| document.querySelector('.backdrop').onclick = e => { | ||
| closeMenu(); | ||
| } | ||
|
|
This file contains 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 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,22 @@ | ||
| const openMenu = () =>{ | ||
| document.querySelector('.backdrop').className = 'backdrop active'; | ||
| document.querySelector('aside').className = 'active'; | ||
| } | ||
| const closeMenu = () =>{ | ||
| document.querySelector('.backdrop').className = 'backdrop'; | ||
| document.querySelector('aside').className = ''; | ||
| } | ||
|
|
||
| document.getElementById('menubtn').onclick = e =>{ | ||
| e.preventDefault(); | ||
| openMenu(); | ||
| } | ||
|
|
||
| document.querySelector('aside button.close').onclick = e => { | ||
| closeMenu(); | ||
| } | ||
|
|
||
| document.querySelector('.backdrop').onclick = e => { | ||
| closeMenu(); | ||
| } | ||
|
|
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.
To ensure a consistent user experience, it is important to avoid confusing users when they click on a link and encounter an error. Therefore, it would be beneficial to make the linking consistent.
Additionally, it would greatly enhance user convenience if you could implement internal linking within the sections of the website from the navbar. This functionality should be available on both mobile and desktop versions.