#css left bottom right border

[krisztapwonderland]

Please check out my Poshmark closet!

Please check out my favorite poshers as well below.

THANK YOU SO MUCH!

[robindavis]

Shop more of my listings on Poshmark

[danny-chai]

ao3 skin that i made!! (copy code under "keep reading")

it's a messy combination of pieces of code from other people's skins and my own changes

the header image is NOT MINE! it is "Pattern Galaxy Space Planets Vibrant Linear Universe" by Arncil on Redbubble, which i just used as an example for an image you could use!

here are some of the skins that i can remember using as part of this, but i've been building it for years so forgive me if i forget some:

Shortening long tag fields by Xparrot (on ao3)

Slim Shaded by AO3 (on ao3)

Lily Garden by tealtiam (on Tumblr)

AO3 Tag category coloring! by ao3css (on Tumblr)

come back here to my tips or leave a comment if you need some help customizing the code!

Background color: #26303C

Text color: #CBC6C3

Header color: #46626D

Accent color: #993F33

steps to create a new skin using this code:

log into ao3 account

go to dashboard >> skins

click "create site skin"

make sure TYPE is "site skin"

add a unique title

copy all code below

paste into field 'CSS'

click on "use wizard" at the top

copy and paste the four colors written above into their corresponding boxes

click SUBMIT

click USE

how to customize this skin:

FONT SIZE: at the very top of the code, change the "90%" to be bigger or smaller to change the font size within a fic

MAIN COLORS: to change the main colors, select "use wizard" when editing the skin and replace any of the four hex codes under "Background color:", "Text color:", "Header color:", and "Accent color:"

SECONDARY COLORS: find all hex codes within the code and change those numbers as you like! i changed all colors to match with the color palette of the header photo that i chose to make it feel cohesive

TAG COLORS: towards the end, the "relationship", "character", and "freeform" tags alternate three colors to make them easy to separate. in this skin they are all very similar, so you can change those to be whatever colors you like!

HEADER PHOTO: find the link towards the end of the code right before the warning tags and replace it with a link to any photo you like! it loops, so you don't have to worry about sizing or anything

FONT: i'm unsure how exactly to do this, but the in-fic font is currently set to Georgia Serif, so i suppose just go find that and replace it with your preferred font!

BORDER STYLES: wherever you see the code "border-style:", replace the word that comes after it with one of these options: none, solid, dashed, dotted, double, groove, ridge, inset, outset, or hidden

WARNING TAGS: at the very end of the code is a list of words or phrases that, when they appear in the tags of a fic, are highlighted in a contrasting color so that they are easy to avoid if necessary. you can add or remove those tags however you like, or change the warning color!

COPY AND PASTE ALL CODE BELOW

#workskin { font-size: 90%; } li.blurb .tags { max-height: 7.5em; overflow-y: auto; } #header { min-height: 0; } #header a, #header fieldset, #header ul.primary, #header ul.primary .current { border: 0; background: 0; } h1 a img { height: 50px; border: 0; } #header .landmark { clear: none; } #header ul.primary { background: rgba(0,0,0,0.65); border-bottom: 1px solid rgba(0,0,0,0.75); } #header ul.primary, #header ul.primary .current, ul.primary.actions a, #header ul.primary .current { color: #CBC6C3; } #header ul.primary .current, #header #search input, #header #search input:focus { background: rgba(0,0,0,0.25); color: #CBC6C3; box-shadow: inset 0 0 3px #131A2A; border-color: #131A2A; } .actions, .actions input { text-transform: lowercase; } blockquote.userstuff { font-family: "Mido", "AUdimat", "Ostrich Sans Rounded","Lucida Grande", sans-serif !important; position: relative; background: rgba(0,0,0,0.1); padding: 2%; border: 1px solid rgba(0,0,0,0.15); box-shadow: 0 0 2px rgba(0,0,0,0.4); } blockquote.userstuff:after { content: "\201D"; right: 0; top: auto; left: auto; } body, .userstuff { font-family: Mido, Georgia, serif; } .heading, .userstuff h3, .userstuff h4 { font-family: "CabinSketch", Georgia,serif; } #main .heading { color: #CBC6C3; } #inner .group, #inner .heading, fieldset, .verbose legend, table, table th, col.name, span.unread, span.replied { outline: none; background: transparent; border-color: #131A2A; border-style: double; box-shadow: none; border-radius: 2em; border-bottom-right-radius: 0; border-top-left-radius: 0; } #inner .group .group .group, col.name { border-style: double; border-color: #CBC6C3; box-shadow: 0 0 2px #000; } #inner .bookmark .user.module, #inner .wrapper { border: 0; border-radius: 0; border-top: 3px double #bbb; box-shadow: none; } .filters { font-size: 90%; } .toggled form, .dynamic form, .secondary, .dropdown { background: #fff url("/images/skins/textures/tiles/white-handmade-paper.jpg"); } a.tag, a.tag:visited, a.tag:link { display: inline-block; padding: 1px 3px; margin: 2px 0px; border: 2px solid #46626D; border-radius: 5px; } .commas li:after { content: ""; } h5.fandoms.heading { color: transparent; } .favorite a.tag { border: none; } .tags li.relationships:nth-of-type(3n+1) a.tag { background-color: #1d3954; } .tags li.relationships:nth-of-type(3n+2) a.tag { background-color: #264663; } .tags li.relationships:nth-of-type(3n+3) a.tag { background-color: #305475; } .tags li.characters:nth-of-type(3n+1) a.tag { background-color: #214154; } .tags li.characters:nth-of-type(3n+2) a.tag { background-color: #294c61; } .tags li.characters:nth-of-type(3n+3) a.tag { background-color: #31576e; } .tags li.freeforms:nth-of-type(3n+1) a.tag { background-color: #234e54; } .tags li.freeforms:nth-of-type(3n+2) a.tag { background-color: #2a585e; } .tags li.freeforms:nth-of-type(3n+3) a.tag { background-color: #316269; } .tags li.freeforms a.tag:hover, .tags li.characters a.tag:hover, .tags li.relationships a.tag:hover { background-color: #26303C; color: white; } #header .logo { display: none; } #header ul.primary { box-shadow: none; padding-top: 30px; padding-bottom: 30px; background: #FCC191 url(https://i.pinimg.com/564x/8c/bc/ae/8cbcae1760dc88ae8730566337a5d2eb.jpg); background-attachment: fixed; } li.blurb a.tag[href*="suicid"], [href*="suicide"], [href*="Suicide"], [href*="rape"], [href*="Rape"], [href*="consentual"], [href*="Consentual"], [href*="non-con"], [href*="consent issues"], [href*="Kidnapping"], [href*="kidnapping"], [href*="Canibalism"], [href*="cannibalism"], [href*="Cannibalism"], [href*="Dove"], [href*="dead dove do not eat"], [href*="murder"], [href*="Murder"], [href*="harm"], [href*="self harm"], [href*="Harm"], [href*="Torture"], [href*="abduction"], [href*="asphyxiation"], [href*="blood"], [href*="Blood"], [href*="death"], [href*="Death"], [href*="gore"], [href*="Gore"], [href*="incest"], [href*="Incest"], [href*="trauma"], [href*="Trauma"], [href*="torture"] { color: #000000; font-weight: bold; background-color: #993F33; }

[classygreydove]

Dark Mode Work Skin for the fic To Be a Dragon Among Men

This is the code and urls for the custom dark mode work skin I made for my fic To Be a Dragon. Feel free to use it for your own works or for site skins, just remember to credit my user if you do.

[EDIT 25-03-18: Fixed padding for .frameborder class]

[EDIT 25-06-12: Added formatting rules for .poetry class and <p>]

Additional Resources

A Step-by-Step Guide to Work Skins from AO3 News - A great basic guide to what work skins are and how to make one.

How to Apply Work Skins to Others' Works by classygreydove - This is a guide I made on how to make a work skin into a site skin. You'll need to know this if you want to apply the work skin to any fic you want to read.

How to Change Work Skin Font by classygreydove - Don't like the font I use for the work skin? Don't worry, I'll show you how to change it.

Light Mode CSS - You can find the code for the Light Mode work skin here.

Light and Dark Mode Backgrounds - You can find the background images for the Light and Dark Mode work skins here.

Other Background Options - Here are a few mid-tone backgrounds that will have a lower contrast to the text.

Line Breaks (for Phone) - Do you like the custom dragon line breaks? Here's the phone-sized ones.

Line Breaks (for Wide Screens) - Do you like the custom dragon line breaks? Here's the laptop-sized ones.

[Code begins under Keep reading break]

#workskin .userstuff .hr, #workskin .hr, #workskin hr { height: 36px; width: 178px; background: url(https://64.media.tumblr.com/f19653c8c877dbe7a14e78434f1d0df6/d0f8688c32033f2d-b3/s250x400/6edcdac1e5614693d10491cff0725fd3633de77e.png); background-repeat: no-repeat; background-position: center; border: 0; }

#workskin { background: url(https://64.media.tumblr.com/f20ef324c5117a56d7dd2c8aa7e45151/4dcdf7c3c32cb0d1-68/s2048x3072/10c1120c78cd66a99c1067e6ed8b1addcd52ef57.png); background-repeat: repeat-y repeat-x; background-position: top; color: rgba(255, 255, 248, 0.85) !important; font-family: 'Georgia', 'Lucida Grande', 'Verdana'; }

#workskin a { background: linear-gradient(135deg, #b4853f 0%, #edc967 40%, #b4853f 80%, #705103 100%) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; border-bottom: 0px; }

#workskin a:hover, #workskin a:active { background: linear-gradient(135deg, #b4853f 10%, #edc967 60%, #b4853f 80%, #705103 100%) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; }

#workskin h2, #workskin h3 { line-height: 1.25; font-variant: small-caps; }

#workskin .userstuff blockquote { display: block; border: 2px solid #b4853f; border-image: linear-gradient(135deg, #b4853f 0%, #edc967 40%, #b4853f 80%, #705103 100%); border-image-slice: 1; padding: 15px 15px 15px 15px; margin-left: 1.5em; margin-right: 1.5em; }

#workskin .goldborder { display: block; border: 2px solid #b4853f; border-image: linear-gradient(135deg, #b4853f 0%, #edc967 40%, #b4853f 80%, #705103 100%); border-image-slice: 1; padding: 15px 15px 15px 15px; }

#workskin .frameborder { border: 2px solid #b4853f; border-image: linear-gradient(135deg, #b4853f 0%, #edc967 40%, #b4853f 80%, #705103 100%); border-image-slice: 1; padding: 0px; }

#workskin .mobilebreak { width: 178px; max-width: 100%; max-height: 100%; display: block; margin-left: auto; margin-right: auto; }

#workskin .textlink { font-variant: small-caps; }

#workskin .notesheading { font-size: 120%; font-variant: small-caps; font-family: 'Georgia', 'Lucida Grande', 'Verdana'; line-height: 2; }

#workskin .triggerwarning { color: rgba(240, 240, 240, 0.9); border-radius: 5px; background: rgba(128, 0, 0, 0.8); padding-left: 2px; padding-right: 2px; font-weight: bold; font-variant: small-caps; }

workskin .userstuff p { margin: 0; }

workskin .poetry { margin-inline-start: 1.5em; }

[codingquill]

Day 2 - 100 Days CSS Challenge

Welcome to day 2 of 100 days of css challenge, where we will be together getting a given image result into reality by code.

We already know the drill since we did the first challenge, now let's get right into the different steps:

First step : Screenshot the image and get its color palette

No crazy color palette here, we only have two colors

White

This shade of green: #3FAF82

To make things more organized and get used to coding in an organized way, even if not doing it here wouldn't make any difference because we only have two colors, in more complex projects we would have a lot, we will define our colors at the beginning of our CSS code (well, only the green in this case):

:root { --main-green: #3FAF82; }

And this is how we'll use it whenever we want:

color: var(--main-green);

Second step : Identify the image elements

What elements do I have?

Three lines: line1, line 2, and line 3. I'll add them to my HTML starter template, again I'll leave the frame and center there:

<div class="frame"> <div class="center"> <div class="line-1 line"></div> <div class="line-2 line"></div> <div class="line-3 line"></div> </div> </div>

Third step : Bring them to life with CSS

Applying the background color

Only one line should be changed in the CSS code already added to .frame class:

background: var(--main-green);

So this is what we have going on for now :

Creating the lines

Now let's create our lines; if you noticed I gave each one two classes line-number and then line. I'll use the line class to give them all the common properties they have such as the color, height, width, position, border-radius, and shadow. And then I'll use the line-number to move them wherever I want using the left, top, right, bottom properties of an absolutely positioned element in CSS.

Let's start by creating all of them:

.line { left: -45px; position: absolute; height: 9px; width: 100px; background: white; border-radius: 10px; box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); }

And just like this you'll see this in the browser:

You only see one line because the three are overlapping each other, and that's why we'll move each one of them exactly where we want using this:

.line-3 { top: 22px; } .line-1 { top: -22px; }

Now our static menu is ready:

Creating and analyzing the animations

As of observing, we can see that:

Line one goes down to line 2

Line three goes up to line 2

THEN line 2 disappears

THEN lines 1 and rotate to create the X

