I'm on step one on Shutterbug. Everything smooth other than I can't replicate the effect that the model uses to get the button to have a nice smooth shadow. I've 'inspected element' to see what has been done, and I think I've replicated it, but I'm not getting any action.
What am I missing?
Many thanks,
Charlie.
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="https://s3.amazonaws.com/codecademy-content/projects/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- The main section -->
<div class="main">
<div class="container">
<h1>Introducing Shutterbugg</h1>
<h2>Capture the moments that matter.</h2>
<a class="download" href="#">Download Shutterbugg</a>
</div>
</div>
<!-- The first section div -->
<div class="section">
<div class="container">
</div>
</div>
<!-- The second section div -->
<div class="section">
<div class="container">
</div>
</div>
<!-- The third section div -->
<div class="section">
<div class="container">
</div>
</div>
<div class="store section container">
<h2>Available for iPhone, iPad, and Android.</h2>
<img src="https://s3.amazonaws.com/codecademy-content/projects/shutterbugg/app-store.png" width="185px" />
<img alt="Get it on Google Play" src="https://s3.amazonaws.com/codecademy-content/projects/shutterbugg/google-play.png" width="159px" />
</div>
<!-- The footer div -->
<div class="footer">
<div class="container">
</div>
</div>
</body>
</html>
.container {
max-width: 928px;
}
h1, h2, p, a {
font-family: 'Helvetica Neue Thin', 'HelveticaNeue-Thin', 'helvetica neue', helvetica, arial, 'lucida grande', sans-serif;
}
h1 {
font-size: 64px;
font-weight: 100;
margin-bottom: 20px;
}
a {
font-size:18px;
font-weight: 200;
}
.download{
border-radius: 3px;
background-color:rgba(238,68,95,0.9);
color: #FFF;
padding: 8px 30px;
position: relative;
transition: box-shadow 0.5s;
top: 30px;
}
.main {
height: 550px;
padding-top: 55px;
background: url(https://s3.amazonaws.com/codecademy-content/projects/shutterbugg/intro.jpg) no-repeat fixed center;
}
.main p {
font-size: 26px;
font-weight: 200;
margin-bottom: 40px;
}
.section .row {
padding-top: 50px;
padding-bottom: 50px;
border-bottom: 1px solid #dbdbdb;
}
.store {
text-align: center;
border-bottom: 0px;
padding-bottom:100px
}
.footer {
border-top: 1px solid #dbdbdb;
background-color: #f3f3f3;
padding: 20px 0px 80px;
}
.footer ul {
list-style-type: none;
padding-left: 0;
}
.footer li {
color: #999;
font-weight: 600;
}
@media (max-width: 500px) {
.col-md-6 img {
padding: 50px;
width: 100%;
}
}