.png.30d18b934965b0dc58a10254db82d496.png)
JustinSeimits
-
Posts
135 -
Joined
-
Last visited
Content Type
Forums
Gallery
Blogs
Events
Store
Downloads
Profiles
Status Updates posted by JustinSeimits
-
Do you know how to re-size the image that will display when a video wont load on mobile?
I don't even understand how to find the tag to write any code for it.
-
-
How to add a pricing list to a squarespace site. (*please note this also has the media breaks for mobile and tablet devices included in the css)
HTML:
<div class="snip1404">
<div class="plan first-plan">
<header>
<h4 class="plan-title plan-short-description">
START </h4>
<div class="plan-cost">
<span class="plan-price">$900</span><span class="plan-type">/month</span></span><span class="plan-type"></span>
</div>
</header>
<ul class="plan-features">
<li><span class="icon-checkmark">•</span> 15 Micro Videos
</li>
<li><span class="icon-checkmark">•</span> Captions
</li>
<li><span class="icon-checkmark">•</span> Thumbnails
</li>
<li><span class="icon-checkmark">•</span> Titles
</li>
<li><span class="icon-checkmark">•</span> Time Stamps
</li>
<li><span class="icon-checkmark">•</span> Custom Branded</li>
</ul>
<div class="plan-select">
<a href="mailto:sam@blnkslatemedia.com?subject=%22Let%27s%20Create%21%20I%27m%20interested%20in%20the%20Tier%201%20package%22%20 Plan&body=I%27m%20interested%20in%20scaling%20my%20video%20editing%20but%20need%20help%20doing%20so%21">Select Plan</a>
<br><br><p class="plan-description">
*All contracts are month to month with no long term commitments and you can cancel at any time. All tiers are paid in full upon signing up.
</p>
</div>
</div>
<div class="plan">
<header>
<h4 class="plan-title plan-short-description">
GROW </h4>
<div class="plan-cost">
<span class="plan-price">$1,500</span><span class="plan-type">/month</span><span class="plan-type"></span>
</div>
</header>
<ul class="plan-features">
<li><span class="icon-checkmark">•</span> 30 Micro Videos
</li>
<li><span class="icon-checkmark">•</span> Captions
</li>
<li><span class="icon-checkmark">•</span> Thumbnails
</li>
<li><span class="icon-checkmark">•</span> Titles
</li>
<li><span class="icon-checkmark">•</span> Time Stamps
</li>
<li><span class="icon-checkmark">•</span> Custom Branded</li>
</ul>
<div class="plan-select">
<a href="mailto:sam@blnkslatemedia.com?subject=%22Let%27s%20Create%21%20I%27m%20interested%20in%20the%20Tier%202%20package%22%20 Plan&body=I%27m%20interested%20in%20scaling%20my%20video%20editing%20but%20need%20help%20doing%20so%21">Select Plan</a>
<br><br><p class="plan-description">
*All contracts are month to month with no long term commitments and you can cancel at any time. All tiers are paid in full upon signing up.
</p>
</div>
</div>
<div class="plan three - featured">
<header>
<h4 class="plan-title plan-short-description">
EXPAND</h4>
<div class="plan-cost">
<center><h4><mark>Most Popular</mark></h4></center><span class="plan-price">$3,600</span><span class="plan-type">/month</span>
<span class="plan-type"></span>
</div>
</header>
<ul class="plan-features">
<li><span class="icon-checkmark">•</span> 90 Micro Videos
</li>
<li><span class="icon-checkmark">•</span> Captions
</li>
<li><span class="icon-checkmark">•</span> Thumbnails
</li>
<li><span class="icon-checkmark">•</span> Titles
</li>
<li><span class="icon-checkmark">•</span> Time Stamps
</li>
<li><span class="icon-checkmark">•</span> Custom Branded</li>
</ul>
<div class="plan-select">
<a href="mailto:sam@blnkslatemedia.com?subject=%22Let%27s%20Create%21%20I%27m%20interested%20in%20the%20Tier%203%20package%22 Plan&body=I%27m%20interested%20in%20scaling%20my%20video%20editing%20but%20need%20help%20doing%20so%21">Select Plan</a>
<br><br><p class="plan-description">
*All contracts are month to month with no long term commitments and you can cancel at any time. All tiers are paid in full upon signing up.
</p></div>
</div>
<div class="plan last-plan">
<header>
<h4 class="plan-title plan-short-description">
SCALE </h4>
<div class="plan-cost">
<span class="plan-price">$9,000</span><span class="plan-type">/month</span><span class="plan-type"></span>
</div>
</header>
<ul class="plan-features">
<li><span class="icon-checkmark">•</span> 300 Micro Videos
</li>
<li><span class="icon-checkmark">•</span> Captions
</li>
<li><span class="icon-checkmark">•</span> Thumbnails
</li>
<li><span class="icon-checkmark">•</span> Titles
</li>
<li><span class="icon-checkmark">•</span> Time Stamps
</li>
<li><span class="icon-checkmark">•</span> Custom Branded</li>
</ul>
<div class="plan-select">
<a href="mailto:sam@blnkslatemedia.com?subject=%22Let%27s%20Create%21%20I%27m%20interested%20in%20the%20Tier%204%20package%22 Plan&body=I%27m%20interested%20in%20scaling%20my%20video%20editing%20but%20need%20help%20doing%20so%21">Select Plan</a>
<br><br><p class="plan-description">
*All contracts are month to month with no long term commitments and you can cancel at any time. All tiers are paid in full upon signing up.
</p>
</div>
</div>
<div class="clearboth">
</div>
</div>----------------------------
CSS:
mark {
background-color: #07e8b7;
color: black;
}.plan-description {
font-size: 12px;
}
.snip1404 {
font-family: 'barlow-bold', Arial, sans-serif;
color: #404040;
text-align: left;
font-size: 16px;
width: 100%;
max-width: 100%;
margin: 50px 0px;
}
.snip1404 .plan-features{
font-family: 'robo', Arial, sans-serif;}
.sqs-block-code .sqs-block-content :last-child {
margin-bottom: 0;
margin: 0px;
}
.custom-tchart.snip1404 .plan.tchart {
width: 45%;
margin: 2.5%;
}
.custom-tchart.snip1404 .plan-features {
padding-top: 20px;
border: 5px solid #07e8b7;}
.snip1404 .plan-features {
padding: 0 0 20px;
margin: 0;
list-style: outside none none;
font-family: 'robo', Arial, sans-serif;
}.custom-tchart.snip1404 .plan {
border: 0px;
box-shadow: 0;}
.custom-tchart.snip1404 .plan-cost {
font-family: 'barlow-bold', Arial, sans-serif;
padding: 20px 20px 10px;
text-align: right;
}.custom-tchart .plan-cost{
color:#07e8b7;
background-color: white;
border: 5px solid #07e8b7;
border-bottom: 0px solid;
}.custom-tchart li{
color:black;
background-color: white;
}.custom-tchart li .icon-checkmark{
color:black
}.snip1404 img {
position: absolute;
left: 0;
top: 0;
height: 100%;
z-index: -1;
}
.snip1404 .plan {
margin: 0;
width: 25%;
position: relative;
float: left;
overflow: hidden;
border: 10px solid #fff;box-shadow: 0 0 5px rgba(0, 0, 0, 0.8);
background-color: #fff;
/* height:700px; */
}
.snip1404 .plan.tchart{width:50%}
.snip1404 .plan:hover i,
.snip1404 .plan.hover i {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
.snip1404 .first-plan {
border-radius: 8px 0 0 8px;
}
.snip1404 .last-plan {
border-radius: 0 8px 8px 0;
}
.snip1404 * {
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.25s ease-out;
transition: all 0.25s ease-out;
}
.snip1404 header {
background-color: #07e8b7;
color: #404040;
}
.snip1404 .plan-title {
background-color: rgba(0, 0, 0, 0.5);
position: relative;
margin: 0;
padding: 20px 20px 0;
text-transform: uppercase;
letter-spacing: 4px;
}
.snip1404 .plan-title:after {
position: absolute;
content: '';
top: 100%;
left: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 40px 300px 0 0;
border-color: rgba(0, 0, 0, 0.5) transparent transparent;
}
.plan-short-description{
color:#fff;
}
.snip1404 .plan-cost {
padding: 40px 20px 10px;
text-align: right;
}
.snip1404 .plan-price {
font-weight: 600;
font-size: 3em;
}
.snip1404 .plan-type {
opacity: 0.8;
font-size: 0.7em;
text-transform: uppercase;
}
.snip1404 .plan-features {
padding: 0 0 20px;
margin: 0;
margin-top: 20px;
list-style: outside none none;
}
.snip1404 .plan-features li {
padding: 6px 10%;
}
.snip1404 .plan-features i {
margin-right: 8px;
color: rgba(0, 0, 0, 0.5);
}
.snip1404 .plan-select {
border-top: 1px solid rgba(0, 0, 0, 0.2);
padding: 20px;
text-align: center;
}
.snip1404 .plan-select a {
background-color: #07e8b7;
color: #404040;
text-decoration: none;
padding: 12px 20px;
font-size: 0.75em;
font-weight: bold;
border-radius: 20px;
text-transform: uppercase;
letter-spacing: 4px;
display: inline-block;
}
.snip1404 .plan-select a:hover {
background-color: #05725C;
color:#fff;
}
.snip1404 .featured {
margin-top: -10px;
border-color: #8FE0EB;
box-shadow: 0 0 25px rgba(0, 0, 0, 0.4);
z-index: 1;
border-radius: 8px;
}
.snip1404 .featured .plan-select {
padding: 30px 20px;
}
@media only screen and (max-width: 767px) {
.snip1404 .plan {
width: 50%;
}
.snip1404 .plan-title,
.snip1404 .plan-select a {
-webkit-transform: translateY(0);
transform: translateY(0);
}
.snip1404 .plan-select,
.snip1404 .featured .plan-select {
padding: 20px;
}
.snip1404 .featured {
margin-top: 0;
}
}@media only screen and (max-width: 440px){
.custom-tchart.snip1404 .plan.tchart{
width:100%;
}
}
@media only screen and (max-width: 440px) {
.snip1404 .plan {
width: 100%;
}
}----------------------------
-
Hey @tuanphan I was wondering if you know how to target one navigation item so the one navigation item can be orange and the rest stay the same color. I have found this and it doesnt work. I am also using folders so that might be why. Thank you for your help.
This code does nothing...
.Header-nav-item:nth-child(4) { color: #ec8349 !important; }This code works but it makes too many items orange
.header-nav-wrapper a:last-child{
color: orange !important;
}
-
Hi,
You can tag me on your post or send to my email. https://beaverhero.com/covid19/
I will check at the end of day.
-
-
Hello Tuanphan,
I see that you are very active on here and have a question about something that you are on the feed but not hitting exactly what I am looking for. Please see the attached screen shot for reference. I am using 7.1 dont have the site built yet but this is from the old site the client has and I want to make sure that it will be able to work on 7.1 or I will end up using the old template they already have. Thank you in advance for your help with this issue.
- Justin Seimits
-
Hi,
You mean secondary navigation or?
If secondary navigation, SS 7.1 doesn't support. There are two way to do this
1. Use announcement bar, insert text link, then use CSS to move annoucement bar to under header
>> I did for a site. See here
2. Add text links to Footer then use jQuery append to move them to under header.
--
Also, the next time you can send via forum message / email, because sent in profile, sometimes I do not receive notifications.
-
-
Want to change the size of the logo on desktop but not on mobile?
@media only screen and (min-width: 1200px){
.header-title-logo img {
max-height: 1500px !important;
width: auto !important;
height: 150px !important;
}}
@media only screen and (min-width: 634px) {
.design-layout-poster .image-card-wrapper {
visibility: visible;
opacity: 1;
font-size: 32px;
transition-duration:;
background-color: ;
}
}@media only screen and (min-width: 434px) {
.header-title-nav-wrapper {
display: flex;
flex-wrap: nowrap;
flex: 1 0 67%;
align-items: center;
}
}
@media only screen and (min-width: 800px){
.header-title-nav-wrapper {
display: flex;
flex-wrap: nowrap;
flex: 1 0 67%;
align-items: center;
position: relative;
left: 100px;
}}
