-
Notifications
You must be signed in to change notification settings - Fork 0
/
about.html
148 lines (138 loc) · 7.59 KB
/
about.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
139
140
141
142
143
144
145
146
147
148
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="//db.onlinewebfonts.com/c/d14035f6b1afeabafbee4abb2ebf0fc6?family=COCOGOOSE" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" href="styles/reset.css" type="text/css" media="screen" />
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Lato&display=swap" rel="stylesheet">
<script src='https://kit.fontawesome.com/a076d05399.js'></script>
<link rel="stylesheet" href="styles/stylesheet.css" type="text/css" media="screen" />
<title>Sci-Fi Summit</title>
</head>
<body>
<!-- Header -->
<header class="d-none d-md-flex bg-dark justify-content-end align-items-center px-5">
<div class="header">
<a href="#"><i class="fab fa-facebook-f m-1"> </i></a>
<a href="#"><i class="fab fa-twitter m-1"></i></a>
<a href="#" class="m-1">English</a>
<a href="#" class="m-1">My Page</a>
<a href="#" class="m-1">Log Out</a>
</div>
</header>
<!-- Navbar of the site. It uses a bootstrap tooggler button -->
<nav class="navbar navbar-expand-md navbar-light bg-tranparency px-4 px-md-5">
<a class="d-none d-md-block navbar-brand" href="index.html">
<img src="img/sci-fi.png" alt="Sci-Fi logo" class="img-fluid w-50">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<i class="fas fa-bars text-muted dark"></i>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link primary" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="tickets.html">Tickets</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Join</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Sponsor</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">News</a>
</li>
</ul>
</div>
<a href="#" class="box-highlight d-none d-md-block">Sci-Fi Campaign</a>
</nav>
<!-- Main section -->
<main>
<!-- Jumbotron -->
<article class="jumbotron text-center">
<p class="text-right small pr-3"><a href="index.html"><i class="fas fa-home casa"></i></a><span class="primary"> > </span> <a href="about.html">About</a> <span class="primary"> > </span> <a href="tickets.html"> Tickets </a>
<h2 class="primary">"Connect with the future!"</h2>
<h1 class="display-4 text-uppercase font-weight-bold">Microverse Remote <br class="d-none d-md-inline">Sci-Fi Summit 2020</h1>
<div class="lead box-about w-100 border border-secondary bg-white">
<p>The Microverse Remote Sci-Fi Summit 2020 brings together the best Sci-Fi writers of all the times, epochs, planets, and multiverses. The Summit is entirely remote, letting our fans be in contact with their favorite writers, but without any danger.</p>
<p>This year, you can listen to some of the most prominent time-travelers of all the times and space, like an H. G. Wells, who just arrived from the 8000th Century this week.</p>
<p>So, if you're an enthusiastic reader of the best Sci-Fi, you will have a unique opportunity to ask many Sci-Fi best-sellers what do they think about the future. </p>
<p>Don't miss this event that you can enjoy in your house by Zoom.</p>
</div>
<span>Send us an e-mail for any further questions about MR Sci-Fi Summit 2020!</span>
<br>
<a href="mailto:[email protected]">[email protected] ></a>
</article>
<!-- Main program -->
<article class="border-top logo-info text-center py-4 m-2">
<h2> Microverse Remote Sci-Fi 2020 Logo </h2>
<hr>
<p>The Logo of MR Sci-Fi Summit was done in five minutes using only HTML, CSS and an icon of Font Awesome 5.</p>
<p>Even the mindless design, the final version took almost one day because aligning issues.</p>
<p>Share the logo with your friends around the universe</p>
<div class="w-50 m-auto border border-secondary px-2 py-4 d-flex justify-content-center align-items-center">
<i class="fas fa-meteor primary"></i>
<h5 class="text-left"> Microverse <br>Sci-Fi Foundation</h5>
</div>
</article>
<!-- Featured Speakers -->
<article class="border-top logo-info text-center py-4 m-2">
<h2 class="text-center pt-4">See the past MR Sci-Fi Summits</h2>
<hr>
<p> Take a look at the last two MR Sci-Fi Summits which took place in Trantor and Tatooine</p>
<div class="container">
<div class="row">
<div class="m-auto col-12 col-md-5">
<div class=" mx-auto my-1 trantor-events">
<div class="hero-text">
<h1 class="h3 font-weight-bold"> 2018 </h1>
<h6> MR Sci-Fi Summit in Trantor</h6>
</div>
</div>
</div>
<div class="m-auto col-12 col-md-5 col-md-offset-2">
<div class="mx-auto my-1 tatooine-events">
<div class="hero-text">
<h1 class="h3 font-weight-bold"> 2019 </h1>
<h6> MR Sci-Fi Summit in Tatooine</h6>
</div>
</div>
</div>
</div>
</div>
</article>
<!-- Partners -->
<article class="partner d-block">
<h2 class="text-center secondary mt-2">Partners</h2>
<div class="logos py-4 m-auto">
<img src="img/icons/evilcorp.png" alt="evil corp logo" class="partners px-2">
<img src="img/icons/umbrella.png" alt="evil corp logo" class="partners px-2">
<img src="img/icons/nervlogo.png" alt="evil corp logo" class="partners px-2">
<img src="img/icons/startrek.png" alt="evil corp logo" class="partners px-2">
<img src="img/icons/starkindustries.png" alt="evil corp logo" class="partners">
</div>
</article>
</main>
<footer class="d-flex justify-content-center">
<div class="logo d-flex align-items-center my-auto">
<i class="fas fa-meteor"></i>
<h5> Microverse <br>Sci-Fi Foundation</h5>
</div>
<div class="footer-copyright text-center my-auto">© 2020 Copyright:
<a href="https://mdbootstrap.com/"> Designed by Cindy Shin</a>
</div>
</footer>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>