responsiveweb/webflex.html at master · Rantama/responsiveweb · 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
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>my web page using flex</title>
    <link rel="stylesheet" href="webflex.css" media="screen" title="no title" charset="utf-8">
    <link rel="stylesheet" href="notepad.css" media="(max-width:1024px) and (min-width:481px)">
    <link rel="stylesheet" href="mobile.css" media="(max-width:480px)">

  </head>
  <body>
    <div class="wrapper">
    <header class="flex-header">
      <img src="images/restau.jpeg" class="logo">
      <nav class="flex-nav">
        <ul class="flex-list">
          <li><a href="">Home</a> <br />Where you want to be </li>
          <li><a href="">About</a> <br />Things you want to know </li>
          <li><a href="">Menu</a> <br />Delicious food we make </li>
          <li><a href="">Contact</a> <br />Our contact information </li>
        </ul>
      </nav>
    </header>
    <section id="slider">
      <figure>
      <img src="images/one.jpg">
      <img src="images/two.jpg">
      <img src="images/three.jpg">
      <figure>
    </section>
    <section class="fourboxes">
      <div class="home">Home<a href="">Where you want to be</a> </div>
      <div class="about">About<a href="">Things you want to know</a></div>
      <div class="menu">Menu<a href="">Delicious food we make</a></div>
      <div class="contact">Contact<a href="">Our Contact Information</a></div>
    </section>
    <section class="boxwrapper">
      <section class="columnone">
      <div class="box box1">Item Number 18<br /><a>Sushi</a></div>
      <div class="box box2">001 <br /> Item Photo</div>
      <div class="box box3"><img src="images/one.jpg"></div>
      <div class="box box4">002 <br />Given Name<br />Anish</div>
      <div class="box box5">003 <br /> Surname<br />Rijal</div>
      <div class="box box6">004 <br /> Birthdate<br />2 March</div>
      <div class="box box7">005 <br /> Residence<br />Dallas</div>
      <div class="box box8">006 <br /> Eduacation<br />BS Degree</div>
      <div class="box box9">007 <br /> Employer<br />Ksquare</div>
      <div class="box box10">008 <br /> Occupation<br />Designer</div>
    </section>
    <section class="columntwo">
      <p class="paraone">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
        do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
         enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
         ut aliquip ex ea commodo consequat</p>
      <p class="paratwo"> Duis aute irure dolor in
         reprehenderit in voluptate velit esse cillum dolore eu fugiat
         nulla pariatur. Excepteur sint occaecat cupidatat non proident,
         sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </section>
    </section>
    <footer class="flex-footer">
      <ul class="social">
        <li><img src="images/twitter.jpeg"></a>twitter</li>
        <li><img src="images/dribbble.png"></a>dribbble</li>
        <li><img src="images/flickr.png"></a>flickr</li>
        <li><img src="images/gowalla.jpeg"></a>gowalla</li>
        <li><img src="images/images.png"></a>tumblr</li>
        <li><img src="images/facebook.png"></a>facebook</li>
        <li><img src="images/youtube.jpeg"></a>youtube</li>
        <li><img src="images/amazon.png"></a>amazon</li>
      </ul>
      <p class="copyright">© copyright Anish Rijal<br/>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
        do eiusmod tempor incididunt ut labore et</p>
        <div class="comment"> The Nice Restaurant</div>
    </footer>
  </div>
  </body>
</html>