Vertical line

Is it possible to make a vertical line and a half box shape? 

I think we can use CSS code to create these lines.

Can you share link to page where you want to do these?

That would be awesome! Here is the link.

Thank you! 

https://cat-toucan-jlkn.squarespace.com/config/

Here is the right link. Sorry. I would like it for the forest hugs page.

https://www.jennyrodriguez.design/portfolio-2/project-one-ephnc-nltr7

The site is private. I can't access it. Can you setup an access password?

Sorry about that.

 https://www.jennyrodriguez.design/  

password: viewfinder

Thank you

On 7/16/2023 at 5:19 AM, J_rod said:

Sorry about that.

 https://www.jennyrodriguez.design/  

password: viewfinder

Thank you

 

You mean apply to this hover item?

I would like something like this. After you click on the hover each page as this frame on it. I made this in
Adobe XD. 

Thank you

Add to Design > Custom CSS

/* Vertical Lines */
body.collection-64955a8c9a7f8c22f2faf6c3.view-item article section:first-child {
.fluid-engine, .content {
    position: relative;
}
.fluid-engine:before {
    content: "";
    height: 200px;
    width: 200px;
    position: absolute;
    top: 0;
    right: 3vw;
    z-index: 999999;
    background-color: transparent;
    border-top: 1px solid white;
    border-right: 1px solid white;
}
.fluid-engine:after {
    content: "";
    height: 200px;
    width: 200px;
    position: absolute;
    top: 0;
    left: 3vw;
    z-index: 999999;
    background-color: transparent;
    border-top: 1px solid white;
    border-left: 1px solid white;
}
.content:before {
    content: "";
    height: 200px;
    width: 200px;
    position: absolute;
    bottom: 0;
    right: 3vw;
    z-index: 999999;
    background-color: transparent;
    border-bottom: 1px solid white;
    border-right: 1px solid white;
}
.content:after {
    content: "";
    height: 200px;
    width: 200px;
    position: absolute;
    bottom: 0;
    left: 3vw;
    z-index: 999999;
    background-color: transparent;
    border-bottom: 1px solid white;
    border-left: 1px solid white;
}}

Thank you so much! I really appreciate your help. 🙂

Sorry back to the frames how would I add them to the portfolio, about and resume page? Could I also add text above the line?

I don't see content on About/Resume pages. Can you add some random?

I added something 

5 hours ago, J_rod said:

I added something 

Add to About, Contact Page Header (If you use Personal/Basic Plan, let me know, I will give another code)

<style>
  .fluid-engine, .content {
    position: relative;
}
.fluid-engine:before {
    content: "";
    height: 200px;
    width: 200px;
    position: absolute;
    top: 0;
    right: 3vw;
    z-index: 999999;
    background-color: transparent;
    border-top: 1px solid white;
    border-right: 1px solid white;
}
.fluid-engine:after {
    content: "";
    height: 200px;
    width: 200px;
    position: absolute;
    top: 0;
    left: 3vw;
    z-index: 999999;
    background-color: transparent;
    border-top: 1px solid white;
    border-left: 1px solid white;
}
.content:before {
    content: "";
    height: 200px;
    width: 200px;
    position: absolute;
    bottom: 0;
    right: 3vw;
    z-index: 999999;
    background-color: transparent;
    border-bottom: 1px solid white;
    border-right: 1px solid white;
}
.content:after {
    content: "";
    height: 200px;
    width: 200px;
    position: absolute;
    bottom: 0;
    left: 3vw;
    z-index: 999999;
    background-color: transparent;
    border-bottom: 1px solid white;
    border-left: 1px solid white;
}
</style>

Hi,

Sorry for the late response. The code worked but it ends in the footer. Also could I add some on top and the bottom of the lines.

Use this new code

<style>
  article .fluid-engine, article .content {
    position: relative;
}
article .fluid-engine:before {
    content: "";
    height: 200px;
    width: 200px;
    position: absolute;
    top: 0;
    right: 3vw;
    z-index: 999999;
    background-color: transparent;
    border-top: 1px solid white;
    border-right: 1px solid white;
}
article .fluid-engine:after {
    content: "";
    height: 200px;
    width: 200px;
    position: absolute;
    top: 0;
    left: 3vw;
    z-index: 999999;
    background-color: transparent;
    border-top: 1px solid white;
    border-left: 1px solid white;
}
article .content:before {
    content: "";
    height: 200px;
    width: 200px;
    position: absolute;
    bottom: 0;
    right: 3vw;
    z-index: 999999;
    background-color: transparent;
    border-bottom: 1px solid white;
    border-right: 1px solid white;
}
article .content:after {
    content: "";
    height: 200px;
    width: 200px;
    position: absolute;
    bottom: 0;
    left: 3vw;
    z-index: 999999;
    background-color: transparent;
    border-bottom: 1px solid white;
    border-left: 1px solid white;
}
</style>

Thank you, it worked.

Is it possible to add text below the line?

Hi,

Is it possible to add the frames to the top of the page on the home page? Right now its just on the bottom.

I just noticed the frame is on the all the pages.  Do all of the codes need to put inputed?

Thank you

On 8/3/2023 at 1:57 AM, J_rod said:

Thank you, it worked.

Is it possible to add text below the line?

Each item will have a different text or same text?

And all text will have same format, left is a text, right is a text, like your screenshot, right?

https://www.jennyrodriguez.design/portfolio-2/project-one-ephnc-nltr7

With homepage, use this code to Design > Custom CSS

/* Top Vertical Line on Homepage */
div#gridThumbs:before {
    content: "";
    height: 200px;
    width: 200px;
    position: absolute;
    top: 0;
    right: 3vw;
    z-index: 999999;
    background-color: transparent;
    border-top: 1px solid #fff;
    border-right: 1px solid #fff
}

div#gridThumbs:after {
    content: "";
    height: 200px;
    width: 200px;
    position: absolute;
    top: 0;
    left: 3vw;
    z-index: 999999;
    background-color: transparent;
    border-top: 1px solid #fff;
    border-left: 1px solid #fff
}

The code worked. Thank you 🙂

For the text it is like the screenshot, but each project has a different text. 

On 8/7/2023 at 2:52 AM, J_rod said:

The code worked. Thank you 🙂

 

For the text it is like the screenshot, but each project has a different text. 

You can edit each project item > Add a Code Block (anywhere on page) > Use this code

<style>
  article section:first-child .content-wrapper:after, article section:first-child .content-wrapper:before {
    content: "enter text 1";
    position: absolute;
    bottom: 50px;
    color: white;
    left: 3vw;
    z-index: 999999;
}
article section:first-child .content-wrapper:before {
    content: "enter second text";
    right: 3vw;
    left: unset;
}
</style>