Removing Blue Border around a Button After Click - html

here is the problematic bit of code
:root {
--color-foreground-text-main: rgb(255, 72, 142);
--color-foreground-text-sub: rgb(0, 114, 153);
}
html,
body {
height: 100%;
}
img {
max-width: 100%;
}
#cover {
background: #222 url('Resources/img/cover.jpg') center center no-repeat;
background-size: cover;
color: var(--color-foreground-text-main);
height: 100%;
text-align: center;
display: flex;
align-items: center;
}
#cover-caption {
width: 100%;
}
#subscribe-button {
text-align: center;
background: var(--color-foreground-text-main);
color: white;
outline: 0;
}
#subscribe-button:hover {
background: var(--color-foreground-text-sub);
}
<!DOCTYPE html>
<html lang="en">
<head>
<!--Mandatory meta tags-->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!--Bootstrap CSS-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<!--Custom Styles-->
<link rel="stylesheet" href="SP_BaseStyle.css" />
<title>School Project</title>
</head>
<body>
<section id="cover">
<div id="cover-caption">
<div class="container">
<div class="col-12">
<br>
<div class="row">
<div class="p-0 pr-1 pb-1 m-0
col-12 col-sm-6 col-md-5">
<label class="sr-only">Name</label>
<input type="text" class="form-control form-control-lg" placeholder="George Smith">
</div>
<div class="p-0 m-0 pr-1 pb-1
col-12 col-sm-6 col-md-5">
<label class="sr-only">Email</label>
<input type="text" class="form-control form-control-lg" placeholder="george.smith#email.com">
</div>
<button type="submit" class="btn btn-lg mb-1
col-12 col-md-2" id="subscribe-button">Subscribe!</button>
</div>
↓
</div>
</div>
</div>
</section>
<!-- jQuery library -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<!-- Popper -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<!-- Latest compiled and minified Bootstrap JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<!-- Initialize Bootstrap functionality -->
<script>
// Initialize tooltip component
$(function() {
$('[data-toggle="tooltip"]').tooltip()
})
// Initialize popover component
$(function() {
$('[data-toggle="popover"]').popover()
})
</script>
</body>
</html>
after clicking the button out of nowhere a dark blue outline appears around the button. I looked around forums and the Bootstrap Docs about it but I cannot seem to find a way to change it's color or remove it altogether
I have tried setting the outline and the box shadow without any success.
NOTE: I know it is a visual queue that should not be removed and prefer just changing the color of it but if I cannot do it other way I would want to remove it internally and add it in CSS.
EDIT: Just for clarification we are talking about the 'subscribe' button not the arrow button. I am adding the code with the suggested changes. Also removing the border for clarity.

I thought it was outline but not, of course i didn't saw your code, but after i see, the problem is here:
border: 2px var(--color-foreground-text-sub) solid;
remove this line. that's all.
Edit: and after click, override this:
.btn.focus, .btn:focus {
outline: 0;
box-shadow: none!important;
}
:root {
--color-foreground-text-main: rgb(255, 72, 142);
--color-foreground-text-sub: rgb(0, 114, 153);
}
.btn.focus, .btn:focus {
outline: 0;
box-shadow: none!important;
}
html,
body {
height: 100%;
}
img {
max-width: 100%;
}
#cover {
background: #222 url('Resources/img/cover.jpg') center center no-repeat;
background-size: cover;
color: var(--color-foreground-text-main);
height: 100%;
text-align: center;
display: flex;
align-items: center;
}
#cover-caption {
width: 100%;
}
#subscribe-button {
text-align: center;
background: var(--color-foreground-text-main);
color: white;
outline: 0;
}
#subscribe-button:hover {
background: var(--color-foreground-text-sub);
}
<!DOCTYPE html>
<html lang="en">
<head>
<!--Mandatory meta tags-->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!--Bootstrap CSS-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<!--Custom Styles-->
<link rel="stylesheet" href="SP_BaseStyle.css" />
<title>School Project</title>
</head>
<body>
<section id="cover">
<div id="cover-caption">
<div class="container">
<div class="col-12">
<br>
<div class="row">
<div class="p-0 pr-1 pb-1 m-0
col-12 col-sm-6 col-md-5">
<label class="sr-only">Name</label>
<input type="text" class="form-control form-control-lg" placeholder="George Smith">
</div>
<div class="p-0 m-0 pr-1 pb-1
col-12 col-sm-6 col-md-5">
<label class="sr-only">Email</label>
<input type="text" class="form-control form-control-lg" placeholder="george.smith#email.com">
</div>
<button type="submit" class="btn btn-lg mb-1
col-12 col-md-2" id="subscribe-button">Subscribe!</button>
</div>
↓
</div>
</div>
</div>
</section>
<!-- jQuery library -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<!-- Popper -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<!-- Latest compiled and minified Bootstrap JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<!-- Initialize Bootstrap functionality -->
<script>
// Initialize tooltip component
$(function() {
$('[data-toggle="tooltip"]').tooltip()
})
// Initialize popover component
$(function() {
$('[data-toggle="popover"]').popover()
})
</script>
</body>
</html>

