Revamp Contact Us section (english page)

This commit is contained in:
Massimo Di Lullo 2019-05-12 21:55:09 -04:00
parent b9854ee16c
commit 50d375a641
3 changed files with 153 additions and 112 deletions

View File

@ -1,9 +1,6 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
@ -15,6 +12,9 @@
<!-- Bootstrap Core CSS --> <!-- Bootstrap Core CSS -->
<link href="./../../static/css/bootstrap.min.css" rel="stylesheet"> <link href="./../../static/css/bootstrap.min.css" rel="stylesheet">
<!-- Font Awesome Icons -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
<!-- Custom CSS --> <!-- Custom CSS -->
<link href="./../../static/css/business-frontpage.css" rel="stylesheet"> <link href="./../../static/css/business-frontpage.css" rel="stylesheet">
@ -24,41 +24,30 @@
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]--> <![endif]-->
</head> </head>
<body> <body>
<!-- Navigation --> <!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> <nav class="navbar fixed-top navbar-dark bg-dark navbar-expand-lg" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="./index.html">Montréal Game Jam</a> <a class="navbar-brand" href="./index.html">Montréal Game Jam</a>
</div> <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#main-navbar-collapse">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Collect the nav links, forms, and other content for toggling --> <!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <div class="collapse navbar-collapse" id="main-navbar-collapse">
<ul class="nav navbar-nav"> <ul class="navbar-nav mr-auto">
<li> <li class="nav-item">
<a href="https://www.eventbrite.ca/e/billets-montreal-game-jam-2019-52792314233">Registration</a> <a class="nav-link" href="https://www.eventbrite.ca/e/billets-montreal-game-jam-2019-52792314233">Registration</a>
</li> </li>
<li> <li class="nav-item">
<a href="http://globalgamejam.org/">Global Game Jam</a> <a class="nav-link" href="http://globalgamejam.org/">Global Game Jam</a>
</li> </li>
<li> <li class="nav-item">
<a href="./../../lang/fr/index.html">Fr</a> <a class="nav-link" href="./../../lang/fr/index.html">Fr</a>
</li> </li>
</ul> </ul>
</div> </div>
<!-- /.navbar-collapse --> <!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav> </nav>
<!-- Image Background Page Header --> <!-- Image Background Page Header -->
@ -67,8 +56,28 @@
<img src="../../static/img/header_en.jpg"/> <img src="../../static/img/header_en.jpg"/>
</header> </header>
<aside class="social-nav navbar navbar-light">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link" href="https://www.facebook.com/MontrealGameJam/">
<i class="fab fa-facebook-f fa-2x"></i>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://twitter.com/mtlgamejam">
<i class="fab fa-twitter fa-2x"></i>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="mailto:info@mtlgj.org">
<i class="fas fa-at fa-2x"></i>
</a>
</li>
</ul>
</aside>
<!-- Page Content --> <!-- Page Content -->
<div class="container"> <main class="container-fluid">
<div class="row main"> <div class="row main">
<div class="col-sm-8"> <div class="col-sm-8">
<h2>What's this?</h2> <h2>What's this?</h2>
@ -86,7 +95,8 @@
<br>Montréal, Québec <br>Montréal, Québec
<br> <br>
</address> </address>
<p><iframe src="https://maps.google.ca/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=1100+Rue+Notre-Dame+Ouest,+Montreal,+QC+H3C+1K3&amp;sll=45.495072,-73.562933&amp;sspn=0.012589,0.027874&amp;gl=ca&amp;ie=UTF8&amp;hq=&amp;hnear=1100+Rue+Notre-Dame+Ouest,+Montr%C3%A9al,+Communaut%C3%A9-Urbaine-de-Montr%C3%A9al,+Qu%C3%A9bec+H3C&amp;t=m&amp;z=14&amp;ll=45.494997,-73.562826&amp;output=embed" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" width="610" height="400"></iframe><br> <p>
<iframe src="https://maps.google.ca/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=1100+Rue+Notre-Dame+Ouest,+Montreal,+QC+H3C+1K3&amp;sll=45.495072,-73.562933&amp;sspn=0.012589,0.027874&amp;gl=ca&amp;ie=UTF8&amp;hq=&amp;hnear=1100+Rue+Notre-Dame+Ouest,+Montr%C3%A9al,+Communaut%C3%A9-Urbaine-de-Montr%C3%A9al,+Qu%C3%A9bec+H3C&amp;t=m&amp;z=14&amp;ll=45.494997,-73.562826&amp;output=embed" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" width="610" height="400"></iframe><br>
<small><a style="color: #0000ff; text-align: left;" href="https://maps.google.ca/maps?f=q&amp;source=embed&amp;hl=en&amp;geocode=&amp;q=1100+Rue+Notre-Dame+Ouest,+Montreal,+QC+H3C+1K3&amp;sll=45.495072,-73.562933&amp;sspn=0.012589,0.027874&amp;gl=ca&amp;ie=UTF8&amp;hq=&amp;hnear=1100+Rue+Notre-Dame+Ouest,+Montr%C3%A9al,+Communaut%C3%A9-Urbaine-de-Montr%C3%A9al,+Qu%C3%A9bec+H3C&amp;t=m&amp;z=14&amp;ll=45.494997,-73.562826">View Larger Map</a></small></p> <small><a style="color: #0000ff; text-align: left;" href="https://maps.google.ca/maps?f=q&amp;source=embed&amp;hl=en&amp;geocode=&amp;q=1100+Rue+Notre-Dame+Ouest,+Montreal,+QC+H3C+1K3&amp;sll=45.495072,-73.562933&amp;sspn=0.012589,0.027874&amp;gl=ca&amp;ie=UTF8&amp;hq=&amp;hnear=1100+Rue+Notre-Dame+Ouest,+Montr%C3%A9al,+Communaut%C3%A9-Urbaine-de-Montr%C3%A9al,+Qu%C3%A9bec+H3C&amp;t=m&amp;z=14&amp;ll=45.494997,-73.562826">View Larger Map</a></small></p>
</p> </p>
<h2>How Much?</h2> <h2>How Much?</h2>
@ -100,34 +110,25 @@
The ultimate goal of the Game Jam is simple. We want you to have a lot of fun and do what you love most: create games! The ultimate goal of the Game Jam is simple. We want you to have a lot of fun and do what you love most: create games!
</p> </p>
</div> </div>
<div class="col-sm-4">
<h2>Contact Us</h2>
<address>
<abbr>Email:</abbr> <a href="mailto:info@mtlgj.org">info@mtlgj.org</a></br>
<abbr>Twitter:</abbr> <a href="https://twitter.com/mtlgamejam">MTLGameJam</a></br>
<abbr>Facebook:</abbr> <a href="https://www.facebook.com/MontrealGameJam/">MontréalGameJam</a>
</address>
</div>
</div> </div>
<!-- /.row --> <!-- /.row -->
</main>
<!-- /.container -->
<!-- Footer --> <!-- Footer -->
<footer> <footer class="container-fluid">
<div class="row"> <div class="row">
<div class="col-lg-12"> <div class="col-lg-12">
<p>Copyright &copy; Montréal Game Jam 2018</p> <p>Copyright &copy; Montréal Game Jam 2020</p>
</div> </div>
</div> </div>
</footer> </footer>
</div>
<!-- /.container -->
<!-- jQuery --> <!-- jQuery -->
<script src="./../../static/js/jquery.js"></script> <script src="./../../static/js/jquery.min.js"></script>
<!-- Bootstrap Core JavaScript --> <!-- Bootstrap Core JavaScript -->
<script src="./../../static/js/bootstrap.min.js"></script> <script src="./../../static/js/bootstrap.min.js"></script>
</body> </body>
</html> </html>

