A little something about everything

internet marketing and website development made simple..

Real Estate Website Design | REC Project

12 January 2022 Shawn-Hyde Design, Portfolio (0)

Launch of new website for RealEstateCreate. The REC project is a SaaS solution for the real estate industry providing advanced custom solutions for live real time real estate data including IDX, MLS and custom listing data. This project was created to replace an older outdated claren project solution after an acquisition of welikeit. If you're looking for an effective real estate website that drives leads, builds brand awareness and is top of its class in SEO then you should check out the REC project today.

Website:

Real Estate websites for Agents, Teams & Brokers - REC

Site information:

Code: HTML5, CSS3, JS, C#.Net

Desktop Site Design:
 
Mobile Site Design:

How to solve: Page content blank when printing but works in InPrivate/Incognito view

23 January 2021 Shawn-Hyde Code, Design, How To Guides, Quick Tips (0)

This is an odd one and actually stumped me for a bit, in order to solve I used f12 developer tools to uncheck specific css attributes and tested the print function again. It ended up being a font-family attribute in the all css style.

Once removed the page printed all of the content on all browsers once again. I also tried adding a second font but that also did not solve the problem. It seems that the font was not being imported correctly or was corrupt. Replacing the font using the @media print solves the issue.

For example:

Vertical alignment of a menu using pure css

06 February 2020 Shawn-Hyde Code, Design (0)

Many methods for this are workarounds or hacks that break other elements or don't work on some browsers. However, you can do this quite simply using flex.

For example:

html

<body>
 <div id="menubox">
  <ul id="menu">
   <li>menu item 1</li>
   <li>menu item 2</li>
   <li>menu item 3</li>
  </ul>
 </div>
</body>

css

#menubox {
 position:absolute;
 display:flex;
 flex-direction: column;
 width:15rem;
 height:100%;
}
#menu {
 list-style:none;
 margin: auto 0;
}

 

Staggered Animation in CSS for Slideshow

11 May 2019 Shawn-Hyde Code, Design, Quick Tips (0)

Concept:

Staggered animation to create a slideshow from pure CSS and HTML5

Demo

The CSS:

div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  -webkit-animation: mymove 5s infinite; /* Safari 4.0 - 8.0 */
  -webkit-animation-delay: 2s; /* Safari 4.0 - 8.0 */
  animation: mymove 5s infinite;
  animation-delay: 2s;
}
div#two {
	animation: mymove 5s infinite;
  animation-delay: 5s;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes mymove {
  from {left: 0px;}
  to {left: 200px;}
}

@keyframes mymove {
  from {left: 0px;}
  to {left: 200px;}
}

And the HTML:

<div id="one"></div>
<div id="two"></div>