Commit 22eb308c by Florian Shllaku

made web more responsive with media + others

parent 7373cbc1
<!doctype html> <!Doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
...@@ -12,9 +12,9 @@ ...@@ -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"> <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> <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 --> <!-- Main Custom styles for the website -->
<link href="css/main.css" rel="stylesheet"> <link href="css\main.css" rel="stylesheet">
</head> </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"> <div class="cover-container d-flex w-100 h-100 p-3 mx-auto flex-column">
<header class="masthead mb-auto"> <header class="masthead mb-auto">
<div class="inner"> <div class="inner">
......
.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,
a:focus, a:focus,
a:hover { a:hover {
...@@ -43,7 +9,7 @@ a:hover { ...@@ -43,7 +9,7 @@ a:hover {
.btn-secondary, .btn-secondary,
.btn-secondary:hover, .btn-secondary:hover,
.btn-secondary:focus { .btn-secondary:focus {
color: #333; color: #000;
text-shadow: none; /* to not have shadow from `body` */ text-shadow: none; /* to not have shadow from `body` */
background-color: #ffffff; background-color: #ffffff;
border: .02rem solid #fff; border: .02rem solid #fff;
...@@ -77,7 +43,7 @@ body { ...@@ -77,7 +43,7 @@ body {
* Header * Header
*/ */
.masthead { .masthead {
margin-bottom: 2rem; margin-bottom: 32px;
} }
.masthead-brand { .masthead-brand {
...@@ -85,28 +51,30 @@ body { ...@@ -85,28 +51,30 @@ body {
} }
.nav-masthead .nav-link { .nav-masthead .nav-link {
padding: .25rem 0; padding: 4px 0;
font-weight: 700; font-weight: 700;
color: rgba(255, 255, 255, .5); color: #fff;
background-color: transparent; background-color: transparent;
border-bottom: .25rem solid transparent; border-bottom: 4px solid transparent;
width: 90px;
} }
.nav-masthead .nav-link:hover, .nav-masthead .nav-link:hover,
.nav-masthead .nav-link:focus { .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; color: #fff;
border-bottom-color: #85bb65;
} }
@media (min-width: 48em) { @media (min-width: 768px) {
.masthead-brand { .masthead-brand {
float: left; float: left;
} }
...@@ -115,6 +83,51 @@ body { ...@@ -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 * Cover
......
<!doctype html> <!Doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
...@@ -12,9 +12,9 @@ ...@@ -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"> <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> <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 --> <!-- Main Custom styles for the website -->
<link href="css/main.css" rel="stylesheet"> <link href="css\main.css" rel="stylesheet">
</head> </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"> <div class="cover-container d-flex w-100 h-100 p-3 mx-auto flex-column">
<header class="masthead mb-auto"> <header class="masthead mb-auto">
<div class="inner"> <div class="inner">
......
<!Doctype html>
<!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
......
<!doctype html> <!Doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
...@@ -12,9 +12,9 @@ ...@@ -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"> <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> <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 --> <!-- Main Custom styles for the website -->
<link href="css/main.css" rel="stylesheet"> <link href="css\main.css" rel="stylesheet">
</head> </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"> <div class="cover-container d-flex w-100 h-100 p-3 mx-auto flex-column">
<header class="masthead mb-auto"> <header class="masthead mb-auto">
<div class="inner"> <div class="inner">
...@@ -28,12 +28,15 @@ ...@@ -28,12 +28,15 @@
<a class="nav-link active" href="subscribe.html">Subscribe</a> <a class="nav-link active" href="subscribe.html">Subscribe</a>
</nav> </nav>
</div> </div>
</header>
<br> <br> <br> <br>
<div class="page-wrapper bg-gra-01 p-t-180 p-b-100 font-poppins"> <div class="page-wrapper bg-gra-01 p-t-180 p-b-100 font-poppins">
<div class="wrapper wrapper--w780"> <div class="wrapper wrapper--w780">
<div class="card card-3"> <div class="card card-3">
<div class="card-heading"></div> <div class="card-heading"></div>
<div class="card-body"> <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> <h2 class="title">Subscription Info</h2>
<form method="POST"> <form method="POST">
<div class="input-group"> <div class="input-group">
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment