Computer Science 318

Practice

Open GitHub Desktop (you may need to download the program again if the computers get wiped.)

Couple of things to check in GitHub Desktop.

• Check to see if it says Pull Origin. If it does, click Pull Origin. Why? A pull occurs if you or a collaborator made a change to the repository and pushed the changes. ALWAYS MAKE SURE TO PULL BEFORE CODING!
• If the computers were wiped you made need to reclone your repository to the computer.

With your cs-318 repository selected, Click open in Visual Studio code.

Create a new folder called lab19

Create a new file called index.html in the lab19 folder

Setup your HTML files

Create your stylesheet

Link your stylesheet to the HTML

Change Document in the <title> element to "The Eiger"

Make an images folder and add:

• Alpine
• Eiger
• Grindelwald
• Grindelwald
• Switzerland
• Facebook icon
• Instagram Icon
• Pinterest Icon
• Jungfraujoch

Make a gallery folder in the images folder and add:

• Gallery - Alpine Pano
• Gallery - Alpine
• Gallery Eiger
• Gallery Gorge Rock
• Gallery - Sunrise
• Gallery - Pano

HTML Content

Add a div with a class of parallax

• In the div add the image grindelwald.jpg

Add div with class of overlay

Add a header, main, and footer

At this point you should have div, div, header, main, footer in the body.

In the header add:

div with class of hamburger

• In the div add three <hr>

nav

• a - About - href will link to id for about section
• a - Gallery - href will link to id for gallery section
• a - Climb - href will link to id for routes section
• a - Contact - href will link to id for contact section

h1 - Eiger

div with class of social

• a - <img src="images/facebook.svg" alt="Facebook"> - href https://fb.com
• a - <img src="images/instagram.svg" alt="Instagram"> - href https://www.instagram.com/
• a - <img src="images/pinterest.svg" alt="Pinterest"> - href https://www.pinterest.com/

In the main add:

five sections

Section 1 add:

class - call-to-action

h2 - The Eiger

a - Explore the Mountains - href #contact class="button"

Section 2 add:

class - mountains

id - about

h3 - The Mountain

p - Because of its famous north face, the Eiger is one of the most famous and written about peaks in the world. The battle to climb this face has captivated the interest of climbers and non-climbers alike since the time of the first note worthy attempt in 1934. The Eiger is a striking peak from all sides and a worthy climb by any of its many routes, none of which are particularly easy. The easiest way to the summit is via the West Flank & West Ridge, which is a very complex route of about the same level of difficulty as the Hörnli Arête on the Matterhorn with rock pitches up to III and ice to 40 degrees. Charles Barrington with Christian Almer and Peter Bohren made the first ascent of the Eiger via the West Flank & West Ridge on 11 August 1858.

p - The Eiger is located in the Jungfrau Region of the Berner Oberland. It is normally reached from Interlaken via either Grindelwald or Lauterbrunnen. The starting points of all the routes can be reached by train from either of these towns. A mountain railway goes to Kleine Scheidegg via Alpiglen from Grindlewald and via Wengen from Lauterbrunnen. The famous Jungfrau Railway which accesses Eiger Glacier & Eismeer Stations and the Jungfraujoch starts at Kleine Scheidegg.

Section 3 add:

class - gallery

id - gallery

h3 - Gallery

div

In the div add the following images from the gallery folder:

• alpine-panorama.jpg
• alpine.jpg
• eiger.jpg
• gorge-rock.jpg
• panoramic.jpg
• sunrise.jpg

Section 4:

class - routes

id - routes

h3 - The Routes

three div

