Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <!DOCTYPE html>
<html>
<head>
	<title>Wedding Template</title>
	<meta charset="UTF-8">
	<meta content="width=device-width, initial-scale=1" name="viewport">
	<link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=Creepster|Raleway" rel="stylesheet">
	<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
	<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript">
	</script>
	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
	</script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
	</script>
</head>
<body>
	<!-- Header / Home-->
	<header class="w3-display-container w3-wide bgimg w3-grayscale" id="home">
		<div class="w3-display-middle w3-text-white w3-center">
			<h1 class="w3-jumbo"><strong>Rachel & Graeme</strong></h1>
			<h2><strong>Are Getting Married</strong></h2>
			<h2><b><strong>05.08.2018</strong></b></h2><br>
			<br>
		</div>
	</header><!-- Navbar (sticky bottom) -->
	<div class="w3-bottom w3-hide-small">
		<div class="w3-bar w3-white w3-center w3-padding">
			<a class="w3-bar-item w3-button" href="#home" style="width:25%">Home</a> <a class="w3-bar-item w3-button" href="#us" style="width:25%">Rachel & Graeme</a> <a class="w3-bar-item w3-button" href="#wedding" style="width:25%">Wedding</a> <a class="w3-bar-item w3-button" href="#rsvp" style="width:25%">RSVP</a>
		</div>
	</div><!-- About / Rachel And Graeme -->
	<div class="w3-container w3-padding-64 w3-pale-red w3-grayscale-min" id="us">
		<div class="w3-content">
			<h1 class="w3-center w3-text-grey"><b>Rachel & Graeme</b></h1><br>
			<img class="w3-round-large w3-grayscale-min card" src="https://lh3.googleusercontent.com/C2VPuWcNinGI3jt0EuVN0MOoNOKewOT6o3MI2MAO4ZtTEnoCCF219jG7TY1T5u8Uyu-kpEtETi_ZnFU8BmWWx1z9UoMlK4qxQH2uj1_LIyT829WRzaiikGf-7kr-z4OaFu_bmGebHQP4LFeptkqpr6HiSngpgx9Ag_E_vrajW8UbwlOvdb2jbtJnZ7yIkHUgJr0Ma2iUy5Ei58XjpuAof5i-UmIHUabTMz9bZiNcJrP63LhR35333jHkT2es_xMl-gYk21KpT7mayfgZHLS4qIqds0URPKadhCVwoicAr3eGwRU7uin5WGTV61AYBcQpCfhVXzb7kM0eioFCR6lS079a15mRBLlFIZKPozcfR4fP-CgqjXA8RcMvKUc05h9qgNLXWdt3u6eTGisIpK5-68ThQc-Cx_1Ft4j1sX7U7p_5n32vUN0lFRZvn89AGHHX8wWUV7AZvvwuGVb2RXOecT_2OUBaVjLkuYxZfjSw0ObaxF-I2_mOQhkOgITEdW4yj827dXoYBwggYyR2mLY6lOW6adhvgqCCsP3O3EhlBglZcy9zCIx0Tqu2w5VYugZicgqCtZYex3GcbMm2mISDO0GjTAjUE0fRx5m3nDxpACs=w1204-h677-no" style="width:100%;margin:34px 0">
			<p class="w3-center"><i>Rachel and Graeme met in the winter of 2012. After a few messages over match.com, they decided they should meet for a drink. They bonded over a few rums, discussed their tastes in music and life in Glasgow; a second date was a no-brainer. They agreed to meet each other to watch the fireworks at Glasgow Green a few days later.<br>
			<br>
			Fireworks turned into gigs, trips to the theatre, tasty meals out and four years of long-distance dating between Falkirk and Glasgow. Finally, they both moved together in December 2015, had some interesting lodgers and enjoyed life in Glasgow together. As of this May, they've now settled down together in their first house in Cumbernauld.<br>
			<br>
			Every move has been an adventure. Every day has built love and friendship. Every time Graeme tries to cook still drives Rachel crazy.<br>
			<br>
			Bring on married life!</i> &lt;/&gt;</p>
			<p class="w3-center"><i>(We're defintely not bricking it.)</i></p><br>
		</div>
		<p class="w3-center"><a class="w3-button w3-black w3-round w3-padding-large w3-large" href="#wedding">Wedding Details</a></p>
	</div><!-- Background photo -->
	<div class="w3-display-container bgimg2">
		<div class="w3-display-middle w3-text-white w3-center">
			<h1 class="w3-jumbo">You Are Invited</h1><br>
			<h2>Of course...</h2>
		</div>
	</div><!-- Wedding information -->
	<div class="w3-container w3-padding-64 w3-pale-red w3-grayscale-min w3-center" id="wedding">
		<div class="w3-content">
			<h1 class="w3-text-grey"><b>THE WEDDING</b></h1><img class="w3-round-large w3-grayscale-min" src="http://www.pollokshieldsburghhall.com/userfiles/images/banners/chantel_4.jpg" style="width:100%;margin:64px 0">
			<div class="w3-row">
				<div class="w3-half">
					<h2>When</h2>
					<p>Sunday 5th August 2018</p>
					<p>Wedding Ceremony - 2:00pm</p>
					<p>Reception & Dinner - 5:00pm</p>
				</div>
				<div class="w3-half">
					<h2>Where</h2>
					<p><a href="http://www.pollokshieldsburghhall.com/">Pollockshields Burgh Hall</a></p>
					<p><a href="https://www.google.co.uk/maps/place/Pollokshields+Burgh+Hall/@55.8384828,-4.2873612,19z/data=!3m1!4b1!4m5!3m4!1s0x4888465d8d255d3d:0x6c1f47772c3d676f!8m2!3d55.838482!4d-4.286814">70 Glencairn Drive Glasgow, G41 4LL</a></p>
				</div>
			</div>
		</div>
	</div><!-- RSVP section -->
	<div class="w3-container w3-padding-64 w3-pale-red w3-center w3-wide" id="rsvp">
		<h1>WE HOPE YOU CAN MAKE IT!</h1>
		<p class="w3-large">Kindly Respond Before the end of January 2018</p><br>
		<p class="w3-xlarge"><button class="w3-button w3-round w3-red w3-opacity w3-hover-opacity-off" onclick="document.getElementById('contact').style.display='block'" style="padding:8px 60px">RSVP</button></p>
	</div>
  
	<div class="w3-modal" id="contact">
		<div class="w3-modal-content w3-card-4 w3-animate-zoom" style="padding:32px;max-width:600px">
			
				<div><span class="w3-button w3-display-topright w3-large" onclick="document.getElementById('contact').style.display='none'"><i class="fa fa-times fa-2x w3-hover-opacity"></i></span></div>
      <div class="w3-container w3-white w3-center">
				<h1 class="w3-wide">CAN YOU COME?</h1>
				<p>We really hope you can make it.</p>
				<p><i>Sincerely, Rachel & Graeme</i></p>
				<form action="" id="input-form" method="post" name="input-form" target="no-target">
					<input autocomplete="off" class="w3-input w3-padding-16 w3-border" id="input-q1" name="q1" placeholder="Name(s)" required=""><br>
					<input autocomplete="off" class="w3-input w3-padding-16 w3-border" id="input-q2" name="q1" placeholder="Email Address" required="" type="email"><br>
					<input autocomplete="off" class="w3-input w3-padding-16 w3-border" id="input-q3" name="q1" placeholder="Comments and/or questions"><br>
					<br>
					<br>
					<div class="toggle-radio">
						<input checked id="yes" name="entry.877086558" type="radio" value="Going"> <input id="no" name="entry.877086558" type="radio" value="Can't come">
						<div class="switch">
							<label for="yes">Yes</label> <label for="no">No</label> <span></span>
						</div>
					</div><br>
					<button class="w3-button" id="form-submit" type="submit">Submit</button>
          
				</form>
        <br>
				<p id="input-feedback"></p>
        <iframe id="no-target" name="no-target" src="#" style="visibility:hidden" height="1" width="1"></iframe>
			</div>
		</div>
	</div><!-- Footer -->
	<footer class="w3-center w3-black w3-padding-16">
		<p>Page by <a class="w3-hover-text-green" href="mailto:graeme.c.brown@gmail.com" target="_blank" title="Email">Graeme Brown</a></p>
	</footer>
	<div class="w3-hide-small" style="margin-bottom:32px">
		&nbsp;
	</div>
</body>
</html>
            
          
!
            
              body,h1,h2{font-family: "Raleway", sans-serif}
body,h3{font-family: "Creepster", cursive}
body, html {height: 100%}
p {line-height: 2}
.bgimg, .bgimg2 {
    min-height: 100%;
    background-position: center;
    background-size: cover;
}
.bgimg {background-image: url("http://www.toptablephotography.com/wp-content/uploads/2016/05/Pollokshields-Burgh-Hall-Wedding-Photography-2.jpg")}
.bgimg2 {background-image: url("https://www.w3schools.com/w3images/flowers.jpg")}

#donate {
    margin:4px;
   
    float:left;
}

