community-nav-prototype/index-light.html at develop · sumitdaga/community-nav-prototype · 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
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="IE=11, IE=10, IE=9, ie=8, ie=7">

  <link rel="stylesheet" href="/css/style.css">
  <script src="/js/main.js"></script>

</head>

<body class="">
  <div class="theme-wrapper theme-light">
    <div class="header-nav-ui flex column">
      <div class="mobile-nav flex row space-between middle">
        <div class="left-menu-container flex middle center" href="javascript:;">
          <a class="menu-btn flex middle center" href="javascript:;">
            <img width="20" src="./image/icon-menu.svg" alt="menu">
          </a>
          <a class="close-btn flex middle center" href="javascript:;">
            <img src="./image/icon-close.svg" alt="close">
          </a>
        </div>
        <img class="tc-logo" src="./image/tc-logo.svg" alt="logo">
        <a href="javascript:;" class="flex row">
          <span class="login-btn">LOGIN</span>
          <div class="flex row login-container user-info-container">
            <div class="avatar-container">
              <img src="./image/img-vic-tor-avatar.svg" class="avatar" alt="avatar">
            </div>
            <span class="drowdown-icon flex center middle">
              <img class="dropdown-icon" src="./image/arrow-small-down.svg" alt="dropdown icon">
            </span>
          </div>
        </a>
      </div>
      <div class="mobile-nav-sub-menu isOpenBK isNothing">
        <div class="mask wrap-all"></div>
        <a href="javascript:;" class="header flex row center middle">
          <span class="name">Solutions</span>
          <span class="drowdown-icon-container flex center middle">
            <img class="dropdown-icon" src="./image/arrow-small-down.svg" alt="dropdown icon">
          </span>
        </a>
        <div class="menu flex column">
          <a class="isOpenBK hide ignore mobile-nav-sub-menu-item" href="javascript:;">All Solutions</a>
        </div>
      </div>
      <div class="primary-nav flex row middle">
        <img class="tc-logo" src="./image/tc-logo.svg" alt="logo">
        <span class="primary-level-1-separator hide ignore" href="javascript:;" ></span>
        <a class="primary-level-1 isOpenBK hide ignore" href="javascript:;" >BUSINESS</a>
        <div class="primary-level-2-container flex row isOpenBK hide">
          <a key="" class="primary-level-2 hide ignore" href="javascript:;">Solutions</a>
          <div href="javascript:;" class="more-btn-container relative hide">
            <a href="javascript:;" class="more-btn flex row middle center relative primary-level-2">
              <div class="mask wrap-all"></div>
              <span>More</span>
              <img class="dropdown-icon" src="./image/arrow-small-down.svg" alt="dropdown icon">
            </a>
            <div class="more-content-container flex column">
              <a key="" href="javascript:;" class="hide ignore primary-level-2-more">Solutions</a>
            </div>
          </div>
        </div>
        <a class="primary-level-1 login-btn" href="javascript:;">LOGIN</a>
        <div class="primary-level-1 login-container flex row middle">
          <span class="notification-icon">
            <img src="./image/icon-bell.svg" alt="notification">
          </span>
          <a class="flex row middle user-info-container" href="javascript:;">
            <img src="./image/img-vic-tor-avatar.svg" class="avatar" alt="avatar">
            <span class="handle">vic-tor</span>
            <span class="drowdown-icon flex center middle">
              <img class="dropdown-icon" src="./image/arrow-small-down.svg" alt="dropdown icon">
            </span>
          </a>
          <div class="user-info-popup flex column">
            <div class="header flex row middle">
              <img src="./image/img-vic-tor-avatar.svg" width="60" class="avatar" alt="avatar">
              <div class="flex column">
                <span class="handle">vic-tor</span>
                <span class="email">vic@topcoder.com</span>
              </div>
            </div>
            <a href="javascript:;" class="switch-to-business-container flex row middle">
              <img class="switch-icon" src="./image/icon-switch-business.svg" alt="switch">
              <span class="switch-to-busniness">Switch to BUSINESS</span>
            </a>
            <div class="menu flex column">
              <a href="javascript:;">Settings</a>
              <a href="javascript:;">Payments</a>
              <a href="javascript:;">All projects</a>
              <a href="javascript:;">All projects</a>
              <span class="separator"></span>
              <a href="javascript:;">Help</a>
              <a href="javascript:;">About Topcoder</a>
              <a class="logout-btn" href="javascript:;">Log Out</a>
            </div>
          </div>
        </div>
        <div class="icon-chosen-arrow">
          <img class="icon-light" src="./image/icon-chosen-arrrow-desktop.svg" alt="">
          <img class="icon-dark" src="./image/icon-chosen-arrrow-desktop-dark.svg" alt="">
        </div>
      </div>
      <div class="secondary-nav flex row middle center">
        <div class="secondary-nav-link-container flex row middle">
          <a key="" class="secondary-level-1 isOpenBK ignore hide" href="javascript:;">Overview</a>
          <div href="javascript:;" class="more-btn-container relative hide">
            <a href="javascript:;" class="more-btn flex row middle center relative">
              <div class="mask wrap-all"></div>
              <span>More</span>
              <img class="dropdown-icon icon-dark" src="./image/arrow-small-down.svg" alt="dropdown icon">
              <img class="dropdown-icon icon-light" src="./image/arrow-small-down-dark.svg" alt="dropdown icon">
            </a>
            <div class="more-content-container flex column">
              <a key="" class="hide ignore secondary-level-1-more" href="javascript:;">Overview</a>
            </div>
          </div>
          <span class="icon-select hide"></span>
        </div>
      </div>
      <div class="secondary-nav-mobile flex column space-between">
        <div class="menu flex column">
          <a class="isOpenBK hide ignore secondary-mobile-level-2" href="javascript:;">Solutions</a>
        </div>
        <div class="footer flex row center middle">
          <span>© 2000–2019 Topcoder Inc, a Wipro Company. All rights reserved.</span>
        </div>
      </div>
      <div class="user-info-popup user-info-popup-mobile flex column">
        <div class="header flex row middle space-between">
          <div class="left-content flex row middle">
            <img src="./image/img-vic-tor-avatar.svg" width="60" class="avatar" alt="avatar">
            <div class="flex column">
              <span class="handle">@vic-tor</span>
              <span class="description">Member since May, 2009</span>
            </div>
          </div>
          <a href="javascript:;" class="icon-close flex row center middle">
            <img src="./image/icon-close-dark.svg" alt="menu">
          </a>
        </div>
        <div class="menu flex column">
          <span class="separator"></span>
          <a href="javascript:;">My Dashboard</a>
          <a href="javascript:;">Profile</a>
          <a href="javascript:;">Account & Security</a>
          <a href="javascript:;">Notifications</a>
          <a href="javascript:;">Topcoder Open</a>
          <span class="separator"></span>
          <a href="javascript:;">Help center</a>
          <a class="logout-btn" href="javascript:;">Log Out</a>
        </div>
      </div>
    </div>
  </div>
</body>