Coder Threads

readme.md

Instructions

1. Create new pen at CodePen.io. Anonymous or free accounts are fine; if anonymous, include your full name in the title.
2. Copy html/css/js files from this gist.
3. Make the requested edits (below) to the sample site. They can be achieved with CSS changes only; no HTML or JS changes are expected.
4. Copy your unique CodePen URL and paste into your application.

Note: applications without a CodePen URL will not be considered.

Tasks:

• Center the logo in the header bar
• Highlight the active category button
• Change the nav elements (Home, Shop, etc) from sentence case to uppercase
• Display products in a 2x2 grid

coderthreads.css

* {
    padding: 0;
    margin: 0;
}

html,
body {
    font-family: Helvetica;
    background-color: #F4F2E9;
}

header {
    background-color: #A3C5C3;
    margin-bottom: 25px;
}

.logo img {
    width: 200px;
    height: 194px;
}

nav {
    height: 50px;
    background-color: #333D51;
    display: flex;
    justify-content: center;
}

.navbar li {
    float: left;
    list-style-type: none;
}

.navbar li a {
    color: #fff;
    font-size: 16px;
    line-height: 3em;
    padding: 0 35px;
    text-decoration: none;
}

.navbar li a:hover:not(.active) {
    text-decoration: underline;
}

.navbar li.active a {
    text-decoration: underline;
}

section {
    width: 800px;
    margin: 0 auto;
}

.categories {
    float: left;
    margin-right: 30px;
}

.categories h2 {
    margin-bottom: 15px;
}

.categories li {
    list-style-type: none;
    font-size: 21px;
    border: none;
    border-bottom: 3px solid #333D51;
}

.category-button {
    display: block;
    color: #000;
    font-size: 18px;
    text-decoration: none;
    width: 150px;
    padding: 25px 10px;
    text-align: center;
}

.category-button:hover {
    background-color: #D2AC2B;
}

.category-button-selected {
    cursor: default;
}

.products {
    width: 600px;
    float: left;
}

.products h2 {
    text-transform: uppercase;
}

.products ul {
    width: 100%;
    margin: 10px 0;
}

.products li {
    list-style-type: none;
    background: #dcdbdb;
    min-height: 133px;
    margin: 10px 0;
    padding: 15px;
}

.products img {
    display: block;
    float: left;
    height: 133px;
    width: 200px;
}

.products div {
    display: inline-block;
    padding: 0 15px;
    width: 340px;
}

.product-title {
    display: block;
    font-weight: 900;
    padding-bottom: 5px;
    text-transform: uppercase;
}

.product-price {
    display: block;
    font-size: 12px;
    font-weight: 900;
    padding-top: 5px;
}

footer {
    font-size: 14px;
    background-color: #A3C5C3;
    width: 100%;
    height: 100px;
    display: flex;
    justify-content: center;
    padding: 25px;
}

coderthreads.html

<link rel="stylesheet" type="text/css" href="./coderthreads.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="./coderthreads.js"></script>
<header>
    <div class="logo">
        <img src="https://i.imgsafe.org/0b526260fb.png" alt="Coder Threads Logo">
    </div>
    <nav>
        <ul class='navbar'>
            <li>
                <a href='#'>Home</a>
            </li>
            <li class='active'>
                <a href='#'>Shop</a>
            </li>
            <li>
                <a href='#'>Store Locator</a>
            </li>
        </ul>
    </nav>
