Add files via upload

AlexO-S · Mar 19, 2024 · 86df4fc · 86df4fc
commit 86df4fc
Show file tree

Hide file tree

Showing 9 changed files with 1,696 additions and 0 deletions.
diff --git a/Marketing Images/ABOUT/team1.jpg b/Marketing Images/ABOUT/team1.jpg
diff --git a/Marketing Images/ABOUT/team2.jpg b/Marketing Images/ABOUT/team2.jpg
diff --git a/Marketing Images/ABOUT/team3.jpg b/Marketing Images/ABOUT/team3.jpg
diff --git a/Marketing Images/HOME/coffee.jpg b/Marketing Images/HOME/coffee.jpg
diff --git a/Marketing Images/HOME/sound.jpg b/Marketing Images/HOME/sound.jpg
diff --git a/Marketing Images/HOME/workbench.jpg b/Marketing Images/HOME/workbench.jpg
diff --git a/Marketing Images/ICON/sound (1).jpg b/Marketing Images/ICON/sound (1).jpg
diff --git a/index.html b/index.html
@@ -0,0 +1,315 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <title>Marketing</title>
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/js/all.min.js" integrity="sha512-GWzVrcGlo0TxTRvz9ttioyYJ+Wwk9Ck0G81D+eO63BaqHaJ3YZX9wuqjwgfcV/MrB2PhaVX9DkYVhbFpStnqpQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+
+    <link rel="stylesheet" href="style.css">
+
+    <link rel="shortcut icon" href="Marketing Images/ICON/sound (1).jpg" type="image/x-icon">
+</head>
+
+<body>
+    <!-- HEADER SECTION -->
+    <section id="nav-bar">
+        <header class="nan">
+            <ul class="nav-links">
+                <li class="home"> <a href="#home">Home</a></li>
+
+                <li class="plan"> <a href="#pricing-plan">Plans</a></li>
+
+                <li class="about"> <a href="#about">About</a></li>
+
+                <li class="contact"> <a href="#contact">Contact</a></li>
+            </ul>
+        </header>
+    </section>
+    <!--  -->
+
+    <!-- HOME SECTION -->
+    <section id="home">
+
+        <div class="marketing-by">
+            <h1>MARKETING</h1>
+
+            <p>Template by AlexO-S</p>
+        </div>
+
+        <div class="image-and-text">
+            <p>Blorum pipsum</p>
+
+            <img src="Marketing Images/HOME/sound.jpg" alt="Sound"> 
+        </div>
+
+        <div class="slide-bar"> 
+            <div class="left-right-button">
+                <a href="#"><i class="fa-solid fa-arrow-left" style="color: gray;"></i></a>
+
+                <a href="#"><i class="fa-solid fa-arrow-right" style="color: gray;"></i></a>
+
+            </div>
+        </div>
+
+        <div class="what-we-offer">
+            <p class="offer">What We Offer</p>
+            <p class="line"></p>
+        </div>
+
+
+        <div class="dbcp-all">
+
+            <div class="design">
+                <p class="job">Design</p>
+
+                <p class="description">Phasellus eget enim eu lectus faucibus vestibulum. Suspendisse sodales pellentesque elementum.</p>
+            </div>
+
+            <div class="branding">
+                <p class="job">Branding</p>
+
+                <p class="description">Phasellus eget enim eu lectus faucibus vestibulum. Suspendisse sodales pellentesque elementum.</p>
+            </div>
+
+            <div class="consultation">
+                <p class="job">Consultation</p>
+
+                <p class="description">Phasellus eget enim eu lectus faucibus vestibulum. Suspendisse sodales pellentesque elementum.</p>
+            </div>
+
+            <div class="promises">
+                <p class="job">Promises</p>
+
+                <p class="description">Phasellus eget enim eu lectus faucibus vestibulum. Suspendisse sodales pellentesque elementum.</p>
+            </div>
+
+        </div>
+
+    </section>
+    <!--  -->
+
+
+    <!-- PLAN SECTION -->
+    <section id="pricing-plan">
+        <br>
+        <div class="pricing-plans">
+            <p class="pricing">Pricing Plans</p>
+
+            <p class="choose">Choose a pricing plan that fits your needs.</p>
+        </div>
+
+
+        <div class="plans">
+            <div class="basic-plan">
+                <p class="basic">Basic</p>
+
+                <p class="gb10-storage" ><b>10GB</b>  Storage</p>
+
+                <p class="emails10"><b>10</b> Emails</p>
+
+                <p class="domains10"><b>10</b> Domains</p>
+
+                <p class="endless-support1"><b>Endless</b> Support</p>
+
+                <div class="per10-month">
+                    <p class="dollar10">$ 10</p>
+
+                    <p class="per-month1">per month</p>
+                </div>
+
+                <div class="button1">
+                    <a href="https://www.facebook.com/ea.toons" target="_blank"><button>Sign Up</button></a>
+                </div>
+
+            </div>
+
+
+            <div class="pro-plan">
+                <p class="pro">Pro</p>
+
+                <p class="gb25-storage"><b>25GB</b>  Storage</p>
+
+                <p class="emails25"><b>25</b> Emails</p>
+
+                <p class="domains25"><b>25</b> Domains</p>
+
+                <p class="endless-support2"><b>Endless</b> Support</p>
+
+                <div class="per25-month">
+                    <p class="dollar25">$ 25</p>
+                    <p class="per-month2">per month</p>
+                </div>
+
+                <div class="button2">
+                    <a href="https://www.facebook.com/ea.toons" target="_blank"><button>Sign Up</button></a>
+                </div>
+
+            </div>
+
+
+            <div class="premium-plan">
+                <p class="premium">Premium</p>
+
+                <p class="gb50-storage"><b>50GB</b>  Storage</p>
+
+                <p class="emails50"><b>50</b> Emails</p>
+
+                <p class="domains50"><b>50</b> Domains</p>
+
+                <p class="endless-support3"><b>Endless</b> Support</p>
+
+                <div class="per50-month">
+                    <p class="dollar50">$ 50</p>
+
+                    <p class="per-month3">per month</p>
+                </div>
+
+                <div class="button3">
+                    <a href="https://www.facebook.com/ea.toons" target="_blank"><button>Sign Up</button></a>
+                </div>
+
+            </div>
+
+        </div>
+
+    </section>
+
+    <!--  -->
+
+
+    <!-- ABOUT SECTION -->
+    <section id="about">
+        <br>
+        <div class="who-we-are">
+            <p class="we-are">Who We Are</p>
+            <p class="line"></p>
+        </div>
+
+
+        <div class="profiles">
+
+            <div class="jane-profile">
+                <div class="jane-image"><img src="Marketing Images/ABOUT/team1.jpg" alt="Jane Doe"></div>
+
+                <div class="jane-about">
+                    <p class="name">Jane Doe</p>
+
+                    <p class="position">CEO & Founder</p>
+
+                    <p class="info">Phasellus eget enim eu lectus faucibus vestibulum. Suspendisse sodales pellentesque elementum.</p>
+
+                    <a href="mailto:[email protected]" target="_blank"><button>Contact</button></a>
+                </div>
+            </div>
+
+
+            <div class="mike-profile">
+                <div class="mike-image"><img src="Marketing Images/ABOUT/team2.jpg" alt="Mike Ross"></div>
+
+                <div class="mike-about">
+                    <p class="name">Mike Ross</p>
+
+                    <p class="position">Art Director</p>
+
+                    <p class="info">Phasellus eget enim eu lectus faucibus vestibulum. Suspendisse sodales pellentesque elementum.</p>
+
+                    <a href="mailto:[email protected]" target="_blank"><button>Contact</button></a>
+                </div>
+            </div>
+
+
+            <div class="john-profile">
+                <div class="john-image"><img src="Marketing Images/ABOUT/team3.jpg" alt="Jane Doe"></div>
+
+                <div class="john-about">
+                    <p class="name">John Doe</p>
+
+                    <p class="position">Designer</p>
+
+                    <p class="info">Phasellus eget enim eu lectus faucibus vestibulum. Suspendisse sodales pellentesque elementum.</p>
+
+                    <a href="mailto:[email protected]" target="_blank"><button>Contact</button></a>
+                </div>
+            </div>
+            <mail-to></mail-to>
+
+        </div>
+    </section>
+    <!--  -->
+
+
+    <!-- CONTACT SECTION -->
+    <section id="contact">
+        <br>
+        <div class="contact-us-line">
+            <p class="contact-us">Contact Us</p>
+            <p class="line"></p>
+        </div>
+
+
+        <div class="contact-info-send">
+            <form action="">
+                <label class="name" for="name">Name</label> 
+                <input type="text" id="name" name="name" required>
+                <br>
+
+                <label class="email" for="email">Email</label>
+                <input type="email" id="email" name="email" required>
+                <br>
+
+                <label class="subject" for="subject">Subject</label>
+                <input type="text" 
+                id="subject"
+                name="subject" required>
+                <br>
+
+                <label class="message" for="message">Message</label>
+                <input type="text" id="message"
+                name="message" required>
+                <br>
+
+                <input class="button"type="Submit" value="Send">
+            </form>
+        </div>
+    </section>
+    <!--  -->
+
+
+    <!-- FOOTER SECTION -->
+    <section id="footer">
+        <div class="footer">
+
+            <p class="foot
+            ">Footer</p>
+
+            <p class="to-the-top"><a href="#home"> <i class="fa-solid fa-arrow-up fa-beat"></i> <span>To the top</span></a></p>
+
+            <div class="footer-links">
+                <p class="social-media">
+                   <a href="https://www.facebook.com/ea.toons" target:_blank > <i class="fa-brands fa-square-facebook" style="color: black;"></i></a> 
+
+                   <a href="https://www.instagram.com/ea.toons" target:_blank > <i class="fa-brands fa-instagram" style="color: black;"></i></a>
+
+                   <a class="snapchat" href="https://www.snapchat.com/add/alex_alex151" target:_blank > <i class="fa-brands fa-snapchat" style="color: white;"></i></a>
+
+                   <a href="https://www.youtube.com/@EAtoons" target:_blank ><i class="fa-brands fa-pinterest-p" style="color: black;"></i></a>
+
+                   <a href="https://www.youtube.com/@EAtoons" target:_blank><i class="fa-brands fa-twitter" style="color: black;"></i></a>
+
+                   <a href="https://www.youtube.com/@EAtoons" target:_blank><i class="fa-brands fa-linkedin-in" style="color: black;"></i></a>
+                </p>
+
+                <p class="powered">Powered by <a href="https://www.github.com/AlexO-S">AlexO-S</a></p>
+
+            </div>
+
+        </div>
+
+    </section>
+    <!--  -->
+
+</body>
+</html>