Capstone/index.html at main · saimaAnis21/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
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
      integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
      crossorigin="anonymous"
    />
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
      crossorigin="anonymous"></script>

    <script src="https://use.fontawesome.com/93b7dd2125.js"></script>
    <script src="https://kit.fontawesome.com/7787f36583.js" crossorigin="anonymous"></script>

    <link rel="stylesheet" href="stylesheets/styles.css" />
    <link rel="stylesheet" href="stylesheets/reset.css" />

    <title>Conference</title>
  </head>

  <body>
    <!--nav bar-->
    <header>
    <nav>
      <!--Top nav-->
      <div class="bg-black w-100 h-px-50">
        <div class="hambrgr d-md-none left-10 p-relative ">
          <div class="dd">
            <!--<button >Dropdown</button>-->
            <a href="#"><i class="fas fa-bars fa-3x txt-black"></i></a>
            <div class="dd-content">
              <a href="aboutus.html" class="txt-black">About</a>
              <a href="#" class=" txt-black">Program</a>
              <a href="#" class=" txt-black">Join</a>
              <a href="#" class="txt-black">Sponsor</a>
              <a href="#" class=" txt-black">News</a>
              <a href="ticket.html" class="txt-black">Buy Tickets</a>
            </div>
          </div>
        </div>


        <div class="right_nav d-mob-none right-md-150 p-relative d-md-flex w-top-nav float-right wt_300">
        <a href="#"><i class="fa fa-facebook-f fa-1x txt-grey"></i></a>
        <a href="#"><i class="fab fa-twitter fa-1x txt-grey"></i></a>
        <a href="#" class="txt-grey">English</a>
        <a href="#" class="txt-grey">My Page</a>
        <a href="#" class="txt-grey">Logout</a>
        </div>
      </div>
      <!--Bottom nav-->
      <div class="zindex-0 bg-white w-100 h-px-80">
      <img alt="logo" class="logo_nav left-md-150 left-sm-10  p-relative left-150" src="images/logo.png">
      <div class="right_nav right-md-150 p-relative d-md-flex w-50 float-right wt_300">
      <a href="aboutus.html" class="txt-black">About</a>
      <a href="#" class=" txt-black">Program</a>
      <a href="#" class=" txt-black">Join</a>
      <a href="#" class="txt-black">Sponsor</a>
      <a href="#" class=" txt-black">News</a>
      <a href="ticket.html" class="txt-black border-red p-10">Buy Tickets</a>
        </div>
      </div>
    </nav>
  </header>

   <main class="position-absolute">
<!--hero -->
     <section>
       <div class="w-100 hero_sec">
         <div class="width-hero mx-auto pad-top-80 p-md-absolute left-md-150">
             <h2 class="txt-red font_size_med">"Ideas worth sharing!"</h2>
             <h1 class="txt-darkred font_coco font_size_big line_height_60 pad_top">
             Global Conference <br> TEDx Talks <br> 2021</h1>
             <div class="width-para">
             <p class="p-10 font_size_xsm txt-black border_width border_color_white border_style">A joyful celebration believing in the value of openness and sharing, creating a positive change with people from over 80 countries is takign place in January, in korea</p>
             </div>
             <h2 class="txt-darkgrey font_coco font_size_med">2021.01.15(FRI) ~ 16(SAT)</h2>
             <h3 class="font_size_sm">@ National Museum of Korea, Art Center Nabi and more</h3>
         </div>
       </div>
     </section>
<!--Main Programs-->
     <section>
        <div class="main-prog w-100">

             <div class="flex-wrap">
               <!--programs heading-->
               <div class="txt-grey pad_top font_size_med">Main Program</div>
               <div class="mp-undrline"></div>
               <!--Programs-->
               <div class="programs mx-auto">
                  <div class="prog-item w-sm-100">
                    <i class="fas fa-chalkboard-teacher fa-2x txt-white pad-sm-10"></i>
                    <span class="txt-red font_size_sm width-sm-55">Lecture</span>
                    <span class="txt-white font_size_xsm pad-left">Listen to the speakers from various countries about the messages of sharing and opening.</span>
                  </div>
                  <div class="prog-item w-sm-100">
                    <i class="far fa-comments fa-2x txt-white pad-sm-10"></i>
                    <span class="txt-red font_size_sm width-sm-55">Forum</span>
                    <span class="txt-white font_size_xsm pad-left">Listen to the speakers from various countries about the messages of sharing and opening.</span>
                  </div>
                  <div class="prog-item w-sm-100">
                    <i class="fas fa-chalkboard fa-2x txt-white pad-sm-10"></i>
                    <span class="txt-red font_size_sm width-sm-55">Workshop</span>
                    <span class="txt-white font_size_xsm  pad-left">Listen to the speakers from various countries about the messages of sharing and opening.</span>
                  </div>
                  <div class="prog-item w-sm-100">
                    <i class="far fa-comment-dots fa-2x txt-white pad-sm-10"></i>
                    <span class="txt-red font_size_sm width-sm-55">Feedback</span>
                    <span class="txt-white font_size_xsm  pad-left">Listen to the speakers from various countries about the messages of sharing and opening.</span>
                  </div>
                  <div class="prog-item w-sm-100">
                    <i class="fas fa-ticket-alt fa-2x txt-white pad-sm-10"></i>
                    <span class="txt-red font_size_sm width-sm-55">Tickets</span>
                    <span class="txt-white font_size_xsm  pad-left">Listen to the speakers from various countries about the messages of sharing and opening.</span>
                  </div>
               </div>

               <!--Tickets div-->
               <div class="tkts txt-white d-md-none">
                 Join the TED talks 2021
               </div>

               <!--see the whole program-->
               <a href="#" class="txt-white txt-undrline all-upper-case font_size_sm pad_top d-mob-none">See the whole program</a>

            </div>
        </div>
     </section>
<!--Featured Speakers-->
     <section>
        <div class="feat-spkrs w-100">
          <div class="flex-wrap txt-black">
              <!--speakers heading-->
              <div class="pad_top font_size_med">Featured Speakers</div>
              <div class="mp-undrline"></div>
              <div class="speakers-grid mx-auto pad_top">
                <div class="speakers-item line_height_sm">
                  <img alt="speaker" class="spkr-img p-10" src="images/spkr1.png">
                  <div class="p-10 d-flex flex-column">
                    <span class="font_size_sm p-bottom"><strong>Yochai Benkler</strong></span>
                    <span class="font_size_xsm txt-red txt-italic p-bottom"><strong>Berkman Professor for Entrepreneurial Legal Studies at Harvard Law School</strong></span>
                    <span class="grey-undrline"></span>
                    <span class="font_size_xsm p-top">Benkler studies commons-based peer production, and published his seminal book The Wealth of Networks in 2006.</span>
                  </div>
                </div>

                <div class="speakers-item line_height_sm">
                  <img alt="speaker" class="spkr-img p-10" src="images/spkr2.png">
                  <div class="p-10 d-flex flex-column">
                    <span class="font_size_sm p-bottom"><strong>Kilnam Chon</strong></span>
                    <span class="grey-undrline"></span>
                    <span class="font_size_xsm p-top">Kilnam CHon helped bring the internet to Asia and is an outspoken advocate for the open web and digital commons. in 2012 he was inducted into the inaugural class of the Internet Society's(ISOC) internet hall of fame.</span>
                  </div>
                </div>

                <div class="speakers-item line_height_sm">
                  <img alt="speaker" class="spkr-img p-10" src="images/spkr3.png">
                  <div class="p-10 d-flex flex-column">
                    <span class="font_size_sm p-bottom"><strong>SohYeong Noh</strong></span>
                    <span class="font_size_xsm txt-red txt-italic p-bottom"><strong>Director of Art centre Nabi and a board member of CC Korea</strong></span>
                    <span class="grey-undrline"></span>
                    <span class="font_size_xsm p-top">As the main venue for the new media art production in Korea, Nabi promotes cross-disciplinary collaboration and understanding among science technology, humanities and the arts.</span>
                  </div>
                </div>

                <div class="speakers-item line_height_sm">
                  <img alt="speaker" class="spkr-img p-10" src="images/spkr4.png">
                  <div class="p-10 d-flex flex-column">
                    <span class="font_size_sm p-bottom"><strong>Julia Leda</strong></span>
                    <span class="font_size_xsm txt-red txt-italic p-bottom"><strong>President of Young Pirates of Europe</strong></span>
                    <span class="grey-undrline"></span>
                    <span class="font_size_xsm p-top">European integration, political democracy and participation of youth through online as her major concern. Reda's report outlining potential changes to EU copyright law was approved by the Parliament in July.</span>
                  </div>
                </div>

                <div class="speakers-item line_height_sm">
                  <img alt="speaker" class="spkr-img p-10" src="images/spkr5.png">
                  <div class="p-10 d-flex flex-column">
                    <span class="font_size_sm p-bottom"><strong>Lila Tretikov</strong></span>
                    <span class="font_size_xsm txt-red txt-italic p-bottom"><strong>Executive Director of the Wikimedia Foundation</strong></span>
                    <span class="grey-undrline"></span>
                    <span class="font_size_xsm p-top">Lila Tretikov is the Executive Director of Wikimedia Foundation, the non-profit organization that operates Wikipedia. Wikipedia is freely available in 290 languages and used by nearly half a billion people around the world.</span>
                  </div>
                </div>

                <div class="speakers-item line_height_sm">
                  <img alt="speaker" class="spkr-img p-10" src="images/spkr6.png">
                  <div class="p-10 d-flex flex-column">
                    <span class="font_size_sm p-bottom"><strong>Ryan Merkley</strong></span>
                    <span class="font_size_xsm txt-red txt-italic p-bottom"><strong>Executive Director of the Wikimedia Foundation</strong></span>
                    <span class="grey-undrline"></span>
                    <span class="font_size_xsm p-top">Ryan had been leading open-source projects at the Mozilla Foundation such as the open source movement.</span>
                  </div>
                </div>

              </div>
          </div>

        </div>


     </section>
<!--Patrners-->
    <section>
       <div class="partners w-100  d-mob-none ">
         <div class="mx-auto pad_top flex-wrap">
          <div class="pad_top font_size_med txt-grey">Partners</div>
          <div class="mp-undrline"></div>
          <div class="pad_top text-center">
            <img alt="logo" src="images/mozilla.png" class="p-10">
            <img alt="logo" src="images/google.png" class="p-10">
            <img alt="logo" src="images/mozilla.png" class="p-10">
            <img alt="logo" src="images/google.png" class="p-10">
            <img alt="logo" src="images/mozilla.png" class="p-10">
        </div>
        </div>
       </div>
    </section>
<!--Footer-->
<footer>
  <div class="footer-div bg-white w-100 d-mob-none">
    <div class="flex-wrap mx-auto p-top-40 ">
      <div>
        <img alt="logo" src="images/logo.png" class="logo_footer">
        <span class="font_size_xsm p-10">2021 TEDx Talks. Some Rights Reserved</span>
      </div>
    </div>
 </div>
</footer>
   </main>


  </body>
</html>