wrapped up banner homepage

static/css/style.css

@@ -583,9 +583,10 @@ a.paginate_button.next:after {
 div#home-top-div{
 	height: 661px;
 	width: 100%;
-	border:blue solid 1px;
 	overflow: hidden;
 	position: relative;
+	border-bottom:  solid black 3px;
+
 }
 
 .heading_A {
@@ -605,13 +606,41 @@ div#home-top-div{
 	position: static;
 	max-width: 634px;
 }
+#home-top-div p {
+	margin-bottom: 0px;
+}
+
+#home-top-div #wrapper-bt-vid {
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+}
+
+#home-top-div #wrapper-vid {
+	margin: 0px 150px 0px 0px;
+	position: static;
+	width: 50%;
+}
+
+#home-top-div #wrapper-bt{
+	margin: 36px 26px 0px 150px;
+	position: static;
+	width: 50%;
+}
+
+#home-top-div #wrapper-vid video {
+	max-width: 600px;
+	width: 100%;
+	height: auto;
+}
 
 #home-top-div #wrapper-top-buttons{
 	display: flex;
 	align-items: center;
 	justify-content: center;
+	margin-bottom: 26px;
 }
-#home-top-div .primary-button { 
+/*#home-top-div .primary-button { 
 	margin-left: 150px; 
 	margin-bottom: 26px;
 	position: static; 
@@ -619,7 +648,7 @@ div#home-top-div{
 #home-top-div .secondary-button { 
 	margin-left: 150px;  
 	position: static;
-}
+}*/
 
 #home-top-div img {
 	position: absolute;
@@ -658,16 +687,16 @@ div#home-top-div{
 
 @keyframes move {
   0% {
-  -webkit-transform:  translateX(0px);
+  -webkit-transform:  translateX(0vw);
-  -ms-transform:  translateX(0px);
+  -ms-transform:  translateX(0vw);
-  -moz-transform: translateX(0px); 
+  -moz-transform: translateX(0vw); 
-  transform: translateX(0px);
+  transform: translateX(0vw);
   }
   100% {
-  -webkit-transform:  translateX(1650px); /* 250vw*/
+  -webkit-transform:  translateX(200vw); /* 250vw*/
-  -ms-transform:  translateX(1650px);
+  -ms-transform:  translateX(200vw);
-  -moz-transform: translateX(1650px); 
+  -moz-transform: translateX(200vw); 
-  transform: translateX(1650px);
+  transform: translateX(200vw);
   }
 }
 
@@ -686,6 +715,7 @@ div#home-top-div{
   }
 }
 
+/* ARCHIVE PREVIEW */
 
 img.home-recent-imgs, img.browsethearchive-imgs{
 	width: 100%;

templates/about.html

@@ -5,12 +5,15 @@
 <div class="pagetitle" id="about-title">About: Digital Archive of Artists Publishing (DAAP)</div>
 
 <div id="about-content">
+
 	<div id="about-content-top">
 		<div id="about-content-top-left">The Digital Archive of Artists Publishing (DAAP) is an interactive, user-driven, searchable database of Artists’ Books and publications, that acts as a hub to engage with others, built by artists, publishers, and a community of producers in contemporary Artists’ Publishing, developed via an ethically driven design process and open-data methodology.
 		</div>
+		
 		<div id="about-content-top-right">
 			<img src="{{ url_for('static', filename='/imgs/Pages/bannerrepeater.png') }}">
 		</div>
+	</div>	
 
   <div id="about-content-bottom">
 
@@ -116,7 +119,7 @@
 		</div>
 	</div>
 
-</div>
+  </div>
 </div>
 
 

templates/home.html

@@ -25,9 +25,19 @@
 
 	<p class="heading_A">The Digital Archive of Artists Publishing is an interactive, user-driven, searchable database of Artist's Books and publications</p>
 
-	<div id="wrapper-top-buttons" class="primary-button" id=""><span>SEE EXAMPLE SEARCH FOR ZINES</span></div>
 
-	<div id="wrapper-top-buttons"  class="secondary-button" id=""><span>LEARN MORE ABOUT ADVANCED SEARCH TOOLS</span></div>
+	<div id="wrapper-bt-vid">
+		<div id="wrapper-bt">
+			<div id="wrapper-top-buttons" class="primary-button"><span>SEE EXAMPLE SEARCH FOR ZINES</span></div>
+
+			<div id="wrapper-top-buttons" class="secondary-button"><span>LEARN MORE ABOUT ADVANCED SEARCH TOOLS</span></div>
+		</div>
+		<div id="wrapper-vid">
+			<video preload="meta" autoplay="" loop="">
+				 <source src="vid/archive-links-video-temp.mp4" type="video/mp4">
+			</video>
+		</div>
+	</div>
 
 </div>