sorry for my English, I'm new with Bootstrap....
I to want to build 4 columns and because of the width from Bootstrap col-sm-3 too small or col-sm-4 too big it is, I do try as here to say, but to come as here to show
how to show the image
How to show are not margin between columns...
Code CSS
.container {margin-top: 13rem; }
.product-grid{
font-family: 'Roboto Condensed', sans-serif;
text-align: center;
overflow: hidden;
position: relative;
border: 4px solid #fff;
margin-top: 170px;
background-color: #ffffff;
}
.product-grid:before{
content: '';
height: 100%;
width: 100%;
position: absolute;
left: 0;
top: 0;
z-index: 1;
transition: all 0.3s ease 0s;
}
.product-grid .product-image a{ display: block; }
.product-grid .product-image img{
width: 60%;
height: auto;
}
.product-grid { width: 300px;}
.product-grid .product-content{
padding: 18px;
position: relative;
z-index: 2;
background-color: white;
}
.product-grid .title{
font-size: 16px;
font-weight: 500;
margin: 0 0 10px 0;
}
.product-grid .title a{ color: #000; }
.product-grid .title a:hover{ color: #fa8231; }
.product-grid .price{
color: #fa8231;
font-size: 18px;
font-weight: 600;
}
.product-grid .price span{
color: #777;
margin: 0 0 0 5px;
font-weight: 300;
display: inline-block;
}
Code HTML
<div class="container">
<div class="row">
<div class="col-sm-3 product-grid">
<div class="product-grid">
<div class="product-image">
<a href="#">
<img alt="" class="bild" src="photo/111.jpg">
</a>
</div>
<div class="product-content">
<h3 class="title">
la
</h3>
<div class="price">
</div>
</div>
</div>
</div>
<div class="col-sm-3 product-grid">
<div class="product-grid">
<div class="product-image">
<a href="#">
<img alt="" class="bild" src="photo/111.jpg">
</a>
</div>
<div class="product-content">
<h3 class="title">
le
</h3>
<div class="price"></div>
</div>
</div>
</div><div class="col-sm-3 col-md-3">
<div class="product-grid">
<div class="product-image">
<a href="#">
<img alt="" class="bild" src="photo/111.jpg">
</a>
</div>
<div class="product-content">
<h3 class="title">
li
</h3>
<div class="price"></div>
</div>
</div>
</div><div class="col-sm-3 col-md-3">
<div class="product-grid">
<div class="product-image">
<a href="#">
<img alt="" class="bild" src="photo/111.jpg">
</a>
</div>
<div class="product-content">
<h3 class="title">
lo
</h3>
<div class="price"></div>
</div>
</div>
</div>
</div><br><br>
</div>
Can Please someone help me und this issue to solve, Thanks!
I am struggling to edit the CSS to show the yellow triangle containing text in the bottom right of a Bootstrap 4 card, in CSS, is there a way to achieve this effect?
This is what the css currently outputs in a Bootstrap 4 card:
And this is what I want to achieve:
.row {
position: relative;
min-height: 100px;
}
.triangle {
display: block;
width: 50px;
height: 50px;
font-size: 21px;
}
.triangle::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(to left top, #ffffff 49%, transparent 33%);
}
{
position: relative;
top: 5px;
left: 5px;
}
<div class="card card-ecommerce">
<a href="#" class="triangle btn-warning position-absolute">
<i class="fas fa-arrow-left" aria-hidden="true"></i></a>
<div class="view overlay">
<img src="https://i.stack.imgur.com/B73k3.jpg" class="img-fluid" alt="sample image">
<a>
<div class="mask rgba-white-slight"></div>
</a>
</div>
<div class="card-body">
<h5 class="card-title mb-1"><strong><a class="dark-grey-text">10% cashback</a> </strong></h5>
<span class="badge badge-danger mb-2">bestseller</span>
<div class="card-footer pb-0">
<div class="row mb-0">
Try this code
I've created two triangle on both diagonal sides with text in it.
Hopefully it'll help you.
.change_corner {
width: 0;
float: right;
height: 0;
border-top: 150px solid #ffcc00;
border-right: 150px solid transparent;
transform: rotate(180deg);
}
.change_corner span {
position: absolute;
top: -130px;
width: 100px;
left: 5px;
text-align: center;
font-size: 16px;
font-family: arial;
transform: rotate(131deg);
display: block;
}
.corner {
width: 0;
height: 0;
border-top: 150px solid #ffcc00;
border-bottom: 0px solid transparent;
border-right: 150px solid transparent;
}
.corner span {
position: absolute;
top: 35px;
width: 100px;
left: 5px;
text-align: center;
font-size: 16px;
font-family: arial;
transform: rotate(-45deg);
display: block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Traingle 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.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class='container'>
<div class="row">
<div class="col-md-12">
<div class="card mt-5">
<div class="triangle">
<div class="corner"><span>20% Special Offer</span></div>
</div>
<div class="mt-2 mb-2">
This is my content
</div>
<div class="triangle">
<div class="change_corner"><span>20% Special Offer</span></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Change the fa-arrow-left favicon class to fa-arrow-right, and if not existant add a class .triangle-right to your CSS (or LESS/SASS) and of course to your .triangle element:
.triangle-right {
position: relative;
bottom: 5px;
right: 5px;
}
.triangle-right::after {
content: "";
background: linear-gradient(to right bottom, #ffffff 49%, transparent 33%);
}
Example Snippet:
// This class needs to be added, ideally with a similar name as the previous
.triangle-right {
position: relative;
bottom: 5px;
right: 5px;
}
.triangle-right::after {
content: "";
background: linear-gradient(to right bottom, #ffffff 49%, transparent 33%);
}
.row {
position: relative;
min-height: 100px;
}
.triangle {
display: block;
width: 50px;
height: 50px;
font-size: 21px;
}
.triangle::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(to left top, #ffffff 49%, transparent 33%);
}
// classname missing?
{
position: relative;
top: 5px;
left: 5px;
}
<div class="card card-ecommerce">
<!-- triangle receives the .triangle-right class -->
<a href="#" class="triangle btn-warning position-absolute triangle-right">
<!-- change fa-arrow-left to fa-arrow-right -->
<i class="fas fa-arrow-right" aria-hidden="true"></i>
</a>
<div class="view overlay">
<img src="https://i.stack.imgur.com/B73k3.jpg" class="img-fluid" alt="sample image">
<a>
<div class="mask rgba-white-slight"></div>
</a>
</div>
<div class="card-body">
<h5 class="card-title mb-1"><strong><a class="dark-grey-text">10% cashback</a> </strong></h5>
<span class="badge badge-danger mb-2">bestseller</span>
<div class="card-footer pb-0">
<div class="row mb-0">
</div>
</div>
</div>
</div>
Trying to create test Bootstrap Master-Content (asp.net) application using Bootstrap. Despite having applied row no gutter, it is still having padding.
Image
CSS
.customDivTopRow {
text-decoration: solid;
text-align: left;
background-color: firebrick;
height: 10%;
width: 100%;
}
.customDivTopRowRight {
text-align: center;
font-size: small;
background-color: bisque;
height: 15%;
width: 100%;
}
.customDivMenuRow {
min-height: 20px;
text-decoration: solid;
border: thick;
border-color: black;
text-align: right;
background-color: antiquewhite;
}
.customDivLeftTopRow {
min-height: calc(100% - 450px);
font-size: small;
border: thick;
border-color: black;
}
.customDivMiddleTopRow {
min-height: calc(100% - 450px);
text-align: center;
margin-bottom: 5px;
font-size: small;
border: thick;
border-color: black;
}
.customDivRightTopRow {
min-height: calc(100% - 450px);
padding-bottom: 2px;
font-size: small;
border: thick;
border-color: black;
}
.customDivLeft {
min-height: calc(100% - 650px);
font-size: small;
border: thick;
border-color: black;
background-color: cornsilk;
}
.customDivMiddle {
min-height: calc(100% - 650px);
text-align: center;
font-size: small;
border: thick;
border-color: black;
}
.customDivRight {
min-height: calc(100% - 650px);
text-align: center;
font-size: small;
border: thick;
border-color: black;
background-color: cornsilk;
}
.customDivBottom {
min-height: 30px;
margin-top: 200px;
text-align: center;
font-size: small;
border: thick;
border-color: black;
}
.footer {
text-align: center;
min-height: 50px;
}
.vcenter {
display: block;
vertical-align: middle;
float: right;
}
.customDivContentPage {
padding-top: 30px;
}
.row.no-gutter {
padding-top: 0;
padding-left: 0;
}
.row.no-gutter [class*='col-']:not(:first-child),
.row.no-gutter [class*='col-']:not(:last-child) {
padding-right: 0;
padding-left: 0;
padding-top: 0;
}
.menuitem {
text-align: center;
}
.pclass {
padding: 2px 2px 2px 2px;
text-align: justify;
margin: 2px 2px 2px 2px;
}
body, html {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
My MasterPage Code
<body>
<form id="form1" runat="server">
<div>
<div class="container-fluid">
<div class="row no-gutter ">
<div class="col-md-9">
<div class="customDivTopRowRight">
<h2>This is header</h2>
</div>
</div>
<div class="col-md-1">
<div class="customDivTopRow">
</div>
</div>
<div class="col-md-2">
<div class="customDivTopRowRight"><
<asp:HyperLink ID="HyperLink1" runat="server" ToolTip="Click profile"/>
<%--<asp:Label ID ="lblUsername" runat="server" Font-Bold="True"/>--%>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row" id="menurow">
<div class="col-md-12">
<div class="customDivMenuRow" style="vertical-align: middle;">
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row no-gutter">
<div class="col-md-2">
<div class="customDivLeft">
<div class="list-group menuitem">
<div>
<br/>
<span class="h4">Quick Links</span>
</div>
<br />
Home
</div>
</div>
</div>
<div class="col-md-8">
<div class="customDivMiddle">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</div>
<div class="col-md-2">
<div class="customDivRight">
<div class="list-group menuitem">
<div>
<br />
<span class="h4">Other Menu</span>
</div>
<br />
<a href="#" class="list-group-item list-group-item-info"><span
class="glyphicon glyphicon-flag"></span>Office details</a>
Our docs
<a href="#" class="list-group-item list-group-item-info"><span
class="glyphicon glyphicon-ok-circle"></span>Your voice</a>
<div>
<br />
<span class="h4">His Menu</span>
</div>
<br />
Sports
Education
Extraa
<div>
<br />
<span class="h4">Her Menu</span>
</div>
<br/>
Beauty tips
Home
</div>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="customDivBottom">
</div>
</div>
</div>
</div>
</div>
</form>
</body>
The problem is around 1st row having 3 columns (9-1-2). As can be seen in image it is adding some padding, not able to view on browser in developer mode. I am new to Bootstrap and even at designing.
This question already has answers here:
Add rounded borders to selected corners of an element
(2 answers)
Closed 5 years ago.
I have created a broken border effect but I do not want the sharp look on the end of the border I would like it boxed off. I have messed with border-radius and everything i can think of but cant think of anything. Any input would be much appreciated.
I would like for it to look like this:
.container{padding-top: 40px;}
a h3{margin-top:0!important;}
.col-sm-15{
width: 18%;
margin:1%;
height: 4em;
float:left;
position:relative;
}
.col-sm-15 .wrap:before{
content: '';
position: absolute;
width: 50%;
height: calc(100% - 10px);
bottom: 0;
left: 0;
border: 10px solid transparent;
border-bottom-color: #330099;
border-left-color: #330099;
}
.col-sm-15 .wrap:after{
content: '';
position: absolute;
width: 50%;
height: calc(100% - 10px);
top: 0;
right: 0;
border: 10px solid transparent;
border-top-color: #330099;
border-right-color:#330099;
}
a h3{
font-size: 20px;
color: #000000;
padding: 10px;
margin-top: 3.2em;
}
a:hover{text-decoration: none;}
a:hover h3{color: #330099;}
<section id="funnnels">
<div class="container">
<div class="row padd">
<div class="col-sm-15 text-center">
<a href="#">
<div class="wrap">
<h3>Option 1</h3>
</div>
</a>
<div class="clearfix"></div>
</div>
<div class="col-sm-15 text-center">
<a href="#">
<div class="wrap">
<h3>option 2</h3>
</div>
</a>
<div class="clearfix"></div>
</div>
<div class="col-sm-15 text-center">
<a href="#">
<div class="wrap">
<h3>option 3</h3>
</div>
</a>
<div class="clearfix"></div>
</div>
<div class="col-sm-15 text-center">
<a href="#">
<div class="wrap">
<h3>option 4</h3>
</div>
</a>
<div class="clearfix"></div>
</div>
<div class="col-sm-15 text-center">
<a href="#">
<div class="wrap">
<h3>option 5</h3>
</div>
</a>
<div class="clearfix"></div>
</div>
</div>
</div>
</section>
Do like this instead and the border doesn't get a sharp end
border-bottom: 10px solid #330099;
border-left: 10px solid #330099;
I also reduced the height a little more than the set 10px, to 30px (height: calc(100% - 30px);)
Stack snippet
.container {
padding-top: 40px;
}
a h3 {
margin-top: 0!important;
}
.col-sm-15 {
width: 18%;
margin: 1%;
height: 4em;
float: left;
position: relative;
}
.col-sm-15 .wrap:before {
content: '';
position: absolute;
width: 50%;
height: calc(100% - 30px);
bottom: 0;
left: 0;
border-bottom: 10px solid #330099;
border-left: 10px solid #330099;
}
.col-sm-15 .wrap:after {
content: '';
position: absolute;
width: 50%;
height: calc(100% - 30px);
top: 0;
right: 0;
border-top: 10px solid #330099;
border-right: 10px solid #330099;
}
a h3 {
font-size: 20px;
color: #000000;
padding: 10px;
margin-top: 3.2em;
}
a:hover {
text-decoration: none;
}
a:hover h3 {
color: #330099;
}
<section id="funnnels">
<div class="container">
<div class="row padd">
<div class="col-sm-15 text-center">
<a href="#">
<div class="wrap">
<h3>Option 1</h3>
</div>
</a>
<div class="clearfix"></div>
</div>
<div class="col-sm-15 text-center">
<a href="#">
<div class="wrap">
<h3>option 2</h3>
</div>
</a>
<div class="clearfix"></div>
</div>
<div class="col-sm-15 text-center">
<a href="#">
<div class="wrap">
<h3>option 3</h3>
</div>
</a>
<div class="clearfix"></div>
</div>
<div class="col-sm-15 text-center">
<a href="#">
<div class="wrap">
<h3>option 4</h3>
</div>
</a>
<div class="clearfix"></div>
</div>
<div class="col-sm-15 text-center">
<a href="#">
<div class="wrap">
<h3>option 5</h3>
</div>
</a>
<div class="clearfix"></div>
</div>
</div>
</div>
</section>
I have a problem with my css and html code.
When I open the page normally it works, but when I change screen resolution, the .content-body class (the light blue with diagonal) does not fulfill the entire page width (there is that pink column). Could anyone help? Thank you.
That's the whole css code:
html {
width: 100%;
}
body {
background-color: #ffe1d9;
width: inherit;
overflow-x: hidden;
}
.top-header {
width: 100%;
}
.container {
width: 100% - 25px;
}
.content {
background-color: #ffe1d9;
width: 100%;
}
.header {
padding: 40px;
width: 50%;
float: left;
}
.presentation-header {
//position: relative;
////padding-top: 0;
//top: 150px;
//z-index: 999;
max-width: 1000px;
//margin: 0 auto;
}
li.header-menu-item {
padding: 15px;
font-size: 16px;
a {
color: #666167;
text-decoration: none;
&:hover {
color: #111111;
font-weight: 400;
box-shadow: #111111;
}
span {
&:hover {
border-bottom: 1px solid #60629d;
}
}
}
}
.active {
border-bottom: 1px solid #60629d;
}
.header-menu {
display: block;
padding-top: 70px;
text-align: right;
}
#slogan {
width: 50%;
float: left;
}
#slogan-img {
width: 50%;
float: left;
}
#button {
background: #1d1c24;
padding: 15.5px 51px;
-webkit-border-radius: 40px;
-moz-border-radius: 40px;
border-radius: 40px;
color: white;
font-size: 12px;
font-family: SansSerif, Serif;
text-decoration: none;
vertical-align: middle;
font-weight: bold;
}
#button:active {
background: #000000;
}
#sign-in-button, #submit {
background: white;
}
#sign-in-button, #next {
padding: 20px 20px 20px 20px;
-webkit-border-radius: 40px;
-moz-border-radius: 40px;
border-radius: 40px;
color: black;
font-size: 14px;
font-family: Georgia, Serif;
text-decoration: none;
vertical-align: middle;
text-align: left;
}
#next {
background: #ffe1d9;
margin-left: 150px;
width: 50%;
}
#submit {
background-color: #ffe1d9;
padding: 15px 20px;
-webkit-border-radius: 40px;
-moz-border-radius: 40px;
border-radius: 40px;
color: black;
font-size: 14px;
font-family: Georgia, Serif;
text-decoration: none;
vertical-align: middle;
text-align: left;
}
#sign-in-button:active, #submit:active {
background: #ffe6e3;
}
select {
padding: 15px 50px;
-webkit-border-radius: 40px;
-moz-border-radius: 40px;
border-radius: 40px;
border: 0 solid;
color: black;
font-size: 14px;
font-family: Georgia, Serif;
text-decoration: none;
vertical-align: middle;
text-align: left;
background: url(http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png) no-repeat right #e9f3f5;
background-position: 100%-15px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
h2 {
font-family: 'Montserrat';
font-weight: 700;
font-size: 7.0rem;
line-height: 100%;
letter-spacing: -.5rem;
margin: initial;
}
//.padding {
//padding-top: 30px;
//padding-bottom: 50px;
//}
/*Line bellow Features*/
.span-decoration {
border-bottom: 5px solid #caafaf;
width: 30px;
margin: 10px 0 20px 0;
}
/*Draws a diagonal line in a box*/
.diagonal-line-box {
position: relative;
width: 100%;
height: 200px;
clear: both;
//background: red; /* For browsers that do not support gradients */
background: -webkit-linear-gradient( left top, #ffe1d9 49.75%, #989cdb 50.25%); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(bottom right, #ffe1d9 49.75%, #989cdb 50.25%); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(bottom right, #ffe1d9 49.75%, #989cdb 50.25%); /* For Firefox 3.6 to 15 */
background: linear-gradient(to bottom left, #ffe1d9 49.75%, #989cdb 50.25%); /* Standard syntax */
}
/*Draws a diagonal line in a box*/
.second_diagonal-line-box {
position: relative;
width: 100%;
height: 300px;
//top: -150px;
background: red; /* For browsers that do not support gradients */
background: -webkit-linear-gradient( right top, #989cdb 49.75%, #60629d 50.25%); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(bottom left, #989cdb 49.75%, #60629d 50.25%); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(bottom left, #989cdb 49.75%, #60629d 50.25%); /* For Firefox 3.6 to 15 */
background: linear-gradient(to bottom right, #989cdb 49.75%, #60629d 50.25%); /* Standard syntax */
}
//html, .content-body {
// width: 100%;
//}
.content-body {
position: relative;
width: 100%;
background-color: #989cdb;
margin: 0 auto;
//left: 50px;
}
#slogan-image {
}
section {
.cashflow {
width: 70%;
float: left;
//margin: -60px -80px;
margin-top: -60px;
margin-left: -90px;
//margin-right: -150px;
}
.cashflow-text {
width: 30%;
float: left;
}
.cashflow, .cashflow-text {display: inline-block;}
}
section {
.budget {
width: 70%;
float: left;
margin-left: 0px;
margin-right: -100px;
margin-top: -60px;
}
.budget-text {
width: 35%;
float: left;
}
.budget, .budget-text {
display: inline-block;
}
}
.wrapper {
background: #282731;
border-radius: 1px;
box-sizing: border-box;
-webkit-box-shadow: 22px 17px 58px 3px rgba(54, 45, 105, 0.59);
-moz-box-shadow: 22px 17px 58px 3px rgba(54, 45, 105, 0.59);
box-shadow: 22px 17px 58px 3px rgba(54, 45, 105, 0.59);
margin: auto;
position: relative;
float: left;
max-width: 800px;
width: 100%;
top: -280px;
}
.wrapper.box {
padding: 80px;
form {
padding-top: 50px;
}
}
.wrapper-payment {
background: -webkit-linear-gradient( 90deg, #ffffff 50%, #2e2935 50%); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(90deg, #ffffff 50%, #2e2935 50%); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(90deg, #ffffff 50%, #2e2935 50%); /* For Firefox 3.6 to 15 */
background: linear-gradient(90deg, #ffffff 50%, #2e2935 50%); /* Standard syntax */
}
#-moz-document url-prefix() {
.wrapper.box {
margin-left: 0px;
}
#button {
font-size: 11px;
}
}
.wrapper-image {
background: #282731;
border-radius: 1px;
box-sizing: border-box;
-webkit-box-shadow: 22px 17px 58px 3px rgba(89,51,51,0.59);
-moz-box-shadow: 22px 17px 58px 3px rgba(89,51,51,0.59);
//box-shadow: 22px 17px 58px 3px rgba(89,51,51,0.59);
//margin: auto;
}
.title{
font-family: 'Montserrat';
font-weight: 700;
font-size: 5.0rem;
line-height: 100%;
letter-spacing: -.5rem;
//margin: initial;
}
.title-body {
font-size: 2rem;
color: white;
}
//Form styling
input, label{
display: block;
}
label {
color: #7f7e83;
}
input {
width: 100%;
padding: 4px 0;
margin: 5px 0 15px 0;
-webkit-border-radius: 40px;
-moz-border-radius: 40px;
border-radius: 40px;
border: 2px solid #83828a;
background-color: #282731;
color: white;
padding-left: 10px;
font-family: Georgia, Serif;
font-weight: bold;
}
.first-part-form {
width: 100%;
}
.form-first-left {
width: 46%;
float: left;
margin-right: 20px;
}
.form-first-right {
width: 46%;
float: right;
}
//End form styling
.post-content {
position: relative;
width: 100%;
//height: 750px;
background-color: #60629d;
//top: -150px;
//z-index: -10;
}
#post-content-div {
//height: 100px;
}
#next {
background-color: #ffe1d9;
color: #282731;
}
#login-or-company {
border: none;
border-radius: 0;
border-bottom: 1px solid white;
padding-left: 0;
}
#login-url {
color: white;
font-size: 16px;
//float: left;
padding-top: 18px;
padding-left: 0;
}
#login-url, #login-or-company {
display: block;
}
.footer {
position: relative;
display: block;
width: 100%;
background: #60629d;
padding-bottom: 50px;
margin: 0 auto;
img {
margin: 0 auto;
}
}
.halfwidth {
display: inline-block;
width:50%;
position: relative;
}
.second-part-form {
label {
color: #ffffff;
}
h3{
color: #ffffff;
}
}
And this is the html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Join Now ‐ Sweety & Co. Pro</title>
<link href='//fonts.googleapis.com/css?family=Source+Sans+Pro:400,300,600,700,900' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="/static/bower_components/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="/static/css/base.css">
<script src="/static/bower_components/jquery/dist/jquery.min.js"></script>
<script src="/static/js/base.js"></script>
</head>
<body>
<div class="top-header">
<div class="row">
<div class="header col-md-6">
<img id="header-logo" src="/static/img/logo_escuro.svg" width="314" height="81">
</div>
<div class="col-md-6" id="div-header-menu">
<ul class="header-menu list-inline " id="nav">
<li class="header-menu-item"><a class="" href="/"><span>Home</span></a></li>
<li class="header-menu-item"><span>Features</span> </li>
<li class="header-menu-item"><span>Pricing</span></li>
<li class="header-menu-item"><span>Help</span> </li>
<li class="header-menu-item"><a href="#" type="button" role="button"
id="button" class="button">JOIN NOW</a> </li>
<li class="header-menu-item"><span>Sign in</span></li>
</ul>
</div>
</div>
</div>
<div class="container ">
<div>
<div class="container">
<div class="row presentation-header">
<div id="slogan" class="">
<h2>Because</h2>
<h2>you can't</h2>
<h2>create</h2>
<h2>money</h2>
<div style="margin: 50px"></div>
<div class="">
<a id="sign-in-button" href="/auth/login" role="button" type="button">Sign in ></a>
</div>
<div style="clear: both"></div>
</div>
<div id="slogan-img" class="">
<img id="slogan-image" src="/static/img/mac2.png">
<p style="margin-bottom: 50px"></p>
</div>
</div>
</div>
</div>
</div>
<div class="container diagonal-line-box">
<div class="container">
<div class="row">
</div>
</div>
</div>
<div class="content-body">
<div class="container">
<div class="row">
<section class="">
<div class="container">
<section class="row ">
<h3 class="col-md-5">Features<p class="span-decoration"></p></h3>
</section>
<h4>Get to know SweetyPro & Co. Features</h4>
<section>
<img class="cashflow" src="/static/img/cashflow_144.png">
<div class="cashflow-text">
<h1 class="title ">Cashflow</h1>
<p class="title-body">Organize your expenses and incomes in a platform easy to use.</p>
<p class="title-body">Enough of losing control of the situation, your payments and outputs are always on time.</p>
</div>
</section>
<div style="clear: both;"></div>
<section>
<div class="budget-text">
<h1 class="title " style="text-align: right">Budgets</h1>
<p class="title-body" style="text-align: right">
Can you imagine creating budgets with just a few steps? Yes! It's possible.
</p>
<p class="title-body" style="text-align: right">
Sweety & Co. Pro helps you figure out how much to charge and making budgets turned into novice task.
</p>
</div>
<img class="budget" src="/static/img/budget_144.png">
</section>
<div style="clear: both;"></div>
<section class="row">
<div class="col-md-12">
<h1 class="title">Timeline</h1>
<p class="title-body">Time is money. Thus organize yourself and your time and don't stop until you earn money.</p>
</div>
<img class="col-md-12" src="/static/img/timeline_144.png">
</section>
<section class="row padding">
<div class="col-md-12">
<h1 class="title" style="text-align: center">Fastcreate</h1>
<p class="title-body" style="text-align: center">Running out of time? With a simple mouse click, you get access to foremost features of
Sweety & Co. Pro. in any gadget at any time.</p>
</div>
<img class="col-md-12" src="/static/img/fastcreate_144.png">
</section>
<section class="row">
<h3 class="col-md-5">Join now<p class="span-decoration"></p></h3>
</section>
<h4>The Status of Liberty Enlightening the World was a gift of the people of France...</h4>
</div>
</section>
</div>
</div>
</div>
<div class="container second_diagonal-line-box">
<div>
<div class="container">
<div class="row">
<section class="col-md-12">
</section>
</div>
</div>
</div>
</div>
<div class="container post-content">
<div class="container">
<section class="col-md-offset-1">
<div id="post-content-div" class="container">
<div id="wrapper" class=" wrapper box ">
<div class="first-part-form">
<h1 class="form-first-left" style="color: #FFFFFF;">Get your time and money on track</h1>
<img class="" style="padding-top: 10px; padding-left: 25px" src="/static/img/price.png">
</div>
<div style="clear: left"></div>
<div class="second-part col-md-6 col-sm-12">
<h3>Payment method</h3>
<p class="span-decoration"></p>
<p class="">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<select >
<option>Credit Card</option>
<option>Paypal</option>
</select>
</div>
<form method="post" role="form">
<div style="display:none;"><input id="csrf_token" name="csrf_token" type="hidden" value="1471534484##5376f5b3fac93b1e7f29c731c668293a456aca13"></div>
<div class="first-part-form">
<div class="form-first-left">
<label for="name">First Name</label>
<input id="name" name="first_name" placeholder="John" required type="text" value="">
</div>
<div class="form-first-right">
<label for="surname">Last Name</label>
<input id="surname" name="last_name" placeholder="Smith" required type="text" value="">
</div>
<div style="clear: both"></div>
<div class="form-first-left">
<label for="login-or-company" id="login-or-company-label">Login (company's name or yours)</label>
<input class="col-md-6" id="login-or-company" name="username" required type="text" value="">
<p id="login-url" class="col-md-2">.sweetyand.co</p>
</div>
<div class="form-first-right">
<label for="password">Password (min. 6 characters)</label>
<input id="password" name="password" placeholder="******" required type="password" value="">
</div>
<div style="clear: both"></div>
<div class="form-first-left">
<label for="email">Email</label>
<input id="email" name="email" placeholder="john#example.com" required type="email" value="">
</div>
<div class="form-first-right">
<label for="reemail">Re-email</label>
<input id="reemail" name="re_email" placeholder="john#example.com" required type="email" value="">
</div>
</div>
<div class="second-part-form row">
<div class="col-md-6">
<div class="row">
<label class="col-md-offset-1" style="margin-top: -30px">You chose</label>
<h3 class="col-md-offset-1" id="dropdown-option">Credit Card</h3>
</div>
<div class="row">
<label class="col-md-offset-1" for="credit-card-name">Name as in credit card</label>
<input class="col-md-12 col-md-offset-1" id="credit-card-name" name="credit_card_name" required type="text" value="">
</div>
<div class="row">
<label class="col-md-offset-1" for="credit-card-number">Credit card number</label>
<input class="col-md-9 col-md-offset-1" id="credit-card-number" name="credit_card_number" required type="text" value="">
</div>
<div class="row">
<div class="row">
<label class="col-md-4 col-md-offset-1" for="validate">Validate</label>
<label class="col-md-4 col-md-offset-3" for="cvc">CVC/CW</label>
</div>
<input class="col-md-3 col-md-offset-1" id="validate" name="month_card" placeholder="MM" required type="text" value="">
<input class="col-md-3" id="year" name="year_card" placeholder="YYYY" required type="text" value="">
<input class="col-md-4 col-md-offset-1" id="cvc" name="cvc" required type="text" value="">
</div>
<div class="row">
<p class="col-md-1"></p>
<input class="col-md-1 col-md-offset-2" id="accept_terms" name="accept_terms" required type="checkbox" value="y">
<p style="margin-left: 10px; color: white">I accept the terms of SweetyPro.</p>
</div>
<div class="row">
<input class="col-md-6 col-md-offset-1" id="submit" name="submit" type="submit" value="Next >">
</div>
</div>
</div>
</form>
<div class="form-first-left">
<img id="logo-form" src="/static/img/logo.svg" class="" width="200" height="71">
</div>
<div class="form-first-right">
<input id="next" class="" type="button" value="Next >">
</div>
<div class="row" id="flash">
<div class="col-md-offset-6">
</div>
</div>
<div style="clear: both;"></div>
</div>
</div>
</section>
</div>
</div>
<div class="footer container">
<div class="container">
<img id="foot-logo" class="col-md-12" src="/static/img/sco.svg" width="129" height="79">
</div>
</div>
</body>
</html>
This is a simple topic:
#media (max-width: 800px) {
/* CSS that should be displayed if width is equal to or less than 800px goes here */
}