A Pen by James Nowland

Developer
James Nowland
Size
6,998 Kb
Views
10,120
  1. A Pen by James Nowland Previews
  2. A Pen by James Nowland HTML Codes
  3. A Pen by James Nowland CSS Codes
  4. A Pen by James Nowland JS Codes

How do I make an a pen by james nowland?

What is a a pen by james nowland? How do you make a a pen by james nowland? This script and codes were developed by James Nowland on 31 October 2022, Monday.

A Pen by James Nowland Previews
IQ Test

A Pen by James Nowland - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>A Pen by James Nowland</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1>Best pratices for fallbacks for an inline SVG.</h1>
<p>The fall backs in the order.</p>
<ol> <li>PNG (96dpi) - pixel hinted.</li> <li>External SVG (retina ready, no hover or on the fly customisations)</li> <li>Inline SVG (amazing.)</li>
</ol>
<a href="#svg" class="logo"><span>James Nowland</span>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="_x31_14x114" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 114 114" enable-background="new 0 0 114 114" xml:space="preserve"><title>James Nowland</title><desc>James' logo.</desc><path d="M102.294 57.234c0-2.505 3.285-5.236 2.908-7.634c-0.385-2.461-4.359-4.048-5.113-6.367 c-0.766-2.363 1.512-5.977 0.397-8.158c-1.124-2.204-5.394-2.48-6.838-4.465c-1.453-1.996-0.404-6.14-2.145-7.882 c-1.741-1.74-5.887-0.691-7.882-2.144c-1.984-1.445-2.262-5.712-4.465-6.838c-2.18-1.114-5.795 1.163-8.156 0.4 c-2.318-0.754-3.905-4.727-6.368-5.114c-2.397-0.377-5.129 2.908-7.633 2.908c-2.506 0-5.235-3.285-7.635-2.908 c-2.461 0.387-4.047 4.36-6.367 5.114c-2.359 0.765-5.976-1.512-8.158-0.397c-2.203 1.125-2.479 5.393-4.465 6.84 c-1.995 1.453-6.14 0.404-7.882 2.144c-1.739 1.742-0.689 5.886-2.144 7.882c-1.445 1.985-5.712 2.261-6.838 4.46 c-1.114 2.18 1.16 5.79 0.4 8.158c-0.754 2.319-4.726 3.906-5.113 6.367c-0.377 2.4 2.91 5.13 2.91 7.63 c0 2.504-3.285 5.235-2.908 7.633c0.388 2.46 4.36 4.05 5.11 6.367c0.766 2.361-1.511 5.977-0.396 8.16 c1.126 2.2 5.39 2.48 6.84 4.467c1.452 1.99 0.4 6.14 2.14 7.881c1.74 1.74 5.88 0.69 7.88 2.15 c1.985 1.44 2.26 5.71 4.46 6.838c2.183 1.11 5.798-1.164 8.158-0.396c2.32 0.75 3.91 4.72 6.37 5.11 c2.398 0.38 5.129-2.91 7.635-2.91c2.504 0 5.23 3.29 7.63 2.91c2.463-0.389 4.05-4.36 6.368-5.112 c2.361-0.769 5.98 1.51 8.16 0.395c2.204-1.122 2.48-5.393 4.465-6.836c1.995-1.454 6.141-0.403 7.882-2.146 c1.741-1.741 0.69-5.887 2.145-7.881c1.444-1.985 5.714-2.264 6.838-4.467c1.114-2.18-1.163-5.795-0.397-8.156 c0.754-2.317 4.729-3.903 5.113-6.366C105.58 62.47 102.29 59.74 102.29 57.234z" class="logo-bg"/><path d="M63.213 98.904c-1.117 0-2.236-0.67-3.317-1.318c-0.988-0.592-2.009-1.203-2.895-1.203 s-1.908 0.612-2.896 1.203c-1.217 0.729-2.5 1.48-3.734 1.286c-1.301-0.204-2.284-1.331-3.233-2.421 c-0.74-0.85-1.506-1.727-2.31-1.986c-0.751-0.244-1.956-0.011-3.094 0.249c-1.443 0.327-2.98 0.573-3.98 0.06 c-1.163-0.592-1.746-1.963-2.309-3.289c-0.443-1.041-0.901-2.119-1.592-2.622c-0.698-0.509-1.87-0.612-3.003-0.714 c-1.429-0.129-2.904-0.26-3.821-1.176c-0.916-0.916-1.048-2.394-1.176-3.82c-0.103-1.135-0.207-2.307-0.715-3.006 c-0.504-0.69-1.582-1.149-2.625-1.594c-1.324-0.562-2.693-1.145-3.286-2.306c-0.586-1.147-0.257-2.59 0.062-3.983 c0.254-1.113 0.519-2.265 0.249-3.093c-0.261-0.803-1.139-1.567-1.987-2.308c-1.089-0.95-2.216-1.934-2.421-3.233 c-0.197-1.259 0.559-2.521 1.288-3.737c0.592-0.988 1.204-2.01 1.204-2.895c0-0.886-0.612-1.908-1.205-2.896 c-0.729-1.218-1.483-2.478-1.287-3.734c0.205-1.301 1.332-2.285 2.422-3.236c0.849-0.74 1.726-1.505 1.986-2.308 c0.27-0.828 0.005-1.979-0.249-3.091c-0.318-1.395-0.647-2.836-0.062-3.984c0.593-1.162 1.962-1.744 3.287-2.307 c1.042-0.443 2.119-0.901 2.623-1.592c0.508-0.698 0.612-1.87 0.715-3.003c0.128-1.428 0.26-2.904 1.176-3.82 c0.917-0.917 2.395-1.05 3.824-1.178c1.132-0.102 2.304-0.207 3.001-0.714c0.689-0.503 1.147-1.581 1.592-2.624 c0.562-1.325 1.146-2.696 2.309-3.29c1.001-0.511 2.538-0.267 3.98 0.062c1.137 0.26 2.34 0.49 3.1 0.25 c0.804-0.261 1.569-1.138 2.311-1.987c0.949-1.089 1.933-2.215 3.233-2.42c1.243-0.193 2.52 0.56 3.73 1.29 c0.988 0.59 2.01 1.21 2.9 1.205s1.906-0.612 2.895-1.204c1.216-0.729 2.496-1.481 3.733-1.287 c1.303 0.2 2.29 1.33 3.24 2.422c0.74 0.85 1.5 1.73 2.31 1.985c0.753 0.24 1.96 0.01 3.095-0.249 c1.442-0.33 2.979-0.574 3.979-0.062c1.162 0.59 1.75 1.96 2.31 3.288c0.442 1.04 0.9 2.12 1.59 2.62 c0.697 0.51 1.87 0.61 3 0.715c1.429 0.13 2.91 0.26 3.82 1.178c0.916 0.92 1.05 2.39 1.18 3.82 c0.102 1.13 0.21 2.31 0.71 3.003c0.503 0.69 1.58 1.15 2.62 1.593c1.325 0.56 2.69 1.15 3.29 2.31 c0.585 1.15 0.26 2.588-0.063 3.981c-0.254 1.114-0.518 2.266-0.248 3.094c0.262 0.8 1.14 1.57 1.99 2.31 c1.089 0.95 2.22 1.94 2.42 3.235c0.198 1.257-0.557 2.517-1.286 3.734c-0.592 0.988-1.204 2.01-1.204 2.9 c0 0.89 0.61 1.91 1.2 2.894c0.73 1.22 1.48 2.48 1.29 3.738c-0.205 1.301-1.331 2.282-2.42 3.23 c-0.848 0.74-1.726 1.505-1.986 2.309c-0.27 0.829-0.006 1.98 0.25 3.096c0.318 1.39 0.65 2.83 0.06 3.98 c-0.594 1.162-1.964 1.744-3.288 2.308c-1.043 0.442-2.121 0.9-2.624 1.592c-0.508 0.699-0.613 1.871-0.715 3.01 c-0.128 1.429-0.26 2.904-1.176 3.82s-2.394 1.049-3.821 1.176c-1.133 0.103-2.306 0.207-3.002 0.71 c-0.692 0.503-1.151 1.582-1.595 2.625c-0.563 1.324-1.146 2.693-2.308 3.287c-0.426 0.218-0.917 0.322-1.503 0.322l0 0 c-0.792 0-1.647-0.195-2.477-0.386c-1.138-0.26-2.341-0.495-3.094-0.248c-0.804 0.261-1.568 1.138-2.309 1.99 c-0.951 1.091-1.935 2.218-3.237 2.422C63.492 98.89 63.35 98.9 63.21 98.904L63.213 98.904z M57.001 95.38 c1.162 0 2.31 0.68 3.41 1.346c1.065 0.64 2.15 1.3 3.06 1.155c0.942-0.147 1.805-1.136 2.639-2.091 c0.829-0.95 1.687-1.934 2.753-2.279c0.978-0.318 2.352-0.065 3.62 0.226c0.81 0.19 1.58 0.36 2.25 0.36l0 0 c0.424 0 0.768-0.07 1.049-0.215c0.838-0.428 1.349-1.627 1.841-2.787c0.497-1.168 1.012-2.377 1.928-3.043 c0.92-0.671 2.231-0.787 3.501-0.9c1.25-0.112 2.543-0.229 3.203-0.887c0.659-0.66 0.774-1.953 0.887-3.203 c0.114-1.271 0.23-2.584 0.902-3.506c0.666-0.914 1.874-1.428 3.042-1.924c1.159-0.492 2.359-1.003 2.789-1.841 c0.42-0.823 0.145-2.028-0.147-3.303c-0.285-1.247-0.58-2.535-0.225-3.628c0.346-1.065 1.33-1.924 2.279-2.754 c0.955-0.832 1.941-1.692 2.089-2.635c0.143-0.899-0.488-1.953-1.155-3.067c-0.661-1.104-1.346-2.246-1.346-3.407 c0-1.163 0.685-2.305 1.347-3.41c0.667-1.114 1.297-2.167 1.154-3.065c-0.147-0.942-1.135-1.804-2.09-2.637 c-0.95-0.829-1.933-1.687-2.278-2.753c-0.355-1.091-0.061-2.38 0.225-3.626c0.292-1.275 0.567-2.48 0.147-3.304 c-0.43-0.838-1.629-1.348-2.789-1.841c-1.167-0.496-2.375-1.009-3.041-1.924c-0.672-0.921-0.789-2.234-0.902-3.502 c-0.112-1.25-0.229-2.543-0.887-3.203c-0.66-0.661-1.954-0.777-3.205-0.889c-1.27-0.114-2.581-0.231-3.502-0.902 c-0.915-0.666-1.429-1.874-1.924-3.041c-0.493-1.161-1.004-2.361-1.843-2.789c-0.731-0.374-1.986-0.155-3.303 0.15 c-1.273 0.29-2.648 0.541-3.625 0.225c-1.066-0.346-1.924-1.329-2.753-2.279c-0.833-0.955-1.695-1.942-2.638-2.091 c-0.918-0.143-2 0.519-3.065 1.157c-1.104 0.662-2.247 1.346-3.408 1.346c-1.163 0-2.305-0.685-3.41-1.347 c-1.065-0.639-2.146-1.3-3.064-1.156c-0.941 0.148-1.803 1.135-2.636 2.09c-0.83 0.951-1.688 1.934-2.754 2.28 c-0.979 0.318-2.354 0.067-3.626-0.225c-1.316-0.3-2.571-0.521-3.303-0.146c-0.84 0.429-1.35 1.629-1.843 2.79 c-0.497 1.167-1.01 2.375-1.924 3.041c-0.921 0.67-2.233 0.788-3.501 0.901c-1.251 0.112-2.545 0.228-3.206 0.89 c-0.66 0.66-0.775 1.952-0.887 3.203c-0.114 1.269-0.231 2.581-0.902 3.502c-0.666 0.915-1.873 1.428-3.041 1.92 c-1.16 0.493-2.36 1.003-2.788 1.841c-0.421 0.825-0.146 2.03 0.15 3.307c0.284 1.25 0.58 2.53 0.23 3.62 c-0.347 1.066-1.33 1.923-2.28 2.752c-0.955 0.833-1.942 1.696-2.091 2.638c-0.142 0.9 0.49 1.95 1.16 3.06 c0.662 1.1 1.35 2.25 1.35 3.41c0 1.161-0.684 2.303-1.346 3.407c-0.668 1.114-1.299 2.168-1.157 3.07 c0.148 0.94 1.14 1.8 2.09 2.637c0.951 0.83 1.94 1.69 2.28 2.752c0.354 1.09 0.06 2.379-0.226 3.62 c-0.292 1.275-0.567 2.48-0.146 3.306c0.428 0.84 1.63 1.35 2.79 1.841c1.168 0.5 2.38 1.01 3.04 1.93 c0.671 0.92 0.79 2.23 0.9 3.504c0.111 1.25 0.23 2.54 0.89 3.203c0.66 0.66 1.95 0.77 3.2 0.89 c1.269 0.11 2.58 0.23 3.5 0.9c0.915 0.67 1.43 1.87 1.92 3.041c0.494 1.16 1 2.36 1.84 2.79 c0.734 0.37 1.99 0.15 3.304-0.146c1.272-0.291 2.646-0.543 3.625-0.226c1.066 0.35 1.92 1.33 2.75 2.28 c0.833 0.95 1.69 1.94 2.64 2.09c0.923 0.15 2-0.517 3.064-1.155C54.696 96.07 55.84 95.38 57 95.383L57.001 95.383z M68.343 65.686c-0.285 0.478-0.726 0.812-1.319 1.002c-0.382 0.129-0.865 0.213-1.448 0.254c-0.583 0.045-1.119 0.086-1.608 0.13 v2.102h15.341V67.07c-0.657-0.043-1.173-0.105-1.543-0.191c-0.371-0.083-0.812-0.232-1.32-0.443 c-0.616-0.256-1.051-0.608-1.305-1.066c-0.255-0.457-0.383-1.057-0.383-1.799V47.244c0-3.12-0.726-5.618-2.18-7.496 c-1.453-1.876-3.687-2.816-6.7-2.816c-1.356 0-2.577 0.17-3.66 0.51c-1.082 0.339-2.017 0.762-2.801 1.27 c-0.679 0.445-1.399 1.023-2.165 1.734c-0.762 0.711-1.399 1.32-1.909 1.83L55 42v-4.645l-0.129-0.445l-12.603 0.701v1.971 c0.657 0.07 1.63 0.21 2.91 0.446c1.282 0.23 2.1 0.47 2.43 0.701c0.531 0.38 0.96 0.89 1.29 1.51 C49.233 42.87 50 43.52 50 44.198V65.01c0 4.307-0.946 7.438-1.636 9.391c-0.689 1.949-1.84 2.926-3.454 2.93 c-0.318-0.53-0.651-1.075-1.001-1.639c-0.352-0.562-0.696-1.033-1.036-1.416c-0.382-0.444-0.827-0.808-1.337-1.08 c-0.508-0.277-1.091-0.416-1.75-0.416c-0.976 0-1.718 0.346-2.228 1.033c-0.511 0.69-0.765 1.491-0.765 2.4 c0 1.02 0.48 1.91 1.43 2.657C39.183 79.62 40.6 80 42.49 80c1.825 0 3.495-0.377 5.013-1.131 c1.517-0.752 2.881-1.84 4.088-3.262c1.125-1.336 2.026-3.028 2.707-5.075C54.977 68.48 55 66.29 55 63.961v-18.5 c0.191-0.34 0.677-0.79 1.092-1.353c0.417-0.562 0.975-1.088 1.676-1.576c0.723-0.508 1.554-0.938 2.487-1.288 c0.938-0.352 1.968-0.527 3.097-0.527c1.51 0 2.79 0.6 3.84 1.815C68.246 43.74 69 45.46 69 47.688v16.135 C69 64.59 68.63 65.21 68.34 65.686z" class="motif"/></svg></a> <script src="js/index.js"></script>
</body>
</html>

