WesgroDMDesign/dropdowns.html at master · BarryBotha/WesgroDMDesign · 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
<!doctype html>
<html class="no-js" lang="en">
<head>
<title>Wesgro</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/dm-style.css">
<link href='http://fonts.googleapis.com/css?family=Oswald:400,300,700' rel='stylesheet' type='text/css'>
<!-- Phone -->
<link href="css/mobi.css" rel="stylesheet" type="text/css" media="only screen and (max-width:767px)">
<!-- Tablet -->
<link href="css/tablet.css" rel="stylesheet" type="text/css" media="only screen and (min-width:768px) and (max-width:996px)">
<!-- Desktop -->
<link href="css/dm-style.css" rel="stylesheet" type="text/css" media="only screen and (min-width:996px)">
</head>
<body>
<div class="top-bar"></div>
<div id="container">
  <header>
    <div class="encapsu">
      <div id="logo"><a href="/"><img alt="WESGRO" src="img/dm/western-cape-logo.png" width="138" height="52"></a></div>
      <nav>
        <div id="main-nav"> <a href="#" class="dm">Destination Marketing</a> <br>
          <a href="#" class="leis">Leisure Travel</a> <a href="#" class="conven">Convention Bureau</a> </div>
        <div id="search-form">
          <form action="javascript:;" method="get">
            <table>
              <tr>
                <td><input name="search" type="text" id="search" value="Keywords"></td>
                <td><input name="input" type="image" src="img/dm/search-button.png" alt="search" ></td>
              </tr>
            </table>
          </form>
        </div>
        <div id="top-social">
          <ul>
            <li><a href="layout/3"><img alt="WESGRO" src="img/dm/facebook.png" width="20" height="20"></a></li>
            <li><a href="layout/3"><img alt="WESGRO" src="img/dm/twitter.png" width="20" height="20"></a></li>
            <li><a href="layout/3"><img alt="WESGRO" src="img/dm/gplus.png" width="20" height="20"></a></li>
          </ul>
        </div>
        <div id="big-nav">
          <ul class="oswald">
            <li><a href="#"><img alt="WESGRO" src="img/dm/home-icon.png" width="23" height="18"></a></li>
            <li><a href="#">Regions</a></li>
            <li><a href="#">Events</a></li>
            <li><a href="#" style="border:none;">Experience</a></li>
          </ul>
          <div id="regions-drop">
            <div id="drop-left">
              <div class="inh">
                <h2>Western Cape Regions</h2>
                <h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Erat neque, mattis sit amet egestas ut, aliquet eleifend ipsum. Aliquam erat volutpat. Integer laoreet turpis a massa sollicitudin et sodales leo sagittis. </h4>
              </div>
            </div>
            `
            <div id="drop-right">
              <div class="inh">
                <div class="thumbs">
                  <ul>
                    <li><a href="#"><img alt="WESGRO" src="img/dm/cape.jpg" width="84" height="57"><br>
                      Cape Town</a></li>
                    <li><a href="#"><img alt="WESGRO" src="img/dm/winelands.jpg" width="84" height="57"><br>
                      Winelands</a></li>
                    <li><a href="#"><img alt="WESGRO" src="img/dm/westcoast.jpg" width="84" height="57"><br>
                      West Coast</a></li>
                    <li><a href="#"><img alt="WESGRO" src="img/dm/overberg.jpg" width="84" height="57"><br>
                      Overberg</a></li>
                    <li><a href="#"><img alt="WESGRO" src="img/dm/karoo.jpg" width="84" height="57"><br>
                      Karoo</a></li>
                    <li><a href="#"><img alt="WESGRO" src="img/dm/garden-route-klein-karoo.jpg" width="84" height="57"><br>
                      Garden Route &amp; Klein Karoo</a></li>
                  </ul>
                </div>
                <div id="the-region">
                  <h2>Winelands</h2>
                  <div class="region-desc">Sed id mi turpis, non blandit tellus. In semper blandit ipsum, sed interdum turpis viverra eu. Etiam accumsan iaculis nibh, et placerat metus volutpat nec. Integer ut pretium ante. </div>
                  <div id="town-list">
                    <ul>
                      <li></li>
                      <li><a href="#">Ashton<br>
                        </a></li>
                      <li><a href="#">Bonnievale<br>
                        </a></li>
                      <li><a href="#">Ceres<br>
                        </a></li>
                      <li><a href="#">De Doorns<br>
                        </a></li>
                      <li><a href="#">Franschhoek<br>
                        </a></li>
                      <li><a href="#">Gouda<br>
                        </a></li>
                      <li><a href="#">McGregor<br>
                        </a></li>
                      <li><a href="#">Montagu<br>
                        </a></li>
                      <li><a href="#">Paarl</a></li>
                      <li></li>
                      <li><a href="#">Pniel<br>
                        </a></li>
                      <li><a href="#">Rawsonville<br>
                        </a></li>
                      <li><a href="#">Robertson<br>
                        </a></li>
                      <li><a href="#">Stellenbosch<br>
                        </a></li>
                      <li><a href="#">Touwsrivier<br>
                        </a></li>
                      <li><a href="#">Tulbagh<br>
                        </a></li>
                      <li><a href="#">Wellington<br>
                        </a></li>
                      <li><a href="#">Wolseley<br>
                        </a></li>
                      <li><a href="#">Worcester</a></li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </nav>
    </div>
  </header>
  <div style="clear:both"></div>
  <div style="clear:both"></div>
  <div id="main" role="main"></div>
</div>
</body>
</html>