line-one-goes-down animation

This is my line-one code in the static version:

.line-1 { top: -22px; }

What I'm trying to do here is simply a movement translated by changing top from -22px to it becoming 0px:

@keyframes line-one-goes-down { 0% { top: -22px; } 100% { top: 0px; } }

line-three-goes-up animation

Again, I'm trying to go from top being 22px to it being 0px:

@keyframes line-three-goes-up { 0% { top: 22px; } 100% { top: 0px; } }

line-two-disappear animation

Making disappear simply means turning its opacity and width to 0:

@keyframes line-two-disappear { 0% { opacity: 1; width: 100px; } 100% { opacity: 0; width: 0px; } }

I'm gonna apply these animations and see what happens , before I create the rotation animations

.center.active .line-1 { animation: line-one-goes-down 0.5s forwards; } .center.active .line-2 { animation: line-two-disappear 0.5s forwards; } .center.active .line-3 { animation: line-three-goes-up 0.5s forwards; }

forwards means that the element will stay in the final state after the animation and not return to its original state.

This is what applying those three animations looks like:

Last but not least : let's Create the X

We only have to animations left for this: rotate-line-1 and rotate-line-2. Let's create them:

@keyframes rotate-line-1 { 0% { transform: rotate(0deg); } 100% { transform: rotate(45deg); } } @keyframes rotate-line-2 { 0% { transform: rotate(0deg); } 100% { transform: rotate(-45deg); } }

And that is my friends how we finished this challenge!

Happy coding, and see you tomorrow for Day 3!

[manonamora-if]

Hello Manon hope you're well! I was wanting to ask for a little bit of coding advice if at all possible? I don't know if you know of Brushmen's code collection to make Twine look like Choice script. I was hoping you would know a way to do something similar in the sense of wrapping the choices in boxes the way they did (similar to how choicescript does.)

Hiya Anon,

Of course! Happy to help.

Yes, I'm familiar with the template, thought I hadn't noticed the update... It is now meant for more intermediate users, it seems.

The source code does provide what is needed to make it happen (which is essentially a custom macro in JavaScript, with some extra CSS to make it pretty). You will need to download the projectfiles.zip from the page, extract it, find the choices.js and choices.css files inside the src folder, and add the code to your project. You can also find examples of how the "<< choice_shown >>" macro is used in the story folder.

However, if you just want to make it look more like ChoiceScript as in rather than

you want

You will need to choose another SugarCube macro: << radiobutton >>. Essentially, code your radiobuttons for the choices (and wrap each of them in a < label> for accessibility), and wrap the whole in a < div> for the styling. Don't forget the button for confirmation!

< div class="choices"> < label><< radiobutton "$choice" "value" autocheck>> Value 1< /label> < label><< radiobutton "$choice" "value2" autocheck>> Value 2< /label> < label><< radiobutton "$choice" "value3" autocheck>> Value 3< /label> < /div> << button [[Next]]>> /* More code if necessary */ << /button>>

You will need to remove the spaces... Tumblr otherwise eats the code...

Then we move on to the StyleSheet:

