Daren Prince
  • Home
  • Books
  • Meet Daren
  • Media
  • Swag
  • Blog
  • Collabs
  • Support the Author
  • Developers
  • Contact
Daren Prince
Avatar Guest
  • Dashboard
  • Account
Style Guide
  • Hero
  • Banner
  • Book Cover
  • Testimonials
  • Downloads
  • Viewer
  • 3D Book Viewer
  • Book Tabs
  • Containers
  • Buttons
  • Forms
  • Cards
  • Modals
  • Alerts
  • Toggles

Parallax Hero

Scroll the page to see a static background parallax effect in action.

Scroll-Triggered Video

As you scroll, the background video fades in for dynamic storytelling.

Auto-Zoom Hero

The background slowly zooms for dramatic effect without reacting to scroll.

Hero

Function: top-of-page call to action.

Tech Specs: styled in scss/components/_hero.scss.

Implementation:

<section class="hero">...</section>

Banner

Promotional callout with image and action.

New Release

Learn More

Banner

Function: promotional callout with image and link.

Tech Specs: styled in scss/components/_banner.scss.

Implementation:

<section class="banner">...</section>

Book Details Wrapper

Game On! cover

Your move.
Select a format.

No gimmicks. No games. Just real results. Game On! is not another gimmicky “pickup artist” guide – it’s a real-world roadmap for authentic, magnetic connection. This 5-star Amazon bestseller cracked the Top 100 Kindle charts, proving that modern men are ready to ditch the mind games and get real.

Bold, playful, and grounded in real psychology, Game On! cuts through the nonsense to show you how to master the conversation, spark genuine attraction, and build connections that actually last.

Packed with humor, actionable exercises, and expert insights, Game On! helps you become the man who naturally attracts respect and interest. You’ll learn to confidently approach women, truly listen and understand, and express yourself with authenticity and emotional intelligence – all key ingredients for real attraction and lasting love.

  • Men who want to stop overthinking and start connecting
  • Guys tired of ghosting, mixed signals, and shallow convos
  • Dudes ready to level up their confidence and attract real women
  • Anyone who wants to master communication and spark real connection
ISBN-139798303844407
ISBN-109798303844407
PublisherIndependently Published
Publish DateDecember 2024
Dimensions9 x 6 x 0.54 inches
Shipping Weight0.77 pounds
Page Count258

Book Details Wrapper

Function: interactive book preview with purchase options.

Tech Specs: styles in scss/components/_book-details-wrapper.scss, JS in js/book-details.js.

Implementation:

<section class="book-section">...</section>

📘 Book Details Tabs

The ultimate men’s playbook for flirting, seduction, and connection.

3D Book Preview

This book is a no-nonsense guide to modern dating for emotionally intelligent men who are done with gimmicks and ready for real results...

ISBN-139798303844407
ISBN-109798303844407
PublisherIndependently Published
Publish DateDecember 2024
Dimensions9 x 6 x 0.54 inches
Shipping Weight0.77 pounds
Page Count258
Your browser does not support video playback.

This exclusive content is available to members only.

Book Tabs

Function: tabbed interface for preview, description, trailer, and members area.

Tech Specs: styles in scss/components/_book-tabs.scss, JS in js/book-tabs.js.

Implementation:

<section id="book-tabs">...</section>
Sample Book Cover

Book Cover

Function: static 3D book render.

Tech Specs: styles in scss/components/_book.scss.

Implementation:

<div class="book-preview"><div class="book-3d"><img src="cover.jpg" alt="Book cover"></div></div>

Testimonials

Reviewer 1
"A must-read!"
- Alex
Reviewer 2
"Truly inspiring."
- Casey
Reviewer 3
"Eye-opening and real."
- Jordan

Testimonials

Function: display user quotes in cards.

Tech Specs: styles in scss/components/_testimonials.scss.

Implementation:

<section id="testimonials">...</section>

Downloads

PDF Preview

Press Kit – 4MB PDF

Download
PDF Preview

Sample Chapter – 2MB PDF

Download
PDF Preview

Media Sheet – 1MB PDF

Download

Downloads

Function: card grid for PDF or media downloads.

Tech Specs: styles in scss/components/_downloads.scss.

Implementation:

<section id="downloads">...</section>

Viewer

Download Zoom Print

Viewer

Function: embeds a document with simple toolbar.

Tech Specs: styles in scss/components/_viewer.scss.

Implementation:

<section id="viewer">...</section>
Zoomed cover
Front cover Back cover

3D Book Viewer

Function: interactive book with inertia and lighting.

Tech Specs: styles in scss/components/_book-3d.scss, JS in js/book-3d-viewer.js.

Implementation:

<div class="book-3d-viewer">...</div>

Containers

.grad-lemon-lime
.grad-lemon-lime-stroke
.grad-charcoal-lime
.grad-charcoal-mint
.grad-booger-snow
.grad-cash-cloud
.grad-kelly-green
.container--light

Containers

Function: responsive layout wrappers showcasing gradient skins.

Tech Specs: styles in scss/base/_globals.scss & scss/utilities/_gradients.scss.

Implementation:

<div class="container grad-lemon-lime">...</div>

      <div class="container--light">...</div>

Buttons

Buttons

Function: reusable button styles with gradient variants.

Tech Specs: styles in scss/components/_buttons.scss & scss/utilities/_gradients.scss.

Implementation:

<button class="btn grad-lemon-lime">Action</button>

      <button class="icon-btn" aria-label="Search"><i class="ti ti-search"></i></button>

CTA Buttons

CTA Buttons

Function: prominent call to action styles.

Tech Specs: styles in scss/components/_cta-buttons.scss.

Implementation:

<button class="cta-btn">Join Now</button>
<button class="cta-btn cta-btn--outline">Learn More</button>
<button class="cta-btn cta-btn--arrow">Get Started</button>
<button class="cta-btn cta-btn--glow">Sign Up</button>

Separator

Function: simple horizontal divider.

Tech Specs: styles in scss/components/_separator.scss.

Implementation:

<div class="separator"></div>

Form Elements

Forms

Function: basic form field styling.

Tech Specs: styles in scss/components/_forms.scss.

Implementation:

<form>...</form>

Card

Sample Card

This is a basic card layout for testing styles.

Cards

Function: container for small pieces of content.

Tech Specs: styles in scss/components/_cards.scss.

Implementation:

<div class="card">...</div>

Modal

Modal Title

Modal body content goes here.

Modals

Function: overlay dialog windows.

Tech Specs: styles in scss/components/_modals.scss, toggled with custom JS.

Implementation:

<div class="modal-overlay">...</div>

Alerts

Success alert example.
Error alert example.

Alerts

Function: contextual success and error messages.

Tech Specs: styles in scss/components/_alerts.scss.

Implementation:

<div class="alert alert-success">...</div>

Toggle

Toggles

Function: switch between on/off states.

Tech Specs: styles in scss/components/_toggles.scss.

Implementation:

<label class="toggle">...</label>

Gradients

.grad-lemon-lime
.grad-lemon-lime-stroke
.grad-charcoal-lime
.grad-charcoal-mint
.grad-booger-snow
.grad-cash-cloud
.grad-kelly-green
Daren Prince

Explore

  • Home
  • Book
  • Meet Daren
  • Components
  • Press
  • Contact

Connect

  • Instagram
  • Twitter
  • YouTube

© 2025 Daren Prince. All rights reserved.