A website created for the 30th Anniversary Fete for a local Primary School.
Last active
April 3, 2016 03:37
-
-
Save jessbudd/e44fb11539bd98febd56afe916d7eed3 to your computer and use it in GitHub Desktop.
30th Anniversary Fete v1
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <body> | |
| <div class="container"> | |
| <nav class="navbar-wrapper navbar-default" role="navigation"> | |
| </nav> | |
| <header class="row"> | |
| <div class="col-md-12"> | |
| <img class="img-responsive" src="https://i.imgsafe.org/784b21c.png"> | |
| <div class="col-md-12"> | |
| <img class="img-responsive center" src="https://i.imgsafe.org/a143b27.png" width="500em"> | |
| </div> | |
| <div class="row"> | |
| <div class="col-md-12 text-center"> | |
| <h1>Twilight Fete</h1> | |
| <h2 class="date">Sunday 26 March 2017</h2> | |
| <h2>Forest Crescent Primary School</h2> | |
| <p class="time">from 3pm to 7pm</p> | |
| </div> | |
| </div> | |
| </header> | |
| <div class="row"> | |
| <div class="col-md-12 heading"> | |
| <h3>What's Happening</h3> | |
| </div> | |
| </div> | |
| <div class="row"> | |
| <div class="col-md-4 col-sm-4 text-center"> | |
| <div class="profile-card"> | |
| <img class="img-circle img-responsive" src="http://placehold.it/150x150" alt=""> | |
| <h4>Entertainment</h4> | |
| <p> Etiam quis erat turpis. Nunc id risus ut orci facilisis pretium a at orci. Integer commodo pulvinar nunc, id scelerisque diam sagittis id. Maecenas pharetra diam ut metus finibus tempor. Nam eget lectus vitae sapien scelerisque sagittis. Integer mollis tincidunt nulla, suscipit imperdiet mauris consequat maximus. Pellentesque imperdiet vitae lorem vitae varius. Mauris blandit quis urna ultricies luctus. Ut mollis sodales metus vitae placerat.</p> | |
| </div> | |
| </div> | |
| <div class="col-md-4 col-sm-4 text-center"> | |
| <div class="profile-card"> | |
| <img class="img-circle" src="http://placehold.it/150x150" alt=""> | |
| <h4>Market Stalls</h4> | |
| <p>Etiam quis erat turpis. Nunc id risus ut orci facilisis pretium a at orci. Integer commodo pulvinar nunc, id scelerisque diam sagittis id. Maecenas pharetra diam ut metus finibus tempor. Nam eget lectus vitae sapien scelerisque sagittis. Integer mollis tincidunt nulla, suscipit imperdiet mauris consequat maximus. Pellentesque imperdiet vitae lorem vitae varius. Mauris blandit quis urna ultricies luctus. Ut mollis sodales metus vitae placerat.</p> | |
| </div> | |
| </div> | |
| <div class="col-md-4 col-sm-4 text-center"> | |
| <div class="profile-card"> | |
| <img class="img-circle" src="http://placehold.it/150x150" alt=""> | |
| <h4>Food & Drink</h4> | |
| <p>Etiam quis erat turpis. Nunc id risus ut orci facilisis pretium a at orci. Integer commodo pulvinar nunc, id scelerisque diam sagittis id. Maecenas pharetra diam ut metus finibus tempor. Nam eget lectus vitae sapien scelerisque sagittis. Integer mollis tincidunt nulla, suscipit imperdiet mauris consequat maximus. Pellentesque imperdiet vitae lorem vitae varius. Mauris blandit quis urna ultricies luctus. Ut mollis sodales metus vitae placerat.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="row"> | |
| <div class="col-md-12 heading"> | |
| <h3>About Our School</h3> | |
| </div> | |
| </div> | |
| <div class="row"> | |
| <div class="col-md-12 text-center"> | |
| <div class="profile-card"> | |
| <div class="col-md-2"> | |
| <img class="center" src="http://placehold.it/200x150"> | |
| </div> | |
| <h4>History</h4> | |
| <p> Etiam quis erat turpis. Nunc id risus ut orci facilisis pretium a at orci. Integer commodo pulvinar nunc, id scelerisque diam sagittis id. Maecenas pharetra diam ut metus finibus tempor. Nam eget lectus vitae sapien scelerisque sagittis. Integer mollis tincidunt nulla, suscipit imperdiet mauris consequat maximus. Pellentesque imperdiet vitae lorem vitae varius. Mauris blandit quis urna ultricies luctus. Ut mollis sodales metus vitae placerat.Integer mollis tincidunt nulla, suscipit imperdiet mauris consequat maximus. Pellentesque imperdiet vitae lorem vitae varius. Mauris blandit quis urna ultricies luctus. Ut mollis sodales metus vitae placerat.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="row"> | |
| <div class="col-md-12 text-center"> | |
| <div class="profile-card"> | |
| <h4>The P & C Committee</h4> | |
| <p> Etiam quis erat turpis. Nunc id risus ut orci facilisis pretium a at orci. Integer commodo pulvinar nunc, id scelerisque diam sagittis id. Maecenas pharetra diam ut metus finibus tempor. Nam eget lectus vitae sapien scelerisque sagittis. Etiam quis erat turpis. Nunc id risus ut orci facilisis pretium a at orci. Integer commodo pulvinar nunc, id scelerisque diam sagittis id. Maecenas pharetra diam ut metus finibus tempor. Nam eget lectus vitae sapien scelerisque sagittis. </p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="row"> | |
| <div class="col-md-12 heading"> | |
| <h3>Our Sponsors</h3> | |
| </div> | |
| </div> | |
| <div class="row"> | |
| <div class="col-md-12 text-center"> | |
| <p class="sponsors">A special thank you to our sponsors:</p> | |
| </div> | |
| </div> | |
| <div class="row"> | |
| <div class="col-md-4 col-sm-4 sponsor"> | |
| <img src="http://placehold.it/250x200" alt="Bankwest Logo"> | |
| </div> | |
| <div class="col-md-4 col-sm-4 sponsor"> | |
| <img src="http://placehold.it/250x200" alt="Jetts Fitness Logo"> | |
| </div> | |
| <div class="col-md-4 col-sm-4 sponsor"> | |
| <img src="http://placehold.it/250x200" alt="Rotary Logo"> | |
| </div> | |
| </div> | |
| <div class="row"> | |
| <div class="col-md-12 heading"> | |
| <h3>Contact Us</h3> | |
| </div> | |
| </div> | |
| <div class="row"> | |
| <div class="col-md-8 col-sm-8"> | |
| <form> | |
| <div class="form"> | |
| <fieldset> | |
| <legend>Contact Form</legend> | |
| <label for="name">Your Name (required):</label><br> | |
| <input type="text" name="name" size="30" placeholder="eg. Joe Bloggs" required> | |
| <br> | |
| <br> | |
| <label for="phone">Contact Phone:</label><br> | |
| <input type="tel" name="tel" size="30"min="8" placeholder="eg. 0421 123 123"> <br> | |
| <br> | |
| <label for="email">Contact Email:</label><br> | |
| <input type="email" name="email" size="30" placeholder="joebloggs@gmail.com"> | |
| <br> | |
| <br> | |
| <label for="comments">Your Message:</label><br> | |
| <textarea name="comments" rows="6" cols="50" maxlength="150" placeholder="(150 word max)"></textarea> | |
| <br> | |
| <br> | |
| <input type="submit" value="Send"> | |
| </fieldset> | |
| </div> | |
| </form> | |
| </div> | |
| <div class="col-md-4 col-sm-4"> | |
| <a href="http://www.facebook.com"><img class='vcenter1' src="http://icons.iconarchive.com/icons/yootheme/social-bookmark/256/social-facebook-box-blue-icon.png" alt="Facebook Link"></a><br> | |
| <a href="mailto:fcpsfundraising@gmail.com?subject=Mail from Website"><img class="vcenter2" src="http://icons.iconarchive.com/icons/zerode/plump/256/Mail-icon.png" alt="Email Link"></a> | |
| </div> | |
| </div> | |
| <div class="row"> | |
| <div class="col-md-12 footer"> | |
| <p id="Footer">© Copyright Jessica Budd 2016</p> | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| header { | |
| background-image:url("https://farm2.staticflickr.com/1513/25560839633_c997bc0c89_b.jpg"); | |
| background-size: 1200px 100%; | |
| background-repeat:no-repeat; | |
| padding-bottom:12%; | |
| overflow:hidden; | |
| position:relative; | |
| } | |
| .form { | |
| display: block; | |
| margin-left: 0px; | |
| margin-right: 2px; | |
| padding-top: 2em; | |
| padding-bottom: 2em; | |
| padding-left: 0.75em; | |
| padding-right: 0.75em; | |
| border: 2px groove (internal value); | |
| } | |
| html { font-size: 62.5%; } | |
| h1 { | |
| font-family: 'Fredericka the Great', cursive; | |
| color:#00b3af; | |
| text-align:center; | |
| padding-top:10px; | |
| padding-bottom:20px; | |
| Font-size:6em; | |
| } | |
| h2 { | |
| font-family: 'Josefin Slab', serif; | |
| color:#524e4e; | |
| font-size: 2em; | |
| font-weight:bold; | |
| padding-bottom:20px; | |
| } | |
| h3 { | |
| font-family: 'Fredericka the Great', cursive; | |
| color:#00b3af; | |
| font-size:2.2em; | |
| text-align:center; | |
| color:white; | |
| } | |
| h4 { | |
| font-family: 'Josefin Slab', serif; | |
| color:#524e4e; | |
| font-size: 1.8em; | |
| font-weight:bold; | |
| } | |
| .date { | |
| font-size:2.5em; | |
| } | |
| .time { | |
| padding-bottom:100px; | |
| font-size:2.2em; | |
| font-weight:bold; | |
| } | |
| p { | |
| font-family: 'Josefin Slab', serif; | |
| font-size:1.6rem; | |
| } | |
| .header { | |
| background: url(https://farm2.staticflickr.com/1467/26041520951_dd277fbfd5_k.jpg); | |
| } | |
| .heading { | |
| background:#00b3af; | |
| padding:6px; | |
| } | |
| .footer { | |
| background:#00b3af; | |
| padding:20px; | |
| font-size:1em; | |
| color:white; | |
| text-align:center; | |
| } | |
| .sponsor img { | |
| width: 15em; | |
| display: block; | |
| margin: 2rem auto; | |
| } | |
| .profile-card { | |
| padding: 1rem; | |
| box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); | |
| margin: 2rem 0; | |
| background-color: #fff; } | |
| .profile-card img { | |
| width: 15rem; | |
| display: block; | |
| margin: 2rem auto; | |
| text-align: center; | |
| box-shadow: 2px 2px 5px #888888; | |
| } | |
| .profile-card p { | |
| text-align: center; | |
| font-family: 'Josefin Slab', serif; | |
| font-size:1.6rem; | |
| color:#524e4e; | |
| } | |
| .vcenter1 { | |
| display:block; | |
| width: 4em; | |
| margin: 2rem auto; | |
| } | |
| .sponsors { | |
| font-size:1.5em; | |
| padding-top:15px; | |
| } | |
| .vcenter2 { | |
| display:block; | |
| width: 4em; | |
| margin:auto; | |
| } | |
| .center { | |
| margin:auto; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment