We Keep Coding

How do I make this checkbox be before my h3 element?

I have this HTML and CSS markup:
body {
background-color: #f5f5f5;
}
._contain_items {
display: block;
width: 1000px;
height: fit-content;
border: 1px solid rgba(0, 0, 0, .12);
background-color: #ffffff;
}
._inline_task {
display: flex;
flex-direction: row;
}
._when {
margin-top: 0% !important;
margin-left: auto;
margin-bottom: 0% !important;
align-self: flex-end;
}
._lightweighted {
margin-top: 0% !important;
font-size: 16px;
font-weight: 500;
color: #7f8ca1;
}
._title_task {
margin-top: 0% !important;
margin-bottom: 0% !important;
}
.checkbox-container {
width: 50px;
height: 28px;
display: flex;
align-items: center;
margin-right: 10px;
position: relative;
}
.checkbox-container label {
background-color: #fff;
border: 1px solid #ccc;
border-radius: 50%;
cursor: pointer;
height: 28px;
left: 0;
position: relative;
top: 0;
width: 28px;
}
.checkbox-container label:after {
border: 2px solid #fff;
border-top: none;
border-right: none;
content: "";
height: 6px;
left: 7px;
opacity: 0;
position: relative;
top: 8px;
transform: rotate(-45deg);
width: 12px;
}
.checkbox-container input[type="checkbox"] {
visibility: hidden;
}
.checkbox-container input[type="checkbox"]:checked+label {
background-color: #66bb6a;
border-color: #66bb6a;
}
.checkbox-container input[type="checkbox"]:checked+label:after {
opacity: 1;
}
<div class="_contain_items">
<h3> Employee Tasks </h3>
<hr style="border: none;height: 1px;background-color: #333;">
<div class="_inline_task">
<div class="checkbox-container">
<input type="checkbox" id="checkbox" />
<label for="checkbox"></label>
</div>
<h3 class="_title_task"> Title of the task </h3>
<h3 class="_when"> Tomorrow </h3>
</div>
<p class="_lightweighted"> Housekeeping </p>
</div>
</body>
The problem that I'm facing is at the checkbox. I want to make a circle checkbox with this ✔️ sign. When position is absolute it works as intended but it is not before h3(Title of the task). When I change position at relative the circle appears at the right place but the sign its not there. How do I make it appear before the h3?

