style

irapha · Feb 19, 2017 · 1029122 · 1029122
1 parent 7c64b6f
commit 1029122
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 3 deletions.
diff --git a/app/static/css/app.css b/app/static/css/app.css
@@ -22,6 +22,20 @@ h4 {
   margin: 20px;
 }
 
+.preview, .hover_holder {
+  width: 336px;
+}
+
+.hover_holder {
+  height: 4px;
+}
+
+.hover {
+  color: #FFC107;
+  width: 2px;
+  border-radius: 1px;
+}
+
 #header_container {
   margin-top: 0px;
   padding-top: 5px;

diff --git a/app/templates/pages/home_page.html b/app/templates/pages/home_page.html
@@ -15,13 +15,13 @@ <h4>Search within YouTube videos</h4>
 
 <!-- not real lmao this is it -->
 <div>
-  <img src="https://i.ytimg.com/vi/ZaUB84dMQ9U/hqdefault.jpg?custom=true&w=336&h=188&stc=true&jpg444=true&jpgq=90&sp=68&sigh=uK1rbMa1Wwwo63_uAf5EcFpzSKU" />
+  <img class="preview" src="https://i.ytimg.com/vi/ZaUB84dMQ9U/hqdefault.jpg?custom=true&w=336&h=188&stc=true&jpg444=true&jpgq=90&sp=68&sigh=uK1rbMa1Wwwo63_uAf5EcFpzSKU" />
   <div class="hover_holders">
     <a href='timestamped video url'>
-      <div class="hover" value="store the frame img url here and modify the img tag above onhover (and on mouse leave you go back to thumbnail)" style="padding-left: 20%; /* this percentage is the same as how much percent in the video the timestamp is */"></div>
+      <div class="hover" value="store the frame img url here and modify the img tag above onhover (and on mouse leave you go back to thumbnail)" style="margin-left: 20%; /* this percentage is the same as how much percent in the video the timestamp is */"></div>
     </a>
     <a href='timestamped video url'>
-      <div class="hover" value="store the frame img url here and modify the img tag above onhover (and on mouse leave you go back to thumbnail)" style="padding-left: 40%; /* this percentage is the same as how much percent in the video the timestamp is */"></div>
+      <div class="hover" value="store the frame img url here and modify the img tag above onhover (and on mouse leave you go back to thumbnail)" style="margin-left: 40%; /* this percentage is the same as how much percent in the video the timestamp is */"></div>
     </a>
   </div>
   <div class="vid_desc">