Flexbox horozontal scrolling booklist

Developer
Martin Boyce
Size
5,605 Kb
Views
18,216
  1. Flexbox horozontal scrolling booklist Previews
  2. Flexbox horozontal scrolling booklist HTML Codes
  3. Flexbox horozontal scrolling booklist CSS Codes
  4. Flexbox horozontal scrolling booklist JS Codes

How do I make an flexbox horozontal scrolling booklist?

What is a flexbox horozontal scrolling booklist? How do you make a flexbox horozontal scrolling booklist? This script and codes were developed by Martin Boyce on 20 September 2022, Tuesday.

Flexbox horozontal scrolling booklist Previews
IQ Test

Flexbox horozontal scrolling booklist - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>flexbox horozontal scrolling booklist</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container-fluid"> <h2>Miss Peregrine's home for peculiar children: Read-a-likes</h2> <p class="lead">The Miss Peregrine’s Home for Peculiar Children movie adaptation is out now! If you loved the book try these books with similar themes and moods.</p>
<section class="booklist"> <div class="book"> <div class="book-cover"> <img src="https://www.sutherlandshire.nsw.gov.au/files/assets/website/images/subsites/library/books/book-clubs/unlikelypilgrimageofharoldfry.jpg" alt="book title" /> </div> <div class="book-detail"> <h4>The Unlikely Pilgirmage of Harold Fry / Rachel Joyce</h4> <p class="summary">Harold Fry is convinced that he must deliver a letter to an old love in order to save her, meeting various characters along the way and reminiscing about the events of his past and people he has known, as he tries to find peace and acceptance. </p> <p><a href="https://encore.sutherlandshire.nsw.gov.au/iii/encore/record/C__Rb1199674" class="btn btn-success btn-sm" target="_blank">Get This Book</a> <span class="btn btn-default btn-sm dismiss">Close</span> </p> </div> </div> <div class="book"> <div class="book-cover"> <img src="https://www.sutherlandshire.nsw.gov.au/files/assets/website/images/subsites/library/books/book-clubs/great-zoo-of-china.jpg" alt="book title" /> </div> <div class="book-detail"> <h4>The Great Zoo of China / Matthew Reilly</h4> <p class="summary">It is a secret the Chinese government has been keeping for forty years. They have found a species of animal no one believed even existed. It will amaze the world. Now the Chinese are ready to unveil their astonishing discovery within the greatest zoo ever constructed. A small group of VIPs and journalists has been brought to the zoo deep within China to see its fabulous creatures for the first time. Among them is Dr Cassandra Jane 'CJ' Cameron, a writer for National Geographic and an expert on reptiles. The visitors are assured by their Chinese hosts that they will be struck with wonder at these beasts, that they are perfectly safe, and that nothing can go wrong.</p> <p><a href="https://encore.sutherlandshire.nsw.gov.au/iii/encore/record/C__Rb1230937" class="btn btn-success btn-sm" target="_blank">Get This Book</a> <button class="btn btn-default btn-sm">Close</button> </p> </div> </div> <div class="book"> <div class="book-cover"> <img src="https://1.bp.blogspot.com/-7XJSqs0wsp8/V_QoquWU3WI/AAAAAAAACM8/TPB6c7ZkAzwc5RWAIy8pLpvdCC0n_3qFgCLcB/s200/asylum.png" alt="book title" /> </div> <div class="book-detail"> <h4>Asylum / Rachel Joyce</h4> <p class="summary">Three teens at a summer program for gifted students uncover shocking secrets in the sanatorium-turned-dorm where they're staying--secrets that link them all to the asylum's dark past. Featuring found photographs from real asylums and filled with chilling mystery and page-turning suspense, Asylum is a horror story that treads the line between genius and insanity.</p> <p><a href="https://encore.sutherlandshire.nsw.gov.au/iii/encore/record/C__Rb1213498" class="btn btn-success btn-sm" target="_blank">Get This Book</a> <button class="btn btn-default btn-sm">Close</button> </p> </div> </div> <div class="book"> <div class="book-cover"> <img src="https://2.bp.blogspot.com/-qghECv3UkW8/V_dib3n751I/AAAAAAAACNM/zOioU3Vbu3MFO0Tk-USH1xcBPMaDmBE6ACLcB/s200/a%2Bmonster%2Bcalls.jpg" alt="book title" /> </div> <div class="book-detail"> <h4>A monster calls / Patrick Ness</h4> <p class="summary">Thirteen-year-old Conor awakens one night to find a monster outside his bedroom window, but not the one from the recurring nightmare that began when his mother became ill--an ancient, wild creature that wants him to face truth and loss.</p> <p><a href="https://encore.sutherlandshire.nsw.gov.au/iii/encore/record/C__Rb1172744" class="btn btn-success btn-sm" target="_blank">Get This Book</a> <button class="btn btn-default btn-sm">Close</button> </p> </div> </div> <div class="book"> <div class="book-cover"> <img src="https://4.bp.blogspot.com/-cD2qMDMEzgE/V_dimiea-9I/AAAAAAAACNQ/mnhQQQlAzOU4F7NMbpLFltu_lJDUZJJJwCLcB/s200/pretty.jpg" alt="book title" /> </div> <div class="book-detail"> <h4>Pretty monsters / Kelly Link</h4> <p class="summary">Weird, wicked, spooky and delightful, Pretty Monsters is the companion volume to the surreal collection The Wrong Grave. Blending fairytale and fantasy with horror, myth and mischief, Kelly Link creates a world like no other. Combining imaginative brilliance with madcap escapades, and macabre humour, this is writing to come back from the dead for.</p> <p><a href="https://encore.sutherlandshire.nsw.gov.au/iii/encore/record/C__Rb115385" class="btn btn-success btn-sm" target="_blank">Get This Book</a> <button class="btn btn-default btn-sm">Close</button> </p> </div> </div> <div class="book"> <div class="book-cover"> <img src="https://1.bp.blogspot.com/-hwgcOdForEE/V_djJpY-kFI/AAAAAAAACNU/i8p75NzpcZ4y0qJf9AqRD8hj1VQ6eoYiwCLcB/s200/long.jpg" alt="book title" /> </div> <div class="book-detail"> <h4>Long Lankin / Lindsey Barraclough</h4> <p class="summary">When Cora and her younger sister, Mimi, are sent to stay with their great Auntie Ida in an isolated village in 1958, they discover that they are in danger from a centuries-old evil and, along with village boys Roger and Peter, strive to uncover the horrifying truth before it is too late.</p> <p><a href="https://encore.sutherlandshire.nsw.gov.au/iii/encore/record/C__Rb1173753" class="btn btn-success btn-sm" target="_blank">Get This Book</a> <button class="btn btn-default btn-sm">Close</button> </p> </div> </div> <div class="book"> <div class="book-cover"> <img src="https://4.bp.blogspot.com/-BJBv4wG0Nk8/V_gss6-zueI/AAAAAAAACNo/wQBzMKlmG7UHUJZg8iKuAcTqxpnyfC6IgCLcB/s200/shadow.jpg" alt="book title" /> </div> <div class="book-detail"> <h4>In the shadow of blackbirds / Cat Winters</h4> <p class="summary">In 1918, the world seems on the verge of apocalypse. Americans roam the streets in gauze masks to ward off thedeadly Spanish influenza, and the government ships young men to the front lines of a brutal war, creating an atmosphere of fear and confusion. Sixteen-year-old Mary Shelley Black watches as desperate mourners flock to séances and spirit photographers for comfort, but she herself has never believed in ghosts. During her bleakest moment, however, she's forced to rethink her entire way of looking at life and death, for her first love—a boy who died in battle—returns in spirit form. But what does he want from her?Featuring haunting archival early-twentieth-century photographs, this is a tense, romantic story set in a past that is eerily like our own time.</p> <p><a href="https://encore.sutherlandshire.nsw.gov.au/iii/encore/record/C__Rb1253929" class="btn btn-success btn-sm" target="_blank">Get This Book</a> <button class="btn btn-default btn-sm">Close</button> </p> </div> </div> <div class="book"> <div class="book-cover"> <img src="https://www.sutherlandshire.nsw.gov.au/files/assets/website/images/subsites/library/books/book-clubs/unlikelypilgrimageofharoldfry.jpg" alt="book title" /> </div> <div class="book-detail"> <p>The Unlikely pilgirmage of Harold Fry</p> </div> </div> <div class="book"> <div class="book-cover"> <img src="https://www.sutherlandshire.nsw.gov.au/files/assets/website/images/subsites/library/books/book-clubs/unlikelypilgrimageofharoldfry.jpg" alt="book title" /> </div> <div class="book-detail"> <p>The Unlikely pilgirmage of Harold Fry</p> </div> </div> <div class="book"> <div class="book-cover"> <img src="https://www.sutherlandshire.nsw.gov.au/files/assets/website/images/subsites/library/books/book-clubs/unlikelypilgrimageofharoldfry.jpg" alt="book title" /> </div> <div class="book-detail"> <p>The Unlikely pilgirmage of Harold Fry</p> </div> </div> <div class="book"> <div class="book-cover"> <img src="https://www.sutherlandshire.nsw.gov.au/files/assets/website/images/subsites/library/books/book-clubs/unlikelypilgrimageofharoldfry.jpg" alt="book title" /> </div> <div class="book-detail"> <p>The Unlikely pilgirmage of Harold Fry</p> </div> </div>
</section>
<section class="book-data"> <button type="button" class="close" aria-label="Close"> <span aria-hidden="true">&times;</span>
</button> <div class="info"></div>
</section>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Flexbox horozontal scrolling booklist - Script Codes CSS Codes

