extends _layout/_layout.pug

block variables
  - var slug = 'computers'
  - var parent = 'computers'
  - var title = 'Computers - Devices.css - Modern devices crafted in pure CSS'
  - var description = 'Pure CSS MacBook Pro, iMac, MacBook Pro (2018), MacBook, Surface Book, Surface Studio devices. Pure CSS computer devices mockups. Modern computer devices crafted in pure CSS.'

block content
  .container.grid-md
    .columns
      .hero-container.column.col-md-12
        .rework-hero
          .hero-content
            h1.hero-title Computers
            h2.hero-subtitle Modern computer devices crafted in pure CSS
            h2.text-assistive Pure CSS MacBook Pro, iMac, MacBook Pro (2018), MacBook, Surface Book, Surface Studio devices. Pure CSS computer devices mockups. Modern computer devices crafted in pure CSS.

    .columns
      .content-container.column.col-md-12
        h2.rework-title#macbook-pro
          | MacBook Pro
          a.ml-2(href="#macbook-pro") #
        h3.text-assistive Pure CSS MacBook Pro, MacBook Pro in pure CSS
        .rework-content
          p The new MacBook Pro. Incredible performance with the M1 Pro or M1 Max chip. Amazing battery life. And a 14” or 16” Liquid Retina XDR display. 
        .rework-device.computers
          .dots
            .dot.tooltip.active(style="background:#e2e3e4;" data-tooltip="device-silver (default)")
            .dot.tooltip(style="background:#83878a;" data-tooltip="device-spacegray")
          .device.device-macbook-pro
            .device-frame
              img.device-screen(src="assets/img/bg-10.jpg" loading="lazy")
            .device-stripe
            .device-header
            .device-sensors
            .device-btns
            .device-power
            .device-home

    include _layout/_ad-g.pug

    .columns
      .content-container.column.col-md-12
        h2.rework-title#imac
          | iMac
          a.ml-2(href="#imac") #
        h3.text-assistive Pure CSS iMac, iMac in pure CSS
        .rework-content
          p The new, strikingly thin 24-inch iMac with M1 chip comes with configurable memory, storage, and more. Available in 7 colors.
        .rework-device.computers
          .dots
            .dot.tooltip.active(style="background:#D4D5D7;" data-tooltip="device-silver (default)")
            .dot.tooltip(style="background:#ABBDD0;" data-tooltip="device-blue")
            .dot.tooltip(style="background:#BBD0C8;" data-tooltip="device-green")
            .dot.tooltip(style="background:#EDCCC6;" data-tooltip="device-pink")
            .dot.tooltip(style="background:#F4D595;" data-tooltip="device-yellow")
            .dot.tooltip(style="background:#E9B5A0;" data-tooltip="device-orange")
            .dot.tooltip(style="background:#C4C4E5;" data-tooltip="device-purple")
          .device.device-imac
            .device-frame
              img.device-screen(src="assets/img/bg-08.jpg" loading="lazy")
            .device-stripe
            .device-header
            .device-sensors
            .device-btns
            .device-power
            .device-home

    .columns
      .content-container.column.col-md-12
        h2.rework-title#macbook-pro-2018
          | MacBook Pro (2018)
          a.ml-2(href="#macbook-pro-2018") #
        h3.text-assistive Pure CSS MacBook Pro (2018), MacBook Pro (2018) in pure CSS
        .rework-content
          p 
        .rework-device.computers
          .dots
            .dot.active.tooltip(style="background:#e2e3e4;" data-tooltip="device-silver (default)")
            .dot.tooltip(style="background:#83878a;" data-tooltip="device-spacegray")
          .device.device-macbook-pro-2018
            .device-frame
              img.device-screen(src="assets/img/bg-10.jpg" loading="lazy")
            .device-stripe
            .device-header
            .device-sensors
            .device-btns
            .device-power
            .device-home

    .columns
      .content-container.column.col-md-12
        h2.rework-title#macbook
          | MacBook
          a.ml-2(href="#macbook") #
        h3.text-assistive Pure CSS MacBook, MacBook in pure CSS
        .rework-content
          p The MacBook with Retina display (marketed as "The new MacBook") is a line of portable Macintosh computers announced in a special event on March 9, 2015 by Apple Inc. It was superseded by the 3rd-generation MacBook Air in October 2018.
        .rework-device.computers
          .dots
            .dot.tooltip.active(style="background:#e2e3e4;" data-tooltip="device-silver (default)")
            .dot.tooltip(style="background:#f7e8dd;" data-tooltip="device-gold")
            .dot.tooltip(style="background:#facfc9;" data-tooltip="device-rosegold")
            .dot.tooltip(style="background:#83878a;" data-tooltip="device-spacegray")
          .device.device-macbook
            .device-frame
              img.device-screen(src="assets/img/bg-07.jpg" loading="lazy")
            .device-stripe
            .device-header
            .device-sensors
            .device-btns
            .device-power
            .device-home

    .columns
      .content-container.column.col-md-12
        h2.rework-title#surface-book
          | Surface Book
          a.ml-2(href="#surface-book") #
        h3.text-assistive Pure CSS Surface Book, Surface Book in pure CSS
        .rework-content
          p 
        .rework-device.computers
          .dots
            .dot.tooltip.active(style="background:#e2e3e4;" data-tooltip="device-silver (default)")
            .dot.tooltip(style="background:#83878a;" data-tooltip="device-spacegray")
          .device.device-surface-book
            .device-frame
              img.device-screen(src="assets/img/bg-11.jpg" loading="lazy")
            .device-stripe
            .device-header
            .device-sensors
            .device-btns
            .device-power
            .device-home

    include _layout/_ad-sidebar.pug
      
    .columns
      .content-container.column.col-md-12
        h2.rework-title#surface-studio
          | Surface Studio
          a.ml-2(href="#surface-studio") #
        h3.text-assistive Pure CSS Surface Studio, Surface Studio in pure CSS
        .rework-content
          p 
        .rework-device.computers
          .device.device-surface-studio
            .device-frame
              img.device-screen(src="assets/img/bg-12.jpg" loading="lazy")
            .device-stripe
            .device-header
            .device-sensors
            .device-btns
            .device-power
            .device-home

    .columns 
      ul.pagination.column 
        .page-item.page-prev
          a(href="phones.html")
            .page-item-subtitle Previous
            .page-item-title.h5 Phones
        .page-item.page-next
          a(href="tablets.html")
            .page-item-subtitle Next
            .page-item-title.h5 Tablets