first-example-css-flexbox/index.html at master · badris101/first-example-css-flexbox · 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
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>First Example - CSS Flexbox</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="https://code.jquery.com/jquery-1.12.1.js"></script>
  </head>
  <body>
    <div class="wrapper">

      <div style="margin:20px;">
        <span>Layout: </span>
        <a href="#" class="stack">Stack</a>
        <a href="#" class="grid">Grid</a>
      </div>

      <section id="blocks">
        <article>
          <img src="img/me.jpg">
          <h1>badris abdelilah</h1>
          <h2>badrisabdelilah5@outlook.com</h2>
          <p>I'm Abdelilah Badris 20 years old studying in University software engineering , i'm a graphic/web designer and frontend developer</p>
        </article>
        <article>
          <img src="img/me.jpg">
          <h1>badris abdelilah</h1>
          <h2>badrisabdelilah5@outlook.com</h2>
          <p>I'm Abdelilah Badris 20 years old studying in University software engineering , i'm a graphic/web designer and frontend developer</p>
        </article>
        <article>
          <img src="img/me.jpg">
          <h1>badris abdelilah</h1>
          <h2>badrisabdelilah5@outlook.com</h2>
          <p>I'm Abdelilah Badris 20 years old studying in University software engineering , i'm a graphic/web designer and frontend developer</p>
        </article>
        <article>
          <img src="img/me.jpg">
          <h1>badris abdelilah</h1>
          <h2>badrisabdelilah5@outlook.com</h2>
          <p>I'm Abdelilah Badris 20 years old studying in University software engineering , i'm a graphic/web designer and frontend developer</p>
        </article>
        <article>
          <img src="img/me.jpg">
          <h1>badris abdelilah</h1>
          <h2>badrisabdelilah5@outlook.com</h2>
          <p>I'm Abdelilah Badris 20 years old studying in University software engineering , i'm a graphic/web designer and frontend developer</p>
        </article>
        <article>
          <img src="img/me.jpg">
          <h1>badris abdelilah</h1>
          <h2>badrisabdelilah5@outlook.com</h2>
          <p>I'm Abdelilah Badris 20 years old studying in University software engineering , i'm a graphic/web designer and frontend developer</p>
        </article>
      </section>

    </div>
    <script type="text/javascript">
      $("a.stack").on("click",function() {
        $("article").addClass("stack");
      });

      $("a.grid").on("click",function() {
        $("article").removeClass("stack");
      });
    </script>
  </body>
</html>