I am fairly new to coding and currently trying to write as much as I can get my hands on. I started off playing around with templates but now I've decided to go without and therefore I am sure there is plenty for me to improve.
I created the website with FullPage.js and perhaps someone could have a look at the code structure of the html and tell me how I'm doing. The CSS is a whole new book I guess.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Wedding of J& S</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
<link href="https://fonts.googleapis.com/css?family=Josefin+Slab|Pacifico" rel="stylesheet">
<!--DELETE THIS
<link rel="stylesheet" type="text/css" href="css/jquery-ui.css">
-->
<link rel="stylesheet" type="text/css" href="css/jquery.fullPage.css" />
<link rel="stylesheet" type="text/css" href="css/main.css">
<script src="https://use.fontawesome.com/d48bf56f4a.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/vendors/jquery.easings.min.js"></script>
<script type="text/javascript" src="js/vendors/scrolloverflow.min.js"></script>
<script type="text/javascript" src="js/jquery.fullPage.js"></script>
<script src="js/mailer.js"></script>
<!--initialise fullPage.js-->
<script type="text/javascript">
$(document).ready(function() {
$('#fullpage').fullpage({
sectionsColor: ['#79BD8D', 'whitesmoke', 'whitesmoke', 'whitesmoke', 'whitesmoke'],
css3: true,
loopHorizontal: false,
slidesNavigation: true,
navigation: true,
controlArrows: false,
scrollOverflow: true
});
});
</script>
</head>
<body>
<div id="fullpage">
<!--Start of: HOME-->
<div class="section" id="home">
<div id="logo">
<img src="img/logo_wht.png" alt="2 Lobsters Logo">
</div>
<div class="textfield">
<div class="seperator"> we're getting married! </div>
<h1 style="font-size: 3em;">J & S</h1>
<div class="seperator"> 15 Sep 17 | P </div>
</div>
</div><!--End of: HOME-->
<!--Start of: CALENDAR-->
<div class="section" id="calendar">
<!--START of: CALENDER DISPLAY-->
<div class="slide">
<h1>save the date</h1>
<br>
<div class="cal-display">
<div class="cal-display-top-bar">
<i class="fa fa-minus-circle fa-2x" aria-hidden="true"></i>
<i class="fa fa-minus-circle fa-2x" aria-hidden="true"></i>
</div>
<!--calender columns-->
<div class="cal-col">
<!--first column-->
<div id="cal-months" class="col-1">
<div id="cal-jul" class="cal-month">
<table id="month-jul">
<col span="5">
<col span="2" style="background-color: rgba(220,78,79,0.2);">
<tr>
<th colspan="7" style="text-transform: uppercase">July 2017</th>
</tr>
<tr>
<th>Mon</th>
<th>Tue</th>
<th>Wed</th>
<th>Thu</th>
<th>Fri</th>
<th>Sat</th>
<th>Sun</th>
</tr>
<tr>
<td>26</td>
<td>27</td>
<td>28</td>
<td>29</td>
<td>30</td>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
</tr>
<tr>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
</tr>
<tr>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
<td>29</td>
<td>30</td>
</tr>
<tr>
<td>31</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</table>
</div>
<div id="cal-sep">
<table id="month-aug" class="cal-month">
<col span="5">
<col span="2" style="background-color: rgba(220,78,79,0.2);">
<tr>
<th colspan="7" style="text-transform: uppercase">August 2017</th>
</tr>
<tr>
<th>Mon</th>
<th>Tue</th>
<th>Wed</th>
<th>Thu</th>
<th>Fri</th>
<th>Sat</th>
<th>Sun</th>
</tr>
<tr>
<td>31</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td style="background-color: #DC4E4F; color: #fff; font-weight: bold;">5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
</tr>
<tr>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
</tr>
<tr>
<td>28</td>
<td>29</td>
<td>30</td>
<td>31</td>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
</div>
<div id="cal-aug">
<table id="month-sep" class="cal-month">
<col span="5">
<col span="2" style="background-color: rgba(220,78,79,0.2);">
<tr>
<th colspan="7" style="text-transform: uppercase">September 2017</th>
</tr>
<tr>
<th>Mon</th>
<th>Tue</th>
<th>Wed</th>
<th>Thu</th>
<th>Fri</th>
<th>Sat</th>
<th>Sun</th>
</tr>
<tr>
<td>28</td>
<td>29</td>
<td>30</td>
<td>31</td>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
</tr>
<tr>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
</tr>
<tr>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
</tr>
<tr>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
<td>29</td>
<td>30</td>
<td>1</td>
</tr>
</table>
</div>
</div>
<!--end of first column-->
<!--second column-->
<div class="col-2">
<div class="cal-display-main">
<div class="cal-display-main-header">
<p><span style="font-weight: bold">05</span> | August</p>
<p style="font-size: 1.5em">2017</p>
</div>
<div class="cal-display-main-content">
<div style="font-size: 7em">5</div>
<div>Saturday</div>
</div>
</div>
<div id="cal-details">
<div class="cal-detail">
<div class="cal-details-time">
15:00
</div>
<div class="cal-details-location">
<h4>Office</h4>
<p>Address</p>
<p>D-ZIP P</p>
</div>
</div>
<div class="cal-detail">
<div class="cal-details-time">
17:00
</div>
<div class="cal-details-location">
<h4>Restaurant</h4>
<p>Adress</p>
<p>D-ZIP P</p>
</div>
</div>
</div>
</div>
<!--end of second column-->
</div>
</div>
</div>
<div class="slide">
<h1>Standesamt P</h1>
<br>
<div class="cal-display">
<div class="location">
<img src="img/rathaus.jpg" alt="P - Town Hall">
<p>
We cordially invite you to share in the joy when we exchange marriage
vows and begin our new life together.<br>
Located in the historic town hall is what some claim to be Germany's
most beautiful registry office. We chose this location to get married,
because P is the town where we first met and spent several of our best
years together.
</p>
</div>
</div>
</div>
<div class="slide">
<h1>Das Restaurant</h1>
<br>
<div class="cal-display">
<div class="location fp-auto-height">
<img class="wide" src="img/Restaurant.jpg" alt="Das Restaurant - Restaurant">
<p>
We will continue with the reception where we will have perhaps the best
view over all of P, at Das Restaurant. <br>
From here we will be overlooking the three rivers and historic old town
and enjoy the company of friends and family alongside great food, drinks
and music. Don't forget to bring your dancing shoes!
</p>
</div>
</div>
</div>
</div>
<!--End of: CALENDAR-->
<!--Start of: ABOUT US-->
<div class="section" id="about-us">
<!--ABOUT US SLIDE 1-->
<div class="slide">
<div class="about-couple">
<h1>About us</h1>
<img src="img/couple.gif" alt="The Couple">
<p>slide to read more...</p>
</div>
</div>
<!--ABOUT US SLIDE 2-->
<div class="slide">
<div class="about-couple">
<h1>J Odebrecht</h1>
<div class="bio">
<img src="img/couple.jpg" alt="J Odebrecht">
<p>J was born in Delaware and raised in Hongkong in Germany. She studied in P and now works as a controller.<br>
When J is not at work she likes to spend time in the mountains, read or knit.</p>
</div>
</div>
</div>
<!--ABOUT US SLIDE 3-->
<div class="slide">
<div class="about-couple couple-details">
<h1>S Kazi</h1>
<div class="bio">
<img src="img/couple.jpg" alt="S Kazi">
<p>S was born in Newtown and raised in Washington, Tokyo and Berlin. He also
studied in P and now works as a headhunter at his own company.<br>When S is
not at work he spends most of his time behind his laptop or tablet, cooking
or trailing J in the mountains.</p>
</div>
</div>
</div>
<!--ABOUT US SLIDE 4-->
<div class="slide">
<div class="about-couple couple-details">
<h1>Our story</h1>
<div class="bio">
<p>We met in P during our second semester and started dating soon after on 25 June 2009.
After a little over 6 months we both decided to put the relationship to the test and
went abroad. Upon returning to P we moved in together.<br>
In Sep 2012 we moved to Munich where we live and work today.<br>
On 25 June 2016 we finally got engaged and we intended to get married on the same date one
year later, which didn't work out <i class="fa fa-smile-o" aria-hidden="true"></i></p>
</div>
</div>
</div>
</div>>
<!--End of: ABOUT US-->
<!--Start of: RSVP-->
<div class="section" id="rsvp">
<h1 style="margin-top: 1em;">Will you attend?</h1>
<form id="ajax-contact" method="post" action="mailer.php">
<div class="field">
<label for="name">Your Names</label>
<input type="text" id="name" name="name" required>
</div>
<div class="field">
<label for="pax">How many persons?</label>
<select name="pax" required>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
</div>
<div class="field">
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
</div>
<div class="field">
<label for="message">Where to expect you</label>
<select name="message" required>
<option value="ceremony">Ceremony</option>
<option value="reception">Rececption</option>
<option value="both">Both</option>
</select>
</div>
<div class="field">
<button type="submit">Send</button>
</div>
</form>
<div id="form-messages"></div>
</div>
<!--End of: RSVP-->
<!--Start of: FAQ-->
<div class="section" id="faq">
<div class="slide">
<div class="faqs">
<div class="heading">
<h1>Questions & Answers</h1>
<h2>general questions</h2>
</div>
<div>
<button class="accordion">Why 2 Lobsters?</button>
<div class="panel">
<p>Anyone who has followed the sitcom Friends should recall the scene
from episode 14 of the second season, which ends with Phoebe exclaiming,
that Ross is Rachel's Lobster. As Friends is our favourite TV show of all
times, we chose this.</p>
</div>
<button class="accordion">Why this location?</button>
<div class="panel">
<p>P is the place we first met and also the town where we spent several
of our best years. Das Restaurant was renovated and opened some years ago and upon
visiting for the first time, S immediately said "This is where we'll get married!".
You'll see why.</p>
</div>
<button class="accordion">Why now?</button>
<div class="panel">
<p>Why not?</p>
</div>
</div>
</div>
</div>
<div class="slide">
<div class="faqs">
<div class="heading">
<h1>Questions & Answers</h1>
<h2>travel & accommodation</h2>
</div>
<div>
<button class="accordion">What are the best means of transportation?</button>
<div class="panel">
<p>The most convenient is probably to rent a car, which can be done via
<a href="http://www.europcar.com" alt="Europcar" target="_blank">Europcar</a>,
<a href="http://www.sixt.com" alt="Sixt" target="_blank">Sixt</a>,
<a href="http://www.avis.com" alt="Avis" target="_blank">Avis</a>
and others that are well known. However we recommend
<a href="http://www.enterprise.com" alt="Enterprise" target="_blank">Enterprise</a>
or even better <a href="http://www.swing-autovermietung.de/" alt="Swing" target="_blank">Swing</a>,
as they offer excellent prices and are available in Munich.</p>
<p>Another option is to travel by train, which is will cost you around 22 Euros via BayernTicket and
can be recommended if you come from Munich and do not mind spending some time on the train.
If you want to travel fast, pick the ICE, which is around 50% faster but will cost more than double.</p>
</div>
<button class="accordion">What about accommodation?</button>
<div class="panel">
<p>P offers hotels and hostels for different budgets. Please stay tuned, as we arrange for group prices.
You should be looking to spend betwenn 30-100 Euros per night per double bed rooms.</p>
</div>
<button class="accordion">Barrier free travel</button>
<div class="panel">
<p>Das Restaurant has barrier free access to the restaurant itself as well as to the lavatories. Basically,
everything is easily accessible whether you are in a wheelchair or pushing a baby carriage. We even have parking
right outside the restaurant, if you do not want to walk too far.</p>
</div>
<button class="accordion">Let us help!</button>
<div class="panel">
<p>We have traveled to and from P a lot. Hence we know our way around and can probably give you some
time and money saving insights. If you ask us, we'll be more than happy to help you with your travel and accommodation
arrangements.</p>
</div>
</div>
</div>
</div>
<div class="slide">
<div class="faqs">
<div class="heading">
<h1>Questions & Answers</h1>
<h2>Formalities</h2>
</div>
<div>
<button class="accordion">Dress code</button>
<div class="panel">
<p>No white ties, no black ties. If you like: no ties. We will try to keep things as informal as
possible. So whatever you feel comfortable wearing to a nice restaurant, should be great. Please keep
in mind, that it might get hot (30° C) and there is no air conditioning but a light breeze.</p>
<p>Also: Don't forget your dancing shoes!</p>
</div>
<button class="accordion">Different diets</button>
<div class="panel">
<p>As we will be a culturally diverse bunch we have made arrangements for all sorts of diets.
Whether you like kosher, halaal, vegetarian or gluten- or lactose-free we will have you covered.</p>
</div>
<button class="accordion">Gifts & presents</button>
<div class="panel">
<p>Your presence at our wedding is all that we wish for. However, if you want to give a gift, we will be grateful
for a cash donation towards our honeymoon trip.</p>
</div>
</div>
</div>
</div>
</div>
<!--End of: FAQ-->
</div>
<script>
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].onclick = function(){
this.classList.toggle("active");
this.nextElementSibling.classList.toggle("show");
}
}
</script>
</body>
</html>
<article>tag to specify the main content so search hits may be more precise \$\endgroup\$