diff --git a/css/styles.css b/css/styles.css index e69de29..d543a8a 100644 --- a/css/styles.css +++ b/css/styles.css @@ -0,0 +1,202 @@ +@font-face { + font-family: 'Milkman'; + src: url('../fonts/MilkmanLight.woff2') format('woff2'), + url('../fonts/MilkmanLight.woff') format('woff'); + font-weight: 300; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Milkman'; + src: url('../fonts/MilkmanBold.woff2') format('woff2'), + url('../fonts/MilkmanBold.woff') format('woff'); + font-weight: bold; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Milkman'; + src: url('../fonts/MilkmanRegular.woff2') format('woff2'), + url('../fonts/MilkmanRegular.woff') format('woff'); + font-weight: normal; + font-style: normal; + font-display: swap; +} +@font-face { + font-family: 'Appears DEMO'; + src: url('../fonts/AppearsDEMO-Regular.woff2') format('woff2'), + url('../fonts/AppearsDEMO-Regular.woff') format('woff'); + font-weight: normal; + font-style: normal; + font-display: swap; +} + + + +body { +background-image: url(file:///Users/berzanurozen/Desktop/finder/site/Sans%20titre/16-typoweb/img/Noe%CC%81%20Cotter.jpg); +background-size: cover; +padding: 20px; + +} + + h1 { + font-family: 'Milkman'; + font-weight: 300; + font-size: 71px; + text-align: center; + color: rgba(0, 0, 0, 0.603); + margin: 11px; + + } + + h2 { + font-family: 'Appears DEMO'; + font-size: 71px; + text-align: left; + color: white; + font-weight: normal; + font-style: normal; + font-display: swap; + } + + + + h3 { + font-family: 'Appears DEMO'; + font-size: 71px; + text-align: center; + color: white; + opacity: 50%; + font-weight: normal; + font-style: normal; + font-display: swap; + + } + + h4 { + font-family: 'Milkman'; + font-weight: lighter; + font-size: 70px; + margin: auto; + + } + + .about { + + font-family: 'Milkman'; + text-align: left; + font-size: 20px ; + + } + + .nav { + + text-align: center; + + font-size: 24px; + } + + footer { + color: white; + opacity: 50%; + text-align: center; + margin: 0px; + } + + .about-me { + font-size: 13px; + font-family: 'Milkman'; + font-weight: lighter; + margin: initial; + } + + .map { + background-color: white; + opacity: 45%; + width: 300px; + height: 200px; + border: 1px solid black; + overflow: scroll; + overflow: auto; + overflow-x: scroll; + } +.transition { + color: black; + font-family: 'Milkman'; + margin: 0; + padding: 0px; +} +.light { + font-weight: lighter; + font-size: 48px; +} +.regular { + font-size: 58px; +} +.bold { + font-size: 78px; + font-weight: bold; +} + +.discoverme { + background-color: white; + opacity: 45%; + width: 300px; + height: 200px; + border: 1px solid black; + text-align: center; + font-family: 'Milkman'; + font-size: 25px; + + +} + +.container { + display: flex; + flex-direction: row; + justify-content: center; + font-family: 'Socialico Plus Plus'; + font-weight: normal; + font-style: normal; + font-size: 80px; + margin: 0; + opacity: 70%; + color: white; + text-decoration: none; + padding: 30px; + +} + +a { + color: white; + text-decoration: none; +} + +a:visited { + color: white; + text-decoration: none; +} +.logoeikon{ + width: 300%; + +} +.menu { + background-color:rgba(245, 245, 245, 0.377); + margin: 5px; + font-family: 'Appears DEMO'; + + +} +.menu a:visited { + color: white; + + +} +.eikonlogo { +width: 50px; +background-color: rgba(255, 255, 255, 0.623); +margin: 5px; +} \ No newline at end of file diff --git a/fonts/AppearsDEMO-Regular.woff b/fonts/AppearsDEMO-Regular.woff new file mode 100644 index 0000000..2d4792a Binary files /dev/null and b/fonts/AppearsDEMO-Regular.woff differ diff --git a/fonts/AppearsDEMO-Regular.woff2 b/fonts/AppearsDEMO-Regular.woff2 new file mode 100644 index 0000000..10349f7 Binary files /dev/null and b/fonts/AppearsDEMO-Regular.woff2 differ diff --git a/fonts/MilkmanBold.woff b/fonts/MilkmanBold.woff new file mode 100644 index 0000000..8f6e052 Binary files /dev/null and b/fonts/MilkmanBold.woff differ diff --git a/fonts/MilkmanBold.woff2 b/fonts/MilkmanBold.woff2 new file mode 100644 index 0000000..e19ed20 Binary files /dev/null and b/fonts/MilkmanBold.woff2 differ diff --git a/fonts/MilkmanLight.woff b/fonts/MilkmanLight.woff new file mode 100644 index 0000000..d87c8f8 Binary files /dev/null and b/fonts/MilkmanLight.woff differ diff --git a/fonts/MilkmanLight.woff2 b/fonts/MilkmanLight.woff2 new file mode 100644 index 0000000..77f4e08 Binary files /dev/null and b/fonts/MilkmanLight.woff2 differ diff --git a/fonts/MilkmanRegular.woff b/fonts/MilkmanRegular.woff new file mode 100644 index 0000000..4d5cb11 Binary files /dev/null and b/fonts/MilkmanRegular.woff differ diff --git a/fonts/MilkmanRegular.woff2 b/fonts/MilkmanRegular.woff2 new file mode 100644 index 0000000..261bbbb Binary files /dev/null and b/fonts/MilkmanRegular.woff2 differ diff --git a/fonts/SocialicoPlus-Plus.woff2 b/fonts/SocialicoPlus-Plus.woff2 new file mode 100644 index 0000000..0303b64 Binary files /dev/null and b/fonts/SocialicoPlus-Plus.woff2 differ diff --git a/fonts/stylesheetappearsDEMO.css b/fonts/stylesheetappearsDEMO.css new file mode 100644 index 0000000..6182a62 --- /dev/null +++ b/fonts/stylesheetappearsDEMO.css @@ -0,0 +1,9 @@ +@font-face { + font-family: 'Appears DEMO'; + src: url('AppearsDEMO-Regular.woff2') format('woff2'), + url('AppearsDEMO-Regular.woff') format('woff'); + font-weight: normal; + font-style: normal; + font-display: swap; +} + diff --git a/fonts/stylesheetmilkman.css b/fonts/stylesheetmilkman.css new file mode 100644 index 0000000..9a679b7 --- /dev/null +++ b/fonts/stylesheetmilkman.css @@ -0,0 +1,30 @@ +@font-face { + font-family: 'Milkman'; + src: url('MilkmanLight.woff2') format('woff2'), + url('MilkmanLight.woff') format('woff'), + url('MilkmanLight.ttf') format('truetype'); + font-weight: 300; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Milkman'; + src: url('MilkmanBold.woff2') format('woff2'), + url('MilkmanBold.woff') format('woff'), + url('MilkmanBold.ttf') format('truetype'); + font-weight: bold; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Milkman'; + src: url('MilkmanRegular.woff2') format('woff2'), + url('MilkmanRegular.woff') format('woff'), + url('MilkmanRegular.ttf') format('truetype'); + font-weight: normal; + font-style: normal; + font-display: swap; +} + diff --git a/fonts/stylesheetroyallodge.css b/fonts/stylesheetroyallodge.css new file mode 100644 index 0000000..45079b1 --- /dev/null +++ b/fonts/stylesheetroyallodge.css @@ -0,0 +1,9 @@ +@font-face { + font-family: 'Royal Lodge'; + src: url('RoyalLodgeRegular.woff2') format('woff2'), + url('RoyalLodgeRegular.woff') format('woff'); + font-weight: normal; + font-style: normal; + font-display: swap; +} + diff --git "a/img/No\303\251 Cotter.jpg" "b/img/No\303\251 Cotter.jpg" new file mode 100644 index 0000000..0ba1861 Binary files /dev/null and "b/img/No\303\251 Cotter.jpg" differ diff --git a/img/logo-eikon.svg b/img/logo-eikon.svg new file mode 100644 index 0000000..e0603a8 --- /dev/null +++ b/img/logo-eikon.svg @@ -0,0 +1,48 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +Layer 1 + + + + \ No newline at end of file diff --git a/img/milkman.svg b/img/milkman.svg new file mode 100644 index 0000000..d340948 --- /dev/null +++ b/img/milkman.svg @@ -0,0 +1 @@ +abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789.:,;()*!?'@#<>$%&^+-=~ milkman \ No newline at end of file diff --git a/img/milkman_bold.svg b/img/milkman_bold.svg new file mode 100644 index 0000000..7633617 --- /dev/null +++ b/img/milkman_bold.svg @@ -0,0 +1 @@ +milkman BoldabcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789.:,;()*!?'@#<>$%&^+-=~ \ No newline at end of file diff --git a/img/milkman_light.svg b/img/milkman_light.svg new file mode 100644 index 0000000..dac25dd --- /dev/null +++ b/img/milkman_light.svg @@ -0,0 +1 @@ +milkman LightabcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789.:,;()*!?'@#<>$%&^+-=~ \ No newline at end of file diff --git a/index.html b/index.html index 7520850..8d8e982 100644 --- a/index.html +++ b/index.html @@ -3,7 +3,52 @@ - + + + + Milkman - + +

milkman

+
+
Createur
+
Typeface overview
+
Character map
+
Fonte tester
+
+

Createur

+
+

Milkman is a modern take on retro font styles from the 60's and 70's. It takes the vintage curves with added + contrast and modern serifs creating an old school/new school juxtaposition. Milkman uses a "dragging foot" on + the letters "m,n,h,a" as a retro tribute with an off axis "e" and "o" adding a deco touch. Milkman comes in light, + regular and bold. This font is perfect for that vintage logo or layout design.

+
+

Type overview

+

milkman

+

milkman

+

milkman

+

character map

+
+ milkman + light + bold +
+

Fonte tester

+ + + + + + +