PDA

View Full Version : A new approach ...

K4GAP
05-29-2014, 05:25 AM
I have but two sites on my new site host. One of which is a vb site, the other being a genealogy site using a system called TNG.

Not being able to integrate the two sites I decided to make up an entry page that has links to each of the sites. This has both pro's and con's.

Using straight html to build the entry page was a blast from the past :)

Check it out and share with me your ideas or suggestions.

K4gap.com (http://k4gap.com)
tbworld
05-29-2014, 05:48 AM
I like it! Clean, readable, lots of white space for my tired eyes. and pleasant colors. Two thumbs up. :)
K4GAP
05-30-2014, 12:00 AM
I have a bit of code I want to add to the bottom of the entry page. The code is just a rollover code for the social media icons I want to add to the page.

Instead of the usual rollover code this code makes the image pop up as though it's being lifted off the page.

Is it cool if I post the code in this thread? I have questions about how to implement the code.
Max Taxable
05-30-2014, 01:10 AM
404 error for this call:http://k4gap.com/public_html/social.css

http://www.webpagetest.org/result/140530_SN_2CB/1/details/



Page looks great, loads fast, and only 195kb load!
K4GAP
05-30-2014, 02:36 AM
404 error for this call:http://k4gap.com/public_html/social.csshttp://www.webpagetest.org/result/140530_SN_2CB/1/details/



Page looks great, loads fast, and only 195kb load!

What is that link supposed to go too?
ForceHSS
05-30-2014, 03:08 AM
I like the site and forums the screenshot is from this link (http://k4gap.com/public_html/social.css)
K4GAP
05-30-2014, 06:10 AM
I like the site and forums the screenshot is from this link (http://k4gap.com/public_html/social.css)

If I knew what was supposed to be on that page I might be concerned. As far as the 404 page having my old site addy on it, I'll change that. Thanks for the heads up :)
ForceHSS
05-30-2014, 08:30 AM
I was talking about the old site url on that ss that is why it is marked on the ss :)
Max Taxable
05-30-2014, 04:21 PM
What is that link supposed to go too?It's the WebPageTest I ran on your site.
K4GAP
05-30-2014, 08:21 PM
It's the WebPageTest I ran on your site.

Ok, now it's obvious, thanks.
K4GAP
06-03-2014, 10:37 AM
Ol arthur ritus wouldn't let me sleep so I re-did my header area on my entry page (http://www.k4gap.com). Did I mess it up to bad?
ForceHSS
06-03-2014, 10:52 AM
Ol Arthur Ritus wouldn't let me sleep so I re-did my header area on my entry page (http://www.k4gap.com). Did I mess it up too bad?
Looks good
BBNZowner
06-03-2014, 11:51 PM
I like the new light colour scheme on the landing page, very easy on the eyes
K4GAP
06-04-2014, 01:20 AM
I like the new light colour scheme on the landing page, very easy on the eyes

Thanks guys,
It means a lot to have ones peers acknowledge your work.

Now I'm working on ways to improve the "landing page" without increasing it's load time. I want to add a functional "light" footer with my social media icons.

I'm looking to add this code:

.social-popout {
height: 48px;
width: 48px;
margin: 10px;
float: left;
-webkit-transition: all ease 0.5s;
-moz-transition: all ease 0.5s;
-o-transition: all ease 0.5s;
-ms-transition: all ease 0.5s;
transition: all ease 0.5s;
}
.social-popout img {
border-radius: 50%;
margin: 8px;
width: 100%;
box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.8);
-webkit-transition: all ease 0.5s;
-moz-transition: all ease 0.5s;
-o-transition: all ease 0.5s;
-ms-transition: all ease 0.5s;
transition: all ease 0.5s;
}
.social-popout img:hover {
margin: 0px;
box-shadow: 6px 6px 4px 4px rgba(0,0,0,0.3);
}

With this code on the page:
<div class="social-popout"><img src="images/social/youtube.png" /></div>

All I know is, I have two pieces of code to make it work but have no idea on where to or how to call the css? or where to place the css. The landing page is not part of vb so I can't put it in the additional where a lot of other code goes ....
BBNZowner
06-04-2014, 03:02 AM
You can insert the css right into the page itself

<head>
<style type="text/css">
your css code
</style>
</head>

Or create a css file, and call on it in your html

<style type="text/css">
@import "yourstyle.css";
</style>


I'm not an expert but I've used those methods
K4GAP
06-04-2014, 10:29 PM
the top method worked, thanks