Skip to content

abalsh / Garlix

Go to a project
Commit 22eb308c by Florian Shllaku
Options

made web more responsive with media + others

parent 7373cbc1
Inline Side-by-side
Showing with 71 additions and 56 deletions
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">
......
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 {
margin-left: 1rem;
.nav-masthead .active {
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
......
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">
......
index.html
<!doctype html>
<!Doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
......
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">
......
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