Web Analytics Made Easy -
StatCounter HTML/CSS font facing - CodingForum

Announcement

Collapse
No announcement yet.

HTML/CSS font facing

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • HTML/CSS font facing

    Hi

    This is actually my first post in this forum. I am stuck. I am trying to add a font I downloaded from fontsquirrel into my website (css). I added the font inside my FTP folder (image provided). When I bring up my website from my PC using Firefox, Chrome , and IE I am able to see the "GrutchShaded" font. When I use my work laptop I am not able to see any of the GrutchShaded font. I attached an image of my code. I can use some help on what to code to be able to use the font outside of my PC. I'm a rookie so I hope you can understand what I'm asking here.

    Thanks,

    Mavs

    website:
    Animated Navigation: Design Shack


    Click image for larger version

Name:	GrutchShaded working.jpg
Views:	1
Size:	49.6 KB
ID:	2283633

    Click image for larger version

Name:	font facing.jpg
Views:	1
Size:	41.7 KB
ID:	2283631Click image for larger version

Name:	Font inside FTP.png
Views:	1
Size:	26.7 KB
ID:	2283632


    Font:GrutchShaded.ttf

    https://www.fontsquirrel.com/

  • #2
    Well for starters you don't have the complete font declaration font-squirrel would/should have given you... and such declaration should go at the START of your stylesheet, NOT inside an element declaration.

    THIS:
    Code:
    #navbar{
    @font-face
     font-family:'GrutchShaded';
     src:url('GrutchShaded.ttf') format('truetype');
     font-weight: normal;
     font-style: normal;
    }
    Is broken incomplete gibberish... because a font load using @font-face does NOT go inside a selector like #navbar. It should be BEFORE it... and where's the OTF, SVG, and woff? There should be three or four files, not just the .ttf.

    Did you go here:
    https://www.fontsquirrel.com/fonts/grutchshaded

    and go to the "webfont kit" tab to download that verison? It should have provided this in the example CSS:

    Code:
    @font-face {
        font-family: 'grutchshadedregular';
        src: url('GrutchShaded-webfont.eot');
        src: url('GrutchShaded-webfont.eot?#iefix') format('embedded-opentype'),
             url('GrutchShaded-webfont.woff') format('woff'),
             url('GrutchShaded-webfont.ttf') format('truetype'),
             url('GrutchShaded-webfont.svg#grutchshadedregular') format('svg');
        font-weight: normal;
        font-style: normal;
    
    }
    Which you would put at the START of your stylesheet, NOT inside anything else, just as is.

    When you want to use the font, just say it as part of your normal font-family declaration on the element. Hence the beginning of your CSS should read more like this:

    Code:
    @font-face {
    		font-family: 'grutchshadedregular';
    		src: url('GrutchShaded-webfont.eot');
    		src: url('GrutchShaded-webfont.eot?#iefix') format('embedded-opentype'),
    				 url('GrutchShaded-webfont.woff') format('woff'),
    				 url('GrutchShaded-webfont.ttf') format('truetype'),
    				 url('GrutchShaded-webfont.svg#grutchshadedregular') format('svg');
    		font-weight: normal;
    		font-style: normal;
    
    }
    
    body{
    	background: #f4f1e5;
    	color: #544738;
    }
    
    
    #navbar{
    	float: left;
    	list-style: none;
    	margin-right: 1em; 
    	font-family:GrutchShaded;
    }
    I'm not sure why you thought you needed the extra {} in there (which should have prevented it from working ANYWHERE) much less why you thought the @font-face belonged inside #navbar's declaration.

    Now, that said, you have no doctype, no media target for your stylesheet embeds, multiple stylesheets for nothing, gibberish HTML with more than one BODY and <body> after </html> is closed, <head> elements before you even open <head>... You really might want to learn more about HTML and how to use it properly before diving into webfonts. To that end I'd also suggest using a logical document structure (aka H1 BEFORE the menu) and ditching the HTML 5 rubbish (like NAV) that just introduces pointless redundancies... and really given what you have so far, you don't need the DIV around the UL either since there's not a blasted thing you can do to a div you can't do to that UL. Likewise we have nth-child, so stop throwing classes at everything for no good reason.

    Really this:

    Code:
    <body>
    </body>
     
    </html>
    <body>
    Is invalid nonsensical gibberish.

    Your HTML for what you have so far should probably read more like this:

    Code:
    <!DOCTYPE html><html lang="en"><head><meta charset="utf-8">
    <title>Animated Navigation: Design Shack</title>
    <link
    	rel="stylesheet"
    	href="screen.css"
    	media="screen,projection,tv"
    >
    </head><body>
     
    <ul id="mainMenu">
     <li><a href="#">Home</a></li>
     <li><a href="Page-About/Page-About.html">About</a></li>
     <li><a href="Page-Work/Page-Work.html">Work</a></li>
     <li><a href="Page-Resume/Page-Resume.html">Resume</a></li>
     <li><a href="Page-Tools/Page-Tools.html">Tools</a></li>
     <li><a href="Page-Contact/Page-Contact.html">Contact</a></li>
    </ul>
    	
    <div id="intro">
    	<p>
    		Success-driven professional, strategic planner and pragmatic business partner. A self-motivated and committed visionary, adept at designing, developing and conducting effective training. A professional educator and corporate learning specialist combining a passion for creating and implementing innovative learning.
    	</p>
    <!-- #intro --></div>
    
    </body></html>
    Remember, only ONE EACH of <html>, <head>, </head>, <body>, </body>, and </html> -- IN THAT ORDER!!! -- with NOTHING else in-between them.

    Which is why I pair <!DOCTYPE HTML><html><head>, </head><body> and </body></html> together on single lines, as a reminder that they should only appear once with no tags or text between them! For similar reasons I condense the charset declaration up to the doctype/html/head line since it should appear BEFORE any tags that have text inside them.

    HTML 5 validation will ***** and moan about the inclusion of projection and TV as media targets, **** the validator in that case. There are plenty of devices still in use that will render the page wrong if you don't include those -- and IMHO media types are NONE of the HTML specification's business... apart from saying you should use them, and no, "ALL" is not the answer.

    On your CSS you are declaring a lot of the same values over and over for no good reason. The "cascading" part of CSS lets you use a lot less code as you declare what everything has in common, then override JUST for the ones that are DIFFERENT!

    Likewise, lose the -o- flavors and get some non-prefixed versions in there, that way you're using ACTUAL CSS3, not the pretend vendor specific "for testing purposes only" rubbish. (There's a reason everyone but crApple is doing away with them!)

    Also not sure what in blazes you're trying to do with position:fixed, but I suspect it's not a good thing given what a giant middle finger to accessibility that can be, much less the headaches it can introduce in trying to make a page that adjusts to the content instead of a layout that forces you to write content to fit it.

    In any case, for the above markup, omitting #intro onward, I'd be using something more like:

    Code:
    body{
    	background:#F4F1E5;
    	color:#544738;
    }
    
    
    #mainMenu {
    	list-style:none;
    	padding-right:1em;
    	font:normal 160%/120% "GrutchShaded",sans-serif;
    }
    
    #mainMenu li {
    	display:inline;
    }
    
    #mainMenu a {
    	display:inline-block;
    	padding:0.75em;
    	text-decoration:none;
    	color:#544738;
    	-webkit-transition:All .5s ease;
    	-moz-transition:All .5s ease;
    	transition:All .5s ease;
    }
     
    #mainMenu a:active,
    #mainMenu a:focus,
    #mainMenu a:hover {
    	color:#7EB9BE;
     -webkit-transform:rotate(-10deg) scale(1.2);
     -moz-transform:rotate(-10deg) scale(1.2);
     transform:rotate(-10deg) scale(1.2);
    }
    
    #mainMenu li:nth-child(even) a:active,
    #mainMenu li:nth-child(even) a:focus,
    #mainMenu li:nth-child(even) a:hover {
     -webkit-transform:rotate(10deg) scale(1.2);
     -moz-transform:rotate(10deg) scale(1.2);
     -o-transform:rotate(10deg) scale(1.2);
    }
    ALL the menu anchors share the same transition, so declare that once, not on every .left and .right. Likewise the transform can be overridden, so just declare it globally then override ONLY where it's different.

    ... a few more tips, if you're going to have a common font for text areas, set it once on BODY then adjust off of that only for the things that are different (like the menu) -- don't waste time declaring the font every joe-blasted time you want to use it. AVOID declaring font-sizes in pixels since that's basically telling users to go **** themselves, always include a fallback family when you declare a font -- even a webfont... AVOID webfonts on large areas of flow text as they more often than not compromise legibility -- another giant middle finger to accessibility -- AVOID fonts that are too fancy for their own good for similar reasons; no matter how pretty they might be. See "arsenal" which is one of the lowest legibility fonts out there due to inconsistent bar to slab ratios and overly narrow aspect ratio.
    Walk the dark path, sleep with angels, call the past for help.
    https://cutcodedown.com
    https://medium.com/@deathshadow

    Comment


    • #3
      Please help me explain "webfont kit" - what is it used for ? Thanks a lot

      Comment


      • #4
        Hi there johnlimsy,

        if you go here...

        ...then below...
        GRUTCHSHADED

        ...you should see...
        Specimens | Test Drive | Glyphs | License | Webfont Kit

        Clicking...
        Webfont Kit

        ...should, hopefully, answer your question.

        coothead
        ~ the original bald headed old fart ~

        Comment


        • #5
          First off thank you very much DeathShadow for providing the detailed feedback. About 50% of it I understand and some parts I just got lost. I am going to read it over a few times and do some research. A couple questions. Please forgive me ahead for being so green. How should I be using the cascading portion of css? Do you know of a good article I can read? My reason for calling divs was to be able to call different fonts in different parts of the webpages. Below is what I was using for my index (HTML). Also why am I calling media="screen,projection,tv" ?

          Thanks,
          Mavs


          Code:
          <html>
          <title>Animated Navigation: Design Shack</title>
          <link href="style.css" type="text/css" rel="stylesheet" charset="utf-8" />
          
          <head>
          <meta name="description" content="description">
           
           
          </head>
           
          <body>
          </body>
           
          </html>
          <body>
          
          
              <div id="navbar">
          <nav>
          
          <ul>
           <li class="left"><a href="#">Home</a></li>
           <li class="right"><a href="Page-About/Page-About.html">About</a></li>
           <li class="left"><a href="Page-Work/Page-Work.html">Work</a></li>
           <li class="right"><a href="Page-Resume/Page-Resume.html">Resume</a></li>
           <li class="left"><a href="Page-Tools/Page-Tools.html">Tools</a></li>
           <li class="right"><a href="Page-Contact/Page-Contact.html">Contact</a></li>
           
          </ul>
              
              </nav>
              </div>
          
          </body>
          
          <body>
          <div id="intro"
          <P>
          Success-driven professional, strategic planner and pragmatic business partner. 
          A self-motivated and committed visionary, adept at designing, developing and conducting effective training. 
          A professional educator and corporate learning specialist combining a passion for creating and implementing innovative learning.
          </P>
          </body>
          
          
          </html>
          Last edited by VIPStephan; Sep 30, 2016, 02:59 AM. Reason: added code BB tags

          Comment


          • #6
            You don't need both <div id="navbar"> and <nav> as they are both saying the same thing.

            Get rid of the </body> <body> in the middle of the page as it doesn't belong there.

            You don't need the class="left" and class="right" - you can style the odd and even entries differently directly from the CSS without needing the classes.
            Stephen
            Learn Modern JavaScript - http://javascriptexample.net/
            Helping others to solve their computer problem at http://www.felgall.com/

            Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

            Comment


            • #7
              Hi, DeathShadow

              I tried to follow your lead here, but now I feel things are really messed up. None of the fonts are working? I'm sorry but what is wrong here how come the font is not being called?

              Click image for larger version

Name:	Css no font.jpg
Views:	1
Size:	48.0 KB
ID:	2270500Click image for larger version

Name:	index html.jpg
Views:	1
Size:	46.8 KB
ID:	2270501

              Comment


              • #8
                Well, in the HTML once again you've screwed the pooch -- since you've got ANOTHER <body> after </body></html> -- again, that's GIBBERISH as there can only be ONE EACH of those tags. You do NOT open a second "body' just to add a paragraph, you do it BEFORE the first and ONLY </body>. In that same way you've gone and opened a second <head> for no reason too, and that too is broken nonsensical trash. You can't do that!

                You've also screwed over the <link> tag by giving it multiple href... a link can only have ONE href... and really "style.css" is pretty honking VAGUE. I don't know how or why people use names like that, but stick to a MEANINGFUL name like screen.css which says what media target the stylesheet is FOR. Avoid using vague names on things, it will only bite you in the long-run.

                Really I suspect the multiple href for a single <link> is what's biting you at the moment, it is likely that "style.css' isn't even being loaded since that tag already HAS a href.

                Also, this is 2016, you don't need a type="" attribute if rel="stylesheet" anymore. Technically you never did unless your hosting were misconfigured/outdated 1990's style... they just made it "official" as being optional.

                Finally, make sure the font files -- ALL FOUR -- are in the same directory as the stylesheet.

                All that said, I REALLY think you need to take a step back from the CSS side of things and put some time into learning the structural rules of HTML and "what goes inside what" -- you keep using tags more than once that cannot exist more than once, doubling-down on attributes that can only be used once, etc, etc... If you can't make valid well formed HTML, your CSS is going to be broken rubbish too.
                Walk the dark path, sleep with angels, call the past for help.
                https://cutcodedown.com
                https://medium.com/@deathshadow

                Comment


                • #9
                  deathshadow the HTML I attached was pretty bad. I should at least picked up I didn't close out the </body> and it was a repeat, but regardless I am studying and learning HTML, but I need your help to make this font work on my website. What am I missing???? It works on my home PC but not on my phone, not on work laptop, not on my laptop what am I doing here wrong? I provided some images of HTML, CSS, and website. This is beyond frustrating!!Click image for larger version