Just add this to your css:
button:focus {outline:0;}

That's small property named "outline" is mostly placed in pseudo classes. So to avoid it you may use outline:none or outline:0

Related

Make materilize css dropdown smaller in size

I need to make the drop down of the materialize css smaller in size.
The font the spacing and everything. I have trued with width: 50%; height: 50% but this doesnt reduce the size
Now:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<title>Page Title</title>
</head>
<body>
<div class="row">
<div>
<div class="col s12">
<div class="col s6">
<input type="checkbox" class="filled-in single-opt" id="selectAll">
<label for="selectAll" id="selectAllLabel">Select all</label>
</div>
<div class="col s6">
<select id="select">
<option selected>Google Docs</option>
<option>Google Forms</option>
<option>Google Sheets</option>
</select>
</div>
</div>
<script>
$(document).ready(function() {
$('select').material_select();
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<title>Page Title</title>
</head>
<body>
<div class="row">
<div class="col l4">
<input type="checkbox" class="filled-in single-opt" id="selectAll">
<label for="selectAll" id="selectAllLabel">Select all</label>
</div>
<div class="col l4" ">
<select id="select ">
<option selected>Google Docs</option>
<option>Google Forms</option>
<option>Google Sheets</option>
</select>
</div>
</div>
<script>
$(document).ready(function() {
$('select').material_select();
});
</script>
</body>
</html>
try to refer grid layout of there..
You can just scale it?
.select-wrapper {
transform: scale(0.7);
}
You probably need to override the fixed width in the ul on smaller screens to make it wider.
.select-wrapper {
transform: scale(0.7);
}
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<title>Page Title</title>
</head>
<body>
<div class="row">
<div>
<div class="col s12">
<div class="col s6">
<input type="checkbox" class="filled-in single-opt" id="selectAll">
<label for="selectAll" id="selectAllLabel">Select all</label>
</div>
<div class="col s6">
<select id="select">
<option selected>Google Docs</option>
<option>Google Forms</option>
<option>Google Sheets</option>
</select>
</div>
</div>
<script>
$(document).ready(function() {
$('select').material_select();
});
</script>
</body>
</html>
You need to override the li and the nested a. These are the default applied styles:
// The <li>
.dropdown-content li {
clear: both;
color: rgba(0,0,0,0.87);
cursor: pointer;
min-height: 50px;
line-height: 1.5rem;
width: 100%;
text-align: left;
}
// The nested <a>
.dropdown-content li>a, .dropdown-content li>span {
font-size: 16px;
color: #26a69a;
display: block;
line-height: 22px;
padding: 14px 16px;
}
Something like this would be a quick reduction from 50px to 40px:
.dropdown-content li,
.dropdown-content li>a {
height: 40px;
line-height: 0.9rem;
min-height: unset;
}
As a final note - if you use SASS in your projects, you can define the dropdown height (as well as the value of everything else in the framework) at the start of your project, rather than override it later down the line.
Codepen
Final final note!
The materialize select is a dropdown, in case you're wondering why I'm talking about dropdowns. Materialize hides the native select, replacing it with a text input that triggers a dropdown. Both a dropdown and a select will be affected by the style declarations above.

Bootstrap toggle buttons dont work following the recommended documentation

I use Bootstrap 4 and following the documentation i implemented a toggle button group like this:
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary">
<input type="checkbox">Test
</label>
</div>
The toggle is supposed to change the buttons active state so i added the following css to change the buttons color and background-color when toggled:
.btn.btn-secondary {
color: BLACK;
background-color: WHITE;
}
.btn.btn-secondary.active {
color: WHITE;
background-color: BLACK;
}
The problem is that the button doesnt toggle. It doesnt switch to the active state when clicked.
Then i found this working stackblitz. It doesnt use data-toggle="buttons",but it adds ng-bootstraps ngbButtonLabel and ngbButton to the label and input.
By following that example of the stackblitz and applying it to my code the toggle button functionality works correctly:
<div class="btn-group btn-group-toggle">
<label class="btn btn-secondary" ngbButtonLabel>
<input type="checkbox" ngbButton>Test
</label>
</div>
I would like to know, why doesnt the way i tried to implement it the first time following bootstraps documentaiton work?
this is just the selector problem. apply css by selecting particular element with its parent class. not need to apply any css using !important.
see the below snippet
.btn-group label.btn.btn-secondary {
color: BLACK;
background-color: WHITE;
}
.btn-group label.btn.btn-secondary.active {
color: WHITE;
background-color: BLACK;
}
<!DOCTYPE html>
<html>
<head>
<title>Demo Page</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary">
<input type="checkbox">Test
</label>
</div>
</body>
</html>
I suggest you read this article about CSS Specificity.
If you are using bootstrap events (in this case you are using a button which toggles a css class) remember to import the optional JavaScript file.
body {
padding: 2rem;
}
.btn.btn-secondary,
.btn.btn-secondary:hover {
color: BLACK;
background-color: WHITE;
}
.btn.btn-secondary.active {
color: WHITE;
background-color: BLACK;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary">
<input type="checkbox" checked autocomplete="off"> Checked
</label>
</div>
May it will help.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<style>
.btn.btn-secondary {
color: BLACK;
background-color: WHITE;
}
.btn.btn-secondary.active {
color: WHITE;
background-color: BLACK;
}
</style>
</head>
<body>
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary">
<input type="checkbox">Test
</label>
</div>
</body>
</html>

why my overlay transparent background color is not covering whole screen

I have this call to action page, which has a background image and a background color on top of the image; however, I can't make the background-color to take whole screen. little help here! Thanks PS: I'm using bootstrap cdns also.
link to page: http://pctechtips.org/apps/conf/
css:
/*
full stack conf style
*/
body {
background-image: url("http://travelhdwallpapers.com/wp-content/uploads/2017/03/Chicago-Wallpaper-3.jpg");
background-size: cover;
position: relative;
z-index: -10;
}
.hero {
height: 100vh;
top: 0;
bottom: 0;
background-color: rgba(31, 34, 118, 0.5);
z-index: -5;
}
html
<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- bootstrap cdns css,js,popper.js,jquery -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
</head>
<!-- bg-info = background blue, text-center = text white -->
<body class="text-white">
<div class="hero">
<div class="container text-center">
<h1 class="display-1" style="margin-top:12rem">Full Stack Conf</h1>
<p class="lead mb-5">Comming Soon, a One-day Conference About All Things Javascript!</p>
</div>
<div class="container text-center">
<div class="row">
<div class="col-6 mx-auto">
<div class="input-group">
<input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
<span class="input-group-btn">
<button class="btn btn-primary" type="button">Sign up</button>
</span>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
</body>
</html>
Ok, thanks to the folks who commented above here's the answer
/*
full stack conf style
*/
body {
background-image: url("http://travelhdwallpapers.com/wp-content/uploads/2017/03/Chicago-Wallpaper-3.jpg");
background-size: cover;
position: relative;
z-index: -10;
}
.hero {
position: absolute;
height: 100vh;
width: 100%;
top: 0;
bottom: 0;
background-color: rgba(31, 34, 118, 0.5);
z-index: -5;
}

How do I make an image appear on desktops and tablets, but not on phones, using bootstrap?

I am working on a small project of mine.
It's a website for booking tours.
I'm still in the early stages, but this is what it looks like:
homepage
As you can see, each tour has his own "div" divided in 3 columns: A preview image, a short description and a button to book the tour.
I can easily add an image as a background, but if I shrink the page to a size like that from a mobile, a second div appears above the first one with the image in it, like this:
homepage mobile size
I have no idea why this occurs. Do any of you have any idea how to make the div for the image disappear on mobile or how to solve this problem?
HTML and CSS code is provided below, I am using bootstrap.
PS: Ignore the white-space around the button.
body {
margin: 0px;
padding: 0px;
}
.jumbotron {
border-radius: 0px;
margin-bottom: 0px;
}
.options {
margin-top: 30px;
}
.tours {
padding: 0px;
margin-bottom: 25px;
border-radius: 5px;
border: 1px solid grey;
max-width: 100%;
height: 20vh;
}
.preview-img {
height: 100%;
}
.short-descr {
padding-top: 2vh;
height: 100%;
background-color: red;
}
.more-info {
height: 100%;
padding: 0px;
}
.infobtn {
height: 100%;
width: 100%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html lang="en">
<head>
<title>home</title>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1">
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script type="text/javascript" src="js/bootstrap-datepicker.js"></script>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/datepicker.css">
<link rel="stylesheet" type="text/css" href="css/homepage-style.css">
</head>
<body>
<!--Jumbotron, header for the website-->
<div class="jumbotron text-center">
<div class="container">
<h1>Title</h1>
<p>Description</p>
</div>
</div>
<!--These are the columns in which the tours are displayed-->
<div class="container options">
<div class="col-xs-12 tours">
<div class="col-sm-3 preview-img">
</div>
<div class="col-xs-9 col-sm-7 short-descr">
<h4 class="text-left">Column 1</h4>
<p class="text-left">Lorem Ipsum Dolor Sit Amet...</p>
</div>
<div class="col-xs-3 col-sm-2 more-info">
<button type="button" class="btn btn-info infobtn" href="#">More</button>
</div>
</div>
<div class="col-xs-12 tours">
</div>
<div class="col-xs-12 tours">
</div>
</div>
</body>
</html>
Add hidden-xs class to your preview-img div
http://getbootstrap.com/css/#responsive-utilities

How to make my words clickable and direct it to another HTML file?

How do I make it so when I click a word in my footer, it takes the user to another page that has information related to what they clicked? The help I need is how do I link HTML files appropriately and how do I make a word clickable that will take me from HTML file #1 to HTML file #2.
Do I just have to make a new file and link rel it in my first HTML page and then place the HTML name (of HTML file #2) in a href with a word?
If you are confused, look at the footer on https://gotinder.com I essentially want to be able to do something like that.
An important note I should add is that I'm using bootstrap.
Here's a link to what my page look like https://gyazo.com/2e012e31ed40f419c702121ec42d9a8e
<!DOCTYPE html>
<html>
<head>
<!-- If IE use the latest rendering engine -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Set the page to the width of the device and set the zoon level -->
<meta name="viewport" content="width = device-width, initial-scale = 1">
<title>
title
</title>
<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="../css/main.css">
</head>
<body>
<div class="wrapper">
<button type="button" class="btn btn-primary">Login with Facebook</button>
</div>
<div class="footer">
<div class="row">
<div class="col-lg-3 col-mg-3 col-sm-3 col-xs-3">
<h4 style="color: #DB4C2C">Download</h4>
Download for Android (Cooming Soon) <br>
Download for iOS (Coming Soon)
</div>
<div class="col-lg-3 col-mg-3 col-sm-3 col-xs-3">
<h4 style="color: #DB4C2C">Company</h4>
Jobs (Unavailable)<br>
</div>
<div class="col-lg-3 col-mg-3 col-sm-3 col-xs-3">
<h4 style="color: #DB4C2C">Support</h4>
For support purposes,
</div>
<div class="col-lg-3 col-mg-3 col-sm-3 col-xs-3">
<h4 style="color: #DB4C2C">Legal</h4>
Privacy<br>Terms<br>Safety<br>Go to Google
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</body>
</html>
<!-- Problems to fix include:
- Move the Piddash logo to the left.
-->
then
html,body{
height:100%;
width:100%;
}
.wrapper {
display:flex;
align-items:center;
width:100%;
height:100%;
background-image: url("../img/space.jpg");
background-repeat:no-repeat;
background-size:cover;
}
.button {
width:100px;
margin:auto;
}
.footer {
padding-bottom: 50px;
padding-left: auto;
padding-right: auto;
}
.btn {
margin:0 auto;
}
.row {
vertical-align: center;
text-align: center;
}
.h4 {
font-family: Arial, Sans-serif;
}
I don't know if I did not understand your question but is this what you want?
<a href="nameoffileyouwanttolink.html">Text that will display as link<a>
If you are not using backend routing and only HTML & CSS:
Click Here
You can use Link text tag with custom styling options using a class
You can learn more about HTML a tag from W3C
html,
body {
height: 100%;
width: 100%;
}
.wrapper {
display: flex;
align-items: center;
width: 100%;
height: 100%;
background-image: url("../img/space.jpg");
background-repeat: no-repeat;
background-size: cover;
}
.button {
width: 100px;
margin: auto;
}
.footer {
padding-bottom: 50px;
padding-left: auto;
padding-right: auto;
}
.btn {
margin: 0 auto;
}
.row {
vertical-align: center;
text-align: center;
}
.h4 {
font-family: Arial, Sans-serif;
}
<!DOCTYPE html>
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- If IE use the latest rendering engine -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Set the page to the width of the device and set the zoon level -->
<meta name="viewport" content="width = device-width, initial-scale = 1">
<title>
title
</title>
<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="../css/main.css">
</head>
<body>
<div class="wrapper">
<button type="button" class="btn btn-primary">Login with Facebook</button>
</div>
<div class="footer">
<div class="row">
<div class="col-lg-3 col-mg-3 col-sm-3 col-xs-3">
<h4 style="color: #DB4C2C">Download</h4>
Download for Android (Cooming Soon)
<br> Download for iOS (Coming Soon)
</div>
<div class="col-lg-3 col-mg-3 col-sm-3 col-xs-3">
<h4 style="color: #DB4C2C">Company</h4>
Jobs (Unavailable)
<br>
</div>
<div class="col-lg-3 col-mg-3 col-sm-3 col-xs-3">
<h4 style="color: #DB4C2C">Support</h4>
For support purposes,
</div>
<div class="col-lg-3 col-mg-3 col-sm-3 col-xs-3">
<h4 style="color: #DB4C2C">Legal</h4>
Privacy
<br> Terms
<br> Safety
<br>Go to Google
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</body>
</html>
<!-- Problems to fix include:
- Move the Piddash logo to the left.
-->