Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <h1>Michael <dfn title="[Ste-zee-kee]" data-pronunciation>Ste·zy·cki</dfn></h1>
		<p>I’m a designer with an interest in story telling through prototyping, efficiency and accuracy through design systems and the intersection of design, business and technology.</p>
		<dl>
			<dt>Email</dt>
				<dd><a href="mailto:ahoy@stezycki.com" title="Any questions? Send me an email.">ahoy@stezycki.com</a></dd>
			<dt>Web</dt>
				<dd><a href="https://stez.me" title="More details on my site.">stez.me</a></dd>
		</dl>
    <hr class="rule  rule--ornament  rule--signin" data-ornament="&times;">
    <h2><span class="dont-print">✨ </span>Highlights <span class="amp">&amp;</span> Skills</h2>
		<ul>
			<li>Experience in designing products and features for the web and native iOS and Android mobile platforms;</li>
			<li>Proficient in modern design tools like Sketch, Figma to produce design assets and prototyping tools like Principle for communicating and testing ideas;</li>
			<li>Advocate for design systems, creating pattern libraries for reusable design components;</li>
			<li>Ability to communicate and collaborate with engineers, product manangers and other cross-functional stakeholders to solve problems;</li>
      <li>Producing prototypes and using various user testing methods to evaluate a product's usability;</li>
      <li>Ability to throw some HTML and CSS together for proof of concepts in front-end web projects in either Codepen or Github;</li>
			<li>Being available to give and receive prompt feedback;</li>
			<li>Excellent foundational design knowledge: typography, iconography, layouts and color theory.</li>
		</ul>
    <h2><span class="dont-print">💼 </span>Employment</h2>
		<ul>
      <li>
				Product Designer<br>
				<a href="https://theculturetrip.com" title="Location based inspiration and culture from all around the globe."><b>The Culture Trip</b></a><br>
				<em>June 2017&mdash;present</em>
				<ul>
					<li>First member of in-house design team, helped established a basic process of sharing work and feedback with the tech team in Tel Aviv;</li>
					<li>Helped with reviewing and interviewing new design members into the team;</li>
					<li>Worked with engineers from the tech team in Tel Aviv to deliver mobile app and website product features;</li>
					<li>Communicated the importance of an organised design system to key stakeholders, which is being actively worked on now;</li>
					<li>Helped with the roll out of the new brand across the website and key areas for the apps;</li>
					<li>Oversaw the first design efforts for bookable content in the products, primarily on the web;</li>
					<li>Worked alongside the growth squad to oversee product experiments and growth areas regarding conversions;</li>
          <li><a href="https://github.com/culture-trip/culturetrip-ui/pull/162" title="Pull request of committed code.">Commited</a> some code into our shared component library, React Storybook;</li>
          <li>Worked alongside the content operations squad on creating an entirely new web app for managing content production experiences involving our freelancer creator community;</li>
          <li>Currently working with the bookable squad on improving native mobile app and web booking experiences.</li>
				</ul>
			</li>
			<li>
				Product Designer<br>
				<a href="https://foundersfactory.com" title="A Corporate backed incubator and accelerator."><b>Founders Factory</b></a><br>
				<em>October 2016&mdash;May 2017 &middot; 1 Year 8 Months</em>
				<ul>
					<li>First member of in-house design team;</li>
					<li>Helped with reviewing and interviewing new design members into the team;</li>
					<li>Worked closely with a small team of 2&times; engineers and product to design the interface of the first incubated business, Robin, a workplace training app. Robin had a web based dashboard to manage content as well as iOS and Android viewer apps;</li>
					<li>Worked on second incubated business, Carmen, a web based workplace feedback tool. With a small team consisting of 2&times; engineers and a product manager, we conducted user interviews which helped us direct and deliver an early MVP;</li>
					<li>Worked on third incubated business, OnCare, an elderly care platform which eventually spun out and recieved funding from Aviva. I worked on the art direction, the user journeys and prototyped an early web MVP version. We also got to visit a client who used the product and saw first hand how it was being used in the workplace. This was my first experience of a field study.</li>
				</ul>
			</li>
      <li>
				Product Designer<br>
				<a href="https://state.com" title="Share what you think with people who have the same passions."><b>State</b></a><br>
				<em>2014&mdash;2016</em>
				<ul>
          <li><i>Description of key responsibilities coming soon.</i></li>
				</ul>
			</li>
			<li>UX/UI Designer<br>
				<a href="https://twitter.com/wearewonderpl" title="Watch and share what matters."><b>Wonder PL</b></a><br>
				<em>2014&mdash;2014</em>
				<ul>
          <li><i>Description of key responsibilities coming soon.</i></li>
				</ul>
			</li>
			<li>Web Designer<br>
				<a href="https://listers.co.uk" title="The largest privately owned car dealership in the UK"><b>Listers</b></a><br>
				<em>2011&mdash;2013</em>
				<ul>
          <li><i>Description of key responsibilities coming soon.</i></li>
				</ul>
			</li>
		</ul>
		<h2><span class="dont-print">🎓 </span>Education</h2>
		<ul>
			<li>
				BTEC National Diploma in Interactive Media (with Games Design)<br>
				<b>Stratford-upon-Avon College</b><br>
				<em>2007&mdash;2009</em>
        <ul>
          <li>Passed with a Distinction, Distinction, Merit grade overall.</li>
				</ul>
			</li>
		</ul>
              
            
