extends _layout/_layout.pug

block variables
  - var slug = 'phones'
  - var parent = 'phones'
  - var title = 'Phones - Devices.css - Modern devices crafted in pure CSS'
  - var description = 'Pure CSS iPhone 14 Pro, iPhone 14, iPhone X, iPhone 8, iPhone 1st gen, Google Pixel 6 Pro, Google Pixel 2 XL, Google Pixel, Samsung Galaxy S8 devices. Pure CSS mobile devices mockups. Modern phone devices crafted in pure CSS.'

block content
  .container.grid-md
    .columns
      .hero-container.column.col-md-12
        .rework-hero
          .hero-content
            h1.hero-title Phones
            h2.hero-subtitle Modern phone devices crafted in pure CSS.
            h2.text-assistive Pure CSS iPhone 14 Pro, iPhone 14, iPhone X, iPhone 8, iPhone 1st gen, Google Pixel 6 Pro, Google Pixel 2 XL, Google Pixel, Samsung Galaxy S8 devices. Pure CSS mobile devices mockups. Modern phone devices crafted in pure CSS.
    
        //- .hero-demo 
        //-   a.demo.demo-iphone-14-pro(href="phones.html#iphone-14-pro" target="_blank")
        //-     .device.device-iphone-14-pro
        //-       .device-frame
        //-         img.device-screen(src="assets/img/bg-iphone-14-pro.jpg")
        //-       .device-stripe
        //-       .device-header
        //-       .device-sensors
        //-       .device-btns
        //-       .device-power
        //-       .device-home
        //-   a.demo.demo-iphone-14(href="phones.html#iphone-14" target="_blank")
        //-     .device.device-iphone-14
        //-       .device-frame
        //-         img.device-screen(src="assets/img/bg-iphone-14.jpg")
        //-       .device-stripe
        //-       .device-header
        //-       .device-sensors
        //-       .device-btns
        //-       .device-power
        //-       .device-home
        //-   a.demo.demo-google-pixel-6-pro(href="phones.html#google-pixel-6-pro" target="_blank")
        //-     .device.device-google-pixel-6-pro
        //-       .device-frame
        //-         img.device-screen(src="assets/img/bg-pixel-6.jpg" loading="lazy")
        //-       .device-stripe
        //-       .device-header
        //-       .device-sensors
        //-       .device-btns
        //-       .device-power
        //-       .device-home
        //-   a.demo.demo-macbook-pro(href="computers.html#macbook-pro" target="_blank")
        //-     .device.device-macbook-pro.device-spacegray
        //-       .device-frame
        //-         img.device-screen(src="assets/img/bg-10.jpg")
        //-       .device-stripe
        //-       .device-header
        //-       .device-sensors
        //-       .device-btns
        //-       .device-power
        //-       .device-home
        //-   a.demo.demo-imac(href="computers.html#imac" target="_blank")
        //-     .device.device-imac
        //-       .device-frame
        //-         img.device-screen(src="assets/img/bg-08.jpg")
        //-       .device-stripe
        //-       .device-header
        //-       .device-sensors
        //-       .device-btns
        //-       .device-power
        //-       .device-home
        //-   a.demo.demo-apple-watch-ultra(href="watches.html#apple-watch-ultra" target="_blank")
        //-     .device.device-apple-watch-ultra
        //-       .device-frame
        //-         img.device-screen(src="assets/img/bg-watch.jpg")
        //-       .device-stripe
        //-       .device-header
        //-       .device-sensors
        //-       .device-btns
        //-       .device-power
        //-       .device-home

    .columns
      .content-container.column.col-md-12
        h2.rework-title#samsung-galaxy-z-fold4
          | Galaxy Z Fold4
          a.ml-2(href="#samsung-galaxy-z-fold4") #
        h3.text-assistive Pure CSS Galaxy Z Fold4, Galaxy Z Fold4 in pure CSS
        .rework-content
          p 
        .rework-device.phones
          .dots
            .dot.tooltip.active(style="background:#cfcfcf;" data-tooltip="device-black (default)")
          .device.device-galaxy-z-fold4
            .device-frame
              img.device-screen(src="assets/img/bg-samsung-fold.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#iphone-14-pro
          | iPhone 14 Pro
          a.ml-2(href="#iphone-14-pro") #
        h3.text-assistive Pure CSS iPhone 14 Pro, iPhone 14 Pro in pure CSS
        .rework-content
          p Introducing Dynamic Island. Vital new safety features designed to save lives. A 48MP camera for up to 4x the resolution. 4 colors.
        .rework-device.phones
          .dots
            .dot.tooltip.active(style="background:#342C3F;" data-tooltip="device-purple (default)")
            .dot.tooltip(style="background:#e2e3e4;" data-tooltip="device-silver")
            .dot.tooltip(style="background:#76726F;" data-tooltip="device-black")
            .dot.tooltip(style="background:#F6EEDB;" data-tooltip="device-gold")
          .device.device-iphone-14-pro
            .device-frame
              img.device-screen(src="assets/img/bg-iphone-14-pro.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#iphone-14
          | iPhone 14
          a.ml-2(href="#iphone-14") #
        h3.text-assistive Pure CSS iPhone 14, iPhone 14 in pure CSS
        .rework-content
          p iPhone 14 and iPhone 14 Plus. 6.1” and 6.7” sizes. All-day battery life. Emergency SOS via satellite. Crash Detection. Epic photos. 5 colors.
        .rework-device.phones
          .dots
            .dot.tooltip.active(style="background:#2B2F33;" data-tooltip="device-midnight (default)")
            .dot.tooltip(style="background:#c8bad3;" data-tooltip="device-purple")
            .dot.tooltip(style="background:#D3CDC7;" data-tooltip="device-starlight")
            .dot.tooltip(style="background:#EC302B;" data-tooltip="device-red")
            .dot.tooltip(style="background:#98ABBE;" data-tooltip="device-blue")
          .device.device-iphone-14
            .device-frame
              img.device-screen(src="assets/img/bg-iphone-14.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#iphone-x
          | iPhone X
          a.ml-2(href="#iphone-x") #
        h3.text-assistive Pure CSS iPhone X, iPhone X in pure CSS
        .rework-content
          p iPhone X (pronounced "iPhone Ten") is a smartphone in Apple's iPhone lineup. It was announced on September 12, 2017 alongside the iPhone 8 and iPhone 8 Plus at the Steve Jobs Theater in the Apple Park campus. It was released on November 3, 2017 with a starting price of $999.
        .rework-device.phones
          .device.device-iphone-x
            .device-frame
              video.device-screen(muted="muted" autoplay loop)
                source(src="assets/video/bg-01.mp4" type="video/mp4")
            .device-stripe
            .device-header
            .device-sensors
            .device-btns
            .device-power
            .device-home

    .columns
      .content-container.column.col-md-12
        h2.rework-title#iphone-8
          | iPhone 8
          a.ml-2(href="#iphone-8") #
        h3.text-assistive Pure CSS iPhone 8, iPhone 8 in pure CSS
        .rework-content
          p The iPhone 8 is a smartphone that was announced alongside the iPhone 8 Plus and iPhone X on September 12, 2017 and was released on September 22. It serves as the successor to the iPhone 7 and predecessor to the iPhone XR. The external design of the iPhone 8 was reused by the 2nd generation iPhone SE in 2020.
        .rework-device.phones
          .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:#9b9ba0;" data-tooltip="device-spacegray")
          .device.device-iphone-8
            .device-frame
              img.device-screen(src="assets/img/bg-03.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#the-iphone
          | iPhone
          a.ml-2(href="#the-iphone") #
        h3.text-assistive Pure CSS iPhone, iPhone in pure CSS
        .rework-content
          p iPhone combines three amazing products — a revolutionary mobile phone, a widescreen iPod with touch controls, and a breakthrough Internet communications device with desktop-class email, web browsing, maps, and searching — into one small and lightweight handheld device.
        .rework-device.phones
          .device.device-the-iphone
            .device-frame
              img.device-screen(src="assets/img/bg-iphone.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#google-pixel-6-pro
          | Google Pixel 6 Pro
          a.ml-2(href="#google-pixel-6-pro") #
        h3.text-assistive Pure CSS Google Pixel 6 Pro, Google Pixel 6 Pro in pure CSS
        .rework-content
          p Pixel 6 Pro, the most advanced Pixel Camera ever.
        .rework-device.phones
          .dots
            .dot.tooltip.active(style="background:#CBCBC8;" data-tooltip="device-white (default)")
            .dot.tooltip(style="background:#FFD6AD;" data-tooltip="device-gold")
            .dot.tooltip(style="background:#323334;" data-tooltip="device-black")
          .device.device-google-pixel-6-pro
            .device-frame
              img.device-screen(src="assets/img/bg-pixel-6.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#google-pixel-2-xl
          | Google Pixel 2 XL
          a.ml-2(href="#google-pixel-2-xl") #
        h3.text-assistive Pure CSS Google Pixel 2 XL, Google Pixel 2 XL in pure CSS
        .rework-content
          p The Pixel 2 and Pixel 2 XL are a pair of Android smartphones designed, developed, and marketed by Google as part of the Google Pixel product line.
        .rework-device.phones
          .device.device-google-pixel-2-xl
            .device-frame
              img.device-screen(src="assets/img/bg-06.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#google-pixel
          | Google Pixel
          a.ml-2(href="#google-pixel") #
        h3.text-assistive Pure CSS Google Pixel, Google Pixel in pure CSS
        .rework-content
          p 
        .rework-device.phones
          .dots
            .dot.tooltip.active(style="background:#e2e3e4;" data-tooltip="device-silver (default)")
            .dot.tooltip(style="background:#6a6967;" data-tooltip="device-black")
            .dot.tooltip(style="background:#7695ff;" data-tooltip="device-blue")
          .device.device-google-pixel
            .device-frame
              img.device-screen(src="assets/img/bg-06.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#samsung-galaxy-s8
          | Samsung Galaxy S8
          a.ml-2(href="#samsung-galaxy-s8") #
        h3.text-assistive Pure CSS Samsung Galaxy S8, Samsung Galaxy S8 in pure CSS
        .rework-content
          p 
        .rework-device.phones
          .dots
            .dot.tooltip.active(style="background:#cfcfcf;" data-tooltip="device-black (default)")
            .dot.tooltip(style="background:#a3c5e8;" data-tooltip="device-blue")
          .device.device-galaxy-s8
            .device-frame
              img.device-screen(src="assets/img/bg-04.jpg" loading="lazy")
            .device-stripe
            .device-header
            .device-sensors
            .device-btns
            .device-power
            .device-home
    
    .columns 
      ul.pagination.column
        .page-item.page-next
          a(href="computers.html")
            .page-item-subtitle Next
            .page-item-title.h5 Computers