book-pop.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8" />
    <meta name="author" content="Francesca Paris" />
    <meta
      name="description"
      content="UI / UX design portfolio showcasing mobile concept apps and resposive web apps"
    />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      rel="stylesheet"
      type="text/css"
      href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css"
    />
    <link rel="preconnect" href="https://fonts.gstatic.com" />
    <link
      href="https://fonts.googleapis.com/css2?family=Encode+Sans+Semi+Condensed:wght@100;200;500&family=Roboto:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&family=Work+Sans:wght@500;600&display=swap"
      rel="stylesheet"
    />
    <link href="img/favicon-32x32.png" rel="shortcut icon" />
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <link rel="stylesheet" type="text/css" href="css/flex-cards-page.css" />
    <link rel="stylesheet" type="text/css" href="css/book-pop.css" />
    <title>Francesca Paris | Book Pop</title>
  </head>

  <body>
    <header>
      <div class="container container-sm">
        <div class="row-nm">
          <div class="col-6 col-md-6 col-lg-6">
            <div>
              <a href="index.html"
                ><img
                  src="img/logo-desktop.svg"
                  alt="Francesca Paris"
                  class="logo"
              /></a>
            </div>
          </div>
          <div class="col-6 col-md-6 col-lg-6">
            <div class="navtoggle" id="myNavtoggle">
              <nav>
                <ul>
                  <li><a href="index.html">Work</a></li>
                  <li><a href="about.html">About me</a></li>
                  <li><a href="contact-me.html">Contact</a></li>
                  <li class="icon">
                    <a
                      href="javascript:void(0);"
                      class="icon"
                      onclick="menuToggle()"
                      ><svg
                        width="26"
                        height="40"
                        viewBox="0 0 26 22"
                        fill="none"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M1 1H25"
                          stroke="black"
                          stroke-width="2"
                          stroke-linecap="round"
                        />
                        <path
                          d="M1 11H25"
                          stroke="black"
                          stroke-width="2"
                          stroke-linecap="round"
                        />
                        <path
                          d="M1 21H25"
                          stroke="black"
                          stroke-width="2"
                          stroke-linecap="round"
                        />
                      </svg>
                    </a>
                  </li>
                </ul>
              </nav>
            </div>
          </div>
        </div>
      </div>
    </header>

    <main>
      <div class="container">
        <!-- Intro image -->
        <section class="hero-section">
          <div>
            <picture>
              <source
              srcset="
                img/book-pop/case-study/hero-image@3x.webp,
                img/book-pop/case-study/hero-image@4x.webp 2x
              "
              media="(min-width:1024px)"
              type="image/webp"
            />
              <source
                srcset="
                  img/book-pop/case-study/hero-image@3x.png,
                  img/book-pop/case-study/hero-image@4x.png 2x
                "
                media="(min-width:1024px)"
                type="image/png"
              />
              <source
              srcset="img/book-pop/case-study/hero-image@2x.webp"
              media="(min-width:500px)"
              type="image/webp"
            />
              <source
                srcset="img/book-pop/case-study/hero-image@2x.png"
                media="(min-width:500px)"
                type="image/png"
              />
              <source
              srcset="img/book-pop/case-study/hero-image-mobile@1x.webp"
              media="(max-width:499px)"
              type="image/webp"
            />
              <source
                srcset="img/book-pop/case-study/hero-image-mobile@1x.png"
                media="(max-width:499px)"
                type="image/png"
              />
              <img
                srcset="img/quick-tasty/case-study2/intro@4x.png"
                alt="Book-pop intro image showing the logo and some app screens"
                class="center"
              />
            </picture>
          </div>
        </section>
        <!-- Details -->
        <section id="details">
          <div class="chip">
            <p>My Role: UI / UX Designer</p>
          </div>
          <div class="chip">
            <p>Tools: Miro, Adobe XD</p>
          </div>
        </section>
        <!-- The challenge -->
        <section id="challenge">
          <h1 class="center-text">The Challenge</h1>
          <p>
            <strong>Book Pop</strong> is a concept app that was firstly created
            during one of the <em>Adobe Creative Jams</em>, in 7 days. Me and
            another CareerFoundry student collaborated on its creation, pushing
            it further after the creative jam ended. Book Pop is aimed at
            parents that wants to swap children books, allowing them to create
            and join events in a Covid-safe environment.
          </p>
        </section>

        <!-- Process section -->
        <section class="process-section">
          <h1>The Process</h1>
          <div class="process-cards">
            <div class="flex-cards">
              <!-- CARD 1 -->
              <div id="card1" class="flex process-card active">
                <!-- <a href="javascript:void(0);" onclick="cardsFunction()"> -->
                <div class="label">
                  <img
                    src="img/book-pop/case-study/btn-research.svg"
                    width="44px"
                    alt="magnifying glass lens in front of a person"
                  />
                  <div class="process-number">1</div>
                  <div class="rotate-90 step-title">Research</div>
                </div>
                <div class="process-content">

                  <picture>
                    <source
                    srcset="img/book-pop/case-study/Research.webp"
                    type="image/webp"
                  />
                    <source
                      srcset="img/book-pop/case-study/Research.png"
                      type="image/png"
                    />
                    <img
                      srcset="img/book-pop/case-study/Research.png"
                      alt="Images of library apps and book fair apps"
                      class="center"
                    />
                  </picture>
                  <p>
                    We checked different apps related to books and events, to
                    understand what was already available on the market. We
                    liked how the books were shown as a list and we analysed the
                    information displayed for books and events.
                  </p>
                </div>
              </div>

              <!-- CARD 2 -->
              <div id="card2" class="flex process-card closed">
                <div class="label">
                  <img
                    src="img/book-pop/case-study/btn-look-feel.svg"
                    width="44px"
                    alt="icons made up of different shapes to symbolize the look and feel process"
                  />

                  <div class="process-number">2</div>
                  <div class="rotate-90 step-title">Look & Feel</div>
                </div>
                <!-- Card Content -->
                <div class="process-content">
                  <div>
                    <picture>
                      <source
                        srcset="img/book-pop/case-study/look-feel@3x.webp"
                        media="(min-width:1024px)"
                        type="image/webp"
                      />
                      <source
                        srcset="img/book-pop/case-study/look-feel@3x.png"
                        media="(min-width:1024px)"
                        type="image/png"
                      />
                      <source
                        srcset="img/book-pop/case-study/look-feel@1x.webp"
                        media="(max-width:499px)"
                        type="image/webp"
                      />
                      <source
                        srcset="img/book-pop/case-study/look-feel@1x.png"
                        media="(max-width:499px)"
                        type="image/png"
                      />
                      <img
                        srcset="img/book-pop/case-study/look-feel@3x.png"
                        alt="Screenshots of different apps with a playful and colourful appearance"
                        class="center"
                      />
                    </picture>
                    <p>
                      We decided the app should use
                      <strong>bright colours and round shapes</strong> and have
                      <strong>some nice illustrations</strong> inside it, so
                      parents and children would use the app together to look at
                      the books available at the different events.
                    </p>
                  </div>
                </div>
              </div>

              <!-- CARD 3 -->
              <div id="card3" class="flex process-card closed">
                <div class="label">
                  <img
                    src="img/skills/icn_user-flows.svg"
                    width="44px"
                    alt="icon showing diagrams"
                  />

                  <div class="process-number">3</div>
                  <div class="rotate-90 step-title">
                    Information Architecture
                  </div>
                </div>
                <!-- Card content -->
                <div class="process-content">
                  <div>
                    <picture>
                      <source
                        srcset="img/book-pop/case-study/info-architecture.webp"
                        media="(min-width:500px)"
                        type="image/webp"
                      />
                      <source
                        srcset="
                          img/book-pop/case-study/info-architecture@1x.png"
                        media="(max-width:499px)"
                        type="image/png"
                      />
                      <img
                        srcset="img/book-pop/case-study/info-architecture.png"
                        alt="Book Pop post-its defining the information architecture of the app"
                        class="center"
                      />
                    </picture>
                    <p>
                      We thought the app main will have a system for joining and
                      creating events and possibly a section were the child can
                      check out all the books available and like some. This
                      section would have a character to guide the child through
                      the app.
                    </p>
                  </div>
                </div>
              </div>

              <!-- CARD 4 -->
              <div id="card4" class="flex process-card closed">
                <div class="label">
                  <img
                    src="img/skills/icn_wireframes.svg"
                    width="44px"
                    alt="icons showing a wireframe screen"
                  />

                  <div class="process-number">4</div>
                  <div class="rotate-90 step-title">Sketches / Wireframes</div>
                </div>
                <div class="process-content">
                  <div>
                    <picture class="wireframe">
                      <source
                      srcset="img/book-pop/case-study/sketches@3x.webp"
                      media="(min-width:500px)"
                      type="image/webp"
                    />
                      <source
                      srcset="img/book-pop/case-study/sketches@3x.jpg"
                      media="(min-width:500px)"
                      type="image/jpg"
                    />
                    <source
                    srcset="img/book-pop/case-study/sketches@1x.webp"
                    media="(max-width:499px)"
                    type="image/webp"
                     />
                      <source
                        srcset="img/book-pop/case-study/sketches@1x.jpg"
                        media="(max-width:499px)"
                        type="image/jpg"
                      />
                      <img
                        src="img/book-pop/case-study/sketches@1x.jpg"
                        alt="sketches to define the app wireframes" class="center"
                      />
                    </picture>
                    <picture class="wireframe hidden">
                      <source
                      srcset="img/book-pop/case-study/sketches-list@3x.webp"
                      media="(min-width:500px)"
                      type="image/webp"
                    />
                      <source
                        srcset="img/book-pop/case-study/sketches-list@3x.jpg"
                        media="(min-width:500px)"
                        type="image/jpg"
                      />
                      <source
                      srcset="img/book-pop/case-study/sketches-list@1x.webp"
                      media="(max-width:499px)"
                      type="image/webp"
                    />
                      <source
                        srcset="img/book-pop/case-study/sketches-list@1x.jpg"
                        media="(max-width:499px)"
                        type="image/jpg"
                      />
                      <img
                        src="img/book-pop/case-study/sketches@1x.jpg"
                        alt="zoom in of the wireframes displaying the events shown as a list"
                        class="center"
                      />
                    </picture>
                    <picture class="wireframe hidden">
                      <source
                      srcset="img/book-pop/case-study/sketches-map@3x.webp"
                      media="(min-width:500px)"
                      type="image/webp"
                    />
                      <source
                        srcset="img/book-pop/case-study/sketches-map@3x.jpg"
                        media="(min-width:500px)"
                        type="image/jpg"
                      />
                      <source
                      srcset="img/book-pop/case-study/sketches-map@1x.webp"
                      media="(max-width:499px)"
                      type="image/webp"
                    />
                      <source
                        srcset="img/book-pop/case-study/sketches-map@1x.jpg"
                        media="(max-width:499px)"
                        type="image/jpg"
                      />
                      <img
                        src="img/book-pop/case-study/sketches@1x.jpg"
                        alt="zoom-in of the wireframes showing the events shown on top of a map"
                        class="center"
                      />
                    </picture>
                  </div>
                  <div class="wireframes-carousel">
                    <button id="btn-prev"></button>
                    <button id="btn-next"></button>
                    <div class="dots">
                      <div class="dot dot-active"></div>
                      <div class="dot"></div>
                      <div class="dot"></div>
                    </div>
                  </div>
                  <p class="mt-20">
                    From our wireframes emerged
                    <strong>two different approaches for showing the events</strong>, one using a map and the other using a list. The map would
                    allow the user to immediately spot events nearby, however
                    the list allows an easy comparison between the events,
                    viewing immediately details such as time and target age. We
                    decided it could be useful to have both of them and the user
                    could simply change from one to the other.
                  </p>
                </div>
              </div>

              <!-- CARD 5 -->
              <div id="card5" class="flex process-card closed">
                <div class="label">
                  <img
                    src="img/quick-tasty/case-study2/icn_high-fidelity.svg"
                    width="44px"
                    alt="icons showing a high-fidelity screen"
                  />

                  <div class="process-number">5</div>
                  <div class="rotate-90 step-title">Final Screens</div>
                </div>
                <div class="process-content">
                  <div class="final-screens-phase">
                    <!-- first row -->
                    <p>
                      We decided the home screen would show the books available
                      at nearby future events. It seemed important to us to show
                      some books in the main screen since books are the topic of
                      the app. We also noticed similar apps were doing the same,
                      which encouraged us to move towards this direction.
                    </p>
                    <p>We found challenging creating the event screen, in particular showing all the info in a clean way and also keeping the "Join in" button always on screen and recognizable from the background.
                      One trick that aided us was making the participants and books section horizontally scrollable.</p>
                    <picture>
                      <source
                      srcset="img/book-pop/case-study/hifi-home@3x.webp"
                      type="image/webp"
                    />
                      <source
                        srcset="img/book-pop/case-study/hifi-home@3x.png"
                        type="image/png"
                      />
                      <img
                        src="img/book-pop/case-study/hifi-home@3x.png"
                        alt="home screen showing some books and another section with the title Book swaps and 3 buttons leading to the upcoming book swaps, the search screen and the create book swap screen"
                        class="center mt-20"
                      />
                    </picture>
                    <picture>
                      <source
                      srcset="img/book-pop/case-study/hifi-event@3x.webp"
                      type="image/webp"
                    />
                      <source
                        srcset="img/book-pop/case-study/hifi-event@3x.png"
                        type="image/png"
                      />
                      <img
                        src="img/book-pop/case-study/hifi-event@3x.png"
                        alt="event screen where there is a character image as event image and the book swap details"
                        class="center mt-20"
                      />
                    </picture>
                   

                  </div>

                  <div></div>
                </div>
              </div>
            </div>
          </div>
          <div>
            <!-- <div class="attribution-bg">&nbsp;</div> -->
            <p class="attribution mt-60">
              Since we did not have much time, we did not create the icons and
              illustrations ourselves but used some from
              <em><a href="https://exchange.adobe.com/creativecloud/plugindetails.html/app/cc/02ec2f87">Icons 4 Design</a></em>, <em><a href="https://thenounproject.com/">Noun Project</a></em> and
              <em
                ><a href="https://icons8.com/illustrations/style--atomic"
                  >Ouch!</a
                ></em
              >.
            </p>
          </div>
        </section>

        <!-- User needs section -->

        <section class="needs-section">
          <h1>User Needs & Solutions</h1>
          <div class="grid-needs">
            <!-- Need 1 -->
            <div class="needs-description">
              <div class="need-box need-box--blue">
                <blockquote>
                  “I want to find book swapping events so I can swap / borrow /
                  donate books”
                </blockquote>
                <p>
                  <strong>Solution:</strong><br />
                  The app allows users to find upcoming events. The user will
                  get asked when joining if they want to swap, donate or borrow
                  books.
                </p>
              </div>
            </div>
            <div class="need-screens">
              <picture>
                <!-- <source
                  srcset="
                    img/quick-tasty/case-study2/user-needs-1@3x.webp,
                    img/quick-tasty/case-study2/user-needs-1@4x.webp 2x
                  "
                  media="(min-width:601px)"
                  type="image/webp"
                /> -->
                <source
                srcset="
                  img/book-pop/case-study/user-needs-1@3x.webp,
                  img/book-pop/case-study/user-needs-1@4x.webp 2x
                "
                media="(min-width:601px)"
                type="image/webp"
              />
                <source
                  srcset="
                    img/book-pop/case-study/user-needs-1@3x.png,
                    img/book-pop/case-study/user-needs-1@4x.png 2x
                  "
                  media="(min-width:601px)"
                  type="image/png"
                />
                <source
                srcset="img/book-pop/case-study/user-needs-1@1x.webp"
                media="(max-width:600px)"
                type="image/webp"
              />
                <source
                  srcset="img/book-pop/case-study/user-needs-1@1x.png"
                  media="(max-width:600px)"
                  type="image/png"
                />
                <img
                  src="img/book-pop/case-study/user-needs-1@3x.png"
                  alt="The mobile screens, one next to the other. One screen shows a list of upcoming events and the other the search by location feature"
                />
              </picture>
            </div>

            <!-- Need 2 -->
            <div class="needs-description">
              <div class="flex-column">
                <div class="need-box need-box--yellow">
                  <blockquote>
                    “I want to create events so I can invite my friends and the
                    neighbours”
                  </blockquote>
                  <p>
                    <strong>Solution:</strong><br />
                    The user can create events and invite friends.
                  </p>
                </div>
              </div>
            </div>
            <div class="need-screens">
              <picture>
                <source
                srcset="
                  img/book-pop/case-study/user-needs-2@3x.webp,
                  img/book-pop/case-study/user-needs-2@4x.webp 2x
                "
                media="(min-width:601px)"
                type="image/webp"
              />
                <source
                  srcset="
                    img/book-pop/case-study/user-needs-2@3x.png,
                    img/book-pop/case-study/user-needs-2@4x.png 2x
                  "
                  media="(min-width:601px)"
                  type="image/png"
                />
                <source
                srcset="img/book-pop/case-study/user-needs-2@1x.webp"
                media="(max-width:600px)"
                type="image/webp"
              />
                <source
                  srcset="img/book-pop/case-study/user-needs-2@1x.png"
                  media="(max-width:600px)"
                  type="image/png"
                />
                <img
                  src="img/book-pop/case-study/user-needs-2@3x.png"
                  alt="The mobile screens, one next to the other. One screen shows different fields that needs to be filled in in order to create a book swap event, the other shows the Invite friends feature"
                />
              </picture>
            </div>
            <!-- Need 3 -->
            <div class="needs-description">
              <div class="flex-column">
                <div class="need-box need-box--green">
                  <blockquote>
                    “I want to be able to see who will come to the event and
                    what books I will find.”
                  </blockquote>
                  <p>
                    <strong>Solution:</strong><br />
                    The event page has a list with the participants and with the
                    books that they will bring.
                  </p>
                </div>
              </div>
            </div>
            <div class="need-screens need-screens--last">
              <picture>
                <source
                srcset="
                  img/book-pop/case-study/user-needs-3@3x.webp,
                  img/book-pop/case-study/user-needs-3@4x.webp 2x
                "
                media="(min-width:601px)"
                type="image/webp"
              />
                <source
                  srcset="
                    img/book-pop/case-study/user-needs-3@3x.png,
                    img/book-pop/case-study/user-needs-3@4x.png 2x
                  "
                  media="(min-width:601px)"
                  type="image/png"
                />
                <source
                srcset="img/book-pop/case-study/user-needs-3@1x.webp"
                media="(max-width:600px)"
                type="image/webp"
              />
                <source
                  srcset="img/book-pop/case-study/user-needs-3@1x.png"
                  media="(max-width:600px)"
                  type="image/png"
                />
                <img
                  src="img/book-pop/case-study/user-needs-3@3x.png"
                  alt="The mobile screens. one next to the other. One screen shows filters with choices for difficulty, time and taste. The other shows some recipes under the category of Sweet taste."
                />
              </picture>
            </div>
          </div>
        </section>

        <!-- final screens -->
        <section class="final-screens-section">
          <h1>High fidelity screens</h1>

          <div class="final-screens mobile-only">
            <picture>
              <source
                srcset="img/book-pop/case-study/final-screens@1x.png"
                type="image/png"
              />
              <img
                src="img/book-pop/case-study/final-screens@1x.png"
                alt="screen of the event with all its info"
              />
            </picture>
          </div>
          <div class="from-medium-screen">
            <picture>
              <source
                srcset="img/book-pop/case-study/final-screens@2x.png"
                media="(min-width:601px)"
                type="image/png"
              />
              <img
                src="img/book-pop/case-study/final-screens@2x.png"
                alt="The high-fidelity screens"
              />
            </picture>
          </div>
     
        </section>

        <!-- Further edits -->
        <section class="further-edits">
          <h1>Further edits</h1>
        <p>
          After the creative jam, we made some further edits to the app. My teammate made some <strong>testing</strong>: a survey and some usability testing. That way we wanted to see if people were actually interested in the app and what was working well.
          Some of the big changes we made were:
          <ul>
            <li><strong>Removing the books on the home page</strong>, since the user found them confusing and did not understand those were books that you could find to nearby events.</li>
            <li><strong>Showing some upcoming events right from the home screen.</strong> Our reasoning was that other events apps also were showing those on the home page and also it felt the most useful to one, since it would display upcoming evnts nearby.</li>
          </ul>
        </p>
        </section>

        <!-- Web app -->
        <section class="web-app">
          <h1>From mobile app to web app</h1>
          <div class="web-app-content">

          <p>
            We got in touch with some volunteer developers and decided to change the project into a web
            app, since for them it would have been easier to make a web app rather than a native one.<br>
            The major changes that I have applied as I updated the screens are the <strong>addition of the footer</strong>
            to all the pages and the <strong>disappearance of the tab bar</strong>. I have also
            reduced the amount of features so we could launch with a Minimum
            Viable Product. We established it was essential to be able to create and join the events, but the feature of adding the books you would bring to the event was not so important for the moment.
          </p>
          <picture>
            <source
            srcset="../img/book-pop/case-study/web-app-home@1x.webp"
            type="image/webp"
          />
            <source
              srcset="../img/book-pop/case-study/web-app-home@1x.png"
              type="image/png"
            />
            <img
              src="../img/book-pop/case-study/web-app-home@1x.png"
              alt="the home screen for the web app with a hamburger menu instead of the tab bar and a footer"
              class="web-app-image"
            />
          </picture>
        </div>
         
        </section>

        <!-- Reflections -->
        <section class="reflections">
          <h1>Reflections</h1>
          <p>
            Unfortunately this project wasn't eventually launched as a web app.
            However we learned a lot from it.</p>
            <ul>
              <li><strong>It is important the project is created with a clear
                structure (like components and styles) from the start.</strong> During the
                creative jam, we started with a proper structure but eventually
                things got chaotic as the time was running out. Because of it, when
                we tried to further develop the project we had to spend much time on
                fixing components and similar.</li>
                <li>We should have tested the project idea further before
                  thinking of moving on toward the development. My design partner
                  found out about <strong>the importance of creating a smoke screen or a
                  concierge MVP</strong> that should be made before moving on with the
                  development phase. It was great to learn about it, even though it
                  meant we missed essential steps during our attempt to create this
                  product. </li>
                <li>
                  By working together on the same design file in
                  Adobe XD, <strong>we learned good practices in order to discuss any changes
                  and ideas effectively.</strong> One of our best ways to deal with this was to
                  create annotations around the artboards, each one of us using a
                  different colour for the text so it would be immediately
                  recognizable who was the author.
                </li>
            </ul>
            <p>
            To sum up, the project was a great learning experience and we
            managed to improve our understanding on collaborating with other
            people and of product development. Even though we did not launch it,
            we think when it will be the right time we might get back into it.
          </p>
        </section>
      </div>
    </main>

    <footer id="contact">
      <div class="container">
        <div class="row-nm">
          <div class="col-12">
            <h3>Get in Touch</h3>
            <p>
              Do you like my work and want to discuss opportunities? Please get
              in touch.
            </p>
          </div>
        </div>
        <div class="row-nm">
          <div class="col-12">
            <a href="mailto:francescaparis90@gmail.com" class="button contact"
              >Email me</a
            >
          </div>
        </div>
        <div class="row-nm">
          <div class="col-12">
            <!--Social Media Layout and Placeholders-->
            <a href="https://www.behance.net/francescaparis">
              <!-- Behance icon -->
              <svg
                enable-background="new 0 0 56.693 56.693"
                height="56.693px"
                id="Behance-icon"
                version="1.1"
                viewBox="0 0 56.693 56.693"
                width="56.693px"
                xml:space="preserve"
                xmlns="http://www.w3.org/2000/svg"
                xmlns:xlink="http://www.w3.org/1999/xlink"
              >
                <g>
                  <path
                    style="fill: #696c65"
                    d="M23.556,29.975c0,0,4.701-0.35,4.701-5.863c0-5.514-3.846-8.206-8.719-8.206h-8.97h-0.263H3.503v30.815h6.802h0.263h8.97   c0,0,9.788,0.309,9.788-9.096C29.325,37.625,29.753,29.975,23.556,29.975z M10.568,21.383h7.815h1.154c0,0,2.18,0,2.18,3.205   c0,3.207-1.283,3.672-2.736,3.672h-8.414V21.383z M19.084,41.244c-0.237,0.006-0.438,0-0.573,0h-7.943V33.01h8.97   c0,0,3.249-0.043,3.249,4.23C22.786,40.846,20.36,41.217,19.084,41.244z"
                  />
                  <path
                    style="fill: #696c65"
                    d="M42.382,23.746c-11.85,0-11.84,11.84-11.84,11.84s-0.812,11.779,11.84,11.779c0,0,10.545,0.602,10.545-8.195h-5.424   c0,0,0.18,3.314-4.941,3.314c0,0-5.422,0.361-5.422-5.363h15.967C53.106,37.121,54.854,23.746,42.382,23.746z M37.079,33.01   c0,0,0.662-4.75,5.422-4.75c4.762,0,4.699,4.75,4.699,4.75H37.079z"
                  />
                  <rect
                    style="fill: #696c65"
                    height="3.795"
                    width="12.711"
                    x="35.753"
                    y="17.721"
                  />
                </g>
              </svg>
            </a>
            <a href="https://dribbble.com/FrancescaParis">
              <!-- Dribbble icon -->
              <svg
                enable-background="new 0 0 56.693 56.693"
                height="56.693px"
                id="Dribbble-icon"
                version="1.1"
                viewBox="0 0 56.693 56.693"
                width="56.693px"
                xml:space="preserve"
                xmlns="http://www.w3.org/2000/svg"
                xmlns:xlink="http://www.w3.org/1999/xlink"
              >
                <path
                  style="fill: #696c65"
                  clip-rule="evenodd"
                  d="M52.43,24.152c-0.324-1.588-0.811-3.152-1.441-4.646  c-0.619-1.467-1.387-2.879-2.279-4.199c-0.885-1.309-1.9-2.539-3.018-3.656c-1.117-1.119-2.348-2.135-3.656-3.018  c-1.32-0.895-2.734-1.66-4.199-2.281c-1.494-0.629-3.057-1.117-4.646-1.439c-1.627-0.334-3.303-0.504-4.977-0.504  c-1.676,0-3.35,0.17-4.979,0.504c-1.588,0.322-3.152,0.811-4.645,1.439c-1.465,0.621-2.879,1.387-4.201,2.281  c-1.309,0.883-2.539,1.898-3.656,3.018c-1.118,1.117-2.132,2.348-3.016,3.656c-0.893,1.32-1.66,2.732-2.279,4.199  C4.805,21,4.32,22.564,3.995,24.152c-0.333,1.625-0.502,3.301-0.502,4.976c0,1.678,0.169,3.354,0.502,4.98  c0.325,1.588,0.811,3.152,1.442,4.645c0.619,1.465,1.387,2.881,2.279,4.201c0.884,1.309,1.898,2.537,3.016,3.656  c1.117,1.117,2.348,2.131,3.656,3.016c1.322,0.893,2.736,1.66,4.201,2.279c1.492,0.633,3.057,1.115,4.645,1.441  c1.629,0.336,3.303,0.504,4.979,0.504c1.674,0,3.35-0.168,4.977-0.504c1.59-0.326,3.152-0.809,4.646-1.441  c1.465-0.619,2.879-1.387,4.199-2.279c1.309-0.885,2.539-1.898,3.656-3.016c1.117-1.119,2.133-2.348,3.018-3.656  c0.893-1.32,1.66-2.736,2.279-4.201c0.631-1.492,1.117-3.057,1.441-4.645c0.334-1.627,0.502-3.303,0.502-4.98  C52.932,27.453,52.764,25.777,52.43,24.152z M49.316,28.919c-0.305-0.066-7.449-1.604-14.703-0.692  c-0.148-0.361-0.299-0.725-0.455-1.09c-0.439-1.033-0.912-2.057-1.404-3.062c8.338-3.402,11.723-8.297,11.762-8.355  C47.477,19.314,49.268,23.908,49.316,28.919z M42.156,13.285c-0.053,0.082-3.059,4.658-11.027,7.645  c-3.609-6.631-7.574-11.898-7.891-12.316c1.596-0.387,3.26-0.596,4.975-0.596C33.559,8.018,38.436,10.01,42.156,13.285z   M23.156,8.631c0,0.002-0.004,0.004-0.004,0.004s-0.023,0.006-0.062,0.014C23.111,8.643,23.135,8.639,23.156,8.631z M19.205,10.035  c0.281,0.377,4.186,5.67,7.84,12.164c-10.137,2.693-18.934,2.588-19.492,2.578C8.925,18.238,13.318,12.816,19.205,10.035z   M7.102,29.128c0-0.225,0.01-0.445,0.018-0.667c0.372,0.008,10.804,0.245,21.673-3.008c0.605,1.184,1.184,2.387,1.713,3.589  c-0.279,0.078-0.557,0.162-0.832,0.252c-11.393,3.682-17.172,13.934-17.172,13.934s0.008,0.006,0.008,0.01  C9.149,39.497,7.102,34.552,7.102,29.128z M28.213,50.241c-5.109,0-9.795-1.816-13.447-4.838c0.277,0.225,0.473,0.369,0.473,0.369  s4.047-8.826,16.566-13.188c0.047-0.018,0.094-0.031,0.141-0.045c2.971,7.719,4.197,14.184,4.51,16.029  C33.922,49.646,31.137,50.241,28.213,50.241z M40.01,46.64c-0.215-1.275-1.34-7.471-4.109-15.08  c6.814-1.09,12.721,0.779,13.156,0.922C48.117,38.364,44.75,43.438,40.01,46.64z"
                  fill-rule="evenodd"
                />
              </svg>
            </a>
            <a
              href="https://www.linkedin.com/in/francescaparis/"
              target="_blank"
            >
              <!-- LinkedIn icon -->
              <svg
                enable-background="new 0 0 56.693 56.693"
                height="56.693px"
                id="LinkedIn-icon"
                version="1.1"
                viewBox="0 0 56.693 56.693"
                width="56.693px"
                xml:space="preserve"
                xmlns="http://www.w3.org/2000/svg"
                xmlns:xlink="http://www.w3.org/1999/xlink"
              >
                <g>
                  <path
                    style="fill: #696c65"
                    d="M30.071,27.101v-0.077c-0.016,0.026-0.033,0.052-0.05,0.077H30.071z"
                  />
                  <path
                    style="fill: #696c65"
                    d="M49.265,4.667H7.145c-2.016,0-3.651,1.596-3.651,3.563v42.613c0,1.966,1.635,3.562,3.651,3.562h42.12   c2.019,0,3.654-1.597,3.654-3.562V8.23C52.919,6.262,51.283,4.667,49.265,4.667z M18.475,46.304h-7.465V23.845h7.465V46.304z    M14.743,20.777h-0.05c-2.504,0-4.124-1.725-4.124-3.88c0-2.203,1.67-3.88,4.223-3.88c2.554,0,4.125,1.677,4.175,3.88   C18.967,19.052,17.345,20.777,14.743,20.777z M45.394,46.304h-7.465V34.286c0-3.018-1.08-5.078-3.781-5.078   c-2.062,0-3.29,1.389-3.831,2.731c-0.197,0.479-0.245,1.149-0.245,1.821v12.543h-7.465c0,0,0.098-20.354,0-22.459h7.465v3.179   c0.992-1.53,2.766-3.709,6.729-3.709c4.911,0,8.594,3.211,8.594,10.11V46.304z"
                  />
                </g>
              </svg>
            </a>
          </div>
        </div>
        <div class="row-nm">
          <div class="col-12">
            <p>Copyright Francesca Paris 2021</p>
          </div>
        </div>
      </div>
    </footer>

    <script
      src="https://code.jquery.com/jquery-3.6.0.min.js"
      integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
      crossorigin="anonymous"
    ></script>
    <script src="js/scripts.js"></script>
    <script src="js/flex-cards.js"></script>
    <script src="js/book-pop.js"></script>
  </body>
</html>