I'm not sure why background-color tag isn't applying to my body element. The only thing i cant think of is i have it covered up with something else but i cant seem to figure out what is wrong. Either way i'm only trying to change the background color to grey. Im still learning and this is only my second project on freecodecamp.
body{
background-color: grey;
padding-top: 70px;
}
header{
background-color: #aaa;
padding-top: 30px;
padding-bottom: 30px;
box-shadow: 0px 0px 10px 3px #555
}
#headerText{
color: white;
text-align: right;
}
#headerText2{
color: white;
text-align: center;
}
#headerImg{
padding: 20px 30px 0px 0px;
}
#headerImg img{
width: 100%;
height: 100%;
}
hr {
border-top: 1px solid #8c8b8b;
text-align: center;
}
hr:after {
content: '§';
display: inline-block;
position: relative;
top: -14px;
padding: 0 10px;
background: #aaa;
color: #8c8b8b;
font-size: 18px;
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
transform: rotate(60deg);
}
.vertical-align {
display: flex;
align-items: center;
}
#section2{
background-color:white;
height: 400px;
box-shadow: 0px 0px 10px 3px #555
}
#section3{
background-color:white;
height: 400px;
box-shadow: 0px 0px 10px 3px #555
}
#top-bar-img{
height: 80px;
padding-top: 15px;
padding-bottom: 15px;
padding-left: 30px;
}
#top-bar{
background-color: purple;
box-shadow: 0 0 10px 3px #555;
}
<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/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav class="navbar navbar-inverse navbar-fixed-top" id="top-bar">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<img src="http://qlip.in/images/qlip.png" id="top-bar-img"></img>
</div>
<div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>Section 1</li>
<li>Section 2</li>
<li>Section 3</li>
</ul>
</div>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-xs-1"></div>
<div class="col-xs-10">
<header id="section1">
<div class="row vertical-align">
<div class="col-xs-1"></div>
<div class="col-xs-8" id="center">
<h3 id="headerText">Nulla interdum convallis turpis, vitae dignissim neque posuere at. Proin sit amet dui pretium, facilisis diam rhoncus, luctus lacus. Etiam nec nibh lorem. </h3>
<hr></hr>
<h4 id="headerText2">Lorem ipsum dolor sit amet - Consectetur adipiscing elit - Morbi faucibus tellus diam</h4>
</div>
<div id="headerImg" class="col-xs-3">
<img src="https://avatars.githubusercontent.com/u/23371317?v=3" class=" img-circle"><img>
</div>
</div>
</header>
<div id="section2">
gfgf
</div>
<div id="section3">
gfgf
</div>
</div>
</div>
</div>
</body>
You're using Bootstrap and their CSS rules are overriding yours. Make your rules more specific:
html > body{
background-color: grey;
padding-top: 70px;
}
html > body{
background-color: grey;
padding-top: 70px;
}
header{
background-color: #aaa;
padding-top: 30px;
padding-bottom: 30px;
box-shadow: 0px 0px 10px 3px #555
}
#headerText{
color: white;
text-align: right;
}
#headerText2{
color: white;
text-align: center;
}
#headerImg{
padding: 20px 30px 0px 0px;
}
#headerImg img{
width: 100%;
height: 100%;
}
hr {
border-top: 1px solid #8c8b8b;
text-align: center;
}
hr:after {
content: '§';
display: inline-block;
position: relative;
top: -14px;
padding: 0 10px;
background: #aaa;
color: #8c8b8b;
font-size: 18px;
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
transform: rotate(60deg);
}
.vertical-align {
display: flex;
align-items: center;
}
#section2{
background-color:white;
height: 400px;
box-shadow: 0px 0px 10px 3px #555
}
#section3{
background-color:white;
height: 400px;
box-shadow: 0px 0px 10px 3px #555
}
#top-bar-img{
height: 80px;
padding-top: 15px;
padding-bottom: 15px;
padding-left: 30px;
}
#top-bar{
background-color: purple;
box-shadow: 0 0 10px 3px #555;
}
<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/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav class="navbar navbar-inverse navbar-fixed-top" id="top-bar">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<img src="http://qlip.in/images/qlip.png" id="top-bar-img"></img>
</div>
<div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>Section 1</li>
<li>Section 2</li>
<li>Section 3</li>
</ul>
</div>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-xs-1"></div>
<div class="col-xs-10">
<header id="section1">
<div class="row vertical-align">
<div class="col-xs-1"></div>
<div class="col-xs-8" id="center">
<h3 id="headerText">Nulla interdum convallis turpis, vitae dignissim neque posuere at. Proin sit amet dui pretium, facilisis diam rhoncus, luctus lacus. Etiam nec nibh lorem. </h3>
<hr></hr>
<h4 id="headerText2">Lorem ipsum dolor sit amet - Consectetur adipiscing elit - Morbi faucibus tellus diam</h4>
</div>
<div id="headerImg" class="col-xs-3">
<img src="https://avatars.githubusercontent.com/u/23371317?v=3" class=" img-circle"><img>
</div>
</div>
</header>
<div id="section2">
gfgf
</div>
<div id="section3">
gfgf
</div>
</div>
</div>
</div>
</body>
Learn more about CSS specificity at https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
Note: You should also avoid !important at all costs.
You should try adding !important to the end of the background-color line. This overrides bootstrap's native background color.
Related
A button on a page design I'm playing with won't resize according to the defined screen width. It works fine for smaller screens but not for larger screens (800 px and above). I'm just starting out and learning as I go so this may be rather stupid! Sharing CSS code below.
Code on Jsfiddle
*,
*::before,
*::after {
box-sizing: border-box;
}
/*Custom properties, update if necessary*/
:root {
--ff-primary: 'Source Sans Pro', sans-serif;
--ff-secondary: 'Source Code Pro', monospace;
--fw-reg: 300;
--fw-bold: 900;
--clr-white: #fff;
--clr-grey: #303030;
--clr-blue: #16E0BD;
--fs-h1: 3rem;
--fs-h2: 2.25rem;
--fs-h3: 1.25rem;
--fs-body: 1rem;
--bs: 0.25em 0.25em 0.75em rgba(0, 0, 0, .25),
0.125em 0.125 0.25em rgba(0, 0, 0, 0.15);
}
#media (min-width: 800px) {
:root {
--fs-h1: 4.5rem;
--fs-h2: 3.75rem;
--fs-h3: 1.5rem;
--fs-body: 1.125rem;
}
}
/*General Styles*/
body {
background: var(--clr-white);
color: var(--clr-grey);
margin: 0;
font-family: var(--ff-primary);
font-size: var(--fs-body);
line-height: 1.6;
}
section {
padding: 5em 2em;
}
img {
display: block;
max-width: 100%;
}
strong {
font-weight: var(--fw-bold)
}
:focus {
outline: 3px solid var(--clr-blue);
outline-offset: 3px;
}
/* Buttons */
.btn {
display: inline-block;
padding: .5em 2.5em;
background: var(--clr-blue);
color: var(--clr-grey);
text-decoration: none;
cursor: pointer;
font-size: .8rem;
text-transform: uppercase;
letter-spacing: 2px;
font-weight: var(--fw-bold);
transition: transform 200ms ease-in-out;
}
.btn:hover {
transform: scale(1.1);
}
/*Typography*/
h1,
h2,
h3 {
line-height: 1;
margin: 0;
}
h1 {
font-size: var(--fs-h1)
}
h2 {
font-size: var(--fs-h2)
}
h3 {
font-size: var(--fs-h3)
}
.section__title {
margin-bottom: 0.25em;
}
.section__title--intro {
font-weight: var(--fw-reg);
}
.section__title--intro strong {
display: block;
}
.section__subtitle {
margin: 0;
font-size: var(--fs-h3);
}
.section__subtitle--intro,
.section__subtitle--about {
background: var(--clr-blue);
padding: .25em;
font-family: var(--ff-secondary);
margin-bottom: 1em;
}
/* Header section */
nav {
display: none;
}
/* Intro section */
.intro {
position: relative;
}
.intro__img {
box-shadow: var(--bs);
}
.section__subtitle--intro {
display: inline-block;
}
#media (min-width: 600px) {
.intro {
display: grid;
width: min-content;
margin: 0 auto;
grid-column-gap: 1em;
grid-template-areas:
"img title"
"img subtitle";
grid-template-columns: min-content max-content;
}
.intro__img {
grid-area: img;
min-width: 250px;
position: relative;
z-index: 2;
}
.section__subtitle--intro {
align-self: start;
grid-column: -1 / 1;
grid-row: 2;
text-align: right;
position: relative;
left: -1.5em;
width: calc(100% + 1.5em);
}
}
/*My services section*/
.myservices {
background-color: var(--clr-grey);
color: var(--clr-white);
background-size: cover;
background-image: url("https://portfolio-project-tl.s3-ap-southeast-1.amazonaws.com/computer-desk-1450x625.jpg");
background-blend-mode: multiply;
text-align: center;
}
.section__title--services {
color: var(--clr-blue);
position: relative;
}
.section__title--services::after {
content: '';
display: block;
width: 3em;
height: 1px;
margin: 0.5em auto 1em;
background: var(--clr-white);
opacity: 0.5;
}
.services {
margin-bottom: 4em;
}
.service {
max-width: 250px;
margin: 0 auto;
}
#media (min-width: 800px) {
.services {
display: flex;
max-width: 1000px;
margin-left: auto;
margin-right: auto;
}
.service+.service {
margin-left: 1.5em;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width initial-scale=1">
<title>Tanuj Lakhina's Portfolio</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" integrity="sha256-46qynGAkLSFpVbEBog43gvNhfrOj+BmwXdxFgVK/Kvc=" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Source+Code+Pro:400,900|Source+Sans+Pro:300,900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="CSS/style.css">
</head>
<body>
<header>
<div class="logo">
<img src="https://portfolio-project-tl.s3-ap-southeast-1.amazonaws.com/logo.png" alt="">
</div>
<button class="nav-toggle" aria-label="toggle navigation">
<span class="hamburger"></span>
</button>
<nav class="nav">
<ul class="nav__list">
<li class="nav__item">Home</li>
<li class="nav__item">My services</li>
<li class="nav__item">About me</li>
<li class="nav__item">My work</li>
</ul>
</nav>
</header>
<!-- INTRODUCTION -->
<section class="intro" id="home">
<h1 class="section__title section__title--intro">
Hi, I am <strong>Tanuj Lakhina</strong>
</h1>
<p class="section__subtitle section__subtitle--intro">journalist</p>
<img src="https://portfolio-project-tl.s3-ap-southeast-1.amazonaws.com/me-313x313.jpg" alt="picture of Tanuj Lakhina" class="intro__img">
</section>
<!-- My services -->
<section class="myservices" id="services">
<h2 class="section__title section__title--services">What I do</h2>
<div class="services">
<div class="service">
<h3>Journalism</h3>
<p>Professional sports journalist with Firstpost (Network18) in Delhi with strong experience of working in digital newsrooms.</p>
</div><!-- / service -->
<div class="services">
<div class="service">
<h3>Social media</h3>
<p>Have worked in B2B and B2C environments for businesses, agency and analytical organisations. I've handled accounts of large entities with over a million customers.</p>
</div><!-- / service -->
<div class="service">
<h3>Data journalism</h3>
<p>Besides the run of the mill stories, I've put special emphasis on data stories and work to offer different perspective to a topic.</p>
</div><!-- / service -->
</div><!-- / services -->
My work
</section>
<!-- About me -->
<section class="about-me" id="about">
<h2 class="section__title section__title--about">Who I am?</h2>
<p class="section__subtitle section__subtitle--about">Journalist, social media enthusiast</p>
<div class="about-me__body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Velit ut tortor pretium viverra suspendisse potenti nullam ac tortor. Nunc consequat interdum varius sit amet. </p>
<p>Morbi tristique senectus et netus et malesuada fames. Morbi quis commodo odio aenean. Et leo duis ut diam quam nulla porttitor massa id. Venenatis lectus magna fringilla urna porttitor rhoncus. Suspendisse potenti nullam ac tortor vitae.</p>
</div>
<img src="https://portfolio-project-tl.s3-ap-southeast-1.amazonaws.com/IMG-20190323-WA0037-244X406.jpg" alt="About me">
<!-- INSERT ABOUT ME PHOTO ABOVE -->
</section>
<!-- My work -->
<section class="my-work" id="work">
<h2 class="section__title">My work</h2>
<p class="section__subtitle"></p>
<div class="Portfolio">
<!-- Portfolio item 1 -->
<a href="#" class="Portfolio__item">
<img src="https://portfolio-project-tl.s3-ap-southeast-1.amazonaws.com/black-ball-point-pen-with-brown-spiral-notebook-240x240.jpg" alt="" class="portfolio__img"></a>
<!-- Portfolio item 2 -->
<a href="#" class="Portfolio__item">
<img src="https://portfolio-project-tl.s3-ap-southeast-1.amazonaws.com/data-analysis-240x240.jpg" alt="" class="portfolio__img"></a>
<!-- Portfolio item 3 -->
<a href="#" class="Portfolio__item">
<img src="https://portfolio-project-tl.s3-ap-southeast-1.amazonaws.com/newspaper-illustration-240x240.png" alt="" class="portfolio__img"></a>
</div>
</section>
<!-- FOOTER -->
<footer>
Tanujlakhina9#gmail.com
<ul class="social-list">
<li class="social-list__item"><a class="social-list__link" href="https://twitter.com/tanujlakhina"><i class="fa fa-twitter-square" style="font-size:36px"></i></a></li></ul></i>
<li class="social-list__item"><a class="social-list__link" href="https://www.facebook.com/tanujlakhina"><i class="fa fa-facebook-official" style="font-size:36px"></a></li></i>
</ul>
</footer>
</body>
</html>
P.S. It is still WIP.
In my opinion, use
.yourButton {
height: 100vh;
width: 100vw;
}
Use vh to get the screen view height and vw to get view width
From the simple style above, 100vh means 100% of the screen view height and same goes to vw
I hope this helps
I used my angular 6 project landing page to bootstrap 4 carousel, carousel is working fine, and i added some form like a booking.com , i have some issue that forms is cant do the small size and center
anyone know how to do that like as booking.com
my code part
.section .section-center {
position: absolute;
top: 50%;
left: 0;
right: 0;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
#booking::before {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
background: rgba(255, 255, 255, 0.15);
}
.booking-form {
background: #fff;
border-radius: 2px;
}
.booking-form>form .row.no-margin {
margin-right: 0px;
margin-left: 0px;
}
.booking-form>form .row.no-margin>[class*="col-"] {
padding-right: 0px;
padding-left: 0px;
}
.booking-form .form-group {
position: relative;
padding: 25px;
margin-bottom: 0px;
}
.booking-form .form-group:after {
content: '';
background: rgba(129, 131, 144, 0.15);
position: absolute;
top: 25px;
bottom: 0;
right: 0px;
width: 2px;
height: 75px;
}
.booking-form .form-control {
background-color: transparent;
border-radius: 0px;
border: none;
height: 50px;
-webkit-box-shadow: none;
box-shadow: none;
font-size: 20px;
color: #222;
font-weight: 400;
padding: 0;
}
.booking-form .form-control::-webkit-input-placeholder {
color: #818390;
}
.booking-form .form-control:-ms-input-placeholder {
color: #818390;
}
.booking-form .form-control::placeholder {
color: #818390;
}
.booking-form input[type="date"].form-control:invalid {
color: #818390;
}
.booking-form select.form-control {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.booking-form select.form-control+.select-arrow {
position: absolute;
right: 0px;
bottom: 30px;
width: 32px;
line-height: 32px;
height: 32px;
text-align: center;
pointer-events: none;
color: #818390;
font-size: 14px;
}
.booking-form select.form-control+.select-arrow:after {
content: '\279C';
display: block;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.booking-form .form-label {
color: #07c;
display: block;
font-weight: 400;
height: 25px;
line-height: 25px;
font-size: 14px;
}
.booking-form .form-btn {
padding: 25px;
}
.booking-form .submit-btn {
background: #07c;
border: none;
text-transform: capitalize;
display: block;
border-radius: 2px;
width: 100%;
height: 75px;
font-size: 16px;
font-weight: 400;
color: #fff;
}
/* GLOBAL STYLES
-------------------------------------------------- */
/* Padding below the footer and lighter body text */
body {
padding-top: 3rem;
padding-bottom: 3rem;
color: #5a5a5a;
}
/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */
/* Carousel base class */
.carousel {
margin-bottom: 4rem;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
bottom: 3rem;
z-index: 10;
}
/* Declare heights because of positioning of img element */
.carousel-item {
min-height: calc(100vh - 110px);
background-color: #777;
}
.carousel-item > img {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
min-height: calc(100vh - 110px);
}
/* MARKETING CONTENT
-------------------------------------------------- */
/* Center align the text within the three columns below the carousel */
.marketing .col-lg-4 {
margin-bottom: 1.5rem;
text-align: center;
}
.marketing h2 {
font-weight: 400;
}
.marketing .col-lg-4 p {
margin-right: .75rem;
margin-left: .75rem;
}
/* Featurettes
------------------------- */
.featurette-divider {
margin: 5rem 0; /* Space out the Bootstrap <hr> more */
}
/* Thin out the marketing headings */
.featurette-heading {
font-weight: 300;
line-height: 1;
letter-spacing: -.05rem;
}
/* RESPONSIVE CSS
-------------------------------------------------- */
#media (min-width: 40em) {
/* Bump up size of carousel content */
.carousel-caption p {
margin-bottom: 1.25rem;
font-size: 1.25rem;
line-height: 1.4;
}
.featurette-heading {
font-size: 50px;
}
}
#media (min-width: 62em) {
.featurette-heading {
margin-top: 7rem;
}
}
<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://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.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" 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>
<!-----------------------Header--------------------------------->
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-light">
<a class="navbar-brand" href="#">header</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto">
</ul>
<form class="form-inline mt-2 mt-md-0">
</form>
</div>
</nav>
<!-----------------------Header--------------------------------->
<main role="main">
<div id="booking" class="section">
<div class="section-center">
<div class="row " style="z-index: 99999; top: 40%;
position: absolute; color: white; left: 100px; right: 5%; margin: 0px;">
<div class="booking-form col-12" >
<form >
<div class="row col-12">
<div class="col-md-4">
<div class="form-group">
<span class="form-label">Location</span>
<input class="form-control" type="text" placeholder="Location">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<span class="form-label">Event Type</span>
<select class="form-control">
<option>Event 1</option>
<option>Event 1</option>
<option>Event 1</option>
</select>
<span class="select-arrow"></span>
</div>
</div>
<div class="col-md-4">
<div class="form-btn">
<button class="submit-btn">Check</button>
</div>
</div>
</div>
</form>
</div>
</div>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="first-slide" src="/assets/images/background.jpg" alt="First slide">
<div class="container">
<div class="carousel-caption text-left">
<h1>Example headline.</h1>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</div>
</div>
</div>
<div class="carousel-item">
<img class="second-slide" src="/assets/images/background.jpg" alt="Second slide">
<div class="container">
<div class="carousel-caption">
<h1>Another example headline.</h1>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</div>
</div>
</div>
<div class="carousel-item">
<img class="third-slide" src="/assets/images/background.jpg" alt="Third slide">
<div class="container">
<div class="carousel-caption text-right">
<h1>One more for good measure.</h1>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<!-- /END THE FEATURETTES -->
<!-- /.container -->
</div>
</main>
There is no need for extra row (<div class="row " style="z-index: 99999; top: 40%;
position: absolute; color: white; left: 100px; right: 5%; margin: 0px;">)
instead add a div(here: form-wrapper ) and add some css for positioning div at center
.section .section-center {
position: absolute;
top: 50%;
left: 0;
right: 0;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
#booking::before {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
background: rgba(255, 255, 255, 0.15);
}
.booking-form {
background: #fff;
border-radius: 2px;
}
.booking-form>form .row.no-margin {
margin-right: 0px;
margin-left: 0px;
}
.booking-form>form .row.no-margin>[class*="col-"] {
padding-right: 0px;
padding-left: 0px;
}
.booking-form .form-group {
position: relative;
padding: 25px;
margin-bottom: 0px;
}
.booking-form .form-group:after {
content: '';
background: rgba(129, 131, 144, 0.15);
position: absolute;
top: 25px;
bottom: 0;
right: 0px;
width: 2px;
height: 75px;
}
.booking-form .form-control {
background-color: transparent;
border-radius: 0px;
border: none;
height: 50px;
-webkit-box-shadow: none;
box-shadow: none;
font-size: 20px;
color: #222;
font-weight: 400;
padding: 0;
}
.booking-form .form-control::-webkit-input-placeholder {
color: #818390;
}
.booking-form .form-control:-ms-input-placeholder {
color: #818390;
}
.booking-form .form-control::placeholder {
color: #818390;
}
.booking-form input[type="date"].form-control:invalid {
color: #818390;
}
.booking-form select.form-control {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.booking-form select.form-control+.select-arrow {
position: absolute;
right: 0px;
bottom: 30px;
width: 32px;
line-height: 32px;
height: 32px;
text-align: center;
pointer-events: none;
color: #818390;
font-size: 14px;
}
.booking-form select.form-control+.select-arrow:after {
content: '\279C';
display: block;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.booking-form .form-label {
color: #07c;
display: block;
font-weight: 400;
height: 25px;
line-height: 25px;
font-size: 14px;
}
.booking-form .form-btn {
padding: 25px;
}
.booking-form .submit-btn {
background: #07c;
border: none;
text-transform: capitalize;
display: block;
border-radius: 2px;
width: 100%;
height: 75px;
font-size: 16px;
font-weight: 400;
color: #fff;
}
/* GLOBAL STYLES
-------------------------------------------------- */
/* Padding below the footer and lighter body text */
body {
padding-top: 3rem;
padding-bottom: 3rem;
color: #5a5a5a;
}
/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */
/* Carousel base class */
.carousel {
margin-bottom: 4rem;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
bottom: 3rem;
z-index: 10;
}
/* Declare heights because of positioning of img element */
.carousel-item {
min-height: calc(100vh - 110px);
background-color: #777;
}
.carousel-item > img {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
min-height: calc(100vh - 110px);
}
/* MARKETING CONTENT
-------------------------------------------------- */
/* Center align the text within the three columns below the carousel */
.marketing .col-lg-4 {
margin-bottom: 1.5rem;
text-align: center;
}
.marketing h2 {
font-weight: 400;
}
.marketing .col-lg-4 p {
margin-right: .75rem;
margin-left: .75rem;
}
/* Featurettes
------------------------- */
.featurette-divider {
margin: 5rem 0; /* Space out the Bootstrap <hr> more */
}
/* Thin out the marketing headings */
.featurette-heading {
font-weight: 300;
line-height: 1;
letter-spacing: -.05rem;
}
/* RESPONSIVE CSS
-------------------------------------------------- */
#media (min-width: 40em) {
/* Bump up size of carousel content */
.carousel-caption p {
margin-bottom: 1.25rem;
font-size: 1.25rem;
line-height: 1.4;
}
.featurette-heading {
font-size: 50px;
}
}
#media (min-width: 62em) {
.featurette-heading {
margin-top: 7rem;
}
}
.form-wrapper {
z-index: 99999;
top: 50%;
position: absolute;
color: white;
left: 50%;
right: auto;
margin: 0px;
transform: translate(-50%,-50%);
}
<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://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.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" 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>
<!-----------------------Header--------------------------------->
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-light">
<a class="navbar-brand" href="#">header</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto">
</ul>
<form class="form-inline mt-2 mt-md-0">
</form>
</div>
</nav>
<!-----------------------Header--------------------------------->
<main role="main">
<div id="booking" class="section">
<div class="section-center">
<div class="form-wrapper ">
<div class="booking-form" >
<form >
<div class="row">
<div class="col-md-4">
<div class="form-group">
<span class="form-label">Location</span>
<input class="form-control" type="text" placeholder="Location">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<span class="form-label">Event Type</span>
<select class="form-control">
<option>Event 1</option>
<option>Event 1</option>
<option>Event 1</option>
</select>
<span class="select-arrow"></span>
</div>
</div>
<div class="col-md-4">
<div class="form-btn">
<button class="submit-btn">Check</button>
</div>
</div>
</div>
</form>
</div>
</div>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="first-slide" src="/assets/images/background.jpg" alt="First slide">
<div class="container">
<div class="carousel-caption text-left">
<h1>Example headline.</h1>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</div>
</div>
</div>
<div class="carousel-item">
<img class="second-slide" src="/assets/images/background.jpg" alt="Second slide">
<div class="container">
<div class="carousel-caption">
<h1>Another example headline.</h1>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</div>
</div>
</div>
<div class="carousel-item">
<img class="third-slide" src="/assets/images/background.jpg" alt="Third slide">
<div class="container">
<div class="carousel-caption text-right">
<h1>One more for good measure.</h1>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<!-- /END THE FEATURETTES -->
<!-- /.container -->
</div>
</main>
I have deleted a 4th box as i only need 3 and want the centre the 3 boxes. Here is an image. This is my CSS Code. Below is the HTML code, Keeps saying there is too much code so I am filling up this part with more text so hopefully I can get some help at some point, hopefully this is enough text to code now ?
#featured-wrapper {
overflow: hidden;
padding: 5em 0em;
background: #FFF;
}
#featured h2 {
text-align: center;
}
#featured .icon {
position: relative;
display: block;
background: #2A70E8;
margin: 0px auto 20px auto;
line-height: 2.5em;
font-size: 4em;
text-align: center;
color: #FFF;
}
.column1,
.column2,
.column3,
.column4 {
width: 282px;
}
.column1,
.column2 {
float: left;
margin-right: 24px;
}
.column3 {
float: left;
}
.column4 {
float: right;
}
<div id="featured-wrapper">
<div id="featured" class="container">
<div class="major">
<h2>Maecenas lectus sapien</h2>
<span class="byline">Cras vitae metus aliquam risus pellentesque pharetra</span>
</div>
<div class="column1">
<span class="icon icon-bar-chart"></span>
<div class="title">
<h2>Maecenas lectus sapien</h2>
<span class="byline">Integer sit amet aliquet pretium</span>
</div>
</div>
<div class="column2">
<span class="icon icon-qrcode"></span>
<div class="title">
<h2>Praesent scelerisque</h2>
<span class="byline">Integer sit amet aliquet pretium</span>
</div>
</div>
<div class="column3">
<span class="icon icon-building"></span>
<div class="title">
<h2>Fusce ultrices fringilla</h2>
<span class="byline">Integer sit amet aliquet pretium</span>
</div>
</div>
</div>
</div>
we need to see your HTML to give You a correct Answer
but try this
replace this code
#featured-wrapper {
overflow: hidden;
padding: 5em 0em;
background: #FFF;
}
with this
#featured-wrapper {
width:900px;
margin:0 auto;
overflow: hidden;
padding: 5em 0em;
background: #FFF;
}
and you can change this number 900
with the best width for the HTML
Try wrapping the 3 columns in a div with a columnwrap class like:
.columnwrap {
width: 846px; //width of your 3 columns combined, add px for padding if needed
margin: auto;
}
then:
<div class="columnwrap">
<div class="column1"></div>
<div class="column1"></div>
<div class="column1"></div>
</div>
You are going to need to clearfix the three floats before the closing div tag on the columnwrap. This should do the trick.
you can avoid float and use .column {display:inline-block} + .parent .column {text-align:center}.
Snippet to test below
#featured-wrapper {
overflow: hidden;
padding: 5em 0em;
background: #FFF;
text-align:center;/* new */
}
#featured h2 {/* cleaned up */
}
#featured .icon {
position: relative;
display: block;
background: #2A70E8;
margin: 0px auto 20px auto;
line-height: 2.5em;
font-size: 4em;
text-align: center;
color: #FFF;
}
.column1,
.column2,
.column3,
.column4 {
width: 282px;
display:inline-block;/* new instead float*/
margin:0 10px;/* update*/
}
.column1,
.column2 {/* cleaned up */
}
.column3 {/* cleaned up */
}
.column4 {/* cleaned up */
}
<div id="featured-wrapper">
<div id="featured" class="container">
<div class="major">
<h2>Maecenas lectus sapien</h2>
<span class="byline">Cras vitae metus aliquam risus pellentesque pharetra</span>
</div>
<div class="column1">
<span class="icon icon-bar-chart"></span>
<div class="title">
<h2>Maecenas lectus sapien</h2>
<span class="byline">Integer sit amet aliquet pretium</span>
</div>
</div>
<div class="column2">
<span class="icon icon-qrcode"></span>
<div class="title">
<h2>Praesent scelerisque</h2>
<span class="byline">Integer sit amet aliquet pretium</span>
</div>
</div>
<div class="column3">
<span class="icon icon-building"></span>
<div class="title">
<h2>Fusce ultrices fringilla</h2>
<span class="byline">Integer sit amet aliquet pretium</span>
</div>
</div>
</div>
</div>
how to rotate collapse menu slide from right to left?
<HTML>
<HEAD>
<style>
#accordion {
width: 55%;
margin-left: 20px;
border: 1px solid blue;
}
.panel {
width: 100%;
}
.panel-heading {
height: 40px;
}
.panel-title {
height: 18px
}
.panel-title a {
float: right;
text-decoration: none;
padding: 0px 10px;
margin: 0px -10px;
}
.panel-body {
height: 10%;
}
.cont {
margin: 10px 00px;
}
</style>
<META http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<TITLE>headerFrame.jsp</TITLE>
</HEAD>
<BODY>
<br>
<div>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
Collapsible Group Item #1
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
<div class="cont">testing msesage</div>
</div>
</div>
</div>
</div>
</div>
</BODY>
</HTML>
expected
Below is the code for vertical slide accordian. Here is the code
working example : https://jsfiddle.net/yudi/qhnhnfjb/1/
HTML
<div id="accordion">
<div class="panel">
<div class="pink"></div>
<div class="panelContent p1"> <strong>Section 1 Header</strong><br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In iaculis volutpat quam, non suscipit arcu accumsan at. Aliquam pellentesque.
</div>
</div>
CSS
#accordion {
list-style:none;
margin:30px 0;
padding:0;
height:270px;
width:980px;
margin:0 0 0 11px;
border-top:2px solid #000000;
border-bottom:2px solid #000000;
overflow:hidden;
}
#accordion .panel {
float:left;
display:block;
height:270px;
width:44px;
overflow:hidden;
color:#666666;
text-decoration:none;
font-size:16px;
line-height:1.5em
}
#accordion .panel.active {
width:848px
}
.panelContent {
padding:15px 15px 15px 55px;
height:240px;
width:778px;
}
.pink {
width:42px;
height:270px;
float:left;
background:url(../images/accordionSprite.png) no-repeat 4px 85px #f980a1;
border-right:2px solid #ffffff;
cursor:pointer
}
.last {
border:none
}
jquery
$(document).ready(function(){
activePanel = $("#accordion div.panel:first");
$(activePanel).addClass('active');
$("#accordion").delegate('.panel', 'click', function(e){
if( ! $(this).is('.active') ){
$(activePanel).animate({width: "44px"}, 300);
$(this).animate({width: "848px"}, 300);
$('#accordion .panel').removeClass('active');
$(this).addClass('active');
activePanel = this;
};
});
});
How to remove the dotted line in begining and inbetween of the text like as in the image ?
my code
codepen link
<div class="container">
<div class="row menu-items">
<div class="menu-item col-sm-6 col-xs-12">
<div class="clearfix menu-wrapper">
<h4>English asparagus</h4>
<span class="price">$14.95</span>
<div class="dotted-bg"></div>
</div>
<p>pellentesque enim. Aliquam tempor</p>
</div>
This my suggestion, use this
.menu-item .dotted-bg {
border-top: 2px dotted #ccc;
left: 0;
position: absolute;
top: 15px;
width: 100%;
z-index: -1;
}
Hi Just remove all line's. Add this two line
.menu-item .dotted-bg {
border-top: 2px dotted #ccc;
margin-top:13px;
}
Here what i did with your code is:
Just modified your CSS:
Before:
.menu-item .dotted-bg {
border-top: 2px dotted #ccc;
left: 0;
position: absolute;
top: 15px;
width: 100%;
z-index: -1;
}
After:
.menu-item .dotted-bg {
border-top: 2px dotted #ccc;
left: 0;
position: relative;
top: 15px;
width: 100%;
z-index: -1;
}
Have , its' position as Relative; as if you put it as " Absolute " , it will be placed anywhere inside the div and it won't get set properly.
Hope this helps you.
.clearfix menu-wrapper {
border-top: 2px dotted #ccc;
left: 0;
position: absolute;
top: 15px;
width: 100%;
z-index: -1;
}
.menu-item .price {
background: #fff none repeat scroll 0 0;
float: right;
font-family: Josefin Sans;
font-size: 22px;
font-weight: 700;
line-height: 19.8px;
margin: 5px 0;
padding-left: 10px;
}
.menu-item h4 {
background: #fff none repeat scroll 0 0;
display: inline;
float: left;
margin: 5px 0;
padding-right: 10px;
text-align: left;
}
.menu-item {
border-left: 3px solid white;
margin: 15px 0;
overflow: hidden;
padding-left: 10px;
}
.menu-items{
position: relative; height: 477.583px;
}
.menu-item .dotted-bg {
border-top: 2px dotted #ccc;
left: 0;
position: relative;
top: 15px;
width: 100%;
z-index: -1;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Portfilo</title>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container">
<div class="row menu-items">
<div class="menu-item col-sm-6 col-xs-12">
<div class="clearfix menu-wrapper">
<h4>English asparagus</h4>
<span class="price">$14.95</span>
<div class="dotted-bg"></div>
</div>
<p>pellentesque enim. Aliquam tempor</p>
</div>
<div class="menu-item col-sm-6 col-xs-12">
<div class="clearfix menu-wrapper">
<h4>English asparagus</h4>
<span class="price">$14.95</span>
<div class="dotted-bg"></div>
</div>
<p>pellentesque enim. Aliquam tempor</p>
</div>
<div class="menu-item col-sm-6 col-xs-12">
<div class="clearfix menu-wrapper">
<h4>English asparagus</h4>
<span class="price">$14.95</span>
<div class="dotted-bg"></div>
</div>
<p>pellentesque enim. Aliquam tempor</p>
</div>
<div class="menu-item col-sm-6 col-xs-12">
<div class="clearfix menu-wrapper">
<h4>English asparagus</h4>
<span class="price">$14.95</span>
<div class="dotted-bg"></div>
</div>
<p>pellentesque enim. Aliquam tempor</p>
</div>
</div>
</div>
</body>
</html>
.clearfix menu-wrapper {
border-top: 2px dotted #ccc;
left: 0;
position: absolute;
top: 15px;
width: 100%;
z-index: -1;
}
.menu-item .price {
background: #fff none repeat scroll 0 0;
float: right;
font-family: Josefin Sans;
font-size: 22px;
font-weight: 700;
line-height: 19.8px;
margin: 5px 0;
padding-left: 10px;
}
.menu-item h4 {
background: #fff none repeat scroll 0 0;
display: inline;
float: left;
margin: 5px 0;
padding-right: 10px;
text-align: left;
}
.menu-item {
border-left: 3px solid white;
margin: 15px 0;
overflow: hidden;
padding-left: 10px;
}
.menu-items{
position: relative; height: 477.583px;
}
.menu-item .dotted-bg {
border-top: 2px dotted #ccc;
left: 0;
position: relative;
top: 15px;
width: 100%;
z-index: -1;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Portfilo</title>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container">
<div class="row menu-items">
<div class="menu-item col-sm-6 col-xs-12">
<div class="clearfix menu-wrapper">
<h4>English asparagus</h4>
<span class="price">$14.95</span>
<div class="dotted-bg"></div>
</div>
<p>pellentesque enim. Aliquam tempor</p>
</div>
<div class="menu-item col-sm-6 col-xs-12">
<div class="clearfix menu-wrapper">
<h4>English asparagus</h4>
<span class="price">$14.95</span>
<div class="dotted-bg"></div>
</div>
<p>pellentesque enim. Aliquam tempor</p>
</div>
<div class="menu-item col-sm-6 col-xs-12">
<div class="clearfix menu-wrapper">
<h4>English asparagus</h4>
<span class="price">$14.95</span>
<div class="dotted-bg"></div>
</div>
<p>pellentesque enim. Aliquam tempor</p>
</div>
<div class="menu-item col-sm-6 col-xs-12">
<div class="clearfix menu-wrapper">
<h4>English asparagus</h4>
<span class="price">$14.95</span>
<div class="dotted-bg"></div>
</div>
<p>pellentesque enim. Aliquam tempor</p>
</div>
</div>
</div>
</body>
</html>