In my list some of words are with two lines, but second line jumps under the icons bottom, how can i keep next to the icon both lines? I'm doing this with bootstrap and choosed to use list-inline class maybe its enough to do with columns this list or what will be the best way to do or fix this list?
This is how i need it:
JSFIDDLE
.container {
padding: 15px 40px;
border-radius: 6px;
border: solid 1px #e5e5e5;
background-color: #ffffff;
font-size: 16px;
line-height: normal;
color: #333333;
}
.list-inline {
margin: 0;
}
.icon-europe {
width: 24px;
height: 24px;
background-image: url("https://i.ibb.co/xhRsmPz/europe.png");
background-repeat: no-repeat;
display: inline-block;
vertical-align: middle;
margin-right: 4px;
}
.icon-warranty {
width: 24px;
height: 24px;
background-image: url("https://i.ibb.co/VLy7ssd/warranty.png");
background-repeat: no-repeat;
display: inline-block;
vertical-align: middle;
margin-right: 4px;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<title>Inline list</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-12">
<ul class="list-inline">
<li class="list-inline-item"><span class="icon-europe"></span> Dirbame visoje<br> Europoje
</li>
<li class="list-inline-item"><span class="icon-warranty"></span> 2 metų garantija
</li>
</ul>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
The easiest way is to use flexbox and align-items:
ul {
list-style: none;
margin: 0;
padding: 0;
}
li {
display: flex;
align-items: center;
margin-bottom: 10px;
font-family: arial;
}
.icon {
width: 24px;
height: 24px;
margin-right: 8px;
}
.icon-europe {
background: url("https://i.ibb.co/xhRsmPz/europe.png") no-repeat;
}
.icon-warranty {
background: url("https://i.ibb.co/VLy7ssd/warranty.png") no-repeat;
}
<ul>
<li><span class="icon icon-europe"></span>Dirbame visoje<br />Europoje</li>
<li><span class="icon icon-warranty"></span>2 metų garantija</li>
</ul>
You can change your list code to below
<li class="list-inline-item"><span class="icon-europe" style="float:left"></span> Dirbame visoje<br> Europoje
</li>
You can add images in html like this:
HTML:
<div class="container">
<div class="row">
<div class="col-lg-12">
<ul class="d-flex">
<li class="d-flex pr-4 align-items-center">
<img class="icon" src="https://i.ibb.co/xhRsmPz/europe.png" alt="">
<div>Dirbame visoje</br>Europoje</div>
</li>
<li class="d-flex pr-4 align-items-center">
<img class="icon" src="https://i.ibb.co/VLy7ssd/warranty.png" alt="">
<div>2 metų garantija</div>
</li>
</ul>
</div>
</div>
CSS:
.container {
padding: 15px 40px;
border-radius: 6px;
border: solid 1px #e5e5e5;
background-color: #ffffff;
font-size: 16px;
line-height: normal;
color: #333333;
}
.icon{
width: 24px;
height: 24px;
margin-right: 10px;
}
Related
This is the HTML part
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="assets/css/styles.css">
<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://kit.fontawesome.com/a076d05399.js"></script>
</head>
<body>
<div class="top-bar">
<div class="container">
<div class="row">
<div class="top-bar-section">
<p class="top-bar-question">Do you have any questions? Call Us 0774747790 </p>
</div>
<div class="row">
<div class="top-nav-bar">
<img class="logo" src="assets/images/logo.png" alt="">
<ul class="top-nav-options">
<li class="top-nav-option"><a class="top-nav-option-link" href="#">Home</a></li>
<li class="top-nav-option"><a class="top-nav-option-link" href="#">Appointment</a></li>
<li class="top-nav-option"><a class="top-nav-option-link" href="#">Treatment</a></li>
<li class="top-nav-option"><a class="top-nav-option-link" href="#">Facility</a></li>
<li class="top-nav-option"><a class="top-nav-option-link" href="#">Gallery</a></li>
<li class="top-nav-option"><a class="top-nav-option-link" href="#">About Us</a></li>
<li class="top-nav-option"><a class="top-nav-option-link" href="#">Contact Us</li></a>
</ul>
</div>
</div>
</div>
</div>
<div class="row">
<div class="background-image-block">
<img class="background-img1" src="assets/images/background.jpg" alt="">
</div>
</div>
<div class="row">
<div class="box-left">
</div>
<div class="box-mid">
</div>
<div class="box-right">
</div>
</div>
</body>
</html>
This is the CSS
#media only screen and (min-width: 200px) and (max-width: 275px)
{
body
{
background-color: #FFFFFF;
}
.top-bar
{
background-color: #3FA4F6;
width: 500px;
height: 40px;
}
.top-bar-section
{
margin-top: 10px;
width: 375px;
}
.top-bar-question
{
color: white;
font-size: 12px;
padding-left: 12px;
}
.top-nav-bar
{
width: 375px;
height: 100px;
}
.top-nav-bar
{
margin-top: 20px;
}
.logo
{
width: 141px;
margin-bottom: 8px;
padding-left: 15px;
}
.top-nav-option
{
font-size: 17px;
padding: 4px;
font-size: 15px;
list-style: none;
color: black;
}
.background-img1
{
width: 272px;
margin-top: 176px;
height: 180px;
margin-left: 13px;
}
.top-nav-option-link
{
text-decoration: none;
color: black;
}
.top-nav-option-link:hover
{
text-decoration: none;
color: #3FA4F6;
}
.box-left
{
width: 229px;
height: 271px;
background-color: #3FA4F6;
box-shadow: 0 0 5px grey;
margin-left: 38px;
margin-bottom: 10px;
margin-top: 10px;
}
.box-mid
{
width: 229px;
height: 271px;
background-color: #3FA4F6;
box-shadow: 0 0 5px grey;
margin-left: 38px;
margin-bottom: 10px;
margin-top: 10px;
}
.box-right
{
width: 229px;
height: 271px;
background-color: #3FA4F6;
box-shadow: 0 0 5px grey;
margin-left: 38px;
margin-bottom: 10px;
margin-top: 10px;
}
}
The problem is the links are working upto Apartment option. I have figured out problem is with the bootstrap css I'm using.When I remove the bootstrap cdn it works fine but when I put it back It won't work.I need Bootstrap container and row classes cause I have ordered them according to those divs
Remove the margin-top from the class .background-img1 and add margin-top: 176px; to .background-image-block class;
The Links are not working because the div with class .background-image-block was on its top.
I have a background image that is covering my content but without (background-size: cover;) it doesn't take up the space. I am working on a bootstrap project, and all my content is stacked at the top of the page in the banner area. I've tried adding height to the page to move content. I've tried adding a div around it and moving around in the body tag. I have been working on the for about 3 hours.
#import url('https://fonts.googleapis.com/css?family=Oswald|Rambla|Staatliches&display=swap');
body{
margin: 0;
padding: 0;
}
:root{
--color-black: #000000;
--color-white: #ffffff;
--color-border: #ffffff34;
--font-staat: 'Staatliches', cursive;
--font-os: 'Oswald', sans-serif;
--font-ram: 'Rambla', sans-serif;
}
/* global classes */
.font-staat{
font: normal 400 18px var(--font-staat);
}
.font-os{
font: normal 300 18px var(--font-os);
}
.font-ram{
font: normal bold 18px var(--font-ram);
}
.font-size-40{
font-size: 40px;
}
.font-size-34{
font-size: 34px;
}
.font-size-27{
font-size: 27px;
}
.font-size-20{
font-size: 20px;
}
.font-size-16{
font-size: 16px;
}
.bgcolor-black{
background-color: var(--color-black);
}
/* #global classes */
#header{
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index:1;
transition: left .5s ease;
}
#header nav{
height: 100vh;
}
#header .site-title .navbar-brand{
letter-spacing: 2px;
color: var(--color-secondary);
}
#header .nav-link{
margin: .7rem 1rem;
border-bottom: 1px solid var(--color-border);
text-transform: uppercase;
}
#header .nav-link:hover{
color: var(--color-white) !important;
}
#header .toggle-button{
background: none;
color: var(--color-black);
position: fixed;
top: 25px;
right: 20px;
border: 1px solid var(--color-border);
}
.toggle-left{
left: 0 !important;
width: 1000px !important;
}
/* site-main */
.site-banner .banner-area{
background: url(https://i.pinimg.com/736x/2a/a1/da/2aa1da060c0dfad146354e0cc06560c2.jpg) no-repeat;
background-size: cover;
width: 100%;
height: 100vh;
position: relative;
}
.site-banner .banner-area .author{
margin: 0;
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
}
.site-banner .banner-area .author .author-img{
width: 250px;
height: 250px;
border-radius: 50%;
margin: auto;
background: url(./20200507_023239272_iOS.jpg) no-repeat;
background-size: 115%;
background-position: 15% 20%;
}
#media screen and (min-width: 768px){
.toggle-button{
display: none;
}
#header{
z-index:0;
}
}
/* #site-main */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kaija Dunklin</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="./style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<!-- header area -->
<header id="header">
<div class="row m-0">
<div class="col-3 bgcolor-black">
<nav class="primary-nav navbar-expand-md">
<div class="site-title text-center text-light py-5">
Kaykay
<p class="description text-uppercase font-os"> Kaija Dunklin</p>
</div>
<div class="d-flex flex-column">
Home
Skills
projects
Education
Experience
Resume
Contact
</div>
</nav>
</div>
</div>
<button class="toggle-button"><span class="fas fa-bars fa-2x"></span></button>
<div class="social">
<span class="mr-3"><i class="fab fa-linkedin"></i></span>
<span class="mr-3"><i class="fab fa-github"></i></span>
</div>
</header>
<!-- #header area -->
<main id="site-main">
<div class="row m-0">
<div class="col-md-9 offset-md-3 px-0">
<!-- site-banner area -->
<section class="site-banner" id="home">
<div class="banner-area">
<div class="author text-center">
<div class="author-img"></div>
<h1 class="text-white font-staat font-size-40 text-uppercase py-3">Kaija Dunklin</h1>
</div>
</div>
</section>
<section id="skills">
<i class="fab fa-github-square" >GitHub</i>
</section>
<!-- #site-banner area -->
<section id="projects">
<div>
</div>
</section>
</div>
</div>
<div>
</div>
</main>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/js/all.min.js" integrity="sha256-MAgcygDRahs+F/Nk5Vz387whB4kSK9NXlDN3w58LLq0=" crossorigin="anonymous"></script>
<script src="./vendor/typed/typed.min.js"></script>
<script src="./index.js"></script>
</body>
</html>
I'm really not sure what you are trying to achieve, but I guess I got what you wanted:
I set the background on separate div which I then set the background image to and then with Z-index value on css moved behind other content you may add on your page.
.background-img {
/*of course with this solution you should remove the previous background image*/
position: fixed;
top: 0;
height: 100vh;
width: 100vw;
background-image: url(https://i.pinimg.com/736x/2a/a1/da/2aa1da060c0dfad146354e0cc06560c2.jpg);
background-size: cover;
/* Without z-index the background seems to cover the content*/
z-index: -1;
}
<!--I added this empty div to hold the background image-->
<div class="background-img">
</div>
I really did not dive that deep to your source files, so I am not sure if this helps, but I hope so
I am new to HTML, CSS and bootstrap and trying to make a page something like this.
..............................................................................................................................................................
Header
..............................................................................................................................................................
And after this Header I need a rectangle in my page with some text and a button.
Specification I need to follow for this rectangle are as follows:
Here is my code:
.rectangle {
width: 632px;
height: 269px;
border-radius: 4px;
border: solid 1px #e0e0e0;
background-color: #ffffff;
text-align: center;
}
.Find-your-number {
width: 468px;
height: 23px;
font-size: 18px;
font-weight: normal;
font-style: normal;
font-stretch: normal;
line-height: 1.28;
letter-spacing: -0.03px;
text-align: center;
color: #333333;
}
.btn-bg {
width: 303px;
height: 48px;
border-radius: 4px;
background-color: #f9c940;
}
.open {
width: 291px;
height: 54px;
font-size: 49px;
font-weight: normal;
font-style: normal;
font-stretch: normal;
line-height: 1.1;
letter-spacing: -0.8px;
text-align: center;
color: #333333;
padding-top: 5%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-12 pt-md-5 text-center">
<div class="rectangle">
<p class="open">Open here</p>
<p class="find-your-number">Find your number</p>
<button class="btn-bg">Start</button>
</div>
</div>
</div>
</div>
This rectangle should be at 250px from top and 196px from side. How can I get it?
As of now I am getting rectangle towards a bit left side of page.
Also, text inside rectangle also not taking proper font size and alignment as mentioned in CSS. How can I correct it?
with or without pingendo.com you should try this (to all devices)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">
<link rel="stylesheet" href="theme.css" type="text/css">
</head>
<body>
<div class="py-5">
<div class="container m-0 px-0 col-12" style="border-top: 3px dotted blue;border-bottom: 3px dotted blue;">
<div class="row px-0 py-5 border-top border-bottom shadow-sm">
<div class="col-md-12 text-center col-12 col-xs-12 col-sm-12 col-lg-12 col xl-12">generic header for : xs sm md lg and xl</div>
</div>
</div>
</div>
<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.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 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>
</body>
</html>
To achieve what from the picture that you shared, you can do it manually with pure CSS or by using bootstrap. I chose the pure CSS approach, so for this cause you will need to use flexbox and the related attributes with it such align-items and justify-contents and set them to center to achieve the center align.
There are some other approaches to achieve this like using table and vertical-align and some other.
.container{
padding: 20px;
display: flex;
align-items: center;
justify-content: center;
}
.box {
width: 632px;
height: 269px;
padding: 30px 20px;
border-radius: 4px;
border: solid 1px #e0e0e0;
background-color: #ffffff;
text-align: center;
display: flex;
display: ms-flexbox;
align-items: center;
justify-content: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.box > .box-title {
font-size: 49px;
font-weight: normal;
font-style: normal;
font-stretch: normal;
line-height: 1.1;
letter-spacing: -0.8px;
text-align: center;
color: #333333;
padding-top: 5%;
-ms-flex: 0 0 100%;
flex: 0 0 100%;
max-width: 100%;
}
.box > .box-description {
font-size: 18px;
font-weight: normal;
font-style: normal;
font-stretch: normal;
line-height: 1.28;
letter-spacing: -0.03px;
color: #333333;
-ms-flex: 0 0 100%;
flex: 0 0 100%;
max-width: 100%;
}
.box > .box-action > button {
-ms-flex: 0 0 100%;
flex: 0 0 100%;
max-width: 100%;
width: 303px;
height: 48px;
font-size: 20px;
border-radius: 4px;
background-color: #f9c940;
}
<!DOCTYPE html>
<html lang="en">
<body>
<div class="container">
<div class="box">
<div class="box-title">
Check-in here
</div>
<div class="box-description">
<p>Find your reservation and collect your room keys</p>
</div>
<div class="box-action">
<button>start</button>
</div>
</div>
</div>
</body>
</html>
EDIT:
Implementation with bootstrap
In this approach, you just need to visit bootstrap website and then add the related CDNs to your project, then you have to just add d-flex, align-items-center, and justify-content-center to the main container of your page.
.box > .box-title {
font-size: 49px;
}
.box > .box-description {
font-size: 18px;
}
.box > .box-action > button {
width: 303px;
height: 48px;
font-size: 20px;
background-color: #f9c940;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<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">
</head>
<body>
<div class="container my-5 d-flex align-items-center justify-content-center">
<div class="box border rounded p-5 text-center">
<div class="box-title">
Check-in here
</div>
<div class="box-description">
<p>Find your reservation and collect your room keys</p>
</div>
<div class="box-action">
<button>start</button>
</div>
</div>
</div>
<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>
</body>
</html>
I want to decrease the space between "pricing", "how it works" and "features", as you can see here
I also know I can do that with margin but I tried a lot of different ways and it just don't come to mind on how to do that, so, it'd great if you could give me a hand.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Product Page</title>
<style type="text/css">
body{
background: #eee;
font-family: 'Lato', sans-serif;
}
#header-img{
float: left;
width:18.5em;
margin:15px 32px 0px 5px;
}
.nav-link{
position: relative;
float:right;
padding: 24px 40px 15px 20px;
}
#hero{
margin-top: 90px;
text-align: center;
}
#header{
overflow: hidden;
}
#email{
max-width: 275px;
width: 100%;
box-sizing: border-box;
padding:5px;
}
#form{
text-align: -webkit-center;
display: flex;
flex-direction: column;
}
.btn{
margin-top:13px;
display: block;
margin-left: auto;
margin-right: auto;
max-width: 150px;
width: 100%;
height: 30px;
background-color: #f1c40f;
padding: 0 20px;
font-size: 1em;
font-weight: 900;
text-transform: uppercase;
border: 3px;
border-radius: 2px;
cursor: pointer;
}
.flex{
display:flex;
margin-top: 80px;
}
.icon{
display: flex;
align-items: center;
justify-content: center;
height: 125px;
width: 20vw;
color: darkorange;
}
.desc{
display: flex;
flex-direction: column;
justify-content: unset;
height: 125px;
width: 80vw;
padding: 41px 0px 0px 0px;
text-align: start;
}
.eighttwo, p{
padding: 0;
margin: 0;
}
.divisor{
margin-top: -40px;
}
.container{
width:100%;
max-width: 1000px;
}
a{
text-decoration: none;
color: #000;
}
#nav-bar{
display: flex;
background: #eee;
flex-direction: row;
}
#media screen and (max-width: 410px) {
#nav-bar {
display: flex;
flex-direction: column-reverse;
align-items: center;
text-align: center;
margin-top: 30px;
padding: 0 50px;
}
}
</style>
</head>
<body>
<header id="header">
<nav class="navbar fixed-top" id="nav-bar">
<img src="trombones.jpg" id="header-img">
<a class="nav-link" href="#pricing">Pricing</a>
<a class="nav-link" href="#how-it-works">How It Works</a>
<a class="nav-link" href="#features">Features</a>
</nav>
</header>
<div id="hero">
<h2>Handcrafted, home-made masterpieces</h2>
</div>
<form id="form">
<input id="email" type="email" placeholder="Enter your email address" required>
<input id="submit" type="submit" value="Get Started" class="btn">
<div class="container">
<section id="features">
<div class="flex two">
<div class="icon">
<i class="fa fa-3x fa-fire"></i>
</div>
<div class="desc">
<h2 class="eighttwo">Premium Materials</h2>
<p>Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.</p>
</div>
</div>
<div class="flex divisor">
<div class="icon">
<i class="fa fa-3x fa-truck"></i>
</div>
<div class="desc">
<h2 class="eighttwo">Fast Shipping</h2>
<p>We make sure you recieve your trombone as soon as we have finished making it. We also provide free returns if you are not satisfied.</p>
</div>
</div>
<div class="flex divisor">
<div class="icon">
<i class="fa fa-3x fa-battery-full"></i>
</div>
<div class="desc">
<h2 class="eighttwo">Quality Assurance</h2>
<p>For every purchase you make, we will ensure there are no damages or faults and we will check and test the pitch of your instrument.</p>
</div>
</div>
</section>
</div>
<section id="how-it-works">
<iframe width="560" height="315" src="https://www.youtube.com/embed/y8Yv4pnO7qc" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen>
</iframe>
</section>
</form>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>
If you use justify-content: space-between; for your flex container and margin-left: auto; on the first of your links, the links will be moved as far right as their size and padding allows - see below. (BTW: Erase the float: left - it has no effect for flex items)
#nav-bar {
display: flex;
background: #eee;
flex-direction: row;
justify-content: space-between;
}
.nav-link {
padding: 24px 40px 15px 20px;
}
.nav-link:first-of-type {
margin-left: auto;
}
<nav class="navbar fixed-top" id="nav-bar">
<img src="trombones.jpg" id="header-img">
<a class="nav-link" href="#pricing">Pricing</a>
<a class="nav-link" href="#how-it-works">How It Works</a>
<a class="nav-link" href="#features">Features</a>
</nav>
I've made div with bootstrap class attribute center-block and I want to align it vertically but nothing is working only manually adding margin to the div. Any tips how to accomplish this ?
Css code:
body {
margin-bottom: 31px;
font-family: 'Lato', sans-serif;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 31px;
border-top: 1px solid white;
}
.menu{
width: 642px;
height: 642px;
border: 1px solid white;
}
.menu > p{
width: 300px;
height: 300px;
margin: 10px;
float: left;
color: white;
text-align: center;
font-size: 28px;
text-shadow: 2px 2px 5px black;
}
Html code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<style>
body{
background-image: url(img/landscape1.jpg);
background-size: cover;
}
</style>
<title>Website</title>
</head>
<body>
<div class="container-fluid">
<div class="page-header">
<h1 style="color: white;">Logo</h1>
</div>
<div class="center-block menu">
<p id="">demo1</p>
<p id="">demo2</p>
<p id="">demo3</p>
<p id="">demo4</p>
</div>
</div>
<footer class="footer">
<div class="container col-lg-6 col-md-6 col-sm-6 col-xs-6">
<p class="text-muted">Company all rights reserved © </p>
</div>
</footer>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
The div with the class center-block cant be vertically aligned because its not inside an element that with a greater height. "container-fluid" doesnt have a height, so it will be as high as its content inside (the center-block div). The same goes for container-fluid's parents (body and html tags). So you need to wrap it in a container that is higher. I've made a pen to illustrate.
http://codepen.io/ugreen/pen/GjBWWZ
The magic part is this guy:
.flex {
display: flex;
align-items: center;
height: 100%;
border: 1px solid red;
}
body {
margin-bottom: 31px;
font-family: 'Lato', sans-serif;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 31px;
border-top: 1px solid white;
}
.menu{
width: 640px;
height: 640px;
}
.menu li > p{
width: 200px;
color: white;
text-align: left;
font-size: 28px;
text-shadow: 2px 2px 5px black;
}
ul {
list-style-type: none;
}
<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/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="page-header">
<h1 style="color: white;">Text Logo</h1>
</div>
<ul>
<div class="center-block menu">
<li> <p id="1">demo1</p></li>
<li> <p id="2">demo2</p></li>
<li> <p id="3">demo3</p></li>
<li><p id="4">demo4</p><li>
</div>
</ul>
</div>
<footer class="footer">
<div class="container col-lg-6 col-md-6 col-sm-6 col-xs-6">
<p class="text-muted">Company all rights reserved © </p>
</div>
</footer>
</body>
</html>