Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
25
Comments
79
Eileen dangelo
@Eileenpk

All comments

  • Matthew•400
    @matthew-marco
    Submitted about 2 years ago

    interactive-rating-component-main

    1
    Eileen dangelo•1,600
    @Eileenpk
    Posted about 2 years ago

    Hi Matthew!

    Your project looks great, it seems like you put a lot of hard work into it.

    I thought this might be a helpful tip.

    Consider your naming conventions. If you had never seen this code before would you know right away without looking at the HTML what p (in the JavaScript) was? It takes time to think of very descriptive names for things, but it's worth trying to write code with the knowledge that out in the wild ( and in a professional setting) more time will be spent reading, and editing it than the initial writing of the code. Anything we can do to make it easier for the next dev on the project should be done.

    For example, I would change let p = document.querySelector(".numrate"); to

    let selectedRating = document.querySelector(".numrate");

    Other than that your code is awesome, keep up the good work!!

    Hope you found this helpful!

    • Let's connect on LinkedIn! - @Eileenpk
    Marked as helpful
  • Emmanuel-Xs•80
    @Emmanuel-Xs
    Submitted about 2 years ago

    Frontend Mentor - Interactive rating component solution by Emmanuel

    #gsap
    2
    Eileen dangelo•1,600
    @Eileenpk
    Posted about 2 years ago

    Hi Emmanuel! your project looks really good, I love how you used gsap for the animation, it was a really nice touch.

    To be able to remove the active class if a rating is already selected add this code

    ratingsContainer.addEventListener("click", (e) => {
    	if (!e.target.matches(".rating")) return
    
    	// Check if the clicked rating button already has the "active" class
    	let alreadyActive = e.target.classList.contains("active")
    
    	ratings.forEach((rating) => rating.classList.remove("active"))
    
    	// If the clicked rating button was already active, remove the "active" class and return
    	if (alreadyActive) return
    
    	let selectedRating = e.target
    	selectedRating.classList.add("active")
    	let selectedRatingValue = selectedRating.textContent
    
    	// Rest of the code...
    })
    
    

    Also, consider moving the button.addEventListener() outside the ratingsContainer.addEventListener() to avoid creating a new event listener every time a rating is clicked.

    Hope you found this helpful!

    • Let's connect on LinkedIn! - @Eileenpk
  • Jonah Unuafe•390
    @jonahunuafe
    Submitted about 2 years ago

    Mobile friendly chat-app using flex, grid and positioning

    1
    Eileen dangelo•1,600
    @Eileenpk
    Posted about 2 years ago

    Hi Jonah, your project looks great.

    Proper indentation in HTML is important for the readability and maintainability of code. The most widely accepted convention for indentation in HTML is to use two or four spaces for each level of indentation. If you are using VS Code then I would recommend installing the Prettier extension, it works like a charm!

    Here is what your code should look like properly indented.

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link
          rel="icon"
          type="image/png"
          sizes="32x32"
          href="./images/favicon-32x32.png"
        />
        <link rel="stylesheet" href="style.css" />
        <link
          rel="stylesheet"
          href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
        />
        <title>Frontend Mentor | CHAT-APP-CSS-ILLUSTRATION</title>
      </head>
      <body>
        <main>
          <div class="top-curve"></div>
          <div class="phone-container">
            <div class="ear-piece"></div>
            <div class="samuel-arc">
              <i class="fa fa-angle-left" style="font-size: 20px"></i>
              <img class="avatar" src="images/avatar.jpg" alt="an avatar" />
              <span class="green">Samuel Green</span>
              <span class="walk">Available to Walk</span>
              <i class="fa fa-ellipsis-v"></i>
            </div>
            <div class="phone-enclosure">
              <div class="left-chart-1">
                <p>That sounds great. I'd been happy to discuss more.</p>
              </div>
              <div class="left-chart-2">
                <p>Could you send some pictures of your dog, please?</p>
              </div>
              <div class="animals">
                <img
                  class="dog-1"
                  src="images/dog-image-1.jpg"
                  alt="a dog with mouth open wide"
                />
                <img
                  class="dog-2"
                  src="images/dog-image-2.jpg"
                  alt="a dog lying down"
                />
                <img
                  class="dog-3"
                  src="images/dog-image-3.jpg"
                  alt="a dog with stick in its mouth"
                />
              </div>
              <div class="right-chart-1">
                <p>Here are a few pictures. She's a happy girl!</p>
              </div>
              <div class="right-chart-2">
                <p>Can you make it?</p>
              </div>
              <div class="left-chart-3">
                <p>
                  She looks so happy! The time we discuss works. How long shall I
                  take her out for?
                </p>
              </div>
              <div class="thirty-min">
                <i class="fa fa-circle-thin" style="font-size: 25px"></i>
                <span>30 minute walk</span><span id="twenty-nine">$29</span>
              </div>
              <div class="one-hour">
                <i
                  id="second-circle"
                  class="fa fa-circle-thin"
                  style="font-size: 25px"
                ></i>
                <span id="an-hour-walk">1 hour walk</span
                ><span id="forty-nine">$49</span>
              </div>
              <div class="button">
                <span>Type a message...</span>
                <div class="black-dot">
                  <i
                    id="dot-angle-right"
                    class="fa fa-angle-right"
                    style="font-size: 25px"
                  ></i>
                </div>
              </div>
            </div>
          </div>
          <div class="booking">
            <h1>Simple booking</h1>
            <p>
              Stay in touch with our dog walkers through the chat interface. This
              makes it easy to discuss arrangements and make bookings. Once the walk
              has been completed you can rate your walker and book again all through
              the chat.
            </p>
          </div>
          <div class="bottom-curve"></div>
        </main>
      </body>
    </html>
    
    

    Hope you found this helpful!

    • Let's connect on LinkedIn! - @Eileenpk
    Marked as helpful
  • Decimo-10•120
    @Decimo-10
    Submitted about 2 years ago

    Time tracking dashboard

    2
    Eileen dangelo•1,600
    @Eileenpk
    Posted about 2 years ago

    Hi Decimo,

    Your project looks good, your JS is very readable.

    If you want to change the color of an SVG in a file just to reuse it and have it be for example red instead of white change the fill property in the SVG file.

    To change the color of an SVG on hover you have to:

    Put the SVG code directly into the HTML, if you put the src of the <img> as the SVG file that is in another folder it won't be able to target it

    • Add a class in the beginning tag of the SVG
    • In the CSS the selector should be the class name and then the path
    • The property name should be fill for the background of the SVG and stroke for the outline HTML
    <svg
                aria-labelledby="Facebook"
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
                class=socialIcon >
                 <title id="Facebook" lang="en">Facebook icon</title>
                <path
                  fill="#FFF"
                  d="M22.675 0H1.325C.593 0 0 .593 0 1.325v21.351C0 23.407.593 24 1.325 24H12.82v-9.294H9.692v-3.622h3.128V8.413c0-3.1 1.893-4.788 4.659-4.788 1.325 0 2.463.099 2.795.143v3.24l-1.918.001c-1.504 0-1.795.715-1.795 1.763v2.313h3.587l-.467 3.622h-3.12V24h6.116c.73 0 1.323-.593 1.323-1.325V1.325C24 .593 23.407 0 22.675 0z"
                />
              </svg>
    

    CSS

     .socialIcon:hover path {
          cursor: pointer;
          fill: var(--second-color);
        }
    

    To make it so when you hover directly on the svg image only the image's hover state is active and its container's isn't use the CSS pointer events property.

    • Set the pointer-events property of the container to none
    • Set it to auto for the SVG image element.
    <div class="container">
      <svg class="image" viewBox="0 0 100 100">
        <circle cx="50" cy="50" r="40" fill="red" />
      </svg>
    </div>
    
    .container {
      background-color: gray;
      height: 200px;
      width: 200px;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 20px;
      pointer-events: none; /* set pointer-events to none */
    }
    
    .image {
      height: 100px;
      width: 100px;
      pointer-events: auto; /* set pointer-events to auto for the SVG image */
    }
    
    .image:hover {
      fill: blue;
    }
    

    When you hover over an activity(work, play, etc.) I think using the ::before pseudo-element is fine, :hover might be a little simpler but you could go either way.

    I think you did the right thing with the separation of the fetch functions with the way you approached the JS. You have a for loop in both, (loops are slow) if you had put them both into one, when one of the btns were clicked the createActivities text would be running for no reason.

    Hope you found this helpful!

    Let's connect on LinkedIn! - @Eileenpk

    Marked as helpful
  • Godstime•330
    @iceberg61
    Submitted about 2 years ago

    Base-Apparel-coming-soon-page

    2
    Eileen dangelo•1,600
    @Eileenpk
    Posted about 2 years ago

    Hi Godstime! your project looks good.

    Forms were hard for me too when I started, and validation can get messy. Here are a few things I see that might help.

    In your HTML:

    • Add an aria-label to the email input for accessibility
    <input type="email" name="email" id="email" placeholder="Email Address" aria-label="Email Address">
    
    

    In your JS:

    • Change the event listener to use input event instead of click, this will fire every time the input field changes
    • Add or remove classes instead of manipulating them
    • Check for an empty input before checking for a pattern match, currently if I try to submit the form with an empty email input, no error is shown
    email.addEventListener('input', validateEmail);
    
    function validateEmail() {
      if (email.value.trim() === '') {
        paragraph.innerHTML = 'Please provide an email';
        email.classList.remove('bg-form');
        error.src = '';
      } else if (!email.value.match(patterns)) {
        paragraph.innerHTML = 'Please provide a valid email';
        email.classList.add('bg-form');
        error.src = '../images/icon-error.svg';
      } else {
        paragraph.innerHTML = 'Please submit the email';
        email.classList.remove('bg-form');
        error.src = '';
      }
    }
    

    Hope you found this helpful!

    • Let's connect on LinkedIn! - @Eileenpk
    Marked as helpful
  • bundasse•100
    @bundasse
    Submitted about 2 years ago

    Article preview component solution with SCSS

    #sass/scss
    1
    Eileen dangelo•1,600
    @Eileenpk
    Posted about 2 years ago

    Hi Bundasse!

    Your project looks great, and this might be a helpful tip.

    To change the color of an SVG, you have to:

    • Put the SVG code directly into the HTML, if you put the src of the <img> as the SVG file that is in another folder it won't be able to target it
    • Add a class the the beginning tag of the SVG
    • In the CSS the selector should be the class name and then the path
    • The property name should be fill for the background of the SVG and stroke for the outline

    HTML

    <svg
                aria-labelledby="Facebook"
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
                class=socialIcon >
                 <title id="Facebook" lang="en">Facebook icon</title>
                <path
                  fill="#FFF"
                  d="M22.675 0H1.325C.593 0 0 .593 0 1.325v21.351C0 23.407.593 24 1.325 24H12.82v-9.294H9.692v-3.622h3.128V8.413c0-3.1 1.893-4.788 4.659-4.788 1.325 0 2.463.099 2.795.143v3.24l-1.918.001c-1.504 0-1.795.715-1.795 1.763v2.313h3.587l-.467 3.622h-3.12V24h6.116c.73 0 1.323-.593 1.323-1.325V1.325C24 .593 23.407 0 22.675 0z"
                />
              </svg>
    

    CSS

     .socialIcon:hover path {
          cursor: pointer;
          fill: var(--second-color);
        }
    

    Hope you found this helpful!

    • Let's connect on LinkedIn! - @Eileenpk
    Marked as helpful
  • GHNetCode•170
    @GHNetCode
    Submitted about 2 years ago

    Testimonial Grid using VSC,MSpaint,HTML,CSS with flexbox.

    2
    Eileen dangelo•1,600
    @Eileenpk
    Posted about 2 years ago

    Hi GHNetCode! your project looks great, and this might be a helpful tip.

    I'm not sure if I understand the problem that you were having with ordering the elements (testimonial cards) using flexbox. But what I think you mean is that you wanted to reorder the flex items. To do this with flexbox you can use the order property

            <div class="box">
                <div><a href="#">1</a></div>
                <div><a href="#">2</a></div>
                <div class="active"><a href="#">3</a></div>
                <div><a href="#">4</a></div>
                <div><a href="#">5</a></div>
            </div>
          
    
            .box {
              display: flex;
              flex-wrap: wrap;
              flex-direction: row;
            }
            .active {
                order: -1;
                flex: 1 0 100%;
            }
    

    Here is a link that goes into more about Flexbox - flexbox

    Hope you found this helpful!

    • Let's connect on LinkedIn! - @Eileenpk
  • Borko•230
    @borkk85
    Submitted about 2 years ago

    Interactive Comment Section

    2
    Eileen dangelo•1,600
    @Eileenpk
    Posted about 2 years ago

    Hi Borko, your project looks great!

    In regards to you getting the counters SVGs active (I'm guessing on hover?) I have sent you a pull request on GitHub so that you can see the changes I've made better.

    In short, the only way that I know of to change the fill of an SVG is to:

    • Put the SVG directly in your code.
    • Add a class name to the SVG
    • In CSS selector should target the class of the SVG on hover and then the path
    • Add property name fill to the declaration block
    • The value should be the color you want the SVG to be.
    <svg alt="plus-icon" class='plus' width="11" height="11" xmlns="http://www.w3.org/2000/svg"><path d="M6.33 10.896c.137 0 .255-.05.354-.149.1-.1.149-.217.149-.354V7.004h3.315c.136 0 .254-.05.354-.149.099-.1.148-.217.148-.354V5.272a.483.483 0 0 0-.148-.354.483.483 0 0 0-.354-.149H6.833V1.4a.483.483 0 0 0-.149-.354.483.483 0 0 0-.354-.149H4.915a.483.483 0 0 0-.354.149c-.1.1-.149.217-.149.354v3.37H1.08a.483.483 0 0 0-.354.15c-.1.099-.149.217-.149.353v1.23c0 .136.05.254.149.353.1.1.217.149.354.149h3.333v3.39c0 .136.05.254.15.353.098.1.216.149.353.149H6.33Z" fill="#C5C6EF"/></svg>
                 
              <span class="counter">${comment.score}</span>
                  
              <svg alt="minus-icon" class='minus' width="11" height="3" xmlns="http://www.w3.org/2000/svg"><path d="M9.256 2.66c.204 0 .38-.056.53-.167.148-.11.222-.243.222-.396V.722c0-.152-.074-.284-.223-.395a.859.859 0 0 0-.53-.167H.76a.859.859 0 0 0-.53.167C.083.437.009.57.009.722v1.375c0 .153.074.285.223.396a.859.859 0 0 0 .53.167h8.495Z" fill="#C5C6EF"/></svg>
    
    .plus:hover path,
    .minus:hover path {
      fill: var(--Moderate-blue);
    }
    

    Hope you found this helpful!

    • Let's connect on LinkedIn! - @Eileenpk
    Marked as helpful
  • Heryoadeh•30
    @Heryoadeh
    Submitted about 2 years ago

    Url Shortening Api Landing Page built with HTML, CSS and Javascript

    1
    Eileen dangelo•1,600
    @Eileenpk
    Posted about 2 years ago

    Hi Heryoadeh! your project looks great.

    A great and free resource to learn JavaScript is Scrimba, they have interactive tutorials where you watch the teacher code live and can pause and write your own code right inside the workspace. I used it to learn JavaScript, React, and a bunch of other skills I now use all the time- I can't recommend it enough!

    Here is a link to their website Scrimba

    Hope you found this helpful!

    • Let's connect on LinkedIn! - @Eileenpk
  • Reno08-code•300
    @Reno08-code
    Submitted about 2 years ago

    Huddle landing page with a single introductory section

    2
    Eileen dangelo•1,600
    @Eileenpk
    Posted about 2 years ago

    Hi Reno08-code! your project looks great, and the social icons might not be displaying because the Font Awesome icon library has not been properly linked to the HTML file. To use Font Awesome icons, you need to link the Font Awesome stylesheet to your HTML file in the head section. Here's how you can do it:

    <head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" />
    </head>
    

    This code will link the Font Awesome stylesheet from the CDN (Content Delivery Network) to your HTML file.

    Hope you found this helpful!

    • Let's connect on LinkedIn! - @Eileenpk
    Marked as helpful
  • Felipe Thomé•910
    @felipetn1989
    Submitted about 2 years ago

    Crowdfunding product page

    #tailwind-css
    1
    Eileen dangelo•1,600
    @Eileenpk
    Posted about 2 years ago

    Hi Felipe,

    Your project looks really good, awesome work!

    In regards to removing the event listener when the number of pledges left is zero, did you try EventTarget.removeEventListener() ? I think it might be a good way to simplify your code.

    Here is a link that talks about it more - removeEventListener

    Hope you found this helpful!

    • Let's connect on LinkedIn! - @Eileenpk
    Marked as helpful
  • Pierre Fraisse•330
    @PierreFrs
    Submitted about 2 years ago

    Interactive Rating (mobile first)

    3
    Eileen dangelo•1,600
    @Eileenpk
    Posted about 2 years ago

    Hi Pierre,

    I sent a pull request to your project on GitHub with the changes made, I see that other people have already answered your question and helped you debug, but I wanted to let you know to look on GitHub if you wanted to practice pull requests and merging.

    Hope this was helpful!

    Marked as helpful
  • ohuttar•160
    @ohuttar
    Submitted about 2 years ago

    Four Card Feature using Grid

    2
    Eileen dangelo•1,600
    @Eileenpk
    Posted about 2 years ago

    @Ohuttar,

    Every page should have some content that tells the viewer what it's about or at least some kind of context for the rest of the information on the page. After all, the purpose of a website is to relay information about something. I would pick the piece of content that best describes the page or gives the most context.

    • Here is a link that talks more about SEO and using <h1> tags.
    Marked as helpful
  • ohuttar•160
    @ohuttar
    Submitted about 2 years ago

    Four Card Feature using Grid

    2
    Eileen dangelo•1,600
    @Eileenpk
    Posted about 2 years ago

    Hi Ohuttar, your project looks great, and this might be a helpful tip.

    You have

    <h1 class="visually-hidden">AI-Powered Project Manager</h1>

    .visually-hidden:not(:focus):not(:active) {
      clip: rect(0 0 0 0);
      clip-path: inset(50%);
      height: 1px;
      overflow: hidden;
      position: absolute;
      white-space: nowrap;
      width: 1px;
    }
    

    Search engines use complex algorithms to evaluate web pages and determine their relevance and quality based on a variety of factors, including the content on the page, the page structure, and the links to and from the page. Using hidden text could be seen as a black-hat SEO technique and is likely to result in penalties or even a ban from search engines, which can have a significant negative impact on your website's visibility and traffic.

    I recommend removing this hidden text and replacing the first <p> tag with an <h1>, you can then add these tags inside the <head> tag

    <title>
         Four Card Feature
     </title>
     <meta
         name="description"
         content="AI-Powered Project Manager"
    />
    // This is for social media 
    <meta
         property="og:title"
         content="what you want the title of the page to be on social media when 
         someone posts/shares"
            />
    <meta
          property="og:description"
          content="what you want the description to be on social media when 
         someone posts/shares"
            />
    

    Hope you found this helpful!

    • Let's connect on LinkedIn! - @Eileenpk
    Marked as helpful
  • Adriaan Bornman•60
    @Cyber-Borries
    Submitted about 2 years ago

    Advice generator built with React

    #react#fetch
    2
    Eileen dangelo•1,600
    @Eileenpk
    Posted about 2 years ago

    Hi Adriaan! your project looks great, and I thought this might be a helpful tip.

    Add error handling to your fetchAdvice function.

      const fetchAdvice = async () => {
        try {
          const response = await fetch("https://api.adviceslip.com/advice");
          const data = await response.json();
          setAdvice(data.slip);
        } catch (error) {
          console.error(error);
        }
      };
    

    Here is a link that talks more about control flow and error handling.

    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling

    Hope you found this helpful!

    • Let's connect on LinkedIn! - @Eileenpk
    Marked as helpful
  • Tamana•210
    @Tamana123-2
    Submitted over 2 years ago

    HTML_CSS

    4
    Eileen dangelo•1,600
    @Eileenpk
    Posted over 2 years ago

    Hi Tamana! your project looks great, and this might be a helpful tip.

    One change to think about is formatting your code with proper code indentation and line breaks. For this project, it doesn't matter as much but it definitely will once you start on bigger projects. It really makes it much easier to read/review/debug/reference the code. I would add the Prettier extension to Vs code if that is the IDE that you are using.

    Here is what the formatted HTML should look like.

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
          rel="icon"
          type="image/png"
          sizes="32x32"
          href="./images/favicon-32x32.png"
        />
    
        <title>Frontend Mentor | QR code component</title>
        <link rel="stylesheet" href="style.QR.css" />
      </head>
      <body>
        <main>
          <article class="container">
            <img src="./images/image-qr-code.png" alt="" class="img-1" />
            <div class="content">
              <p class="first">
                Improve your front-end skills by building projects
              </p>
    
              <p class="second">
                Scan the QR code to visit Frontend Mentor and take your coding
                skills to the next level
              </p>
            </div>
          </article>
        </main>
      </body>
    </html>
    

    Also, look into Scrimba if you want to learn JavaScript, it's free and a great way to actually get practice and you have help if you need it.

    Here is a link to their free courses

    • https://scrimba.com/allcourses?price=free

    Hope you found this helpful!

    • Let's connect on LinkedIn! - @Eileenpk
  • Victoria Sardelli•100
    @Victoria-Sardelli
    Submitted over 2 years ago

    Responsive landing page built mobile-first with flexbox

    1
    Eileen dangelo•1,600
    @Eileenpk
    Posted over 2 years ago

    Hi Victoria! your project looks great, and this might be a helpful tip.

    I would switch the <section> and <article> tags.

    The <section> tag is used to group related content together, such as a group of paragraphs or other content that is related to a particular topic. It's essentially a way to divide content into sections for better organization and readability. The <section> tag does not imply anything about the content's meaning or importance, and it can be used for any type of content. In this case, each card would be a <section> or a group of related content pertaining to that course.

    The <article> tag is used to represent a self-contained piece of content that can be distributed or reused independently of the rest of the page. This could be a news article, blog post, product review, or any other type of standalone content. The <article> tag implies that the content is meaningful or significant in some way, and it typically includes a headline or title. With the info provided each card would not make sense if you saw it by itself. however, the group of cards together does, and so should be an <article>

    Hope you found this helpful!

    • Let's connect on LinkedIn! - @Eileenpk
    Marked as helpful
  • Robert•170
    @waffleflopper
    Submitted over 2 years ago

    Expenses Chart w/ SASS & Vanilla JS

    #sass/scss
    1
    Eileen dangelo•1,600
    @Eileenpk
    Posted over 2 years ago

    Hi Robert! your project looks good, and this might be a helpful tip.

    In your HTML, you have nested <main> tags. It is best practice to only have one per page as screen readers and SEO uses the landmark tag to let users and bots know that this is the "main" content of the page.

    Also in your JS you have

    const dynamic = document.getElementById("chart");
    
    if (dynamic) {
        ...
    }
    

    I think you can take out the if statement because you have hard-coded the id=dynamic in your HTML and so it will always be a true value.

    Here is a link to learn more about semantic elements. https://www.w3schools.com/html/html5_semantic_elements.asp

    Hope you found this helpful!

    • Let's connect on LinkedIn! - @Eileenpk
    Marked as helpful
Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub