Try to search your question here, if you can't find : Ask Any Question Now ?

I need help creating 4 columns and underneath it a row with two columns

HomeCategory: stackoverflowI need help creating 4 columns and underneath it a row with two columns
Avatarpragati asked 3 months ago

So, I am trying to recreate this layout https://www.behance.net/gallery/44050271/BREAKFAST-Digital-Agencyhttps://www.behance.net/gallery/57588821/Ekko.

I am trying to create the prices section.

I

have tried a few different things. I know I can get fix this layout by moving it a bit left; however, it breaks on other screens. Is there a way to have the “get in touch” button to perfectly in align with the “order” button on larger screens.

I am currently using bootstrap.

Here is the codepen enter code herehttps://codepen.io/mulk-abdulhadi/pen/ROGKNB?editors=1100

$color-black: #0b0d0c;
$color-grey: grey;
$color-white: #fff;
$color-offwhite: #f6f6f6;
$boxshadow-button: 0 2px 5px rgba(0, 0, 0, 0.2);
$H2: 2.5rem;
@mixin clearfix {
content: "";
clear: both;
display: table;
}
@mixin btn_style {
text-decoration: none;
border-width: 0.1rem;
border-style: solid;
padding: 1rem;
text-transform: uppercase;
}
@mixin hr_tap {
border-bottom: 1rem;
border-color: #f6f6f6;
display: inline-block;
width: 7rem;
vertical-align: middle;
margin-left: 25px;
}
@mixin hr_text {
color: $color-offwhite;
text-transform: uppercase;
margin-top: 3rem;
font-weight: 100;
}
.prices {
color: $color-black;
background: url("../../Images/office.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
padding-bottom: 12rem;
&_tap {
@include hr_text;
float: left;
}
&_hrsmall {
@include hr_tap;
text-transform: uppercase;
color: $color-offwhite;
}
&_white {
color: $color-black;
background-color: $color-offwhite;
text-align: center;
text-transform: uppercase;
position: relative;
top: 5rem;
padding-right: 3rem;
padding-left: 3rem;
padding-top: 3rem;
padding-bottom: 4rem;
}
h3 {
font-size: 2rem;
font-weight: 400;
margin-top: 3rem;
margin-bottom: 1rem;
}
&_from {
font-size: 1rem;
}
&_price {
font-size: 3rem;
margin-top: 2.5rem;
margin-bottom: 2.5rem;
}
a {
@include btn_style;
color: $color-black;
max-width: 100%;
display: inline-block;
width: 15rem;
}
.touch {
text-align: left;
text-transform: none;
font-size: 1rem;
}
}
.btn_order-touch {
font-size: 1.5rem;
display: inline-block;
text-align: center;
}
1 Answers
Best Answer
AvatarMatthias answered 3 months ago
Your Answer

0 + 15 =

Popular Tags

WP Facebook Auto Publish Powered By : XYZScripts.com