A Pen by Stephy

Thumbnail
This awesome code was written by blindingstars, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright blindingstars ©

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  Stephy</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css?family=Lato|Montserrat:400,700" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <header class="mb-5">
	<div class="container">
		<h1>MCC Digital Media Courses</h1>
	</div>
</header>
<main class="container">
	<h2 class="mt-5">DGM Courses</h2>
	<div class="card-set my-4">
		<div class="card dgm275">
			<a href="https://courses.mccdgm.net/dgm275" class="card-img-link">
			  <img class="card-img-top" src="https://courses.mccdgm.net/images/dgm275.jpg" alt="DGM275">
			</a>
			<div class="card-block">
				<h4 class="card-title">
					<strong>
						<a href="/dgm290">DGM275:</a>
					</strong>
					Portfolio Design
				 </h4>
				<p class="card-text">
				  Portfolio Design prepares students to present work for college transfer, to employers and to potential clients. Students will set up and design a web-based portfolio. Classes cover presentation techniques, visual presentation, interviewing, resumes, cover letters, requests for letters of recommendation, and a mock interview.
				</p>
				<p class="card-text small text-muted">Fall 2017 (online)</p>
			  </div>
		</div>

		<div class="card new dgm290">
			<a href="https://courses.mccdgm.net/dgm290" class="card-img-link">
			  <img class="card-img-top" src="https://courses.mccdgm.net/images/dgm290.png" alt="DGM290">
			</a>
			<div class="card-block">
				<h4 class="card-title">
					<strong>
						<a href="https://courses.mccdgm.net/dgm290">DGM290:</a>
					</strong>
					Command Line for Web Developers
				 </h4>
				<p class="card-text">
				  In Command Line for Web Developers, students will become familiar with UNIX command line tools. Using automated build tools and task runners, students will be able to create and deploy static websites. Students will also learn how to use version control to work with teams and manage projects.
				</p>
				<p class="card-text small text-muted">Spring 2018 (online)</p>
			  </div>
		</div>
		
	</div>
</main>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/blindingstars/a-pen-by-stephy-ZyJVOd */
body {
  background: #eee;
}

h1, h2 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
}

h1 {
  font-size: 3em;
  margin: 0;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

header {
  padding: 80px 40px;
  background-color: #4b3190;
  background-image: url(http://mccdgm.net/img/design.jpg);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-blend-mode: overlay;
  text-shadow: 0.075em 0.075em 0.125em rgba(0, 0, 0, 0.6);
  box-shadow: inset 0 0 500px 500px rgba(0, 0, 0, 0.6);
}

.card {
  overflow: hidden;
  position: relative;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}
.card, .card-block {
  border: 0;
}
.card:hover {
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}
.card.new:before {
  content: 'NEW';
  position: absolute;
  top: 1rem;
  right: -2rem;
  color: #fff;
  font-weight: bold;
  letter-spacing: 0.05em;
  padding: 0.25em 3em;
  background-color: #fdbb30;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  z-index: 50;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}
.card-img-link {
  display: block;
  position: relative;
  background-color: #4b3190;
}
.card-img-link:before {
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  content: '';
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  background: transparent;
  mix-blend-mode: color;
  z-index: 25;
}
.card-img-link:hover:before {
  background: #4b3190;
}
.card-img-link:hover img {
  opacity: 0.25;
}
.card-img-top {
  width: 100%;
  height: auto;
}
.card-set {
  display: flex;
  flex-wrap: wrap;
  margin: -1rem;
}
.card-set .card {
  margin: 1rem 1rem 3rem;
  flex: 0 0 1;
}

a {
  color: #4b3190;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
a:hover {
  color: #7865ac;
  text-decoration: none;
}

@media screen and (max-width: 576px) {
  .card-set {
    display: block;
  }
}
@media screen and (min-width: 768px) {
  .card-set .card {
    flex-basis: 100%;
  }
}
@media screen and (min-width: 992px) {
  .card-set .card {
    flex-basis: calc(50% - 2rem);
  }
}
@media screen and (min-width: 1200px) {
  .card-set .card {
    flex-basis: calc(33.333% - 2rem);
  }
}

Comments