Samia Photography

She has an account with bluehost. What does bluehost have to offer?

So far it seems all they offer are easier links to find premium themes and plugins.

I am searching for some free themes to check out. Bluehost seems really damn slow and aside from the domain name being handled already, I don’t see much benefit to using them. They are really slow. To load Samia’s page it takes 3500ms. That is with no content on it at all. This AWS blog site takes under 2000ms. I’m convinced AWS is better.

Themes

  • Remi – It has the sqares photos thing that Samia really wants. Costs money.
  • Unite – It’s free so I went with it

Displaying photos

  • Unite  Photo Gallery for the different sized blocks – Limited to 20 photos per gallery
    • Most of your photography is vertical so I recommend the column view instead of row justified blocks
  • Instagram Feed WD

Pricing page

Text on Homepage

CSS Tricks

The most exciting thing I learned came from this little tutorial. Absolute positioning can be made relative to the parent by making the parents position relative. 

Then the child can be positioned using absolute. This solved the typing text issue. Parent= relative. Child=absolute.

I did something with this CSS to make the typing effect I wish I had saved the codepen.

.typewriter h1 {
font-size: 45px;
position: absolute;
width: 20em;
top: 5%;
left: 5%;

overflow: hidden;
/ Ensures the content is not revealed until the animation /
border-right: .10em solid black;
/ The typwriter cursor /
white-space: nowrap;
/ Keeps the content on a single line /
margin: 0 auto; / Gives that scrolling effect as the typing happens /
letter-spacing: .15em; / Adjust as needed /
animation: 
typing 4.5s steps(40, end),
blink-caret .75s step-end infinite;
}

/ The typing effect /
@keyframes typing {
from { width: 0 }
}

/ The typewriter cursor effect /
@keyframes blink-caret {
from, to { border-color: transparent }
50% { border-color: black; }
}

@media screen and (max-width: 1124px) {
.typedtext {
display: none;
}
}

.smallLogo {
display: none;
}

@media screen and (max-width: 1024px) {
.largeLogo{
display: none !important;
}
.smallLogo{
display: block !important;
}
}

.largeLogo {
width: 70%;
}

/smaller header/
@media screen and (min-width: 64em){
#site-header1 {
padding: 3px 3% 3px;
}
}

#content {
padding-top: 10px;
padding-bottom: 0px;
}

#bottom-wrapper{
padding-top: 0;
padding-bottom: 0;
}

#menuLogo {
width:222px;
}

#header div div div div a img { 
 width: 220px 
}

#header .top-header .header-navigation ul li a {
 color: #000;
}

#header .bottom-header p {
 font-size: 0;
 min-height: 50px;
}