A Pen by James Nowland - Script Codes CSS Codes

.logo { /*basic image replacement + logo*/ background-size: contain; display: block; overflow: hidden; margin: 0 5.25em 0 0; float: left; position: absolute; top: 0.5em; left: 1em; width: 5em; height: 5em; text-indent: -9999em; /*worst case senario, no javascript, no-svg and no inline svg. Likely on a 96dpi device or an old desktop. */ /*if they can have svg this is good!*/ /*They can use inline svg!*/ /*Show some responsiveness benifits*/
}
.no-inlinesvg .logo, .no-js .logo { background-image: url(http://jamesnowland.com/2013/static/img/jamesnowland-logo.png);
}
.svg .logo { background-image: url(http://jamesnowland.com/2013/static/img/jamesnowland-logo.svg);
}
.inlinesvg .logo { background: none; text-indent: 0;
}
.inlinesvg .logo span { display: none;
}
@media (min-width: 54em) { .logo { position: inherit; width: 6.625em; height: 6.625em; }
}
/*Fun fact: inline logo svg to change colours via css*/
svg .logo-bg { fill: #C5003E; -moz-transition: all 800ms ease-in; -o-transition: all 800ms ease-in; -webkit-transition: all 800ms ease-in; transition: all 800ms ease-in;
}
svg .motif { fill: #fff; -moz-transition: all 800ms ease-in; -o-transition: all 800ms ease-in; -webkit-transition: all 800ms ease-in; transition: all 800ms ease-in;
}
svg:hover .logo-bg { fill: #B8DDE1;
}
svg:hover .motif { fill: #000;
}
body { background: #222; color: #B8DDE1; width: 90%; max-width: 350px; margin-left: auto; margin-right: auto;
}

A Pen by James Nowland - Script Codes JS Codes

// This is a way to ensure high dpi devices look great.
//
A Pen by James Nowland - Script Codes
A Pen by James Nowland - Script Codes
Home Page Home
Developer James Nowland
Username jnowland
Uploaded October 31, 2022
Rating 3
Size 6,998 Kb
Views 10,120
Do you need developer help for A Pen by James Nowland?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

James Nowland (jnowland) Script Codes
Name
Pure CSS Spinner
CSS3 Stroke and Gradient Text
Ad Folding without regions
Three Heading Solutions
Letting.js Demo using vanilla js.
Login Form CSS only validation
Lorem pixel Images
Hamburger and Search CSS Animations
Smart Ratio CSS Photo Grid
Dribble Button CSS Rebound
Create amazing SEO content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!