Skip to content

Instantly share code, notes, and snippets.

@oliverdelacruzm

oliverdelacruzm/index.html Secret

Created February 23, 2023 17:29
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save oliverdelacruzm/956499c0373a1f5eccfa4e43c6a1a410 to your computer and use it in GitHub Desktop.
Save oliverdelacruzm/956499c0373a1f5eccfa4e43c6a1a410 to your computer and use it in GitHub Desktop.
Download ZIP
Responsive Club Webpage Project
Raw
index.html
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./resources/styles.css">
<title>City Shutter Bugs</title>
</head>
<body>
<header>
<div class="header-image">
<img src="./resources/images/bug-logo.png" alt="bug logo">
</div>
</header>
<div class="banner-wrapper">
<div class="banner-image">
<img src="./resources/images/final-nyc-aerial-view.jpg" alt="banner photo displaying aerial view of new york city">
</div>
</div>
<div class="caption">
<p>we love shooting.</p>
<p>every saturday morning.</p>
<p>join us.</p>
</div>
<div class="three-img-wrapper">
<div class="image-of-three">
<img src="./resources/images/nyc-street-cab.jpeg" alt="photo of a yellow cab in new york city">
</div>
<div class="image-of-three">
<img src="./resources/images/brooklyn-bridge.jpeg" alt="photo of the brooklyn bridge">
</div>
<div class="image-of-three">
<img src="./resources/images/central-park-photo.jpeg" alt="images of photography in central park">
</div>
</div>
<div class="caption">
<p>a different borough each week.</p>
<p>9 - 11 am</p>
</div>
<div class="contact-us">
<button>contact us</button>
</div>
<div class="banner-wrapper">
<div class="banner-image">
<img src="./resources/images/banner-photographer.jpg" alt="image of a photographer that detailing meeting locations">
</div>
</div>
<footer>
<p>&copy; Oliver De La Cruz 2023. Photos from UnSplash.</p>
</footer>
</body>
</html>
Raw
styles.css
html, body {
margin: 0;
padding: 0;
}
header, .banner-wrapper {
display: flex;
justify-content: center;
width: 100%;
margin: 0 auto;
}
.header-image {
width: 10%;
height: 100%;
display: flex;
text-align: center;
max-width: 55px;
}
header img {
width: 100%;
margin: 3vw auto;
}
.banner-image {
width: 95%;
height: 100%;
display: flex;
text-align: center;
}
.banner-image img {
margin: 0 auto;
width: 100%;
}
.caption {
font-family: American Typewriter, serif;
font-size: 5vw;
text-align: center;
font-weight: 500;
line-height: .9rem;
margin: 10vw auto;
}
.three-img-wrapper {
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
}
.image-of-three {
flex-basis: 25%;
text-align: center;
display: flex;
}
.image-of-three img {
text-align: center;
overflow: hidden;
border-radius: 7%;
width: 100%;
}
.contact-us {
margin-bottom: 10vw;
text-align: center;
}
button {
font-family: American Typewriter, serif;
font-size: 4vw;
text-align: center;
font-weight: 500;
background-color: #fff;
}
button:hover {
background-color: rgb(248, 247, 244);
}
footer {
height: auto;
margin: 0 auto;
padding: 0;
}
footer p {
font-family: American Typewriter, serif;
font-size: 3vw;
text-align: center;
font-weight: 500;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment