Creating a Portfolio Site in 7.0

Minimalist, colorful portfolio.
View the Website Password: demo

If you have any questions or run into any issues, contact hello@ilovecreatives.com.

1. Add HTML into Settings > Advanced > Code Injection > Footer

<div class="sidetext-left">
	<h3>This is — <a href="https://www.google.com" target="_blank">the left side text</a></h3>
</div>

<div class="sidetext-right">
	<h3>This is — <a href="https://www.google.com" target="_blank">the right side text</a></h3>
</div>

2. In Design > Site Styles, import the Style Pack (scroll to the bottom).*

💾 Download

*You will need a Circle account to import Style Packs.

3. In Design > Custom CSS, add the following CSS

Code Snippets used Custom Fonts, Side Bar Text, Button, and Newsletter

/* Index **********/

article.index-item.has-item-image {
  border: 1px solid #222;
  -webkit-transform: scale(0.9, 0.9);
  -moz-transform: scale(0.9, 0.9);
  -o-transform: scale(0.9, 0.9);
  -ms-transform: scale(0.9, 0.9);
  transform: scale(0.9, 0.9);
  -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  -moz-transition: -moz-transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  -o-transition: -o-transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  transition: -webkit-transform 0.5s cubic-bezier(0.23, 1, 0.32, 1),
    -moz-transform 0.5s cubic-bezier(0.23, 1, 0.32, 1),
    -o-transform 0.5s cubic-bezier(0.23, 1, 0.32, 1), transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

article.index-item.has-item-image:hover {
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -o-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}

/* NEWSLETTER **********/

.newsletter-block .newsletter-form-body {
  padding: 0px;
  border-bottom: 1px solid #222;
  max-width: 280px;
  margin: 0 auto; /* remove if you don't want it centered and change the alignment to left or right */
}

.newsletter-block .newsletter-form-field-wrapper {
  padding: 0px;
  min-width: 200px;
}

.newsletter-block .newsletter-form-field-element {
  border: none;
  padding: 0px;
  background: #f8d3d3 !important;
  background-color: #f8d3d3 !important;
  font-size: 16px;
  font-family: 'MaisonNeue-Extended-Book'; /* if you want to change the input text */
}

.newsletter-block .newsletter-form-button {
  padding: 0em;
  font-family: inherit; /* if you want to change the input text */
  text-transform: lowercase;
  -webkit-transition: all ease-in-out 200ms;
  -moz-transition: all ease-in-out 200ms;
  -ms-transition: all ease-in-out 200ms;
  -o-transition: all ease-in-out 200ms;
  transition: all ease-in-out 200ms;
}

.newsletter-block .newsletter-form-button:hover {
  color: green;
}

/* SIDE TEXT **********/

.sidetext-left h3,
.sidetext-right h3 {
}
.sidetext-left,
.sidetext-right {
  position: fixed;
  bottom: 40%;
  height: 1.5em;
  margin: auto;
}

.sidetext-left {
  left: 25px;
  -webkit-transform-origin: 0 50%;
  -moz-transform-origin: 0 50%;
  -ms-transform-origin: 0 50%;
  -o-transform-origin: 0 50%;
  transform-origin: 0 50%;
  -webkit-transform: rotate(-90deg) translate(-50%, 50%);
  -moz-transform: rotate(-90deg) translate(-50%, 50%);
  -ms-transform: rotate(-90deg) translate(-50%, 50%);
  -o-transform: rotate(-90deg) translate(-50%, 50%);
  transform: rotate(-90deg) translate(-50%, 50%);
}

.sidetext-right {
  right: 25px;
  -webkit-transform-origin: 100% 50%;
  -moz-transform-origin: 100% 50%;
  -ms-transform-origin: 100% 50%;
  -o-transform-origin: 100% 50%;
  transform-origin: 100% 50%;
  -webkit-transform: rotate(90deg) translate(50%, 50%);
  -moz-transform: rotate(90deg) translate(50%, 50%);
  -ms-transform: rotate(90deg) translate(50%, 50%);
  -o-transform: rotate(90deg) translate(50%, 50%);
  transform: rotate(90deg) translate(50%, 50%);
}

@media only screen and (max-width: 1000px) {
  .sidetext-left,
  .sidetext-right {
    display: none;
  }
}

/* BUTTONS **********/

.sqs-block-button-element--medium {
  -webkit-transition: all ease-in-out 200ms;
  -moz-transition: all ease-in-out 200ms;
  -ms-transition: all ease-in-out 200ms;
  -o-transition: all ease-in-out 200ms;
  transition: all ease-in-out 200ms;
}

.sqs-block-button-element--medium:hover {
  box-shadow: 10px 10px rgba(0, 0, 0, 0.2);
  opacity: 1 !important;
}

/* FONTS **********/

h1,
.Blog-title,
.BlogList-item-title,
.BlogItem-title,
.form-title,
.site-title,
.mobile-branding-wrapper .mobile-site-title a,
.index-navigation,
.mobile-primary-nav-links,
.mobile-secondary-nav-links,
.page-description {
  font-family: 'MaisonNeue-Extended-Book' !important;
}

h2,
.sqs-block-quote {
  font-family: 'MaisonNeue-Extended-Book' !important;
}

h3 {
  font-family: 'MaisonNeue-Extended-Book' !important;
}

p {
}

/* LINKS **********/

h1 a,
h2 a,
h3 a,
p a {
  -webkit-transition: all ease-in-out 200ms;
  -moz-transition: all ease-in-out 200ms;
  -ms-transition: all ease-in-out 200ms;
  -o-transition: all ease-in-out 200ms;
  transition: all ease-in-out 200ms;
}

h1 a:hover,
h2 a:hover,
h3 a:hover,
p a:hover {
  text-decoration: none;
  color: green;
}

/* MOBILE **********/

@media screen and (max-width: 640px) {
  h1,
  h2,
  h3 {
    hyphens: none;
  }
}

/* FONT FACE **********/

@font-face {
  font-family: 'MaisonNeue-Extended-Book';
  src: url('') format('otf'), url('') format('woff');
}

4. Download the fonts

For this example, we’ll be using a trial version of Maison Neue Extended Book by Milieu Grotesque. Please purchase the fonts if you intend to use them on any work. They are designers too! Otherwise, sign up for the trial font on their website.

5. Convert fonts

When buying fonts, purchase the .otf and .woff font formats. When you are buying web licenses for fonts, these are both typically included. What about the other font formats? You won’t need them! Here’s the difference between Font Formats and Browser Support.

Since these are trial fonts, you’ll need to convert the OTF to WOFF. I use Online Font Converter.

6. Upload and add @font-face CSS

Go to Design > Custom CSS
Optional Click Open in New Window
Click Manage Custom Files button at the bottom of the window.
Then click on Add images or fonts.
Add MaisonNeueExtendedTRIAL-Book.otf and MaisonNeueExtendedTRIAL-Book.woff.
Add your cursor in between the url ‘ ‘ and select the appropriate font.
Copy and paste this code for each font.

TIP: Upload each font individually, then add the URL. It gets pretty confusing and hard to read! — **TIP:** Upload each font individually, then add the URL. It gets pretty confusing and hard to read!

7. Add Indexes, Projects, and Pages.

For reference, check out the website. There are five pages (if you include the Style Guide).

Main Navigation
- Index — Work
  Click the Settings Gear to add the description.
  - Project — I’m OK
    - Click the Settings Gear to add the description
    - Add each photo
    - Click the Settings Gear on Photos you want to add descriptions next to.
  - Project — Winners
    Same as above.
Secondary Navigation
- Page — About
  - Add a background GIF, I found this sticker on GIPHY.
  - Create two columns
Not Linked
- Page — Style Guide

8. Footer

On the bottom of the page, we’ve got the usual suspects: social, newsletter, and copyright.

I added a cat GIPHY sticker to spice it up!
Instead of social icons, I opted for using H2 text.
Add a Newsletter Block
- In the Display tab
  - Add a descriptive Form Name so you know where it is later.
  - Remove the Title
  - Remove the Description
  - Alignment: Center
  - Layout: Float Fields
- In the Storage tab, select your storage. I’ll connect Google Drive as back-up.
- In the Advanced tab
  - Customize your Sign Up button
  - Add ✨ for your Post-Submit Message (or whatever you want)
  - If you want to redirect the user to a Thank You page, add this code into the Post-Submit HTML. You’ll also need to create the page that they redirect to 😉.
```
<script> window.location.replace("URL"); </script>
```

FreelancingPunoAugust 30, 2022Section 4 - Portfolio