Name:	index html.jpg
Views:	1
Size:	52.0 KB
ID:	2270502Click image for larger version

Name:	style sheet.jpg
Views:	1
Size:	47.2 KB
ID:	2270503Click image for larger version

Name:	FTP.png
Views:	1
Size:	44.2 KB
ID:	2270504

                  Comment


                  • #10
                    Your problem is here:
                    Code:
                    #mainMenu {
                    	font-family: 'grutchshadedregular';
                    	list-style:none;
                    	padding-right:1em;
                    	font:normal 160%/120% "GrutchShaded",sans-serif;
                    	
                    }
                    The second font declaration is overriding the first. Should be:

                    Code:
                    #mainMenu {
                    	list-style:none;
                    	padding-right:1em;
                    	font:normal 160%/120% "grutchshadedregular",sans-serif;
                    	
                    }
                    Also, everything from #intro down is invalid/broken on your live copy, but you probably new that... and really these fonts; megabyte apiece plus in some formats, are WAY too big to have any business being used on a website.
                    Walk the dark path, sleep with angels, call the past for help.
                    https://cutcodedown.com
                    https://medium.com/@deathshadow

                    Comment


                    • #11
                      Still No Bueno! It works on my PC in every browser, but not on any other PC, or device? If a user outside of my PC calls the font why would they not be able to see it? Could it be the <Link> or Ref?

                      Comment


                      • #12
                        Your paths are now invalid since you added ../ to the beginning.

                        For example where you have:

                        Code:
                            src: url('../fonts/GrutchShaded-webfont.eot');
                        that now points at (on your online copy)

                        Code:
                        http://mywebspace.quinnipiac.edu/fonts/GrutchShaded-webfont.eot
                        Which is quite obviously 404.... that's what the ../ part does.

                        What you want it to resolve as is:
                        Code:
                        http://mywebspace.quinnipiac.edu/twluciani/fonts/GrutchShaded-webfont.eot
                        Which is where it DOES exist.

                        Assuming your style.css is in /twlucani (which it is) just pull all the ../ from the beginning of those.

                        Code:
                        @font-face {
                            font-family: 'grutchshadedregular';
                            src: url('fonts/GrutchShaded-webfont.eot');
                            src: url('fonts/GrutchShaded-webfont.eot?#iefix') format('embedded-opentype'),
                                 url('fonts/GrutchShaded-webfont.woff') format('woff'),
                                 url('fonts/GrutchShaded-webfont.ttf') format('truetype'),
                                 url('fonts/GrutchShaded-webfont.svg#grutchshadedregular') format('svg');
                            font-weight: normal;
                            font-style: normal;
                        
                        }
                        The default path inside a CSS file is always relative TO that CSS file... so if /fonts is a subdirectory

                        I suspect the only reason it's working for you locally is you installed the font on your system, or ../ is in fact the correct path locally. Generally "up-tree" linking -- aka using ../ -- usually just means there's something wrong with your directory layout and/or sloppy planning.

                        USUALLY when testing webfonts, it's a BAD idea to have it installed on the machine itself as a regular system font.
                        Last edited by deathshadow; Oct 3, 2016, 10:54 PM.
                        Walk the dark path, sleep with angels, call the past for help.
                        https://cutcodedown.com
                        https://medium.com/@deathshadow

                        Comment


                        • #13
                          Deathshadow
                          I provided my code below for CSS and HTML, an image of my FTP how my files and folders are laid out, and link to the font. If you try it on your end does it work. Thank you for the info some good stuff. As I progress here I learn more. It was a rookie move, once I deleted the font from my PC I realized it no longed displayed on my webpage. Let me know if the font works for you, because it is not working for me! I removed my font folder and eliminated ../ and just left "Font so stylesheet knows where to look for font, but why is it not appearing on website???

                          Grutchshaded-Webfont Kit
                          https://www.fontsquirrel.com/fonts/grutchshaded

                          Code:
                          <!DOCTYPE html><html lang="en"><head><meta charset="utf-8">
                          <title>Eportfolio </title>
                          <link rel="stylesheet"
                              media="screen,projection,tv"
                               href="style.css" 
                               type="text/css"
                               />
                          
                          <meta name="description" content="description">
                           
                          </head>
                          
                               <body>
                          
                          <ul id="mainMenu">
                           <li><a href="#">Home</a></li>
                           <li><a href="Page-About/Page-About.html">About</a></li>
                           <li><a href="Page-Work/Page-Work.html">Work</a></li>
                           <li><a href="Page-Resume/Page-Resume.html">Resume</a></li>
                           <li><a href="Page-Tools/Page-Tools.html">Tools</a></li>
                           <li><a href="Page-Contact/Page-Contact.html">Contact</a></li>
                          </ul>
                               </body>
                               <body>
                          <div id="intro">
                              <p>
                                  Success-driven professional, strategic planner and pragmatic business partner. A self-motivated and committed visionary, adept at designing, developing and conducting effective training. A professional educator and corporate learning specialist combining a passion for creating and implementing innovative learning.
                              </p>
                          <!-- #intro --></div>
                          
                          
                               </body>
                          
                          
                          </html>
                          Code:
                          @font-face {
                              font-family: 'grutchshadedregular';
                              src: url('fonts/GrutchShaded-webfont.eot');
                              src: url('fonts/GrutchShaded-webfont.eot?#iefix') format('embedded-opentype'),
                                   url('fonts/GrutchShaded-webfont.woff') format('woff'),
                                   url('fonts/GrutchShaded-webfont.ttf') format('truetype'),
                                   url('fonts/GrutchShaded-webfont.svg#grutchshadedregular') format('svg');
                              font-weight: normal;
                              font-style: normal;
                          
                          }
                          
                          
                          
                          body{
                          background: #f4f1e5;
                             color: #544738;
                             
                          }
                          
                          
                          
                          #mainMenu {
                           
                              list-style:none;
                              padding-right:1em;
                              font:normal 160%/120% "GrutchShaded",sans-serif;
                              
                          }
                          
                          #mainMenu li {
                              display:inline;
                          }
                          
                          #mainMenu a {
                              display:inline-block;
                              padding:0.75em;
                              text-decoration:none;
                              color:#544738;
                              -webkit-transition:All .5s ease;
                              -moz-transition:All .5s ease;
                              transition:All .5s ease;
                          }
                           
                          #mainMenu a:active,
                          #mainMenu a:focus,
                          #mainMenu a:hover {
                              color:#7EB9BE;
                           -webkit-transform:rotate(-10deg) scale(1.2);
                           -moz-transform:rotate(-10deg) scale(1.2);
                           transform:rotate(-10deg) scale(1.2);
                          }
                          
                          #mainMenu li:nth-child(even) a:active,
                          #mainMenu li:nth-child(even) a:focus,
                          #mainMenu li:nth-child(even) a:hover {
                           -webkit-transform:rotate(10deg) scale(1.2);
                           -moz-transform:rotate(10deg) scale(1.2);
                           -o-transform:rotate(10deg) scale(1.2);
                          }
                          #intro {
                          
                          
                           font-weight: normal;
                           font-style: normal;
                              font-size: 200%;
                              position: fixed;
                              top: 200px;
                              bottom: 350px;
                              left:200px;
                              right:0px;
                              width: 1200px;   
                          }
                          #abouthomepage{
                              
                          
                           font-weight: normal;
                           font-style: normal;
                          }
                          a:link{
                          
                              color: black;
                          }
                          
                          #aboutintro {
                          
                           
                           font-weight: normal;
                           font-style: normal;
                              font-size: 300%;
                              
                          }
                          #aboutbody {
                          
                          
                           font-weight: normal;
                           font-style: normal;
                              font-size: 200%;
                              
                          }
                          #workhomepage{
                              
                          
                           font-weight: normal;
                           font-style: normal;
                          }
                          a:link{
                              
                              color: black;
                          }
                          
                          #workintro {
                          
                           
                           font-weight: normal;
                           font-style: normal;
                              font-size: 300%;
                              
                          }
                          #workvideo {
                          
                          
                           font-weight: normal;
                           font-style: normal;
                              font-size: 200%;
                              
                          }
                          #resumehomepage{
                              
                          
                           font-weight: normal;
                           font-style: normal;
                          }
                          a:link{
                          
                              color: black;
                          }
                          
                          #resumeintro {
                          
                          
                           font-weight: normal;
                           font-style: normal;
                              font-size: 300%;
                              
                          }
                          #resumebody {
                          
                           font-family:Arsenal-Bold
                           src:url("Arsenal-Bold.otf");
                           font-weight: normal;
                           font-style: normal;
                              font-size: 200%;
                              
                          }
                          #toolshomepage{
                              
                          
                           font-weight: normal;
                           font-style: normal;
                          }
                          a:link{
                          
                              color: black;
                          }
                          
                          #toolsintro {
                          
                           font-family:Arsenal-Bold
                           src:url("Arsenal-Bold.otf");
                           font-weight: normal;
                           font-style: normal;
                              font-size: 300%;
                              
                          }
                          #toolsbody {
                          
                           font-family:Arsenal-Bold
                           src:url("Arsenal-Bold.otf");
                           font-weight: normal;
                           font-style: normal;
                              font-size: 200%;
                              
                          }
                          #contacthomepage{
                              
                          
                           font-weight: normal;
                           font-style: normal;
                          }
                          a:link{
                          
                              color: black;
                          }
                          
                          #contactintro {
                          
                           font-family:Arsenal-Bold
                           src:url("Arsenal-Bold.otf");
                           font-weight: normal;
                           font-style: normal;
                              font-size: 300%;
                              
                          }
                          #contactsbody {
                          
                           font-family:Arsenal-Bold
                           src:url("Arsenal-Bold.otf");
                           font-weight: normal;
                           font-style: normal;
                              font-size: 200%;
                              
                          }
                          #contactpicture{
                              
                          
                           font-weight: normal;
                           font-style: normal;
                          }
                          a:link{
                              
                              color: black;
                          }
                          Attached Files
                          Last edited by vinyl-junkie; Oct 5, 2016, 02:10 AM. Reason: corrected code tags

                          Comment


                          • #14
                            Ok, I REALLY don't think you're grasping how that CSS embed works... from your pictures they are NOT in a /fonts directory now. Do you keep moving **** around randomly or something?!?

                            If they're in the SAME directory as your CSS file, it's

                            Code:
                            @font-face {
                              font-family: 'grutchshadedregular';
                              src: url('GrutchShaded-webfont.eot');
                              src: url('GrutchShaded-webfont.eot?#iefix') format('embedded-opentype'),
                                   url('GrutchShaded-webfont.woff') format('woff'),
                                   url('GrutchShaded-webfont.ttf') format('truetype'),
                                   url('GrutchShaded-webfont.svg#grutchshadedregular') format('svg');
                              font-weight: normal;
                              font-style: normal;
                            }
                            the path has to be relative to the location of the CSS. STOP moving things around randomly and screwing with the paths!

                            Again as well, everything from #intro down for fonts would be broken since most systems don't have arsenal-bold, so you'd have to webfont include those as well up top.
                            Walk the dark path, sleep with angels, call the past for help.
                            https://cutcodedown.com
                            https://medium.com/@deathshadow

                            Comment

                            Working...
                            X