-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
a0c5996
commit 6d5eec9
Showing
6 changed files
with
277 additions
and
1 deletion.
There are no files selected for viewing
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,161 @@ | ||
| /* Reset styles */ | ||
| * { | ||
| margin: 0; | ||
| padding: 0; | ||
| box-sizing: border-box; /* Added for better box model handling */ | ||
| } | ||
|
|
||
| /* Body styling */ | ||
| body { | ||
| background-color: rgb(20, 20, 20); /* Dark background */ | ||
| color: white; /* Default text color */ | ||
| font-family: Arial, sans-serif; /* General font */ | ||
| } | ||
|
|
||
| /* Header styling */ | ||
| header { | ||
| background-color: #1a1a1a; /* Dark header */ | ||
| padding: 15px 30px; | ||
| } | ||
|
|
||
| /* Navbar styling */ | ||
| .navbar { | ||
| display: flex; | ||
| justify-content: space-between; | ||
| align-items: center; | ||
| position: sticky; | ||
| top: 0; | ||
| z-index: 1000; | ||
| } | ||
|
|
||
| /* Logo styling */ | ||
| .logoContent img { | ||
| width: 60px; /* Logo size */ | ||
| } | ||
|
|
||
| /* Links styling */ | ||
| .links { | ||
| display: flex; | ||
| gap: 20px; | ||
| } | ||
|
|
||
| .links a { | ||
| text-decoration: none; | ||
| color: rgb(255, 255, 255); | ||
| padding: 10px 20px; | ||
| transition: background-color 0.3s ease-in-out, color 0.3s ease; | ||
| border-radius: 5px; | ||
| font-size: 16px; | ||
| } | ||
|
|
||
| .links a:hover { | ||
| background-color: #333; /* Hover effect */ | ||
| color: rgb(24, 224, 227); | ||
| box-shadow: 0 0 10px rgba(24, 224, 227, 0.5); | ||
| } | ||
|
|
||
| /* About section styling */ | ||
| .about-section { | ||
| padding: 40px 20px; | ||
| text-align: center; /* Centering the content */ | ||
| } | ||
|
|
||
| .about-section h1 { | ||
| font-size: 2.5rem; | ||
| margin-bottom: 20px; /* Spacing below the title */ | ||
| } | ||
|
|
||
| .about-section p { | ||
| font-size: 1.2rem; | ||
| line-height: 1.6; /* Better readability */ | ||
| margin: 20px auto; /* Center the paragraph with some margin */ | ||
| max-width: 800px; /* Limit the width of the paragraph */ | ||
| } | ||
|
|
||
| /* Image gallery */ | ||
| .about-images { | ||
| display: flex; | ||
| justify-content: center; | ||
| flex-wrap: wrap; | ||
| margin-top: 40px; | ||
| } | ||
|
|
||
| .about-images img { | ||
| width: 300px; /* Fixed width */ | ||
| height: 200px; /* Fixed height */ | ||
| object-fit: cover; /* Ensures images cover the area without distortion */ | ||
| margin: 10px; | ||
| border-radius: 10px; /* Rounded corners for images */ | ||
| transition: transform 0.3s ease; /* Animation effect on hover */ | ||
| } | ||
|
|
||
| .about-images img:hover { | ||
| transform: scale(1.05); /* Slightly enlarges the image on hover */ | ||
| } | ||
|
|
||
| /* Mission and Values sections */ | ||
| .mission-section, .values-section { | ||
| margin-top: 40px; /* Spacing above each section */ | ||
| text-align: left; /* Align text to the left */ | ||
| max-width: 800px; /* Limit the width of the sections */ | ||
| margin-left: auto; /* Center the sections */ | ||
| margin-right: auto; /* Center the sections */ | ||
| } | ||
|
|
||
| .values-section ul { | ||
| list-style: none; /* Remove bullets */ | ||
| padding-left: 0; /* Remove left padding */ | ||
| } | ||
|
|
||
| .values-section li { | ||
| margin: 5px 0; /* Spacing between list items */ | ||
| animation: fadeIn 0.5s ease forwards; /* Add fade-in animation */ | ||
| } | ||
|
|
||
| /* Footer styling */ | ||
| footer { | ||
| background-color: rgb(11, 11, 11); | ||
| padding: 40px 20px; /* Increased padding for better spacing */ | ||
| color: white; | ||
| display: flex; | ||
| flex-wrap: wrap; | ||
| justify-content: space-between; | ||
| align-items: flex-start; | ||
| box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.5); | ||
| } | ||
|
|
||
| /* Container for footer sections */ | ||
| .end { | ||
| display: flex; | ||
| flex: 1; /* Allow the section to grow */ | ||
| justify-content: space-around; | ||
| align-items: flex-start; | ||
| flex-wrap: wrap; /* Allow wrapping on smaller screens */ | ||
| max-width: 1200px; /* Center the footer content */ | ||
| margin: 0 auto; /* Center alignment */ | ||
| } | ||
|
|
||
| /* Styling for each list */ | ||
| .end ul { | ||
| list-style: none; | ||
| padding: 0; | ||
| margin: 0 20px; /* Margin for spacing */ | ||
| width: 200px; /* Fixed width for consistency */ | ||
| } | ||
|
|
||
| /* Headings styling */ | ||
| h3 { | ||
| margin-bottom: 10px; /* Spacing below section headings */ | ||
| } | ||
|
|
||
| /* Animation */ | ||
| @keyframes fadeIn { | ||
| 0% { | ||
| opacity: 0; | ||
| transform: translateY(10px); /* Start slightly lower */ | ||
| } | ||
| 100% { | ||
| opacity: 1; | ||
| transform: translateY(0); /* End in original position */ | ||
| } | ||
| } |
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,115 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <title>About Us</title> | ||
| <link rel="stylesheet" href="about.css"> | ||
| <link rel="stylesheet" href="style.css"> | ||
| </head> | ||
| <body> | ||
| <header> | ||
| <nav class="navbar"> | ||
| <div class="logoContent"> | ||
| <img src="./images/Logo.png" alt="Audi Logo"> | ||
| </div> | ||
| <div class="links"> | ||
| <a href="index.html">Home</a> | ||
| <a href="about.html">About Us</a> | ||
| <a href="#">Products</a> | ||
| <a href="#">Contact Us</a> | ||
| </div> | ||
| </nav> | ||
| </header> | ||
|
|
||
| <section class="about-section"> | ||
| <h1>About Audi</h1> | ||
| <p>Audi is a renowned automobile manufacturer that specializes in high-performance luxury vehicles. Founded in 1909, Audi has established itself as a leader in innovation, design, and technology.</p> | ||
|
|
||
| <div class="about-images"> | ||
| <img src="./images/audi-history.jpg" alt="Audi History" class="about-image"> | ||
| <img src="./images/audi-innovation.jpg" alt="Audi Innovation" class="about-image"> | ||
| <img src="./images/audi-future.jpg" alt="Audi Future" class="about-image"> | ||
| </div> | ||
|
|
||
| <div class="about-description"> | ||
| <h2>Our Vision</h2> | ||
| <p>At Audi, we strive to create a sustainable future through advanced technology and electric mobility. Our commitment to quality and performance ensures that we deliver the best driving experience.</p> | ||
| </div> | ||
|
|
||
| <div class="mission-section"> | ||
| <h2>Our Mission</h2> | ||
| <p>To inspire and engage our customers through innovative solutions and unparalleled service. We aim to lead the automotive industry in sustainability and performance.</p> | ||
| </div> | ||
|
|
||
| <div class="values-section"> | ||
| <h2>Core Values</h2> | ||
| <ul> | ||
| <li>Innovation</li> | ||
| <li>Quality</li> | ||
| <li>Sustainability</li> | ||
| <li>Diversity & Inclusion</li> | ||
| <li>Customer Centricity</li> | ||
| </ul> | ||
| </div> | ||
| </section> | ||
|
|
||
| <footer class="foot"> | ||
| <div class="end"> | ||
| <ul class="explore"> | ||
| <h3>Explore</h3> | ||
| <li>Models</li> | ||
| <li>Audi Sport</li> | ||
| <li>What is e-tron®</li> | ||
| <li>SUV Models</li> | ||
| <li>Audi Experience</li> | ||
| <li>Inclusion & Diversity</li> | ||
| <li>Electric Models</li> | ||
| <li>Inside Audi</li> | ||
| <li>Subscribe to model updates</li> | ||
| </ul> | ||
| <ul class="shop"> | ||
| <h3>Shop</h3> | ||
| <li>Special Offers</li> | ||
| <li>Find a dealer</li> | ||
| <li>New inventory</li> | ||
| <li>Pre-owned inventory</li> | ||
| <li>Certified pre-owned</li> | ||
| </ul> | ||
| <ul class="buy"> | ||
| <h3>Buy</h3> | ||
| <li>Contact dealer</li> | ||
| <li>Trade-in value</li> | ||
| <li>Leasing</li> | ||
| <li>Financing</li> | ||
| <li>Apply for financing</li> | ||
| </ul> | ||
| <ul class="own"> | ||
| <h3>Owner</h3> | ||
| <li>myAudi</li> | ||
| <li>About myAudi</li> | ||
| <li>Audi Financial Services</li> | ||
| <li>Audi collection store</li> | ||
| <li>Accessories</li> | ||
| <li>Audi connect</li> | ||
| <li>Service and Parts</li> | ||
| <li>Roadside Assistance</li> | ||
| <li>In-Use Verification Program</li> | ||
| </ul> | ||
| <ul class="support"> | ||
| <h3>Support</h3> | ||
| <li>Contact Us</li> | ||
| <li>Help</li> | ||
| <li>About Audi</li> | ||
| <li>Careers</li> | ||
| <li>Newsroom</li> | ||
| <li>Emissions Modification Lookup</li> | ||
| <li>Accessibility</li> | ||
| <li>Recalls</li> | ||
| <li>INDUSTRY GUIDANCE FOR EMERGENCY RESPONDERS</li> | ||
| </ul> | ||
| </div> | ||
| </footer> | ||
| <script src="/script.js"></script> | ||
| </body> | ||
| </html> |
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