There are some accessibility issues, so here are my recommendations:
Avoiding too many h3 that could be replaced by a span or p.
Put the text related to the checkbox inside the label. Also is not a good practice to put a heading inside the label
Use rem instead px for font-size, due to px won't resize with the user preferences.
So here is your code with my considerations
<div class="checkbox">
<input type="checkbox" id="checkbox" checked/>
<label for="checkbox">
<span class="title-task">Title of the task</span>
<span class="when">Tomorrow</span>
</label>
</div>
and the checkbox css with this:
.checkbox>label {
position: relative; /* Create a positioning context */
/* ... */
}
.checkbox>label:before {
/* checkbox styling */
/* ... */
}
.checkbox>input {
/* hide the checkbox */
border: 0;
clip: rect(1px, 1px, 1px, 1px);
height: 1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
.checkbox>input:checked+label:before {
/* checkbox checked styling */
/* ... */
}
.checkbox>input+label:after {
/* checkbox checked icon */
position: absolute; /* Position the checkmark */
/* ... */
}
.checkbox>input:checked+label:after {
/* ... */
}
Here I left you a full-functioning snippet with your modified code
.contain-items {
background-color: #fff;
display: block;
height: fit-content;
width: 100%;
}
.divider {
background-color: #333;
border: none;
height: 1px;
}
.inline-task {
display: flex;
/* row by default */
flex-wrap: wrap;
}
.checkbox {
width: 100%;
}
.checkbox>label {
align-items: center;
display: flex;
position: relative;
}
.checkbox>label:before {
background-color: #fff;
border: 1px solid #ccc;
border-radius: 50%;
content: '';
cursor: pointer;
display: inline-block;
height: 1.75rem;
margin-right: 0.5rem;
width: 1.75rem;
}
.checkbox>input {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
height: 1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
.checkbox>input:checked+label:before {
background-color: #66bb6a;
border-color: #66bb6a;
}
.checkbox>input+label:after {
border: 2px solid #fff;
border-right: none;
border-top: none;
content: '';
height: 6px;
left: 7px;
opacity: 0;
position: absolute;
top: 8px;
transform: rotate(-45deg);
width: 12px;
}
.checkbox>input:checked+label:after {
opacity: 1;
}
.lightweighted {
color: #7f8ca1;
font-size: 1rem;
font-weight: 500;
margin: 0;
}
<body>
<div class="contain-items">
<h3>Employee Tasks</h3>
<hr class="divider" />
<article class="inline-task">
<div class="checkbox">
<input type="checkbox" id="checkbox" checked/>
<label for="checkbox">
<span class="title-task">Title of the task</span>
<span class="when">Tomorrow</span>
</label>
</div>
<p class="lightweighted">Housekeeping</p>
</article>
</div>
</body>

How can I position my autocomplete box under the search box?

Hello I'm trying to create a custom suggestion box for search box. The parent div is flex box and suggestion box is positioned absolute. but the top and left property of css. It is taking of global page and not parent.
.header ul {
list-style-type: none;
overflow: hidden;
display: flex;
width: 100%;
justify-content: flex-end;
margin-right: 25px;
}
.header li {
float: right;
}
.header li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.header{
display: flex;
background-color: #333;
}
.suggesetionbox {
position: absolute;
top: 50px;
width: 150px;
background-color: #fff;
border: 1px solid;
}
.SearchContainer {
width: 100%;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
}
input{
border-radius: 10px;
}
<div class="header">
<h1>logo</h1>
<ul>
<li>
<div class="SearchContainer">
<input placeholder="Search" class="search" type="text">
<div class="suggesetionbox">
<p>item1</p><p>item2</p>
</div>
</div>
</li>
<li>
Home
</li>
<li> Login</li>
</ul>
</div>
You can see in css "suggesetionbox" the top property is targeting complete page not parent div.
Can someone suggest how can I append the div correctly under search box.
Thanks

EDIT: First, add position: relative to your .SearchContainer. This makes sure that the dropdown is set on the searchcontainer and not on the whole page. Then, the overflow: hidden needs to be removed from .header ul in order to see the whole dropdown.
Remove the display flex on your suggestionbox class. You can fix the alignment of the options in your topbar with the flex box in your .header ul
.header ul {
list-style-type: none;
display: flex;
width: 100%;
justify-content: flex-end;
margin-right: 25px;
align-items: center;
}
.header li {
float: right;
}
.header li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.header{
display: flex;
background-color: #333;
}
.suggesetionbox {
position: absolute;
width: 150px;
background-color: #fff;
border: 1px solid;
}
.SearchContainer {
width: 100%;
position: relative;
}
<div class="header">
<h1>logo</h1>
<ul>
<li>
<div class="SearchContainer">
<input placeholder="Search" class="search" type="text">
<div class="suggesetionbox">
<p>item1</p><p>item2</p>
</div>
</div>
</li>
<li>
Home
</li>
<li> Login</li>
</ul>
</div>

.SearchContainer {
position: relative;
...
}

.suggesetionbox {
position: absolute;
border: 1px solid #d4d4d4;
border-bottom: none;
border-top: none;
z-index: 99;
height: 100%;
/*position the autocomplete items to be the same width as the container:*/
top: 100%;
left: 0;
right: 0;
}
.SearchContainer {
position: relative;
display: inline-block;
}

HTML/CSS Hamburger Menu - where to place the div for hamburger menu?

I have coded in the header for my school project, and now trying to add a hamburger menu for tablets & mobile versions. I wish to have the hamburger menu on the right side of the screen and the logo on the left side like it already is, the rest of the information like the nav, opening hours, phone number, etc will all be inside the hamburger menu.
The thing I am sitting with is that, I don't really know where to place the div for the hamburger menu. I have built the header for pc screen-size but it all does mess up when I drag the screen to the size of the mobile screen. After watching tutorials and reading about the hamburger menu, I am still sitting here not knowing where to place the div for the hamburger menu and have everything except the logo inside the hamburger menu for tablets and mobile.
Added the code for a header in the snippet, it is showing up weird in the snippet. Probably because I have written a lot wrong, but it still works though:
So this is the full HTML and CSS code for the header:
let popup = document.getElementById("Contact-popup");
popup.addEventListener("click", () => {
document.getElementById("contact_popup_page").style.display = "block";
});
let close = document.getElementById("close");
/** HEADER **/
body {
margin: 0 10%;
font-size: 12px;
}
a {
text-decoration: none;
color: #707070;
}
header {
box-shadow: 2px 2px 2px 3px rgb(0, 0, 0, 0.1);
position: fixed;
width: 80%;
background-color: #fff;
z-index: 100;
margin-top: 0;
}
.header__main {
width: 100%;
display: grid;
grid-template-areas: "box1 box2";
color: #707070;
}
.logo__section {
height: 100px;
grid-area: box1;
margin-left: 2.5%;
width: 40%;
}
.header__main>.logo__section>a>img {
width: 100%;
}
.nav__topRight {
width: 100%;
height: 100px;
grid-area: box2;
color: #000;
flex-direction: column;
margin-top: 0;
align-items: flex-end;
}
.flexbox1 {
margin: 1% 0 3% 0;
}
.nav__top {
display: flex;
justify-content: flex-end;
}
.nav__middle {
display: flex;
justify-content: flex-end;
margin: 5% 3% 0 0;
font-size: 1.8rem;
color: #707070;
}
/** Contact */
input {
outline: none;
border: none;
}
textarea {
outline: none;
border: none;
}
.contact {
font-size: 1.8rem;
color: #707070;
}
.contact__info {
margin-left: 5%;
}
.contact__info>p {
color: #707070;
display: inline;
font-size: 1.8rem;
margin: 0 15px 0 5px;
}
.contact_popup_page {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
display: none;
background-color: rgba(0, 0, 0, 0.5);
z-index: 10;
}
.close,
.closer {
display: flex;
justify-content: right;
position: absolute;
font-size: 50px;
}
textarea:focus,
input:focus {
border-color: #fdb834 !important;
}
input:focus::-webkit-input-placeholder {
color: transparent;
}
input:focus:-moz-placeholder {
color: transparent;
}
input:focus::-moz-placeholder {
color: transparent;
}
input:focus:-ms-input-placeholder {
color: transparent;
}
textarea:focus::-webkit-input-placeholder {
color: transparent;
}
textarea:focus:-moz-placeholder {
color: transparent;
}
textarea:focus::-moz-placeholder {
color: transparent;
}
textarea:focus:-ms-input-placeholder {
color: transparent;
}
input::-webkit-input-placeholder {
color: #707070;
}
input:-moz-placeholder {
color: #707070;
}
input::-moz-placeholder {
color: #707070;
}
input:-ms-input-placeholder {
color: #707070;
}
textarea::-webkit-input-placeholder {
color: #707070;
}
textarea:-moz-placeholder {
color: #707070;
}
textarea::-moz-placeholder {
color: #707070;
}
textarea:-ms-input-placeholder {
color: #707070;
}
label {
display: block;
margin: 0;
}
/*---------------------------------------------*/
button {
outline: none !important;
border: none;
background: transparent;
}
button:hover {
cursor: pointer;
}
/*//////////////////////////////////////////////////////////////////
[ utility ]*/
/*//////////////////////////////////////////////////////////////////
[ Contact ]*/
.container-contact {
width: 100%;
min-height: 300px;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
padding: 5px;
}
.wrap-contact {
width: 500px;
background: #fff;
border-radius: 2px;
padding: 30px 40px 40px 40px;
}
/*==================================================================
[ Form ]*/
.contact-form {
width: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.contact-form-title {
width: 100%;
display: block;
font-family: Raleway-Black;
font-size: 30px;
color: #fdb834;
line-height: 1.2;
text-align: center;
padding-bottom: 45px;
}
/*------------------------------------------------------------------
[ Input ]*/
.wrap-input {
width: 100%;
position: relative;
border: 1px solid #707070;
border-radius: 2px;
margin-bottom: 34px;
}
.rs1.wrap-input {
width: calc((100% - 40px) / 2);
}
.label-input {
font-family: Raleway-SemiBold;
font-size: 13px;
color: #fdb834;
line-height: 1.5;
text-transform: uppercase;
width: 100%;
padding-bottom: 11px;
}
.input {
display: block;
width: 100%;
background: transparent;
font-family: Raleway-SemiBold;
font-size: 18px;
color: #333333;
line-height: 1.2;
padding: 0 25px;
}
input.input {
height: 35px;
}
textarea.input {
min-height: 150px;
padding-top: 19px;
padding-bottom: 15px;
}
/*---------------------------------------------*/
.focus-input {
position: absolute;
display: block;
width: calc(99% + 1px);
height: calc(98%);
top: -1px;
left: 0px;
pointer-events: none;
border: 2px solid;
border-color: #fdb834;
visibility: hidden;
opacity: 0;
-webkit-transition: all 0.4s;
-o-transition: all 0.4s;
-moz-transition: all 0.4s;
transition: all 0.4s;
-webkit-transform: scaleX(1.1) scaleY(1.3);
-moz-transform: scaleX(1.1) scaleY(1.3);
-ms-transform: scaleX(1.1) scaleY(1.3);
-o-transform: scaleX(1.1) scaleY(1.3);
transform: scaleX(1.1) scaleY(1.3);
}
.input:focus+.focus-input {
visibility: visible;
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
/*------------------------------------------------------------------
[ Button ]*/
.container-contact-form-btn {
width: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-top: -4px;
}
.contact-form-btn {
font-family: Raleway-Bold;
font-size: 16px;
color: #fff;
line-height: 1.2;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
justify-content: center;
align-items: center;
padding: 0 20px;
min-width: 150px;
height: 55px;
border-radius: 27px;
background: #fdb834;
position: relative;
z-index: 1;
-webkit-transition: all 0.4s;
-o-transition: all 0.4s;
-moz-transition: all 0.4s;
transition: all 0.4s;
}
.contact-form-btn::before {
content: "";
display: block;
position: absolute;
z-index: -1;
border-radius: 27px;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: #000;
opacity: 1;
-webkit-transition: all 0.4s;
-o-transition: all 0.4s;
-moz-transition: all 0.4s;
transition: all 0.4s;
}
.contact-form-btn:hover:before {
opacity: 0;
}
.cart__link,
.giftcard__link {
margin-right: 40px;
font-size: 1.8rem;
color: #707070;
}
.box3 {
height: 40px;
display: flex;
flex-direction: row;
margin-left: 2%;
}
.nav__bottom {
width: 55%;
justify-content: flex-start;
}
.help {
margin-left: 25px;
margin-right: 10px;
}
.favorite__link,
.help__link {
color: #707070;
}
.fa-user,
.fa-shopping-cart,
.fa-gift,
.fa-heart {
color: #fdb834;
}
.search {
width: 45%;
display: flex;
position: relative;
height: 40px;
justify-content: flex-end;
align-content: flex-end;
margin: 0 2% 0 0;
font-size: 1.8rem;
color: #707070;
}
.search-box {
background: #fff;
height: 10px;
padding: 5px;
border: 1px solid #707070;
border-radius: 2%;
box-shadow: 1px 1px rgb(112, 112, 112, 0.2);
margin-left: 10px;
}
.search-btn {
text-decoration: none;
color: #707070;
font-size: 2rem;
width: 20px;
height: 10px;
background: #fff;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.search-txt {
border: none;
background: none;
outline: none;
float: left;
padding: 0;
font-size: 1.4rem;
transition: 0.4s;
color: #707070;
width: 15rem;
}
::placeholder {
color: rgb(112, 112, 112, 0.7);
font-size: 1.4rem;
}
<header>
<div class="header__main">
<div class="logo__section">
<img src="https://kommunikasjon.ntb.no/data/images/00171/daaffdf6-fb0e-4e74-9b6b-7f973dbfa6a3.png/social" alt="logo" class="logo" />
</div>
<div class="nav__topRight">
<div class="flexbox1">
<div class="nav__top">
Contact us
<div class="contact_popup_page" id="contact_popup_page">
<div class="container-contact">
<div class="wrap-contact">
<form class="contact-form validate-form">
<button class="close" id="close">×</button>
<span class="contact-form-title"> Contact Us </span>
<label class="label-input" for="first-name">Your Name *</label
>
<div class="wrap-input rs1 validate-input">
<input
id="first-name"
class="input"
type="text"
name="first-name"
placeholder="First name"
/>
<span class="focus-input"></span>
</div>
<div class="wrap-input rs1 validate-input">
<input
class="input"
type="text"
name="last-name"
placeholder="Last name"
/>
<span class="focus-input"></span>
</div>
<label class="label-input" for="email"
>Email Address *</label
>
<div class="wrap-input validate-input">
<input
id="email"
class="input"
type="text"
name="email"
placeholder="Eg. example#email.com"
/>
<span class="focus-input"></span>
</div>
<label class="label-input" for="phone"
>Phone Number</label
>
<div class="wrap-input">
<input
id="phone"
class="input"
type="text"
name="phone"
placeholder="Eg. +47 000 00 000"
/>
<span class="focus-input"></span>
</div>
<label class="label-input" for="message">Message *</label>
<div class="wrap-input validate-input">
<textarea id="message" class="input" name="message" placeholder="Please give us the detail here...."></textarea>
<span class="focus-input"></span>
</div>
<div class="container-contact-form-btn" id="contact-submit">
<button class="contact-form-btn">
<span> Submit </span>
</button>
</div>
</form>
</div>
</div>
</div>
<div class="contact__info">
<p>
<i class="fas fa-phone-alt"></i> (+47) 000 00 000
</p>
<p class="opening__p">Mon-Fri (8-20) Sat (9-16)</p>
</div>
</div>
</div>
<div class="flexbox2">
<div class="nav__middle">
<div class="cart">
<a href="#" class="cart__link"><i class="fas fa-shopping-cart"></i>
Cart</a
>
</div>
<div class="giftcard">
<a href="#" class="giftcard__link"
><i class="fas fa-gift"></i>
Gift Card</a
>
</div>
<div class="signin">
<a href="#" class="singin__link"
><i class="fas fa-user"></i>
Sing In</a
>
</div>
</div>
</div>
</div>
</div>
<div class="box3">
<div class="nav__bottom">
<div class="navbar">
Men
</div>
<div class="navbar">
Women
</div>
<div class="navbar">
Junior
</div>
<div class="navbar">
Gears
</div>
<div class="navbar">
Explore
</div>
<div class="navbar">
About
</div>
</div>
<div class="search">
<div class="favorite">
<a href="#" class="favorite__link"><i class="fas fa-heart"></i>
Favorite</a
>
</div>
<div class="help">
<a href="#" class="help__link"
><i class="fas fa-info-circle"></i>
Help</a
>
</div>
<div class="search-box">
<form action="">
<input
class="search-txt"
type="text"
placeholder="Search....."
name="search"
/>
<a class="search-btn" href="#"><i class="fa fa-search"></i></a>
</form>
</div>
</div>
</div>
</header>

Fluid responsive navigation with dropdown

I have designed a navigation system for my project which is built on flexbox like unsplash
Code
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* ===========================
For Main Navigation
=========================== */
.cm-navigation-area {
-webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
overflow: hidden;
transition: all 0.6s ease-in-out;
z-index: 5;
display: block;
position: fixed;
width: 100%;
left: 0;
top: 0;
}
.cm-navigation {
background: #ffffff;
height: 70px;
display: flex;
justify-content: space-between;
}
#media (max-width: 768px) {
.cm-navigation {
margin: 0 -5%;
}
}
.cm-burger-nav {
display: flex;
justify-content: center;
align-items: center;
}
#burger-nav {
fill: #575757;
}
.cm-logo {
display: flex;
justify-content: center;
align-items: center;
}
.cm-logo a img {
width: auto;
height: 50px;
}
#media (max-width: 991px) {
.cm-logo a img {
width: 80px;
height: auto;
}
}
.cm-nav nav {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.cm-nav nav ul {
margin: 0;
padding: 0;
display: flex;
}
.cm-nav nav ul li {
list-style: none;
display: flex;
}
.cm-nav nav ul li:not(:last-child) {
margin-right: 1.8em;
}
#media (max-width: 991px) {
.cm-nav nav ul li:not(:last-child) {
margin-right: 10;
}
}
.cm-nav nav ul li a {
font-size: 0.9em;
text-decoration: none;
display: flex;
justify-content: center;
align-items: center;
color: gray;
font-weight: 300;
}
.cm-nav nav ul li a span {
padding-right: 0.4em;
}
.cm-nav nav ul li a span img {
width: 13px;
height: auto;
}
#media (max-width: 991px) {
.cm-nav nav ul li a span img {
width: 18px;
height: auto;
}
}
#media (max-width: 768px) {
.nav-r-text {
display: none;
}
}
.cm-currency {
font-size: 0.8em;
}
.cm-currency .cm-currency-link span {
margin-right: 0 !important;
}
.cm-currency .cm-currency-link span img {
width: 10px !important;
}
.cm-dots {
margin-right: 2.5em !important;
}
.cm-submit-photo {
margin-right: 48px !important;
}
.cm-submit-photo-link {
transition: all 0.2s ease-in-out;
display: flex;
background: #fff;
border: 1px solid #dddddd;
color: gray !important;
text-decoration: none;
padding: 0 11px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
font-weight: 100 !important;
font-size: 14px;
text-transform: uppercase;
height: 32px;
}
.cm-submit-photo-link:hover {
border: 1px solid #dedede;
color: #dedede;
}
.cm-join-button {
position: relative;
}
.cm-join-button:before {
position: absolute;
top: 0;
left: -24px;
display: inline-block;
width: 1px;
height: 32px;
content: "";
background-color: gray;
}
.cm-join-button-link {
transition: all 0.3s ease-in-out;
display: flex;
background: green;
color: #ffffff !important;
text-decoration: none;
padding: 0 11px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
font-weight: 100 !important;
font-size: 14px;
text-transform: uppercase;
height: 32px;
}
.cm-join-button-link:hover {
background: #004d00;
}
.cm-user-link img {
height: 30px;
width: auto;
}
.cm-cart {
min-height: 30px;
}
#cm-cart-link {
position: relative;
}
#cm-cart-link .cart-img {
width: 16px;
height: auto;
}
#cm-cart-link .cm-cart-badge:after {
position: absolute;
right: -6px;
top: 0;
content: attr(data-count);
font-size: 60%;
width: 16px;
height: 16px;
padding: 0.3em;
border-radius: 50%;
line-height: 1em;
color: white;
background: green;
text-align: center;
min-width: 1.2em;
}
/* ===================================
Navbar Search Integrations
=================================== */
.cm-nav-searchbar {
display: flex;
flex: 1;
align-items: center;
height: 100%;
padding: 0 1em;
}
#media (max-width: 1200px) {
.cm-nav-searchbar {
display: none;
}
}
.cm-nav-searchbar .field-container {
position: relative;
padding: 0;
margin: 0;
border: 0;
width: 100%;
height: 50px;
display: flex;
flex: 1;
justify-content: center;
align-items: center;
}
.cm-nav-searchbar .icons-container {
position: absolute;
top: 12px;
right: 4px;
width: 35px;
height: 35px;
overflow: hidden;
}
.cm-nav-searchbar .icon-search {
position: relative;
top: 5px;
left: 8px;
width: 40%;
height: 40%;
opacity: 1;
border-radius: 50%;
border: 2px solid #bebebe;
transition: opacity 0.25s ease, transform 0.43s cubic-bezier(0.694, 0.048, 0.335, 1);
}
.cm-nav-searchbar .icon-search:after {
content: "";
position: absolute;
bottom: -7px;
right: -2px;
width: 2px;
border-radius: 3px;
transform: rotate(-45deg);
height: 8px;
background-color: #bebebe;
}
.cm-nav-searchbar .search-field {
border: 0;
width: 100%;
height: 100%;
padding: 10px 20px;
background: #f7f7f7;
border-radius: 3px;
transition: all 0.4s ease;
}
.cm-nav-searchbar .search-field:focus {
outline: none;
}
.cm-nav-searchbar .search-field:focus+.icons-container .icon-close {
opacity: 1;
transform: translateX(0);
}
.cm-nav-searchbar .search-field:focus+.icons-container .icon-search {
opacity: 0;
transform: translateX(200%);
}
/* ========================
Mobile Searchbar
======================== */
.cm-nav-searchbars {
display: flex;
flex: 1;
align-items: center;
height: 100%;
margin-top: 70px;
}
#media (min-width: 1200px) {
.cm-nav-searchbars {
display: none;
}
}
.cm-nav-searchbars .field-containers {
position: relative;
padding: 0;
margin: 0;
border: 0;
width: 100%;
height: 50px;
display: flex;
flex: 1;
justify-content: center;
align-items: center;
}
.cm-nav-searchbars .icons-containers {
position: absolute;
top: 12px;
right: 4px;
width: 35px;
height: 35px;
overflow: hidden;
}
.cm-nav-searchbars .icon-searchs {
position: relative;
top: 5px;
left: 8px;
width: 40%;
height: 40%;
opacity: 1;
border-radius: 50%;
border: 2px solid #bebebe;
transition: opacity 0.25s ease, transform 0.43s cubic-bezier(0.694, 0.048, 0.335, 1);
}
.cm-nav-searchbars .icon-searchs:after {
content: "";
position: absolute;
bottom: -7px;
right: -2px;
width: 2px;
border-radius: 3px;
transform: rotate(-45deg);
height: 8px;
background-color: #bebebe;
}
.cm-nav-searchbars .search-fields {
border: 0;
width: 100%;
height: 100%;
padding: 10px 20px;
background: #f7f7f7;
border-radius: 3px;
transition: all 0.4s ease;
}
.cm-nav-searchbars .search-fields:focus {
outline: none;
}
.cm-nav-searchbars .search-fields:focus+.icons-containers .icon-closes {
opacity: 1;
transform: translateX(0);
}
.cm-nav-searchbars .search-fields:focus+.icons-containers .icon-searchs {
opacity: 0;
transform: translateX(200%);
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />
<!--=============================
Main Navigation
=============================-->
<div class="cm-navigation-area">
<div class="cm-navigation px-5-percent">
<!--Off Canvas Mobile Optimize Burger Menu -->
<div class="cm-burger-nav d-flex d-md-none">
<span>
<svg xmlns:xlink="http://www.w3.org/1999/xlink" height="32px" id="burger-nav" style="enable-background:new 0 0 32 32;" version="1.1" viewBox="0 0 32 32" width="50px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><path d="M4,10h24c1.104,0,2-0.896,2-2s-0.896-2-2-2H4C2.896,6,2,6.896,2,8S2.896,10,4,10z M28,14H4c-1.104,0-2,0.896-2,2 s0.896,2,2,2h24c1.104,0,2-0.896,2-2S29.104,14,28,14z M28,22H4c-1.104,0-2,0.896-2,2s0.896,2,2,2h24c1.104,0,2-0.896,2-2 S29.104,22,28,22z"/>
</svg>
</span>
</div>
<!--End Off Canvas Mobile Optimize Burger Menu -->
<div class="cm-logo">
<a class="cm-logo-link" href="">
<img src="https://i.imgur.com/lAMzwZj.png" alt="codesign">
</a>
</div>
<div class="cm-nav-searchbar">
<fieldset class="field-container">
<input type="text" placeholder="Search Photos Here" class="search-field" />
<div class="icons-container">
<div class="icon-search"></div>
</div>
</fieldset>
</div>
<div class="cm-nav mr-md-2">
<nav>
<ul>
<li class="cm-currency">
<a class="cm-currency-link" href="">
<span>BDT</span>
<span><img src="https://i.imgur.com/HSaVJVb.png" alt=""></span>
</a>
</li>
<li class="cm-explore">
<a href="image-category.html">
<span><img src="https://i.imgur.com/NezIKT7.png" alt=""></span>
<span class="nav-r-text">Explore</span>
</a>
</li>
<li class="cm-collection d-none d-md-flex">
<a href="./dashboard/dashboard-images.html">
<span><img width="25px" src="https://i.imgur.com/8amvUJB.png" alt=""></span>
<span class="nav-r-text">Collection</span>
</a>
</li>
<li class="cm-dots d-none d-md-flex">
<a href="">
<img width="25" src="https://i.imgur.com/Yu0uhKs.png" alt="">
</a>
</li>
<li class="cm-cart">
<a id="cm-cart-link" href="javascript:void(0)">
<span class="cm-cart-badge has-badge" data-count="2"></span>
<span><img class="cart-img" src="https://i.imgur.com/XMiXKD4.png" alt=""></span>
</a>
</li>
<li class="cm-user d-flex d-md-none">
<a class="cm-user-link" href="">
<span>
<img width="25" src="https://i.imgur.com/4vD2Hwp.png" alt="">
</span>
<span class="nav-r-text">Login</span>
</a>
</li>
<li class="cm-submit-photo d-none d-md-flex">
<a class="cm-submit-photo-link" href="submit-image.html">
<!--<span>-->
<!--<img src="images/s_photo.svg" alt="">-->
<!--</span>-->
<span> Submit a photo </span>
</a>
</li>
<!--<li class="cm-user">-->
<!--<a class="cm-user-link" href="">-->
<!--<span>-->
<!--<img src="images/user.svg" alt="">-->
<!--</span>-->
<!--<span class="nav-r-text">Login</span>-->
<!--</a>-->
<!--</li>-->
<li class="cm-join-button d-none d-md-flex">
<a class="cm-join-button-link" href="">Login | Signup</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
<div class="cm-nav-searchbars">
<fieldset class="field-containers">
<input type="text" placeholder="Search Photos Here" class="search-fields" />
<div class="icons-containers">
<div class="icon-searchs"></div>
</div>
</fieldset>
</div>
Its look responsive but some how its not align and looks not beautiful on responsive, also I have to need a drop down like unsplash on dot hover or click event.
Thanks in advance

Rotate div without rotating inner section

I want to create this Image style with css. I have created section but I am facing difficulty to rotate it. I want green section straight but when I am rotating main wrapper all things are rotate. but that is wrong.
for reference please check Image
http://prntscr.com/jempp4
Any type of help will be appreciated. Not sure If I have explained my problem is good way.
Thanks in advance.
.banner-bg{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 50%;
display: flex;
display: -webkit-flex;
display: -moz-flex;
display: -o-flex;
transform: rotate(-15deg);
}
.banner-bg .banner-bg-sec{
width: 33.3333%;
position: relative;
}
.bg-green{
background: #528E72;
}
.bg-blue{
background: #4C6CC1;
}
.bg-blue2{
background: #4475D4;
}
.bg-red{
background: #CB431B;
}
.bg-red2{
background: #F54F1D;
}
.bg-inner{
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 15px;
text-align: center;
box-shadow: 0px 4px 1px -2px rgba(0,0,0,0.2);
}
.bg-text{
font-size: 28px;
color: rgba(255,255,255,0.6);
}
.bg-icon{
list-style: none;
display: inline-block;
margin: 0;
padding: 0;
}
.bg-icon li{
display: inline-block;
vertical-align: middle;
}
.bg-icon li a{
text-decoration: none;
display: block;
font-size: 22px;
color: #fff;
padding-right: 20px;
}
<div class="banner-bg">
<div class="banner-bg-sec bg-blue">
<div class="bg-inner bg-text bg-blue2">
<span>HIGH SCHOOLS</span>
</div>
</div>
<div class="banner-bg-sec bg-green"></div>
<div class="banner-bg-sec bg-red">
<div class="bg-inner bg-red2">
<ul class="bg-icon">
<li>
<a href="#">
F
</a>
</li>
<li>
<a href="#">
T
</a>
</li>
<li>
<a href="#">
I
</a>
</li>
</ul>
</div>
</div>
</div>

you can rotate only the title of the column and use clip-path to crop the main container, push the blue one a bit to the bottom and to make the title cover the whole width, widen it a little bit and use overflow-x:hidden for its parent, see the result in this fiddle : https://jsfiddle.net/fyhv9r8h/
#header {
background: url('https://kilianvalkhof.com/wp-content/themes/kvsixteen/static/img/bg2.jpg');
width: 100%;
height: 230px;
position: absolute;
}
.banner-bg {
position: absolute;
top: 100px;
width: 100%;
height: 160px;
display: flex;
display: -webkit-flex;
display: -moz-flex;
display: -o-flex;
clip-path: polygon(0% 38%, 100% 0%, 100% 100%, 0% 100%);
}
.banner-bg .banner-bg-sec {
width: 33.3333%;
position: relative;
overflow-x: hidden;
}
.bg-green {
background: #528E72;
}
.bg-blue {
background: #4C6CC1;
top: 38px;
}
.bg-blue2 {
background: #4475D4;
}
.bg-red {
background: #CB431B;
}
.bg-red2 {
background: #F54F1D;
}
.bg-inner {
position: absolute;
top: 0;
left: -10px;
width: 100%;
padding: 15px;
text-align: center;
box-shadow: 0px 4px 1px -2px rgba(0, 0, 0, 0.2);
transform: rotate(-6deg)
}
.bg-text {
font-size: 28px;
color: rgba(255, 255, 255, 0.6);
}
.bg-icon {
list-style: none;
display: inline-block;
margin: 0;
padding: 0;
}
.bg-icon li {
display: inline-block;
vertical-align: middle;
}
.bg-icon li a {
text-decoration: none;
display: block;
font-size: 22px;
color: #fff;
padding-right: 20px;
}
<div id="header">
</div>
<div class="banner-bg">
<div class="banner-bg-sec bg-blue">
<div class="bg-inner bg-text bg-blue2">
<span>HIGH SCHOOLS</span>
</div>
</div>
<div class="banner-bg-sec bg-green"></div>
<div class="banner-bg-sec bg-red">
<div class="bg-inner bg-red2">
<ul class="bg-icon">
<li>
F
</li>
<li>
T
</li>
<li>
I
</li>
</ul>
</div>
</div>
</div>