!

CSS

              
                @viewport{
  width:device-width;
}

      /**
       * custom ampersands
       */
      @font-face {
        font-family: Ampersand;
        src: local(Baskerville), local(Palatino), local(Didot), local("Hoefler Text");
        unicode-range: U+0026;
      }
      @font-face {
        font-family: Ampersand;
        src: local(Palatino);
        unicode-range: U+270C;
      }

			:root{
				/* Colours */
				--white:                 #fdfdfd;
				--black:                 #1c1c1c;
        --off-black:             #292929;

        --ampersand-font-family: Ampersand, Georgia, serif;
			}

/* ::selection {
  -webkit-text-stroke: none;
     -moz-text-stroke: none;
          text-stroke: none } */

			html{
				box-sizing: border-box;
				-ms-text-size-adjust:100%;
				-webkit-text-size-adjust:100%;
				min-height:100%;
				overflow-y:scroll;
				font-weight:400;
				font-size:100%;
				line-height:1.45;
				font-family: Constantia, Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif;
				color: var(--black);
				background-color:var(--white);
			}
      @media (prefers-color-scheme: dark) {
        html {
          color: var(--white);
          background: var(--off-black);
        }  
      }
			*,*:before,*:after { box-sizing: inherit; }
			@media screen and (min-width:0px) and (max-width:249px){
				html{
					font-size:75%;
				}
			}
			@media screen and (min-width:250px) and (max-width:319px){
				html{
					font-size:87.5%;
				}
			}
			@media screen and (min-width:1199px){
				html{
					font-size:112.5%;
					line-height:1.65;
				}
			}
			/* @media print,(-o-min-device-pixel-ratio:5/4),(-webkit-min-device-pixel-ratio:1.25),(min-resolution:120dpi){
				html{
					color:#000;
					background-color:#fff;
				}
			} */
			@media print{
				html{
					color:#000;
					background-color:#fff;
				}
				a{
					color: #000;
					text-decoration: underline;
				}
        .dont-print { opacity: 0; display: none }
			}
			body{
				margin:0 auto;
				max-width:40em;
				padding-right:1.5em;
				padding-left:1.5em;
			}
			a{
				color: #738499;
				background:0 0;
			}
			a:focus{
				outline:dotted thin;
			}
			a:active,a:hover{
				outline:0;
			}
			h1,h2,h3,h4,h5,h6,dt {
				font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial, sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol';
			}
			h1{
				margin:.67em 0 .1875em;
				font-size:2em;
			}
			h2{
				font-size:1.5em;
				margin-bottom:.25em;
			}
			h3{
				font-size:1.125em;
				margin-bottom:.333em;
			}
			p{
				font-size:1em;
			}
      .amp {
        font-weight: normal;
        font-style: italic;
        font-family: var(--ampersand-font-family);
      }
			ul{
				margin-bottom: 1em;
			}
			dt{
				font-weight: bold;
				font-size: 0.875em;
			}
			dd{
				margin-left:0;
				margin-bottom: 1em;
			}
			dfn{
				font-style: normal;
				cursor: help;
			}

/**
 * $RULE
 */
.rule {
  position: relative;
  border: none;
  border-bottom-width: 1px;
  border-bottom-style: solid;
}

.rule--dotted   { border-bottom-style: dotted }
.rule--dashed   { border-bottom-style: dashed }

.rule--ornament { position: relative }
.rule--ornament:after { 
  content: "§";
  position: absolute;
    top:   0;
    right: 0;
    left:  0;
  line-height: 0;
  text-align: center
}
.rule--ornament[data-ornament]:after { content: attr(data-ornament) }

.rule--signin { color: var(--off-black); }
@media (prefers-color-scheme: dark) {
.rule--signin { color: var(--white) }}
.rule--signin:after {
  display: block;
  z-index: 1;
  font-variant: small-caps;
  font-weight: 600;
  text-transform: lowercase;
  letter-spacing: 0.1em;
  -webkit-text-stroke: 10px var(--white);
     -moz-text-stroke: 10px var(--white);
          text-stroke: 10px var(--white);
  paint-order: stroke fill;
}
@media (prefers-color-scheme: dark) {
.rule--signin:after { 
  -webkit-text-stroke: 10px var(--off-black);
     -moz-text-stroke: 10px var(--off-black);
          text-stroke: 10px var(--off-black) }}
              
            
!

JS

              
                
              
            
!
999px

Console