FirstProjectWCS/aboutMe.html at dev · PierreLGV/FirstProjectWCS · 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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>About me - Foo-Bar</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
    crossorigin="anonymous">
  <link rel="stylesheet" href="css/general-style.css">
  <link rel="stylesheet" href="css/aboutMe-style.css">
  <link rel="stylesheet" href="gallery.css">
  <link rel="stylesheet" href="css/style_icones.css">
  <link href="https://fonts.googleapis.com/css?family=Didact+Gothic|Ubuntu" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
  <!-- HEADER -->
  <header>
    <div id="kodakMenu">
      <div id="kodakLogo">
        <a href="index.html">Wildo Codak</a>
      </div>
      <div id="kodakBurger">
        <a href="#" title="Burger button" class="openBtn" onclick="openNav()">&#9776;</span>
      </div>
      <div id="kodakNav" class="overlay">
        <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
        <div class="overlay-content">
          <a href="index.html">HOME</a>
          <a href="aboutMe.html">ABOUT ME</a>
          <a href="gallery.html">GALLERY</a>
          <a href="contact.html">CONTACT</a>
        </div>
      </div>
    </div>
  </header>
  <!-- END OF HEADER -->
  <div class="container">
    <div class="row">
      <div class="col-xs-12">
        <h1>About me</h1>
      </div>
    </div>
    <!-- mosaiq number 1 -->
    <section class="mosaiq">
      <div class="row">
        <figure class="col-xs-12 col-md-6 diapo">
          <img src="img/aboutme/paris-112438_1920.jpg">
        </figure>
        <div class="col-xs-12 col-md-6 txtMosaiq">
          <article class="txtCenter">
            <h2>Titre 1</h2>
            <hr>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget velit finibus, faucibus velit sed, fermentum
              eros. Aliquam consequat efficitur turpis. Suspendisse vel blandit ante, id placerat tortor. Nunc viverra pulvinar
              tellus ac tempor. Duis consequat arcu vel arcu pretium auctor. Aliquam sit amet interdum diam. Vestibulum diam
              nulla, lacinia vitae dignissim quis, posuere ut sapien. Nullam aliquam purus eu est porttitor faucibus. Duis
              in nibh turpis.</p>
          </article>
        </div>
      </div>

      <div class="row">
        <figure class="col-xs-12 col-md-6 col-md-push-6 diapo">
          <img src="img/aboutme/photographer-1773331_1920.jpg">
        </figure>

        <div class="col-xs-12 col-md-6 col-md-pull-6 txtMosaiq">
          <article class="txtCenter">
            <h2>Titre 1</h2>
            <hr>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget velit finibus, faucibus velit sed, fermentum
              eros. Aliquam consequat efficitur turpis. Suspendisse vel blandit ante, id placerat tortor. Nunc viverra pulvinar
              tellus ac tempor. Duis consequat arcu vel arcu pretium auctor. Aliquam sit amet interdum diam. Vestibulum diam
              nulla, lacinia vitae dignissim quis, posuere ut sapien. Nullam aliquam purus eu est porttitor faucibus. Duis
              in nibh turpis.</p>
          </article>
        </div>

      </div>
    </section>
  </div>
  <!-- orange banner -->
  <div class="container-fluid">
    <section>
      <div class="row">
        <div class="col-xs-12 orangeBanner colorAnimation">
          <h2>Titre 2</h2>
          <hr>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget velit finibus, faucibus velit sed, fermentum
            eros. Aliquam consequat efficitur turpis. Suspendisse vel blandit ante, id placerat tortor. Nunc viverra pulvinar
            tellus ac tempor. Duis consequat arcu vel arcu pretium auctor. Aliquam sit amet interdum diam. Vestibulum diam
            nulla, lacinia vitae dignissim quis, posuere ut sapien. Nullam aliquam purus eu est porttitor faucibus. Duis
            in nibh turpis.</p>
        </div>
      </div>
    </section>
  </div>
  <!-- mosaiq number 2 -->
  <div class="container whitespace-mg">
    <section class="mosaiq">
      <div class="row">
        <figure class="col-xs-12 col-md-6 diapo">
          <img src="img/aboutme/louvre-1552305_1920.jpg">
        </figure>
        <div class="col-xs-12 col-md-6 txtMosaiq">
          <article class="txtCenter">
            <h2>Titre 1</h2>
            <hr>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget velit finibus, faucibus velit sed, fermentum
              eros. Aliquam consequat efficitur turpis. Suspendisse vel blandit ante, id placerat tortor. Nunc viverra pulvinar
              tellus ac tempor. Duis consequat arcu vel arcu pretium auctor. Aliquam sit amet interdum diam. Vestibulum diam
              nulla, lacinia vitae dignissim quis, posuere ut sapien. Nullam aliquam purus eu est porttitor faucibus. Duis
              in nibh turpis.</p>
          </article>
        </div>
      </div>
      <div class="row">
        <figure class="col-xs-12 col-md-6 col-md-push-6 diapo">
          <img src="img/aboutme/rain-2538429_1920.jpg">
        </figure>
        <div class="col-xs-12 col-md-6 col-md-pull-6 txtMosaiq">
          <article class="txtCenter">
            <h2>Titre 1</h2>
            <hr>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget velit finibus, faucibus velit sed, fermentum
              eros. Aliquam consequat efficitur turpis. Suspendisse vel blandit ante, id placerat tortor. Nunc viverra pulvinar
              tellus ac tempor. Duis consequat arcu vel arcu pretium auctor. Aliquam sit amet interdum diam. Vestibulum diam
              nulla, lacinia vitae dignissim quis, posuere ut sapien. Nullam aliquam purus eu est porttitor faucibus. Duis
              in nibh turpis.</p>
          </article>
        </div>
      </div>
    </section>
  </div>
  <div class="container-fluid footer">
    <div class="container nav_footer">
      <div class="row">
        <div class="">
          <ul class="nav nav-pills nav-stacked">
            <li role="presentation">
              <a href="#">Home</a>
            </li>
            <li role="presentation">
              <a href="#">Profile</a>
            </li>
            <li role="presentation">
              <a href="#">Messages</a>
            </li>
          </ul>
        </div>
        <div class="social_icones">
          <a href="#" class="icon-facebook2 items_nav_footer"></a>
          <a href="#" class="icon-instagram items_nav_footer"></a>
          <a href="#" class="icon-twitter items_nav_footer"></a>
        </div>
        <div class="copyright">
          <p>&copy; 2018 Codak.com / All rights reserved
            <p>
        </div>
      </div>
    </div>
  </div>
  <script src="js/kodak-script.js" type="text/javascript"></script>
  <!-- jQuery library -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <!-- Latest compiled and minified JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
    crossorigin="anonymous"></script>
</body>

</html>