Books

A books shop website model

AUTHOR: Lois Lowry

ON THE HORIZON

On the Horizon tells the story of people whose lives were lost or forever altered by the twin tragedies of Pearl Harbor and Hiroshima. Composed of poems about individual sailors who lost their lives on the Arizona and about the citizens of Hiroshima who experienced unfathomable horror.

“I liked the feeling of love,' [Jonas] confessed. He glanced nervously at the speaker on the wall, reassuring himself that no one was listening. 'I wish we still had that,' he whispered. 'Of course,' he added quickly, 'I do understand that it wouldn't work very well. And that it's much better to be organized the way we are now. I can see that it was a dangerous way to live.' ...'Still,' he said slowly, almost to himself, 'I did like the light they made. And the warmth.”

― Lois Lowry, The Giver

A Complete book selling sample web site frontend

---

Building tools here-

• Html5
• CSS3
• Bootstrap
• JavaScript

---

Features

1. Responsive
2. User Friendly Interface
3. Multiple display size supported
4. Animation and CSS
5. Interactive to Users

HTML SAMPLE

<div class="container text-center">
    <div class="row">
        <div class="col-md-7 col-sm-12">
            <h6>AUTHOR: Lois Lowry</h6>
            <h1>ON THE HORIZON</h1>
            <p>On the Horizon tells the story of people whose lives were lost or forever altered by the twin tragedies of Pearl Harbor and Hiroshima. Composed of poems about individual sailors who lost their lives on the Arizona and about the citizens of Hiroshima who experienced unfathomable horror.
            </p>
            <button class="btn-light px-5 py-2">Buy Now</button>
        </div>
        <div class="col-md-5 col-sm-12 h-25">
            <img src="elements/book_cover.png" alt="Books">
        </div>
    </div>


</div>

CSS SAMPLE

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
header,
section {
  overflow-x: hidden;
}

:root {
  --display-font: "Playfair Display", serif;
  --Snigle-font: "Sniglet", cursive;
  --Rubik: "Rubik", cursive;
  --Patua: "Patua One", cursive;
  --Lobster: "Lobster", cursive;
  --light-black: #2e2c2caf;
  --bggradient: radial-gradient(#a75912, #050300);
  --light-grey: rgba(255, 255, 255, 0.877);
}

header a {
  font-family: var(--Snigle-font);
  font-size: 0.9em;
  color: whitesmoke;
}
header {
  background: #a75912;
  background: var(--bggradient);
  background-repeat: no-repeat;
  min-height: 100vh;
}

Contact The Developer:

Name	Email
Saikat Roy	[email protected]

© Saikat