Skip to content
Snippets Groups Projects
Normal view Permalink
responsive.html 3.83 KiB
Newer Older
AB0410's avatar
WV7 done
AB0410 committed
1 2 3 4 
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
AB0410's avatar
WV7 done  
AB0410 committed
5 
    <link rel="stylesheet" href="styles.css">
AB0410's avatar
WV7 done
AB0410 committed
6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 
</head>

<body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="#">WV7 Bootstrap</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" href="#">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">About</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Contact</a>
                </li>
            </ul>
        </div>
    </nav>

    <div class="text-center my-5">
        <h1 class="display-4">Welcome to our website!</h1>
        <p class="lead">We are excited to have you here. Our website is designed to provide you with the best user experience possible. We pride ourselves on offering a great selection of products and services, as well as easy navigation and helpful customer support. Thank you for visiting!</p>
AB0410's avatar
WV7 done  
AB0410 committed
32 
    </div>
AB0410's avatar
WV7 done
AB0410 committed
33 34
AB0410's avatar
WV7 done  
AB0410 committed
35 
    <section class="container">
AB0410's avatar
WV7 done
AB0410 committed
36 37 
        <form>
            <div class="form-group">
AB0410's avatar
WV7 done  
AB0410 committed
38 
                <label for="exampleInputName">Full Name</label>
AB0410's avatar
WV7 done
AB0410 committed
39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 
                <input type="text" class="form-control" id="exampleInputName">
            </div>
            <div class="form-group">
                <label for="exampleInputAddress">Address</label>
                <input type="text" class="form-control" id="exampleInputAddress">
            </div>
            <div class="form-group">
                <label for="exampleInputPhone">Phone Number</label>
                <input type="tel" class="form-control" id="exampleInputPhone">
            </div>
            <div class="form-group">
                <label for="exampleInputAge">Age</label>
                <input type="number" class="form-control" id="exampleInputAge">
            </div>
            <button type="submit" class="btn btn-primary">Submit</button>
        </form>
AB0410's avatar
WV7 done  
AB0410 committed
55 
      </section>
AB0410's avatar
WV7 done
AB0410 committed
56
AB0410's avatar
WV7 done  
AB0410 committed
57 58 59 
    <article class="container">
        <img src="Strawberry_ice_cream_cone_(5076899310).jpg" class="img-fluid" alt="Responsive image">
    </article>
AB0410's avatar
WV7 done
AB0410 committed
60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 

    <footer class="bg-dark text-white py-3">
        <div class="container">
          <div class="row">
            <div class="col-md-4">
              <h4>Contact Information</h4>
              <ul class="list-unstyled">
                <li>Email: contact@example.com</li>
                <li>Phone: 555-555-5555</li>
                <li>Address: Johndoe st.</li>
              </ul>
            </div>
            <div class="col-md-4">
              <h4>About Us</h4>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
            </div>
            <div class="col-md-4">
              <h4>Follow Us</h4>
              <ul class="list-unstyled">
                <li><a href="#" class="text-white">Facebook</a></li>
                <li><a href="#" class="text-white">Twitter</a></li>
                <li><a href="#" class="text-white">Instagram</a></li>
              </ul>
            </div>
          </div>
        </div>
      </footer>      
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
AB0410's avatar
WV7 done  
AB0410 committed
90 91 92 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4"></script>
</body>
</html>