jayseeg / brownFox

The quick brown fox jumps over the lazy dog.
0 stars 0 forks source link

Store needs some design love #68

Open jayseeg opened 8 years ago

jayseeg commented 8 years ago

take a look at: http://173.255.211.63/store.html ,... it definitely needs some help

lbecerra99 commented 8 years ago

is it already in a table?

jayseeg commented 8 years ago

no, I think it's just a series of a tags with content in them:

        <div class="media-wrapper">
      <div class="store-items">
        <a href="http://www.cdbaby.com/cd/tomhagerman" class="store-item" target="_blank">
          <img src="/img/download.jpg" class="store-image" />
          <span class="store-item-title">Idle Creatures</span>
        </a>
        <a href="http://www.cdbaby.com/cd/hagerman" class="store-item" target="_blank">
          <img src="/img/TheBreakfastPlayground.jpg" class="store-image" />
          <span class="store-item-title">The Breakfast Playground</span>
        </a>
        <a href="http://www.cdbaby.com/cd/tomhagerman2" class="store-item" target="_blank">
          <img src="/img/WaterMusic.jpg" class="store-image" />
          <span class="store-item-title">Water Music</span>
        </a>
        <a href="http://devotchka.myshopify.com/collections/cd-vinyl/products/cd-tom-hagerman-3-cd-bundle" class="store-item" target="_blank">
          <img src="/img/3discBundle.jpg" class="store-image" />
          <span class="store-item-title">3 CD Bundle</span>
        </a>
        <a href="https://itunes.apple.com/us/artist/tom-hagerman/id216928883" class="store-item" target="_blank">
          <img src="/img/3discBundle.jpg" class="store-image" />
          <span class="store-item-title">ITunes</span>
        </a>
      </div>
    </div>
lbecerra99 commented 8 years ago

could we put them in a table?

lbecerra99 commented 8 years ago

that may make it look better just happening

lbecerra99 commented 8 years ago

but im not sure about adding content with that....

jayseeg commented 8 years ago

are you looking to make it layout like this:

image title link to buy

?

if so, maybe try making two rows of it in a codepen like so:

<div class="store-item">
  <img src="/img/download.jpg" class="store-image" />
  <span class="store-title">Idle Creatures</span>
  <a href="http://www.cdbaby.com/cd/tomhagerman" class="store-buy-link" target="_blank">Buy Now</a>
</div>

& then add styles to get it how you're thinking:

.store-item {
}

.store-image {
  float: left;
  max-width: 125px;
}

.store-title {
  float: left;
  display: inline-block;
}

.store-buy-link {
  float: left;
  display: inline-block;
}
jayseeg commented 8 years ago

I'll check in in the morning to see if @lbecerra99 has any updates here.

@Delta-Duhr—feel free to take a look at it.

lbecerra99 commented 8 years ago

the store page is currently under construction i cannot work on it if i dont know what im working with

lbecerra99 commented 8 years ago

PS is the contact page fixed? you deleted that issue but I didnt send you anything to fix it...... @Delta-Duhr @jayseeg

Delta-Duhr commented 8 years ago

Go to http://173.255.211.63/store.php to see the final version