samdude78/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>South Villag Run Club</title>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="./resources/css/styles.css">
 </head>
 <body>
    <div class="bar">
        <ul>
        <a href>
          <li>Events</li>
        </a>
        <a href>
            <li>Results</li>
        </a>
        <a href>
            <li>Partnering Restaurants</li>
        </a>
        </ul>
    </div>
    <div class="intro">
        <h1>South Village Run Club</h1>
    </div>
    <div class="summary">
        <h2>Meet up. Work out. Celebrate.</h2>
        <p>
            Come join our vibrant community whose focus is training hard and enjoying local post-workout cuisine - guilt-free!
        </p>
        <p>
            South Village Run Club is a free MeetUp group sponsored by
            <a href>City Shoes</a>
        </p>
    </div>
    <div class="photos">
        <img src="./resources/css/tunnel-runners.jpg">
        <img src="./resources/css/meetup-wine.jpg">
        <img src="./resources/css/runners-grayscale.jpg">
    </div>
    <div class="testimonial">
        <h1>"I build my weeknight plans around their events. I can exercise and meet new people every week!"</h1>
        <p>-Bryce R. - financial advisor/frequent runner since 2018</p>
    </div>
    <div class="photos">
        <img src="./resources/css/coffeshop.jpg">
        <img src="./resources/css/marathon-runners.jpg">
        <img src="./resources/css/hangouts.jpg">
    </div>
    <div class="meetup">
        <h1>Come join the fun!</h1>
        <img src="./resources/css/runners-church.jpg">
        <h1>We meet every evening in the city square at 7PM!</h1>
    </div>
    <div class="bar">
        <ul>
            <a href>
                <li>Events</li>
            </a>
            <a href>
                <li>Results</li>
            </a>
            <a href>
                <li>Partnering Restaurants</li>
            </a>
        </ul>
    </div>
 </body>
</html>

## style.css
body {
font-family: Montserrat, sans-serif;
font-size: 16px;
margin: 0px;
background-color: lightsalmon;
}

.bar {
padding-top: 1rem;
background-color: teal;
color: lightsalmon;
}

ul {
    list-style: none;
    margin: 0px;
}

li {
color: lightsalmon;
padding: 0.5rem 1.5rem;
margin-right: 1.5rem;
display: inline-block;
}

.intro {
    height: 30rem;
    padding-top: 1rem;
}

.intro h1 {
    background-color: rgba(0.5, 0.5, 0.5, 0.5);
color: coral;
font-size: 2rem;
margin-top: 10rem;
text-align: center;
padding: 2rem;
}

.summary {
padding: 0 1rem;
}
.summary, .testimonial, .photos, .meetup{
margin: 4em auto;
}

.summary h2 {
color: yellow;
}

.summary p{
color: white;
}

@media only screen and (max-width:1048px) {
.photos img {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
}

.photos img{
    width: 30%;
    margin: 1.5%;
}

.testimonial {
background-color: teal;
color: yellow;
height: 20rem;
padding: 0 1rem;
padding-top: 1rem;
}

.testimonial h1 {
font-size: 2.5rem;
}

.meetup {
    margin-bottom: 2rem;
}

.meetup h1 {
color: yellow;
text-align: center;
}

.meetup img {
width: 50%;
height: auto;
display: block;
margin: auto;
}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>South Villag Run Club</title>
	<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">
	<link rel="stylesheet" type="text/css" href="./resources/css/styles.css">
	</head>
	<body>
	<div class="bar">
	<ul>
	<a href>
	<li>Events</li>
	</a>
	<a href>
	<li>Results</li>
	</a>
	<a href>
	<li>Partnering Restaurants</li>
	</a>
	</ul>
	</div>
	<div class="intro">
	<h1>South Village Run Club</h1>
	</div>
	<div class="summary">
	<h2>Meet up. Work out. Celebrate.</h2>
	<p>
	Come join our vibrant community whose focus is training hard and enjoying local post-workout cuisine - guilt-free!
	</p>
	<p>
	South Village Run Club is a free MeetUp group sponsored by
	<a href>City Shoes</a>
	</p>
	</div>
	<div class="photos">
	<img src="./resources/css/tunnel-runners.jpg">
	<img src="./resources/css/meetup-wine.jpg">
	<img src="./resources/css/runners-grayscale.jpg">
	</div>
	<div class="testimonial">
	<h1>"I build my weeknight plans around their events. I can exercise and meet new people every week!"</h1>
	<p>-Bryce R. - financial advisor/frequent runner since 2018</p>
	</div>
	<div class="photos">
	<img src="./resources/css/coffeshop.jpg">
	<img src="./resources/css/marathon-runners.jpg">
	<img src="./resources/css/hangouts.jpg">
	</div>
	<div class="meetup">
	<h1>Come join the fun!</h1>
	<img src="./resources/css/runners-church.jpg">
	<h1>We meet every evening in the city square at 7PM!</h1>
	</div>
	<div class="bar">
	<ul>
	<a href>
	<li>Events</li>
	</a>
	<a href>
	<li>Results</li>
	</a>
	<a href>
	<li>Partnering Restaurants</li>
	</a>
	</ul>
	</div>
	</body>
	</html>
	body {
	font-family: Montserrat, sans-serif;
	font-size: 16px;
	margin: 0px;
	background-color: lightsalmon;
	}

	.bar {
	padding-top: 1rem;
	background-color: teal;
	color: lightsalmon;
	}

	ul {
	list-style: none;
	margin: 0px;
	}

	li {
	color: lightsalmon;
	padding: 0.5rem 1.5rem;
	margin-right: 1.5rem;
	display: inline-block;
	}

	.intro {
	height: 30rem;
	padding-top: 1rem;
	}

	.intro h1 {
	background-color: rgba(0.5, 0.5, 0.5, 0.5);
	color: coral;
	font-size: 2rem;
	margin-top: 10rem;
	text-align: center;
	padding: 2rem;
	}

	.summary {
	padding: 0 1rem;
	}
	.summary, .testimonial, .photos, .meetup{
	margin: 4em auto;
	}

	.summary h2 {
	color: yellow;
	}

	.summary p{
	color: white;
	}

	@media only screen and (max-width:1048px) {
	.photos img {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	}
	}

	.photos img{
	width: 30%;
	margin: 1.5%;
	}

	.testimonial {
	background-color: teal;
	color: yellow;
	height: 20rem;
	padding: 0 1rem;
	padding-top: 1rem;
	}

	.testimonial h1 {
	font-size: 2.5rem;
	}

	.meetup {
	margin-bottom: 2rem;
	}

	.meetup h1 {
	color: yellow;
	text-align: center;
	}

	.meetup img {
	width: 50%;
	height: auto;
	display: block;
	margin: auto;
	}