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:
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:
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;
}
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>
Today I found myself in need of a blog icon and to my dismay I dont have a standardized blog icon in my art portfolio and to my surprise no such official blog icon exists. Well this just won't do, I thought. So I sat down, well in fact I was already sitting but that's not the point... *cough* OK. so I'm sitting down and thinking.. well here I will just explain the thought process in creating the icon:
Have a main focal point, it should be green to represent the fact that blogs do not require cutting down trees for paper, such as newspapers and magazines. It is estimated that 15 billion trees are cut down for paper each and every year.
Representation of bloggers, It should represent the many viewpoints, colors and cultures of bloggers around the planet. It is estimated that the number of blogs in existence as I write this article is around 320 Million and the number of posts written per day are in excess of 4.5 Million.
b for blog, what holds us together is communication. Blogs provide a great way to express yourself, communicate, give examples and share what matters with the world.
Here is the blog icon for anyone and everyone to use:
Notes: