Jump to content

BoxNine7 portfolio draft

Recommended Posts

  • Replies 11
  • Views 248
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

Are you looking for something a bit like this (boxes at the top of the first section)?

https://blue-hexahedron-d6ae.squarespace.com

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

📈 SEO Space (Referral link)
Ⓜ️ 
Will Myers' Plugins & Tutorials (Referral link)
 🔌 Ghost Squarespace Plugins (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

I can send the code I created for that client for you to adapt to your content.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

📈 SEO Space (Referral link)
Ⓜ️ 
Will Myers' Plugins & Tutorials (Referral link)
 🔌 Ghost Squarespace Plugins (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

HTML:  

<div class="grid3">
     <div class="grid3-item">
        <h4 class="preFade fadeIn">
       
        </h4>
        <p class="preFade fadeIn">
          
          <br><br><a href="#lightbox_checks-all-the-boxes_#block-yui_3_17_2_1_1671041256442_413710">Learn more →</a></p>
      </div> 
      <div class="grid3-item">
        <h4 class="preFade fadeIn">
        
        </h4>
        <p class="preFade fadeIn">
          
          
          <br><br><a href="#lightbox_checks-all-the-boxes_#block-yui_3_17_2_1_1671041256442_426339">Learn more →</a></p>
      </div> 
      <div class="grid3-item">
        <h4 class="preFade fadeIn">
        
        </h4>
        <p class="preFade fadeIn">
          
          <br><br><a href="#lightbox_checks-all-the-boxes_#block-42da99d4a0e6627c7afe">Learn more →</a></p>
      </div> 
     <div class="grid3-item">
        <h4 class="preFade fadeIn">
       
       </h4>
        <p class="preFade fadeIn">
          
          <br><br><a href="#lightbox_checks-all-the-boxes_#block-e7a6854510ee77df193c">Learn more →</a></p>
      </div> 
      <div class="grid3-item">
        <h4 class="preFade fadeIn">
        
        </h4>
        <p class="preFade fadeIn">
          
          <br><br><a href="#lightbox_checks-all-the-boxes_#block-4b50be3d262d44b57a30">Learn more →</a></p>
      </div> 
      <div class="grid3-item">
        <h4 class="preFade fadeIn">
        
        </h4>
        <p class="preFade fadeIn">
          
          <br><br><a href="#lightbox_checks-all-the-boxes_#block-b5d38cf44218ea76dfc5">Learn more →</a></p>
      </div> 
</div>

 

Custom CSS

// Boxes! // CSS Grid 3x2

.grid3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  padding: 10px;
  gap:20px 20px;
}
.grid3-item {
  text-align: center;
  padding:12px;
  border:1px solid white;
  min-height:210px;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  align-items: center;
  justify-content: center;
  transition: ease-in-out 0.1s;
}
.grid3-item h4 {
  font-family: 'Hatton-Semibold', serif;
  margin:0;
}
.grid3-item p {
  font-size:0.8rem;
  line-height:1.3em;
  visibility:hidden;
  height:0;
  opacity:0;
}
.grid3-item:hover {
  background-color:@main;
  box-shadow:6px 6px @accent;
  p {
    visibility:initial;
    height:initial;
    opacity:1;
  }
}
@media screen and (max-width:1000px) {
  .grid3 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: auto;
    gap:20px;
  }
  .grid3-item {
    min-height:180px
  }
}
@media screen and (max-width:767px) {
  .grid3-item h4 {
    font-size:4vw;
  }
}

 

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

📈 SEO Space (Referral link)
Ⓜ️ 
Will Myers' Plugins & Tutorials (Referral link)
 🔌 Ghost Squarespace Plugins (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

<img src="IMAGE URL HERE">

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

📈 SEO Space (Referral link)
Ⓜ️ 
Will Myers' Plugins & Tutorials (Referral link)
 🔌 Ghost Squarespace Plugins (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

Where about in the code would this go? 

Below is the html code I have so far, I'm wanting to have the BOLD TITLES on a separate title form the text but I can't seem to do this whilst maintainting the hover effect- any ideas?

 

<div class="grid3">
     <div class="grid3-item">
        <h4 class="preFade fadeIn">
       
        </h4>
        <p class="preFade fadeIn">
          
          <br><br><a href="#lightbox_checks-all-the-boxes_#block-yui_3_17_2_1_1671041256442_413710">
         
           MADE TO ORDER
            
Made in accordance with our customer's specifications to minimise wastage in production.</a></p>
      </div> 
      <div class="grid3-item">
        <h4 class="preFade fadeIn">
        
        </h4>
        <p class="preFade fadeIn">
          
          
          <br><br><a href="#lightbox_checks-all-the-boxes_#block-yui_3_17_2_1_1671041256442_426339">HAND CRAFTED
            
Products and/or elements have been hand crafted by artisans to preserve craft traditions and support independent artisan businesses.</a></p>
      </div> 
      <div class="grid3-item">
        <h4 class="preFade fadeIn">
        
        </h4>
        <p class="preFade fadeIn">
          
          <br><br><a href="#lightbox_checks-all-the-boxes_#block-42da99d4a0e6627c7afe">ETHICAL
            
Supply chain conforms with all relevant International Labour Organisation (ILO) policies surrounding child labour, workers rights, freedom of association, minimum wages and health & safety.</a></p>
      </div> 
     <div class="grid3-item">
        <h4 class="preFade fadeIn">
       
       </h4>
        <p class="preFade fadeIn">
          
          <br><br><a href="#lightbox_checks-all-the-boxes_#block-e7a6854510ee77df193c">ORGANIC
            
Product is made up of >70% naturally occurring raw materials, without the use of chemical or other artificial elements.</a></p>
      </div> 
      <div class="grid3-item">
        <h4 class="preFade fadeIn">
        
        </h4>
        <p class="preFade fadeIn">
          
          <br><br><a href="#lightbox_checks-all-the-boxes_#block-4b50be3d262d44b57a30">FSC TIMBER
            
Wood has been harvested in compliance with rules and regulations to protect our natural resources.</a></p>
      </div> 
      <div class="grid3-item">
        <h4 class="preFade fadeIn">
        
        </h4>
        <p class="preFade fadeIn">
          
          <br><br><a href="#lightbox_checks-all-the-boxes_#block-b5d38cf44218ea76dfc5">THOUGHTFUL FURNITURE
            
Item is reclaimed, recycled or up cycled usually an Antique or Vintage item given a new life.</a></p>
      </div> 
</div>

Link to comment

I would move the titles into the <h4> tags, and the image before the <h4>

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

📈 SEO Space (Referral link)
Ⓜ️ 
Will Myers' Plugins & Tutorials (Referral link)
 🔌 Ghost Squarespace Plugins (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

This is what I have managed to do so far https://www.boxnine7.com/s-portfolio-draft-1

However, there are still several issues with the grid:

  • I can't seem to get the outline visible (ideally it would be #607750)
  • I want the images to disappear when hovered over and just show the text
  • The text should be read as a subtitle and then the body

 

Is there any chance you could advise on the above?

Link to comment

The CSS for border needs to be:

border: 1px solid #607750;

Image disappear on hover should be simply this:

.grid3-item:hover img { 
   display:none;
}

Not sure what you need to change for this:
"The text should be read as a subtitle and then the body"

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

📈 SEO Space (Referral link)
Ⓜ️ 
Will Myers' Plugins & Tutorials (Referral link)
 🔌 Ghost Squarespace Plugins (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.