.add-cart-button
{
width:205px;
height:56px;
border-radius: 28px;
background-color: #EC7F4A;
color: #ffff;
font-family: Roboto;
}
.add-cart-button-icon
{
color: #232323;
float: right;
font-size: 40px;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<button class="add-cart-button">
<span>Add to Cart</span><i class="fa fa-plus-circle fa-6 add-cart-button-icon" aria-hidden="true"></i>
</button>
I'm using Bootstrap4 doubt in button that i need to display button along with fontawosome icon.can any one please tell me to do it.
Expected image
Actual output i got now
Image of Actual output i got now
You can simply add <i> tag inside button.
EDIT: I've added your code to same snippet. Just adding line-height: 40px; to add-cart-button class provides the alignment fix.
.round-btn {
border-radius: 19px !important;
}
.add-cart-button {
width: 205px;
height: 56px;
border-radius: 28px;
background-color: #EC7F4A;
color: #ffff;
font-family: Roboto;
line-height: 40px;
}
.add-cart-button-icon {
color: #232323;
float: right;
font-size: 40px;
}
<!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://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
</head>
<body>
<div class="container">
<button type="button" class="btn btn-warning round-btn">Warning<i class="pl-2 fa fa-plus-circle"></i></button>
<button class="add-cart-button">
<span>Add to Cart</span><i class="fa fa-plus-circle fa-6 add-cart-button-icon" aria-hidden="true"></i>
</button>
</div>
</body>
</html>
Related
I'm attempting to make the social logos on the same line as the "APKHub" text. I have tried aligning it properly and messed with positionings but nothing has been working. I am unsure why It is like this and I run into this issue a lot and haven't really found a fix. All the code is below and an image aswell.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://kit.fontawesome.com/dd13dde450.js" crossorigin="anonymous"></script>
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
<!-- -->
<title>APKHub - Free APK Downloads</title>
</head>
<body>
<div class="navbar">
<h1>APKHub</h1>
<div class="links">
<i class="fa-brands fa-discord"></i>
<i class="fa-brands fa-twitter"></i>
<i class="fa-brands fa-telegram"></i>
</div>
</div>
</body>
<style>
body {
margin: 0;
padding: 0;
background-color: #141523;
}
.navbar {
border-radius: 5px;
padding: 10px;
background-color: #1d1e31;
}
.navbar h1 {
margin-left: 5px;
font-family: 'Roboto', sans-serif;
color: white;
}
.links {
text-align:right;
}
.links i {
font-size: 30px;
}
</style>
</html>```
You might want to take a look at flexbox. There are many ways you can use flexboxes, but I've tried achieve what you described here:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://kit.fontawesome.com/dd13dde450.js" crossorigin="anonymous"></script>
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
<!-- -->
<title>APKHub - Free APK Downloads</title>
</head>
<body>
<div class="navbar">
<h1>APKHub</h1>
<div class="links">
<i class="fa-brands fa-discord"></i>
<i class="fa-brands fa-twitter"></i>
<i class="fa-brands fa-telegram"></i>
</div>
</div>
</body>
<style>
body {
margin: 0;
padding: 0;
background-color: #141523;
}
.navbar {
border-radius: 5px;
padding: 10px;
background-color: #1d1e31;
display: flex;
flex-direction: row;
align-items: center;
column-gap: 20px;
}
.navbar h1 {
margin-left: 5px;
font-family: 'Roboto', sans-serif;
color: white;
}
.links i {
font-size: 30px;
}
</style>
</html>
display: flex; Makes the navbar a flex container.
flex-direction: row; Makes the children elements in the container line up from left to right.
align-items: center; Makes all the items line up on the middle of the axis opposite to what you put in flex direction.
column-gap: 20px; Creates a 20px gap between each flex item.
just add to .navbar
display: flex; - Places elements in flexbox form
justify-content: space-between; - Positions the elements horizontally with space between them
align-items: center; - Places the elements vertically in a balanced way
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://kit.fontawesome.com/dd13dde450.js" crossorigin="anonymous"></script>
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
<!-- -->
<title>APKHub - Free APK Downloads</title>
</head>
<body>
<div class="navbar">
<h1>APKHub</h1>
<div class="links">
<i class="fa-brands fa-discord"></i>
<i class="fa-brands fa-twitter"></i>
<i class="fa-brands fa-telegram"></i>
</div>
</div>
</body>
<style>
body {
margin: 0;
padding: 0;
background-color: #141523;
}
.navbar {
border-radius: 5px;
padding: 10px;
background-color: #1d1e31;
display: flex;
justify-content: space-between;
align-items: center;
}
.navbar h1 {
margin-left: 5px;
font-family: 'Roboto', sans-serif;
color: white;
}
.links {
text-align:right;
}
.links i {
font-size: 30px;
}
</style>
</html>
As for me - nearly ideal solution for headers based on flex :
body {
margin: 0;
padding: 0;
background-color: #141523;
}
.navbar {
border-radius: 5px;
padding: 10px;
background-color: #1d1e31;
display:flex;
align-items:center; /* vertical alignment */
gap: 10px; /* some spaces between all elements */
}
.navbar h1 {
margin-left: 5px;
margin-right: auto; /* force to 'push' avarything on the right */
font-family: 'Roboto', sans-serif;
color: white;
}
.navbar i {
font-size: 30px;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://kit.fontawesome.com/dd13dde450.js" crossorigin="anonymous"></script>
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
<!-- -->
<title>APKHub - Free APK Downloads</title>
</head>
<body>
<div class="navbar">
<h1>APKHub</h1>
<i class="fa-brands fa-discord"></i>
<i class="fa-brands fa-twitter"></i>
<i class="fa-brands fa-telegram"></i>
</div>
</body>
</html>
It is also can be achieved with display:inline for header and .links and some additional styles to .links ... but i don't want to mess with it (:
I created a submit button using bootstrap but I want to place it where the arrow pointing but I no matter what I write the position doesn't change it's like the button stick to the position and I can't reposition it
how can I place it to be there?
.container {
position: absolute;
top: 30%;
left: 30%;
transform: translate(-50%, -50%);
text-align: center;
/*give the text bolder font*/
font-weight: bold;
}
/*set the input under the span element*/
input[type=text] {
text-align: center;
font-weight: bold;
font-size: 20px;
border: 2px solid #ccc;
border-radius: 4px;
padding: 12px 10px;
width: 100%;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 16px;
/*set the space from left to 30%*/
margin-left: 30%;
}
/* set the button under the input element*/
button {
background-color: #4CAF50;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
/*set the space from left to 30%*/
margin-left: 30%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>quiz</title>
<link rel="stylesheet" href="quiz2.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<span id="question">What type of file do you need to open javascript file ?</span>
<div class="input-group flex-nowrap">
<input type="text" id="answer" class="form-control" placeholder="Answer Here..." aria-label="Username" aria-describedby="addon-wrapping">
</div>
<button type="button" id="submit" class="btn btn-outline-success">Submit</button>
</div>
If you're able to change the HTML, here's a way:
Wrap your button inside another div:
<div class="button-wrapper">
<button type="button" id="submit" class="btn btn-outline-success">Submit</button>
</div>
Then set the margin-left on that wrapper:
.button-wrapper {
/*set the space from left to 30%*/
margin-left: 30%;
}
Check this snippet for the result.
.container {
position: absolute;
top: 30%;
left: 30%;
transform: translate(-50%, -50%);
/*give the text bolder font*/
font-weight: bold;
}
/*set the input under the span element*/
input[type=text] {
text-align: center;
font-weight: bold;
font-size: 20px;
border: 2px solid #ccc;
border-radius: 4px;
padding: 12px 10px;
width: 100%;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 16px;
/*set the space from left to 30%*/
margin-left: 30%;
}
/* set the button under the input element*/
button {
background-color: #4CAF50;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
.button-wrapper {
/*set the space from left to 30%*/
margin-left: 30%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>quiz</title>
<link rel="stylesheet" href="quiz2.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<span id="question"></span>
<div class="input-group flex-nowrap">
<input type="text" id="answer" class="form-control" placeholder="Answer Here..." aria-label="Username" aria-describedby="addon-wrapping">
</div>
<div class="button-wrapper">
<button type="button" id="submit" class="btn btn-outline-success">Submit</button>
</div>
</div>
I just define a button-container class and use flex & justify:
.container {
position: absolute;
top: 30%;
left: 30%;
transform: translate(-50%, -50%);
text-align: center;
/*give the text bolder font*/
font-weight: bold;
}
/*set the input under the span element*/
input[type=text] {
text-align: center;
font-weight: bold;
font-size: 20px;
border: 2px solid #ccc;
border-radius: 4px;
padding: 12px 10px;
width: 100%;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 16px;
/*set the space from left to 30%*/
margin-left: 30%;
}
/* set the button under the input element*/
button {
background-color: #4CAF50;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
/*set the space from left to 30%*/
margin-left: 30%;
}
.button-container {
display: flex;
justify-content: start;
margin-left: 30%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>quiz</title>
<link rel="stylesheet" href="quiz2.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<span id="question">What type of file do you need to open javascript file ?</span>
<div class="input-group flex-nowrap">
<input type="text" id="answer" class="form-control" placeholder="Answer Here..." aria-label="Username" aria-describedby="addon-wrapping">
</div>
<div class="button-container">
<button type="button" id="submit" class="btn btn-outline-success">Submit</button>
</div>
</div>
<!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://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<a class="btn btn-primary"><i class="fa fa-angle-left"></i> 1</a>
<a class="btn btn-primary">2 <i class="fa fa-angle-right"></i></a>
</body>
</html>
I have two bootstrap buttons with icons <,>.I wanna make them together like one button and put a vertical separator '|' like this below
To achieve this I tried different things but couldn't get the desired one.
You can try the vertical line by using :before and positioning it to the place.
I've created a little example, it might help you.
HTML
<div class="button-wrapper">
<button><1</button>
<button class="last-btn">2></button>
</div>
CSS
.button-wrapper{
display: flex;
}
.last-btn:before {
content: '';
position: absolute;
top: 50%;
height: 50%;
background: white;
width: 1px;
left: 0px;
transform: translateY(-50%);
}
button{
padding: 5px 10px;
border: 0;
position: relative;
background: skyblue;
color: #ffffff;
}
https://codepen.io/ammar-d/pen/XWderxm
You could use Button-Groups and CSS-Pseudo-Elements like :after
It's not perfect but I think it should do the trick :-)
<!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://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.btn-group > .btn{ position:relative;}
.btn-group > .btn:after{
position:absolute; right:0; top: 50%;
transform:translateY(-50%);
content:''; width: 1px; height:1.25em;
background-color:currentColor;
}
.btn-group > .btn:last-child:after{ content:none;}
</style>
</head>
<body>
<div class="btn-group">
<a class="btn btn-primary"><i class="fa fa-angle-left"></i> 1</a>
<a class="btn btn-primary">2 <i class="fa fa-angle-right"></i></a>
</div>
</body>
</html>
Some flexbox and psuedo-element magic make it happen :-)
.wrapper {
display: flex;
overflow: hidden;
border-radius: 5px;
font-family: Helvetica;
color: white;
width: 80px;
position: relative;
}
.wrapper::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 1px;
background: white;
height: 60%;
}
.btn {
background: #0a48ff;
padding: 7px;
width: 50%;
text-align: center;
cursor: pointer;
transition: background 0.2s;
}
.btn:hover {
background: #0a48ffdd;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="wrapper">
<div class="btn btn-left"><i class="fa fa-angle-left"></i> 1</div>
<div class="btn btn-right">2 <i class="fa fa-angle-right"></i></div>
</div>
<!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://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<style>
.left {
border-top-right-radius: 0rem;
border-bottom-right-radius: 0rem;
}
.right {
border-top-left-radius: 0rem;
border-bottom-left-radius: 0rem;
}
.separator {
display: inline-block;
color: #d8d8d8;
vertical-align: middle;
border: 1px solid transparent;
padding: 0.375rem 0.15rem;
font-size: 1rem;
line-height: 1.5;
background-color: #007bff;
}
</style>
</head>
<body>
<a class="btn btn-primary left"><i class="fa fa-angle-left"></i> 1</a
><span class="separator">|</span
><a class="btn btn-primary right">2 <i class="fa fa-angle-right"></i></a>
</body>
</html>
Here is another solution.
<!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://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<style>
.left {
border-top-right-radius: 0rem;
border-bottom-right-radius: 0rem;
}
.right {
border-top-left-radius: 0rem;
border-bottom-left-radius: 0rem;
}
.left::after {
content: "";
position: absolute;
top: 20%;
left: 50%;
height: 60%;
background: rgba(255, 255, 255, 0.6);
width: 2px;
margin-left: -1px;
z-index: 10;
}
.wrap {
position: relative;
display: inline-block;
}
</style>
</head>
<body>
<div class="wrap">
<a class="btn btn-primary left"><i class="fa fa-angle-left"></i> 1</a
><a class="btn btn-primary right">2 <i class="fa fa-angle-right"></i></a>
</div>
</body>
</html>
If you run the below snipped , you can see that the 'fa-enelope'email logo is being duplicated. I have never used font awesome before and am wondering if I have done something wrong.
It all changed when I included the a tag - I wonder if that has something to do with it.
I am wondering if I should just scrap the font awesome and download some other icons to use.
body {
background-image: linear-gradient(to bottom right, #FFF, #bfbfbf);
height: 100vh;
font-family: 'Tajawal', sans-serif;
}
.title {
margin-top: 1rem;
text-align: center;
font-size: 9rem;
color: transparent;
background-image: linear-gradient(to bottom right, #f47a42, #f45041);
-webkit-background-clip: text;
}
.social-icons {
display: flex;
justify-content: center;
font-size: 2.5rem;
color: #f47a42;
}
.social-icons--camera {
margin-left: 10px;
margin-right: 10px;
color: #f47a42;
}
.social-icons--github {
color: #f47a42;
}
.social-icons--email {
color: #f47a42;
}
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>portfolio site</title>
<link href="https://fonts.googleapis.com/css?family=Tajawal" rel="stylesheet">
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/all.js" integrity="sha384-xymdQtn1n3lH2wcu0qhcdaOpQwyoarkgLVxC/wZ5q7h9gHtxICrpcaSUfygqZGOe" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1 class="title">Adam Millington</h1>
<div class="social-icons">
<a href="mailto:someone#example.com">
<i class="social-icons--email far fa-envelope">
</a>
</i> <i class="social-icons--camera fas fa-camera-retro"></i>
<i class="social-icons--github fab fa-github" target="_blank"></i>
</div>
<hr>
</body>
</html>
You closed the envelope's <i> after the </a>
body {
background-image: linear-gradient(to bottom right, #FFF, #bfbfbf);
height: 100vh;
font-family: 'Tajawal', sans-serif;
}
.title {
margin-top: 1rem;
text-align: center;
font-size: 9rem;
color: transparent;
background-image: linear-gradient(to bottom right, #f47a42, #f45041);
-webkit-background-clip: text;
}
.social-icons {
display: flex;
justify-content: center;
font-size: 2.5rem;
color: #f47a42;
}
.social-icons--camera {
margin-left: 10px;
margin-right: 10px;
color: #f47a42;
}
.social-icons--github {
color: #f47a42;
}
.social-icons--email {
color: #f47a42;
}
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>portfolio site</title>
<link href="https://fonts.googleapis.com/css?family=Tajawal" rel="stylesheet">
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/all.js" integrity="sha384-xymdQtn1n3lH2wcu0qhcdaOpQwyoarkgLVxC/wZ5q7h9gHtxICrpcaSUfygqZGOe" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1 class="title">Adam Millington</h1>
<div class="social-icons">
<a href="mailto:someone#example.com">
<i class="social-icons--email far fa-envelope"></i>
</a>
<i class="social-icons--camera fas fa-camera-retro"></i>
<i class="social-icons--github fab fa-github" target="_blank"></i>
</div>
<hr>
</body>
</html>
You closed your i tag after a instead of before
body {
background-image: linear-gradient(to bottom right, #FFF, #bfbfbf);
height: 100vh;
font-family: 'Tajawal', sans-serif;
}
.title {
margin-top: 1rem;
text-align: center;
font-size: 9rem;
color: transparent;
background-image: linear-gradient(to bottom right, #f47a42, #f45041);
-webkit-background-clip: text;
}
.social-icons {
display: flex;
justify-content: center;
font-size: 2.5rem;
color: #f47a42;
}
.social-icons--camera {
margin-left: 10px;
margin-right: 10px;
color: #f47a42;
}
.social-icons--github {
color: #f47a42;
}
.social-icons--email {
color: #f47a42;
}
<head>
<meta charset="UTF-8">
<title>portfolio site</title>
<link href="https://fonts.googleapis.com/css?family=Tajawal" rel="stylesheet">
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/all.js" integrity="sha384-xymdQtn1n3lH2wcu0qhcdaOpQwyoarkgLVxC/wZ5q7h9gHtxICrpcaSUfygqZGOe" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1 class="title">Adam Millington</h1>
<div class="social-icons">
<a href="mailto:someone#example.com">
<i class="social-icons--email far fa-envelope"></i>
</a>
<a href="https://unsplash.com/#adammillingtonphotography" target="_blank">
<i class="social-icons--camera fas fa-camera-retro"></i></a>
<i class="social-icons--github fab fa-github" target="_blank"></i>
</div>
<hr>
</body>
The class "pull-left" doesn't work, the logo is not being floated to left and the background color of body tag is not visible as well?
Can anyone explain where I am going wrong?
The index.html file and bootstrap files are in the same directory.
I checked the tags as well but could not find a typo.
body {
font-size: 16px;
font-family: font-family: 'Oxygen', sans-serif;
background-color: #61122f;
color: #fff;
}
#header-nav {
background-color: #f6b319;
border-radius: 0;
border: 0;
}
#logo-img {
background: url('https://scontent-sea1-1.cdninstagram.com/t51.2885-19/s150x150/17437826_285820131856427_2792512281873743872_a.jpg') no-repeat;
width: 150px;
height: 150px;
margin: 10px 15px 10px 0;
}
.navbar-brand {
padding: 25px;
}
.navbar-brand h1 {
font-family: 'Lora', serif;
color: #557c3e;
font-size: 1.5em;
text-transform: uppercase;
font-weight: bold;
text-shadow: 1px 1px 1px #222;
margin-top: 0;
margin-bottom: 0;
line-height: 0.75;
}
.navbar-brand a:hover,
.navbar-brand a:focus {
text-decoration: none;
}
.navbar-brand p {
color: #000;
text-transform: uppercase;
font-size: .7em;
margin-top: 15px;
}
.navbar-brand p span {
vertical-align: middle;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA Compatible" content="IE-edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>David Chu's China Bistro</title>
<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" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css">
<link href="https://fonts.googleapis.com/css?family=Oxygen:300,400,700" rel="stylesheet" type="text.css">
<link href="https://fonts.googleapis.com/css?family=Lora:400,700" rel="stylesheet" type="text/css">
</head>
<body>
<p></p>
<header>
<nav id="header-nav" class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a href="index.html" class="pull-left">
<div id="logo-img" alt="Logo image"></div>
</a>
<div class="navbar-brand">
<a href="index.html">
<h1>David Chu's China Bistro</h1>
</a>
<p>
<img src="https://www.davidchuschinabistro.com/images/star-k-logo.png" alt="Kosher Certification">
<span>Kosher Certified</span>
</p>
</div>
</div>
</div>
</nav>
</header>
<h1></h1>
<!-- jQuery (bootstrap JS plugins depend on it) -->
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>
In bootstrap 4 pull-right, pull-left are changed with float-right, float-left.
Also your bootstrap css file conflict to other reboot.scss file that's you can't see your background color.
You can use css properties like this to resolve conflict:
body {
font-size: 16px !importnat;
font-family: 'Oxygen', sans-serif !importnat;
background-color: #61122f !importnat;
color: #fff !importnat;
}
There's the html tag where I changed pull-left class with float-left
<a href="index.html" class="float-left">
<div id="logo-img" alt="Logo image"></div>
</a>
I hope it'll helps you
In bootstrap 4 pull-right, pull-left are changed to pull-sm-right
That is, pull-sm/xs/md/lg-left/none/right
Body background colour must have been applied.... It's just not visible because of height may be.. just check by specifying with a significantly larger height of body