<!DOCTYPE html>
<html>
<head>
<title>Ann T Cid</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> -->
<!-- <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins"> -->
<link rel="stylesheet" href="./css/w3.css" type="text/css"/>
<link rel="stylesheet" href="./css/googleFonts.css" type="text/css"/>
<link rel="stylesheet" href="./css/pagestyle.css" type="text/css"/>
<link rel="stylesheet" href="./css/logostyle.css" type="text/css"/>
<link rel="stylesheet" href="./css/headerstyle.css" type="text/css"/>
<link rel="stylesheet" href="./css/footerstyle.css" type="text/css"/>
<script async src="https://cdn.ampproject.org/v0.js"></script>
<!-- ## Setup -->
<!-- Import the carousel component in the header. -->
<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
<link rel="canonical" href="<%host%>/components/amp-carousel/">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
</head>
<body>
<!-- Sidebar/menu -->
<nav class="w3-sidebar w3-red w3-collapse w3-top w3-large w3-padding" style="z-index:3;width:300px;font-weight:bold;" id="mySidebar"><br>
<a href="javascript:void(0)" onclick="w3_close()" class="w3-button w3-hide-large w3-display-topleft" style="width:100%;font-size:22px">Close Menu</a>
<div class="w3-container">
<div id = logo_left style="margin-bottom:50px">
<img src="./images/logo.jpg" alt="logo" />
</div>
<!-- <div id = "social_media">
<a href = "https://www.facebook.com/" target = "_blank"><img src="./images/Facebook.png"/></a>
<a href = "https://www.youtube.com/" target = "_blank"><img src="./images/Youtube.png"/></a>
<a href = "https://twitter.com/" target = "_blank"><img src="./images/Twitter.png"/></a>
<a href = "https://plus.google.com/" target = "_blank"><img src="./images/Google-Plus.png"/></a>
</div> -->
<!-- <h3 class="w3-padding-64"><b>AlCapones Wood</b></h3> -->
<div class="w3-bar-block">
<a href="default.html" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white">Home</a>
<!-- <a href="#showcase" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white">Showcase</a> -->
<a href="about.html" Us" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white">About</a>
<a href="productCat.html" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white">Products</a>
<a href= "orderhere.html" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white">Order Here</a>
<a href= "contact.html" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white">Contact</a>
<a href= "subscribe.html" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white">Subscribe</a>
</div>
</nav>
<!-- Top menu on small screens -->
<header class="w3-container w3-top w3-hide-large w3-red w3-xlarge w3-padding">
<a href="javascript:void(0)" class="w3-button w3-red w3-margin-right" onclick="w3_open()">☰</a>
<span>Ann T Cid</span>
</header>
<!-- Overlay effect when opening sidebar on small screens -->
<div class="w3-overlay w3-hide-large" onclick="w3_close()" style="cursor:pointer" title="close side menu" id="myOverlay"></div>
<!-- !PAGE CONTENT! -->
<div class="w3-main" style="margin-left:340px;margin-right:40px">
<div class = "container">
<div id ="top_left">
<!-- Email : alcaponeswood@gmail.com -->
</div>
<div id = "top_center">
<!-- Mobile : 414-698-7246 -->
</div>
</div>
<!-- Header -->
<!-- <div class="w3-container" style="margin-top:50px" id="Title">
<h1>Welcome to....</h1>
<div class="w3-display-topmiddle w3-hide-small">
<h1 class="w3-xxxlarge w3-text-red">Ann T Cid</h1>
<p>We write it so you don't have to!</p>
</div> -->
<div class = "wrapper" style = "background-image : url('./images/6.jpg')">
<div class="w3-container" style="margin-top:5px" id="Title">
<div class="w3-xxlarge w3-text-white">
Welcome to...
</div>
<div class="w3-xxxlarge w3-text-white" id="middle">
Al Capone's Woods
</div>
<div class="w3-xlarge w3-text-white" id = "top_center">
We write it so you don't have to!
</div>
</div>
</div>
<!-- ## Basic Usage -->
<!-- The `autoplay` attribute (type=slides only) advances the slide to the next slide without user interaction, by default it will advance a slide in 5000 millisecond intervals (5 seconds) and can be overridden by the `delay` attribute. -->
<amp-carousel width="500" height="300" layout="responsive" type="slides" autoplay delay="5000">
<amp-img src="./images/12.jpg" width="400" height="100" layout="responsive" alt="a sample image"></amp-img>
<amp-img src="./images/10.jpg" width="400" height="100" layout="responsive" alt="another sample image"></amp-img>
<amp-img src="./images/11.jpg" width="400" height="100" layout="responsive" alt="and another sample image"></amp-img>
</amp-carousel>
<!-- Content of Home Page -->
<div class = "content">
<div class="w3-container" style="margin-top:5px" id="middle">
<div class="w3-xxlarge w3-text-white">
Perfect For
</div>
<div class="w3-xlarge w3-text-white" id="middle">
<ul>
<li>Great Fires </li>
<li>Entertaining </li>
<li> Relaxing </li>
<li>Plain Enjoyment! </li>
</ul>
</div>
</div>
</div>
<div class = "container">
Pricing <a href = "#">Sign Up </a>here
</div>
<!-- Footer Section -->
<div class = "footer-main w3-xxxlarge w3-text-white" style = "background-image : url('./images//17.jpg')">
<div class = "footer_iiner">
<div class = "footer-left">
<div class = "footer-box w3-xxxlarge w3-text-white">
<h6>QUICK LINKS</h6>
<ul>
<li><a href="#">Products</a></li>
<li><a href="#">Price Information</a></li>
<li><a href="#">Order Here</a></li>
<li><a href="#">Writing</a></li>
</ul>
</div>
<div class = "footer-box">
<h6>WORKING HOURS</h6>
<ul>
<li>Monday -Saturday 8am -6pm</li>
<li>Sunday -Call</li>
</ul>
</div>
</div>
<div class = "footer-left">
<div class = "footer-box">
<h6>REACH US</h6>
<ul>
<li>Shorewood, Wisconsin</li>
<li>Call us at 414-698-7246</li>
<li>E-mail at contact@anntcid.com</li>
</ul>
</div>
<div class = "footer-box">
<h6>SERVICE AREAS</h6>
<ul>
<li><a href="#">A global company</a></li>
</ul>
</div>
</div>
<div class = "footer-left">
<div class = "footer-box">
<h6>FOLLOW US</h6>
<ul>
<li><a href="https://www.facebook.com/" target = "_blank"><img src="./images/Facebook.png"/></a>Facebook</li>
<li><a href="https://www.youtube.com/" target = "_blank"><img src="./images/Youtube.png"/></a>You Tube</li>
<li><a href="https://twitter.com/" target = "_blank"><img src="./images/Twitter.png"/></a>Twitter</li>
<li><a href="https://plus.google.com/" target = "_blank"><img src="./images/Google-Plus.png"/></a>Google Plus</li>
</ul>
</div>
</div>
<div class = "cir"></div>
</div>
</div>
<!-- End page content -->
</div>
<!-- W3.CSS Container -->
<script>
// Script to open and close sidebar
function w3_open() {
document.getElementById("mySidebar").style.display = "block";
document.getElementById("myOverlay").style.display = "block";
}
function w3_close() {
document.getElementById("mySidebar").style.display = "none";
document.getElementById("myOverlay").style.display = "none";
}
// Modal Image Gallery
function onClick(element) {
document.getElementById("img01").src = element.src;
document.getElementById("modal01").style.display = "block";
var captionText = document.getElementById("caption");
captionText.innerHTML = element.alt;
}
</script>
</body>
</html>