module-one-capstone/index.html at main · mulugithub/module-one-capstone · 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
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Eagle Tech Academy</title>
    <link
      rel="apple-touch-icon"
      sizes="180x180"
      href="images/apple-touch-icon.png"
    />
    <link
      rel="icon"
      type="image/png"
      sizes="32x32"
      href="images/favicon-32x32.png"
    />
    <link
      rel="icon"
      type="image/png"
      sizes="16x16"
      href="images/favicon-16x16.png"
    />
    <link rel="manifest" href="images/site.webmanifest" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&family=Poppins:wght@400;500;600;700&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="css/styles.css" />
  </head>
  <body>
    <header>
      <div class="mobile-menu-icon" id="mobile-menu">
        <a href="#"
          ><img src="images/mobile_menu.png" alt="Hamburger Icon"
        /></a>
      </div>
      <nav class="social-link-top">
        <ul>
          <li>
            <a href="#"
              ><img src="images/facebook.png" alt="facebook icon"
            /></a>
          </li>
          <li>
            <a href="#"><img src="images/twitter.png" alt="twitter icon" /></a>
          </li>
          <li><a href="#">English</a></li>
          <li><a href="#">My Page</a></li>
          <li><a href="#">Logout</a></li>
        </ul>
      </nav>
      <nav class="navbar-menu">
        <div class="logo">
          <a href="#"
            ><img src="images/eta_logo.png" alt="ETA institution logo here"
          /></a>
        </div>
        <ul class="menu">
          <li class="nav-item"><a href="#">Home</a></li>
          <li class="nav-item"><a href="about.html">About </a></li>
          <li class="nav-item"><a href="#program">Program</a></li>
          <li class="nav-item"><a href="#join">Join</a></li>
          <li class="nav-item"><a href="#sponsor">Sponsor</a></li>
          <li class="nav-item"><a href="#contact">News</a></li>
          <li class="nav-item" id="campaign">
            <a href="#campaign">ETA Campaign</a>
          </li>
        </ul>
      </nav>
      <!-- mobile menu-->
      <div class="mobile-menu hidden">
        <span class="close-menu"
          ><img src="images/Iconmenu-close.png" alt="close menu icon"
        /></span>
        <div class="mobile-menu-content">
          <a href="#">Home</a>
          <a href="about.html">About</a>
          <a href="#program">Program</a>
          <a href="#join">Join</a>
          <a href="#sponsor">Sponsor</a>
          <a href="#news">News</a>
          <a href="#campaign">ETA Campaign</a>
        </div>
      </div>
    </header>

    <main>
      <!-- welcome section-->
      <section class="welcome-wrapper" id="welcome">
        <article class="welcome-header">
          <p>"Hello! Web Developers"</p>
          <h1>2023 Summer Web Developer conference</h1>
        </article>
        <p class="description">
          All web developer enthusiasts, including juniors, seniors, and
          experts, are invited to attend to learn about the most latest topics
          in web technologies. The conference included lectures, development
          sessions, forums, and workshops.
        </p>
        <article class="date-venue">
          <h2 class="schedule">2023.08.15(WED) ~ 18(FRI)</h2>
          <p class="address">@ The Skylight hotel in Addis Ababa, Ethiopia</p>
        </article>
      </section>
      <!-- end of welcome section-->
      <!-- main program section-->
      <section class="program-wrapper" id="progarm">
        <h2 class="program-title">Main Program</h2>
        <hr class="title-underline" />
        <div class="program-details">
          <div class="program-cards">
            <img class="card-images" src="images/program_icon_01.png" />
            <p class="card-title">Lecture</p>
            <p class="card-text">
              Listen to the speakers from various countries about the messages
              of sharing and opening.
            </p>
          </div>

          <div class="program-cards">
            <img class="card-images" src="images/program_icon_02.png" />
            <p class="card-title">CC Exhibition</p>
            <p class="card-text">
              Appreciate various creations applying CC license of artists,
              organized from Art Center Nabi
            </p>
          </div>

          <div class="program-cards">
            <img class="card-images" src="images/program_icon_03.png" />
            <p class="card-title">Forum</p>
            <p class="card-text">
              Have the time to share your thoughts and opinions with experts for
              each topic.
            </p>
          </div>
          <div class="program-cards">
            <img class="card-images" src="images/program_icon_04.png" />
            <p class="card-title">Workshop</p>
            <p class="card-text">
              Try creating your own work using open source license rather than
              just watching at it.
            </p>
          </div>
          <div class="program-cards">
            <img class="card-images" src="images/program_icon_05.png" />
            <p class="card-title">CC Ignite</p>
            <p class="card-text">
              get opportunities to network with programmers around the world,
              also after the conference.
            </p>
          </div>
        </div>
        <a href="#" class="join-link"> Join 2023 Web Developer Conference</a>
        <a href="#" class="whole-program"> SEE THE WHOLE PROGRAM</a>
      </section>
      <!-- end of main program section -->
      <!-- featured speakers section -->
      <section class="speakers-wrapper" id="speakers">
        <h2 class="speakers-title">Featured Speakers</h2>
        <hr class="title-underline" />
        <div class="speakers">

        </div>
      </section>
      <!--  end of featured speakers section -->
      <!--  partner section -->
      <section class="partner-wrapper" id="partner">
        <h2 class="partner-title">Our Partners</h2>
        <hr class="title-underline" />
        <div class="partner-logo">
          <a> <img src="images/mozilla.png" alt="Mozilla logo here" /></a>
          <a> <img src="images/googlekorea.png" alt="Google logo here" /></a>
          <a> <img src="images/naver.png" alt="Naver logo here" /></a>
          <a>
            <img src="images/daumkakaologo.png" alt="daumkakao logo here"
          /></a>
          <a> <img src="images/airbnb.png" alt="Airbnb logo here" /></a>
        </div>
      </section>
      <!--  end of partner section -->
    </main>
    <footer>
      <a href="#"
      ><img class="footer-logo" src="images/eta_logo.png" alt="ETA institution logo here"
    /></a>
      <p class="copyright">&copy; Eagle Tech Academy. Some Rights Reserved.</p>
    </footer>
    <script src="js/script.js"></script>
  </body>
</html>