$('.options').hide();
$('.mb').on('click', function() {
$('.options').toggle();
});
$("#l1").click(function() {
window.open(
'https://www.google.com/',
'_blank'
);
});
$("#l2").click(function() {
window.open(
'https://www.google.com/',
'_self'
);
});
$("#l3").click(function() {
window.open(
'https://www.google.com/',
'_blank'
);
});
$("#l4").click(function() {
window.open(
'https://www.google.com/',
'_blank'
);
});
body {
background-color: #FFF;
margin: 0;
padding: 0;
}
/*----------- section 2 --------------*/
.main {
background: url("https://s-media-cache-ak0.pinimg.com/originals/42/dd/a0/42dda08c9f6ccdb95e3b97d3424a5c83.jpg");
background-repeat: no-repeat;
background-size: cover;
margin: 0;
padding: 10%;
max-width: 900%;
max-height: 400%;
margin-top: 5px;
position: absolute;
z-index: -1;
}
#mainhead {
color: #3f6096;
font-family: 'Quicksand', sans-serif;
font-size: 28px;
font-weight: 400;
line-height: 30px;
margin: 10px 0px;
text-align: center;
}
.subtext {
padding-bottom: 30px;
}
p {
color: #3f6096;
font-family: 'Open Sans', sans-serif;
font-size: 16px;
font-weight: 100;
line-height: 24px;
margin: 90 auto;
text-align: center;
}
.prop {
border: 2px solid #3f6096;
padding: 20px 10px;
text-align: center;
width: 300px;
margin-bottom: 20px;
display: inline-block;
}
.diploma {
-webkit-filter: brightness(50);
}
h2 {
color: #3f6096;
font-family: 'Open Sans', sans-serif;
text-align: center;
font-size: 28px;
font-weight: 100;
}
.prop h2 {
font-family: 'Quicksand', sans-serif;
font-size: 24px;
}
.rowtwo {
width: 85%;
margin-left: 10%;
display: inline-block;
}
.value-props {
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Smite</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700|Quicksand:300,700" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="style.css">
<script type='text/javascript' src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<div class="main">
<h3 id='mainhead'>Lorem ipsum dolor sit amet, consetetur dissentias duo at.</h3>
<p class='subtext'>Lorem ipsum dolor sit amet, consetetur dissentias duo at. Est oratio mentitum similique ne, labore molestie philosophia eu vim. An deleniti iudicabit vis, te vero quaeque volutpat vim, in eum aliquid corpora. Illum euismod atomorum usu ad.</p>
<div class="value-props">
<div class="prop" id='prop1'>
<img class='diploma' src="https://cdn2.iconfinder.com/data/icons/bullet-points/64/Bulletpoint_Bullet_Listicon_Shape_Bulletfont_Glyph_Typography_Bullet_Point_Customshape_Wingding_Custom_Seal_Award_Badge_Certificate_Medal_Star-512.png" width="60px">
<h2>Lorem</h2>
<p>Lorem ipsum dolor sit amet, consetetur dissentias duo at. Est oratio mentitum similique ne, labore molestie philosophia eu vim.</p>
</div>
<div class="prop" id='prop2'>
<img class='diploma' src="https://cdn2.iconfinder.com/data/icons/bullet-points/64/Bulletpoint_Bullet_Listicon_Shape_Bulletfont_Glyph_Typography_Bullet_Point_Customshape_Wingding_Custom_Seal_Award_Badge_Certificate_Medal_Star-512.png" width="60px">
<h2>Lorem</h2>
<p>Lorem ipsum dolor sit amet, consetetur dissentias duo at. Est oratio mentitum similique ne, labore molestie philosophia eu vim.</p>
</div>
<div class="prop" id='prop3'>
<img class='diploma' src="https://cdn2.iconfinder.com/data/icons/bullet-points/64/Bulletpoint_Bullet_Listicon_Shape_Bulletfont_Glyph_Typography_Bullet_Point_Customshape_Wingding_Custom_Seal_Award_Badge_Certificate_Medal_Star-512.png" width="60px">
<h2>Lorem</h2>
<p>Lorem ipsum dolor sit amet, consetetur dissentias duo at. Est oratio mentitum similique ne, labore molestie philosophia eu vim.</p>
</div>
<!-- 2nd row of certificates -->
<div class='rowtwo'>
<div class="prop" id='prop3'>
<img class='diploma' src="https://cdn2.iconfinder.com/data/icons/bullet-points/64/Bulletpoint_Bullet_Listicon_Shape_Bulletfont_Glyph_Typography_Bullet_Point_Customshape_Wingding_Custom_Seal_Award_Badge_Certificate_Medal_Star-512.png" width="60px">
<h2>Lorem</h2>
<p>Lorem ipsum dolor sit amet, consetetur dissentias duo at. Est oratio mentitum similique ne, labore molestie philosophia eu vim.</p>
</div>
<div class="prop" id='prop3'>
<img class='diploma' src="https://cdn2.iconfinder.com/data/icons/bullet-points/64/Bulletpoint_Bullet_Listicon_Shape_Bulletfont_Glyph_Typography_Bullet_Point_Customshape_Wingding_Custom_Seal_Award_Badge_Certificate_Medal_Star-512.png" width="60px">
<h2>Lorem</h2>
<p>Lorem ipsum dolor sit amet, consetetur dissentias duo at. Est oratio mentitum similique ne, labore molestie philosophia eu vim.</p>
</div>
</div>
</div>
</div>
</body>
</html>
谢谢指点先生！ – prostar100
@ prostar100不客气！ –