Simurg Inn

Simurg Inn was one of the previous works that we build from scratch. We keep communication open with the company in every step to complete it perfectly and the last result seems awesome.

As always we pay attention on planning. Together, we figured out what the hotel needs:

  • a custom page to tell surroundings of the hotel
  • a special reservation system with payment options
  • and larger fonts, because guests will be adults and generally people who advanced in years

It seems we are ok to start, we tried to understand what kind of design our employee is asking for. We checked together how other agencies build web site of hotels and find some examples. We didn’t like them all, but they ring a bell for a starting point.

Simurg on a pendant


The website that we built, must be mobile & user friendly as all other jobs of us. So… Toygun, our designer, started on paper with some drawings. After two days, wireframes was accepted by the employee. Only one important thing was left, the logo.

Simurg is the name of a mythological bird which exist in diverse cultures and has several figures and names as Anka, Bennu, Feniks, Huma… Because of this, the logo was one of the biggest challenge in the project.

The pendant that we found in the hotel has a figure of the Simurg. So we thought over it to use as the logo.

One of the other important issue is choosing the right font family. We pick Cormorant for titles and PT Sans for paragraphs.

We shared what we were on, when designer completed the design and assets on photoshop. The employee approved it and our designer passed the design to the front-end developer, me. In this project, I worked as a front-end developer and a dev-op.

After I carried design into a working HTML pages, everything seems better. We go through the web site again and again with designer and employee.

Website earned it’s own soul and we could hear the heath beats.

Our designer asked for some improvements and everybody accepted. A zooming effect in the slider… Hmm.. of course. A smooth zoom effect in the slider seems ok, but I decided to rotate it when zooming with an acute angle, just a little rotation.

/* smooth zoom */
@keyframes zoomSmooth {
from {
transform-origin: 20% 80%;
50% {
transform: scale(1.1) rotate(0.1deg);
to {
transform: scale(1.2) rotate(0.2deg);
.animated.zoomSmooth {
transition: transform 30s linear;
-webkit-animation-duration: 20s;
animation-duration: 20s;
.zoomSmooth {
-webkit-animation-name: zoomSmooth;
animation-name: zoomSmooth;

Our approach to tell surroundings

We added animated markers on map to get attraction from guests and opened dialog boxes which shows an image and a summary of the place.

Custom reservation system and payment service

Our employee asked a reservation system and we googled for it. We found thousands of ready to use services but the problem is unique and we couldn’t find a 3rd party add-on for the actual need. The solution was simple but the problem was unique so there weren’t any solutions left, we decided to code it.

We included pickadate plugin into project and generated a table to show prices for each room. We used PayTR, which provides an online POS in Turkiye, for payment system. PayTR has a simple interface and an api which we communicated with curl and the service solved our need about payment.

Content Management & Backend Development

We decided to use php for backend coding. Thus, Tekin who is our backend developer choose to work with laravel framework for back-end. To enhance web site we cached and stored sessions with Redis.


Everything seems ok, and web site is ready to sail.

Employee wanted some changes but these seem good for us. She didn’t come with unnecessary iterations and didn’t bore us with things that won’t change anything.

In short, one month passed with full of joy. The team and employee was totally satisfied and I decided to share, how grateful I am

Leave a Reply

Your email address will not be published.