nav.navbar.navbar-expand-sm.fixed-top.bg
a(href="#top").navbar-brand ‘’
.collapse.navbar-collapse
ul.navbar-nav.ml-auto
li.nav-item
a(href="#about").nav-link about
li.nav-item
a(href="#designer").nav-link designer
li.nav-item
a(href="#feature").nav-link feature
li.nav-item
a(href="#style").nav-link type tester
li.nav-item
a(href="#helvetica").nav-link helvetica
header#top.jumbotron
#swiss
.container
img.helvetica(src="https://drive.google.com/uc?id=1c_zZ6bJkBIFZAA5tIhLrcdE1v9zemvoW", alt="")
.title
h3.fwbold Helvetica.
br
h6.fwlight Neue Haas Grotesk
a(href="#about").explore.at_top.fwbold
section#about
.container
img.swissmap(src="https://simplemaps.com/static/svg/ch/ch.svg", alt="")
.row
.col-12.col-md-6.offset-md-6
h2.fwbold
span.helveticaRed Neue Haas Grotesk
span was Helvetica’s first name.
.col-12.col-md-6
h2.fwlight Helvetica was developed by
span.fwbold.helveticaRed
a.helveticaRed(href="#designer") Max Miedinger
span with
span.fwbold.helveticaRed
a.helveticaRed(href="#designer") Edüard Hoffmann
.row
.secr.col-12.col-md-6
.bar
h2.fwbold.year
span 19
span.helveticaRed 57
.secr.col-12.col-md-6
h2.fwbold.large
span in
span.helveticaRed Switzerland
h2.fwlight Helvetica, the latin word for Swiss, Switzerland.
section#designer
.container
.row
.col-12
h5.fwlight Swiss Typeface Designer
.row
.col-12
h1.fwbold.dname.helveticaRed.designer Max <br> Miedinger
img.max(src="http://www.hypocritedesign.com/wp-content/uploads/2017/02/MaxMiedinger-900x473.jpg", alt="")
.row
.col-12.col-md-6
p.fwlight At the age of sixteen Max became an apprentice typesetter at a book printing office for Jacques Bollmann (in Zürich). After four years as an apprentice, Miedinger enrolled in the School of Arts and Crafts. When he was 26 years old, he went to work for an advertising studio called Globe. Here he worked as a typographer and improved his skills. After ten years of working at Globe, Miedinger then gained employment with Haas Type Foundry as a representative. This is where he made his mark on history and designed the most used typeface of the 20th century, Helvetica.
.col-12.col-md-5
p.fwlight Max Miedinger was a Swiss typeface designer. He was famous for creating the Neue Haas Grotesk typeface in 1957 which was renamed Helvetica in 1960. Marketed as a symbol of cutting-edge Swiss technology, Helvetica went global at once. Between 1926 and 1930 Miedinger trained as a typesetter in Zürich, after which he attended evening classes at the Kunstgewerbeschule in Zürich.
.container.edcontent
.row
.col-12.d-block.d-md-none
h5.fwlight Swiss Typeface Designer
.col-12.col-md-6.offset-md-4.d-none.d-md-block
h5.fwlight Swiss Typeface Designer
.row
.col-12.d-block.d-md-none.designer
h1.fwbold.dname.helveticaRed Eduard <br> Hoffman
img.ed.xs(src="https://multimediaman.files.wordpress.com/2013/05/max-miedinger.jpg", alt="")
.col-12.col-md-4.d-none.d-md-block(style="height: 100%")
p.fwlight.tar Born May 26, 1892 in Zurich, died September 17, 1980 in Basel. After finishing college, Eduard Hoffman, who was fascinated by the beginnings of aviation, completed study trips and internships in Zurich, Berlin, and Munich to learn more about technology and engineering. In 1917 he took on a position at the Hass Typefoundry, which was under the management of his uncle Max Krayer.
img.ed(src="https://multimediaman.files.wordpress.com/2013/05/max-miedinger.jpg", alt="")
.col-12.col-md-6.d-none.d-md-block
h1.fwbold.dname.helveticaRed.designer Eduard <br> Hoffman
.row
.col-12.col-md-10.d-none.d-md-block
p.fwlight He showed great commitment in acquainting himself with a field he had never studied, making typography and typefaces his new line of business. In 1937 he began managing the type foundry as co-director of equal status with his uncle, and after the latter’s death in 1944, he continued as sole manager of the company until retiring in 1965. His son Alfred entered the company in 1951 and energetically supported him. He served as deputy director from 1959 and subsequently took over as managing director in 1968.
.col-12.d-block.d-md-none
p.fwlight Born May 26, 1892 in Zurich, died September 17, 1980 in Basel. After finishing college, Eduard Hoffman, who was fascinated by the beginnings of aviation, completed study trips and internships in Zurich, Berlin, and Munich to learn more about technology and engineering. In 1917 he took on a position at the Hass Typefoundry, which was under the management of his uncle Max Krayer.
.col-12.d-block.d-md-none
p.fwlight Born May 26, 1892 in Zurich, died September 17, 1980 in Basel. After finishing college, Eduard Hoffman, who was fascinated by the beginnings of aviation, completed study trips and internships in Zurich, Berlin, and Munich to learn more about technology and engineering. In 1917 he took on a position at the Hass Typefoundry, which was under the management of his uncle Max Krayer.
section#feature
.container
.row
.col-12.col-md-5.offset-md-7
h5.fwlight Feature
.row
.col-12.col-md-6
h1.fwbold.wrap.helveticaRed A B C D E F G H I J K L M N O P Q R S T U V W X Y Z 1 2 3 4 5 6 7 8 9 0 a b c d e f g h i j k l m n o p q r s t u v w x y z ‘ ? ’ “ ! ” ( % ) [ # ] { @ } / & \ < - + ÷ × = >
.col-12.col-md-5.offset-md-1
.row
.col-12
h2.fwbold
span.helveticaRed Classification:
br
span Neo-Grotesque
br
span Sans-Serif
.col-12
h2.fwbold
span.helveticaRed Helvetica is
br
span Clarity, Hierarchy, Loud, Legibility, Timeless, Order, Grid, Simple Neutral, Versatile, Flexible, Geometric
.row
.col-12
img.anatomy(src="https://drive.google.com/uc?id=10Dtkq7wHuVJ_mya21ho0RZv1K13jocmn", alt="")
//- .row
//- .col-12
//- h1.fwbold.outline
//- span.black H
//- span.black e
//- span.black l
//- span.black v
//- span.black e
//- span t
//- span i
//- span c
//- span a
.row
.col-12
h2.fwbold
span.helveticaRed Characteristic:
br
span Stroke contrast is minimal, horizontal and vertical cut offs, tight spacing between letters, large x-height, & closed apertures
section#style
.container
.row
.col-12.d-none.d-md-block
h5.fwlight Type tester
.col-12.d-block.d-md-none
h5.fwlight.styleborder Type tester
.row
.col-12.col-md-3
h1.fwbold.helveticaRed.glyph Hh
.col-12.col-md-7.d-none.d-md-block.mauto
p.fwlight.helveticaRed Type here to preview text
input.type.fwlight(v-model="previewText")
.box
.bar
.row.fwbox(v-for="(style,id) in fontweightsName" )
.col-12.col-md-3
h2(v-bind:style="fontweightsStyle[id]") {{style}}
.col-12.col-md-9.d-none.d-md-block
h2(v-bind:style="fontweightsStyle[id]") {{previewText}}
section#helvetica
.container
.row
.col-12.col-lg-5
.bar
h2.fwbold.helveticaRed Watch “Helvetica”
p.fwlight "Helvetica" is a feature-length independent film about typography, graphic design and global visual culture. It looks at the proliferation of one typeface as part of a larger conversation about the way type affects our lives. The documentary encompasses the worlds of design, advertising, psychology, and communication, and invites us to take a second look at the thousands of words we see every day.
p.fwlight
i "The real achievement of the film is the way it sharpens your eye in general and makes connections between form and content, and between art and life." - Chicago Tribune
.col-12.col-lg-7
.iframe
iframe(src="https://player.vimeo.com/video/232871579?color=F02D09&byline=0&portrait=0" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="autoplay; fullscreen" allowfullscreen)
View Compiled
$color-helvetica: #F02D09
@mixin size($w,$h)
width: $w
height: $h
@mixin ab_center
position: absolute
top: 50%
left: 50%
transform: translate(-50%, -50%)
//debug
// section
// display: none
*
font-family: helvetica
// border: solid 1px
position: relative
transition: .2s
body, html
margin: 0
padding: 0
width: 100%
height: 100%
font-size: 20px
letter-spacing: -1px
// overflow-x: hidden
section
padding: 100px 0px 50px 0px
overflow: hidden
.fwbold
font-weight: 900
.fwlight
font-weight: 100
.helveticaRed
color: $color-helvetica
.tar
text-align: right
.black
-webkit-text-stroke: 2px black
.navbar
padding-left: 8vw
padding-right: 6vw
background-color: transparent
height: 80px
overflow: hidden
z-index: 10
.navbar-brand, .navbar-nav, .nav-link
color: white
font-weight: 900
margin: 0
padding: 0
vertical-align: middle
&:hover
color: white
// -webkit-text-stroke: 0.5px white
.light
transition: 1s
background-color: #fff
.navbar-brand, .navbar-nav, .nav-link
color: red
font-weight: 900
margin: 0
padding: 0
vertical-align: middle
.nav-link
font-weight: 100
.nav-link
font-weight: 100
.navbar-brand
position: absolute
top: -10px
font-size: 100px
#swiss
transition: initial
position: absolute
&:before,&:after
position: absolute
content: ""
display: block
width: 60px
height: 17px
background-color: $color-helvetica
left: 50%
top: 50%
transform: translate(-50%, -50%)
&:after
transform: translate(-50%, -50%) rotate(90deg)
height: 18px
.jumbotron
position: relative
background-color: $color-helvetica
width: 100%
height: 100vh
border-radius: 0
cursor: initial
.container
width: 100%
height: 100%
.helvetica
width: 80%
+ab_center
opacity: 0
transition: 1s
&:hover
opacity: 1
transform: translate(-50%, -48%)
.title
position: absolute
bottom: 5vh
color: white
text-align: justify
text-justify: inter-word
h3, h6
margin: 0
.explore
position: absolute
right: 0
bottom: 5vh
text-align: center
color: white
opacity: 0
transition: 1s
animation: aniHOVER 2s infinite
&:after
display: block
content: "V"
transform: scale(1.5, 1)
text-decoration: none
// opacity:1 when .explore.at_top, so use &.at_top, a conditional event
&.at_top
opacity: 1
// .bg
// +ab_center
// text-align: right
// bottom: 0
// h1
// font-weight: bold
// letter-spacing: -1.5vw
// line-height: 28vw
// font-size: calc(200px + (26 - 14) * ((100vw - 300px) / (1600 - 300)))
// color: white
// span
// color: black
// .title
// position: absolute
// left: 2.5vw
// top: 100%
// text-align: left
// color: white
// h2
// font-size: 4vw
// letter-spacing: -0.1vw
// font-weight: bold
// margin: 0
// margin-bottom: -1vw
// h3
// font-size: 2.2vw
// letter-spacing: -0.1vw
// font-weight: 100
// margin: 0
#about
a
text-decoration: none
&:hover
color: $color-helvetica
.swissmap
// filter: invert(39%) sepia(80%) saturate(6190%) hue-rotate(355deg) brightness(93%) contrast(104%)
position: absolute
width: 70%
top: 45%
right: -15vw
transform: translateY(-50%)
opacity: .2
.year
font-size: 200px
// .bar
// position: absolute
// width: 10vw
// height: calc(100% - 13vh)
// background-color: $color-helvetica
// top: 50%
// transform: translateY(-55%)
// left: -13vw
.large
font-size: 50px
.secr
margin: auto
#designer
// background-color: $color-helvetica
// color: white
overflow: hidden
.container
.col-12.col-lg-4
p.fwlight.tar
bottom: 0
.designer
margin-bottom: 3vh
.dname
font-size: 14vw
letter-spacing: -5px
line-height: 12vw
left: -10px
z-index: 1
.max
position: absolute
filter: grayscale(100%)
mix-blend-mode: multiply
//multiply
// transform: scaleX(-1)
filter: brightness(1.6)
height: 100%
bottom: 2.2vw
left: 38vw
.edcontent
margin-top: 10vh
.ed
float: right
mix-blend-mode: multiply
//multiply
// transform: scaleX(-1)
filter: brightness(1)
height: 35vw
right: 0
.ed.xs
position: absolute
mix-blend-mode: multiply
//multiply
// transform: scaleX(-1)
filter: brightness(1)
height: 150%
bottom: 0
left: 300px
#feature
.wrap
overflow-wrap: break-word
word-wrap: break-all
hyphens: none
text-align: justify
letter-spacing: -5px
font-size: 50px
margin-bottom: 50px
.anatomy
margin: 100px 0px
left: -3%
width: 100%
.outline
text-align: left
left: -1vw
font-size: 19vw
color: transparent
-webkit-text-stroke: 2px $color-helvetica
#style
p
padding: 0
margin: 0
top: 5px
z-index: 1
.glyph
margin: 0
padding: 0
font-size: 130px
// font-size: 12vw
left: -1vw
.mauto
margin-top: auto
padding-bottom: 1vh
.type
outline: none
width: 500px
padding: 5px
padding-left: 0
border: none
border-bottom: solid 1px #777
margin-bottom: 35px
cursor: pointer
background-color: transparent
&:focus
color: $color-helvetica
// border-bottom: solid 1px $color-helvetica
&::placeholder
color: $color-helvetica
.styleborder
padding: 10px
padding-left: 0
margin-bottom: 30px
border-bottom: solid 1px $color-helvetica
.box
height: 100%
// .bar
// position: absolute
// height: calc(100% - 3vh)
// width: 10vw
// background-color: $color-helvetica
// right: -13vw
.fwbox
margin-bottom: 10px
#helvetica
p, i
.iframe
padding: 56.25% 0 0 0
position: relative
width: 100%
height: 100%
// .bar
// position: absolute
// width: 10vw
// height: calc(100% - 3vh)
// background-color: $color-helvetica
// left: -13vw
@media screen and (max-width: 850px)
html, body
font-size: 16px
letter-spacing: -.5px
@media screen and (max-width: 500px)
html, body
font-size: 14px
letter-spacing: -.3px
@keyframes aniHOVER
0%
color: white
50%
color: $color-helvetica
100%
color: white
View Compiled
$(window).scroll(function(e){
if ($(window).scrollTop()<=0){
$(".explore").addClass("at_top");
$(".navbar").removeClass("bg-light");
$(".navbar").removeClass("light");
// $(".navbar").addClass("navbar-dark");
}else{
$(".explore").removeClass("at_top");
$(".navbar").addClass("bg-light");
// $(".navbar").removeClass("navbar-dark");
$(".navbar").addClass("light");
}
});
var fontdata={
fontweightsName:[
"Light",
"Light Italic",
"Regular",
"Regular Italic",
"Bold",
"Bold Italic"
],
fontweightsStyle:[
"font-weight: 100",
"font-weight: 100; font-style: italic",
"font-weight: 400",
"font-weight: 400; font-style: italic",
"font-weight: 700",
"font-weight: 700; font-style: italic",
],
previewText: "The quick brown fox jumps over the lazy dog.",
}
var vm= new Vue({
el: "#style",
data: fontdata,
});
$(window).mousemove(function(evt){
var x = evt.pageX;
var y = evt.pageY;
console.log(x, y);
$("#swiss").css("left",x+"px");
$("#swiss").css("top",y+"px");
})
$(document).on('click','a',function(event)
{
event.preventDefault();
var target=$(this).attr("href")
$('html,body').animate({
scrollTop: $(target).offset().top
},500);
});
