Skip to content

Instantly share code, notes, and snippets.

@jessbudd

jessbudd/30th Anniversary Fete v2.markdown

Last active April 3, 2016 11:07
Show Gist options
  • Save jessbudd/ec02f45a482093be96c2aa2a2fc8b52d to your computer and use it in GitHub Desktop.
Save jessbudd/ec02f45a482093be96c2aa2a2fc8b52d to your computer and use it in GitHub Desktop.
Download ZIP
30th Anniversary Fete v2
Raw
index.html
<body id="page-top">
<!--change scroll of navbar-->
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<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 page-scroll" href="#page-top">Twilight Fete</a>
</div>
<!--toggle menu items-->
<div class="collapse navbar-collapse navbar-right" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav ">
<li><a class="page-scroll" href="#whats-on">What's On</a></li>
<li><a class="page-scroll" href="#about">About</a></li>
<li><a class="page-scroll" href="#contact">Contact</a></li>
</ul>
</div>
</div>
</nav>
<header>
<div class="header-content">
<div class="header-content-inner">
<h1>Twighlight Fete</h1>
<h2>Sunday 26 March || <wbr><span class="avoidwrap">3pm - 7pm</span><h2>
</div>
</div>
</header>
<section class="whats-on">
<div class="container-fluid">
<div id="whats-on" class="row">
<div class="col-md-12">
<h2 class="section-heading1">What's On</h2>
</div>
</div>
<div class="row">
<div class="col-lg-3 col-md-6 col-sm-6 text-center">
<span class="fa fa-star"></span>
<h3>Entertainment</h3>
<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.</p>
</div>
<div class="col-lg-3 col-md-6 col-sm-6 text-center">
<span class="fa fa-shopping-bag"></span>
<h3>Market Stalls</h3>
<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.</p>
</div>
<div class="col-lg-3 col-md-6 col-sm-6 text-center">
<span class="fa fa-coffee"></span>
<h3>Eat & Drink</h3>
<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.</p>
</div>
<div class="col-lg-3 col-md-6 col-sm-6 text-center">
<span class="fa fa-child"></span>
<h3>Community</h3>
<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. </p><br><br>
</div>
</div>
<div id="about" class="row about">
<div class="col-md-12">
<h2 class="section-heading2">About Our School</h2>
<p class="white">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><br><br>
</div>
</div>
<div id="contact" class="row">
<div class="col-md-12">
<h2 class="section-heading1">Contact Us</h2>
</div>
</div>
<footer>
</footer>
Raw
scripts
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
Raw
style.css
.navbar-default {
border-color: rgba(255,255,255,.3);
background-color: transparent;
font-family: 'Josefin Slab', serif;
}
.navbar-header {
background-color: transparent;
}
.navbar-default .navbar-brand:hover {
color:rgba(255,255,255,.8);
font-weight:bold;
}
.navbar-default .navbar-brand {
color:rgba(255,255,255,.8);
background-color: transparent;
font-size:1.5em;
}
.navbar-default .nav > li > a,
.navbar-default .nav> li > a {
font-size: 1.5em;
color: #777777;
}
.navbar-default .nav > li > a:hover,
.navbar-default .nav> li > a:focus:hover {
background-color: rgba(0,179,175,.6);
color:white;
font-weight:bold;
}
.navbar-default .nav > li.active>a:hover,
.navbar-default .nav>li.active>a:focus:hover {
background-color: transparent;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: rgba(255,255,255,.8);
}
.navbar-default .navbar-toggle:hover {
background-color: #00b3af;
}
.navbar-default .navbar-toggle {
border-color: rgba(255,255,255,.8);
}
/*stops time info breaking over next line*/
.avoidwrap {
display:inline-block;
}
header {
position:relative;
width:100%;
min-height:auto;
text-align:center;
background-image:url("https://farm2.staticflickr.com/1513/25560839633_c997bc0c89_b.jpg");
background-position:center;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
padding-top:1%;
padding-bottom:10%;
}
h1 {
font-family: 'Fredericka the Great', cursive;
font-size:4em;
color:#00b3af;
text-align:center;
padding-top:15%;
padding-bottom:5%;
}
h2 {
font-family: 'Josefin Slab', serif;
font-size: 1.8em;
color:#524e4e;
font-weight:bold;
padding-bottom:20px;
}
h3 {
font-family: 'Josefin Slab', serif;
color:#524e4e;
font-weight:bold;
text-align:center;
}
h4 {
font-family: 'Josefin Slab', serif;
color:#524e4e;
font-size: 1.8em;
font-weight:bold;
}
.about {
background-color:#00b3af;
}
.about {
color:#524e4e;
padding-bottom:3%
}
.section-heading1 {
font-family:'Fredericka the Great', cursive;
color:#00b3af;
text-align:center;
font-weight:normal;
Font-size:3em;
padding:5%;
}
.section-heading2 {
font-family:'Fredericka the Great', cursive;
color:white;
text-align:center;
font-weight:normal;
Font-size:3em;
padding-top:5%;
}
p {
font-family: 'Josefin Slab', serif;
font-size: 1.1em;
text-align:center;
margin-left:4%;
margin-right:4%
}
/*changes "about" p text to white*/
.white {
color:white;
font-family: 'Josefin Slab', serif;
font-size: 1.3em;
text-align:center
}
/*gylphs*/
.fa {
padding-top:5%;
color:#00b3af;
font-size:50px;
}
/*media queries changing fonts etc*/
/*small tablets, landscape phones*/
@media (min-width: 768px) {
h1 {
Font-size:5.5em;
}
h2 {
Font-size:2.3em;
}
.navbar-default .navbar-brand {
font-size:2em;
}
}
/*tablets and small desktops*/
@media (min-width: 992px) {
h1 {
Font-size:6.5em;
}
h2 {
Font-size:3em;
}
.section-heading1 {
Font-size:4.5em;
}
.section-heading2 {
Font-size:4.5em;
}
p {
font-size:1.3em
}
.white {
font-size:1.3em;
}
}
/*large desktops and up
@media (min-width: 1200px) {
h1 {
Font-size:7.5em;
}
h2 {
Font-size:3.5em;
}
} */
Raw
styles
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment