made web more responsive with media + others

22eb308c · Florian Shllaku · 7373cbc1 · 22eb308c · 22eb308c · 22eb308c
Commit 22eb308c authored Feb 26, 2019 by Florian Shllaku
Showing with 71 additions and 56 deletions
crypto.html
css/main.css
fiat.html
img/responsive-background.jpg
index.html
subscribe.html
--- a/crypto.html
+++ b/crypto.html
-<!doctype html>
+<!Doctype html>
 <html lang="en">
  <head>
    <meta charset="utf-8">
@@ -12,9 +12,9 @@
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    <!-- Main Custom styles for the website  -->
-    <link href="css/main.css" rel="stylesheet">
+    <link href="css\main.css" rel="stylesheet">
  </head>
-  <body class="text-center" background="img/background.jpg">
+  <body class="text-center" background="img\background.jpg">
    <div class="cover-container d-flex w-100 h-100 p-3 mx-auto flex-column">
  <header class="masthead mb-auto">
    <div class="inner">

--- a/css/main.css
+++ b/css/main.css
-.bd-placeholder-img {
-    font-size: 1.125rem;
-    text-anchor: middle;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-  }
-  @media (min-width: 768px) {
-    .bd-placeholder-img-lg {
-      font-size: 3.5rem;
-    }
-  }
-.bd-placeholder-img {
-    font-size: 1.125rem;
-    text-anchor: middle;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-  }
-  @media (min-width: 768px) {
-    .bd-placeholder-img-lg {
-      font-size: 3.5rem;
-    }
-  }
-  /*
- * Globals
- */
-/* Links */
 a,
 a:focus,
 a:hover {
@@ -43,7 +9,7 @@ a:hover {
 .btn-secondary,
 .btn-secondary:hover,
 .btn-secondary:focus {
-  color: #333;
+  color: #000;
  text-shadow: none; /* to not have shadow from `body` */
  background-color: #ffffff;
  border: .02rem solid #fff;
@@ -77,7 +43,7 @@ body {
 * Header
 */
 .masthead {
-  margin-bottom: 2rem;
+  margin-bottom: 32px;
 }
 .masthead-brand {
@@ -85,28 +51,30 @@ body {
 }
 .nav-masthead .nav-link {
-  padding: .25rem 0;
+  padding: 4px 0;
  font-weight: 700;
-  color: rgba(255, 255, 255, .5);
+  color: #fff;
  background-color: transparent;
-  border-bottom: .25rem solid transparent;
+  border-bottom: 4px solid transparent;
+  width: 90px;
 }
 .nav-masthead .nav-link:hover,
 .nav-masthead .nav-link:focus {
-  border-bottom-color: rgba(255, 255, 255, .25);
+color: #85bb65;
 }
-.nav-masthead .nav-link + .nav-link {
+.nav-masthead .active {
-  margin-left: 1rem;
+  background-color: #85bb65;
+  color: #fff;
+  border-radius: 1px;
 }
-.nav-masthead .active {
+.nav-masthead .active:hover {
  color: #fff;
-  border-bottom-color: #85bb65;
 }
-@media (min-width: 48em) {
+@media (min-width: 768px) {
  .masthead-brand {
    float: left;
  }
@@ -115,6 +83,51 @@ body {
  }
 }
+@media all and (min-width: 960px) {
+  body, .lead, .btn{
+      font-size: 18px;
+  }
+  h1{
+    font-size: 44px;
+  }
+}
+@media all and (max-width: 959px) and (min-width: 600px) {
+  body, .lead, .btn{
+      font-size: 16px;
+  }
+  body{
+    background-image: url("/home/gorilla/Desktop/Garlix/img/responsive-background.jpg");
+  }
+  html,
+  body {
+    height: 100%;
+    background-color: #333;
+  }
+  h1{
+    font-size: 36px;
+  }
+}
+@media all and (max-width: 599px) and (min-width: 320px) {
+  body, .lead, .btn{
+      font-size: 13px;
+  }
+  h1{
+    font-size: 24px;
+  }
+  body{
+    background-image: url("/home/gorilla/Desktop/Garlix/img/responsive-background.jpg");
+  }
+  html,
+  body {
+    height: 100%;
+    background-color: #333;
+  }
+}
 /*
 * Cover

--- a/fiat.html
+++ b/fiat.html
-<!doctype html>
+<!Doctype html>
 <html lang="en">
  <head>
    <meta charset="utf-8">
@@ -12,9 +12,9 @@
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    <!-- Main Custom styles for the website  -->
-    <link href="css/main.css" rel="stylesheet">
+    <link href="css\main.css" rel="stylesheet">
  </head>
-  <body class="text-center" background="img/background.jpg">
+  <body class="text-center" background="img\background.jpg">
    <div class="cover-container d-flex w-100 h-100 p-3 mx-auto flex-column">
  <header class="masthead mb-auto">
    <div class="inner">

--- a/img/responsive-background.jpg
+++ b/img/responsive-background.jpg
--- a/index.html
+++ b/index.html
+<!Doctype html>
-<!doctype html>
 <html lang="en">
  <head>
    <meta charset="utf-8">

--- a/subscribe.html
+++ b/subscribe.html
-<!doctype html>
+<!Doctype html>
 <html lang="en">
  <head>
    <meta charset="utf-8">
@@ -12,9 +12,9 @@
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    <!-- Main Custom styles for the website  -->
-    <link href="css/main.css" rel="stylesheet">
+    <link href="css\main.css" rel="stylesheet">
  </head>
-  <body class="text-center" background="img/background.jpg">
+  <body class="text-center" background="img\background.jpg">
    <div class="cover-container d-flex w-100 h-100 p-3 mx-auto flex-column">
  <header class="masthead mb-auto">
    <div class="inner">
@@ -28,12 +28,15 @@
        <a class="nav-link active" href="subscribe.html">Subscribe</a>
      </nav>
    </div>
+  </header>
    <br> <br>
    <div class="page-wrapper bg-gra-01 p-t-180 p-b-100 font-poppins">
        <div class="wrapper wrapper--w780">
            <div class="card card-3">
                <div class="card-heading"></div>
                <div class="card-body">
+                  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley.</p>
+                  <br> 
                  <h2 class="title">Subscription Info</h2>
                    <form method="POST">
                        <div class="input-group">