View File

@ -122,7 +122,7 @@
<!-- /.container --> <!-- /.container -->
<!-- jQuery --> <!-- jQuery -->
<script src="./../../static/js/jquery.js"></script> <script src="./../../static/js/jquery.min.js"></script>
<!-- Bootstrap Core JavaScript --> <!-- Bootstrap Core JavaScript -->
<script src="./../../static/js/bootstrap.min.js"></script> <script src="./../../static/js/bootstrap.min.js"></script>

View File

@ -7,8 +7,8 @@
body { body {
padding-top: 50px; /* Required padding for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */ padding-top: 50px; /* Required padding for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */
background-color: #e4e4e4; background-color: #e4e4e4;
font-family: Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
} }
/* Header Image Background - Change the URL below to your image path (example: ../images/background.jpg) */ /* Header Image Background - Change the URL below to your image path (example: ../images/background.jpg) */
.business-header { .business-header {
@ -53,12 +53,52 @@ body {
overflow:auto; overflow:auto;
} }
body > .container{ /*body > .container{
width: 851px; width: 851px;
}*/
/*
REVAMP CODE
*/
@media screen and (max-width: 992px) {
#main-navbar-collapse {
margin-top: 10px;
padding-top: 5px;
border-top: 2px solid #303030;
}
}
.social-nav {
position: fixed;
right: 0;
top:50%;
padding: 0;
}
.social-nav .nav-item {
background-color: #fafafa;
border-top: 1px solid #aaa;
border-left: 1px solid #aaa;
}
.social-nav .nav-item:last-of-type {
border-bottom: 1px solid #aaa;
}
.social-nav .nav-item a {
padding: 0.75rem;
}
.social-nav .nav-item a i {
display: flex;
justify-content: center;
} }
footer { footer {
position: relative;
clear:both;
padding-top:20px; padding-top:20px;
} }
footer div {
text-align: center;
}