index.html

<!DOCTYPE html>
<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" />
    <title>YT Media</title>

    <!-- 
    - favicon link
  -->
    <link rel="shortcut icon" href="./favicon.svg" type="image/svg+xml" />

    <!-- 
    - custom css link
  -->
    <link rel="stylesheet" href="./assets/css/style.css" />

    <!-- 
    - google font link
  -->
    <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@300;400;500;600;700&display=swap"
      rel="stylesheet"
    />
  </head>

  <body id="top">
    <!-- 
    - #HEADER
  -->

    <header>
      <div class="container">
        <a href="#" class="logo">
          <img src="./assets/images/logo.png" alt="YT Media logo"/>
        </a>

        <div class="navbar-wrapper">
          <button class="navbar-menu-btn" data-navbar-toggle-btn>
            <ion-icon name="menu-outline"></ion-icon>
          </button>

          <nav class="navbar" data-navbar>
            <ul class="navbar-list">
              <li class="nav-item">
                <a href="#home" class="nav-link">Home</a>
              </li>

              <li class="nav-item">
                <a href="#about" class="nav-link">What we do</a>
              </li>

              <li class="nav-item">
                <a href="#features" class="nav-link">Why us?</a>
              </li>

              <li class="nav-item">
                <a href="#" class="nav-link">Our work</a>
              </li>

              <!-- <li class="nav-item">
              <a href="#contact" class="nav-link">Contact</a>
            </li> -->
            </ul>

            
            <a href="#contact"><button class="btn btn-primary">Contact us</button></a>
          </nav>
        </div>
      </div>
    </header>

    <main>
      <article>
        <!-- 
        - #HERO
      -->

        <section class="hero" id="home">
          <div class="container">
            <div class="hero-content">
              <h1 class="h1 hero-title">Your Social Media Sucess is our Priority</h1>

              <p class="hero-text">
                Boost Your Online Presence With YT Media  <br><b>Where Success Meets Simplicity</b>
              </p>

              <a href="#section-title"><button class="btn btn-primary">Get started</button></a>
            </div>

            <div class="hero-banner"></div>
          </div>

          <img src="./assets/images/bg.png" alt="shape" class="shape-content" />
        </section>

        <!-- 
        - #ABOUT
      -->

        <section class="about" id="about">
          <div class="container">
            <div class="about-top">
              <h2 class="h2 section-title" id="section-title">What we do</h2>

              <p class="section-text">
                Our Agency Creates And Manages Social Media Handles For You.
              </p>

              <ul class="about-list">
                <li>
                  <div class="about-card">
                    <div class="card-icon">
                      <ion-icon name="analytics-outline"></ion-icon>
                      

                    </div>

                    <h3 class="h3 card-title">Market Research</h3>

                    <p class="card-text">
                      We Analyze, You Succeed. Our data-driven market research fuels your social media strategy for impactful results.
                    </p>
                  </div>
                </li>

                <li>
                  <div class="about-card">
                    <div class="card-icon">
                      <ion-icon name="create-outline"></ion-icon>
                      <!-- <ion-icon name="chatbubbles-outline"></ion-icon> -->
                    </div>

                    <h3 class="h3 card-title">Content Creation</h3>

                    <p class="card-text">
                      Our creative content team develops compelling material that resonates with your audience, positioning you as an industry thought leader.
                    </p>
                  </div>
                </li>

                <li>
                  <div class="about-card">
                    <div class="card-icon">
                      <ion-icon name="videocam-outline"></ion-icon>
                      <!-- <ion-icon name=""></ion-icon> -->
                    </div>

                    <h3 class="h3 card-title">Video Editing</h3>

                  <p class="card-text">
                    Our Video Editing Service Brings Your Story to Life with Precision and Creativity.
                  </p>
                  </div>
                </li>

                <li>
                  <div class="about-card">
                    <div class="card-icon">
                      <ion-icon name="chatbubbles-outline"></ion-icon>  
                      
  
                    </div>
  
                    <h3 class="h3 card-title">Email Marketing</h3>
  
                    <p class="card-text">
                      "We create special email plans that do more than just land in your inbox. Our emails are personal, exciting, and help you connect with your customers.
                    </p>
                  </div>
                </li>

                <li>
                  <div class="about-card">
                    <div class="card-icon">
                      <ion-icon name="bar-chart-outline"></ion-icon>
                      <!-- <ion-icon name="2"></ion-icon> -->
  
                    </div>
  
                    <h3 class="h3 card-title">Google & Social Ads</h3>
  
                    <p class="card-text">
                      We'll make your ads stand out. We create scalable and profitable social ad campaigns that are engaging, personalized, targeted and measurable.
                    </p>
                  </div>
                </li>
  
                <li>
                  <div class="about-card">
                    <div class="card-icon">
                      <ion-icon name="rocket-outline"></ion-icon>
                      <!-- <ion-icon name=""></ion-icon> -->
                    </div>
  
                    <h3 class="h3 card-title">Socail Media Marketing</h3>
  
                    <p class="card-text">
                      We handle your social media, creating content to grow your online community and boost brand loyalty.
                    </p>
                  </div>
                </li>


              </ul>
            </div>
          </div>

            <div class="about-bottom">
              <figure class="about-bottom-banner">
                <img
                  src="./assets/images/about-banner.png"
                  alt="about banner"
                  class="about-banner"
                />
              </figure>

              <div class="about-bottom-content">
                <h2 class="h2 section-title">We’re obsessed with growth</h2>

                <p class="section-text">
                  We have an unwavering focus on increasing the size and reach
                  of your Social Media channel.
                </p>

               <!-- <button class="btn btn-secondary">Sign Up For Free</button>-->
              </div>
            </div>
          </div>
        </section>

        <!-- 
        - #FEATURES
      -->

      <section class="features" id="features">
        <div class="container">
          <h2 class="h2 section-title">Why Us?</h2>

          <p class="section-text">
            Our unique features that separate us from our competitors
          </p>

        <section class="features" id="features">
          <div class="container">
            <!-- <h2 class="h2 section-title">
              Guaranteed Results
            </h2>

            <p class="section-text">
              We guarantee that our efforts will result in a significant increase in views, subscribers and watch time.
            </p> -->

            <ul class="features-list">
              <li class="features-item">
                <figure class="features-item-banner">
                  <img
                    src="./assets/images/feature-1.png"
                    alt="feature banner"
                  />
                </figure>

                <div class="feature-item-content">
                  <h3 class="h2 item-title">Expert Guidance</h3>

                  <p class="item-text">
                    Our team provides expert guidance and advice every step of the way, ensuring your success.
                  </p>
                </div>
              </li>

              <li class="features-item">
                <figure class="features-item-banner">
                  <img
                    src="./assets/images/feature-2.png"
                    alt="feature banner"
                  />
                </figure>

                <div class="feature-item-content">
                  <h3 class="h2 item-title">
                    Customized Strategy
                  </h3>

                  <p class="item-text">
                    We work with you to develop a strategy that aligns with your goals and audience.
                  </p>
                </div>
              </li>
            </ul>
          </div>
        </section>

        <!-- 
        - #CTA
      -->

   <!--     <section class="cta">
          <div class="container">
            <div class="cta-card">
              <h3 class="cta-title">Sign Up For Free</h3>

              <p class="cta-text">Join now</p>

              <form action="" class="cta-form">
                <input
                  type="email"
                  name="email"
                  placeholder="Your email address"
                />

                <button type="submit" class="btn btn-secondary">Sign Up</button>
              </form>
            </div>
          </div>
        </section>-->

        <!-- 
        - #CONTACT
      -->

        <section class="contact" id="contact">
          <div class="container">
            <div class="contact-content">
              <h2 class="h2 contact-title">Let’s scale your brand, together</h2>

              <figure class="contact-banner">
                <img src="./assets/images/contact.png" alt="contact banner" />
              </figure>
            </div>

            <div class="contact-bottom">
            <form action="https://getform.io/f/9ab9e81a-90db-41f2-98da-6d13529376fc" method="POST" class="contact-form">
              <div class="input-wrapper">
                <label for="name" class="input-label">Name *</label>

                <input
                  type="text"
                  name="name"
                  id="name"
                  required
                  placeholder="Your Name"
                  class="input-field"
                />
              </div>

              <div class="input-wrapper">
                <label for="phone" class="input-label">Phone</label>

                <input
                  type="tel"
                  name="phone"
                  id="phone"
                  placeholder="Your Phone Number"
                  class="input-field"
                />
              </div>

              <div class="input-wrapper">
                <label for="email" class="input-label">Email Address *</label>

                <input
                  type="email"
                  name="email"
                  id="email"
                  required
                  placeholder="Your Email Address"
                  class="input-field"
                />
              </div>

              <div class="input-wrapper">
                <label for="message" class="input-label"
                  >How can we help? *</label
                >

                <textarea
                  name="message"
                  id="message"
                  placeholder="Type Description"
                  required
                  class="input-field"
                ></textarea>
              </div>

              <button type="submit" class="btn btn-primary">
                Send Message
              </button>
            </form>
          </div>
        </section>
      </article>
    </main>

    <!-- 
    - #FOOTER
  -->

    <footer>
      <div class="footer-top">
        <div class="container">
          <div class="footer-brand">
            <!-- <a href="#" class="logo">
              <img src="./assets/images/logo.png" alt="Funel logo" width="250" height="250"/>
            </a> -->

            <p class="footer-text"><b>Follow us on</b></p>

          <ul class="social-list">
            <li>
              <a href="https://instagram.com/ytmediatech" class="social-link">
                <ion-icon name="logo-instagram"></ion-icon>
              </a>
            </li>
          </ul>
          </div>

          <!-- <div class="footer-link-box">
            <ul class="footer-link-list">
              <li>
                <h3 class="h4 link-title">Company</h3>
              </li>

              <li>
                <a href="#" class="footer-link">About Us</a>
              </li>

              <li>
                <a href="#" class="footer-link">Features</a>
              </li>

              <li>
                <a href="#" class="footer-link">Pricing</a>
              </li>
            </ul>

            <ul class="footer-link-list">
              <li>
                <h3 class="h4 link-title">Products</h3>
              </li>

              <li>
                <a href="#" class="footer-link">Blog</a>
              </li>

              <li>
                <a href="#" class="footer-link">Help Center</a>
              </li>

              <li>
                <a href="#" class="footer-link">Contact</a>
              </li>
            </ul>

            <ul class="footer-link-list">
              <li>
                <h3 class="h4 link-title">Resources</h3>
              </li>

              <li>
                <a href="#" class="footer-link">FAQ’S</a>
              </li>

              <li>
                <a href="#" class="footer-link">Testimonial</a>
              </li>

              <li>
                <a href="#" class="footer-link">Terms & Conditions</a>
              </li>
            </ul>

            <ul class="footer-link-list">
              <li>
                <h3 class="h4 link-title">Relevent</h3>
              </li>

              <li>
                <a href="#" class="footer-link">Why</a>
              </li>

              <li>
                <a href="#" class="footer-link">Products</a>
              </li>

              <li>
                <a href="#" class="footer-link">Customers</a>
              </li>
            </ul>
          </div> -->
        </div>
      </div>

      <div class="footer-bottom">
        <p class="copyright">
          &copy; 2023 <a href="#">@ytmedia.tech</a> All right reserved
        </p>
      </div>
    </footer>

    <!-- 
    - #GO TO TOP
  -->

    <a href="#top" class="go-top active" data-go-top>
      <ion-icon name="chevron-up-outline"></ion-icon>
    </a>

    <!-- 
    - custom js link
  -->
    <script src="./assets/js/script.js"></script>

    <!-- 
    - ionicon link
  -->
    <script
      type="module"
      src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"
    ></script>
    <script
      nomodule
      src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"
    ></script>
  </body>
</html>