changed video

Author: jpabloms2

front/static/index.html

@@ -41,6 +41,14 @@
       <!-- / instructions / -->
       <div class="top-container border-bottom">
         <div class="instructions-container">
+          <div class="cta-button-container">
+            <button class="cta-button" onclick="location.href='app.html'">
+              Get started
+              <svg class="cta-button__icon">
+                <use xlink:href="assets/sprite.svg#arrow-icon"></use>
+              </svg>
+            </button>
+          </div>
           <article class="instructions">
             <h2 class="instructions__title">
               Code paster is a free online app
@@ -54,6 +62,7 @@ <h3 class="instructions__subtitle">What can I use it for?</h3>
               makes Code Paster a great and simple application to be used in any
               kind of online activity which requires text to be shared.
             </p>
+
             <h3 class="instructions__subtitle">How does it work?</h3>
             <ol class="instructions__list">
               <li class="instructions__text">
@@ -72,37 +81,16 @@ <h3 class="instructions__subtitle">How does it work?</h3>
                 in the room will be able to see whatever you have writen in it
               </li>
             </ol>
-          </article>
-          <div class="cta-button-container">
-            <!-- <button class="cta-button" onclick="location.href='app.html'">
-              Get started
-              <svg class="cta-button__icon">
-                <use xlink:href="assets/sprite.svg#arrow-icon"></use>
-              </svg>
-            </button> -->
-
-            <video
+            <div class="video-container">
+              <video
               class="video"
               src="http://v2v.cc/~j/theora_testsuite/320x240.ogg"
               controls
-            ></video>
-          </div>
+              /></video>
+            </div>
+          </article>
         </div>
       </div>
-      <!-- / video / -->
-      <section class="box-content border-bottom">
-        <div class="video-section-container">
-          <h2 class="heading">Video tutorial</h2>
-          <div class="video-container">
-            <iframe
-              src="https://www.youtube.com/embed/4sswp02n0Yg"
-              frameborder="0"
-              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-              allowfullscreen
-            ></iframe>
-          </div>
-        </div>
-      </section>
 
       <!-- / credits / -->
       <div class="box-content border-bottom" id="credits">

front/static/styles.css

@@ -345,19 +345,13 @@ ul {
   justify-content: space-between;
   width: 70%;
   margin: 0 auto;
-  border: 1px solid red;
-}
-
-.video {
-  width: 90%;
-  margin: 2% auto;
-  max-height: 220px;
-  background-color: #151611;
+  /* padding: 2% 0; */
 }
 
 .instructions {
   width: 65%;
   margin-left: auto;
+  display: block;
   padding: 3rem;
   border: 2px solid var(--color-grey-medium);
 }
@@ -379,6 +373,31 @@ ul {
   margin-bottom: 1rem;
 }
 
+.video-container {
+  display: inline-flex;
+  justify-content: center;
+  align-content: center;
+  width: 100%;
+  margin-top: 4%;
+  padding: 0;
+}
+
+.video {
+  width: 95%;
+  max-height: 220px;
+  padding: 0;
+  background-color: #151611;
+  border-radius: 5px;
+}
+
+@media (min-width: 1024px) {
+  .video {
+    max-width: 400px;
+
+    max-height: 300px;
+  }
+}
+
 @media only screen and (max-width: 1250px) {
   .instructions-container {
     width: 70%;
@@ -430,35 +449,6 @@ ul {
   }
 }
 
-/* - - - - - video - - - - - */
-.video-section-container {
-  width: 70%;
-}
-
-.video-container {
-  position: relative;
-  padding-bottom: 56.25%;
-  padding-top: 30px;
-  height: 0;
-  overflow: hidden;
-}
-
-.video-container iframe,
-.video-container object,
-.video-container embed {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-}
-
-@media only screen and (max-width: 770px) {
-  .video-section-container {
-    width: 100%;
-  }
-}
-
 /* - - - - - credits - - - - - */
 .card {
   display: flex;