Layout html cards and search bar - html

Question

HELLOOOO amazing stackoverflow community <3
I am having trouble setting out listings (as cards), next to the menu bar. This is the layout i would like. Any help is greatly appreciated !!! <3 The listings also change daily and have multiple pages
body {
font-family:Quicksand;
font-weight:700;
}
.menu_bar{
text-align: left;
padding-left: 20px;
width: 10%;
}
ul.form {
position:relative;
background:#fff;
width:250px;
margin:auto;
padding:0;
list-style: none;
overflow:hidden;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.1);
box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.1);
}
.form li a {
width:225px;
padding-left:20px;
height:50px;
line-height:50px;
display:block;
overflow:hidden;
position:relative;
text-decoration:none;
text-transform:uppercase;
font-size:14px;
color:#686868;
-webkit-transition:all 0.2s linear;
-moz-transition:all 0.2s linear;
-o-transition:all 0.2s linear;
transition:all 0.2s linear;
}
.form li a:hover {
background:#efefef;
}
.form li a.profile {
border-left:5px solid #008747;
}
.form li a.messages {
border-left:5px solid #fecf54;
}
.form li a.settings {
border-left:5px solid #cf2130;
}
.form li a.logout {
border-left:5px solid #dde2d5;
}
.form li:first-child a:hover, .form li:first-child a {
-webkit-border-radius: 5px 5px 0 0;
-moz-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
}
.form li:last-child a:hover, .form li:last-child a {
-webkit-border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
}
.form li a:hover i {
color:#ea4f35;
}
.form i {
margin-right:15px;
-webkit-transition:all 0.2s linear;
-moz-transition:all 0.2s linear;
-o-transition:all 0.2s linear;
transition:all 0.2s linear;
}
.form em {
font-size: 10px;
background: #ea4f35;
padding: 3px 5px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
font-style: normal;
color: #fff;
margin-top: 17px;
margin-right: 15px;
line-height: 10px;
height: 10px;
float:right;
}
.form li.selected a {
background:#efefef;
}
h1 {
color:red;
margin:0 auto;
margin-top:60px;
margin-bottom:40px;
font-size:30px;
width:300px;
text-align:center;
}
p {
text-align:center;
position:absolute;
width:100%;
bottom:0;
font-size:12px;
font-family:Arial, Helvetica;
color:#fff;
text-transform:uppercase;
}
p a {
color:#fff;
text-decoration:none;
}
.row-center {
text-align: center;
}
.main_row {
max-width: 4900px;
margin: 50px auto 0;
}
.third_row {
max-width: 4900px;
margin: 50px auto 0;
}
.card {
padding: 0 1.7rem;
width: 100%;
}
.card2 {
float: left;
padding: 0 1.7rem;
width: 50%;
}
.card .menu-content {
margin: 0;
padding: 0;
list-style-type: none;
}
.card .menu-content::before,
.card .menu-content::after {
content: '';
display: table;
}
.card .menu-content::after {
clear: both;
}
.card .menu-content li {
display: inline-block;
}
.card .menu-content a {
color: #fff;
}
.card .menu-content span {
position: absolute;
left: 50%;
top: 0;
font-size: 10px;
font-weight: 700;
font-family: 'Open Sans';
transform: translate(-50%, 0);
}
.card .wrapper {
background-color: #fff;
min-height: 540px;
position: relative;
overflow: hidden;
box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.2);
}
.card .wrapper:hover .data {
transform: translateY(0);
}
.card .data {
position: absolute;
bottom: 0;
width: 100%;
transform: translateY(calc(70px + 1em));
transition: transform 0.3s;
}
.card .data .content {
padding: 1em;
position: relative;
z-index: 1;
}
.card .author {
font-size: 12px;
}
.card .title {
margin-top: 10px;
}
.card .text {
height: 70px;
margin: 0;
}
.card input[type='checkbox'] {
display: none;
}
.card input[type='checkbox']:checked + .menu-content {
transform: translateY(-60px);
}
.example-2 .wrapper {
background: url(https://theluxurytravelexpert.files.wordpress.com/2014/01/scenery.jpg) center/cover no-repeat;
}
.example-2 .wrapper:hover .menu-content span {
transform: translate(-50%, -10px);
opacity: 1;
}
.example-2 .header {
color: #fff;
padding: 1em;
}
.example-2 .header::before,
.example-2 .header::after {
content: '';
display: table;
}
.example-2 .header::after {
clear: both;
}
.example-2 .header .date {
float: left;
font-size: 12px;
}
.example-2 .menu-content {
float: right;
}
.example-2 .menu-content li {
margin: 0 5px;
position: relative;
}
.example-2 .menu-content span {
transition: all 0.3s;
opacity: 0;
}
.example-2 .data {
color: #fff;
transform: translateY(calc(70px + 4em));
}
.example-2 .title a {
color: #fff;
}
.example-2 .button {
display: block;
width: 100px;
margin: 2em auto 1em;
text-align: center;
font-size: 12px;
color: #fff;
line-height: 1;
position: relative;
font-weight: 700;
}
.example-2 .button::after {
content: '\2192';
opacity: 0;
position: absolute;
right: 0;
top: 50%;
transform: translate(0, -50%);
transition: all 0.3s;
}
.example-2 .button:hover::after {
transform: translate(5px,-50%);
opacity: 1;
}
.card_sub_article {
display: inline-block;
height: 10%;
width: 40%;
}
.card_main .menu-content {
margin: 0;
padding: 0;
list-style-type: none;
}
.card_main .menu-content::before,
.card .menu-content::after {
content: '';
display: table;
}
.card_main .menu-content::after {
clear: both;
}
.card_main .menu-content li {
display: inline-block;
}
.card_main .menu-content a {
color: #fff;
}
.card_main .menu-content span {
position: absolute;
left: 50%;
top: 0;
font-size: 10px;
font-weight: 700;
font-family: 'Open Sans';
transform: translate(-50%, 0);
}
.card_main .wrapper {
background-color: #fff;
min-height: 540px;
position: relative;
overflow: hidden;
box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.2);
}
.card_main .wrapper:hover .data {
transform: translateY(0);
}
.card_main .data {
position: absolute;
bottom: 0;
width: 100%;
transform: translateY(calc(70px + 1em));
transition: transform 0.3s;
}
.card_main .data .content {
padding: 1em;
position: relative;
z-index: 1;
}
.card_main .author {
font-size: 12px;
}
.card_main .title {
margin-top: 10px;
}
.card_main .text {
height: 70px;
margin: 0;
}
.card_main input[type='checkbox'] {
display: none;
}
.card_main input[type='checkbox']:checked + .menu-content {
transform: translateY(-60px);
}
<!DOCTYPE html>
<html>
<head>
<title>Vertical Menu</title>
<link href='http://fonts.googleapis.com/css?family=Quicksand:400,700' rel='stylesheet' type='text/css' />
<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.0.min.js" /></script>
<link rel="stylesheet" type="text/css" href="style.css">
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css" rel="stylesheet" />
<!--[if IE 7]>
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome-ie7.min.css" rel="stylesheet" />
<![endif]-->
</head>
<body>
<div class="menu_bar">
<h1> Menu</h1>
<ul class="form">
<li><a class="profile" href="#"><i class="icon-user"></i>My Profile</a></li>
<li class="selected"><a class="messages" href="#"><i class="icon-envelope-alt"></i>Messages <em>5</em></a></li>
<li><a class="stats" href="#"><i class="icon-cog"></i>Statistics</a></li>
<li><a class="settings" href="#"><i class="icon-cog"></i>Settings</a></li>
<li><a class="logout" href="#"><i class="icon-signout"></i>Logout</a></li>
</ul>
<h1>Listings:</h1>
<div class="card_sub_article">
<div class="example-2 card_main">
<div class="wrapper">
<div class="header">
<div class="date">
<span class="day">12</span>
<span class="month">Aug</span>
<span class="year">2016</span>
</div>
<ul class="menu-content">
<li>
</li>
<li><span>18</span></li>
<li><span>3</span></li>
</ul>
</div>
<div class="data">
<div class="content">
<span class="author">REVIEW</span>
<h1 class="title">TITLE</h1>
<p class="text">Description</p>
Read more
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

