Below is my simple menu: I want it to be closed by default when I open on a mobile and if I swap right to left then it should open.
#import url(http://fonts.googleapis.com/css?family=Quicksand:300,400,700);
#import url(http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.min.css);
.accordion {
color: #FFF;
width: 100%;
}
.accordion .section {
width: 100%;
}
.accordion .section input[type='radio'] {
display: none;
}
.accordion .section input[type='radio']:checked + label {
background: #363636;
}
.accordion .section input[type='radio']:checked + label:before {
content: " ";
position: absolute;
border-left: 3px solid #21CCFC;
height: 100%;
left: 0;
}
.accordion .section input[type='radio']:checked ~ .content {
max-height: 300px;
opacity: 1;
z-index: 10;
overflow-y: auto;
}
.accordion .section label {
position: relative;
cursor: pointer;
padding: 10px 20px;
display: table;
background: #222;
width: 100%;
-webkit-transition: background 0.3s ease-in-out;
-moz-transition: background 0.3s ease-in-out;
-ms-transition: background 0.3s ease-in-out;
transition: background 0.3s ease-in-out;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
.accordion .section label:before {
content: " ";
width: 100%;
position: absolute;
left: 0;
top: 0;
height: 1px;
border-top: 1px solid #363636;
}
.accordion .section label:hover {
background: #363636;
}
.accordion .section label span {
display: table-cell;
vertical-align: middle;
}
.accordion .section:last-of-type {
border-bottom: 1px solid #363636;
}
.accordion .section .content {
max-height: 0;
-webkit-transition: all 0.4s;
-moz-transition: all 0.4s;
-ms-transition: all 0.4s;
transition: all 0.4s;
opacity: 0;
position: relative;
overflow-y: hidden;
}
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
background: #666;
font-family: 'Quicksand', sans-serif;
}
.left-menu {
background: #222;
width: 200px;
position: absolute;
top: 0;
bottom: 0;
}
.accordion {
font-size: 14px;
}
.accordion .section .content {
padding: 0 15px;
}
.accordion .section input[type='radio'] {
display: none;
}
.accordion .section input[type='radio']:checked ~ .content {
padding: 15px;
}
ul {
width: 100%;
padding: 0;
margin: 0;
list-style: none;
}
ul li {
padding: 10px;
}
ul li i {
font-size: 13px;
width: 15px;
margin-right: 15px;
}
ul li:hover {
cursor: pointer;
}
ul li:hover i {
color: #21CCFC;
}
.logo {
padding: 30px 10px;
width: 200px;
text-align: center;
color: #FFF;
font-size: 20px;
}
.logo i {
font-size: 70px;
color: #21CCFC;
}
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Pure CSS Accordion Nav</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="left-menu">
<div class="logo"><i class="fa fa-align-justify"></i>
<div>Pure CSS Accordion Nav</div>
</div>
<div class="accordion">
<div class="section">
<input type="radio" name="accordion-1" id="section-1" checked="checked"/>
<label for="section-1"><span>Messages</span></label>
<div class="content">
<ul>
<li><i class="fa fa-inbox"></i><span>Inbox</span></li>
<li><i class="fa fa-share"></i><span>Sent </span></li>
<li><i class="fa fa-archive"></i><span>Archive</span></li>
</ul>
</div>
</div>
<div class="section">
<input type="radio" name="accordion-1" id="section-2" value="toggle"/>
<label for="section-2"> <span>Usage</span></label>
<div class="content">
<ul>
<li><i class="fa fa-cog"></i><span>System</span></li>
<li><i class="fa fa-group"></i><span>Users </span></li>
<li><i class="fa fa-sitemap"></i><span>Visitation</span></li>
</ul>
</div>
</div>
<div class="section">
<input type="radio" name="accordion-1" id="section-3" value="toggle"/>
<label for="section-3"> <span>Scroller</span></label>
<div class="content">
<ul>
<li><i class="fa fa-coffee"></i><span>Need Coffee</span></li>
<li><i class="fa fa-coffee"></i><span>Need Coffee </span></li>
<li><i class="fa fa-coffee"></i><span>Need Coffee</span></li>
<li><i class="fa fa-coffee"></i><span>Need Coffee</span></li>
<li><i class="fa fa-coffee"></i><span>Need Coffee </span></li>
<li><i class="fa fa-coffee"></i><span>Need Coffee</span></li>
<li><i class="fa fa-coffee"></i><span>Need Coffee</span></li>
<li><i class="fa fa-coffee"></i><span>Need Coffee </span></li>
<li><i class="fa fa-coffee"></i><span>Need Coffee</span></li>
</ul>
</div>
</div>
<div class="section">
<input type="radio" name="accordion-1" id="section-4" value="toggle"/>
<label for="section-4"> <span>Section 4</span></label>
<div class="content"></div>
</div>
</div>
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
I require to make a very very simple pop out menu with no button.
Related
I am trying to do side navigation bar with collapse. so that I have included jquery 3.4.1 and CSS. But When Bootstrap 4 css and Bootstrap js added page turns into white screen. In console there will be no error. After removing bootstrap it is working fine.But bootstrap is essential. So that JS, CSS, JSP has been included for your reference. Please help me in this.
$(document).ready(function(){
$(".hamburger").click(function(){
$(".wrapper").toggleClass("collapse");
});
});
#import url('https://fonts.googleapis.com/css?family=Montserrat:400,600,700&display=swap');
*{
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
box-sizing: border-box;
font-family: 'Montserrat', sans-serif;
}
body{
background: #e1ecf2;
}
.wrapper{
margin: 10px;
}
.wrapper .top_navbar{
width:84%;
height: 60px;
display: flex;
position: fixed;
top: 10px;
transition: all 0.3s ease;
}
.wrapper.collapse .top_navbar{
width: 92.5%;
height: 60px;
display: flex;
position: fixed;
top: 10px;
}
.wrapper .top_navbar .hamburger{
width: 70px;
height: 100%;
background: #33AAAA;
padding: 25px 25px;
/* border-top-left-radius: 20px; */
cursor: pointer;
}
.wrapper . .hamburger div{
width: 35px;
height: 4px;
background: #92a6e2;
margin: 5px 0;
border-radius: 5px;
}
.wrapper .top_navbar .top_menu{
width: 100%;
height: 100%;
background: linear-gradient(to right,#33AAAA,#80C477);
/* border-top-right-radius: 20px; */
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 20px;
box-shadow: 0 1px 1px rgba(0,0,0,0.1);
}
.wrapper .top_navbar .top_menu .logo{
color: white;
font-size: 20px;
font-weight: 700;
letter-spacing: 3px;
}
.wrapper .top_navbar .top_menu ul{
display: flex;
}
.wrapper .top_navbar .top_menu ul li a{
display: block;
margin: 0 10px;
width: 35px;
height: 35px;
line-height: 35px;
text-align: center;
border: 1px solid white;
border-radius: 50%;
color: white;
}
.wrapper .top_navbar .top_menu ul li a:hover{
background: #4360b5;
color: #fff;
}
.wrapper .top_navbar .top_menu ul li a:hover i{
color: #fff;
}
.wrapper .sidebar{
position: fixed;
left: 10px;
background: linear-gradient(#80C477,#33AAAA);;
width: 200px;
height: calc(100% - 20px);
/* border-bottom-left-radius: 20px; */
transition: all 0.3s ease;
margin-top: -60px
}
.wrapper .sidebar ul li a{
display: block;
padding: 20px;
color: #fff;
position: relative;
margin-bottom: 1px;
color: white;
white-space: nowrap;
}
.wrapper .sidebar ul li a:before{
content: "";
position: absolute;
top: 0;
left: 0;
width: 3px;
height: 100%;
background: #92a6e2;
display: none;
}
.wrapper .sidebar ul li a span.icon{
margin-right: 10px;
display: inline-block;
}
.wrapper .sidebar ul li a span.title{
display: inline-block;
}
.wrapper .sidebar ul li a:hover,
.wrapper .sidebar ul li a.active{
background: #4360b5;
color: #fff;
}
.wrapper .sidebar ul li a:hover:before,
.wrapper .sidebar ul li a.active:before{
display: block;
}
.wrapper .main_container{
width: (100% - 200px);
margin-top: 70px;
margin-left: 200px;
padding: 15px;
transition: all 0.3s ease;
}
.wrapper .main_container .item{
background: #fff;
margin-bottom: 10px;
padding: 15px;
font-size: 14px;
line-height: 22px;
}
.wrapper.collapse .sidebar{
width: 70px;
}
.wrapper.collapse .sidebar ul li a{
text-align: center;
}
.wrapper.collapse .sidebar ul li a span.icon{
margin: 0;
}
.wrapper.collapse .sidebar ul li a span.title{
display: none;
}
.wrapper.collapse .main_container{
width: (100% - 70px);
margin-left: 70px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Responsive Side Navigation Bar</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<link rel="stylesheet" href="../css/Side.css">
<script src="../Scripts/fontawsome.js"></script>
<link rel="stylesheet" href="../css/dataTables.min.css">
<script type="text/javascript" src="../Scripts/dataTables.min.js"></script>
</head>
<body>
<div class="wrapper">
<div class="sidebar" >
<ul>
<li>
<li>
<li><a href="#"> <span class="icon"><i
class="fas fa-book"></i></span> <span class="title">Books</span></a></li>
<li><a href="#"> <span class="icon"><i
class="fas fa-file-video"></i></span> <span class="title">Movies</span>
</a></li>
<li><a href="#"> <span class="icon"><i
class="fas fa-volleyball-ball"></i></span> <span class="title">Sports</span>
</a></li>
<li><a href="#" class="active"> <span class="icon"><i
class="fas fa-blog"></i></span> <span class="title">Blogs</span>
</a></li>
<li><a href="#"> <span class="icon"><i
class="fas fa-leaf"></i></span> <span class="title">Nature</span>
</a></li>
</ul>
</div>
<div class="main_container">
<div class="top_navbar" >
<div class="hamburger" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<i class="fas fa-bars"></i>
</div>
<div class="top_menu">
<div class="logo">logo</div>
<ul>
<li> <i class="fas fa-search"></i></li>
<li><a href="#"> <i class="fas fa-bell"></i>
</a></li>
<li><a href="#"> <i class="fas fa-user"></i>
</a></li>
</ul>
</div>
</div>
<div id ="Home">
<jsp:include page="Home.jsp"/>
</div>
</div>
</div>
</body>
</html>
problem comes if the below line added
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
I tried without bootstrap css it is working fine.But the bootstrap css is essential.
Put your scripts in this order and don't forget to put important rules to your css which might be overriding some default bootstrap css
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.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.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="../css/dataTables.min.css">
<script type="text/javascript" src="../Scripts/dataTables.min.js"></script>
<link rel="stylesheet" href="../css/Side.css">
<script src="../Scripts/fontawsome.js"></script>
This question already has an answer here:
toggleClass not working in ajax
(1 answer)
Closed 3 years ago.
I'm having a problem with my jquery, I'm looking to collapse my sidebar on click on the hamburger, but toggleclass seeems to be not working.
Ive seen tutorials where toggleclass works just fine, is this a new issue?
Any help would be appreciated, thanks
* {
margin: 0;
list-style: none;
padding: 0;
text-decoration: none;
box-sizing: border-box;
font-family: default;
}
body {
background: white;
}
.wrapper {
margin: 10px;
}
.wrapper .top_navbar {
width: calc(100% - 20px);
height: 60px;
display: flex;
position: fixed;
top: 10px;
}
.wrapper .top_navbar .hamburger {
width: 70px;
height: 100%;
background: green;
padding: 15px 17px;
border-top-left-radius: 20px;
cursor: pointer;
}
.wrapper .top_navbar .hamburger div {
width: 35px;
height: 4px;
background: black;
margin: 5px 0;
border-radius: 5px;
}
.wrapper .top_navbar .top_menu {
width: calc(100% - 70px);
height: 100%;
background: red;
border-top-right-radius: 20px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 20px;
box-shadow: 0 1px 1px rgba(0,0,0,0.1);
}
.wrapper .top_navbar .top_menu .logo {
color: black;
font-size: 20px;
font-weight: 700;
letter-spacing: 3px;
}
.wrapper .top_navbar .top_menu ul {
display: flex;
}
.wrapper .top_navbar .top_menu ul li a {
display: block;
margin: 0 10px;
width: 35px;
height: 35px;
padding-top: 7px;
line-height: 35px;
border: 1px solid yellow;
text-align: center;
border-radius: 50%;
color: grey;
}
.wrapper .top_navbar .top_menu ul li a:hover {
background-color: blue;
color: white;
}
.wrapper .sidebar {
position: fixed;
top: 70px;
left: 10px;
background: green;
width: 200px;
height: calc(100% - 80px);
border-bottom-left-radius: 20px;
transition: all 0.3s ease;
}
.wrapper .sidebar ul li a {
display: block;
padding: 20px;
position: relative;
margin-bottom: 1px;
color: white;
white-space: nowrap;
}
.wrapper .sidebar ul li a:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 3px;
height: 100%;
background: white;
}
.wrapper .sidebar ul li a span.icon {
margin-right: 10px;
display: inline-block;
}
.wrapper .sidebar ul li a span.title {
display: inline-block;
}
.wrapper .sidebar ul li a:hover,
.wrapper .sidebar ul li a.active {
background: purple;
color: green;
}
.wrapper .sidebar ul li a:hover:before,
.wrapper .sidebar ul li a.active:before {
display: block;
}
.wrapper .main_container {
width: calc(100% - 200px);
margin-top: 70px;
margin-left: 200px;
padding: 15px;
transition: all 0.3s ease;
}
.wrapper .main_container .item {
background: #fff;
margin-bottom: 10px;
padding: 15px;
font-size: 14px;
line-height: 22px;
border: 0;
box-shadow: 0px 0px 5px 0px;
}
.wrapper.collapse .sidebar {
width: 70px;
}
.wrapper.collapse .sidebar ul li a {
text-align: center;
}
.wrapper.collapse .sidebar ul li a span.icon {
margin: 0;
}
.wrapper.collapse .sidebar ul li a span.title {
display: none;
}
.wrapper.collapse .main-container {
width: calc(100% - 70px);
margin-left: 70px;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://kit.fontawesome.com/5534ba8f0f.js"></script>
<script>
$(document).ready(function(){
$(".hamburger").click(function(){
$(".wrapper").toggleClass(".collapse");
});
});
</script>
</head>
<body>
<div class="wrapper">
<div class="top_navbar">
<div class="hamburger">
<div></div>
<div></div>
<div></div>
</div>
<div class="top_menu">
<div class="logo">Personal Dashboard</div>
<ul>
<li><i class="fas fa-search"></i></li>
<li><i class="fas fa-bell"></i></li>
<li><i class="fas fa-user"></i></li>
</ul>
</div>
</div>
<div class="sidebar">
<ul>
<li><a href="#">
<span class="icon">
<i class="fab fa-accessible-icon" aria-hidden="true"></i>
</span>
<span class="title">a</span>
</a></li>
<li><a href="#" class="active">
<span class="icon">
<i class="fab fa-accessible-icon" aria-hidden="true"></i>
</span>
<span class="title">b</span>
</a></li>
<li><a href="#">
<span class="icon">
<i class="fab fa-accessible-icon" aria-hidden="true"></i>
</span>
<span class="title">c</span>
</a></li>
<li><a href="#">
<span class="icon">
<i class="fab fa-accessible-icon" aria-hidden="true"></i>
</span>
<span class="title">d</span>
</a></li>
<li><a href="#">
<span class="icon">
<i class="fab fa-accessible-icon" aria-hidden="true"></i>
</span>
<span class="title">e</span>
</a></li>
</ul>
</div>
<div class="main_container">
<div class="item">
jgjgjjskg jsgjskljgnrilgn slinglm sir.jmeljfkjsk jfksjekfjsk ejksjfkesjfksefjs kjfjeskfksjfkesjrjskejrkje sjktrskrjske jrrkjskrjekjrsk jrekj
</div>
<div class="item">
jgjgjjskgjsg jskljgnrilgnslinglmsir.jmeljfkjskjfksjekfjskejksjfkesjfksefjskjfjeskfksjfkesjrjskejrkjesjktrskrjskejrrkjskrjekjrskjrekj
</div>
<div class="item">
jgjgjjskg jsgjskljgnrilgn slinglm sir.jmeljfkjsk jfksjekfjsk ejksjfkesjfksefjs kjfjeskfksjfkesjrjskejrkje sjktrskrjske jrrkjskrjekjrsk jrekj
</div>
<div class="item">
jgjgjjskg jsgjskljgnrilgn slinglm sir.jmeljfkjsk jfksjekfjsk ejksjfkesjfksefjs kjfjeskfksjfkesjrjskejrkje sjktrskrjske jrrkjskrjekjrsk jrekj
</div>
</div>
</div>
</body>
</html>
You do not need to define .collapse as a class because toggleClass expects a class.
Try
$(document).ready(function(){
$(".hamburger").click(function(){
$(".wrapper").toggleClass("collapse");
});
});
I am writing this code and I want to include 3 buttons under the photo of the recipe as icons, such as a time icon and then the time it takes to make it to the right of the icon. However, the list does not go under the card, it instead moves to a new line.
HTML:
<!DOCTYPE html>
<html>
<head>
<title> </title>
<link rel="stylesheet" type="text/css" href="../stylesheets/recipes.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="../javascript/recipes.js"></script>
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<header>
<div class="btn">
<a href="../index.html">
<button id="logobtn">
<img src="../images/logo.png" class="logo" alt="Chef logo">
</button>
</a>
</div>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Restaurants</li>
<li>Recipes</li>
<li>Requests</li>
</ul>
</nav>
</header>
<h1> Recipes </h1>
<div class="cards">
<a class="card" href="#">
<span class="card-header">
<img src="../images/benedict.jpg" class="cardpic">
<span class="card-title">
<h3>Eggs Benedict</h3>
</span>
</span>
<span class="cardsummary">
<p> Love it <br><br><br></p>
<ul>
<li><i class="fa fa-adn"></i> </li>
<li><i class="fa fa-android"></i> </li>
<li> <i class="fa fa-apple"></i> </li>
</ul>
</span>
</a>
<a class="card" href="#">
<span class="card-header">
<img src="../images/eclair.jpg" class="cardpic">
<span class="card-title">
<h3>Chocolate Eclairs</h3>
</span>
</span>
<span class="card-summary">
Each card is created from an <a> tag so the whole card is linked.
<ul class="list-inline">
<li><i class="fa fa-adn"></i> </li>
<li><i class="fa fa-android"></i> </li>
<li> <i class="fa fa-apple"></i> </li>
</ul>
</span>
</a>
<a class="card" href="#">
<span class="card-header">
<img src="../images/penne.jpg" class="cardpic">
<span class="card-title">
<h3>Penne alla Vodka</h3>
</span>
</span>
<span class="card-summary">
Each card is created from an <a> tag so the whole card is linked.
</span>
</a>
<a class="card" href="#">
<span class="card-header">
<img src="../images/rissoto.jpg" class="cardpic">
<span class="card-title">
<h3>Chocolate Eclairs</h3>
</span>
</span>
<span class="card-summary">
Each card is created from an <a> tag so the whole card is linked.
</span>
</a>
<a class="card" href="#">
<span class="card-header">
<img src="../images/rissoto.jpg" class="cardpic">
<span class="card-title">
<h3>Chocolate Eclairs</h3>
</span>
</span>
<span class="card-summary">
Each card is created from an <a> tag so the whole card is linked.
</span>
</a>
<a class="card" href="#">
<span class="card-header">
<img src="../images/rissoto.jpg" class="cardpic">
<span class="card-title">
<h3>Chocolate Eclairs</h3>
</span>
</span>
<span class="card-summary">
Each card is created from an <a> tag so the whole card is linked.
</span>
</a>
</div>
</body>
</html>
The card summary with text is displayed properly, under the photo, but anytime I place the list inside of that div it takes on its own property and display elements, instead of wrapping with the parent container.
I am tying to essentially add stylized icons under EACH card as a summary header, and then I will have the text below all 3 of the icons present in every card, but the list of icons just keeps moving onto the next line, and I truly can't figure it out.
CSS:
body {
font-family: oswald;
font-weight: normal;
text-transform: uppercase;
text-align: center;
background-color: #fff4ea;
}
.background {
width: 100%;
height: 100%;
}
a {
color: black;
text-decoration: none;
font-weight: bold;
}
li a:hover {
color: #E49273;
}
span:hover {
color: #E49273;
}
header {
background: #fff4ea;
width: 100%;
height: 76px;
position: fixed;
top: 0;
left: 0;
padding-bottom: 30px;
border-bottom: 1px solid black;
z-index: 100;
}
.btn {
-webkit-transition all: 700ms ease;
transition all: 700ms ease;
cursor: pointer;
}
#logobtn {
background-color: Transparent;
background-repeat:no-repeat;
border: none;
cursor:pointer;
overflow: hidden;
float: left;
margin-top: 2px;
margin-left: 8px;
width: 100px;
height: 104px;
}
.logo{
width: 100px;
height: 104px;
}
nav {
float: right;
padding: 20px;
}
nav ul {
list-style: none;
overflow: auto;
position: relative;
}
nav li {
display: inline-block;
float: left;
padding: 10px;
font-size: 30px;
}
.current {
color: #A37A74;
}
h1 {
text-align: center;
position: relative;
top: 100px;
color: #7180AC;
font-size: 5em;
line-height: 1.15em;
}
h2 {
font-size: 2em;
color: black;
line-height: 1.15em;
}
p {
line-height: 1.45em;
margin-bottom: 20px;
}
.skew-forward {
-webkit-transform-origin: 10% 100%;
transform-origin: 10% 100%;
}
.skew-forward:hover {
-webkit-transform: skew(-10deg);
transform: skew(-10deg);
}
#media only screen and (max-width : 685px) {
header {
position: absolute;
}
nav ul, nav:active ul {
display: none;
position: absolute;
padding: 20px;
right: 0px;
top: 75px;
width: 50%;
}
nav li {
text-align: right;
width: 100%;
padding: 15px 0px;
margin: 0;
}
nav:hover ul {
display: block;
}
a:hover {
color: yellow;
}
}
#media only screen and (max-width: 790px) {
div.btn {
display: none;
}
}
#media only screen and (max-width: 1000px) {
h1 {
float: none;
display: none;
font-size: 3em;
}
.card {
margin-top: 15%;
}
}
#import "compass";
#import "breakpoint";
/*//Todo clean up some crappy code
*/
.cards {
display: flex;
flex-wrap: wrap;
margin-top: 10%;
box-sizing: border-box;
}
.card {
width: 25%;
position: relative;
margin-bottom: 5%;
margin-right: 2%;
margin-left: 3%;
color: #363636;
}
.cardpic {
position: inherit;
width: 100%;
height: auto;
max-width: 100%; // stop images from breaking out of their bounding boxes.
}
#media (max-width: 700px) {
width: 100%;
}
#include box-shadow(rgba(black, 0.19) 0 0 8px 0);
#include border-radius(4px);
#include breakpoint(700px, $no-query: true) {
/* //switch to 2 columns
*/ max-width: 320px;
margin-right: 20px;
margin-bottom: 20px;
&:nth-child(even) {
margin-right: 0;
}
}
/*#include breakpoint(980px, $no-query: true) {
//switch to 3 columns
&:nth-child(even) {
margin-right: 20px;
}
&:nth-child(3n) {
margin-right: 0;
}
}*/
span {
display: block;
}
.card-summary {
position: relative;
padding-top: 5%;
}
.cardsummary {
position: relative;
padding-top: 5%;
margin-top: 10%;
}
.card-header {
position: inherit;
overflow: hidden;
background-repeat: no-repeat;
background-position: center;
background-blend-mode: overlay;
border-radius(4px 4px 0 0);
max-width: 100%;
margin-top: 0%;
}
.card-title {
background: rgba(255,255,255,0.60);
padding: 3.5% 0 3.5% 0;
color: black;
font-weight: bold;
font-family: 'Roboto Condensed', sans-serif;
text-transform: uppercase;
position: absolute;
bottom: 0.5%;
width: 100%;
}
h3 {
font-size: 1.2em;
line-height: 1.2;
padding: 0 3.5%;
margin: 0;
}
.icon-zoom{
position: inherit;
}
ul {
display: inline-block;
padding-right: 5px;
padding-left: 5px;
margin-bottom: 10px;
list-style-type: none;
}
/*---- Genral classes end -------*/
/*Change icons size here*/
.social-icons .fa {
font-size: 1.8em;
}
/*Change icons circle size and color here*/
.social-icons .fa {
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
color: #FFF;
color: rgba(255, 255, 255, 0.8);
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.social-icons.icon-circle .fa{
border-radius: 50%;
}
.social-icons.icon-rounded .fa{
border-radius:5px;
}
.social-icons.icon-flat .fa{
border-radius: 0;
}
.social-icons .fa:hover, .social-icons .fa:active {
color: #FFF;
-webkit-box-shadow: 1px 1px 3px #333;
-moz-box-shadow: 1px 1px 3px #333;
box-shadow: 1px 1px 3px #333;
}
.social-icons.icon-zoom .fa:hover, .social-icons.icon-zoom .fa:active {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
}
JS:
$(document).ready(function(){
$("#logobtn").hover(function(){
$(this).toggleClass("skew-forward").toggleClass("blur");
});
$("a[href='#']").click(function(e) {
e.preventDefault();
});
})
You have <a> in <a>. If you remove one <a> for example from all <ul> lists:
<li><i class="fa fa-adn"></i></li> the <ul> element will be correctly interpreted by the browser.
To have <ul><li> elements in one line you can use for example "display: flex; justify-content: center" on <ul> or "float: left;" on <ul><li> elements.
To check markup validity you can use also https://validator.w3.org
I tried a bunch of things like playing with padding and margin, I used tables and even displayed as an inline and inline-block but I have also tried to div different parts of the code hoping that separating the code I could manipulate it better but no results. I can't get my inputs to be side by side. Here is a link to the code on codepen.io. can someone please give me some help!
/* color:#00a786 lighter green */
/* color:#005242 dark green for buttons */
/* color:003027 dark green background */
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
html {
background-color: #fff;
}
body {
background: #ede6e6;
margin:0 auto;
font-family: arial, helvetica, sans-serif ;
}
a {
text-decoration: none;
color:#fff;
}
li {
display: inline;
padding: 10px;
font-size: 16px;
color:#fff;
}
/* --------------------------------HEADER------------------------------------- */
header{
background-image:linear-gradient(rgba(0, 0, 0, 0.7),rgba(0, 0, 0, 0.7)), url(../img/heder_photo_2.jpg);
background-size: cover;
background-position: center;
right:-20px;
left: -20px;
min-height: 100vh;
margin-bottom: 300px;
overflow-x: hidden;
background-attachment: fixed;
position: absolute;
z-index: 80;
}
.row{
padding-top: 40px;
border-bottom: 2px solid white;
}
}
/* --------------------------------TOP-LEFT------------------------------------- */
.top-left{
float:left;
}
.top-left ul {
font-size: 16px;
padding-left: 150px;
padding-top: -80px;
padding-bottom: 30px
}
/* -------------------------------SOCIAL-LINKS------------------------------------- */
.social-links ul {
display:inline;
padding-left: 150px;
}
.social-links li{
font-size: 100%;
}
.social-links li:hover,
.social-links li:active{
border-bottom: 2px solid #00a786;
transition: border-bottom 0.2s;
}
/* -------------------------------TOP-RIGHT------------------------------------- */
.top-right{
float:right;
}
.top-right {
float: right;
padding-bottom: 30px;
}
.top-right li {
font-size: 100%;
font-weight: 200;
}
.top-right li:hover,
.top-right li:active{
color:#005242;
transition: color 0.2s;
}
.top-right li:first-child{
border-left: 2px solid #fff;
border-width: thin;
}
.top-right li:last-child{
border-left: 2px solid #fff;
border-width: thin;
}
/* -------------------------------H1------------------------------------- */
.main-header{
padding-top: 30px;
padding-left: 130px;
float:left;
}
.header-text{
display: inline-block;
}
h1{
font-size: 90%;
color:#fff;
font-family: sans-serif;
}
span{
color:#00a786
}
/* -------------------------------MAIN-NAV------------------------------------ */
.main-nav{
float: right;
padding-right: 30px;
padding-top: 40px;
}
.main-nav-links{
display: inline-block;
}
.main-nav-links li:hover,
.main-nav-links li:active{
border-bottom: 2px solid #00a786;
transition: border-bottom 0.2s;
}
/* -------------------------------MAIN-SECTION------------------------------------ */
.main-section{
}
.main-content{
text-align: center;
}
.content{
padding-top: 50px;
color: #fff;
display:inline-block;
}
.content h2{
font-size: 100%;
}
.content p{
font-size: 60%
}
/* -------------------------------BUTTONS------------------------------------ */
.btn:link,
.btn:visited
input[type=submit]{
display: inline-block;
padding :10px 30px;
margin-top: 60px;
font-size: 60%;
font-weight: 300;
text-decoration: none;
border-radius: 5px;
transition: background-color 0.2s,border 0.2s,color 0.2s;
msargin-right: 15px;
}
.btn-full:link,
.btn-full:visited,
input[type=submit]{
background-color: #00a786;
border: 1px solid #005242;
color: #fff;
}
.btn-full:hover,
.btn-full:active,
input[type=submit]{
background-color: #005242;
border: 1px solid #005242;
color: #fff;
}
.search-btn:link,
.search-btn:visited
input[type=submit]{
display: inline-block;
padding :10px 30px;
margin-top: 60px;
font-size: 60%;
font-weight: 300;
text-decoration: none;
border-radius: 5px;
transition: background-color 0.2s,border 0.2s,color 0.2s;
}
.search-btn:hover,
.search-btn:active,
input[type=submit]{
background-color: #005242;
border: 1px solid #005242;
color: #fff;
}
/* -------------------------------Section-Search------------------------------------ */
.section-Search{
background-color: #003027;
border: 2px solid #003027;
border-radius: 3px;
position:relative;
left:200px;
right:20px;
top: 500px;
height: 30vh;
width: 600px;
z-index: 99;
}
.main-Search{
padding:30px 10px;
display: inline;
}
.col1{
}
.col3{
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="vendors/css/normalize.css">
<link rel="stylesheet" type="text/css" href="vendors/css/grid.css">
<link rel="stylesheet" type="text/css" href="vendors/">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/styling.css">
<link rel="stylesheet" type="text/css" href="vendors/fonts/Aileron/">
<title>Williams Rental Propertie's</title>
</head>
<body>
<header>
<!--- TOP LEFT-------->
<div class="row">
<div class="top-left">
<ul>
<li><i class="fas fa-phone-volume icon-contact ">(312)343-8748</i></li>
<li><i class="far fa-envelope icon-contact">WilliamsRentalProperties</i></li>
</ul>
</div>
<!--- SOCIAL LINKS-------->
<div class="social-links">
<ul>
<li><i class="fab fa-facebook-f"> </i></li>
<li><i class="fab fa-twitter"></i></li>
<li><i class="fab fa-instagram"></i></li>
<li><i class="fab fa-pinterest-square"></i></li>
<li><i class="fab fa-linkedin-in"></i></li>
</ul>
</div>
<!--- TOP RIGHT-------->
<div class="top-right">
<ul>
<li><i class="fas fa-user "> Register</i></li>
<li><i class="fas fa-sign-in-alt">Login</i></li>
</ul>
</div>
</div>
<!--- main Header-------->
<div class="main-header">
<div class="header-text">
<h1>Williams <span> Rental</span> Properties</h1>
</div>
</div>
<nav class="main-nav">
<div class="main-nav-links">
<ul>
<li> Home</li>
<li> Featured List</li>
<li> About Us</li>
<li> Pages</li>
<li> Blog</li>
<li> contact</li>
</ul>
</div>
</nav>
<section class="main-section">
<div class="main-content">
<div class="content">
<h2>Let Us Find You Your Dream Home!</h2>
<p>Search real estate property records, houses, condos, land and more .
Find property info from the most comprehensive source data.</p>
<a class="btn btn-full" href="#">View Details</a>
</div>
</div>
</section>
</header>
<section class ="section-Search">
<div class="main-Search">
<form class="Search" action="index.html" method="post">
<label for="address"></label>
<!--- city-------->
<div class="col1">
<input type="text" name="Search" placeholder="keyword,zipcode">
</div>
<!--- city-------->
<div class="col2">
<label for="city"></label>
<select class="city" name="city">
<option value="city">city</option>
</select>
</div>
<!--- state------->
<div class="col3">
<label for="state"></label>
<select class="state" name="state-form">
<option value="state">state</option>
</div>
<!--- search button------->
<a class="search-btn" href="#">Search</a>
</select>
</form>
</section>
</body>
</html>
You have them in different div elements and div elements are block-level (appear on their own line). Just place them in the same div.
Also (FYI), you aren't using the label element correctly. The for attribute value in a label needs to match the id attribute value of the form element that the label is "for"`.
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
html{
background-color: #fff;
}
body{
background: #ede6e6;
margin:0 auto;
font-family: arial, helvetica, sans-serif ;
}
a{
text-decoration: none;
color:#fff;
}
li{
display: inline;
padding: 10px;
font-size: 16px;
color:#fff;
}
/* --------------------------------HEADER------------------------------------- */
header{
background-image:linear-gradient(rgba(0, 0, 0, 0.7),rgba(0, 0, 0, 0.7)), url(../img/heder_photo_2.jpg);
background-size: cover;
background-position: center;
right:-20px;
left: -20px;
min-height: 100vh;
margin-bottom: 300px;
overflow-x: hidden;
background-attachment: fixed;
position: absolute;
z-index: 80;
}
.row{
padding-top: 40px;
border-bottom: 2px solid white;
}
}
/* --------------------------------TOP-LEFT------------------------------------- */
.top-left{
float:left;
}
.top-left ul {
font-size: 16px;
padding-left: 150px;
padding-top: -80px;
padding-bottom: 30px
}
/* -------------------------------SOCIAL-LINKS------------------------------------- */
.social-links ul {
display:inline;
padding-left: 150px;
}
.social-links li{
font-size: 100%;
}
.social-links li:hover,
.social-links li:active{
border-bottom: 2px solid #00a786;
transition: border-bottom 0.2s;
}
/* -------------------------------TOP-RIGHT------------------------------------- */
.top-right{
float:right;
}
.top-right {
float: right;
padding-bottom: 30px;
}
.top-right li {
font-size: 100%;
font-weight: 200;
}
.top-right li:hover,
.top-right li:active{
color:#005242;
transition: color 0.2s;
}
.top-right li:first-child{
border-left: 2px solid #fff;
border-width: thin;
}
.top-right li:last-child{
border-left: 2px solid #fff;
border-width: thin;
}
/* -------------------------------H1------------------------------------- */
.main-header{
padding-top: 30px;
padding-left: 130px;
float:left;
}
.header-text{
display: inline-block;
}
h1{
font-size: 90%;
color:#fff;
font-family: sans-serif;
}
span{
color:#00a786
}
/* -------------------------------MAIN-NAV------------------------------------ */
.main-nav{
float: right;
padding-right: 30px;
padding-top: 40px;
}
.main-nav-links{
display: inline-block;
}
.main-nav-links li:hover,
.main-nav-links li:active{
border-bottom: 2px solid #00a786;
transition: border-bottom 0.2s;
}
/* -------------------------------MAIN-SECTION------------------------------------ */
.main-section{
}
.main-content{
text-align: center;
}
.content{
padding-top: 50px;
color: #fff;
display:inline-block;
}
.content h2{
font-size: 100%;
}
.content p{
font-size: 60%
}
/* -------------------------------BUTTONS------------------------------------ */
.btn:link,
.btn:visited
input[type=submit]{
display: inline-block;
padding :10px 30px;
margin-top: 60px;
font-size: 60%;
font-weight: 300;
text-decoration: none;
border-radius: 5px;
transition: background-color 0.2s,border 0.2s,color 0.2s;
msargin-right: 15px;
}
.btn-full:link,
.btn-full:visited,
input[type=submit]{
background-color: #00a786;
border: 1px solid #005242;
color: #fff;
}
.btn-full:hover,
.btn-full:active,
input[type=submit]{
background-color: #005242;
border: 1px solid #005242;
color: #fff;
}
.search-btn:link,
.search-btn:visited
input[type=submit]{
display: inline-block;
padding :10px 30px;
margin-top: 60px;
font-size: 60%;
font-weight: 300;
text-decoration: none;
border-radius: 5px;
transition: background-color 0.2s,border 0.2s,color 0.2s;
}
.search-btn:hover,
.search-btn:active,
input[type=submit]{
background-color: #005242;
border: 1px solid #005242;
color: #fff;
}
/* -------------------------------Section-Search------------------------------------ */
.section-Search{
background-color: #003027;
border: 2px solid #003027;
border-radius: 3px;
position:relative;
left:200px;
right:20px;
top: 500px;
height: 30vh;
width: 600px;
z-index: 99;
}
.main-Search{
padding:30px 10px;
display: inline;
}
.col1{
}
.col3{
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="vendors/css/normalize.css">
<link rel="stylesheet" type="text/css" href="vendors/css/grid.css">
<link rel="stylesheet" type="text/css" href="vendors/">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/styling.css">
<link rel="stylesheet" type="text/css" href="vendors/fonts/Aileron/">
<title>Williams Rental Propertie's</title>
</head>
<body>
<header>
<!--- TOP LEFT-------->
<div class="row">
<div class="top-left">
<ul>
<li> <i class="fas fa-phone-volume icon-contact ">(312)343-8748</i></li>
<li><i class="far fa-envelope icon-contact">WilliamsRentalProperties</i></li>
</ul>
</div>
<!--- SOCIAL LINKS-------->
<div class="social-links">
<ul>
<li><i class="fab fa-facebook-f"> </i></li>
<li><i class="fab fa-twitter"></i></li>
<li><i class="fab fa-instagram"></i></li>
<li><i class="fab fa-pinterest-square"></i></li>
<li><i class="fab fa-linkedin-in"></i></li>
</ul>
</div>
<!--- TOP RIGHT-------->
<div class="top-right">
<ul>
<li><i class="fas fa-user "> Register</i></li>
<li> <i class="fas fa-sign-in-alt">Login</i></li>
</ul>
</div>
</div>
<!--- main Header-------->
<div class="main-header">
<div class="header-text">
<h1>Williams <span> Rental</span> Properties</h1>
</div>
</div>
<nav class="main-nav">
<div class="main-nav-links">
<ul>
<li> Home</li>
<li> Featured List</li>
<li> About Us</li>
<li> Pages</li>
<li> Blog</li>
<li> contact</li>
</ul>
</div>
</nav>
<section class="main-section">
<div class="main-content">
<div class="content">
<h2>Let Us Find You Your Dream Home!</h2>
<p>Search real estate property records, houses, condos, land and more .
Find property info from the most comprehensive source data.</p>
<a class="btn btn-full" href="#">View Details</a>
</div>
</div>
</section>
</header>
<section class ="section-Search">
<div class="main-Search">
<form class="Search" action="index.html" method="post">
<label for="address"></label>
<!--- city-------->
<div class="col1">
<input type="text" name="Search" placeholder="keyword,zipcode">
<label for="city"></label>
<select class="city" name="city">
<option value="city">city</option>
</select>
<label for="state"></label>
<select class="state" name="state-form">
<option value="state">state</option>
</div>
<!--- search button------->
<a class="search-btn" href="#">Search</a>
</select>
</form>
</section>
</body>
</html>
In this website : website
code involved :
/* CSS Document */
/* Float Elements
---------------------------------*/
.fl-lt {
float: left;
}
.fl-rt {
float: right;
}
/* Clear Floated Elements
---------------------------------*/
.clear {
clear: both;
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}
.clearfix:before,
.clearfix:after {
content: '\0020';
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}
.clearfix:after {
clear: both;
}
.figure {
margin: 0px;
}
img {
max-width: 100%;
}
a,
a:hover,
a:active {
outline: 0px !important
}
#font-face {
font-family: 'FontAwesome';
src: url('../fonts/fontawesome-webfont.eot?v=4.1.0');
src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.1.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff?v=4.1.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.1.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.1.0#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
/* Primary Styles
---------------------------------*/
body {
background: #fff;
font-family: 'Open Sans', sans-serif;
font-size: 14px;
font-weight: normal;
color: #888888;
margin: 0;
}
h2 {
font-size: 34px;
color: #222222;
font-family: 'Montserrat', sans-serif;
font-weight: 700;
letter-spacing: -1px;
margin: 0 0 15px 0;
text-align: center;
text-transform: uppercase;
}
h3 {
font-family: 'Montserrat', sans-serif;
color: #222222;
font-size: 16px;
margin: 0 0 5px 0;
text-transform: uppercase;
font-weight: 400;
}
h6 {
font-size: 16px;
color: #888888;
font-family: 'Open Sans', sans-serif;
font-weight: 400;
text-align: center;
margin: 0 0 60px 0;
}
p {
line-height: 24px;
margin: 0;
}
/* Header Styles
---------------------------------*/
.header {
text-align: center;
background: url(../img/pw_maze_black_2X.png) left top repeat;
padding: 280px 0;
}
.logo {
width: 130px;
margin: 0 auto 35px;
}
.header h1 {
font-family: 'Montserrat', sans-serif;
font-size: 50px;
font-weight: 400;
letter-spacing: -1px;
margin: 0 0 22px 0;
color: #fff;
}
.we-create {
padding: 0;
margin: 35px 0 55px;
}
.wp-pic {
margin-bottom: 20px;
}
.we-create li {
display: inline-block;
font-family: 'Montserrat', sans-serif;
font-size: 14px;
color: #bcbcbc;
text-transform: uppercase;
font-weight: 400;
margin: 0 5px 0 0;
padding: 0 0 0 15px;
}
.we-create li:first-child {
background: none;
}
.start-button {
padding-left: 0px;
}
.start-button li a {
color: #fff;
}
.link {
padding: 15px 35px;
background: #7cc576;
color: #fff !important;
font-size: 16px;
font-weight: 400;
font-family: 'Montserrat', sans-serif;
display: inline-block;
border-radius: 3px;
text-transform: uppercase;
line-height: 25px;
margin-bottom: 20px;
transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
}
.link:hover {
text-decoration: none;
color: #7cc576 !important;
background: #fff;
}
.link:active,
.link:focus {
background: #7cc576;
text-decoration: none;
color: #fff !important;
}
/* Navigation
---------------------------------*/
.main-nav-outer {
padding: 0px;
border-bottom: 1px solid #dddddd;
box-shadow: 0 4px 5px -3px #ececec;
position: relative;
background: #fff;
}
.main-nav {
text-align: center;
margin: 10px 0 0px;
padding: 0;
list-style: none;
}
.main-nav li {
display: inline;
margin: 0 1px;
}
.main-nav li a {
display: inline-block;
color: #222222;
text-transform: uppercase;
font-family: 'Montserrat', sans-serif;
text-decoration: none;
line-height: 20px;
margin: 17px 32px;
transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
}
.main-nav li a:hover {
text-decoration: none;
color: #7cc576;
}
.small-logo {
padding: 0 32px;
}
.main-section {
padding: 90px 0 110px;
}
/* Portfolio
---------------------------------*/
.Portfolio-nav {
padding: 0;
margin: 0 0 45px 0;
list-style: none;
text-align: center;
}
.Portfolio-nav li {
margin: 0 10px;
display: inline;
}
.Portfolio-nav li a {
display: inline-block;
padding: 10px 22px;
font-size: 12px;
line-height: 20px;
color: #222222;
border-radius: 4px;
text-transform: uppercase;
font-family: 'Montserrat', sans-serif;
background: #f7f7f7;
margin-bottom: 5px;
transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
}
.Portfolio-nav li a:hover {
background: #7cc576;
color: #fff;
text-decoration: none;
}
.portfolioContainer {
margin: 0 auto;
padding-left: 15px;
}
.Portfolio-box {
text-align: center;
margin-bottom: 30px;
height: 350px;
width: 350px;
overflow: hidden;
float: left;
padding: 0;
}
.Portfolio-box img {
margin-bottom: 25px;
transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
}
.Portfolio-box img:hover {
opacity: 0.6;
}
.Portfolio-nav li a.current {
background: #7cc576;
color: #fff;
text-decoration: none;
}
img {
max-width: 100%;
}
/* no transition on .isotope container */
.isotope .isotope-item {
/* change duration value to whatever you like */
-webkit-transition-duration: 0.6s;
-moz-transition-duration: 0.6s;
transition-duration: 0.6s;
}
.isotope .isotope-item {
-webkit-transition-property: -webkit-transform, opacity;
-moz-transition-property: -moz-transform, opacity;
transition-property: transform, opacity;
}
.main-section.paddind {
padding-bottom: 60px;
}
/* Clients
---------------------------------*/
.client-part {
background: url(../img/section-bg1.jpg) center center no-repeat;
background-size: cover;
padding: 55px 0;
text-align: center;
}
.client-part-haead {
color: #fdfdfd;
font-size: 28px;
line-height: 41px;
margin: 30px 0 10px;
font-family: ''Open Sans',sans-serif';
font-style: italic;
}
.client {
padding: 0;
margin: 20px 0 0;
list-style: none;
text-align: center;
}
.client li {
display: inline;
margin: 0 15px;
}
.client li a {
display: inline-block;
}
.client li a img {
margin-bottom: 15px;
border-radius: 50%;
}
.client li a:hover {
text-decoration: none;
}
.client li a h3 {
color: #ffffff;
}
.client li a span {
color: #f1f1f1;
}
.quote-right {
font-style: normal;
width: 68px;
height: 68px;
margin: 0 auto;
border: 2px solid #7cc576;
border-radius: 50%;
display: block;
line-height: 68px;
text-align: center;
font-size: 27px;
color: #7cc576;
cursor: pointer;
transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
}
.quote-right:hover {
color: #fff;
border: 2px solid #fff;
}
.c-logo-part {
background: #7cc576;
padding: 25px 0;
filter: alpha(opacity=60);
}
.c-logo-part ul {
padding: 0;
margin: 0;
list-style: none;
text-align: center;
}
.c-logo-part ul li {
display: inline;
margin: 0 25px;
}
.c-logo-part ul a {
display: inline-block;
margin: 0 20px;
}
.main-section.team {
padding: 85px 0;
}
.main-section.team h6 {
margin-bottom: 40px;
}
.portfolioContainer {
max-width: 1140px;
}
/* Animation Timers
---------------------------------*/
.delay-02s {
animation-delay: 0.2s;
-webkit-animation-delay: 0.2s;
}
.delay-03s {
animation-delay: 0.3s;
-webkit-animation-delay: 0.3s;
}
.delay-04s {
animation-delay: 0.4s;
-webkit-animation-delay: 0.4s;
}
.delay-05s {
animation-delay: 0.5s;
-webkit-animation-delay: 0.5s;
}
.delay-06s {
animation-delay: 0.6s;
-webkit-animation-delay: 0.6s;
}
.delay-07s {
animation-delay: 0.7s;
-webkit-animation-delay: 0.7s;
}
.delay-08s {
animation-delay: 0.8s;
-webkit-animation-delay: 0.8s;
}
.delay-09s {
animation-delay: 0.9s;
-webkit-animation-delay: 0.9s;
}
.delay-1s {
animation-delay: 1s;
-webkit-animation-delay: 1s;
}
.delay-12s {
animation-delay: 1.2s;
-webkit-animation-delay: 1.2s;
}
span.fa-stack.fa-5x.has-badge {
width: 180px;
height: 180px;
}
#unlocked li:before {
content: '\2713';
display: inline-block;
color: green;
margin-left: -65px;
padding: 0 9px 0 0;
}
#unlocked li {
list-style-type: none;
font-size: 1.5em;
margin: 1px;
font-weight: bold;
}
#locked li:before {
content: '\274c';
display: inline-block;
color: red;
margin-left: -65px;
padding: 0 9px 0 0;
}
#locked li {
list-style-type: none;
font-size: 1.5em;
margin: 1px;
font-weight: bold;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, maximum-scale=1">
<title>Homepage</title>
<link rel="icon" href="favicon.png" type="image/png">
<link rel="shortcut icon" href="favicon.ico" type="img/x-icon">
<link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,800italic,700italic,600italic,400italic,300italic,800,700,600' rel='stylesheet' type='text/css'>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="css/style.css" rel="stylesheet" type="text/css">
<link href="css/font-awesome.css" rel="stylesheet" type="text/css">
<link href="css/responsive.css" rel="stylesheet" type="text/css">
<link href="css/animate.css" rel="stylesheet" type="text/css">
<!--[if IE]><style type="text/css">.pie {behavior:url(PIE.htc);}</style><![endif]-->
<script type="text/javascript" src="js/jquery.1.8.3.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/jquery-scrolltofixed.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.isotope.js"></script>
<script type="text/javascript" src="js/wow.js"></script>
<script type="text/javascript" src="js/classie.js"></script>
<script src="contactform/contactform.js"></script>
<link rel="stylesheet" href="css/stylebadge.css">
</head>
<body>
<header class="header" id="header">
<!--header-start-->
<div class="container">
<figure class="logo animated fadeInDown delay-07s">
<a href="#">
<img src="img/logo.png" alt="">
</a>
</figure>
<h1 class="animated fadeInDown delay-07s">Welcome To Knight Studios</h1>
<ul class="we-create animated fadeInUp delay-1s">
<li>We are a digital agency that loves crafting beautiful websites.</li>
</ul>
<a class="link animated fadeInUp delay-1s" href="#">Get Started</a>
</div>
</header>
<!--header-end-->
<nav class="main-nav-outer" id="test">
<!--main-nav-start-->
<div class="container">
<ul class="main-nav">
<li>Home
</li>
<li>Services
</li>
<li>Badges
</li>
<li class="small-logo">
<a href="#header">
<img src="img/small-logo.png" alt="">
</a>
</li>
<li>Clients
</li>
<li>Team
</li>
<li>Contact
</li>
</ul>
<a class="res-nav_click" href="#"><i class="fa-bars"></i></a>
</div>
</nav>
<!--main-nav-end-->
<section class="main-section paddind" id="Portfolio">
<!--main-section-start-->
<div class="container">
<h2>Badges</h2>
<h6></h6>
<div class="portfolioFilter">
<ul class="Portfolio-nav wow fadeIn delay-02s">
<li>All Badges
</li>
<li>Salesforce
</li>
<li>L & TD
</li>
</ul>
</div>
</div>
<div class="portfolioContainer wow fadeInUp delay-04s">
<div class=" Portfolio-box branding">
<span class="fa-stack fa-5x has-badge" data-count=10>
<div class="badgesize">
<img src="img/66.png" alt="">
</div>
</span>
<h3>Completionist</h3>
<p>Didnot submit timesheet for a week</p>
<ul id="unlocked">
<li>UNLOCKED</li>
</ul>
<ul id="locked">
<li>LOCKED</li>
</ul>
</div>
<div class="Portfolio-box branding">
<span class="fa-stack fa-5x has-badge" data-count=15>
<div class="badgesize">
<img src="img/11.png" alt="">
</div>
</span>
<h3>Get A LIFE</h3>
<p>Logged greater than 60 hours for the week</p>
<ul id="unlocked">
<li>UNLOCKED</li>
</ul>
<ul id="locked">
<li>LOCKED</li>
</ul>
</div>
<div class=" Portfolio-box branding">
<span class="fa-stack fa-5x has-badge" data-count=2>
<div class="badgesize">
<img src="img/22.png" alt="">
</div>
</span>
<h3>Slogger</h3>
<p>Logged greater than 55 hours for the week</p>
<ul id="unlocked">
<li>UNLOCKED</li>
</ul>
<ul id="locked">
<li>LOCKED</li>
</ul>
</div>
<div class=" Portfolio-box branding">
<span class="fa-stack fa-5x has-badge" data-count=100>
<div class="badgesize">
<img src="img/1.png" alt="">
</div>
</span>
<h3>Into The Game</h3>
<p>Starts Playing the Game</p>
<ul id="unlocked">
<li>UNLOCKED</li>
</ul>
<ul id="locked">
<li>LOCKED</li>
</ul>
</div>
<div class=" Portfolio-box branding">
<span class="fa-stack fa-5x has-badge" data-count=100>
<div class="badgesize">
<img src="img/2.png" alt="">
</div>
</span>
<h3>Hipster</h3>
<p>Branding</p>
<ul id="unlocked">
<li>UNLOCKED</li>
</ul>
<ul id="locked">
<li>LOCKED</li>
</ul>
</div>
<div class=" Portfolio-box branding">
<span class="fa-stack fa-5x has-badge" data-count=20>
<div class="badgesize">
<img src="img/7.png" alt=""></a>
</div>
</span>
<h3>Windmills</h3>
<p>Photography</p>
<ul id="unlocked">
<li>UNLOCKED</li>
</ul>
<ul id="locked">
<li>LOCKED</li>
</ul>
</div>
<div class=" Portfolio-box photography">
<span class="fa-stack fa-5x has-badge" data-count=0>
<div class="badgesize">
<img src="img/ltd1.png" alt=""></a>
</div>
</span>
<h3>Windmills</h3>
<p>Photography</p>
<ul id="unlocked">
<li>UNLOCKED</li>
</ul>
<ul id="locked">
<li>LOCKED</li>
</ul>
</div>
<div class=" Portfolio-box photography">
<span class="fa-stack fa-5x has-badge" data-count=200>
<div class="badgesize">
<img src="img/ltd2.png" alt=""></a>
</div>
</span>
<h3>Windmills</h3>
<p>Photography</p>
<ul id="unlocked">
<li>UNLOCKED</li>
</ul>
<ul id="locked">
<li>LOCKED</li>
</ul>
</div>
</div>
</section>
<!--main-section-end-->
<section class="business-talking">
<!--business-talking-start-->
<div class="container">
<h2>Let’s Talk Business.</h2>
</div>
</section>
<!--business-talking-end-->
<script type="text/javascript">
$(document).ready(function(e) {
$('#test').scrollToFixed();
$('.res-nav_click').click(function() {
$('.main-nav').slideToggle();
return false
});
});
</script>
<script>
wow = new WOW({
animateClass: 'animated',
offset: 100
});
wow.init();
</script>
<script type="text/javascript">
$(window).load(function() {
$('.main-nav li a').bind('click', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top - 102
}, 1500, 'easeInOutExpo');
/*
if you don't want to use the easing effects:
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1000);
*/
event.preventDefault();
});
})
</script>
<script type="text/javascript">
$(window).load(function() {
var $container = $('.portfolioContainer'),
$body = $('body'),
colW = 375,
columns = null;
$container.isotope({
// disable window resizing
resizable: true,
masonry: {
columnWidth: colW
}
});
$(window).smartresize(function() {
// check if columns has changed
var currentColumns = Math.floor(($body.width() - 30) / colW);
if (currentColumns !== columns) {
// set new column count
columns = currentColumns;
// apply width to container manually, then trigger relayout
$container.width(columns * colW)
.isotope('reLayout');
}
}).smartresize(); // trigger resize to set container width
$('.portfolioFilter a').click(function() {
$('.portfolioFilter .current').removeClass('current');
$(this).addClass('current');
var selector = $(this).attr('data-filter');
$container.isotope({
filter: selector,
});
return false;
});
});
</script>
</body>
</html>
I have two conditions for badges :(below are the two badges)
Issue :
when the count (which appears on the upper right side of the badge as "10" and "0" here) is greater than "0" then "unlocked with check mark" should be displayed else "locked with cross" should be dispalyed and it should be faded as in hover effect we see normally.
Its quite tricky for me.Kindly help,if anyone can.Thanks a lot.God bless.
You could iterate all Portfolio-box, check when they have a span badge with data-count > 0, then show/hide the locked/unlocked
$.each($('.Portfolio-box'), function() {
var count = $(this).children('has-badge').attr('data-count');
if(count > 0) {
$(this).children('ul.locked').hide();
$(this).children('ul.unlocked').show();
} else {
$(this).children('ul.locked').show();
$(this).children('ul.unlocked').hide();
}
});
And in your html replace
<ul id="unlocked">
<ul id="locked">
For
<ul class="unlocked">
<ul class="locked">
Another option you could do is to use PHP to not generate the HTML for locked/unlocked based on your business rule, something like:
<?php if($badgeCount >0): ?>
<ul class="unlocked">
....
</ul>
<? else: ?>
<ul class="locked">
....
</ul>
<? endif; ?>