colors changed, resposivity improved

Developers-RCCS · Sep 30, 2020 · 9d91013 · 9d91013
1 parent 849d8ea
commit 9d91013
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 83 deletions.
diff --git a/img/placeholder-music.jpg b/img/placeholder-music.jpg
diff --git a/index.html b/index.html
@@ -30,46 +30,34 @@
 
 <body class="text-center">
     <div class="cover-container d-flex w-100 h-100 p-3 mx-auto flex-column">
-        <header class="masthead mb-auto">
-            <!--<div class="inner">
-                <h3 class="masthead-brand justify-content-center">FM Royal 2020</h3>
-                <nav class="nav nav-masthead justify-content-center">
-                    <a class="nav-link active" href="#">Home</a>
-                    <a class="nav-link" href="#">Features</a>
-                    <a class="nav-link" href="#">Contact</a>
-                </nav>
-            </div>-->
-        </header>
-
-        <main role="main" class="inner cover">
-            <h2 class="cover-heading">FM ROYAL 2020</h1>
+        <main role="main" class="inner cover mt-auto">
+            <h2 class="cover-heading text-warning">FM ROYAL 2020</h1>
             <div class="botón" onclick="this.classList.toggle('active')">
                 <div class="fondo" x="0" y="0" width="200" height="200"></div>
                 <div class="icono" width="200" height="200">
-                    <div class="parte izquierda" x="0" y="0" width="200" height="200" fill="#fff"></div>
-                    <div class="parte derecha" x="0" y="0" width="200" height="200" fill="#fff"></div>
+                    <div class="parte izquierda bg-warning" x="0" y="0" width="200" height="200" fill="#fff"></div>
+                    <div class="parte derecha bg-warning" x="0" y="0" width="200" height="200" fill="#fff"></div>
                 </div>
                 <div class="puntero"></div>
             </div>
-            <div class="card text-left text-white bg-dark border-primary">
-            <div class="card-header pt-2 pb-2 pl-3">Now Playing</div>
-            <div class="card-body p-3">
+            <div class="card text-left text-warning bg-transparent border-warning shadow-sm">
+            <div class="card-header border-transparent pt-2 pb-2 pl-3">Now Playing</div>
+            <div class="card-body p-sm-3 pb-2 pt-3">
                 <div class="row">
-                    <div class="col-sm-2">
-                        <img src="https://www.indigenousmusicawards.com/img/placeholder-music.png" height="70px" width="70px">
+                    <div class="col-sm-2 my-auto">
+                        <img src="/img/placeholder-music.jpg" height="70px" width="70px">
                     </div>
-                    <div class="col-sm-10 p-2">
+                    <div class="col-sm-10 p-2 pl-3">
                         <h5 class="card-title">The Drama, a Dramatic Talk</h5>
                         <small>2.00PM - 4.00PM</small>
                     </div>
                 </div>
             </div>
             </div>
         </main>
-
         <footer class="mastfoot mt-auto">
             <div class="inner" style="font-size: 0.9rem;">
-                <p>Download the official app of <a href>FM Royal</a>. A project by <a href>Media Unit of Royal College</a></p>
+                <p>Download the official app of <a class="text-warning" href>FM Royal</a>. A project by <a class="text-warning" href>Media Unit of Royal College</a></p>
             </div>
         </footer>
     </div>

diff --git a/style.css b/style.css
@@ -9,25 +9,14 @@ a:hover {
   color: #fff;
 }
 
-/* Custom default button */
-.btn-secondary,
-.btn-secondary:hover,
-.btn-secondary:focus {
-  color: #333;
-  text-shadow: none; /* Prevent inheritance from `body` */
-  background-color: #fff;
-  border: .05rem solid #fff;
-}
-
-
 /*
  * Base structure
  */
 
 html,
 body {
   height: 100%;
-  background-color: #333;
+  background-color: #103863;
 }
 
 body {
@@ -42,50 +31,6 @@ body {
   max-width: 42em;
 }
 
-
-/*
- * Header
- */
-.masthead {
-  margin-bottom: 2rem;
-}
-
-.masthead-brand {
-  margin-bottom: 0;
-}
-
-.nav-masthead .nav-link {
-  padding: .25rem 0;
-  font-weight: 700;
-  color: rgba(255, 255, 255, .5);
-  background-color: transparent;
-  border-bottom: .25rem solid transparent;
-}
-
-.nav-masthead .nav-link:hover,
-.nav-masthead .nav-link:focus {
-  border-bottom-color: rgba(255, 255, 255, .25);
-}
-
-.nav-masthead .nav-link + .nav-link {
-  margin-left: 1rem;
-}
-
-.nav-masthead .active {
-  color: #fff;
-  border-bottom-color: #fff;
-}
-
-@media (min-width: 48em) {
-  .masthead-brand {
-    float: left;
-  }
-  .nav-masthead {
-    float: right;
-  }
-}
-
-
 /*
  * Cover
  */
@@ -102,7 +47,7 @@ body {
  * Footer
  */
 .mastfoot {
-  color: rgba(255, 255, 255, .5);
+  color: rgba(255, 255, 255, .75);
 }
 
 /*
@@ -115,17 +60,17 @@ body {
 }
 
 .fondo {
-    background: #2579f8;
+    background: #134999;
     border-radius: 50%;
-    box-shadow: 0 2px 20px rgba(0, 0, 200, 0.5);
+    box-shadow: 0 2px 20px rgba(11, 11, 14, 0.4);
     cursor: pointer;
     height: 120px;
     position: absolute;
     width: 120px;
 }
 
 .botón:active .fondo {
-    background: #2579f8c0;
+    background: #12438dbb;
 }
 .icono {
     height: 200px;