index.html

<!DOCTYPE html>

<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- CSS Style link -->
    <link rel="stylesheet" href="./css/styles.css" />
    <!-- css responsive view -->
    <link rel="stylesheet" href="./css/viewport.css">
    <!-- «B13» All fonts and their variations are linked from Google Fonts Services -->
    <link href="https://fonts.googleapis.com/css2?family=Raleway:wght@800&family=Roboto:wght@400;500;700;900&display=swap" rel="stylesheet" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/modern-normalize/1.0.0/modern-normalize.min.css"/>  
    <title>My Homework #7</title>
</head>
<body>
    <!-- This is the header tag that wraps the navigation options, web logo and  contacts info as well -->
    <header class="header">
        <div class="container">
            <div class="container-header">
                <!-- Nav tag as well known as Navigation wrapper -->
                <nav>
                    <!-- This is the LOGO usually used in image or text as well, clickable for homepage only  -->
                    <a href="./index.html" class="logo"><span class="logo-colored">web</span><span>studio</span></a>
                    <!-- This is navigation list or option is resposible for exploring the webpage -->
                    <ul class="menu-nav list">
                        <li><a href="./index.html" class="nav active">Studio</a></li><!-- class Active will be highlighted the current page-->
                        <li><a href="./portfolio.html" class="nav">Portfolio</a></li>
                        <li><a href="./" class="nav">Contacts</a></li><!-- Contact will be in default link -->
                    </ul>
                </nav>
                <!-- 
                    This the Contact links, mostly in the rightside of navigation, reponsible for 
                    contacting email, telephone number, mobile number and 
                    social media links(fb,twitter,instagram,etc) 
                -->
                <ul class="menu-contact list">
                    <li><a href="mailto:info@devstudio.com" class="contact">info@devstudio.com</a></li>
                    <li><a href="tel:+110001111111" class="contact">+11 (000) 111-11-11</a></li>
                </ul>
                <span class="btn-menu js-open-menu">
                    <svg class="icon-stroke">
                        <use href="./images/icon/icons.svg#icon-menu"></use>
                    </svg>
                </span> 
            </div>   
        </div>
    </header>
    <!-- this is the Main tag that wraps the content of the webpage. -->
    <main>
        <!-- The main topic and content of the page -->
        <section class="hero-image">
            <div class="container container-hero">
                <!-- This is the heading 1 tag only use once. -->
                <h1 class="hero-top-banner">
                    Effective Solutions <br />
                    for Your Business
                </h1>
                <!-- This is the button tag. It has many action event for e.g. submitting your username and password-->
                <button type="button" data-modal-open class="btn-primary">Order Service</button>
            </div>
        </section>
        <section class="section">
            <div class="container">
            <!-- Section 1 of the content-->
            <ul class="feature-section list">
                <li>
                    <div class="feat-box">
                        <div class="feat-icon">
                            <svg class="icon icon-antenna-1" width="64" height="64">
                                <use href="./images/icon/advantage.svg#icon-antenna-1"></use>
                            </svg>
                        </div>
                        <h3 class="header-3">Strategy</h3>
                        <p class="feat-desc">
                            Our goal is to identify the business
                            problem to walk away with the 
                            perfect and creative solution. 
                        </p>    
                    </div>
                </li>
                <li>
                    <div class="feat-box">
                        <div class="feat-icon">
                            <svg class="icon icon-clock-1" width="64" height="64">
                                <use href="./images/icon/advantage.svg#icon-clock-1"></use>
                            </svg>
                        </div>
                        <h3 class="header-3">Punctuality</h3>
                        <p class="feat-desc">
                            Bring the key message to the 
                            brand's audience for the best price
                            within the shortest possible time.
                        </p>
                    </div>
                </li>
                <li>
                    <div class="feat-box">
                        <div class="feat-icon">
                            <svg class="icon icon-diagram-1" width="64" height="64">
                                <use href="./images/icon/advantage.svg#icon-diagram-1"></use>
                            </svg>
                        </div>
                        <h3 class="header-3">Diligence</h3>
                        <p class="feat-desc">
                            Research and confirm brands that 
                            present the strongest digital growth 
                            opportunities and minimize risk.
                        </p>
                    </div>
                </li>
                <li>
                    <div class="feat-box">
                        <div class="feat-icon">
                            <svg class="icon icon-astronaut-1" width="64" height="64">
                                <use href="./images/icon/advantage.svg#icon-astronaut-1"></use>
                            </svg>
                        </div>
                        <h3 class="header-3">Technologies</h3>
                        <p class="feat-desc">
                            Design practice focused on digital 
                            experiences. We bring forth a deep 
                            passion for problem-solving.
                        </p>
                    </div>
                </li>
            </ul>
            </div>
        </section>
        <section class="section section-image">
            <div class="container">
            <h2 class="section-title">What Are We Doing</h2>
            <!-- This is list of images,All image are stored in root folder /images -->
            <ul class="card list">
                <li>
                    <img src="images/01monitor.jpg" alt="Monitor" width="360" />
                </li>
                <li>
                    <img src="images/02mobile.jpg" alt="Mobile" width="360" />
                </li>
                <li>
                    <img src="images/03mobileandlaptop.jpg" alt="Both" width="360"  />
                </li>
            </ul>
            </div>
        </section>
        <section class="section section-team">
            <div class="container">
            <h2 class="section-title">Our Team</h2>
            <ul class="team-card list">
                <li>
                    <div class="card-box">
                    <img src="./images/04MarkGuerrero.jpg" alt="Mark's Photo" >
                    <div class="card-content">
                        <h3 class="card-title">Mark Guerrero</h3>
                        <p class="card-text">
                            Product Designer
                        </p>
                        <ul class="socmed-list list">
                            <li>
                                <a href="https://instagram.com/" class="socmed-icon">
                                    <svg class="icon icon-socmed">
                                        <use href="./images/icon/social-media.svg#icon-instagram-1"></use>
                                    </svg>
                                </a>
                            </li>
                            <li>
                                <a href="https://twitter.com/" class="socmed-icon">
                                    <svg class="icon icon-socmed">
                                        <use href="./images/icon/social-media.svg#icon-twitter-1"></use>
                                    </svg>
                                </a>
                            </li>
                            <li>
                                <a href="https://facebook.com/" class="socmed-icon">
                                    <svg class="icon icon-socmed">
                                        <use href="./images/icon/social-media.svg#icon-facebook-1"></use>
                                    </svg>
                                </a>
                            </li>
                            <li>
                                <a href="https://linkedin.com/" class="socmed-icon">
                                    <svg class="icon icon-socmed">
                                        <use href="./images/icon/social-media.svg#icon-linkedin-1"></use>
                                    </svg>
                                </a>
                            </li>
                        </ul>    
                        </div>
                    </div>
                </li>
                <li>
                    <div class="card-box">
                    <img src="./images/05TomFord.jpg" alt="Tom's Photo"  />
                    <div class="card-content">
                        <h3 class="card-title">Tom Ford</h3>
                        <p class="card-text">
                            Frontend Developer
                        </p>
                        <ul class="socmed-list list">
                            <li>
                                <a href="https://instagram.com/" class="socmed-icon">
                                    <svg class="icon icon-socmed">
                                        <use href="./images/icon/social-media.svg#icon-instagram-1"></use>
                                    </svg>
                                </a>
                            </li>
                            <li>
                                <a href="https://twitter.com/" class="socmed-icon">
                                    <svg class="icon icon-socmed">
                                        <use href="./images/icon/social-media.svg#icon-twitter-1"></use>
                                    </svg>
                                </a>
                            </li>
                            <li>
                                <a href="https://facebook.com/" class="socmed-icon">
                                    <svg class="icon icon-socmed">
                                        <use href="./images/icon/social-media.svg#icon-facebook-1"></use>
                                    </svg>
                                </a>
                            </li>
                            <li>
                                <a href="https://linkedin.com/" class="socmed-icon">
                                    <svg class="icon icon-socmed">
                                        <use href="./images/icon/social-media.svg#icon-linkedin-1"></use>
                                    </svg>
                                </a>
                            </li>
                        </ul>    
                        </div>
                    </div>
                </li>
                <li>
                    <div class="card-box">
                    <img src="./images/06CamilaGarcia.jpg" alt="Camila's Photo"  />
                    <div class="card-content">
                        <h3 class="card-title">Camila Garcia</h3>
                        <p class="card-text">
                            Marketing
                        </p>
                        <ul class="socmed-list list">
                            <li>
                                <a href="https://instagram.com/" class="socmed-icon">
                                    <svg class="icon icon-socmed">
                                        <use href="./images/icon/social-media.svg#icon-instagram-1"></use>
                                    </svg>
                                </a>
                            </li>
                            <li>
                                <a href="https://twitter.com/" class="socmed-icon">
                                    <svg class="icon icon-socmed">
                                        <use href="./images/icon/social-media.svg#icon-twitter-1"></use>
                                    </svg>
                                </a>
                            </li>
                            <li>
                                <a href="https://facebook.com/" class="socmed-icon">
                                    <svg class="icon icon-socmed">
                                        <use href="./images/icon/social-media.svg#icon-facebook-1"></use>
                                    </svg>
                                </a>
                            </li>
                            <li>
                                <a href="https://linkedin.com/" class="socmed-icon">
                                    <svg class="icon icon-socmed">
                                        <use href="./images/icon/social-media.svg#icon-linkedin-1"></use>
                                    </svg>
                                </a>
                            </li>
                        </ul>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="card-box">
                    <img src="./images/07DanielWilson.jpg" alt="Daniel's Photo"  />
                    <div class="card-content">
                        <h3 class="card-title">Daniel Wilson</h3>
                        <p class="card-text">
                        UI Designer
                        </p>
                        <ul class="socmed-list list">
                            <li>
                                <a href="https://instagram.com/" class="socmed-icon">
                                    <svg class="icon icon-socmed">
                                        <use href="./images/icon/social-media.svg#icon-instagram-1"></use>
                                    </svg>
                                </a>
                            </li>
                            <li>
                                <a href="https://twitter.com/" class="socmed-icon">
                                    <svg class="icon icon-socmed">
                                        <use href="./images/icon/social-media.svg#icon-twitter-1"></use>
                                    </svg>
                                </a>
                            </li>
                            <li>
                                <a href="https://facebook.com/" class="socmed-icon">
                                    <svg class="icon icon-socmed">
                                        <use href="./images/icon/social-media.svg#icon-facebook-1"></use>
                                    </svg>
                                </a>
                            </li>
                            <li>
                                <a href="https://linkedin.com/" class="socmed-icon">
                                    <svg class="icon icon-socmed">
                                        <use href="./images/icon/social-media.svg#icon-linkedin-1"></use>
                                    </svg>
                                </a>
                            </li>
                        </ul>
                        </div>
                    </div>
                </li>
            </ul>
            </div>
        </section>
        <section class="section">
            <div class="container">
                <h2 class="section-title">Customers</h2>
                <ul class="card list">
                    <li>
                        <a href="./" class="client-list">
                            <svg class="icon icon-client">
                                <use href="./images/icon/clients.svg#icon-client-1"></use>
                            </svg>
                        </a>
                    </li> 
                    <li>
                         <a href="./" class="client-list">
                            <svg class="icon icon-client">
                                <use href="./images/icon/clients.svg#icon-client-2"></use>
                            </svg>
                        </a>
                    </li> 
                    <li>
                        <a href="./" class="client-list">
                            <svg class="icon icon-client">
                                <use href="./images/icon/clients.svg#icon-client-3"></use>
                            </svg>
                        </a>
                    </li> 
                    <li>
                        <a href="./" class="client-list">
                            <svg class="icon icon-client">
                                <use href="./images/icon/clients.svg#icon-client-4"></use>
                            </svg>
                        </a>
                    </li> 
                    <li>
                        <a href="./" class="client-list">
                            <svg class="icon icon-client">
                                <use href="./images/icon/clients.svg#icon-client-5"></use>
                            </svg>
                        </a>
                    </li> 
                    <li>
                        <a href="./" class="client-list">
                            <svg class="icon icon-client">
                                <use href="./images/icon/clients.svg#icon-client-6"></use>
                            </svg>
                        </a>
                    </li>
                </ul>
            </div>
        </section>
    </main>
    <!-- This is the footer tag that wraps the logo, contact info, costumer services, FAQ etc. -->
    <footer class="footer">
        <div class="container container-footer">
            <div class="footer-box">
                <a href="./index.html" class="logo"><span class="logo-colored">web</span><span>studio</span></a>
                <p>
                    Increase the flow of customers and <br />
                    sales for your business with digital <br />
                    marketing & growth solutions.
                </p>
            </div>
            <div class="footer-box footer-2">
                <h3>Social media</h3>
                <ul class="socmed-list list">
                    <li>
                        <a href="https://instagram.com/" class="socmed-footer socmed-icon">
                            <svg class="icon icon-socmed">
                                <use href="./images/icon/social-media.svg#icon-instagram-1"></use>
                            </svg>
                        </a>
                    </li>
                    <li>
                        <a href="https://twitter.com/" class="socmed-footer socmed-icon">
                            <svg class="icon icon-socmed">
                                <use href="./images/icon/social-media.svg#icon-twitter-1"></use>
                            </svg>
                        </a>
                    </li>
                    <li>
                        <a href="https://facebook.com/" class="socmed-footer socmed-icon">
                            <svg class="icon icon-socmed">
                                <use href="./images/icon/social-media.svg#icon-facebook-1"></use>
                            </svg>
                        </a>
                    </li>
                    <li>
                        <a href="https://linkedin.com/" class="socmed-footer socmed-icon">
                            <svg class="icon icon-socmed">
                                <use href="./images/icon/social-media.svg#icon-linkedin-1"></use>
                            </svg>
                        </a>
                    </li>
                </ul>    
            </div>
            <div class="footer-box footer-form">
                <h3>Subscribe</h3>
                <div class="footer-send">
                    <input type="email" name="input-email" class="input-email" placeholder="Email here" />
                    <button type="button" class="btn-telegram" >Subscribe
                        <svg class="icon-telegram">
                            <use href="./images/icon/icons.svg#icon-telegram"></use>
                        </svg>
                    </button>
                </div>
            </div>
        </div>
    </footer>
    <!-- All you markup, including the modal window -->
    <div class="backdrop is-hidden" data-modal>
        <div class="contact-form">
            <div class="toggle-pos">    
                <span type="button" class="btn-close" data-modal-close>
                    <svg class="icon icon-close">
                        <use href="./images/icon/icons.svg#icon-close"></use>
                    </svg>
                </span>
            </div>
            <div class="form-wrap">
                <p class="form-header">Leave your contacts and we will call you back</p>
                <form action="post" class="form-box" novalidate> 
                    <label for="input-name" class="form-label"><span>Name</span>
                        <input type="text" name="input-name" id="input-name" class="input-text" placeholder="Full name please">
                        <svg class="form-icon">
                            <use href="./images/icon/icons.svg#icon-person"></use>
                        </svg>
                    </label>
                    <label for="input-tel" class="form-label"><span>Phone</span>
                            <input type="tel" name="input-tel" id="input-tel" class="input-text" placeholder="call my number">
                            <svg class="form-icon">
                                <use href="./images/icon/icons.svg#icon-phone"></use>
                            </svg>
                    </label>
                    <label for="input-email" class="form-label"><span>Email</span>
                            <input type="email" name="input-email" id="input-email" class="input-text" placeholder="write your email here">
                            <svg class="form-icon">
                                <use href="./images/icon/icons.svg#icon-email"></use>
                            </svg>
                    </label>
                    <label for="input-comment" class="form-label"><span>Comment</span>
                    <div name="input-field" class="input input-comment" id="input-comment" role="textbox" contenteditable="true"></div>
                    </label>
                    <label for="input-check" class="form-label label-check">
                        <input type="checkbox" name="input-check" id="input-check" class="input-check" hidden />
                        <span class="check-border">
                            <svg class="icon-check">
                                <use href="./images/icon/icons.svg#icon-check"></use>
                            </svg>
                        </span>
                        <span>
                            I accept the terms and conditions of the <a href="#" target="_blank" rel="noopener noreferrer" class="privacy">Privacy Policy</a>.
                        </span>
                    </label>
                    <div class="button-send">
                        <button type="submit" class="btn-send"><span class="btn-text">Send</span></button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <!-- The modal navigation -->
    <div class="js-menu-container">
        <div class="container container-dropdown">
            <div class="toggle-pos move">    
                <span type="button" class="btn-close js-close-menu" >
                    <svg class="icon icon-close">
                        <use href="./images/icon/icons.svg#icon-close"></use>
                    </svg>
                </span>
            </div>
            <div class="drop-nav">
                <ul class="is-nav menu-dropdown list">
                    <li><h2><a href="./index.html" class="nav active">Studio</a></h2></li><!-- class Active will be highlighted the current page-->
                    <li><h2><a href="./portfolio.html" class="nav">Portfolio</a></h2></li>
                    <li><h2><a href="./" class="nav">Contacts</a></h2></li><!-- Contact will be in default link -->
                </ul>
                <ul class="is-contact menu-dropdown list">
                    <li>
                        <ul class="dropdown socmed-list list">
                            <li>
                                <a href="https://instagram.com/" class="socmed-footer socmed-icon">
                                    <svg class="icon icon-socmed">
                                        <use href="./images/icon/social-media.svg#icon-instagram-1"></use>
                                    </svg>
                                </a>
                            </li>
                            <li>
                                <a href="https://twitter.com/" class="socmed-footer socmed-icon">
                                    <svg class="icon icon-socmed">
                                        <use href="./images/icon/social-media.svg#icon-twitter-1"></use>
                                    </svg>
                                </a>
                            </li>
                            <li>
                                <a href="https://facebook.com/" class="socmed-footer socmed-icon">
                                    <svg class="icon icon-socmed">
                                        <use href="./images/icon/social-media.svg#icon-facebook-1"></use>
                                    </svg>
                                </a>
                            </li>
                            <li>
                                <a href="https://linkedin.com/" class="socmed-footer socmed-icon">
                                    <svg class="icon icon-socmed">
                                        <use href="./images/icon/social-media.svg#icon-linkedin-1"></use>
                                    </svg>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li><a href="mailto:info@devstudio.com" class="contact">info@devstudio.com</a></li>
                    <li><h2 class="heading-2"><a href="tel:+110001111111" class="contact">+11 (000) 111-11-11</a></h2></li>
                </ul>
            </div>
        </div>
    </div>
  <!-- Place before the body closing tag -->
  <script src="./js/modal.js"></script>
  <script src="./js/mobile-menu.js"></script>
</body>
</html>