SPLASH PAGE CODE

Mspencer1
New Member
5 0 0

Hi 

Is it possible to add this code https://github.com/harrystech/prelaunchr to my shopify account and they alter it to suit my brand? 

0 Likes
khilan
Tourist
56 2 10

hi @Mspencer1

yes it is possible .

thank yo so much !

0 Likes
Mspencer1
New Member
5 0 0
What would be the best way to go about this?

0 Likes
khilan
Tourist
56 2 10

hi @Mspencer1 

i hope its work .

  1. Decide what you want your splash page to display to new visitors. ...
  2. Use a basic text editor like Notepad if you don't have a Web design program. ...
  3. Create at least one link to direct visitors to what is now your current home page, using "index2.html" as the link. ...
  4. Save the file with the name "index 

thank you so much !

0 Likes
Mspencer1
New Member
5 0 0
Sorry I don't understand. Did you see the code I put in the initial
message?
0 Likes
khilan
Tourist
56 2 10

hi @Mspencer1 

pls add this code in js code.

// Get elements
var row = document.getElementById("row");
var heading = document.getElementById("heading");
var strapline = document.getElementById("strapline");

// Fonts array
var fonts = ['Droid-Sans','Arvo','Corben','Lobster','Droid-Serif','Raleway','Goudy-Bookletter-1911','Abril-Fatface','Yanone-Kaffeesatz','Hammersmith-One','Lato','PT-Sans-Narrow','Open-Sans','Open-Sans-Condensed','Old-Standard-TT','Merriweather','Montserrat','Roboto','Titillium-Web','Karla','Oswald','Glegoo','Vollkorn','Courgette','Abel','Sniglet','Ubuntu','PT-Sans','PT-Serif','PT-Mono','Times-New-Roman','Tahoma','Trebuchet','Verdana','Palatino','Impact','Helvetica','Myriad-Pro','Georgia','Futura','Courier-New','Arial'];

// Randomise styles
var randHeading = fonts[Math.floor(Math.random() * fonts.length)];
var randStrapline = fonts[Math.floor(Math.random() * fonts.length)];
var randImage = "https://unsplash.it/1200/800/?image=" + Math.floor(100 + Math.random() * 900);


// Apply random styles
row.style.color = randomColor({luminosity: 'light'});
row.style.backgroundColor = randomColor({luminosity: 'dark'});
row.style.backgroundImage = "url(" + randImage + ")";

heading.setAttribute("class", randHeading);
strapline.setAttribute("class", randStrapline);

0 Likes
khilan
Tourist
56 2 10

hi @Mspencer1 

this is html code.

<div id="row">
<h1 id="heading" contenteditable="true">Hello world</h1>
<h4 id="strapline" contenteditable="true">Welcome to my new website</h4>
<span><a class="button" href="https://daviddarnes.github.io/splashed" target="_blank">full demo</a></span>
</div>

0 Likes
khilan
Tourist
56 2 10

hi @Mspencer1 

this is css code.

 
/* Example row */
#row {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
-webkit-font-smoothing: antialiased;
background-blend-mode: multiply;
background-size: cover;
background-position: center;
}
#heading {
font-weight: 600;
font-size: 4rem;
margin-bottom: 0;
outline: none;
}
#strapline {
font-weight: 300;
font-size: 1.4rem;
margin-top: .4rem;
outline: none;
}
 
.button {
font-size: 1rem;
padding: .5rem 1.1rem .4rem;
border: 1px solid;
border-radius: 1rem;
background: none;
color: inherit;
display: inline-block;
text-decoration: none;
}
 
 
 
/* Fonts */
.Droid-Sans {
  font-family: "Droid Sans", Helvetica, Arial, sans-serif;
}
 
.Arvo {
font-family: "Arvo", Georgia, serif;
}
 
.Corben {
font-family: "Corben", Georgia, serif;
}
 
.Lobster {
font-family: "Lobster", Verdana, sans-serif;
}
 
