diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 0000000..48548fa
Binary files /dev/null and b/.DS_Store differ
diff --git a/css/styles.css b/css/styles.css
index 8a60244..a323317 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -1,7 +1,41 @@
-body {
-  padding-top: 5rem;
-}
 .starter-template {
-  padding: 3rem 1.5rem;
+  /*padding: 3rem 1.5rem;*/
+  text-align: left;
+
+    background-color: #800080;
+    background-image: linear-gradient(141deg, #9fb8ad 0%, #1fc8db 51%, #2cb5e8 75%);
+    color: white;
+    opacity: 0.95;}
+
+body, html {
+  padding-top: 1rem;
+  height: 100%;
+  background-image: url("rings.jpg");
+
+  min-height: 50px;
+/*
+  Center and scale the image nicely */
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+
+  /* Needed to position the navbar */
+  position: relative;
+}
+
+/* The navbar */
+.topnav {
+  overflow: hidden;
+  background-color: #333;
+  float: left;
   text-align: center;
-}
\ No newline at end of file
+  padding: 10px;
+}
+
+/* Navbar text */
+.nav-item a{
+    font-family: arial !important;
+    color: black;
+    font-weight: bold;
+    font-size: 16px;
+}
diff --git a/css/styles2.css b/css/styles2.css
new file mode 100644
index 0000000..4d9d0ce
--- /dev/null
+++ b/css/styles2.css
@@ -0,0 +1,293 @@
+.starter-template {
+  /*padding: 3rem 1.5rem;*/
+  text-align: left;
+
+    background-color: #800080;
+    background-image: linear-gradient(141deg, #9fb8ad 0%, #1fc8db 51%, #2cb5e8 75%);
+    color: white;
+    opacity: 0.95;}
+
+body, html {
+  padding-top: 0.3rem;
+  height: 100%;
+  background-image: url("../images/rings.jpg");
+
+  min-height: 50px;
+/*
+  Center and scale the image nicely */
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+
+  /* Needed to position the navbar */
+  position: relative;
+}
+
+/* The navbar */
+/* .topnav {
+  overflow: hidden;
+  background-color: #333;
+  float: left;
+  text-align: center;
+  padding: 1px;
+} */
+
+/* Navbar text */
+/* .topnav-right { */
+    /* font-family: arial !important;  */
+    /* color: black; */
+    /* font-weight: bold; */
+    /* font-size: 15px; */
+/* } */
+
+.topnav-right {
+  font-family: arial !important;
+  color: #000000;
+  float: right;
+  font-weight: bold;
+  font-size: 15px;
+  margin-top: -100px;
+  display: inline;
+  padding-right: 30px;
+  padding-top: 1px
+}
+
+.topnav-right a{
+  color: #000000;
+  padding: 0 40px 0 40px;
+}
+*{
+	padding:0;
+	margin:0;
+}
+
+html{
+	background-color: #eaf0f2;
+}
+
+body{
+	font:12px/1.6 Arial,  sans-serif;
+}
+
+header{
+	text-align: center;
+	padding-top: 100px;
+	margin-bottom:190px;
+}
+
+header h1{
+	font: normal 32px/1.5 'Open Sans', sans-serif;
+	color: #3F71AE;
+	padding-bottom: 16px;
+}
+
+header h2{
+	color: #F05283;
+}
+
+header span{
+	color: #3F71EA;
+}
+
+
+/* The footer is fixed to the bottom of the page */
+
+footer{
+	position: fixed;
+	bottom: 0;
+}
+
+@media (max-height:800px){
+	footer { position: static; }
+	header { padding-top:40px; }
+}
+
+
+.footer-distributed{
+	background-color: #fff9f7;
+	box-sizing: border-box;
+	width: 100%;
+	text-align: left;
+	font: bold 12px sans-serif;
+	padding: 50px 50px 60px 50px;
+	margin-top: 80px;
+}
+
+.footer-distributed .footer-left,
+.footer-distributed .footer-center,
+.footer-distributed .footer-right{
+	display: inline-block;
+	vertical-align: top;
+}
+
+/* Footer left */
+
+.footer-distributed .footer-left{
+	width: 30%;
+}
+
+.footer-distributed h3{
+	color:  #000000;
+	font: normal 36px 'Cookie', cursive;
+	margin: 0;
+}
+
+/* The company logo */
+
+.footer-distributed .footer-left img{
+	width: 30%;
+}
+
+.footer-distributed h3 span{
+	color:  #000000;
+}
+
+/* Footer links */
+
+.footer-distributed .footer-links{
+	color:  #000000;
+	margin: 20px 0 12px;
+}
+
+.footer-distributed .footer-links a{
+	display:inline-block;
+	line-height: 1;
+	text-decoration: none;
+	color:  inherit;
+}
+
+.footer-distributed .footer-company-name{
+	color:  #8f9296;
+	font-size: 14px;
+	font-weight: normal;
+	margin: 0;
+}
+
+/* Footer Center */
+
+.footer-distributed .footer-center{
+	width: 35%;
+}
+
+
+.footer-distributed .footer-center i{
+	/* background-color:  #33383b; */
+	color: #000000;
+	font-size: 25px;
+	width: 38px;
+	height: 8px;
+	border-radius: 50%;
+	text-align: center;
+	line-height: 42px;
+	margin: 10px 15px;
+	vertical-align: middle;
+}
+
+  .fa-envelope {
+  margin-top: -20px;
+}
+
+
+/* .footer-distributed .footer-center i.fa-map{ */
+  /* margin-top: -20px;
+} */
+
+
+.footer-distributed .footer-center i.fa-envelope{
+	font-size: 17px;
+	line-height: 38px;
+  margin-top: -3%;
+
+}
+.footer-distributed .footer-center i.fa-map-marker{
+  margin-top: -8%
+
+}
+
+  .footer-distributed .footer-center i.fa-phone{
+    margin-top: -8%
+}
+.footer-distributed .footer-center p{
+	display: inline-block;
+	color: #000000;
+	vertical-align: middle;
+	margin:0;
+}
+
+.footer-distributed .footer-center p span{
+	display:block;
+	font-weight: normal;
+	font-size:14px;
+	line-height:2;
+}
+
+.footer-distributed .footer-center p a{
+	color:  #000000;
+	text-decoration: none;;
+}
+
+
+/* Footer Right */
+
+.footer-distributed .footer-right{
+	width: 30%;
+}
+
+/* this is to do with everything below 'about the company' on RHS */
+.footer-distributed .footer-company-about{
+	line-height: 20px;
+	color:  #000000;
+	font-size: 15px;
+	font-weight: normal;
+	margin: 0;
+}
+
+.footer-distributed .footer-company-about span{
+	display: block;
+	color:  #000000;
+	font-size: 15px;
+	font-weight: bold;
+	margin-bottom: 20px;
+}
+
+.footer-distributed .footer-icons{
+	margin-top: 10px;
+}
+
+.footer-distributed .footer-icons a{
+	display: inline-block;
+	width: 20px;
+	height: 20px;
+	cursor: pointer;
+	/* background-color:  #33383b; */
+	border-radius: 2px;
+
+	font-size: 20px;
+	color: #000000;
+	text-align: center;
+	line-height: 35px;
+
+	margin-right: 3px;
+	margin-bottom: 5px;
+}
+
+/* Here is the code for Responsive Footer */
+/* You can remove below code if you don't want Footer to be responsive */
+
+
+@media (max-width: 880px) {
+
+	.footer-distributed .footer-left,
+	.footer-distributed .footer-center,
+	.footer-distributed .footer-right{
+		display: block;
+		width: 100%;
+		margin-bottom: 40px;
+		text-align: center;
+	}
+
+	.footer-distributed .footer-center i{
+		margin-left: 0;
+	}
+
+}
diff --git a/example.html b/example.html
new file mode 100644
index 0000000..94f85da
--- /dev/null
+++ b/example.html
@@ -0,0 +1,36 @@
+<nav class="navbar navbar-expand-lg navbar-light bg-light">
+<a class="navbar-brand" href="#">Navbar</a>
+<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
+  <span class="navbar-toggler-icon"></span>
+</button>
+<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
+  <div class="navbar-nav">
+    <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
+    <a class="nav-item nav-link" href="#">Features</a>
+    <a class="nav-item nav-link" href="#">Pricing</a>
+    <a class="nav-item nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
+  </div>
+</div>
+</nav>
+
+
+
+<ul class="nav">
+  <li class="nav-item">
+    <a class="nav-link active" href="#">Active</a>
+  </li>
+  <li class="nav-item">
+    <a class="nav-link" href="#">Link</a>
+  </li>
+  <li class="nav-item">
+    <a class="nav-link" href="#">Link</a>
+  </li>
+  <li class="nav-item">
+    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
+  </li>
+</ul>
+
+
+<a class="btn btn-primary" href="#" role="button">About Us</a>
+<button class="btn btn-primary" type="button">Contact Us</button>
+<input class="btn btn-primary" type="button" value="Gallery">
diff --git a/images/Hp-Wedding-Ring-.jpg b/images/Hp-Wedding-Ring-.jpg
new file mode 100644
index 0000000..9ebfc38
Binary files /dev/null and b/images/Hp-Wedding-Ring-.jpg differ
diff --git a/images/christmas.jpg b/images/christmas.jpg
new file mode 100644
index 0000000..356dbf8
Binary files /dev/null and b/images/christmas.jpg differ
diff --git a/images/dogcute.jpg b/images/dogcute.jpg
new file mode 100644
index 0000000..4be47e0
Binary files /dev/null and b/images/dogcute.jpg differ
diff --git a/images/fluffy.jpg b/images/fluffy.jpg
new file mode 100644
index 0000000..212924a
Binary files /dev/null and b/images/fluffy.jpg differ
diff --git a/images/kids.jpg b/images/kids.jpg
new file mode 100644
index 0000000..5c12338
Binary files /dev/null and b/images/kids.jpg differ
diff --git a/images/pig.jpg b/images/pig.jpg
new file mode 100644
index 0000000..5c6c77c
Binary files /dev/null and b/images/pig.jpg differ
diff --git a/images/rings.jpg b/images/rings.jpg
new file mode 100644
index 0000000..9ebfc38
Binary files /dev/null and b/images/rings.jpg differ
diff --git a/images/teenagers.jpg b/images/teenagers.jpg
new file mode 100644
index 0000000..68cdd53
Binary files /dev/null and b/images/teenagers.jpg differ
diff --git a/images/wedding.jpg b/images/wedding.jpg
new file mode 100644
index 0000000..8b8cdd8
Binary files /dev/null and b/images/wedding.jpg differ
diff --git a/index.html b/index.html
index a4670a4..6fc42c4 100644
--- a/index.html
+++ b/index.html
@@ -1,67 +1,49 @@
 <!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <meta name="description" content="">
-    <meta name="author" content="">
-
-    <title>Starter Template for Bootstrap</title>
-
-    <!-- ADD BOOTSTRAP CORE HERE!!!! -->
-
-    <!-- Custom styles for this template -->
-    <link href="css/styles.css" rel="stylesheet">
-  </head>
-
-  <body>
-
-    <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
-      <a class="navbar-brand" href="#">Navbar</a>
-      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
-        <span class="navbar-toggler-icon"></span>
-      </button>
-
-      <div class="collapse navbar-collapse" id="navbarsExampleDefault">
-        <ul class="navbar-nav mr-auto">
-          <li class="nav-item active">
-            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
-          </li>
-          <li class="nav-item">
-            <a class="nav-link" href="#">Link</a>
-          </li>
-          <li class="nav-item">
-            <a class="nav-link" href="#">Another Link</a>
-          </li>
-        </ul>
-      </div>
-    </nav>
-
-    <main role="main" class="container">
-
-      <div class="starter-template">
-        <h1>Bootstrap starter template</h1>
-        <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
-      </div>
-
-      <!-- columns -->
-      <div class="row">
-        <div class="col-sm">
-          <!-- add an image here -->
-          One of three columns
-        </div>
-        <div class="col-sm">
-          <!-- add an image here -->
-          One of three columns
-        </div>
-        <div class="col-sm">
-          <!-- add an image here -->
-          One of three columns
-        </div>
-      </div>
-      
-      <!-- Add another row here -->
-    </main><!-- /.container -->
+<link href='https://fonts.googleapis.com/css?family=Great Vibes' rel='stylesheet'>
+<h1 style = "font-family:'Great Vibes';font-size:50px;font-style:italic;">Behind The Vows...</h1>
+
+<style>
+  div {
+    background-image: url('./images/rings.jpg');
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    height: 100%;
+    width: 100%;
+  }
+</style>
+
+<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">  <!-- ADD BOOTSTRAP CORE HERE!!!! -->
+
+<!-- Custom styles for this template -->
+<link href="css/styles.css" rel="stylesheet">
+
+<!-- Navbar -->
+<body>
+  <div class="topnav">
+  <ul class="nav">
+    <li class="nav-item">
+      <a class="nav-link active" href="#">ABOUT</a>
+    </li>
+    <li class="nav-item">
+      <a class="nav-link" href="#">GALLERY</a>
+    </li>
+    <li class="nav-item">
+      <a class="nav-link" href="#">CONTACT</a>
+    </li>
+  </ul>
+</div>
+
+<footer class="row">
+          <p class="inline">Contact us</p>
+          <nav class="footer inline">
+            <a href="https://www.instagram.com/codefirstgirls/" target="_blank"><i class="fab fa-instagram"></i></a>
+            <a href="https://twitter.com/CodeFirstGirls" target="_blank"><i class="fab fa-twitter"></i></a>
+            <a href="https://www.facebook.com/codefirstgirls" target="_blank"><i class="fab fa-facebook"></i></a>
+            <a href="https://youtube.com/" target="_blank"><i class="fab fa-youtube"></i></a>
+          <p><small>Wedding Planners</small></p>
+          </nav>
+        </footer>
 
     <!-- Bootstrap core JavaScript
     ================================================== -->
diff --git a/index2.html b/index2.html
new file mode 100644
index 0000000..a0d5cde
--- /dev/null
+++ b/index2.html
@@ -0,0 +1,98 @@
+<!doctype html>
+<head>
+  <link href='https://fonts.googleapis.com/css?family=Great Vibes' rel='stylesheet'>
+  <title>Behind the vows&helip;</title>
+
+  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">  <!-- ADD BOOTSTRAP CORE HERE!!!! -->
+
+  <!-- Custom styles for this template -->
+  <link href="css/styles2.css" rel="stylesheet">
+</head>
+
+<body>
+  <h1 style = "font-family:'Great Vibes';font-size:100px;font-style:italic;">Behind The Vows...</h1>
+  <!-- Navbar -->
+  <div class="topnav-right">
+    <a href="#about">ABOUT</a>
+    <a href="#gallery">GALLERY</a>
+    <a href="#contact">CONTACT</a>
+  </div>
+
+  <html>
+
+  <head>
+  	<meta charset="utf-8">
+  	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+  	<meta name="viewport" content="width=device-width, initial-scale=1">
+  	<meta name="keywords" content="footer, address, phone, icons" />
+
+
+  	<link rel="stylesheet" href="style.css">
+
+  	<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
+
+  	<link href="http://fonts.googleapis.com/css?family=Cookie" rel="stylesheet" type="text/css">
+
+
+  		<!-- The content of your page would go here. -->
+
+  		<footer class="footer-distributed">
+
+  			<div class="footer-left">
+  				<h3>About<span> Behind The Vows</span></h3>
+
+  				<p class="footer-links">
+  					<a href="#">About</a>
+  					|
+  					<a href="#">Gallery</a>
+  					|
+  					<a href="#">Contact</a>
+  				</p>
+
+  				<p class="footer-company-name">© 2019 Memory Makers. Ltd.</p>
+  			</div>
+
+
+  			<div class="footer-center">
+  				<div>
+  					<i class="fa fa-map-marker"></i>
+  					  <p><span>72-100 Ka`upulehu Drive,
+  						  Kailua-Kona</span>
+  						Hawaii 96740 U.S.A</p>
+  				</div>
+
+  				<div>
+  					<i class="fa fa-phone"></i>
+  					<p>+1 808-325-8000</p>
+  				</div>
+  				<div>
+  					<i class="fa fa-envelope"></i>
+  					<p><a href="mailto:behindthevows@outlook.com">behindthevows@outlook.com</a></p>
+  				</div>
+  			</div>
+  			<div class="footer-right">
+  				<p class="footer-company-about">
+  					<span>ABOUT US</span>
+  					We offer customisable wedding packages for your special day.</p>
+  				<div class="footer-icons">
+  					<a href="#"><i class="fa fa-facebook"></i></a>
+  					<a href="#"><i class="fa fa-twitter"></i></a>
+  					<a href="#"><i class="fa fa-instagram"></i></a>
+  					<a href="#"><i class="fa fa-linkedin"></i></a>
+  					<a href="#"><i class="fa fa-youtube"></i></a>
+  				</div>
+  			</div>
+  		</footer>
+  	</body>
+  </html>
+
+
+  <!-- Bootstrap core JavaScript
+  ================================================== -->
+  <!-- Placed at the end of the document so the pages load faster -->
+  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
+  <script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
+  <script src="https://getbootstrap.com/docs/4.1/assets/js/vendor/popper.min.js"></script>
+  <script src="https://getbootstrap.com/docs/4.1/dist/js/bootstrap.min.js"></script>
+</body>
+</html>