Patil-143

<main>
	<section class="hero hero--animated">
		<div class="hero__content">
			<h1 class="hero__title">
				<span class="hero__title-text hero__title-text--top">
					cookie
				</span>
				<span class="hero__title-text hero__title-text--bottom">
					dough 
				</span>

Patil-143

<template>
	<div id="app">
		<!-- MAIN CONTENT  -->
		<div class="sun" :style="sunStyle()"></div>
		<div
			class="planet_container"
			:class="`planet_container-${mode}`"
			v-for="(p, i) in planetsFiltered"
			:style="planetContainerStyle(i)"
			@click="onClickPlanetContainer(i)"

Patil-143

<div class="holder">  
  <div class="spinner">
    <div class="panel a"></div>
    <div class="panel b"></div>
    <div class="panel c"></div>
    <div class="panel d"></div>
    <div class="panel e"></div>
    <div class="panel f"></div>
    <div class="panel g"></div>
    <div class="panel h"></div>

Patil-143

CSS Pagination Styles

A Pen by Traore on CodePen.

License.

Patil-143

<svg viewBox="0 0 100 100">
	<g transform="scale(-1 1) rotate(-90 0 100)">
		<g fill="none" stroke="rgba(0,0,0,0.1)">
			<circle cx="50" cy="50" r="46" stroke-width="8" />
			<circle cx="50" cy="50" r="46" stroke-width="6" />
			<circle cx="50" cy="50" r="38" stroke-width="7" />
			<circle cx="50" cy="50" r="38" stroke-width="5" />
			<circle cx="50" cy="50" r="30" stroke-width="6" />
			<circle cx="50" cy="50" r="30" stroke-width="4" />
			<circle cx="50" cy="50" r="22" stroke-width="5" />

Patil-143

- for (i = 0; i < 400; i++)
  .cam

.content
  .zoom
    - for (var l=0; l<18; l++)
      .line
        .cuboid
          - for (var s=0; s<6; s++)
            .side

Patil-143

  <div class="marquee">
    <ul class="marquee-content">
      <li><i class="fab fa-github"></i></li>
      <li><i class="fab fa-codepen"></i></li>
      <li><i class="fab fa-free-code-camp"></i></li>
      <li><i class="fab fa-dev"></i></li>
      <li><i class="fab fa-react"></i></li>
      <li><i class="fab fa-vuejs"></i></li>
      <li><i class="fab fa-angular"></i></li>
      <li><i class="fab fa-node"></i></li>

Patil-143

Custom Keyboard Landing Page with Spline 3D and GSAP Scroll Animations

A Pen by Juxtopposed on CodePen.

License.

Patil-143

<div class="button">
	<div class="hoverzone"></div>
	<div class="sharpshadow"></div>
	<div class="label soft">Soft</div>
	<div class="label sharp">Sharp</div>
</div>

Patil-143

Drive Home (CSS)

Inspired by https://www.youtube.com/watch?v=eKtsY7hYTPg Using CSS instead of GLSL.

A Pen by wheatup on CodePen.

License.