<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home | Cornwall Cottages</title>
<link rel="stylesheet" href="styles/index.min.css">
</head>
<body id="pageTop">
<head>
<nav id="menu" role="navigation" itemscope itemtype="https://schema.org/SiteNavigationElement">
<div class="menu-top-navigation-container">
<ul id="menu-top-navigation" class="menu">
<li id="menu-item-15" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-15"><a href="https://ws255237-awt.remote.ac/" aria-current="page" itemprop="url"><span itemprop="name">Home</span></a></li>
<li id="menu-item-35" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-35"><a href="https://ws255237-awt.remote.ac/about/" itemprop="url"><span itemprop="name">About</span></a></li>
<li id="menu-item-37" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-37"><a href="https://ws255237-awt.remote.ac/properties/" itemprop="url"><span itemprop="name">Properties</span></a></li>
<li id="menu-item-36" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-36"><a href="https://ws255237-awt.remote.ac/contact-us/" itemprop="url"><span itemprop="name">Contact Us</span></a></li>
</ul>
</div>
</nav>
</head>
<main>
<section id="PageHead">
<video src="images/parallaxBGVideo-min.webm" autoplay muted loop></video>
<div class="container">
<h1 class="nomargin">Cornwall Cottages</h1>
<h2 class="ctaText">Uncover your perfect destination...</h2>
<a class="ctaButton">Start Exploring...</a>
</div>
</section>
<!-- About business section -->
<section id="AboutSection" class="light">
<h1 class="nomargin center head">What do we do?</h1>
<div class="container">
<div class="card center">
<p class="center middle">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Pariatur repellendus provident porro ad quibusdam nisi in dolore quasi, ullam repudiandae voluptatem distinctio aliquam error est minus ipsam doloribus id molestias! Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cum, minus consequatur architecto temporibus accusantium reprehenderit debitis dicta voluptatem? Numquam laborum repudiandae architecto sed exercitationem sint ut magnam incidunt reprehenderit perferendis?</p>
</div>
<div class="imageContainer container">
<img src="images/aboutImage.jpg" alt="About Image" height="275">
</div>
</div>
</section>
<!-- End about section -->
<!-- Contact form -->
<section id="ContactSection" class="light">
<hr>
<h1 class="nomargin center">Contact Us to request a quote!</h1>
<div class="container center">
<form action="" id="contactForm">
<div class="form-input-group">
<label for="name">Name</label>
<input type="text" name="name" id="name" placeholder="Enter your name...">
</div>
<div class="form-input-group">
<label for="email">Email</label>
<input type="email" name="email" id="email" placeholder="Enter your email...">
</div>
<div class="form-input-group">
<label for="message">Message</label>
<textarea name="message" id="message" cols="30" rows="10" placeholder="Enter your message..."></textarea>
</div>
<div class="form-input-group">
<input type="submit" value="Submit">
</div>
</form>
</div>
</section>
<!-- End contact form -->
<!-- Footer for every page -->
<section id="FooterSection" class="dark">
<!-- Legal notes -->
<div class="container center middle legal">
<p>© 2023 Cornwall Cottages. All rights reserved.</p>
<p>Website created by <a href="https://vixendev.com" target="_blank">Skylar Beacham</a></p>
</div>
</section>
<!-- End footer -->
</main>
<footer></footer>
</body>
</html>
@import "_main";
#PageHead {
.container{
background: rgba(0, 0, 0, 0.5);
width: 100%;
height: 50vh;
padding-left: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
h1 {
margin-top: -10px;
color: white;
text-align: center;
font-size: 58px;
}
h2 {
margin-top: -10px;
color: white;
text-align: center;
font-size: 46px;
}
.ctaButton{
color: white;
padding: 1%;
font-weight: 600;
border-radius: 2%;
-webkit-box-shadow: 0px 5px 8px -3px rgba(0,0,0,0.58);
-moz-box-shadow: 0px 5px 8px -3px rgba(0,0,0,0.58);
box-shadow: 0px 5px 8px -3px rgba(0,0,0,0.58);
background-color: orange;
}
}
video {
object-fit: cover;
width: 100vw;
height: 100vh;
z-index: -999;
position: fixed;
top: 0;
left: 0;
}
}
#AboutSection{
.card{
margin-left: 20%;
max-width: 30%;
}
.imageContainer{
max-width: 30%;
max-height: 33%;
transform: translate(0px, 20px)rotate(-5deg);
}
}
#ContactSection{
padding: 20px 0;
}
#FooterSection{
min-height: 10px;
padding: 20px 0;
padding-top: 20px;
padding-bottom: 20px;
.legal{
font-size: large;
flex-direction: column;
a{
color: white;
text-decoration: none;
}
}
}
