-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Create contact page and update style
- Loading branch information
1 parent
839cb29
commit 98956ae
Showing
6 changed files
with
166 additions
and
13 deletions.
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 |
|---|---|---|
| @@ -1,14 +1,14 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.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=Syne:[email protected]&display=swap" rel="stylesheet"> | ||
| <link rel="stylesheet" href="./styles.css"> | ||
| <link rel="stylesheet" href="./about.css"> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <title>About Marketing Media</title> | ||
| </head> | ||
| <body> | ||
|
|
@@ -91,7 +91,7 @@ <h4>COMPANY</h4> | |
| </div> | ||
| <div class="site-col"> | ||
| <h4>HELP</h4> | ||
| <a href="#">Contact</a> | ||
| <a href="./contact.html">Contact</a> | ||
| <a href="#">FAQs</a> | ||
| </div> | ||
| </div> | ||
|
|
@@ -105,7 +105,7 @@ <h4>HELP</h4> | |
| <li><a href="#"><i class="fa-brands fa-instagram"></i></a></li> | ||
| </ul> | ||
| </div> | ||
| <a href="#"> Made by ChardayDevs 2024</a> | ||
| <a href="https://github.com/chardayneal" target="_blank"> Made by ChardayDevs 2024</a> | ||
| </section> | ||
| </footer> | ||
| </body> | ||
|
|
||
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,56 @@ | ||
| /* ----- CONTACT ------ */ | ||
|
|
||
| .contact { | ||
| width: 90%; | ||
| margin: 5rem auto 2rem; | ||
| } | ||
| .contact-content { | ||
| display: flex; | ||
| justify-content: space-between; | ||
| } | ||
| .title { | ||
| width: 35%; | ||
|
|
||
| } | ||
| .contact-form { | ||
| display: flex; | ||
| flex-direction: column; | ||
| justify-content: space-between; | ||
| flex: 1; | ||
| gap: 1rem; | ||
| } | ||
|
|
||
| form { | ||
| width: 100%; | ||
| flex: 1; | ||
| display: flex; | ||
| flex-direction: column; | ||
| } | ||
|
|
||
| form .name-info { | ||
| width: 100%; | ||
| display: flex; | ||
| justify-content: space-between; | ||
| gap: 1rem; | ||
| } | ||
| .name-info input { | ||
| flex: 1; | ||
| } | ||
|
|
||
| form #email, | ||
| form #message { | ||
| width: 100%; | ||
| box-sizing: border-box; | ||
| } | ||
|
|
||
| /* ----- MAP ------ */ | ||
| .map { | ||
| width: 90%; | ||
| margin: 1rem auto; | ||
| } | ||
|
|
||
| iframe { | ||
| width: 100%; | ||
| height: 600px; | ||
| margin: 1rem auto; | ||
| } |
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,95 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.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=Syne:[email protected]&display=swap" rel="stylesheet"> | ||
| <link rel="stylesheet" href="./styles.css"> | ||
| <link rel="stylesheet" href="./contact.css"> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <title>Marketing Media, Inc</title> | ||
| </head> | ||
| <body> | ||
|
|
||
| <!-- HEADER --> | ||
|
|
||
| <header> | ||
| <div class="header-left"><a href="./index.html" class="logo">MARKETING MEDIA, INC</a></div> | ||
| <nav class="nav-links"> | ||
| <ul> | ||
| <li><a href="./about.html">ABOUT</a></li> | ||
| <li><a href="./services.html">SERVICES</a></li> | ||
| </ul> | ||
| </nav> | ||
| <div class="header-right"> | ||
| <ul class="social-links"> | ||
| <li><a href="#"><i class="fa-brands fa-facebook"></i></a></li> | ||
| <li><a href="#"><i class="fa-brands fa-instagram"></i></a></li> | ||
| </ul> | ||
| <button class="style-btn">GET STARTED</button> | ||
| </div> | ||
| </header> | ||
|
|
||
| <main> | ||
| <section class="contact"> | ||
| <div class="contact-content"> | ||
| <div class="title"><h2>CONTACT US</h2></div> | ||
| <div class="contact-form"> | ||
| <p>Welcome to a world of limitless possibilities, where the journey is as exhilarating as the destination, and where every moment is an opportunity to make your mark on the canvas of existence. We look forward to providing top quality to our clients because you deserve it. Send us an email and let us know how we can best meet your needs.</p> | ||
| <form action=""> | ||
| <div class="name-info"> | ||
| <input class="text" id="first-name" type="text" placeholder="First name *" required> | ||
| <input class="text" id="last-name" type="text" placeholder="Last name *" required> | ||
| </div> | ||
| <input class="text" id="email" type="email" placeholder="Email *" required> | ||
| <textarea class="text" id="message" name="message" >Message</textarea> | ||
| <input class="style-btn" type="submit" value="SUBMIT"> | ||
| </form> | ||
| </div> | ||
| </div> | ||
| </section> | ||
| <section class="map"> | ||
| <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d12689.24997880098!2d-121.49998641687147!3d38.58068632782945!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x809ac672b28397f9%3A0x921f6aaa74197fdb!2sSacramento%2C%20CA!5e0!3m2!1sen!2sus!4v1718209611950!5m2!1sen!2sus" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe> | ||
| </section> | ||
| </main> | ||
|
|
||
| <footer> | ||
| <section class="footer-content"> | ||
| <div class="footer-txt"> | ||
| <h2>MARKETING <br> MEDIA, INC</h2> | ||
| <button class="style-btn">CONTACT US</button> | ||
| </div> | ||
| <div class="site-links"> | ||
| <div class="site-col"> | ||
| <h4>RESOURCES</h4> | ||
| <a href="#">Blog Title</a> | ||
| <a href="#">Blog Title</a> | ||
| <a href="#">Blog Title</a> | ||
| </div> | ||
| <div class="site-col"> | ||
| <h4>COMPANY</h4> | ||
| <a href="./about.html">About</a> | ||
| </div> | ||
| <div class="site-col"> | ||
| <h4>HELP</h4> | ||
| <a href="#">Contact</a> | ||
| <a href="#">FAQs</a> | ||
| </div> | ||
| </div> | ||
| </section> | ||
| <section class="footer-links"> | ||
| <div class="nav-links"> | ||
| <ul> | ||
| <li><a href="./about.html">ABOUT</a></li> | ||
| <li><a href="./services.html">SERVICES</a></li> | ||
| <li><a href="#"><i class="fa-brands fa-facebook"></i></a></li> | ||
| <li><a href="#"><i class="fa-brands fa-instagram"></i></a></li> | ||
| </ul> | ||
| </div> | ||
| <a href="https://github.com/chardayneal" target="_blank"> Made by ChardayDevs 2024</a> | ||
| </section> | ||
| </footer> | ||
| </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
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