Untitled

<!DOCTYPE html>

<html lang="en">

<head>

<title>The Music Department of the Performing Arts Academy - Performance Gallery</title>

<meta charset="utf-8">

<meta name="description" content="This is a paragraph of text that describes your website">

<link href="https://fonts.googleapis.com/css?family=Neucha" rel="stylesheet">

<link rel="stylesheet" type="text/css" href="CSS\style.css">

<script src="script.js"><!--Insert Google Analytics code here--></script>

</head>

<body>

<div class="wrapper"><!--open wrapper-->
	<div class="headercontent"><!--open header-->
	<h2>musicdepartment@gmail.com 07111111111</h2>
	<h1>About Us</h1>


	<ul class="nav">
     <li><a href="index.html">Home</a></li>
     <li><a href="sound samples.html">Sound Samples</a></li>
     <li><a href="performance.html">Performance Gallery</a></li>
     <li><a href="recording gallery.html">Recording Gallery</a></li>
     <li><a href="about us.html">About Us</a></li>
    </ul>

	<!--<div class="logo">
	 <img src="images/logo.png" height="30px" width="30px"/>-->

    </div><!--close header-->


	</div><!--close menu-->

	<div class="mainOne"><!--open mains-->


		<div class="aboutUs"><!--open aboutUs-->
		 <p>orem ipsum dolor sit amet, consectetur adipiscing elit.
		 Cras mattis a ligula sed sodales. Nullam commodo in elit
		 dignissim blandit. Maecenas in dolor sodales, tempor nunc id,
		 vulputate mi. Curabitur eu dapibus ante, at iaculis purus.
		 Mauris dignissim massa dolor, non egestas massa mattis et.
		 In quam felis, molestie ultrices turpis vel, fermentum
		 eleifend lorem. Maecenas vulputate est velit, non convallis
		 arcu fermentum quis. Sed tincidunt ut sapien eu pellentesque.
		 Vestibulum ante ipsum primis in faucibus orci luctus et
		 ultrices posuere cubilia Curae; Nulla vitae ex venenatis,
		 molestie mauris in, finibus felis. Nullam sem arcu, lacinia
		 eu sem at, semper vestibulum ipsum. Donec faucibus efficitur
		 auctor. Phasellus accumsan mattis eleifend. Cras vehicula
		 velit vel sapien dapibus, sit amet aliquet risus pharetra.
		 Fusce non ullamcorper dui, a vehicula sapien.Pellentesque
		 pulvinar lectus eu orci congue elementum. In vitae est vitae
		 sem tristique accumsan. Curabitur dapibus pretium ante tincidunt
		 pretium. Integer dictum augue turpis, sit amet rutrum eros blandit
		 quis. Sed id fringilla purus, eu pharetra orci. Proin quis faucibus
		 elit. Proin efficitur ut ipsum gravida pulvinar. Etiam lobortis et
		 tortor nec aliquet. Praesent vel turpis elementum, commodo nibh in,
		 aliquam ante. Duis pulvinar, est at finibus ullamcorper, turpis
		 nulla posuere nisi.</p>
		</div><!--close aboutUs-->

		<div class="rectangle"><a href="http://static1.1.sqspcdn.com/static/f/734200/27700796/1506433495440/Newsletter+Autumn+2017.pdf?token=sjatfxEFCwQjcpVBGyQsM90H1sM%3D"></div>

		<div class="newsletter">Download Newsletter</div>


		<div id="BG"><!--Start of Slideshow-->
		  <div id="mainBox">
			<div id="imgBox">
			  <img src="images/music performance/battle of the bands 04 3.jpg" height="250px" width="200px"/>
			  <img src="images/music technology/digital studio 5.jpg" height="250px" width="200px"/>
			  <img src="images/music technology/live sound 1.jpg" height="250px" width="200px"/>
			</div>
          </div>
        </div><!--End of Slideshow-->


	</div> <!--close main-->
	<footer>
	<div class="footer content"><!--open footer-->


		<ul class="footercontents">
	    <li><a href="index.html">Home</a></li>
		<li><a href="sound samples.html">Sound Samples</a></li>
		<li><a href="performance.html">Performance Gallery</a></li>
		<li><a href="recording gallery.html">Recording Gallery</a></li>
		<li><a href="about us.html">About Us</a></li>
        </ul>

        <div class="access"><!--open access-->

            	<li>
                	<a href="#">
                	<img src="images/SmallA.png" alt="Accessibility icon"></a>
                </li>
                <li>
                	<a href="#">
                	<img src="images/MidA.png" alt="Accessibility icon"></a>
                </li>
				<li>
					<a href="#">
                	<img src="images/BigA.png" alt="Accessibility icon"></a>
				</li>

            </ul>
		</div><!--close access-->
		<div class="social"><!--open social-->
      		<ul class="social">
            	<li>
                	<a href="https://www.facebook.com/nameOfYourSite/">
                	<img src="images/facebook.png" alt="FaceBook Logo"></a>
                </li>
                <li>
                	<a href="https://twitter.com/nameOfYourSite">
                	<img src="images/twitter.png" alt="Twitter Logo"></a>
                </li>
				<li>
					<a href="https://www.instagram.com/nameOfYourSite/">
                	<img src="images/instagramLogo.png" alt="Instagram Logo"></a>
				</li>

            </ul>


        </div><!--close social-->
	</footer>
	</div><!--close footer-->