.choices label { padding: 11px 8px 12px; display: block; border-color: #a9acaf; border-style: solid; border-width: 1px 1px 0px 1px; } .choices label:first-child { border-top-width: 1px; border-top-right-radius: 8px; border-top-left-radius: 8px; } .choices label:last-child { border-bottom-width: 1px; border-bottom-right-radius: 8px; border-bottom-left-radius: 8px; }

That's for the radio button. We target the label, because it's the easiest and it takes into account the whole option block (radiobutton and text). The second and third code is to round the borders.

And if you want the button:

.macro-button { clear: both; display: block; width: 100%; font-size: 1.5em; font-weight: bolder; font-family: -apple-system, sans-serif; margin: 1em auto; color: #f7f4f1; background-color: #626160; border: none; border-radius: 0.5em; padding: 6px; }

And so you get:

[your-average-art-dealer]

Macaque Site Skin Thing (yippee!)

────────────────────────────────────────────

Notes:

The CSS is mostly mishmashed from other codes and therefore is not perfect, there a places where the site retains its white accents or boxes and can be quite jarring when scrolling in a dark purple background to then suddenly be met with splashes of bright white

I personally wouldn't read works with this, it's mostly for the aesthetic and was not made with comfortable reading in mind (oof)

Wizard Settings/Code Stuff is REQUIRED alongside the CSS because without it the skin looks... kind awful.

────────────────────────────────────────────

CSS:

p.kudos { background: url("https://i.imgur.com/JmZWnGX.png"); background-repeat: no-repeat; }

.listbox, fieldset, fieldset dl dl, fieldset fieldset fieldset, fieldset fieldset dl dl, dd.hideme, form blockquote.userstuff, .dynamic form { background: url("https://i.imgur.com/xoHN0lj.jpeg"); background-repeat: repeat; border: 4px solid #fff; box-shadow: none; }

header h1.heading a::before {

content: url("https://i.imgur.com/9NaliS0.png"); visibility: visible; }

search .button,

header .logo {

display: none; }

header .heading a,

greeting img.icon {

visibility: hidden; }

outer {

background: linear-gradient(90deg, rgba(24, 12, 41,.9) 0%, rgba(16, 7, 28,1) 100%); }

header h1 sup,

header .button,

header .landmark,

header .logo {

display: none; }

inner.wrapper {

margin: 0em 4%; }

header .heading {

height: 20em; }

header {

background-color: #ffffff; background-image: url("https://i.imgur.com/1jqr3CI.png"); background-repeat: no-repeat; background-position: center center; background-size: cover; border-bottom: 2px solid #fff; }

header .heading a {

color: #fff; padding-left: 0em; }

header .primary {

background: none; box-shadow: none; }

greeting {

background: none; margin-right: 0em; position: absolute; right: 0em; top: 0em; }

header .primary li:not(.search),

header .primary li a,

greeting li,

greeting li a {

color: #FFF !important; background: #850900; border-top-left-radius: 2%; }

header .primary li:not(.search),

greeting li {

border: 1px solid #372457; }

.warnings .tag, .work .warning a.tag { background: #06000f; border: 1px solid #06000f; border-radius: 5px; color: #dbc2ed !important; padding-left: .5em; padding-right: .5em; }

.relationships .tag, .work .relationships a.tag { background: #0b0121; border: 1px solid #0b0121; border-radius: 5px; color: #dbc2ed !important; font-weight: bold; padding-left: .5em; padding-right: .5em; }

.characters .tag, .work .characters a.tag { background: #220c4a; border: 1px solid #220c4a; border-radius: 5px; color: #dbc2ed !important; font-weight: bold; padding-left: .5em; padding-right: .5em; }

────────────────────────────────────────────

Wizard Stuff:

────────────────────────────────────────────

[kandztuts]

CSS 58 💻 Cheatsheet

New Post has been published on https://tuts.kandz.me/css-58-%f0%9f%92%bb-cheatsheet/

CSS 58 💻 Cheatsheet

Basic Selectors Element Selector: Targets elements by tag name. `p color: blue; ` Class Selector: Targets elements with a specific class. ` .highlight background-color: yellow; ` ID Selector: Targets an element with a specific ID (unique). ` #main-title font-size: 36px; ` Universal Selector: Applies to all elements. ` * margin: 0; padding: 0; ` Attribute Selector: Targets elements with specific attributes or attribute values. `[type="text"] border: 1px solid black; ` Combinators Descendant Combinator (Space): Selects elements that are descendants of another element. ` div p color: red; ` Child Combinator ( ): Selects direct children of an element. ` ul li font-weight: bold; ` Adjacent Sibling Combinator (+): Selects the element immediately following another element. ` h1 + p margin-top: 20px; ` General Sibling Combinator (~): Selects all siblings that follow another element. ` h2 ~ p font-style: italic; ` Box Model Margin: The space outside the border. ``` margin: 10px; margin-top: 20px; margin-left: 30px; margin-right: 40px; margin-bottom: 50px; ``` Padding: The space inside the border. ``` padding: 10px; padding-top: 20px; padding-left: 30px; padding-right: 40px; padding-bottom: 50px; ``` Border: The line around an element. ``` border: 1px solid black; border-width: 2px; border-style: dashed; border-color: red; ``` Width/Height: Sets the width and height of an element. ``` width: 300px; height: 200px; ``` Typography Font Family: Specifies the font family for text. `font-family: Arial, sans-serif;` Font Size: Sets the size of the font. `font-size: 16px;` Font Weight: Controls the boldness of the font. ` font-weight: bold;` Text Align: Aligns text within an element. ` text-align: center;` Background Background Color: Sets the background color of an element. `background-color: #f0f0f0;` Background Image: Sets a background image for an element. `background-image: url('image.jpg');` Background Repeat: Controls how the background image is repeated. `background-repeat: no-repeat;` Background Position: Positions the background image within an element. ` background-position: center;` Display Display Block: Makes an element take up the full width available and start on a new line. ` display: block;` Display Inline: Allows elements to sit next to each other horizontally. ` display: inline;` Display Inline-Block: Combines both inline and block properties. ` display: inline-block;` Display Flex: Creates a flex container for child elements. `display: flex;` Display Grid: Creates a grid container for child elements. ` display: grid;` Positioning Position Static: Default value. Elements are positioned according to the normal flow of the document. ` position: static;` Position Relative: Moves an element relative to its normal position. ``` position: relative; top: 20px; left: 30px; ``` Position Absolute: Positions an element relative to the nearest positioned ancestor (not static). ``` position: absolute; top: 50px; right: 100px; ``` Position Fixed: Keeps an element in a fixed position even when scrolling. ``` position: fixed; bottom: 20px; left: 30px; ``` Flexbox Flex Direction: Defines the direction of the main axis (row or column). ``` flex-direction: row; /* Default */ flex-direction: column; ``` Justify Content: Aligns items along the main axis. ``` justify-content: flex-start; /* Default */ justify-content: center; justify-content: flex-end; justify-content: space-between; justify-content: space-around; ``` Align Items: Aligns items along the cross axis. ``` align-items: stretch; /* Default */ align-items: flex-start; align-items: center; align-items: flex-end; ``` Grid Grid Template Columns: Defines the number and size of columns in a grid container. ` grid-template-columns: repeat(3, 1fr);` Grid Template Rows: Defines the number and size of rows in a grid container. ` grid-template-rows: auto;` Justify Items: Aligns items along the row axis within their grid area. ``` justify-items: start; /* Default */ justify-items: center; justify-items: end; justify-items: stretch; ``` Align Items: Aligns items along the column axis within their grid area. ``` align-items: start; /* Default */ align-items: center; align-items: end; align-items: stretch; ``` Other Useful Properties Color: Sets the color of text. ` color: #333333;` Opacity: Sets the opacity level of an element. ` opacity: 0.5;` Margin/Padding: Controls the space around or inside an element. ``` margin: 10px; padding: 20px; ``` Box Shadow: Adds a shadow effect to an element. ` box-shadow: 2px 4px 6px rgba(0, 0, 0, 0.5);` Transform: Applies 2D or 3D transformations to an element. ` transform: rotate(90deg);`

[poliperfect]

Services X-Kote

New Post has been published on https://poliperfect.com/services-x-kote/?lang=fr

Services X-Kote

[vc_row full_width=”stretch_row_content_no_spaces” as_padding_top=”theme-padding-top-5″ as_padding_bottom=”theme-padding-bottom-5″ bg_type=”bg_color” bg_color_value=”#000000″ css=”.vc_custom_1736530975253margin-top: -125px !important;”][vc_column][vc_single_image image=”1988″ img_size=”Full” alignment=”center” css=””]

Ultimate Paint Protection & Restoration with X Kote

Contact Us

[/vc_column][/vc_row][vc_row full_width=”stretch_row_content” as_padding_top=”theme-padding-top-5″ as_padding_bottom=”theme-padding-bottom-5″][vc_column width=”1/2″][vc_column_text css=”.vc_custom_1736532838335padding-top: 40px !important;padding-right: 40px !important;padding-left: 40px !important;”]

 What is X Kote?

X Kote is an innovative automotive paint restoration and protection system that utilizes a hand-applied liquid clear coat formula. This product is designed to rejuvenate your vehicle’s paint, offering a permanent and glossy finish that restores its original luster while protecting it from further damage. X Kote is a professional-grade solution, making it an ideal choice for car owners seeking long-term protection without the need for frequent touch-ups

X Kote Technology:

The technology behind X Kote is based on a liquid clear coat that mimics the original factory clear coat found on vehicles. Unlike traditional paint correction methods that involve sanding or polishing away layers of your vehicle’s paint, X Kote adds a new protective layer. This hand-applied clear coat fills surface defects such as scratches, swirls, and oxidation, creating a smooth, blemish-free finish. The advanced chemistry of X Kote allows it to bond directly with the vehicle’s existing clear coat, creating a seamless protective barrier.

[/vc_column_text][/vc_column][vc_column width=”1/2″ css=”.vc_custom_1736531815370background-image: url(https://poliperfect.com/wp-content/uploads/2019/12/X-Kote-2.jpg?id=2068) !important;background-position: center !important;background-repeat: no-repeat !important;background-size: cover !important;”]

[/vc_column][/vc_row][vc_row as_padding_top=”theme-padding-top-5″ as_padding_bottom=”theme-padding-bottom-5″ css=”.vc_custom_1736532788216margin-top: -10px !important;margin-bottom: -30px !important;”][vc_column][vc_raw_html css=””]JTNDZGl2JTIwc3R5bGUlM0QlMjJwYWRkaW5nJTNBNTYuMjUlMjUlMjAwJTIwMCUyMDAlM0Jwb3NpdGlvbiUzQXJlbGF0aXZlJTNCJTIyJTNFJTNDaWZyYW1lJTIwc3JjJTNEJTIyaHR0cHMlM0ElMkYlMkZwbGF5ZXIudmltZW8uY29tJTJGdmlkZW8lMkYxMDQ1NzUzNTE4JTNGdGl0bGUlM0QwJTI2YW1wJTNCYnlsaW5lJTNEMCUyNmFtcCUzQnBvcnRyYWl0JTNEMCUyNmFtcCUzQmJhZGdlJTNEMCUyNmFtcCUzQmF1dG9wYXVzZSUzRDAlMjZhbXAlM0JwbGF5ZXJfaWQlM0QwJTI2YW1wJTNCYXBwX2lkJTNENTg0NzklMjIlMjBmcmFtZWJvcmRlciUzRCUyMjAlMjIlMjBhbGxvdyUzRCUyMmF1dG9wbGF5JTNCJTIwZnVsbHNjcmVlbiUzQiUyMHBpY3R1cmUtaW4tcGljdHVyZSUzQiUyMGNsaXBib2FyZC13cml0ZSUzQiUyMGVuY3J5cHRlZC1tZWRpYSUyMiUyMHN0eWxlJTNEJTIycG9zaXRpb24lM0FhYnNvbHV0ZSUzQnRvcCUzQTAlM0JsZWZ0JTNBMCUzQndpZHRoJTNBMTAwJTI1JTNCaGVpZ2h0JTNBMTAwJTI1JTNCJTIyJTIwdGl0bGUlM0QlMjJYLUtvdGUlMjBQb2xpcGVyZmVjdCUyMiUzRSUzQyUyRmlmcmFtZSUzRSUzQyUyRmRpdiUzRSUzQ3NjcmlwdCUyMHNyYyUzRCUyMmh0dHBzJTNBJTJGJTJGcGxheWVyLnZpbWVvLmNvbSUyRmFwaSUyRnBsYXllci5qcyUyMiUzRSUzQyUyRnNjcmlwdCUzRQ==[/vc_raw_html][/vc_column][/vc_row][vc_row full_width=”stretch_row” as_padding_top=”theme-padding-top-5″ as_padding_bottom=”theme-padding-bottom-5″ bg_type=”bg_color” css=”.vc_custom_1736534223390margin-top: -30px !important;” bg_color_value=”#000000″][vc_column]

[vc_column_text css=”.vc_custom_1736536229870margin-bottom: 0px !important;”]

FAQ

[/vc_column_text][/vc_column][/vc_row][vc_row as_padding_top=”theme-padding-top-5″ as_padding_bottom=”theme-padding-bottom-5″][vc_column][vc_column_text css=””]

#sp-ea-2011 .spcollapsing height: 0; overflow: hidden; transition-property: height;transition-duration: 300ms;#sp-ea-2011.sp-easy-accordion>.sp-ea-single margin-bottom: 10px; border: 1px solid #e2e2e2; #sp-ea-2011.sp-easy-accordion>.sp-ea-single>.ea-header a color: #50ddfb;#sp-ea-2011.sp-easy-accordion>.sp-ea-single>.sp-collapse>.ea-body background: #fff; color: #444;#sp-ea-2011.sp-easy-accordion>.sp-ea-single background: #000000;#sp-ea-2011.sp-easy-accordion>.sp-ea-single>.ea-header a .ea-expand-icon float: left; color: #444;font-size: 16px;

Does X-Kote go directly over my clear coat?

Yes it does! X-Kote is nearly the same as your factory clear coat, filling surface defects and bringing your paintwork back to a smooth, discrepancy-free luster. As a professional X-Kote installer, I will completely decontaminate your finish before using safe applicator towels to hand-apply X-Kote as a liquid formula.

Can the properties of my X-Kote fade with time?

They cannot, which is great news for you as a vehicle owner! X-Kote is a permanent solution to surface defects, and once it is applied, will be effective as long as regular maintenance and basic vehicle care is taken. You can also wrap your newly coated surface in a PPF or have it covered with other paint protection methods.

Do you install a ceramic coating over X-Kote?

I can and do quite frequently install my protective ceramic coating packages over the top of an X-Kote surface. Think of X-Kote like liquid paint correction, as it fills many of the pockets created by light scratches, swirls, and paint chips. Much like traditional vehicle paint correction, I follow those services up with a ceramic coating to exemplify the resulting gloss.

Why does X-Kote require a professional to install?

The permanence of X-Kote when applied to your vehicle’s exterior painted surfaces is predominantly why installation must be done by a certified professional. Diamond Shine Detail & Ceramic Coatings is an exclusive detailing shop that is expertly trained and licensed in applying X-Kote to any make and model vehicle

[/vc_column_text][/vc_column][/vc_row][vc_row full_width=”stretch_row” bg_type=”bg_color” bg_color_value=”#111111″ css=”.vc_custom_1614177811445margin-top: -15px !important;margin-left: 50px !important;border-right-width: 50px !important;padding-bottom: -15px !important;”][vc_column width=”1/4″][vc_column_text]Contact By Appointment only. Please contact us in advance[/vc_column_text][/vc_column][vc_column width=”1/4″][vc_column_text]Phone 514.691.0414[/vc_column_text][/vc_column][vc_column width=”1/4″][vc_column_text]Email poliperfect99@gmail.com[/vc_column_text][/vc_column][vc_column width=”1/4″][vc_column_text]Appointments Booked Wed.-Sun 8am-7pm[/vc_column_text][vc_column_text css=”.vc_custom_1614176310384margin-left: -10px !important;”]

[/vc_column_text][/vc_column][/vc_row][vc_row full_width=”stretch_row” as_padding_top=”theme-padding-top-5″ as_padding_bottom=”theme-padding-bottom-5″ bg_type=”bg_color” bg_color_value=”#000000″ css=”.vc_custom_1736538057179margin-bottom: -100px !important;”][vc_column]

[vc_single_image image=”644″ img_size=”full” alignment=”center”][vc_column_text css=”.vc_custom_1736536550726padding-top: 25px !important;”]

Poliperfect © 2025 Conception Punch Médias Mobile

[/vc_column_text][/vc_column][/vc_row]

[gleitzman]

Yet Another Age Verification Pop-up for Squarespace

I wanted to add an Age Gate / Age Verification pop-up for Squarespace. The top search engine result had some code, but it A) didn't work B) didn't look very good and C) didn't have any functionality for tracking cookies. Instead, use this code:

First, put this into the injected code in the Header

<!-- Age Verification Pop-up HTML --> <div id="age-verification-popup"> <div class="popup-content"> <h2>ARE YOU 21+?</h2> <div class="image-circle-container" style="margin-bottom: 24px;"> <img src="https://images.squarespace-cdn.com/content/6788837817ec6330feff09fe/a0416e38-e21f-4f14-88b3-0a8c8589e435/lambi_lamb_black.png" alt="LAMBI" class="centered-image" fetchpriority="high" loading="eager" decoding="async" data-loader="raw"> </div> <div class="button-container"> <button id="verify-button-yes">YES</button> <button id="verify-button-no">NO</button> </div> <p class="disclaimer"> You must be of legal drinking age in<br> your respective country for entry.<br><br> We encourage drinking responsibly! </p> </div> </div>

Next, inject this CSS:

/* Style for Age Verification Pop-up */ #age-verification-popup { display: none; /* Initially hidden, JS will show it if needed */ position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); /* Semi-transparent black overlay */ z-index: 9999; font-family: Arial, sans-serif; /* Or choose a font that matches */ } .popup-content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #fff; /* White background */ padding: 40px 30px; /* Adjust padding as needed */ text-align: center; border: 1px solid #ccc; /* Optional: adds a light border */ min-width: 300px; /* Minimum width */ box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Optional subtle shadow */ } /* Optional logo styling */ /* .popup-logo { max-width: 80px; margin-bottom: 20px; } */ .popup-content h2 { font-size: 1.2em; /* Adjust size as needed */ margin-top: 0; margin-bottom: 25px; font-weight: bold; line-height: 1.4; color: #000; /* Black text */ } .button-container { margin-bottom: 25px; } #verify-button-yes, #verify-button-no { background-color: #000; /* Black background */ color: #fff; /* White text */ padding: 12px 30px; /* Adjust padding */ border: none; cursor: pointer; font-size: 1em; font-weight: bold; margin: 0 5px; /* Space between buttons */ min-width: 80px; /* Minimum width for buttons */ transition: background-color 0.2s ease; /* Smooth hover effect */ } #verify-button-yes:hover, #verify-button-no:hover { background-color: #333; /* Slightly lighter black on hover */ } .popup-content .disclaimer { font-size: 0.9em; /* Smaller font size for disclaimer */ color: #555; /* Grey text */ line-height: 1.5; } .image-circle-container { width: 70px; /* Adjust size of the circle as needed */ height: 70px; /* Must be the same as width for a perfect circle */ background-color: transparent; /* Black background */ border-radius: 50%; /* This makes the div circular */ display: flex; /* Enables flexbox for easy centering */ justify-content: center; /* Centers content (image) horizontally */ align-items: center; /* Centers content (image) vertically */ overflow: hidden; /* Ensures image doesn't spill outside the circle if it's too big */ margin-left: auto; /* Centers the circle container itself horizontally */ margin-right: auto; /* Centers the circle container itself horizontally */ } .centered-image { display: block; /* Removes extra space below the image */ height: 50px; /* Your desired image height */ width: auto; /* Let width adjust automatically to maintain aspect ratio */ max-width: 90%; /* Optional: Prevents image from touching the circle edge */ max-height: 90%;/* Optional: Prevents image from touching the circle edge */ }

Finally, inject this code into the footer

<script> // JavaScript for Age Verification Pop-up with Cookies document.addEventListener("DOMContentLoaded", function () { const popup = document.getElementById("age-verification-popup"); const verifyButtonYes = document.getElementById("verify-button-yes"); const verifyButtonNo = document.getElementById("verify-button-no"); const cookieName = "ageVerified"; // Name of our cookie // Function to set a cookie function setCookie(name, value, days) { let expires = ""; if (days) { const date = new Date(); date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000)); expires = "; expires=" + date.toUTCString(); } // Add SameSite=Lax and Secure attributes for better security, especially if using HTTPS // For local testing (http), you might omit 'Secure' // document.cookie = name + "=" + (value || "") + expires + "; path=/; SameSite=Lax; Secure"; document.cookie = name + "=" + (value || "") + expires + "; path=/; SameSite=Lax"; // Use this line if not using HTTPS for testing } // Function to get a cookie function getCookie(name) { const nameEQ = name + "="; const ca = document.cookie.split(';'); for(let i = 0; i < ca.length; i++) { let c = ca[i]; while (c.charAt(0) === ' ') c = c.substring(1, c.length); if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length); } return null; } // Check if the age verification cookie exists const isVerified = getCookie(cookieName); if (!isVerified) { // If the cookie doesn't exist, show the pop-up if (popup) { popup.style.display = "block"; } } else { // If the cookie exists, keep the pop-up hidden (it's hidden by default CSS) console.log("Age already verified."); } // Event listener for the "YES" button if (verifyButtonYes) { verifyButtonYes.addEventListener("click", function () { // Set a cookie to remember verification for 365 days setCookie(cookieName, "yes", 365); // Hide the pop-up if (popup) { popup.style.display = "none"; } }); } // Event listener for the "NO" button if (verifyButtonNo) { verifyButtonNo.addEventListener("click", function () { // Redirect the user to the specified URL when they click "NO" window.location.href = "https://www.youtube.com/watch?v=s50vvwTystA"; }); } }); </script>

Enjoy!

[lord-html]

Menu creativeshadow

Veja o menu

Peguei um menu que tinha feito e dei um jeito de deixar ele fofinho. Sempre gosto de mexer no shadow e fazer coisas legais, porque sim, tem como fazer isso. Antes de postar o código vou explicar algumas coisas.

CSS:

A primeira div/class, que é chamada de .simplemenu é a div de posição, referencia em fontes, valor da fonte e entre outras coisas. Nessa div a gente vai determinar que fonte vamos usar, qual o tamanho, se ela vai ficar em caixa baixa ou alta (text-transform). O que não deve ser tirado é o overflow hidden, que é o que faz com que nada saia de dentro daquele local. Essa div tem um valor determinando então o tamanho dela, que é os 800px no width e tem também o height. Dai vai depender do tamanho que você usou para o local do menu no seu theme. O line-height é do mesmo valor do height em questão, isso é o alinhamento do texto dentro da caixa, colocando o mesmo valor referente ao height vai ficar ‘centralizado’ de cima para baixo. O position absolute informa que vai ficar por cima de qualquer coisa e o margin-top e left informa a direção que o menu vai ter, onde ele vai ficar.

A class/div .simplemenu a determina a formatação do link que estiver dentro da div simplemenu. Ou seja, é nessa parte que temos que dar espaçamento entre os links, que usamos o text-shadow para o efeito. No text-shadow eu usei um -1000px para que demorasse um pouco até que o texto aparecesse e que sumisse ao nossos olhos, porque o que realmente queremos é que apareça apenas ao passar o mouse. Usei um color normal na fonte, você deve escolher uma cor que bata com seu theme. Usei o margin left e right para dar espaçamento entre os links. Ainda na formatação do link, temos um border-bottom: 5px solid transparent; e no local onde seria a cor temos o comando para que fique transparente. Isso faz com que o border exista mas não apareça. Porque se eu não colocasse isso e no hover eu colocasse uma cor no border, faria um efeito estranho, como se o menu tivesse subindo. (ou não).

A div/class .simplemenu a:hover é a a formatação do hover do link, dai tem todo o esquema do shadow já com o numero 0 que faz com que apareça. O color esta transparente para que apenas o shadow fique com a cor escolhida e temos o border já com a cor determinada.

O que temos que reparar é que tem o transition no hover e no não hover, isso faz com que a transição seja lenta e fique bonito.

E é isso, não tem mistério.

Código css, você deve colocar isso antes de

/* ------- creative shadow   ---- */ .simplemenu { overflow: hidden; text-transform: uppercase; cursor: pointer; font-family: "Futura Md BT"; position: absolute; margin-left: 0px; margin-top: 10px; width: 800px; background: #fff; height: 50px; line-height: 50px; font-size: 15px; letter-spacing: 1px; font-weight: bold; -webkit-box-shadow: 0px 0px 4px #b1d8c5; -moz-box-shadow: 0px 0px 4px #b1d8c5; box-shadow: 0px 0px 4px #b1d8c5;} .simplemenu a { color: #b1dac6; margin-left: 10px; margin-right: 10px; text-shadow: -1000px 0px 0px #d6bc97; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; } .simplemenu a:hover { color: transparent; text-shadow: 0px 0px 0px #d6bc97; -webkit-transition: text-shadow 0.5s ease; -moz-transition: text-shadow 0.5s ease; -o-transition: text-shadow 0.s ease; border-bottom: 5px solid #eee;}

Agora vem o HTML, você deve por depois de body ou dentro do seu header.

<div class="simplemenu">         <a href="/">Home</a>         <a href="/">Dúvidas</a>         <a href="/">Tutoriais</a>         <a href="/">F.A.Q</a>         <a href="/">Themes</a>         <a href="/">Materiais</a>         <a href="/">About</a>         <a href="/">Dicas</a>         <a  onMouseover="this.style.background='#'" onMouseout="this.style.background='#'" onClick="document.getElementById('main').innerHTML=document.getElementById('leia').innerHTML" title=":)">Iframe</a> </div>

[classygreydove]

Light Mode Work Skin for the fic To Be a Dragon Among Men

This is the code and urls for the custom light mode work skin I made for my fic To Be a Dragon. Feel free to use it for your own works or for site skins, just remember to credit my user if you do.

[EDIT 25-02-21: The URL for the page break image was incorrect. It has been replaced with the correct URL.]

[EDIT 25-03-18: Fixed padding for .frameborder class]

[EDIT 25-06-12: Added formatting rules for .poetry class and <p>]

Additional Resources

A Step-by-Step Guide to Work Skins from AO3 News - A great basic guide to what work skins are and how to make one.

How to Apply Work Skins to Others' Works by classygreydove - This is a guide I made on how to make a work skin into a site skin. You'll need to know this if you want to apply the work skin to any fic you want to read.

How to Change Work Skin Font by classygreydove - Don't like the font I use for the work skin? Don't worry, I'll show you how to change it.

Dark Mode Skin CSS - You can find the code for the dark mode skin here.

Light and Dark Mode Backgrounds - You can find the background images for the Light and Dark Mode work skins here.

Other Background Options - Here are a few mid-tone backgrounds that will have a lower contrast to the text.

Line Breaks (for Phone) - Do you like the custom dragon line breaks? Here's the phone-sized ones.

Line Breaks (for Wide Screens) - Do you like the custom dragon line breaks? Here's the laptop-sized ones.

[Code begins under Keep reading break]

#workskin .userstuff .hr, #workskin .hr, #workskin hr { height: 36px; width: 178px; background: url(https://64.media.tumblr.com/f849e48f47942db9d3ffe136de07193f/d0f8688c32033f2d-eb/s250x400/ed6b9f36c2bd22e6f33d2ec444eb9449fdea2cf7.png); background-repeat: no-repeat; background-position: center; border: 0; }

#workskin { background: url(https://64.media.tumblr.com/e26bf1c1315eb6d66c8a5f8ce150ef0a/4dcdf7c3c32cb0d1-dc/s2048x3072/0e5e9ff5b9d9e88aa8e7540746867bb95cdd5b75.png); background-repeat: repeat-y repeat-x; background-position: top; color: #172330 !important; font-family: 'Georgia', 'Lucida Grande', 'Verdana'; }

#workskin a { background: linear-gradient(135deg, #8f751b 0%, #dac76b 50%, #aa8c21 75%) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; border-bottom: 0px; }

#workskin a:hover, #workskin a:active { background: linear-gradient(135deg, #8f751b 10%, #c9b44c 60%, #aa8c21 100%) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; }

#workskin ::selection a { background-color: #6180ae; color: #ddebff !important; }

#workskin h2, #workskin h3 { line-height: 1.25; font-variant: small-caps; }

#workskin .userstuff blockquote { display: block; border: 2px solid #b4853f; border-image: linear-gradient(135deg, #8f751b 0%, #dac76b 50%, #aa8c21 75%); border-image-slice: 1; padding: 15px 15px 15px 15px; margin-left: 1.5em; margin-right: 1.5em; }

#workskin .goldborder { display: block; border: 2px solid #b4853f; border-image: linear-gradient(135deg, #8f751b 0%, #dac76b 50%, #aa8c21 75%); border-image-slice: 1; padding: 15px 15px 15px 15px; }

#workskin .frameborder { display: block; border: 2px solid #b4853f; border-image: linear-gradient(135deg, #8f751b 0%, #dac76b 50%, #aa8c21 75%); border-image-slice: 1; padding: 0px; }

#workskin .mobilebreak { width: 178px; max-width: 100%; max-height: 100%; display: block; margin-left: auto; margin-right: auto; }

#workskin .textlink { font-variant: small-caps; }

#workskin .notesheading { font-size: 120%; font-variant: small-caps; font-family: 'Georgia', 'Lucida Grande', 'Verdana'; line-height: 2; }

#workskin .triggerwarning { color: rgba(240, 240, 240, 0.9); border-radius: 5px; background: rgba(128, 0, 0, 0.8); padding-left: 2px; padding-right: 2px; font-weight: bold; font-variant: small-caps; }

workskin .userstuff p { margin: 0; }

workskin .poetry { margin-inline-start: 1.5em; }

[solusyncdr]

Guía Definitiva: Cómo Configurar y Personalizar Tu Kajabi Community – Tutorial Paso a Paso 2025

[vc_section content_placement=”middle” css=”.vc_custom_1739614688362{margin-bottom: 20px !important;border-top-width: 1px !important;border-right-width: 1px !important;border-bottom-width: 1px !important;border-left-width: 1px !important;border-left-style: solid !important;border-right-style: solid !important;border-top-style: solid !important;border-bottom-style: solid !important;border-radius:…

[codingquill]

Day 1 - 100 Days CSS Challenge

Welcome to day 1 of the 100 Days CSS Challenge! In this challenge, we'll bring a design to life using only CSS. Our goal is to recreate the image we're provided with on the challenge page using HTML and CSS.

On the challenge page, we see:

A small preview of the design we need to replicate.

A starter HTML template.

A submission form to showcase our work alongside others who have taken on the same challenge.

Let's dive into the process step by step.

Step 1: Screenshot the Image

The first thing I always do is take a screenshot of the target design. Even if the design includes animation, having a static reference helps me focus on the basic structure and colors. Here’s the screenshot of the design we’re aiming for:

Step 2: Extract the Color Palette

Next, I identify the color palette that we'll need. This helps ensure that we maintain consistency with the original design. Here’s the color palette I’ve created:

Step 3: Identify and Create the Image Elements in HTML

Now that we know the colors, I break down the elements in the image:

Background: This is a linear gradient.

The 100 number: This is the main challenge, and it will require some work.

Text: “days css challenge,” which we’ll place to the left of the number.

Here’s the HTML structure for these elements:

<div class="frame"> <div class="center"> <div class="number"> <div class="one-one"></div> <div class="one-two"></div> <div class="zero-one"></div> <div class="zero-two"></div> </div> <p class="sentence1">days</p> <p class="sentence2">css challenge</p> </div> </div>

Now that the elements are in place, CSS will bring them to life.

Step 4: Bringing the Elements to Life with CSS

Linear Gradient

To create the background, we’ll use a linear gradient. Here’s a basic syntax:

background: linear-gradient(to <direction>, <color-stop1>, <color-stop2>, ...);

Parameter 1: Direction/Angle

This defines the starting point of the gradient. You can either specify a direction (e.g., to top, to bottom) or an angle (e.g., 90deg, 180deg).

Direction options:

to top

to bottom

to left

to right

If you want more precision, you can specify angles:

0deg: Gradient starts from the top.

90deg: From the right.

180deg: From the bottom.

270deg: From the left.

You can also combine two directions, specifying both horizontal and vertical movements, like to left top or to right bottom. This means:

The first keyword (left or right) controls the horizontal movement.

The second keyword (top or bottom) controls the vertical movement.

For example:

background: linear-gradient(to left top, red, blue);

This gradient starts at the bottom-right corner and transitions toward the top-left.

Parameter 2: Color Stops

Color stops define how the gradient transitions between colors. Each color stop specifies a point where a color starts or ends. Here's an example:

background: linear-gradient(to right, red 10%, blue 90%);

This means:

The element starts at 0% fully red.

By 10%, the transition from red begins.

Between 10% and 90%, there is a smooth blend from red to blue.

At 90%, the transition to blue is complete, and the remaining part is fully blue.

Once we understand the concept, we can apply the background we need. In our case, the gradient flows from the bottom left to the top right, so the code will look like this:

background: linear-gradient(to right top, #443DA1, #4EC3C9);

Bonus: Stacking Multiple Linear Gradients

You can also apply multiple gradients on top of each other:

background: linear-gradient(180deg, #f00, #0f0), linear-gradient(90deg, #ff0, #f0f);

Step 5: Making the "100" Number

Creating the Zeros

We start with the zeros. These are simply circles created using CSS. To make a full circle, we use border-radius set to 50%.

The white border gives it the appearance of the number zero.

.zero-one, .zero-two { position: absolute; height: 100px; width: 100px; border-radius: 50%; border: 24px solid #fff; box-shadow: 0 0 13px 0 rgba(0,0,0,0.2); }

This gives us a nice circular zero. We adjust their positions using properties like left and top, and manage the z-index to make sure the zeros stack correctly.

.zero-one { z-index: 8; left: 17px; } .zero-two { z-index: 6; left: 100px; }

Now both zeros are positioned, and they overlap in the way we want.

Creating the "1" Number

The number "1" is made of two div elements:

One-One: This part represents the slanted part of the "1".

One-Two: This is the straight vertical part of the "1".

What make the one-one element slightly slanted is

transform: rotate(50deg);)

the one-two is created simply with a little height and width nothing too particular then it is placed directly on top of the slanted part, giving us the full "1". Its z-index tho has to have a higher value than the slanted part of our 1 to ensure it stays above the slanted one.

Step 6: Adding the Text

For the two sentences “days” and “css challenge,” the styling is basic CSS. You can achieve the look with just a few font changes, some padding, and adjustments to font size. It’s as simple as:

.sentence1,.sentence2{ text-transform: uppercase; margin:0; padding:0; } .sentence1{ font-size:82px; font-weight:700; } .sentence2{ font-size:25px; font-weight:700; margin-top:-20px; }

And just like that, we’ve completed day 1 of the 100 Days CSS Challenge! Each part of the design is carefully crafted using CSS, giving us the final result.

Happy coding, and see you tomorrow for Day 2!

[mahmut-guzel-studyo]

Home

YAYINDA! https://mguzel.com.tr/home-2/

Home

[vc_row no_padding=”yes” conditional_render=”%5B%7B%22value_role%22%3A%22administrator%22%7D%5D”][vc_column]

[vc_row_inner wrap_container=”yes” content_placement=”middle” el_class=”intro-banner vh-100 align-items-center overflow-hidden” css=”.vc_custom_1706303027820background: #222529 url(//sw-themes.com/porto_dummy/wp-content/uploads/2024/01/bc-1-slide-1.jpg?id=465) !important;background-position: center !important;background-repeat: no-repeat !important;background-size: cover !important;”][vc_column_inner el_class=”intro-content”]

Get your

Free Consultation

.porto-u-ad87e2eaf3f9c495180fe0156ddf3eb0.porto-u-headingtext-align:left

[vc_btn title=”Get Started” style=”modern” skin=”primary” btn_fs=”0.9em” btn_fw=”700″ animation_delay=”1200″ btn_px=”1.75rem” btn_py=”1rem” el_class=”mb-0″ animation_type=”fadeInUp”][/vc_column_inner][/vc_row_inner][vc_row_inner wrap_container=”yes” content_placement=”middle” el_class=”intro-banner vh-100 align-items-center overflow-hidden” css=”.vc_custom_1706303032699background: #222529 url(//sw-themes.com/porto_dummy/wp-content/uploads/2024/01/bc-2-slide-2.jpg?id=493) !important;background-position: center !important;background-repeat: no-repeat !important;background-size: cover !important;”][vc_column_inner el_class=”intro-content”]

Solutions for

Pro Business Plan

.porto-u-ad87e2eaf3f9c495180fe0156ddf3eb0.porto-u-headingtext-align:left

[vc_btn title=”Get Started” style=”modern” skin=”primary” btn_fs=”0.9em” btn_fw=”700″ animation_delay=”1200″ btn_px=”1.75rem” btn_py=”1rem” el_class=”mb-0″ animation_type=”fadeInUp”][/vc_column_inner][/vc_row_inner]

[/vc_column][/vc_row][vc_row wrap_container=”yes” content_placement=”middle” animation_delay=”2000″ el_class=”custom-position custom-call-to-action” conditional_render=”%5B%7B%22value_role%22%3A%22administrator%22%7D%5D” css=”.vc_custom_1706239560136padding-top: 35px !important;padding-bottom: 47px !important;background-color: #101019 !important;” animation_type=”fadeIn”][vc_column width=”1/2″ offset=”vc_col-md-7″ conditional_render=”%5B%7B%22value_role%22%3A%22administrator%22%7D%5D”]

[vc_custom_heading text=”- Are you looking for a” font_container=”tag:h2|font_size:1.76em|text_align:left|color:%23ffffff|line_height:1.2″ google_fonts=”font_family:Playfair%20Display%3Aregular%2Citalic%2C700%2C700italic%2C900%2C900italic|font_style:400%20regular%3A400%3Anormal” css=”.vc_custom_1706115246289margin-bottom: 2px !important;”][vc_custom_heading text=”Business Plan Consultant?” font_container=”tag:h2|font_size:2.2em|text_align:left|color:%23ffffff|line_height:1.2″ google_fonts=”font_family:Playfair%20Display%3Aregular%2Citalic%2C700%2C700italic%2C900%2C900italic|font_style:400%20regular%3A400%3Anormal” css=”.vc_custom_1706239333994margin-bottom: 0px !important;”][vc_column_text el_class=”mb-0″]Schedule your company strategy right session now[/vc_column_text]

[/vc_column][vc_column width=”1/2″ el_class=”text-md-end” conditional_render=”%5B%7B%22value_role%22%3A%22administrator%22%7D%5D” offset=”vc_col-md-5″]

[vc_column_text css=”.vc_custom_1706239474641border-left-width: 2px !important;padding-right: 9px !important;padding-left: 10px !important;border-left-color: var(–porto-primary-color) !important;border-left-style: solid !important;” el_class=”mb-0 text-start me-lg-3″]Call Us Now +001 1230 4567[/vc_column_text]

[vc_column_text css=”.vc_custom_1706239406332border-left-width: 2px !important;padding-left: 9px !important;border-left-color: var(–porto-primary-color) !important;border-left-style: solid !important;” el_class=”mb-0 text-start m-r-n-xs”]Email Us Now mail@example.com[/vc_column_text]

[/vc_column][/vc_row][vc_row wrap_container=”yes” content_placement=”middle” animation_delay=”200″ css=”.vc_custom_1706279881034margin-top: 63px !important;margin-bottom: 48px !important;” conditional_render=”%5B%7B%22value_role%22%3A%22administrator%22%7D%5D” animation_type=”fadeIn”][vc_column offset=”vc_col-md-6″ conditional_render=”%5B%7B%22value_role%22%3A%22administrator%22%7D%5D”][vc_custom_heading text=”- About Us” font_container=”tag:h2|font_size:2.2em|text_align:left|line_height:42px” google_fonts=”font_family:Playfair%20Display%3Aregular%2Citalic%2C700%2C700italic%2C900%2C900italic|font_style:700%20bold%20regular%3A700%3Anormal” css=”.vc_custom_1706155865868margin-bottom: 15px !important;” el_class=”font-weight-bold”][vc_custom_heading text=”Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla volutpat ex finibus urna tincidunt, auctor ullamcorper risus luctus. Nunc et feugiat arcu, in placerat risus. Phasellus condimentum sapien vitae.” font_container=”tag:p|text_align:left|line_height:26px” use_theme_fonts=”yes” el_class=”ps-4 m-b-md”][vc_row_inner el_class=”ps-4″][vc_column_inner width=”1/2″ offset=”vc_col-xs-12″].porto-info-list55ccda442d4af4f9e2540d79b9f22354 i color: #777777;

Certified Professionals

Former Chief Executives

Real Estate Professionals

[/vc_column_inner][vc_column_inner width=”1/2″ offset=”vc_col-xs-12″].porto-info-list55ccda442d4af4f9e2540d79b9f22354 i color: #777777;

Nobel Laureate Economists

Former Political Leaders

Chartered Financial Analysts

[/vc_column_inner][/vc_row_inner][vc_btn title=”READ MORE” style=”outline” shape=”square” color=”default” size=”lg” css=”.vc_custom_1706157644654margin-top: 16px !important;padding-left: 24px !important;” skin=”primary” btn_fs=”0.8rem” btn_fw=”600″ scale=”scale-2″ el_class=”font-weight-bold” link=”url:https%3A%2F%2Fwww.portotheme.com%2Fwordpress%2Fporto%2Fbusiness-consulting%2Fabout-us%2F||target:%20_blank|” btn_px=”30px” btn_py=”12px”][/vc_column][vc_column el_class=”custom-content-grid” conditional_render=”%5B%7B%22value_role%22%3A%22administrator%22%7D%5D” offset=”vc_col-md-6″][vc_row_inner no_padding=”yes”][vc_column_inner el_class=”px-4 col-sm-6 border-sm-max-none” width=”1/2″ css=”.vc_custom_1706239900108padding-top: 27px !important;padding-bottom: 24px !important;background-color: #ffffff !important;”]

0+

Years in Business

[/vc_column_inner][vc_column_inner el_class=”px-4 col-sm-6 border-sm-max-none” width=”1/2″ css=”.vc_custom_1706239907369border-left-width: 1px !important;padding-top: 27px !important;padding-bottom: 24px !important;border-left-color: #dadada !important;border-left-style: solid !important;”]

0+

Successfull Cases

[/vc_column_inner][/vc_row_inner][vc_row_inner no_padding=”yes” css=”.vc_custom_1706161928391margin-bottom: 9px !important;border-top-width: 1px !important;border-top-color: #dadada !important;border-top-style: solid !important;” el_class=”pb-lg-4 border-sm-max-none”][vc_column_inner el_class=”px-4 col-sm-6 border-sm-max-none” width=”1/2″ css=”.vc_custom_1706161847023padding-top: 25px !important;padding-bottom: 24px !important;”]

0+

Satisfied Clients

[/vc_column_inner][vc_column_inner el_class=”px-4 col-sm-6 border-sm-max-none” width=”1/2″ css=”.vc_custom_1706161851360border-left-width: 1px !important;padding-top: 25px !important;padding-bottom: 24px !important;background-color: #ffffff !important;border-left-color: #dadada !important;border-left-style: solid !important;”]

0+

Pro Consultants

[/vc_column_inner][/vc_row_inner][/vc_column][/vc_row][vc_row wrap_container=”yes” is_section=”yes” remove_margin_top=”yes” remove_margin_bottom=”yes” remove_border=”yes” animation_delay=”200″ el_class=”custom-info-box” css=”.vc_custom_1706279894948padding-top: 59px !important;padding-bottom: 57px !important;background-color: #eef4f2 !important;” conditional_render=”%5B%7B%22value_role%22%3A%22administrator%22%7D%5D” animation_type=”fadeIn”][vc_column][vc_custom_heading text=”- Expertises” font_container=”tag:h2|text_align:left|line_height:42px” google_fonts=”font_family:Playfair%20Display%3Aregular%2Citalic%2C700%2C700italic%2C900%2C900italic|font_style:700%20bold%20regular%3A700%3Anormal” css=”.vc_custom_1706163652932margin-bottom: 21px !important;” font_weight=”700″][vc_row_inner][vc_column_inner width=”1/2″ offset=”vc_col-md-4″]

Corporate Finance

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla volutpat ex finibus urna.

[/vc_column_inner][vc_column_inner width=”1/2″ offset=”vc_col-md-4″]

Corp Restructuring

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla volutpat ex finibus urna.

[/vc_column_inner][vc_column_inner width=”1/2″ offset=”vc_col-md-4″]

Economic Consulting

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla volutpat ex finibus urna.

[/vc_column_inner][vc_column_inner width=”1/2″ offset=”vc_col-md-4″]

Litigation Consulting

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla volutpat ex finibus urna.

[/vc_column_inner][vc_column_inner width=”1/2″ offset=”vc_col-md-4″]

Strategic Consulting

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce consectetur diam id urna.

[/vc_column_inner][vc_column_inner width=”1/2″ offset=”vc_col-md-4″]

Tech Consulting

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce consectetur diam id urna.

[/vc_column_inner][/vc_row_inner][vc_btn title=”VIEW ALL” style=”outline” shape=”square” size=”lg” align=”center” css=”.vc_custom_1706164291167margin-top: 20px !important;” skin=”primary” btn_fs=”0.8rem” link=”url:https%3A%2F%2Fwww.portotheme.com%2Fwordpress%2Fporto%2Fbusiness-consulting%2Fexpertise%2F||target:%20_blank|” el_class=”font-weight-semibold” btn_px=”30px” btn_py=”12px”][/vc_column][/vc_row][vc_row wrap_container=”yes” animation_delay=”200″ css=”.vc_custom_1706279909053padding-top: 60px !important;padding-bottom: 44px !important;” conditional_render=”%5B%7B%22value_role%22%3A%22administrator%22%7D%5D” animation_type=”fadeIn”][vc_column offset=”vc_col-lg-6 vc_col-md-6 vc_col-xs-12″][vc_custom_heading text=”- Our Strategy” font_container=”tag:h2|font_size:2.2em|text_align:left|line_height:42px” google_fonts=”font_family:Playfair%20Display%3Aregular%2Citalic%2C700%2C700italic%2C900%2C900italic|font_style:700%20bold%20regular%3A700%3Anormal” css=”.vc_custom_1706189618086margin-bottom: 15px !important;”]

STEP

01

.porto-u-55ca8359258f9a412be7e73af65d2aac.porto-u-headingtext-align:center

The first meeting

Understanding the Problem

.porto-u-ad87e2eaf3f9c495180fe0156ddf3eb0.porto-u-headingtext-align:left

[vc_custom_heading text=”Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla volutpat ex finibus urna tincidunt, auctor ullamcorper risus luctus. Nunc et feugiat arcu, in placerat risus. Phasellus condimentum sapien vitae odio.” font_container=”tag:p|font_size:14px|text_align:left|line_height:26px” use_theme_fonts=”yes” font_weight=”400″]

STEP

02

.porto-u-55ca8359258f9a412be7e73af65d2aac.porto-u-headingtext-align:center

The second meeting

Business Plan Consultant

.porto-u-ad87e2eaf3f9c495180fe0156ddf3eb0.porto-u-headingtext-align:left

[vc_custom_heading text=”Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla volutpat ex finibus urna tincidunt, auctor ullamcorper risus luctus. Nunc et feugiat arcu, in placerat risus. Phasellus condimentum sapien vitae odio.” font_container=”tag:p|font_size:14px|text_align:left|line_height:26px” use_theme_fonts=”yes” font_weight=”400″]

STEP

03

.porto-u-55ca8359258f9a412be7e73af65d2aac.porto-u-headingtext-align:center

The final meeting

Problem Solved

.porto-u-ad87e2eaf3f9c495180fe0156ddf3eb0.porto-u-headingtext-align:left

[vc_custom_heading text=”Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla volutpat ex finibus urna tincidunt, auctor ullamcorper risus luctus. Nunc et feugiat arcu, in placerat risus. Phasellus condimentum sapien vitae odio.” font_container=”tag:p|font_size:14px|text_align:left|line_height:26px” use_theme_fonts=”yes” font_weight=”400″]

[/vc_column][vc_column offset=”vc_col-lg-6 vc_col-md-6 vc_col-xs-12″][vc_custom_heading text=”- Frequently asked questions” font_container=”tag:h2|font_size:2.2em|text_align:left|line_height:42px” google_fonts=”font_family:Playfair%20Display%3Aregular%2Citalic%2C700%2C700italic%2C900%2C900italic|font_style:700%20bold%20regular%3A700%3Anormal” css=”.vc_custom_1706193502782margin-bottom: 15px !important;”]

Bebek fotoğraf çekimlerinin fiyatlandırması nasıl belirlenir?

Bebek fotoğraf çekimlerinin fiyatlandırması nasıl belirlenir?

Ankara Düğün Fotoğrafçısı2024-04-28T10:29:46+03:00Bebek fotoğraf çekimlerinin fiyatlandırması, çeşitli faktörlere bağlı olarak değişebilir. Çekim türü, süresi, kullanılan ekipmanlar ve müşterinin özel istekleri gibi faktörler fiyatı etkileyebilir. İhtiyaçlarınıza ve bütçenize uygun bir paket seçmek için bizimle iletişime geçebilir ve detaylı bilgi alabilirsiniz.

Bebek fotoğraf çekimlerinden sonra fotoğraflar ne zaman teslim edilir?

Bebek fotoğraf çekimlerinden sonra fotoğraflar ne zaman teslim edilir?

Ankara Düğün Fotoğrafçısı2024-04-28T10:28:42+03:00Bebek fotoğraf çekimlerinden sonra, fotoğrafların düzenlenmesi ve işlenmesi birkaç gün sürebilir. Genellikle, fotoğraf çekimlerinden sonraki 1 ila 2 hafta içinde tamamlanan ve müşteriye sunulan bir galeri oluştururuz. Fotoğrafların tamamlanması ve teslimatı hakkında daha fazla bilgi almak için bizimle iletişime geçebilirsiniz.

Bebek fotoğraf çekimleri için ne tür kıyafetler ve aksesuarlar getirmeliyim?

Bebek fotoğraf çekimleri için ne tür kıyafetler ve aksesuarlar getirmeliyim?

Ankara Düğün Fotoğrafçısı2024-04-28T10:27:40+03:00Bebek Fotoğraf çekimlerine gelirken, bebeğiniz için birkaç farklı kıyafet ve aksesuar getirmeniz önemlidir. Genellikle, sevimli kıyafetler, tulumlar, başlıklar, örtüler ve özel aile mirası eşyaları gibi öğeler önerilir. Ancak, bizimle önceden iletişime geçerek hangi tür kıyafetlerin ve aksesuarların uygun olduğunu öğrenmek önemlidir.

Bebek Fotoğraf çekimleri ne kadar sürer ve ne tür pozlar çekilebilir?

Bebek Fotoğraf çekimleri ne kadar sürer ve ne tür pozlar çekilebilir?

Ankara Düğün Fotoğrafçısı2024-04-28T10:26:30+03:00Bebek fotoğraf çekimlerimiz genellikle 1 ila 2 saat arasında sürer. Bu süre, bebeğinizi rahatlatmak, beslemek ve ara vermek için zaman içerir. Fotoğraf çekimleri sırasında, çeşitli pozlar ve sahneler yakalanabilir. Bebeklerin doğal hareketleri ve poz verme tarzlarına göre, uyuyan bebek pozları, aile fotoğrafları, detay çekimleri ve daha fazlası gibi çeşitli pozlar çekebiliriz.

[/vc_column][/vc_row][vc_row animation_delay=”200″ css=”.vc_custom_1730124746716background-color: #eef4f2 !important;” el_class=”p-t-xxl no-padding” conditional_render=”%5B%7B%22value_role%22%3A%22administrator%22%7D%5D” animation_type=”fadeIn” css_params=””][vc_column][vc_row_inner wrap_container=”yes” css_params=””][vc_column_inner][vc_custom_heading text=”- Our Cases” font_container=”tag:h2|text_align:left|line_height:42px” google_fonts=”font_family:Playfair%20Display%3Aregular%2Citalic%2C700%2C700italic%2C900%2C900italic|font_style:700%20bold%20regular%3A700%3Anormal” css=”.vc_custom_1706198271377margin-top: -1px !important;margin-bottom: 17px !important;”][/vc_column_inner][/vc_row_inner][porto_tb_posts post_type=”portfolio” view=”slider” spacing=”0″ columns=”6″ columns_tablet=”3″ columns_mobile=”1″ nav_pos=”show-nav-title” nav_visible=”“xl“:“none“,“sm“:“block“” pagination=”yes” dots_pos=”custom-dots” dots_style=”dots-style-1″ dots_visible=”“xl“:“block“,“sm“:“none“,“md“:“block“,“lg“:“block“” autoplay=”no” builder_id=”386″ el_class=”m-b-n-md custom-both-sides-shadow” dots_pos_top=”“xl“:“-42“,“unit“:““,“xs“:““,“sm“:““,“md“:““,“lg“:““” dots_pos_right=”“xl“:“0“,“unit“:““,“xs“:““,“sm“:““,“md“:““,“lg“:““” dots_br_color=”#1e1e24″ dots_abr_color=”var(–porto-primary-color)” navs_h_origin=”“xl“:““,“unit“:“%“,“xs“:““,“sm“:““,“md“:““,“lg“:““” nav_v_pos=”“xl“:“-11“,“unit“:““,“xs“:““,“sm“:““,“md“:““,“lg“:““” nav_h_pos=”“xl“:““,“unit“:““,“xs“:““,“sm“:““,“md“:““,“lg“:““” nav_h_color=”var(–porto-primary-color)” nav_fs=”32″ css_params=”” dots_pos_left=”“xl“:“0“,“unit“:““,“xs“:““,“sm“:““,“md“:““,“lg“:““”][/vc_column][/vc_row][vc_row wrap_container=”yes” animation_delay=”200″ css=”.vc_custom_1706279939820padding-top: 59px !important;” conditional_render=”%5B%7B%22value_role%22%3A%22administrator%22%7D%5D” animation_type=”fadeIn”][vc_column][vc_custom_heading text=”- Testimonials” font_container=”tag:h2|text_align:left|line_height:42px” google_fonts=”font_family:Playfair%20Display%3Aregular%2Citalic%2C700%2C700italic%2C900%2C900italic|font_style:700%20bold%20regular%3A700%3Anormal” css=”.vc_custom_1706215309651margin-bottom: 16px !important;”]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget risus porta, tincidunt turpis at, interdum tortor. Suspendisse potenti. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce ante tellus, convallis non consectetur sed, pharetra nec ex. Aliquam et tortor nisi. Duis mollis diam nec elit volutpat suscipit.

John SmithCEO & Founder - Okler

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget risus porta, tincidunt turpis at, interdum tortor. Suspendisse potenti. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce ante tellus, convallis non consectetur sed, pharetra nec ex. Aliquam et tortor nisi. Duis mollis diam nec elit volutpat suscipit.

John SmithCEO & Founder - Okler

[/vc_column][/vc_row][vc_row wrap_container=”yes” animation_delay=”200″ css=”.vc_custom_1706279961807padding-top: 59px !important;padding-bottom: 40px !important;background-color: #eef4f2 !important;” conditional_render=”%5B%7B%22value_role%22%3A%22administrator%22%7D%5D” animation_type=”fadeIn”][vc_column][vc_custom_heading text=”- Our Team” font_container=”tag:h2|text_align:left|line_height:42px” google_fonts=”font_family:Playfair%20Display%3Aregular%2Citalic%2C700%2C700italic%2C900%2C900italic|font_style:700%20bold%20regular%3A700%3Anormal” css=”.vc_custom_1706216909034margin-bottom: 16px !important;”][porto_tb_posts post_type=”member” view=”slider” spacing=”20″ navigation=”” pagination=”yes” dots_pos=”custom-dots” dots_style=”dots-style-1″ dots_visible=”{“xl“:“{\“xl\“:\“``object“” builder_id=”384″ el_class=”custom-dots-style-1″ dots_pos_top=”“xl“:“-43“,“unit“:““,“xs“:““,“sm“:““,“md“:““,“lg“:““” dots_pos_right=”“xl“:“0“,“unit“:““,“xs“:““,“sm“:““,“md“:““,“lg“:““” dots_br_color=”#1e1e24″ dots_abr_color=”var(–porto-primary-color)”][vc_btn title=”VIEW ALL” style=”outline” shape=”square” size=”lg” align=”center” css=”.vc_custom_1706217655865margin-top: 30px !important;” skin=”primary” btn_fs=”0.8rem” link=”url:https%3A%2F%2Fwww.portotheme.com%2Fwordpress%2Fporto%2Fbusiness-consulting%2Fteam%2F|target:_blank” el_class=”font-weight-semibold” btn_px=”30px” btn_py=”12px”][/vc_column][/vc_row][vc_row wrap_container=”yes” content_placement=”middle” animation_delay=”200″ conditional_render=”%5B%7B%22value_role%22%3A%22administrator%22%7D%5D” css=”.vc_custom_1706279978112padding-top: 35px !important;padding-bottom: 20px !important;background-color: var(–porto-primary-color) !important;” animation_type=”fadeIn”][vc_column width=”1/2″ offset=”vc_col-md-7″ conditional_render=”%5B%7B%22value_role%22%3A%22administrator%22%7D%5D”]

[vc_custom_heading text=”- Are you looking for a” font_container=”tag:h2|font_size:1.76em|text_align:left|color:%23ffffff|line_height:1.2″ google_fonts=”font_family:Playfair%20Display%3Aregular%2Citalic%2C700%2C700italic%2C900%2C900italic|font_style:400%20regular%3A400%3Anormal” css=”.vc_custom_1706115246289margin-bottom: 2px !important;”][vc_custom_heading text=”Business Plan Consultant?” font_container=”tag:h2|font_size:2.2em|text_align:left|color:%23ffffff|line_height:1.2″ google_fonts=”font_family:Playfair%20Display%3Aregular%2Citalic%2C700%2C700italic%2C900%2C900italic|font_style:400%20regular%3A400%3Anormal” css=”.vc_custom_1706240388539margin-bottom: 0px !important;”][vc_custom_heading text=”Schedule your company strategy right session now” font_container=”tag:p|text_align:left|color:%23e6e6e6″ use_theme_fonts=”yes” el_class=”mb-0″]

[/vc_column][vc_column width=”1/2″ el_class=”text-md-end” conditional_render=”%5B%7B%22value_role%22%3A%22administrator%22%7D%5D” offset=”vc_col-md-5″ css=”.vc_custom_1706222120430margin-bottom: 10px !important;”]

[vc_column_text css=”.vc_custom_1706240426267border-left-width: 2px !important;padding-right: 9px !important;padding-left: 10px !important;border-left-color: #ffffff !important;border-left-style: solid !important;” el_class=”mb-0 text-start me-lg-3″]Call Us Now +001 1230 4567[/vc_column_text]

[vc_column_text css=”.vc_custom_1706240447075border-left-width: 2px !important;padding-left: 9px !important;border-left-color: #ffffff !important;border-left-style: solid !important;” el_class=”mb-0 text-start m-r-n-xs”]Email Us Now mail@example.com[/vc_column_text]

[/vc_column][/vc_row][vc_row wrap_container=”yes” animation_delay=”200″ css=”.vc_custom_1706279989369margin-top: 59px !important;margin-bottom: 44px !important;” el_class=”m-b-none” conditional_render=”%5B%7B%22value_role%22%3A%22administrator%22%7D%5D” animation_type=”fadeIn”][vc_column el_class=”m-b-none”][vc_custom_heading text=”- Our Blog” font_container=”tag:h2|text_align:left|line_height:42px” google_fonts=”font_family:Playfair%20Display%3Aregular%2Citalic%2C700%2C700italic%2C900%2C900italic|font_style:700%20bold%20regular%3A700%3Anormal” css=”.vc_custom_1706220792437margin-bottom: 16px !important;”][porto_tb_posts spacing=”0″ columns=”1″ count=”1″ builder_id=”751″][/vc_column][/vc_row]

[kampaproagency]

@import url(https://fonts.bunny.net/css?family=ibm-plex-sans:400,600); #_form_3_font-size:14px;line-height:1.6;font-family:arial, helvetica, sans-serif;margin:0#_form_3_ *outline:0._form_hidedisplay:none;visibility:hidden._form_showdisplay:block;visibility:visible#_form_3_._form-toptop:0#_form_3_._form-bottombottom:0#_form_3_._form-leftleft:0#_form_3_._form-rightright:0#_form_3_ input[type="text"],#_form_3_ input[type="tel"],#_form_3_ input[type="date"],#_form_3_ textareapadding:6px;height:auto;border:#979797 1px solid;border-radius:4px;color:#000000 !important;font-size:14px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box#_form_3_ textarearesize:none#_form_3_ ._submit-webkit-appearance:none;cursor:pointer;font-family:arial, sans-serif;font-size:14px;text-align:center;background:#004CFF !important;border:0 !important;-moz-border-radius:4px !important;-webkit-border-radius:4px !important;border-radius:4px !important;color:#FFFFFF !important;padding:10px !important#_form_3_ ._submit:disabledcursor:not-allowed;opacity:0.4#_form_3_ ._submit.processingposition:relative#_form_3_ ._submit.processing::beforecontent:"";width:1em;height:1em;position:absolute;z-index:1;top:50%;left:50%;border:double 3px transparent;border-radius:50%;background-image:linear-gradient(#004CFF, #004CFF), conic-gradient(#004CFF, #FFFFFF);background-origin:border-box;background-clip:content-box, border-box;animation:1200ms ease 0s infinite normal none running _spin#_form_3_ ._submit.processing::aftercontent:"";position:absolute;top:0;bottom:0;left:0;right:0;background:#004CFF !important;border:0 !important;-moz-border-radius:4px !important;-webkit-border-radius:4px !important;border-radius:4px !important;color:#FFFFFF !important;padding:10px !important@keyframes _spin0%transform:translate(-50%, -50%) rotate(90deg)100%transform:translate(-50%, -50%) rotate(450deg)#_form_3_ ._close-iconcursor:pointer;background-image:url("https://d226aj4ao1t61q.cloudfront.net/esfkyjh1u_forms-close-dark.png");background-repeat:no-repeat;background-size:14.2px 14.2px;position:absolute;display:block;top:11px;right:9px;overflow:hidden;width:16.2px;height:16.2px#_form_3_ ._close-icon:beforeposition:relative#_form_3_ ._form-bodymargin-bottom:30px#_form_3_ ._form-image-leftwidth:150px;float:left#_form_3_ ._form-content-rightmargin-left:164px#_form_3_ ._form-brandingcolor:#fff;font-size:10px;clear:both;text-align:left;margin-top:30px;font-weight:100#_form_3_ ._form-branding ._logodisplay:block;width:130px;height:14px;margin-top:6px;background-image:url("https://d226aj4ao1t61q.cloudfront.net/hh9ujqgv5_aclogo_li.png");background-size:130px auto;background-repeat:no-repeat#_form_3_ .form-sr-onlyposition:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0#_form_3_ ._form-label,#_form_3_ ._form_element ._form-labelfont-weight:bold;margin-bottom:5px;display:block#_form_3_._dark ._form-brandingcolor:#333#_form_3_._dark ._form-branding ._logobackground-image:url("https://d226aj4ao1t61q.cloudfront.net/jftq2c8s_aclogo_dk.png")#_form_3_ ._form_elementposition:relative;margin-bottom:10px;font-size:0;max-width:100%#_form_3_ ._form_element *font-size:14px#_form_3_ ._form_element._clearclear:both;width:100%;float:none#_form_3_ ._form_element._clear:afterclear:left#_form_3_ ._form_element input[type="text"],#_form_3_ ._form_element input[type="date"],#_form_3_ ._form_element select,#_form_3_ ._form_element textarea:not(.g-recaptcha-response)display:block;width:100%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;font-family:inherit#_form_3_ ._field-wrapperposition:relative#_form_3_ ._inline-stylefloat:left#_form_3_ ._inline-style input[type="text"]width:150px#_form_3_ ._inline-style:not(._clear)+._inline-style:not(._clear)margin-left:20px#_form_3_ ._form_element img._form-imagemax-width:100%#_form_3_ ._form_element ._form-fieldsetborder:0;padding:0.01em 0 0 0;margin:0;min-width:0#_form_3_ ._clear-elementclear:left#_form_3_ .

_full_widthwidth:100%#_form_3_ ._form_full_fielddisplay:block;width:100%;margin-bottom:10px#_form_3_ input[type="text"]._has_error,#_form_3_ textarea._has_errorborder:#F37C7B 1px solid#_form_3_ input[type="checkbox"]._has_erroroutline:#F37C7B 1px solid#_form_3_ ._errordisplay:block;position:absolute;font-size:14px;z-index:10000001#_form_3_ ._error._abovepadding-bottom:4px;bottom:39px;right:0#_form_3_ ._error._belowpadding-top:8px;top:100%;right:0#_form_3_ ._error._above ._error-arrowbottom:-4px;right:15px;border-left:8px solid transparent;border-right:8px solid transparent;border-top:8px solid #FFDDDD#_form_3_ ._error._below ._error-arrowtop:0;right:15px;border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:8px solid #FFDDDD#_form_3_ ._error-innerpadding:12px 12px 12px 36px;background-color:#FFDDDD;background-image:url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8ZM9 3V9H7V3H9ZM9 13V11H7V13H9Z' fill='%23CA0000'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:12px center;font-size:14px;font-family:arial, sans-serif;font-weight:600;line-height:16px;color:#000;text-align:center;text-decoration:none;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;box-shadow:0px 1px 4px rgba(31, 33, 41, 0.298295)@media only screen and (max-width:319px)#_form_3_ ._error-innerpadding:7px 7px 7px 25px;font-size:12px;line-height:12px;background-position:4px center;max-width:100px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis#_form_3_ ._error-inner._form_errormargin-bottom:5px;text-align:left#_form_3_ ._button-wrapper ._error-inner._form_errorposition:static#_form_3_ ._error-inner._no_arrowmargin-bottom:10px#_form_3_ ._error-arrowposition:absolute;width:0;height:0#_form_3_ ._error-htmlmargin-bottom:10px.pika-singlez-index:10000001 !important#_form_3_ input[type="text"].datetime_datewidth:69%;display:inline#_form_3_ select.datetime_timewidth:29%;display:inline;height:32px#_form_3_ input[type="date"].datetime_datewidth:69%;display:inline-flex#_form_3_ input[type="time"].datetime_timewidth:29%;display:inline-flex@media (min-width:320px) and (max-width:667px)::-webkit-scrollbardisplay:none#_form_3_margin:0;width:100%;min-width:100%;max-width:100%;box-sizing:border-box#_form_3_ *-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;font-size:1em#_form_3_ ._form-contentmargin:0;width:100%#_form_3_ ._form-innerdisplay:block;min-width:100%#_form_3_ ._form-title,#_form_3_ ._inline-stylemargin-top:0;margin-right:0;margin-left:0#_form_3_ ._form-titlefont-size:1.2em#_form_3_ ._form_elementmargin:0 0 20px;padding:0;width:100%#_form_3_ ._form-element,#_form_3_ ._inline-style,#_form_3_ input[type="text"],#_form_3_ label,#_form_3_ p,#_form_3_ textarea:not(.g-recaptcha-response)float:none;display:block;width:100%#_form_3_ ._row._checkbox-radio labeldisplay:inline#_form_3_ ._row,#_form_3_ p,#_form_3_ labelmargin-bottom:0.7em;width:100%#_form_3_ ._row input[type="checkbox"],#_form_3_ ._row input[type="radio"]margin:0 !important;vertical-align:middle !important#_form_3_ ._row input[type="checkbox"]+span labeldisplay:inline#_form_3_ ._row span labelmargin:0 !important;width:initial !important;vertical-align:middle !important#_form_3_ ._form-imagemax-width:100%;height:auto !important#_form_3_ input[type="text"]padding-left:10px;padding-right:10px;font-size:16px;line-height:1.3em;-webkit-appearance:none#_form_3_ input[type="radio"],#_form_3_ input[type="checkbox"]display:inline-block;width:1.3em;height:1.3em;font-size:1em;margin:0 0.3em 0 0;vertical-align:baseline#_form_3_ button[type="submit"]padding:20px;font-size:1.5em#_form_3_ ._inline-stylemargin:20px 0 0 !important#_form_3_ .sms_consent_checkboxoverflow:auto#_form_3_ .sms_consent_checkbox input[type="checkbox"]float:left;margin:5px 10px 10px 0#_form_3_ .

sms_consent_checkbox .sms_consent_messagedisplay:inline;width:95%;float:left;text-align:left;margin-bottom:10px#_form_3_ .sms_consent_checkbox .sms_consent_message.sms_consent_miniwidth:90%#_form_3_position:relative;text-align:left;margin:25px auto 0;padding-top:20px;padding-right:20px;padding-bottom:20px;padding-left:20px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;background:#FFFFFF !important;border:0px solid #B0B0B0 !important;max-width:500px;-moz-border-radius:0px !important;-webkit-border-radius:0px !important;border-radius:0px !important;color:#000000#_form_3_._inline-form,#_form_3_._inline-form ._form-contentfont-family:"IBM Plex Sans", Helvetica, sans-serif#_form_3_._inline-form ._row span,#_form_3_._inline-form ._row labelfont-family:"IBM Plex Sans", Helvetica, sans-serif;font-size:14px;font-weight:400;line-height:1.6em#_form_3__inlineform input[type="text"],#_form_3__inlineform input[type="date"],#_form_3__inlineform input[type="tel"],#_form_3__inlineform select,#_form_3__inlineform textarea:not(.g-recaptcha-response)font-family:"IBM Plex Sans", Helvetica, sans-serif;font-size:14px;font-weight:400;font-color:#000000;line-height:1.6em#_form_3_._inline-form ._html-code *:not(h1, h2, h3, h4, h5, h6),#_form_3_._inline-form ._form-thank-youfont-family:"IBM Plex Sans", Helvetica, sans-serif#_form_3_._inline-form ._form-label,#_form_3_._inline-form ._form-emailidentifier,#_form_3_._inline-form ._form-checkbox-option-labelfont-family:"IBM Plex Sans", Helvetica, sans-serif;font-size:14px;font-weight:700;line-height:1.6em#_form_3_._inline-form ._submitmargin-top:12px;font-family:"IBM Plex Sans", Helvetica, sans-serif#_form_3_._inline-form ._html-code h1,#_form_3_._inline-form ._html-code h2,#_form_3_._inline-form ._html-code h3,#_form_3_._inline-form ._html-code h4,#_form_3_._inline-form ._html-code h5,#_form_3_._inline-form ._html-code h6,#_form_3_._inline-form ._form-titlefont-size:22px;line-height:normal;font-weight:600;margin-bottom:0#_form_3_._inline-form ._form-brandingfont-family:"IBM Plex Sans", Helvetica, sans-serif;font-size:13px;font-weight:100;font-style:normal;text-decoration:none#_form_3_:before,#_form_3_:aftercontent:" ";display:table#_form_3_:afterclear:both#_form_3_._inline-stylewidth:auto;display:inline-block#_form_3_._inline-style input[type="text"],#_form_3_._inline-style input[type="date"]padding:10px 12px#_form_3_._inline-style button._inline-styleposition:relative;top:27px#_form_3_._inline-style pmargin:0#_form_3_._inline-style ._button-wrapperposition:relative;margin:16px 12.5px 0 20px#_form_3_ ._form-thank-youposition:relative;left:0;right:0;text-align:center;font-size:18px#_form_3_ ._form-pc-confirmation ._submitmargin-top:16px@media (min-width:320px) and (max-width:667px)#_form_3_._inline-form._inline-style ._inline-style._button-wrappermargin-top:20px !important;margin-left:0 !important#_form_3_ .iti.iti--allow-dropdown.iti--separate-dial-codewidth:100%#_form_3_ .iti inputwidth:100%;height:32px;border:#979797 1px solid;border-radius:4px#_form_3_ .iti--separate-dial-code .iti__selected-flagbackground-color:#FFFFFF;border-radius:4px#_form_3_ .iti--separate-dial-code .iti__selected-flag:hoverbackground-color:rgba(0, 0, 0, 0.05)#_form_3_ .iti__country-listborder-radius:4px;margin-top:4px;min-width:460px#_form_3_ .iti__country-list--dropupmargin-bottom:4px#_form_3_ .phone-error-hiddendisplay:none#_form_3_ .phone-errorcolor:#E40E49#_form_3_ .phone-input-errorborder:1px solid #E40E49 !important#_form_3_._inline-form ._form-content ._form-list-subscriptions-field fieldsetmargin:0;margin-bottom:1.1428571429em;border:none;padding:0#_form_3_._inline-form ._form-content ._form-list-subscriptions-field fieldset:last-childmargin-bottom:0#_form_3_._inline-form ._form-content ._form-list-subscriptions-field legendmargin-bottom:1.1428571429em#_form_3_._inline-form ._form-content ._form-list-subscriptions-field labeldisplay:flex;align-items:flex-start;justify-content:flex-start;margin-bottom:0.

8571428571em#_form_3_._inline-form ._form-content ._form-list-subscriptions-field label:last-childmargin-bottom:0#_form_3_._inline-form ._form-content ._form-list-subscriptions-field inputmargin:0;margin-right:8px#_form_3_._inline-form ._form-content ._form-list-subscriptions-field ._form-checkbox-option-labeldisplay:block;font-weight:400;margin-top:-4px#_form_3_._inline-form ._form-content ._form-list-subscriptions-field ._form-checkbox-option-label-with-descriptiondisplay:block;font-weight:700;margin-top:-4px#_form_3_._inline-form ._form-content ._form-list-subscriptions-field ._form-checkbox-option-descriptionmargin:0;font-size:0.8571428571em#_form_3_._inline-form ._form-content ._form-list-subscriptions-field ._form-subscriptions-unsubscribe-all-descriptionline-height:normal;margin-top:-2px Cuenta* Correo electrónico* Número de empleados 45658 26 - 50 51 - 100 101 - 500 501 - 1000 Más de 1000 Ingresos anuales Menos de 100.000 100.000 - 500.000 501.000 - 1M 1M - 5M 6M - 10M Más de 10.000 Industrial/Vertical Contabilidad/Financiero Consultoría/Agencia Bloguero/Autor E-commerce/ventas al por menor Entretenimiento/Eventos Fitness/Nutrición Cuidado sanitario Medios/Publicidad Sin ánimo de lucro Formaciones online/Educación Mercado inmobiliario Software Viajes/Hospitalidad Otro ¿Cuál es tu nivel de ingresos? De 0 a 500 euros De 501 a 1.000 euros Más de 1.000 euros Enviar window.cfields = []; window._show_thank_you = function(id, message, trackcmp_url, email) var form = document.getElementById('_form_' + id + '_'), thank_you = form.querySelector('._form-thank-you'); form.querySelector('._form-content').style.display = 'none'; thank_you.innerHTML = message; thank_you.style.display = 'block'; const vgoAlias = typeof visitorGlobalObjectAlias === 'undefined' ? 'vgo' : visitorGlobalObjectAlias; var visitorObject = window[vgoAlias]; if (email && typeof visitorObject !== 'undefined') visitorObject('setEmail', email); visitorObject('update'); else if (typeof(trackcmp_url) != 'undefined' && trackcmp_url) // Site tracking URL to use after inline form submission. _load_script(trackcmp_url); if (typeof window._form_callback !== 'undefined') window._form_callback(id);

; window._show_unsubscribe = function(id, message, trackcmp_url, email) var form = document.getElementById('_form_' + id + '_'), unsub = form.querySelector('._form-thank-you'); var branding = form.querySelector('._form-branding'); if (branding) branding.style.display = 'none'; form.querySelector('._form-content').style.display = 'none'; unsub.style.display = 'block'; form.insertAdjacentHTML('afterend', message) const vgoAlias = typeof visitorGlobalObjectAlias === 'undefined' ? 'vgo' : visitorGlobalObjectAlias; var visitorObject = window[vgoAlias]; if (email && typeof visitorObject !== 'undefined') visitorObject('setEmail', email); visitorObject('update'); else if (typeof(trackcmp_url) != 'undefined' && trackcmp_url) // Site tracking URL to use after inline form submission. _load_script(trackcmp_url); if (typeof window._form_callback !== 'undefined') window._form_callback(id); ; window._show_error = function(id, message, html) var form = document.getElementById('_form_' + id + '_'), err = document.createElement('div'), button = form.querySelector('button'), old_error = form.querySelector('._form_error'); if (old_error) old_error.parentNode.removeChild(old_error); err.innerHTML = message; err.className = '_error-inner _form_error _no_arrow'; var wrapper = document.createElement('div'); wrapper.className = '_form-inner'; wrapper.appendChild(err); button.parentNode.insertBefore(wrapper, button); var submitButton = form.querySelector('[id^="_form"][id$="_submit"]'); submitButton.disabled = false; submitButton.classList.remove('processing'); if (html) var div = document.createElement('div'); div.className = '_error-html'; div.innerHTML = html; err.appendChild(div); ; window._show_pc_confirmation = function(id, header, detail, show, email) var form = document.getElementById('_form_' + id + '_'), pc_confirmation = form.querySelector('._form-pc-confirmation'); if (pc_confirmation.style.display === 'none') form.querySelector('._form-content').style.display = 'none'; pc_confirmation.innerHTML = "" + header + "" + "" + detail + "" + "Administrar preferencias"; pc_confirmation.style.display = 'block'; var mp = document.querySelector('input[name="mp"]'); mp.value = '0'; else form.querySelector('._form-content').style.display = 'inline'; pc_confirmation.style.display = 'none'; var hideButton = document.getElementById('hideButton'); // Add event listener to the button hideButton.addEventListener('click', function() var submitButton = document.querySelector('#_form_3_submit'); submitButton.disabled = false; submitButton.classList.remove('processing'); var mp = document.querySelector('input[name="mp"]'); mp.value = '1'; const cacheBuster = new URL(window.location.href); cacheBuster.searchParams.set('v', new Date().getTime()); window.location.href = cacheBuster.toString(); ); const vgoAlias = typeof visitorGlobalObjectAlias === 'undefined' ? 'vgo' : visitorGlobalObjectAlias; var visitorObject = window[vgoAlias]; if (email && typeof visitorObject !== 'undefined') visitorObject('setEmail', email); visitorObject('update'); else if (typeof(trackcmp_url) != 'undefined' && trackcmp_url) // Site tracking URL to use after inline form submission. _load_script(trackcmp_url); if (typeof window._form_callback !== 'undefined') window._form_callback(id); ; window._load_script = function(url, callback, isSubmit) var head = document.querySelector('head'), script = document.createElement('script'), r = false; var submitButton = document.querySelector('#_form_3_submit'); script.charset = 'utf-8'; script.src = url; if (callback)

script.onload = script.onreadystatechange = function() this.readyState == 'complete')) r = true; callback(); ; script.onerror = function() if (isSubmit) if (script.src.length > 10000) _show_error("3", "Lo sentimos, ocurrió un error con el envío. Acorta tus respuestas y vuelve a intentarlo."); else _show_error("3", "Lo sentimos, ocurrió un error con el envío. Vuelve a intentarlo."); submitButton.disabled = false; submitButton.classList.remove('processing'); head.appendChild(script); ; (function() if (window.location.search.search("excludeform") !== -1) return false; var getCookie = function(name) var match = document.cookie.match(new RegExp('(^ var setCookie = function(name, value) var now = new Date(); var time = now.getTime(); var expireTime = time + 1000 * 60 * 60 * 24 * 365; now.setTime(expireTime); document.cookie = name + '=' + value + '; expires=' + now + ';path=/; Secure; SameSite=Lax;'; var addEvent = function(element, event, func) if (element.addEventListener) element.addEventListener(event, func); else var oldFunc = element['on' + event]; element['on' + event] = function() oldFunc.apply(this, arguments); func.apply(this, arguments); ; var _removed = false; var form_to_submit = document.getElementById('_form_3_'); var allInputs = form_to_submit.querySelectorAll('input, select, textarea'), tooltips = [], submitted = false; var getUrlParam = function(name) if (name.toLowerCase() !== 'email') false; // email is a special case because a plus is valid in the email address var qString = window.location.search; if (!qString) return false; var parameters = qString.substr(1).split('&'); for (var i = 0; i < parameters.length; i++) var parameter = parameters[i].split('='); if (parameter[0].toLowerCase() === 'email') return parameter[1] === undefined ? true : decodeURIComponent(parameter[1]); return false; ; var acctDateFormat = "%m/%d/%Y"; var getNormalizedDate = function(date, acctFormat) %e).*%m/gi) !== null) return decodedDate.replace(/(\d2).*(\d2).*(\d4)/g, '$3-$2-$1'); else if (Date.parse(decodedDate)) var dateObj = new Date(decodedDate); var year = dateObj.getFullYear(); var month = dateObj.getMonth() + 1; var day = dateObj.getDate(); return `$year-$month < 10 ? `0$month` : month-$day < 10 ? `0$day` : day`; return false; ; var getNormalizedTime = function(time) var hour, minutes; var decodedTime = decodeURIComponent(time); var timeParts = Array.from(decodedTime.matchAll(/(\d1,2):(\d1,2)\W*([AaPp][Mm])?/gm))[0]; if (timeParts[3]) // 12 hour format var isPM = timeParts[3].toLowerCase() === 'pm'; if (isPM) hour = parseInt(timeParts[1]) === 12 ? '12' : `$parseInt(timeParts[1]) + 12`; else hour = parseInt(timeParts[1]) === 12 ? '0' : timeParts[1]; else // 24 hour format hour = timeParts[1]; var normalizedHour = parseInt(hour) < 10 ? `0$parseInt(hour)` : hour; var minutes = timeParts[2]; return `$normalizedHour:$minutes`; ; for (var i = 0; i < allInputs.length; i++) var regexStr = "field\\[(\\d+)\\]"; var results = new RegExp(regexStr).exec(allInputs[i].name); if (results != undefined) allInputs[i].dataset.name = allInputs[i].name.match(/\[time\]$/)

? `$window.cfields[results[1]]_time` : window.cfields[results[1]]; else allInputs[i].dataset.name = allInputs[i].name; var fieldVal = getUrlParam(allInputs[i].dataset.name); if (fieldVal) var remove_tooltips = function() for (var i = 0; i < tooltips.length; i++) tooltips[i].tip.parentNode.removeChild(tooltips[i].tip); tooltips = []; ; var remove_tooltip = function(elem) for (var i = 0; i < tooltips.length; i++) if (tooltips[i].elem === elem) tooltips[i].tip.parentNode.removeChild(tooltips[i].tip); tooltips.splice(i, 1); return; ; var create_tooltip = function(elem, text) var tooltip = document.createElement('div'), arrow = document.createElement('div'), inner = document.createElement('div'), new_tooltip = ; if (elem.type != 'radio' && elem.type != 'checkbox') tooltip.className = '_error'; arrow.className = '_error-arrow'; inner.className = '_error-inner'; inner.innerHTML = text; tooltip.appendChild(arrow); tooltip.appendChild(inner); elem.parentNode.appendChild(tooltip); else tooltip.className = '_error-inner _no_arrow'; tooltip.innerHTML = text; elem.parentNode.insertBefore(tooltip, elem); new_tooltip.no_arrow = true; new_tooltip.tip = tooltip; new_tooltip.elem = elem; tooltips.push(new_tooltip); return new_tooltip; ; var resize_tooltip = function(tooltip) ; var resize_tooltips = function() if (_removed) return; for (var i = 0; i < tooltips.length; i++) if (!tooltips[i].no_arrow) resize_tooltip(tooltips[i]); ; var validate_field = function(elem, remove) ; var needs_validate = function(el) if(el.getAttribute('required') !== null) return true if(el.name === 'email' && el.value !== "") return true if((el.id == 'field[]' ; var validate_form = function(e) var err = form_to_submit.querySelector('._form_error'), no_error = true; if (!submitted) submitted = true; for (var i = 0, len = allInputs.length; i < len; i++) var input = allInputs[i]; if (needs_validate(input)) input.type == 'time') addEvent(input, 'blur', function() this.value = this.value.trim(); validate_field(this, true); ); addEvent(input, 'input', function() validate_field(this, true); ); else if (input.type == 'radio' remove_tooltips(); for (var i = 0, len = allInputs.length; i < len; i++) var elem = allInputs[i]; if (needs_validate(elem)) if (elem.tagName.toLowerCase() !== "select") elem.value = elem.value.trim(); validate_field(elem) ? true : no_error = false; if (!no_error && e) e.preventDefault(); resize_tooltips(); return no_error; ; addEvent(window, 'resize', resize_tooltips); addEvent(window, 'scroll', resize_tooltips); var hidePhoneInputError = function(inputId) var errorMessage = document.getElementById("error-msg-" + inputId); var input = document.getElementById(inputId); errorMessage.classList.remove("phone-error"); errorMessage.classList.add("phone-error-hidden"); input.classList.remove("phone-input-error"); ; var initializePhoneInput = function(input, defaultCountry)

return window.intlTelInput(input, utilsScript: "https://unpkg.com/intl-tel-input@17.0.18/build/js/utils.js", autoHideDialCode: false, separateDialCode: true, initialCountry: defaultCountry, preferredCountries: [] ); var setPhoneInputEventListeners = function(inputId, input, iti) input.addEventListener('blur', function() var errorMessage = document.getElementById("error-msg-" + inputId); if (input.value.trim()) if (iti.isValidNumber()) iti.setNumber(iti.getNumber()); if (errorMessage.classList.contains("phone-error")) hidePhoneInputError(inputId); else showPhoneInputError(inputId) else if (errorMessage.classList.contains("phone-error")) hidePhoneInputError(inputId); ); input.addEventListener("countrychange", function() iti.setNumber(''); ); input.addEventListener("keydown", function(e) var charCode = (e.which) ? e.which : e.keyCode; if (charCode > 31 && (charCode < 48 ); ; var showPhoneInputError = function(inputId) var errorMessage = document.getElementById("error-msg-" + inputId); var input = document.getElementById(inputId); errorMessage.classList.add("phone-error"); errorMessage.classList.remove("phone-error-hidden"); input.classList.add("phone-input-error"); ; var _form_serialize = function(form); const formSupportsPost = false; var form_submit = function(e) e.preventDefault(); if (validate_form()) // use this trick to get the submit button & disable it using plain javascript var submitButton = e.target.querySelector('#_form_3_submit'); submitButton.disabled = true; submitButton.classList.add('processing'); var serialized = _form_serialize( document.getElementById('_form_3_') ).replace(/%0A/g, '\\n'); var err = form_to_submit.querySelector('._form_error'); err ? err.parentNode.removeChild(err) : false; async function submitForm() var formData = new FormData(); const searchParams = new URLSearchParams(serialized); searchParams.forEach((value, key) => if (key !== 'hideButton') formData.append(key, value); //formData.append(key, value); ); let request = headers: "Accept": "application/json" , body: formData, method: "POST" ; let pageUrlParams = new URLSearchParams(window.location.search); if (pageUrlParams.has('t')) request.headers.Authorization = 'Bearer ' + pageUrlParams.get('t'); const response = await fetch('https://kampa5569.activehosted.com/proc.php?jsonp=true', request); return response.json(); if (formSupportsPost) submitForm().then((data) => eval(data.js); ); else _load_script('https://kampa5569.activehosted.com/proc.php?' + serialized + '&jsonp=true', null, true); return false; ; addEvent(form_to_submit, 'submit', form_submit); )();