</header>
<section>
    <div class='categories'>
        <h2>Categories</h2>
        <ul>
            <li><a href='#shirts' class='category-button category-button-initial'>Shirts</a></li>
            <li><a href='#pants' class='category-button'>Pants</a></li>
            <li><a href='#accessories' class='category-button'>Accessories</a></li>
        </ul>
    </div>
    <div id='shirts' class='products'>
        <h2>Shirts</h2>
        <ul>
            <li id="prod1">
                <img src="https://i.imgsafe.org/13de3c2e5e.png" alt="Women's Classic T-Shirt">
                <div>
                    <span class="product-title">Women's Classic T-Shirt</span>
                    <span class="product-description">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</span>
                    <span class="product-price">$10.00</span>
                </div>
            </li>
            <li id="prod2">
                <img src="https://i.imgsafe.org/141af47f49.png" alt="Men's Leather Jacket">
                <div>
                    <span class="product-title">Men's Leather Jacket</span>
                    <span class="product-description">Lorem ipsum dolor sit amet, sed lectus sagittis est congue, eu adipiscing amet libero. Luctus enim ante massa felis amet ac, omnis integer, aliquam viverra amet ornare sed, sed voluptate placerat enim tellus elit.</span>
                    <span class="product-price">$55.00</span>
                </div>
            </li>
            <li id="prod3">
                <img src="https://i.imgsafe.org/1421c7aae2.png" alt="Women's Gray Hooded Sweatshirt">
                <div>
                    <span class="product-title">Women's Gray Hooded Sweatshirt</span>
                    <span class="product-description">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sitipsum dolor sit amet. Lorem ipsum dolor sit amet.</span>
                    <span class="product-price">$35.00</span>
                </div>
            </li>
            <li id="prod4">
                <img src="https://i.imgsafe.org/14240b9f18.png" alt="Men's Athletic Compression Top">
                <div>
                    <span class="product-title">Men's Athletic Compression Top</span>
                    <span class="product-description">Lorem ipsum dolor sit amet.</span>
                    <span class="product-price">$45.00</span>
                </div>
            </li>
        </ul>
    </div>
    <div id='pants' class='products'>
        <h2>Pants</h2>
        <ul>
            <li id="prod5">
                <img src="https://i.imgsafe.org/14f6c3d696.png" alt="Men's Olive Chinos">
                <div>
                    <span class="product-title">Men's Olive Chinos</span>
                    <span class="product-description">Lorem ipsum dolor sit amet.</span>
                    <span class="product-price">$45.00</span>
                </div>
            </li>
            <li id="prod6">
                <img src="https://i.imgsafe.org/210b60d480.png" alt="Women's Distressed Jeans">
                <div>
                    <span class="product-title">Women's Distressed Jeans</span>
                    <span class="product-description">Lorem ipsum dolor sit amet, sed lectus sagittis est congue, eu adipiscing amet libero. Luctus enim ante massa felis amet ac, omnis integer, aliquam viverra amet ornare sed, sed voluptate placerat enim tellus elit.</span>
                    <span class="product-price">$50.00</span>
                </div>
            </li>
            <li id="prod7">
                <img src="https://i.imgsafe.org/14f86a5ef4.png" alt="Women's Skinny Mid Tone Jeans">
                <div>
                    <span class="product-title">Women's Skinny Mid Tone Jeans</span>
                    <span class="product-description">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</span>
                    <span class="product-price">$40.00</span>
                </div>
            </li>
        </ul>
    </div>
    <div id='accessories' class='products'>
        <h2>Accessories</h2>
        <ul>
            <li id="prod8">
                <img src="https://i.imgsafe.org/1508f24253.png" alt="Leather Book Bag">
                <div>
                    <span class="product-title">Leather Book Bag</span>
                    <span class="product-description">Lorem ipsum dolor sit amet.</span>
                    <span class="product-price">$55.00</span>
                </div>
            </li>
            <li id="prod9">
                <img src="https://i.imgsafe.org/1508dc9fb3.png" alt="Laptop Bag">
                <div>
                    <span class="product-title">Laptop Bag</span>
                    <span class="product-description">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet</span>
                    <span class="product-price">$40.00</span>
                </div>
            </li>
            <li id="prod10">
                <img src="https://i.imgsafe.org/1508d3b63e.png" alt="Five Panel Hat">
                <div>
                    <span class="product-title">Five Panel Hat</span>
                    <span class="product-description">Lorem ipsum dolor sit amet, sed lectus sagittis est congue, eu adipiscing amet libero. Luctus enim ante massa felis amet ac, omnis integer, aliquam viverra amet ornare sed, sed voluptate placerat enim tellus elit.</span>
                    <span class="product-price">$30.00</span>
                </div>
            </li>
            <li id="prod11">
                <img src="https://i.imgsafe.org/1508c85d59.png" alt="Apple Watch">
                <div>
                    <span class="product-title">Apple Watch</span>
                    <span class="product-description">Lorem ipsum dolor sit amet.</span>
                    <span class="product-price">$199.99</span>
                </div>
            </li>
        </ul>
    </div>
</section>
<footer>
    ~ don't code without your threads ~
</footer>

coderthreads.js

$(document).ready(function() {
  $(document).on('click', '.category-button', function(e) {
    e.preventDefault();
    var $categoryLink = $(this);
    var categoryId = $categoryLink.attr('href');
    var $parent = $categoryLink.parent();
    $parent.addClass('category-button-selected');
    $parent.siblings().removeClass('category-button-selected');

    $(categoryId).fadeIn(100);
    $('.products').not(categoryId).fadeOut(100);
  });

  $('.category-button-initial').trigger('click');
});