I don't have a server yet. I'll share the code below, it's probably quite messy because this is my first attempt at a site.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link href="/css/main.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Allura|Cormorant+Garamond|Oswald" rel="stylesheet">
<title>Summer And Cody's Wedding</title>
</head>
<body>
<div class="menu">
<nav>
<ul>
<li class="current"><a href="index.html">Home</a></li>
<li class="menulink"><a href="details.html">Wedding Details</a></li>
<li class="menulink"><a href="story.html">Our Story</a></li>
<li class="menulink"><a href="rsvp.html">RSVP</a></li>
<li class="menulink"><a href="party.html">Wedding Party</a></li>
<li class="menulink"><a href="photos.html">Photos</a></li>
</ul>
</nav>
</div>
<div class="homeheader">
<section class="home-a">
<h1 class="hashtaghome">#LetThe GoodTimes Rollison</h1>
</section>
<section class="home-b">
<img src="Images/courthouse.png" alt="old blanco county courthouse" id="home-courthouse"/>
</section>
</div>
<div class="homecircles">
<section class="home-c">
<a href="details.html"><img src="Images/Putman-57.png" alt="engagment ring" class="circle"></a>
<h3 class="circlelink"><a href="details.html">Wedding Details</a></h3>
</section>
<section class="home-d"><a href="story.html"><img src="Images/Putman-10.png" alt="couple laughing" class="circle"></a>
<h3 class="circlelink"><a href="story.html">Our Story</a></h3>
</section>
<section class="home-e">
<a href="rsvp.html"><img src="Images/Putman-164.png" alt="couple smiling and leaning against a tree" class="circle"></a>
<h3 class="circlelink"><a href="rsvp.html">RSVP</a></h3>
</section>
</div>
<div class="homebottom">
<section class="home-f">
<h2>Summer and Cody's Wedding</h2>
</section>
</div>
<div class="footer">
<section>
<section class="fbackground"></section>
</section>
</div>
</body>
</html>
@charset "utf-8";
/* CSS Document */
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
body {
background-repeat: no-repeat;
z-index: -3;
padding-top: 0px;
background-position: 0% 309%;
background-image: url(../Images/background.png);
background-size: cover;
}
h1 {
font-family: oswald;
font-size: 100px;
font-weight: bold;
color: #630D2E;
}
a {
font-family: cormorant-garamond;
text-decoration: none;
color: #630d2e;
}
nav a {
color: white;
font-size: 2em;
}
h3 {
font-family: oswald;
color: #630d2e;
}
h2 {
font-family: oswald;
color: #630D2E;
text-size: 3em;
font-size: 2em;
}
h2 .subheading {
color: #07304c
}
nav {
height: 10%;
}
nav ul {
text-transform: none;
}
.menu nav {
}
.home-grid {
display: inline-block;
}
.home-a {
z-index: 2;
width: 45%;
height: auto;
padding: 0;
display: inline-block;
margin: 0px 0px 0px 14%;
positon: absolute;
left: 0px;
top: 0px;
font-size: medium;
}
.home-b {
z-index: -1;
/* [disabled]height: auto; */
width: 54%;
padding: 0;
margin: 20% 2% 0px 0px;
display: inline-block;
position: absolute;
right: 0px;
opacity: 0.22;
top: 0px;
}
.home-b img {
width: 100%;
}
.home-c {
width: 30%;
display: block;
float: left;
padding-right: 2%;
}
.home-d {
width: 30%;
display: block;
float: left;
padding-right: 2%;
}
.home-e {
width: 30%;
height: 20%;
display: inline-block;
float: left;
padding-right: 2%;
}
.home-f {
positon: absolute;
text-align: center;
margin-top: 41%;
margin-bottom: 13%;
}
.hashtaghome {
line-height: .9;
font-size: 9em;
padding: 0px;
margin: 0;
}
.menu {
background-color: #07304C;
}
.current {
font-weight: bold;
}
.circle {
width: 100%;
}
.circlelink h3 {
text-align: center;
text-decoration: none;
}
.homecircles {
margin-top: 8%;
text-align: center;
margin-left: 12.5%;
/* [disabled]margin-right: 2.5%; */
}
a .circlelink {
color:#630d2e;
font-family: cormorant-garamond;
}
.homebottom {
margin-top: 8%;
width: 100%;
}
.footer {
/* [disabled]background-color: #C3C3C3; */
height: 4em;
color: black;
text-align: center;
bottom: 0px;
}
.footer p {
padding-top: 1%;
}
.detailsimg {
width: 100%;
height: auto;
position: absolute;
}
.detailshead {
height: auto;
display: inline-block;
}
.subheading {
}
.detailshead section {
width: 25%;
}
AdChoices