In each div add: h4, h5, p, a (class - button, content - Climb It, and href - https://climbingthesevensummits.com/personal-sherpa-climb/)

Content for each div:

Div 1

1. alpine.jpg
2. h4 - West Flank & West Ridge
3. h5 - AD (G4) with III-, 1650m. 6 hours in ascent, 3 to 4hours in descent.
4. p - The West Flank & West Ridge is the easiest route to the summit and the usual descent route for most parties. Route finding on the lower part of the flank can be very difficult, especially in descent if one has not gone up this way initially. Though not that technically difficult it is a big high alpine tour that can be especially serious in poor weather or conditions. Recommended equipment is an ice axe, crampons, 2 ice screws, 2 pitons (or nuts / cams) and 4 to 5 carabiners. There are fixed iron rods on the upper part of the route. Charles Barrington with Christian Almer and Peter Bohren, , made the first ascent of the West Flank & West Ridge on 11 August 1858 (also the first ascent of the peak).

Div 2

1. eiger.jpg
2. h4 - North Face
3. h5 - 1938 Route: ED2 (G14) V-, A0, 60°, 1800m, one to three or more days.
4. p - Since the first ascent of the face in 1938 there have been numerous new routes and variations on the face including many that end on the West Ridge or NE Face and even several Sport Climbing routes low on the face (Eiger NF routes). Still, most climbers seem to be most familiar with and aspire to the original classic 1938 route. But, note that in recent years much of the snow and the ice has melted back so that late in the season the face is often almost bare.

Div 3

1. jungfraujoch.jpg
2. h4 - Mittellegi Ridge
3. h5 - D (G5) with IV & fixed ropes, 4 to 8 hours from Mittellegi Hut
4. p - The Mittellegi Ridge is probably the most popular route on the Eiger. It is a fantastic steep knife edged ridge offering excellent climbing with little or no objective danger. Yuko Maki with Fritz Amatter, Samuel Brawand and Fritz Steuri made the first ascent of the Mittellegi Ridge on 10 September 1921.

Section 5:

class contact

id contact

form

In the form add:

h3 - Contact

label - Name

input - type="text" id="name"

label - Email

input - type="email" id="email"

textarea - Type message here...
Hint: The value attribute will place that text within the textarea at load.

input - type="submit"

Link your input and labels together using id and for attributes

This form is just for practice and will not be submitting anywhere. No need for an action or method attribute.

Footer add:

span - "Copyright <script>document.write(new Date().getFullYear());</script>".
Hint: The <script> is javascript that will automatically created the correct year after the Copyright.

copy the entire social div in the header and paste into the footer.

CSS

First let's comment out the parallax image at the beginning of the body. Use <!-- at the beginning of the line and --> at the end of the line to disable the image.

body

background color #1c2541

font color #fff

font family Arial, Helvetica, sans-serif

margin 0

Set your browser width to about 450 to 500px

img

max-width 100%.
Hint: This will prevent an image from ever being too big for the web page.

.social img

height 2rem

margin .25rem

.hamburger

width 40px

padding .5rem

.hamburger hr

margin .75rem 0

border 2px solid white

header nav

background color #0b132b

position fixed

width 100%

top 0

header nav a

display block

font color #00e3c8

text-align center

text-decoration none

padding 3rem

border 1px solid #5bc0b4

header nav

left -100%.
Hint: This will push the nav off to the left.

header

display flex

Use both justify-content and align-items with one of the following values to achieve the position of elements in the image below: flex-start, flex-end, center, space-around, space-evenly, space-between

Adding Javascript

Create a new file - save as scripts.js

Paste in code below and save:

function toggleNav() {
     let elements = document.getElementsByClassName('toggle-nav');
     for(let i = 0; i < elements.length; i++){
     elements[i].classList.toggle('show');
     }
}

In the head of the HTML document add:

<script src="scripts.js"></script>

Add class="toggle-nav" to the nav

To the hamburger div add:

onclick="toggleNav()"

What does all that javascript do?!
When you click on the hamburger, the onclick attribute tells the browser to run the function toggleNav(). The toggleNav function looks for the class of toggle-nav in the HTML document. If an element has that class, an additional class of "show" is dynamically added. If you click on the hamburger again it will run the function again however, it will reverse the process and take the class of "show" out of the HTML.

header nav.show

left 0

header nav

transition-property left

transition-duration .5s

transition-timing-function ease-in-out

As you can see it slides out from the left, but it isn't in the right spot vertically.

header nav

Change the top value to 4.75rem

Add the class of toggle-nav to the <div class="overlay">.
Hint: Remember when adding two class values to one element, you only used on class attribute and separate the values with a space.

.overlay

width 100%

height 100%.
Hint: We need to add the width and height because it is an empty div. Without them it takes up 0 space.

top 4.75rem

position fixed

background color #0b132b65

Add a transition to the left property that takes .5s and eases in and out

left -100%

.overlay.show.
Hint: There is not a space between overlay and show because we want to select the element with both of those classes.

left 0

Remove the <!-- and the --> that is around the parallax image.

.parallax

position fixed

width 150%

top 0

z-index -1.
Hint: This will push the image behind the <main> content.

header

background color #0b132b85

position fixed

z-index 1

top 0

width 100%

.call-to-action

padding 6rem 1rem 3rem.
Hint: Three values for padding are: top | left & right | bottom

.call-to-action h2

font-size 3rem

.button, input[type=submit]

padding 1rem

background color #00e3c8

color #0b132b

text decoration none

font-weight 900

font-size 1rem

outline none

.button:hover, input:hover[type=submit]

background color #5bc0b4

section

padding 1rem

.routes, .mountains

background color #1c2541

.gallery

background color #fff

h3

color #00e3c8

p

padding 1rem 0

.gallery h3

color #1c2541

.gallery img

padding .5rem 0

.routes div

padding 1rem 0 2rem

.contact

background image switzerland.jpg

background size cover

background position bottom

form

background color #00000080

padding 1rem

label, input[type=text], [type=email], textarea

display block

margin .5rem 0

input[type=text], [type=email], textarea

width 95%

padding .5rem

font-size 1rem

border 1px solid transparent

textarea

height 5rem

font family Arial, Helvetica, sans-serif

font color #0b132b

input:focus[type=text], input:focus[type=email], textarea:focus

outline none

border 1px solid #00e3c8

footer

background color #5bc0b4

font color #0b132b

display flex

Use both justify-content and align-items with one of the following values to achieve the position below: flex-start, flex-end, center, space-around, space-evenly, space-between

Finished mobile styles

Add a media query for a minimum width of 1000px, in which the rest of the CSS will be placed

.hamburger

display none

header nav

position static

background color unset

width unset

header nav a

border none

padding 2rem

display inline-block

header nav a:hover

font color #5bc0b4

text-decoration underline

.social

padding right 2rem

h1

margin left -16rem

.call-to-action

padding 20rem calc((100% - 900px)/2) 5rem

.call-to-action h2

font size 5rem

margin bottom 1rem

p, h3

max-width 900px

margin .5rem auto

.gallery div

max-width 900px

margin 1rem auto

display flex

flex-wrap wrap

In the HTML in the gallery div give the image alpine-panorama.jpg a class of panorama.

.gallery img

display block

width 31%

margin .5rem

padding 0

.gallery .panorama

width 100%

.gallery div

Use both justify-content and align-items(this will prevent image stretching) to achieve the position of elements in image below. Possible values: flex-start, flex-end, center, space-around, space-evenly, space-between.

.routes

display grid

grid-template-columns 1fr 1fr 1fr

grid-template-rows 25px auto

grid-gap 1rem

.routes h3

Using the image below as a guide use grid-area to force the h3 to take up the entire first row of the grid.
Hint: grid-area: row-start / column-start / row-end / column-end;

form

max-width 500px

margin 1rem auto

footer

Use justify-content to achieve the look below. Possible values: flex-start, flex-end, center, space-around, space-evenly, space-between

padding .5rem 1rem

Final Steps

Validate your HTML.

• Navigate to W3C Validator
• Select the validate by file upload tab at the top of the page

Lint your CSS at Jigsaw.w3.org

Now look at GitHub Desktop. You should see all of your files listed out in the left column.

Now you are going to commit your changes.

With all of the files checked. Fill out the Summary field in the bottom left and then click Commit to main.
Committing is staging the files, so they can be pushed to the repository hosted at GitHub.

Now you want to push your changes to the Repository. Now if you access the repository from another computer Lab19 will be there. After you push in the top right of the nav it should say "Fetch Origin" instead of "Push Origin"

Your are Done with Lab19