* { box-sizing: border-box;
}
body { background-color: #fff; font-family: arial;
}
.page-wrap { margin: 1em auto;
}
.booklist { display: flex; flex-flow: row nowrap; justify-content: flex-start; overflow-x: scroll; background-color: rgba(0, 0, 0, 0.85);
}
.book { margin: 1em 0.5em; position: relative; flex: 0 0 200px; height: 300px; overflow: hidden;
}
.book:first-child { margin-left: 1em;
}
.book:last-child { padding-right: 20px;
}
.book.selected { border: 2px solid #6aade4;
}
.book.selected:after { content: ''; width: 0; height: 0; position: absolute; bottom: 0px; left: 70px; z-index: 100; border-left: 20px solid transparent; border-right: 20px solid transparent; border-bottom: 20px solid #6aade4;
}
.book-cover img { width: 200px; height: 300px;
}
.book-data { background-color: rgba(0, 0, 0, 0.85); color: #eee; padding: 0; height: 0; overflow: hidden; transition: height 0.3s ease;
}
.book-data button.close { color: #eee; opacity: 1; font-weight: normal;
}
.book-data.active { padding: 1em; height: 300px; overflow: auto;
}

Flexbox horozontal scrolling booklist - Script Codes JS Codes

$('.book').on('click', function() { $('.book').removeClass('selected'); $(this).addClass('selected'); $('.book-data > .info').empty(); $('.book-data').removeClass('active'); $(this).children('.book-detail').clone(true).appendTo('.book-data .info'); $('.book-data').addClass('active');
});
$('.book-data .close').on('click', function() { $(this).next('.info').empty(); $(this).parents('.book-data').removeClass('active'); $('.book').removeClass('selected');
});
Flexbox horozontal scrolling booklist - Script Codes
Flexbox horozontal scrolling booklist - Script Codes
Home Page Home
Developer Martin Boyce
Username boycetrus
Uploaded September 20, 2022
Rating 3
Size 5,605 Kb
Views 18,216
Do you need developer help for Flexbox horozontal scrolling booklist?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Martin Boyce (boycetrus) Script Codes
Name
Flexbox login form
AJAX content from an RSS feed using jQuery
Nested flexbox layout for library catalog v2
Google Maps API Ground Overlay
Test Case for ajax fail on single result
Google Maps API Custom Overlay
Get the app
Bootstrap Panel List
Fetching book covers with the Google Books API
Sutherland Shire Libraries Catalogue Search
Create amazing love letters with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!