Pawelgrzybek.com typography

Developer
Pawel Grzybek
Size
3,616 Kb
Views
60,720
  1. Pawelgrzybek.com typography Previews
  2. Pawelgrzybek.com typography HTML Codes
  3. Pawelgrzybek.com typography CSS Codes

How do I make an pawelgrzybek.com typography?

What is a pawelgrzybek.com typography? How do you make a pawelgrzybek.com typography? This script and codes were developed by Pawel Grzybek on 19 June 2022, Sunday.

Pawelgrzybek.com typography Previews
IQ Test

Pawelgrzybek.com typography - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>pawelgrzybek.com typography</title> <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <header class="header"> <h1 class="header__logo"> <a href="/" class="header__link header__link--logo" title="pawelgrzybek.com">pawelgrzybek.com</a> </h1> <button>burger</button>
</header>
<div class="page"> <h1>Page scrolling in vanilla JavaScript</h1> <p>We have plenty of ways to <a href="">animate things</a> on the web. The answer of which one to use isn’t always easy. Each method comes with pros and cons. Should we use CSS, canvas, <a href="">Web GL</a>, JavaScript requestAnimationFrame or setInterval? Maybe SMIL? Oh no — this one is dead now. Maybe some external libraries like jQuery, GreenSock or VelocityJS? These are just a few possible ways to go. If you are keen to know a little bit more about these methods, I encourage you to read a fantastic article “A Comparison of Animation Technologies” by Sarah Drasner on CSS-Tricks.</p> <ul> <li>Lorem ipsum dolor sit.</li> <li>Lorem ipsum dolor sit.</li> <li>Lorem ipsum dolor sit.</li> <li>Lorem ipsum dolor sit.</li> <li>Lorem ipsum dolor sit.</li> </ul> <h2>Lorem ipsum dolor sit amet, adipisicing elit.</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae <strong>consectetur</strong> totam laborum molestiae! Animi esse ipsum libero magnam dolorem earum harum! At, aliquid voluptate iusto eaque ad assumenda animi pariatur neque, eum quaerat ducimus tempore minima, corporis blanditiis totam ratione impedit.</p> <h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae totam laborum molestiae! Animi esse ipsum libero magnam dolorem earum harum! At, aliquid voluptate iusto eaque ad assumenda animi pariatur neque, eum quaerat ducimus tempore minima, corporis blanditiis totam ratione impedit.</p> <h4>Lorem ipsum <a href="">dolor sit amet</a>, consectetur adipisicing elit.</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae totam laborum molestiae! Animi esse ipsum libero magnam dolorem earum harum! At, aliquid voluptate iusto eaque ad assumenda animi pariatur neque, eum quaerat ducimus tempore minima, corporis blanditiis totam ratione impedit.</p> <h5>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h5> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae totam laborum molestiae! Animi esse ipsum libero magnam dolorem earum harum! At, aliquid voluptate iusto eaque ad assumenda animi pariatur neque, eum quaerat ducimus tempore minima, corporis blanditiis totam ratione impedit.</p> <h6>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h6> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae totam laborum molestiae! Animi esse ipsum libero magnam dolorem earum harum! At, aliquid voluptate iusto eaque ad assumenda animi pariatur neque, eum quaerat ducimus tempore minima, corporis blanditiis totam ratione impedit.</p>
</div>
</body>
</html>

Pawelgrzybek.com typography - Script Codes CSS Codes

html { font-size: 109.375%; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; box-sizing: border-box;
}
@media screen and (min-width: 700px) { html { font-size: 125%; }
}
@media screen and (min-width: 1440px) { html { font-size: 140.625%; }
}
*,
*::before,
*::after { margin: 0; padding: 0; box-sizing: inherit;
}
body { color: #444; font-family: 'Source Sans Pro', sans-serif; font-size: 1rem; font-weight: 400; line-height: 1.6rem; background-size: 100% 28px;
}
@media screen and (min-width: 700px) { body { background-size: 100% 32px; }
}
@media screen and (min-width: 1440px) { body { background-size: 100% 36px; }
}
.page { width: 100%; max-width: calc(700px + 1.6rem); margin: 0 auto; padding: 0 .8rem;
}
@media screen and (min-width: 1440px) { .page { max-width: calc(800px + 1.6rem); }
}
h1, h2, h3, h4, h5, h6, p { margin-bottom: 1.6rem;
}
h1, h2, h3, h4, h5, h6 { color: #000; font-weight: 700;
}
h1:not(:first-child), h2:not(:first-child), h3:not(:first-child), h4:not(:first-child), h5:not(:first-child), h6:not(:first-child) { margin-top: 2.4rem;
}
h1 { font-size: 2.827rem; line-height: 3.2rem;
}
h2 { font-size: 1.999rem; line-height: 2.4rem;
}
h3 { font-size: 1.414rem;
}
h4 { font-size: 1rem;
}
h5 { font-size: .707rem;
}
h6 { font-size: .5rem;
}
a { color: #5887CE; text-decoration: none;
}
a:hover { text-decoration: underline;
}
ul,
ol { margin: 0 1.6rem 1.6rem;
}
.header { display: -webkit-box; display: -ms-flexbox; display: flex;
}
.header__logo { margin-right: auto; font-size: 1rem; line-height: 3.2rem;
}
.header__link { display: block; color: inherit;
}
button { height: 3.2rem; background: transparent; border: none;
}
Pawelgrzybek.com typography - Script Codes
Pawelgrzybek.com typography - Script Codes
Home Page Home
Developer Pawel Grzybek
Username pawelgrzybek
Uploaded June 19, 2022
Rating 3
Size 3,616 Kb
Views 60,720
Do you need developer help for Pawelgrzybek.com typography?

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!

Pawel Grzybek (pawelgrzybek) Script Codes
Name
Siema - keyboard navigation
Siema - add arrows navigation to prototype
Siema - onChange
Siema - update size on container size change
Bricky
Siema - nested carousels
2015-12-06-2
Just grid system
2015.05.09 - 4
2015.05.09 - 2
Create amazing blog posts 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!