Grid design and uninett.svg

index.html

@@ -18,12 +18,11 @@ <h1> Send audio clips using the data channel </h1>
     </div>
 
     <div id="buttons">
-      <button id="videoBtn" disabled> Send live video</button>
-      <button id="liveBtn" disabled> Send live audio </button>
-      <button id="stopLiveBtn" disabled> Stop live audio </button>
-      <button id="recordBtn" disabled> Record </button>
-      <button id="stopBtn" disabled> Stop </button>
-      <input id="compressionSlider" type="range" min="1" max="10"/>
+      <button id="videoBtn" class="btn" disabled> Send live video</button>
+      <button id="liveBtn" class="btn" disabled> Send live audio </button>
+      <button id="stopLiveBtn" class="btn" disabled> Stop live audio </button>
+      <button id="recordBtn" class="btn" disabled> Record </button>
+      <button id="stopBtn" class="btn" disabled> Stop </button>
     </div>
 
     <div id="selectors">
@@ -36,6 +35,8 @@ <h1> Send audio clips using the data channel </h1>
         <option value="8192"> 8192 </option>
         <option value="16384"> 16384 </option>
       </select>
+
+      <input id="compressionSlider" type="range" min="1" max="10"/>
     </div>
 
     <div id="videoContainer">
@@ -58,7 +59,8 @@ <h2> Remote Clips: </h2>
     </section>
 
     <div id="footer">
-
+      <p>footer</p>
+      <p>footer</p>
     </div>
   </div>
 

styles/main.css

@@ -3,31 +3,52 @@ body{
 }
 
 #grid{
+  height: 100%;
   display: grid;
   grid-template-columns: 1fr 1fr;
   grid-template-rows: auto;
+  grid-row-gap: 15px;
+  grid-column-gap: 15px;
   grid-template-areas:
   "header header"
   "buttons selectors"
   "videoContainer videoContainer"
   "bitRate bitRate"
   "localClips remoteClips"
   "footer footer";
+  background-color: #E5E0DC;
 }
 
 #header{
+  display: flex;
+  justify-content: space-between;
   grid-area: header;
-  background-color: red;
+  background-color: white;
 
 }
 
 #buttons {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
   grid-area: buttons;
+  background-color: white;
+  margin-left: 15px;
+}
+
+.btn{
+  padding: 5px;
+  width: 120px;
+  height: 50px;
+  margin-top: 5px;
+  margin-bottom: 5px;
 }
 
 #selectors{
   grid-area: selectors;
   margin-top: 10px;
+  background-color: white;
+  margin-right: 15px;
 }
 
 
@@ -36,6 +57,7 @@ body{
   display: grid;
   grid-template-columns: 1fr 1fr;
   margin-top: 10px;
+  justify-items: center;
 }
 
 
@@ -45,6 +67,9 @@ body{
 
 #footer{
   grid-area: footer;
+  background-color: white;
+  bottom: 0;
+  width: 100%;
 }
 
 /*