Hmm interesting.. maybe have a look at transform:skewY instead of rotate... though you'll have to "unskew" the text or find other way to place it...
.banner-bg{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 50%;
display: flex;
display: -webkit-flex;
display: -moz-flex;
display: -o-flex;
transform: skewY(-15deg);
}
span, ul {
transform: skewY(15deg) rotate(-15deg);
}
.banner-bg .banner-bg-sec{
width: 33.3333%;
position: relative;
}
.bg-green{
background: #528E72;
}
.bg-blue{
background: #4C6CC1;
}
.bg-blue2{
background: #4475D4;
}
.bg-red{
background: #CB431B;
}
.bg-red2{
background: #F54F1D;
}
.bg-inner{
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 15px;
text-align: center;
box-shadow: 0px 4px 1px -2px rgba(0,0,0,0.2);
}
.bg-text{
font-size: 28px;
color: rgba(255,255,255,0.6);
}
.bg-icon{
list-style: none;
display: inline-block;
margin: 0;
padding: 0;
}
.bg-icon li{
display: inline-block;
vertical-align: middle;
}
.bg-icon li a{
text-decoration: none;
display: block;
font-size: 22px;
color: #fff;
padding-right: 20px;
}
<div class="banner-bg">
<div class="banner-bg-sec bg-blue">
<div class="bg-inner bg-text bg-blue2">
<span>HIGH SCHOOLS</span>
</div>
</div>
<div class="banner-bg-sec bg-green"></div>
<div class="banner-bg-sec bg-red">
<div class="bg-inner bg-red2">
<ul class="bg-icon">
<li>
<a href="#">
F
</a>
</li>
<li>
<a href="#">
T
</a>
</li>
<li>
<a href="#">
I
</a>
</li>
</ul>
</div>
</div>
</div>