<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Popular Programming Languages</title>
</head>
<body>
<div class="container">
<h1>Popular Programming Languages</h1>
<div class="card">
<div class="card-action">
<a href="http://www.w3schools.com/html/html_intro.asp">Home</a>
<a href="http://www.w3schools.com/html/">Why should you code?</a>
</div>
</div>
<div class="row">
<!-- Card Projects -->
<div class="col-md-4">
<div class="card">
<div class="card-image">
<img class="img-responsive" src="http://microlancer.lancerassets.com/v2/services/8b/190b80674b11e4b0077b0e8176ec20/large_html.jpg">
<span class="card-title"><h1>HTML</h1></span>
</div>
<div class="card-content">
<p>HTML, also known as HyperText Markup Language, is the standard language to create web pages. HTML is quite simple to learn and does not have a large learning curve. To give HTML style, you have to use CSS which stands for "Cascading Style Sheets." An easy way to understand HTML and CSS is to think of HTML as the structure/foundation and CSS as the decoration. With CSS, you can change colors, size and many other attributes. Use the links below to learn more about HTML!</p>
</div>
<div class="card-action">
<a href="http://www.w3schools.com/html/html_intro.asp" target="new_blank">About HTML</a>
<a href="http://www.w3schools.com/html/" target="new_blank">Learn HTML</a>
<a href="https://en.wikipedia.org/wiki/HTML" target="new_blank">Wikipedia</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-image">
<img class="img-responsive" src="https://cmsresources.windowsphone.com/devcenter/common/resources/images/games/tech/csharp.png">
<span class="card-title"><h1>C++</h1></span>
</div>
<div class="card-content">
<p>C++ is one of the most popular general programming languages. It is object oriented which allows for better code organization, and just makes more sense in general. C++ is used in desktop applications, servers and other software. Many high profile companies use C++ to create enterprise software. If you would like to learn more about C++, click on one of the links.</p>
</div>
<div class="card-action">
<a href="http://www.cplusplus.com/info/" target="new_blank">About C++</a>
<a href="http://www.learncpp.com/" target="new_blank">Learn C++</a>
<a href="https://en.wikipedia.org/wiki/C%2B%2B" target="new_blank">Wikipedia</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-image">
<img class="img-responsive" src="http://beebom.redkapmedia.netdna-cdn.com/wp-content/uploads/2015/04/java.png">
<span class="card-title"><h1>Java</h1></span>
</div>
<div class="card-content">
<p>Java is also one of the most popular general programming languages. It has many applications, ranging from software development, server-side management, and even Android app development. Java is class based and object oriented. The nice thing about Java is that it is cross-platform, and holds the saying of "write once, run anywhere." If you would like to learn more about Java, check out the links below!</p>
</div>
<div class="card-action">
<a href="https://www.java.com/en/about/" target="new_blank">About Java</a>
<a href="http://www.learnjavaonline.org/" target="new_blank">Learn Java</a>
<a href="https://en.wikipedia.org/wiki/Java_(programming_language)" target="new_blank">Wikipedia</a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
.card {
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}
.card {
margin-top: 10px;
box-sizing: border-box;
border-radius: 2px;
background-clip: padding-box;
}
.card span.card-title {
width: 100%;
color: #fff;
font-size: 24px;
font-weight: 300;
text-transform: uppercase;
background-image: -webkit-gradient(
linear, left top, left bottom, from(rgba(0,0,0,0)),
to(rgba(0,0,0,0.8)), color-stop(.5,#333333)
);
}
.card .card-image {
position: relative;
overflow: hidden;
}
.card .card-image img {
border-radius: 2px 2px 0 0;
background-clip: padding-box;
position: relative;
z-index: -1;
}
.card .card-image span.card-title {
position: absolute;
bottom: 0;
left: 0;
padding: 16px;
}
.card .card-content {
padding: 16px;
border-radius: 0 0 2px 2px;
background-clip: padding-box;
box-sizing: border-box;
}
.card .card-content p {
margin: 0;
color: inherit;
}
.card .card-content span.card-title {
line-height: 48px;
}
.card .card-action {
border-top: 1px solid rgba(160, 160, 160, 0.2);
padding: 16px;
}
.card .card-action a {
color: #ffab40;
margin-right: 16px;
transition: color 0.3s ease;
text-transform: uppercase;
}
.card .card-action a:hover {
color: #ffd8a6;
text-decoration: none;
}
