Skip to content

Commit

Permalink
Initialize repository with HTML and CSS only
Browse files Browse the repository at this point in the history
  • Loading branch information
@vramdhanie
vramdhanie committed Aug 14, 2020
0 parents commit 8ec9e62
Show file tree
Hide file tree
Showing 5 changed files with 296 additions and 0 deletions.
1 change: 1 addition & 0 deletions .prettierrc
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
{}
27 changes: 27 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
# National Parks

_Sample project for Front End Web Development course at Thinkful_

## Introduction

This starter project is used for illustrating the DOM and using JavaScript to interact with the DOM.

## Getting started

Clone this repository to your local machine.

```bash
git clone https://github.com/vramdhanie/national_parks.git
```

Navigate to the folder containing the repository and start a local server:

```bash
npx lite-server
```

Open the code in your favourite editor. For instance, to open VSCode:

```bash
code .
```
144 changes: 144 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,144 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>JavaScript on your page</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header class="banner">
<h1>National Parks</h1>
</header>
<main>
<section class="park">
<h2>Biscayne National Park</h2>
<div class="location">Florida, United States</div>
<div class="description">
Biscayne National Park encompasses coral reefs, islands and shoreline
mangrove forest in the northern Florida Keys. Its reefs and islands
are accessible only by boat. Dolphins, turtles and pelicans live in
Biscayne Bay Lagoon. The underwater Maritime Heritage Trail links dive
sites, most of them shipwrecks. On Boca Chita Key, Boca Chita
Lighthouse has coastal views. A museum at Convoy Point explains local
ecosystems.
</div>
<button class="rateBtn" title="Add to Favourites">&#9734;</button>
<div class="stats">
<div class="established stat">
<h3>Established</h3>
<div class="value">
June 28, 1980
</div>
</div>
<div class="area stat">
<h3>Area</h3>
<div class="value">
172,971 acres (699.99 km<sup>2</sup>)
</div>
</div>
<div class="rating stat">
<h3>Rating</h3>
<div class="value">
4.7
</div>
</div>
</div>
</section>

<section class="park">
<h2>Grand Canyon National Park</h2>
<div class="location">Arizona, United States</div>
<div class="description">
Grand Canyon National Park, in Arizona, is home to much of the immense
Grand Canyon, with its layered bands of red rock revealing millions of
years of geological history. Viewpoints include Mather Point, Yavapai
Observation Station and architect Mary Colter’s Lookout Studio and her
Desert View Watchtower. Lipan Point, with wide views of the canyon and
Colorado River, is a popular, especially at sunrise and sunset.
</div>
<button class="rateBtn" title="Add to Favourites">&#9734;</button>
<div class="stats">
<div class="established stat">
<h3>Established</h3>
<div class="value">
February 26, 1919
</div>
</div>
<div class="area stat">
<h3>Area</h3>
<div class="value">4,926 km<sup>2</sup></div>
</div>
<div class="rating stat">
<h3>Rating</h3>
<div class="value">
4.8
</div>
</div>
</div>
</section>

<section class="park">
<h2>Gateway Arch National Park</h2>
<div class="location">Missouri, United States</div>
<div class="description">
Gateway Arch National Park, formerly known as the Jefferson National
Expansion Memorial until 2018, is an American national park located in
St. Louis, Missouri, near the starting point of the Lewis and Clark
Expedition.
</div>
<button class="rateBtn" title="Add to Favourites">&#9734;</button>
<div class="stats">
<div class="established stat">
<h3>Established</h3>
<div class="value">
February 22, 2018
</div>
</div>
<div class="area stat">
<h3>Area</h3>
<div class="value">37 ha</div>
</div>
<div class="rating stat">
<h3>Rating</h3>
<div class="value">
4.7
</div>
</div>
</div>
</section>

<section class="park">
<h2>Indiana Dunes National Park</h2>
<div class="location">Indiana, United States</div>
<div class="description">
Indiana Dunes National Park is a United States National Park located
in Northwestern Indiana, managed by the National Park Service. It was
authorized by Congress in 1966 as the Indiana Dunes National
Lakeshore, the name by which it was known until it was designated the
nation's 61st national park on February 15, 2019.
</div>
<button class="rateBtn" title="Add to Favourites">&#9734;</button>
<div class="stats">
<div class="established stat">
<h3>Established</h3>
<div class="value">
February 15, 2019
</div>
</div>
<div class="area stat">
<h3>Area</h3>
<div class="value">60.97 km<sup>2</sup></div>
</div>
<div class="rating stat">
<h3>Rating</h3>
<div class="value">
4.6
</div>
</div>
</div>
</section>
</main>
<script src="index.js"></script>
</body>
</html>
Empty file added index.js
Empty file.
124 changes: 124 additions & 0 deletions style.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,124 @@
@import url("https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300;400;700&display=swap");

* {
box-sizing: border-box;
}

body {
margin: 0;
font-size: 16px;
font-family: "Roboto Condensed", sans-serif;
}

.banner {
background-color: #184031;
padding: 16px;
}

.banner > h1 {
color: #ffffff;
}

main {
padding: 6px;
display: grid;
grid-template-columns: 1fr;
gap: 10px;
margin: 0 auto;
width: 90%;
max-width: 1400px;
}

.park {
box-shadow: 0 0 3px 2px rgba(115, 66, 48, 0.2);
border-radius: 6px;
position: relative;
width: 100%;
max-width: 350px;
margin: 0 auto;
display: flex;
flex-direction: column;
}

.park > h2 {
background-color: #734230;
color: #fcc988;
padding: 4px;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
margin-bottom: 2px;
margin-top: 0;
}

.location {
font-weight: 300;
font-size: 0.8rem;
padding-left: 4px;
}

.description {
margin-top: 4px;
padding: 4px;
flex: 1;
}

.stats {
display: flex;
padding: 4px;
}

.stat {
flex: 1;
margin: 0 2px;
border: solid 1px rgba(59, 161, 124, 0.3);
}

.stat > h3 {
background-color: #3ba17c;
color: #184031;
margin: 0;
padding: 2px;
text-align: center;
}

.stat > .value {
text-align: center;
color: #184031;
font-size: 0.9rem;
padding: 4px;
}

.rateBtn {
position: absolute;
top: 6px;
right: 4px;
cursor: pointer;
background: rgba(255, 255, 255, 0.5);
border: none;
border-radius: 4px;
transition: all 0.5s;
}

.rateBtn:hover {
background: rgba(255, 255, 255, 0.1);
border: solid 1px rgba(255, 255, 255, 0.5);
color: rgba(255, 255, 255, 0.5);
}

@media screen and (min-width: 600px) {
main {
grid-template-columns: repeat(2, 1fr);
}
}

@media screen and (min-width: 900px) {
main {
grid-template-columns: repeat(3, 1fr);
}
}

@media screen and (min-width: 1200px) {
main {
grid-template-columns: repeat(4, 1fr);
}
}

0 comments on commit 8ec9e62

Please sign in to comment.