-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
138 lines (120 loc) · 6.95 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>World-Congress on Quantum Physics</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="style.css" />
<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&display=swap" rel="stylesheet">
<link href="http://fonts.cdnfonts.com/css/cocogoose" rel="stylesheet">
</head>
<body>
<header><nav class="navbar navbar-expand-lg position-absolute
container-fluid d-flex justify-content-between align-items-center nav-color p-3 ps-lg-5">
<a class="navbar-brand logo" href="index.html"><img src="images/logo.png" alt='quantum' width="30" height="30"></a>
<button class="navbar-toggler hamburger">
<span class="navbar-toggler-icon"></span>
</button>
<div class="nav-menu collapse navbar-collapse justify-content-end">
<ul class="navbar-nav menu">
<li class="nav-item ps-lg-5">
<a class="nav-link" href="about.html">About</a>
</li>
<li class="nav-item ps-lg-5">
<a class="nav-link" href="#">Program</a>
</li>
<li class="nav-item ps-lg-5">
<a class="nav-link" href="#">Join</a>
</li>
<li class="nav-item ps-lg-5">
<a class="nav-link" href="#">Sponsor</a>
</li>
<li class="nav-item ps-lg-5">
<a class="nav-link" href="#">News</a>
</li>
<li class="nav-item ps-lg-5">
<a class="nav-link" href="#">CC Campaign</a>
</li>
</ul>
</div>
</nav>
</header>
<main class="contaner-fluid">
<section class="headline container-fluid px-3 py-5 d-flex justify-content-center">
<div class="d-flex flex-column align-items-around">
<h2 class="greeting pt-5">Hello Future!</h2>
<h1 class="title">WORLD-CONGRESS ON QUANTUM PHYSICS 2022</h1>
<p class ="border border-white border-3 p-3 mt-3 bg-light">
Join this interesting journey. We will introduce you to this
amazing limitless field where all low physics does not apply.
Meet inspiring speakers and experts talking about science.
Get a chance to be part of this unique conference.
</p>
<h2><time datetime="2022-06-04 20:00">2022-06-04 (Sat) 20:00</time></h2>
<p>@ Museum of Serbia, Science center</p>
</div>
</section>
<section class="container-fluid d-flex flex-column bg-dark align-items-center justify-content-around" id="main-program">
<h6 class="pt-3">Main Program</h6>
<div class="mb-3 pt-2 line"></div>
<div class="d-flex table align-items-center">
<article class="d-flex my-2 p-2 text-bold justify-content-around align-items-center">
<img src="images/activity1.webp" alt='Lecture' width="30" height="30">
<h6 class="mx-3">Lecture</h6>
<small class="">Listen to these amazing speakers who will lead you through the different topics of the Quantum field.</small>
</article>
<article class="d-flex my-2 p-2 text-bold justify-content-around align-items-center">
<img src="images/activity2.png" alt='Science' width="30" height="30">
<h6 class="mx-3">Experiment</h6>
<small class="">Watch how different scientific performing unshown experiments.</small>
</article>
<article class="d-flex my-2 p-2 text-bold justify-content-around align-items-center">
<img src="images/activity3.webp" alt='Forum' width="30" height="30">
<h6 class="mx-3">Forum</h6>
<small class="">Share your thoughts and opinions with others for each topic.</small>
</article>
<article class="d-flex my-2 p-2 text-bold justify-content-around align-items-center">
<img src="images/activity4.webp" alt='Workshop' width="30" height="30">
<h6 class="mx-3">Workshop</h6>
<small class="">Make your own experiment and practice with others.</small>
</article>
<article class="d-flex my-2 p-2 text-bold justify-content-around align-items-center">
<img src="images/activity5.webp" alt='Games' width="30" height="30">
<h6 class="mx-3">Games</h6>
<small class="">Have a joyful time while playing board games and have the opportunity to meet different people.</small>
</article>
</div>
<button class="p-4 text-white my-4 join">Join Congress on Quantum Physics</button>
<button class="p-4 text-white my-4 text-decoration-underline bg-transparent border-0 programBtn">SEE THE WHOLE PROGRAM</button>
</section>
<section class="container-fluid d-flex flex-column justify-content-center align-items-center">
<h2 class="titleSmall pt-4">Feature Speakers</h2>
<div class="mb-3 pt-2 line"></div>
<div class="p-3 speakers w-lg-75 ps-lg-5 ms-lg-5">
</div>
</section>
<section class="container-fluid d-flex flex-column align-items-center justify-content-center p-5" id="partners">
<h2>Partners</h2>
<div class="mb-3 pt-2 line"></div>
<div class="d-flex flex-wrap align-items-center justify-content-center">
<img class = 'ps-4 m-3' src = 'images/partner1.webp' alt='sifi' height="30" width="70">
<img class = 'm-3' src = 'images/partner2.png' alt='tree' height="30" width="30">
<img class = 'm-3' src = 'images/partner3.png' alt='facebook' height="30" width="30">
<img class = 'm-3' src = 'images/partner4.png' alt='youtube' height="20" width="100">
<img class = 'm-3' src = 'images/partner5.png' alt='peace' height="30" width="30">
<img class = 'm-3' src = 'images/partner6.webp' alt='readeer' height="30" width="30">
</div>
</section>
<section class="container-fluid d-flex align-items-center justify-content-around px-3 py-5">
<a href="index.html" class="text-decoration-none d-flex flex-column
align-items-center w-50"><img class='logo1' src = 'images/logo.png' alt='quantum' width="30" height="30">
<span class="text-success">Congress Quantum Physics</span></a>
<small class="w-50 text-center">2022 Think Science Serbia. Some right received.</small>
</section>
</main>
<script src="script.js"></script>
</body>
</html>