</div><!--close wrapper-->

<script src="JavaScript/myJavaScript.css" type="text/javascript"></script>

</body>
</html>

*{
	margin: 0;
	padding: 0;
	border: 0;

}

body{
	margin: 0;
	padding: 0;
	font-family: Ariel;
	background: #c40000;
}

.wrapper{
	width:65%;
	margin:0 auto;
	padding:1em;
}

.nav{
	background-color: #c40000;
	color: #ffffff;
	list-style-type: none;
	text-align: center;
	padding: 15px 0 15px 0;

}

.nav > li{
	display: inline-block;
    padding-right: 50px;
}

.nav > li > a{
	text-decoration: none;
	color: #ffffff;
}


.nav > li >a:hover{
	color: #FCB5B5;
}

#mainBox{
	width: 300px;
	height: 300px;
	position: center;
	overflow: hidden;

}

.aboutUs{
	height:800px;
	width:400px;
	position: relative;
	left: 280px;
}

.rectangle{
	width: 200px;
	height: 40px;
	background-color: #C40000;
	position: relative;
	left: 750px;
	bottom: 465px;
}

.newsletter{
	position: relative;
	bottom: 495px;
	left: 780px;
	font-weight: bold;
	text-decoration: none;
	color: #FFFFFF;
}

#BG{
	height: 25%;
	width: 25%;
	position: relative;
	left: 700px;
	bottom: 800px;
}

#mainBox{
	width: 300px;
	height: 300px;
	position: center;
	overflow: hidden;

}

#imgBox{
	width: 300%;
	position: relative;
	left: 0;
	animation: slidemove 30s infinite;
}

.footercontents{
	color: #ffffff;
	list-style-type: none;
	text-align: center;
	padding: 20px 0 20px 0;
}

.footercontents > li{
	display: inline-block;
    padding-right: 5px;
	float: top;

}

.footercontents > li > a{
	text-decoration: none;
	color: #ffffff;
	font-size: 10px;
	font-family: Lato;
}

.footercontents > li >a:hover{
	color: #c1c1c1;
}

.access{
	bottom: 10px;
	list-style-type: none;
	position: relative;
	text-align: center;

}

.access > li{
	display: inline-block;

}

.social > li{
	display: inline-block;

}

.social{
	position: relative;
	bottom: 5px;
	list-style-type: none;
	text-align: center;
}