How create a floating newsletter - Brine theme Squarespace Sites // Squarespace CSS Tutorial

---
---
---

This tutorial is for Squarespace 7.0 sites built on the **Brine** theme template.

---
In this Squarespace CSS tutorial, I want to show you how a little bit of custom code can pull a newsletter block between two index pages in a Brine Squarespace website. A few important things to note:
+ There is more than one way to do this! This is just one approach of many because code is super customizable.
+ You need at least two index pages to make this work.
+ You need to customize the size and placement values in this code. I recommend sticking with vw (view width) vh (view height) and percentages so the design stays responsive.
+ You can add borders shadows and more to the newsletter block to customize it! A few of the codes are below but I want to encourage you to get creative here.

Here are the codes from the tutorial:
//--Create the floating newsletter
.newsletter-block{margin-top:-20vh; background:#FFF; margin-bottom: 50px;} .Index-page{overflow:visible}

//-- Add a border
.newsletter-block{margin-top:-20vh; background:#FFF; margin-bottom: 50px; border: 1px solid #50bdb8;} .Index-page{overflow:visible}

//-- Add a drop shadow
.newsletter-block{margin-top:-20vh; background:#FFF; margin-bottom: 50px;border: 1px solid #50bdb8; box-shadow: 5px 5px 20px rgba(0,0,0,0.25} .Index-page{overflow:visible}

---
---
---
---
The term "Squarespace" is a trademark of Squarespace, Inc. This content is not affiliated with Squarespace, Inc. I just really love their platform ♥
---
#squarespace #squarespacecss #howto #customizesquarespace #css #squarespacetricks #squarespacehacks #squarespacetips

[InsideTheSquare]

⚠ IMPORTANT CSS UPDATE ⚠ When logging into Squarespace, if you see the word "Website" at the top of your menu, you are using their new internal navigation!

[RaphaelAnthony]

Can it be a photo instead of a text box?