Responsive-Patterns/index.html at master · Osmanah/Responsive-Patterns · GitHub

1
2
3
4
5
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Responsive-Patterns</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/6.0.0/normalize.css" integrity="sha256-G5VA29cSH+JxK8+MeAVL36QhUlTv7Fipck5dnVXpUXw=" crossorigin="anonymous" />
      <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
      <link href="index.css"  rel="stylesheet">
  </head>
  <body>
      <div class="containerMain">
          <div class="menu-list">
              <sul>
                  <li class="menu-item">Accueil</li>
                  <li class="menu-item">Vidéo</li>
                  <li class="menu-item">Images</li>
                  <li class="menu-item">A propos</li>
              </ul>
          </div>
          <div class="mainsection">
              <div class="navbar">
                  <div class="toogle">
                      <i class="fa fa-bars fa-2x openbar"  aria-hidden="true"></i>
                      <i class="fa fa-times fa-2x closebar" aria-hidden="true"></i>
                  </div>
              </div>
              <div class="media1">
                  <div >
    <!--Pattern HTML-->
        <div >
        <video src="responsiv.mp4" type="video/mp4" autoplay  controls width="100%">
        </video>
    	</div>
    	<!--End Pattern HTML-->

      <div>
        <div class="col-group">
          <div>
            <h2>Responsive-Patterns</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br> Quisque turpis diam, tincidunt nec convallis vitae, dapibus vitae enim. <br> Nam bibendum nisl in risus imperdiet vestibulum. <br> Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br> Quisque turpis diam, tincidunt nec convallis vitae, dapibus vitae enim.<br> Nam bibendum nisl in risus imperdiet vestibulum. <br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br>Quisque turpis diam, tincidunt nec convallis vitae, dapibus vitae enim. Nam bibendum nisl in risus imperdiet vestibulum.</p>
          </div>
          <div>
            <h2>Responsive-React</h2>
            <p>Sed sit amet molestie diam. <br> Etiam adipiscing dictum eros, vitae feugiat augue convallis sit amet. <br>Nunc quis massa non dolor dictum condimentum. Sed sit amet molestie diam. <br>Etiam adipiscing dictum eros, vitae feugiat augue convallis sit amet. <br> Nunc quis massa non dolor dictum condimentum. <br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br>Quisque turpis diam, tincidunt nec convallis vitae, dapibus vitae enim. <br>Nam bibendum nisl in risus imperdiet vestibulum.</p>
          </div>
          <div>
            <h2>Responsive-Angular</h2>
            <p>Lorem ipsum br
              dolor sit amet, consectetur adipiscing elit. <br>Quisque turpis diam, tincidunt nec convallis vitae, dapibus vitae enim. <br>Nam bibendum nisl in risus imperdiet vestibulum.Lorem ipsum dolor sit amet, consecteturs adipiscing elit.  <br>Quisque turpis diam, tincidunt nec convallis vitae, dapibus vitae enim. <br>Nam bibendum nisl in risus imperdiet vestibulum. <br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br>Quisque turpis diam, tincidunt nec convallis vitae, dapibus vitae enim.<br> Nam bibendum nisl in risus imperdiet vestibulum.</p>
          </div>
        </div>
      </div>
      <!--End Pattern HTML-->

      <!--Pattern HTML-->
        <div>
          <img src="https://s-media-cache-ak0.pinimg.com/originals/60/65/6f/60656f63cb2dabf87bf8c4af2877fd9c.jpg" alt="Image Nature" width="100%"/>
      	</div>
      	<!--End Pattern HTML-->
        <footer>
          <nav>
            <ul id="demo-nav">
              <li><a href="">Retourne</a></li>
              <li class="current"><a href="footer-only.html">Contact</a></li>
              <li><a href="footer-adapt.html">About</a></li>
              <li><a href="footer-anchor.html">Hompage</a></li>
              <li><a href="footer-fixed.html">Validation</a></li>
            </ul>
          </nav>

          <div class="container">
            <p class="credit">Nous sommes —
            <a href="http://simplon.co/">Promo 7</a></p>
          </div>
        </footer>

<script src="index.js" type="text/javascript"></script>
  </body>
</html>