How do I style
in the bootstrap grid via CSS? I was able to change the font-size utilizing “p style” in html but could not figure it out. Can someone please let me know where in the css code I should write the the style in for
? In this case the font size
-<!doctype html>
<!-- The first section div -->
<div class="section">
<div class="container">
<div class="row">
<div class="col-md-6">
<img src="https://s3.amazonaws.com/codecademy-content/projects/shutterbugg/share.png"/> </div>
<div class="col-md-6">
<h1>The Future </h1>
<p style= "font-size:24px"> Share your moments with the people who matter to you most. With Shutterbugg, it's easy to share with the right people. </p>
</div>
</div>
</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>
CSS
/*View the result by visiting http://localhost:8000 in the browser. */
.container {
max-width: 928px;
}
h1, h2, p, a {
font-family: ‘Helvetica Neue Thin’, ‘HelveticaNeue-Thin’, ‘helvetica neue’, helvetica, arial, ‘lucida grande’, sans-serif;
}
.download {
background-color: rgba(238,68,95,0.9);
border: 1px solid black;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
border-radius:5px;
}
h1 {
font-size: 50px;
font-weight: 100;
margin-bottom: 20px;
}
a {
font-size:18px;
font-weight: 200;
}
.main {
height: 550px;
padding-top: 55px;
background-image: url(https://s3.amazonaws.com/codecademy-content/projects/shutterbugg/intro.jpg);
background-size:cover;
}
.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%;
font-size: 34px;
}
.col-md-6 p {
font-size:100px;
}
.download {
background-color: red;
border: 1px solid black;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
}
/*View the result by visiting http://localhost:8000 in the browser. */
.container {
max-width: 928px;
}
h1, h2, p, a {
font-family: ‘Helvetica Neue Thin’, ‘HelveticaNeue-Thin’, ‘helvetica neue’, helvetica, arial, ‘lucida grande’, sans-serif;
}
.download {
background-color: rgba(238,68,95,0.9);
border: 1px solid black;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
border-radius:5px;
}
h1 {
font-size: 50px;
font-weight: 100;
margin-bottom: 20px;
}
a {
font-size:18px;
font-weight: 200;
}
.main {
height: 550px;
padding-top: 55px;
background-image: url(https://s3.amazonaws.com/codecademy-content/projects/shutterbugg/intro.jpg);
background-size:cover;
}
.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%;
font-size: 34px;
}
.col-md-6 p {
font-size:100px;
}
.download {
background-color: red;
border: 1px solid black;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
}
/*View the result by visiting http://localhost:8000 in the browser. */
.container {
max-width: 928px;
}
h1, h2, p, a {
font-family: ‘Helvetica Neue Thin’, ‘HelveticaNeue-Thin’, ‘helvetica neue’, helvetica, arial, ‘lucida grande’, sans-serif;
}
.download {
background-color: rgba(238,68,95,0.9);
border: 1px solid black;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
border-radius:5px;
}
h1 {
font-size: 50px;
font-weight: 100;
margin-bottom: 20px;
}
a {
font-size:18px;
font-weight: 200;
}
.main {
height: 550px;
padding-top: 55px;
background-image: url(https://s3.amazonaws.com/codecademy-content/projects/shutterbugg/intro.jpg);
background-size:cover;
}
.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%;
font-size: 34px;
}
.col-md-6 p {
font-size:100px;
}
.download {
background-color: red;
border: 1px solid black;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
}