Answer 1

When dealing with layouts like this, the best solution is to use a frontend framework, such as Bootstrap. You can start using it right away by adding this in your head:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
Afterwards, you can use the grid layout, which is very useful if you also want to make your website responsive. You should read the documentation to familiarize yourself with the whole capabilities of Bootstrap, but your HTML should ideally look something like this with it:
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-2">
<div class="menu_bar">
<h1> Menu</h1>
<ul class="form">
<li><a class="profile" href="#"><i class="icon-user"></i>My Profile</a></li>
<li class="selected"><a class="messages" href="#"><i class="icon-envelope-alt"></i>Messages <em>5</em></a></li>
<li><a class="stats" href="#"><i class="icon-cog"></i>Statistics</a></li>
<li><a class="settings" href="#"><i class="icon-cog"></i>Settings</a></li>
<li><a class="logout" href="#"><i class="icon-signout"></i>Logout</a></li>
</ul>
</div>
</div>
<div class="col-md-10">
<div class="listings">
<h1>Listings:</h1>
<div class="row">
<div class="col-md-3">
<div class="card_sub_article">
<div class="example-2 card_main">
<div class="wrapper">
<div class="header">
<div class="date">
<span class="day">12</span>
<span class="month">Aug</span>
<span class="year">2016</span>
</div>
<ul class="menu-content">
<li>
</li>
<li><span>18</span></li>
<li><span>3</span></li>
</ul>
</div>
<div class="data">
<div class="content">
<span class="author">REVIEW</span>
<h1 class="title">TITLE</h1>
<p class="text">Description</p>
Read more
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
It will look wonky at first but remove the css styles for .card_sub_article and it should look fine.
Also a minor error in your HTML syntax: you closed script tag twice, which is fine most of the time, but not good practice.
Hope this helps you get started :)