How to add Codepen HTML and CSS to my site

phxllip
Excursionist
33 0 4

Hey there i want to add https://codepen.io/JacobStone420/pen/dyEvl/ between my slideshow and first image on my site but not sure how to, can someone please assist me. Thank

 Site: photifypresets.com

Password: photify

Replies 4 (4)

Uncle_ben
Shopify Partner
51 10 17

Hello @phxllip 

Thanks for URL.
 

Add this code

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

 

 

Iam {
  padding: 2em 5em;
  font: normal 40px/50px Montserrat, sans-serif;
  color: #999;
}
.Iam p {
  height: 50px;
  float: left;
  margin-right: 0.3em;
}
.Iam b {
  float: left;
  overflow: hidden;
  position: relative;
  height: 50px;
  top: 40px;
}
.Iam .innerIam {
  display: inline-block;
  color: #e74c3c;
  position: relative;
  white-space: nowrap;
  top: 0;
  left: 0;


/*animation*/
-webkit-animation:move 5s;
   -moz-animation:move 5s;
    -ms-animation:move 5s;
     -o-animation:move 5s;
        animation:move 5s;
/*animation-iteration-count*/
-webkit-animation-iteration-count:infinite;
   -moz-animation-iteration-count:infinite;
    -ms-animation-iteration-count:infinite;
     -o-animation-iteration-count:infinite;
        animation-iteration-count:infinite;
/*animation-delay*/
-webkit-animation-delay:1s;
   -moz-animation-delay:1s;
    -ms-animation-delay:1s;
     -o-animation-delay:1s;
        animation-delay:1s;
}
@keyframes move{
0%  { top: 0px; }
20% { top: -50px; }
40% { top: -100px; }
60% { top: -150px; }
80% { top: -200px; }
}

@-webkit-keyframes move {
    0%  { top: 0px; }
    20% { top: -50px; }
    40% { top: -100px; }
    60% { top: -150px; }
    80% { top: -200px; }
}
@-moz-keyframes move {
    0%  { top: 0px; }
    20% { top: -50px; }
    40% { top: -100px; }
    60% { top: -150px; }
    80% { top: -200px; }
}
@-o-keyframes move {
    0%  { top: 0px; }
    20% { top: -50px; }
    40% { top: -100px; }
    60% { top: -150px; }
    80% { top: -200px; }
}
@keyframes move {
    0%  { top: 0px; }
    20% { top: -50px; }
    40% { top: -100px; }
    60% { top: -150px; }
    80% { top: -200px; }
}

 

 

2. sections->/slideshow.liquid->paste below code before " {% schema %} " 

 

 

<div class="Iam">

<p>This is</p>
<b>
  <div class="innerIam">
    leggera<br /> 
    a theme in progress<br />
    built on bootstrap<br />
    how I learn stuff<br />
    how we do it
    </div>
</b>

 

 

 

keep me posted if that corrects your problem 
Belgacem
Belgacem Ben ltaif
Web consultant /Shopify Expert/ Founder @Funkydev.io
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
https://benltaif.dev
https://funkydev.io/
phxllip
Excursionist
33 0 4

Hey @Uncle_ben  this didn't work i manage to get it on my homepage by creating a custom css and inserting it into my theme.liquid between the <head> tags and then inserting the html as text in a banner section. But it doesn't align properly as it should both on desktop and mobile and padding is wide. Can you help me please. Examples of code i used and pics below.

.Iam {
  padding: 2em 4em 5em;
  font: normal 40px/50px Montserrat, sans-serif;
  color: #999;
}
.Iam p {
  height: 50px;
  float: left;
  margin-right: 0.3em;
}
.Iam b {
  float: left;
  overflow: hidden;
  position: relative;
  height: 50px;
  top: 40px;
}
.Iam .innerIam {
  display: inline;
  color: #487177;
  max-width:100%;
  align:center;
  position: relative;
   top: 0;
  left: 0;


/*animation*/
-webkit-animation:move 5s;
   -moz-animation:move 5s;
    -ms-animation:move 5s;
     -o-animation:move 5s;
        animation:move 5s;
/*animation-iteration-count*/
-webkit-animation-iteration-count:infinite;
   -moz-animation-iteration-count:infinite;
    -ms-animation-iteration-count:infinite;
     -o-animation-iteration-count:infinite;
        animation-iteration-count:infinite;
/*animation-delay*/
-webkit-animation-delay:1s;
   -moz-animation-delay:1s;
    -ms-animation-delay:1s;
     -o-animation-delay:1s;
        animation-delay:1s;
}
@keyframes move{
0%  { top: 0px; }
20% { top: -50px; }
40% { top: -100px; }
60% { top: -150px; }
80% { top: -200px; }
}

@-webkit-keyframes move {
    0%  { top: 0px; }
    20% { top: -50px; }
    40% { top: -100px; }
    60% { top: -150px; }
    80% { top: -200px; }
}
@-moz-keyframes move {
    0%  { top: 0px; }
    20% { top: -50px; }
    40% { top: -100px; }
    60% { top: -150px; }
    80% { top: -200px; }
}
@-o-keyframes move {
    0%  { top: 0px; }
    20% { top: -50px; }
    40% { top: -100px; }
    60% { top: -150px; }
    80% { top: -200px; }
}
@keyframes move {
    0%  { top: 0px; }
    20% { top: -50px; }
    40% { top: -100px; }
    60% { top: -150px; }
    80% { top: -200px; }
}

 

  <link rel="stylesheet" type="text/css" href="style.css">
    <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">



<div class="Iam">

<p>This is</p>
<b>
  <div class="innerIam">
    leggera<br> 
    a theme in progress<br>
    built on bootstrap<br>
    how I learn stuff<br>
    how we do it
    </div>
</b>

</div>

mobile.png

 

desktop.png

 

Uncle_ben
Shopify Partner
51 10 17

hello @phxllip 

It can be done by doing some code customization. please send me a personal message and we can discuss what you'd like

Belgacem Ben ltaif
Web consultant /Shopify Expert/ Founder @Funkydev.io
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
https://benltaif.dev
https://funkydev.io/
Ducani
Visitor
1 0 0

Hey, did you find a solution to insert that ? i would like to use this effect also. 

cordially