diff --git a/css/styles.css b/css/styles.css index e69de29..d339f9c 100644 --- a/css/styles.css +++ b/css/styles.css @@ -0,0 +1,215 @@ +body{ + font-family: "coolvetica", sans-serif; + font-weight: 400; + font-style: normal; + color: black; + font-size: 14px; + margin: auto; + max-width: 375px; +} +nav { + margin: 5px; + display: flex; + flex-direction: row; + flex-wrap: nowrap; + padding: 5px; +} +a{ + font-size: 13px; + color: black; + text-decoration: none; + display: inline-block; + padding: 5px; + justify-content: space-between; + display: block; +} +a:hover { + background: linear-gradient(to right, black, rgb(0, 0, 0) 50%, rgb(255, 0, 136) 50%); + transition: background-position 275ms ease; + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-size: 200% 100%; + background-position: 100%; +} +h1{ + font-family: "coolvetica", sans-serif; + font-weight: 400; + font-size: 60px; + font-style: normal; + padding: 0px; + margin: 2px; +} +strong{ + color: black; +} +:hover strong{ + color: hotpink; + font-style: italic; +} +.light{ + font-family: "coolvetica", sans-serif; + font-weight: 300; + font-size: 18px; + padding-top: 2px; + margin-top: 2px; +} +.verticalLine { + border-left: solid black; + padding-bottom: 15px; +} +p{ + font-family: "mrs-eaves", serif; + font-weight: 400; + font-style: normal; + padding-left: 15px; +} +.container{ + padding-top: 0%; + display: flex; + flex-direction: row; + align-items: center; +} +.created-by{ + font-family: "coolvetica", sans-serif; + font-weight: 300; + font-style: normal; + display: flex; + margin: 10px; + align-items: center; +} +.author{ + display: flex; + font-weight: 700; + font-family: "coolvetica", sans-serif; + font-style: normal; + margin: 10px; + align-items: center; + margin-right: 35px; +} +.styles{ + text-align: center; + padding-bottom: 10px; +} +.styles h2 { + font-family:"coolvetica", sans-serif; + font-weight: 300; + font-style: normal; +} +h3{ + font-family:"coolvetica", sans-serif; + font-weight: 400; + font-style: normal; + font-size: 14px; +} +.slider-container{ + display: flex; + overflow-x: scroll; + overflow-y: hidden; + white-space: nowrap; + height: 130px; + border: solid black 2px; + flex-direction: column; +} +.caracter-map{ + font-family: "coolvetica", sans-serif; + font-weight: 500; + font-style: normal; + font-size: 30px; + padding-top: 10px; +} +.lettres{ + font-family: "coolvetica", sans-serif; + font-weight: 700; + font-style: normal; + font-style: italic; + font-size: 35px; + display: flex; + margin: 10px; + align-items: center; +} +.verticalLine-map{ + border-left: solid black; + padding-bottom: 25px; + margin: 10px; +} +.slider img { + height: 100px; + padding-left: 0px; + padding-top: 10px; +} +input{ + border: solid black 2px; + width: 350px; + display: flex; + height: 130px; + font-family: "coolvetica", sans-serif; + font-weight: 500; + font-style: normal; + font-size: 60px; + outline-color: rgb(255, 0, 136); +} +::placeholder{ + font-family: "coolvetica", sans-serif; + font-weight: 700; + font-style: normal; + font-size: 60px; + padding-left: 7px; +} +.font-type{ + border: solid black 1px; + font-family: "coolvetica", sans-serif; + font-weight: 500; + font-style: normal; + float: right; + padding: 2px; +} +.font-name p{ + padding: 15px; +} +footer{ + background-color: black; + color:white; + min-height: 100%; + max-height: 100%; +} +.font-name{ + font-family: "coolvetica", sans-serif; + font-weight: 400; + font-style: normal; + font-size: 20px; + padding: 15px 15px 5px; + margin: 15px 15px 0 0; +} +footer p{ + font-family: "coolvetica", sans-serif; + font-weight: 400; + font-style: normal; + font-size: 10px; + padding-top: 0px; + margin-top: 0px; +} +.me{ + font-family: "coolvetica", sans-serif; + font-weight: 300; + font-style: normal; + text-align: right; +} +.scroll-left{ + left:0px; + animation-name: scroll-left; + animation-duration: 7s; + font-family: "coolvetica", sans-serif; + font-weight: 400; + font-style: normal; + font-size: 60px; + animation-iteration-count: infinite; + animation-timing-function: linear; + margin: 0; + line-height: 50px; + text-align: center; +} +@keyframes scroll-left{ + from {transform: translateX(375px);} + to {transform: translateX(-375px); } +} diff --git a/fonts/.gitkeep b/fonts/.gitkeep deleted file mode 100644 index e69de29..0000000 diff --git a/img/allfontweights.svg b/img/allfontweights.svg new file mode 100644 index 0000000..5fa3b3a --- /dev/null +++ b/img/allfontweights.svg @@ -0,0 +1,618 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/index.html b/index.html index 7520850..0a6fe11 100644 --- a/index.html +++ b/index.html @@ -3,7 +3,102 @@ - + + + TypoWeb - +
+