#donate label {
    float:left;
    width:170px;
    margin:4px;
    background-color:#EFEFEF;
    border-radius:4px;
    border:1px solid #D0D0D0;
    overflow:auto;
       
}

#donate label span {
    text-align:center;
    font-size: 32px;
    padding:13px 0px;
    display:block;
}

#donate label input {
    position:absolute;
    top:-20px;
}

#donate input:checked + span {
    background-color:#404040;
    color:#F7F7F7;
}

#donate .red {
    background-color:#FF99FF;
    color:#333;
}

#donate .green {
    background-color:#A3D900;
    color:#333;
}
body {
    font-family: sans-serif;
    font-weight: 800;
    background: #eee;
  }
  .switch {
    position: relative;
    top: 50%;
    left: 50%;
    width: 150px;
    height: 50px;
    text-align: center;
    margin: -30px 0 0 -75px;
    background: #00bc9c;
    transition: all 0.2s ease;
    border-radius: 25px;
  }
  .switch span {
    position: relative;
    width: 20px;
    height: 4px;
    top: 50%;
    left: 50%;
    margin: -2px 0px 0px -4px;
    background: #fff;
    display: block;
    transform: rotate(-45deg);
    transition: all 0.2s ease;
  }
  .switch span:after {
    content: "";
    display: block;
    position: absolute;
    width: 4px;
    height: 12px;
    margin-top: -8px;
    background: #fff;
    transition: all 0.2s ease;
  }
  input[type=radio] {
    display: none;
  }
  .switch label {
    cursor: pointer;
    color: rgba(0,0,0,0.2);
    width: 60px;
    line-height: 50px;
    transition: all 0.2s ease;
  }
  label[for=yes] {
    position: absolute;
    left: 0px;
    height: 20px;
  }
  label[for=no] {
    position: absolute;
    right: 0px;
  }
  #no:checked ~ .switch {
    background: #eb4f37;
  }
  #no:checked ~ .switch span {
    background: #fff;
    margin-left: -8px;
  }
  #no:checked ~ .switch span:after {
    background: #fff;
    height: 20px;
    margin-top: -8px;
    margin-left: 8px;
  }
  #yes:checked ~ .switch label[for=yes] {
    color: #fff;
  }
  #no:checked ~ .switch label[for=no] {
    color: #fff;
  }
            
          
!
            
              $("#input-form").one("submit", function() {
      var inputq1 = encodeURIComponent($("#input-q1").val());
      var inputq2 = encodeURIComponent($("#input-q2").val());
      var inputq3 = encodeURIComponent($("#input-q3").val());
      var q1ID = "entry.1498135098";
      var q2ID = "entry.878692147";
      var q3ID = "entry.2606285"; 
      var baseURL =
        "https://docs.google.com/forms/d/e/1FAIpQLSdIRbSAdqzTmpUP-Ln9nHVHOkCcdmgIJdE7-dif36pj6tIgTQ/formResponse?";
      var submitRef = "&submit=Submit";
      var submitURL =
        baseURL + q1ID + "=" + inputq1 + "&" + q2ID + "=" + inputq2 + "&" + q3ID + "=" + inputq3 + submitRef;;
      console.log(submitURL);
      $(this)[0].action = submitURL;
      $("#input-feedback").text("Thank You!");
    });


            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console