.Droid-Serif {
font-family: "Droid Serif", Georgia, serif;
}
 
.Raleway {
font-family: "Raleway", "Lucida Grande", Helvetica, sans-serif;
}
 
.Goudy-Bookletter-1911 {
font-family: "Goudy Bookletter 1911", "Times New Roman", Georgia, serif;
}
 
.Abril-Fatface {
font-family: "Abril Fatface", "Palatino Linotype", serif;
}
 
.Yanone-Kaffeesatz {
font-family: "Yanone Kaffeesatz", Georgia, serif;
}
 
.Hammersmith-One {
font-family: "Hammersmith One", Tahoma, Verdana, sans-serif;
}
 
.Lato {
font-family: "Lato", Geneva, Tahoma, sans-serif;
}
 
.PT-Sans-Narrow {
font-family: "PT Sans Narrow", Arial, sans-serif;
}
 
.Open-Sans {
font-family: "Open Sans", Helvetica, Verdana, sans-serif;
}
 
.Open-Sans-Condensed {
font-family: "Open Sans Condensed", Arial, Helvetica, sans-serif;
}
 
.Old-Standard-TT {
font-family: "Old Standard TT", "Book Antiqua", "Palatino Linotype", serif;
}
 
.Merriweather {
font-family: "Merriweather", Georgia, serif;
}
 
.Montserrat {
font-family: "Montserrat", "Trebuchet MS", Helvetica, sans-serif;
}
 
.Roboto {
font-family: "Roboto", Geneva, "Lucida Console", sans-serif;
}
 
.Titillium-Web {
font-family: "Titillium Web", Geneva, Tahoma, sans-serif;
}
 
.Karla {
font-family: "Karla", Verdana, Geneva, sans-serif;
}
 
.Oswald {
font-family: "Oswald", Arial, sans-serif;
}
 
.Glegoo {
font-family: "Glegoo", Monaco, "Lucida Console", monospace;
}
 
.Vollkorn {
font-family: "Vollkorn", Georgia, serif;
}
 
.Courgette {
font-family: "Courgette", "Lucida Grande", sans-serif;
}
 
.Abel {
font-family: "Abel", "Lucida Console", monospace;
}
 
.Sniglet {
font-family: "Sniglet", Geneva, Gadget, sans-serif;
}
 
.Ubuntu {
font-family: "Ubuntu", Candara, Futura, sans-serif;
}
 
.PT-Sans {
font-family: "PT Sans", Tahoma, Geneva, sans-serif;
}
 
.PT-Serif {
font-family: "PT Serif", Georgia, serif;
}
 
.PT-Mono {
font-family: "PT Mono", "Courier New", Courier, monospace;
}
 
.Times-New-Roman {
font-family: "Times New Roman", serif;
}
 
.Tahoma {
font-family: "Tahoma", sans-serif;
}
 
.Trebuchet {
font-family: "Trebuchet", Helvetica, sans-serif;
}
 
.Verdana {
font-family: "Verdana", sans-serif;
}
 
.Palatino {
font-family: "Palatino", serif;
}
 
.Impact {
font-family: "Impact", sans-serif;
}
 
.Helvetica {
font-family: "Helvetica", Arial, sans-serif;
}
 
.Myriad-Pro {
font-family: "Myriad Pro", Helvetica, sans-serif;
}
 
.Georgia {
font-family: "Georgia", serif;
}
 
.Futura {
font-family: "Futura", Helvetica, sans-serif;
}
 
.Courier-New {
font-family: "Courier New", monospace;
}
 
.Arial {
font-family: "Arial", sans-serif;
}
 
 
thank you so much.!
0 Likes
Mspencer1
New Member
5 0 0
Hi Khlian

Ok I will give it a go thank you.

Do I just put it at the bottom of the existing code?
0 Likes
Mspencer1
New Member
5 0 0
Sorry I still don't understand. Do I add that at the bottom?

0 Likes