Coolvetica

+
+ +
+ +
+

COOLVETICA

+

Coolvetica : Comme helvetica mais plus cool

+
+ + +
+
+

Créé par

+

Raymond Larabrie

+
+
+

+ Coolvetica est un caractère sans empattement, inspiré par les logos + américains des années 1970. C'était une époque où tout le monde + modifiait l'Helvetica avec des boucles «funky», des majuscules mixtes + et des effets. Coolvetica recrée l'aspect du lettrage personnalisé des + années 1970 avec des crénages très serrés et des boucles «funky». +

+
+
+
+
+

14 styles

+

COOLVETICA

+
+
+

TYPEFACE OVERVIEW

+
+
+ tous les epaisseur de typo +
+
+
+

CHARACTER MAP

+
+
+

+ ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopctrstuvwxyz0123456789!"#$%&'()*+ + ,-./:;<=>?@[\]^_`{|~}¡¢£¤¥¦§¨©ª«¬®¯°±²³´¶·¸¹º»¼½¾¿ÀÂÃÄÅÆÇÈÉÊËÌÍÎÏÐÑÒÓÔÕÖ×Ø + ÙÚÛÜÝÞßàáâãäåæçèéêëìíîïðñòóôõö÷øùúûüýþÿĀāĂ㥹ĆćĊċČčĎďđĒēĔĕĖėĘęĚěĞğĠġĢģĦħĨĩ + ĪīĬĭĮįİıIJijĶķĹĺĻļĽľŁłŃńŅņŇňŊŋŌōŎŏŐőŒœŔŕŖŗŘřŚśŞşŠšŢţŤťŦŧŨũŪūŬŭŮůŰűŲųŴŵŶŷŸŹźŻ + żŽžƎƏƒƔƝƠơƯưǝǦǧǴǵǸǹȷɁɂɌɍɣɲˆˇˉ˘˙˚˜˝̨̛̣̦̭̀́̂̃̄̆̇̈̊̋̌̓΄΅Ά·ΈΉΊΌΎΏΐΓΔΘΛΞΠΣΦΨΩάέήίΰαβδζηθικλμξπρ + ςστυχψωϊϋόύώЂЃЄЉЊЋЌЍЎЏБДЖЗИЛУЦЧШЩШЪЫЬЭЮЯбвгджзийлмнптцчшщъыьэюяђѓєљњќѝўџҐґ + ҒғҖҗҘҙқҠҡҢңҪҫγҶҷҺӃӄӇӈӨөӮӯԒԓ֏ḌḍḒḓḤḥḼḽṄṅṊṋṚṛṢṣṬṭẀẁẂẃẄẅẒẓẞẠạẢảẤấẦầẨẩẪẫẬậẮắẰằ + ẲẳẴẵẶặẸẹẻẼẽẾếỀềỂểỄễỆệỈỉỊịỌọỎỏỐốỒồỔổỖỗỘộỚớỜờỞởỠỡỢợỤụỦủỨứỪừỬửỮữỰựỲỳỶỷ–—‘’‚“” + „†‡•…‰‹›⁄⁰⁴⁵⁶⁷⁸⁹₀₁₂₃₄₅₆₇₈₉₩₪₫€₭₮₱₲₴₸₹₺₼₽₾ℓ№℗™⅓⅔⅛⅜⅝⅝⅞∂∏∑−√∞∫≈≠≤≥⋅◊ +

+
+
+
+
+

j t

+
+
+

+ Mélange des formes de lettres grotesques de l'Helvetica avec des formes de + lettres géométriques (j, t) +

+
+
+

+ Les queues du R et du a ont été laissées de côté pour permettre un espacement + encore plus serré. Ce n'est pas une police de texte. Coolvetica est une + police d'affichage pure, destinée aux grands titres et aux titres funky. +

+

+ La Coolvetica possède des symboles mathématiques, des fractions et des + ordinaux numériques. Presque toutes les langues actuelles basées sur + l'alphabet latin sont supportées, ainsi que le grec et le cyrillique. +

+
+

TESTER LA FONTE

+

Coolvetica Regular

+ +
+ + + +