Responsive CSS3 Columns with Horizontal Scroll
How do I make an responsive css3 columns with horizontal scroll?
Imitates Win8.1 News App - responsove colours with en-ru hypheation // Open in full page mode or make thw window wider than 980px to see the effect // all scripts and styles come from CDNs. What is a responsive css3 columns with horizontal scroll? How do you make a responsive css3 columns with horizontal scroll? This script and codes were developed by Englishextra on 17 January 2023, Tuesday.
Responsive CSS3 Columns with Horizontal Scroll Previews
Responsive CSS3 Columns with Horizontal Scroll - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Responsive CSS3 Columns with Horizontal Scroll</title>
</head>
<body> <html lang="ru"> <head> <meta charset="UTF-8" /> <title>Responsive CSS3 Columns with Horizontal Scroll</title> <link href="https://fonts.googleapis.com/css?family=PT+Serif:400|PT+Sans:400,400italic,700&subset=latin,cyrillic" rel="stylesheet" /> <link href="https://cdn.jsdelivr.net/normalize/3.0.2/normalize.min.css" rel="stylesheet" /> <link href="https://cdn.jsdelivr.net/16pixels/0.1.2/16pixels.min.css" rel="stylesheet" /> <link href="./css/bundle.min.css" rel="stylesheet" /> <style> /*@font-face { font-family: 'Segoe UI'; src: url(http://shimansky.biz/fonts/segoe-ui-fontfacekit/segoeui.eot); src: local("Segoe UI"), local("Segoe"), local("Segoe WP"), url(http://shimansky.biz/fonts/segoe-ui-fontfacekit/segoeui.eot?#iefix) format('embedded-opentype'), url(http://shimansky.biz/fonts/segoe-ui-fontfacekit/segoeui.svg#SegoeUI) format('svg'), url(http://shimansky.biz/fonts/segoe-ui-fontfacekit/segoeui.woff) format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Segoe UI Light'; src: url(http://shimansky.biz/fonts/segoe-ui-fontfacekit/segoeuil.eot); src: local("Segoe UI Light"), local("Segoe WP Light"), url(http://shimansky.biz/fonts/segoe-ui-fontfacekit/segoeuil.eot?#iefix) format('embedded-opentype'), url(http://shimansky.biz/fonts/segoe-ui-fontfacekit/segoeuil.svg#SegoeUILight) format('svg'), url(http://shimansky.biz/fonts/segoe-ui-fontfacekit/segoeuil.woff) format('woff'); font-weight: normal; font-style: normal; }*/ @-ms-viewport{width: device-width;} @-o-viewport{width: device-width;} @-webkit-viewport{width: device-width;} @-moz-viewport{width: device-width;} @viewport{width: device-width;} @font-face { font-family: "fontello-custom"; src: url(http://shimansky.biz/cdn/fontello/7cf8388f/fontello-custom.eot?16992314); src: url(http://shimansky.biz/cdn/fontello/7cf8388f/fontello-custom.eot?16992314#iefix) format('embedded-opentype'), url(http://shimansky.biz/cdn/fontello/7cf8388f/fontello-custom.svg?16992314#custom) format('svg'), url(http://shimansky.biz/cdn/fontello/7cf8388f/fontello-custom.woff?16992314) format('woff'), url(http://shimansky.biz/cdn/fontello/7cf8388f/fontello-custom.ttf?16992314) format('truetype'); font-weight: normal; font-style: normal; } /* @font-face{font-family:'Permian Sans';src:url(http://shimansky.biz/fonts/permian-sans-fontfacekit/PermianSansTypeface-webfont.eot);src:url(http://shimansky.biz/fonts/permian-sans-fontfacekit/PermianSansTypeface-webfont.eot?#iefix) format('embedded-opentype'),url(http://shimansky.biz/fonts/permian-sans-fontfacekit/PermianSansTypeface-webfont.svg#permiansanstypefaceregular) format('svg'),url(http://shimansky.biz/fonts/permian-sans-fontfacekit/PermianSansTypeface-webfont.woff) format('woff'),url(http://shimansky.biz/fonts/permian-sans-fontfacekit/PermianSansTypeface-webfont.ttf) format('truetype');font-weight:400;font-style:normal;} @font-face{font-family:'Permian Sans';src:url(http://shimansky.biz/fonts/permian-sans-fontfacekit/PermianSansTypeface-Bold-webfont.eot);src:url(http://shimansky.biz/fonts/permian-sans-fontfacekit/PermianSansTypeface-Bold-webfont.eot?#iefix) format('embedded-opentype'),url(http://shimansky.biz/fonts/permian-sans-fontfacekit/PermianSansTypeface-Bold-webfont.svg#permiansanstypefaceregular) format('svg'),url(http://shimansky.biz/fonts/permian-sans-fontfacekit/PermianSansTypeface-Bold-webfont.woff) format('woff'),url(http://shimansky.biz/fonts/permian-sans-fontfacekit/PermianSansTypeface-Bold-webfont.ttf) format('truetype');font-weight:700;font-style:normal;} @font-face{font-family:'Permian Sans';src:url(http://shimansky.biz/fonts/permian-sans-fontfacekit/PermianSansTypeface-Italic-webfont.eot);src:url(http://shimansky.biz/fonts/permian-sans-fontfacekit/PermianSansTypeface-Italic-webfont.eot?#iefix) format('embedded-opentype'),url(http://shimansky.biz/fonts/permian-sans-fontfacekit/PermianSansTypeface-Italic-webfont.svg#permiansanstypefaceregular) format('svg'),url(http://shimansky.biz/fonts/permian-sans-fontfacekit/PermianSansTypeface-Italic-webfont.woff) format('woff'),url(http://shimansky.biz/fonts/permian-sans-fontfacekit/PermianSansTypeface-Italic-webfont.ttf) format('truetype');font-weight:400;font-style:italic;} */ /* @media screen and (-webkit-min-device-pixel-ratio:0) { @font-face { font-family: "fontello-custom"; url(http://shimansky.biz/cdn/fontello/7cf8388f/fontello-custom.svg?16992314#custom') format('svg'); } } */ [class^="fontello-custom-"]:before, [class*=" fontello-custom-"]:before { font-family: "fontello-custom" !important; font-style: normal; font-weight: normal; speak: none; display: inline-block; text-decoration: inherit; width: 1em; margin-right: .2em; text-align: center; font-variant: normal; text-transform: none; line-height: 1em; margin-left: .2em; } .fontello-custom-glyph-4:before { content: '\e800'; } .fontello-custom-glyph:before { content: '\e801'; } .fontello-custom-glyph-1:before { content: '\e802'; } .fontello-custom-glyph-2:before { content: '\e803'; } .fontello-custom-glyph-3:before { content: '\e804'; } .fontello-custom-glyph-5:before { content: '\e805'; } .fontello-custom-glyph-6:before { content: '\e806'; } .fontello-custom-angle-down:before { content: '\e807'; } .fontello-custom-menu:before { content: '\e808'; } .fontello-custom-angle-left:before { content: '\e809'; } .fontello-custom-angle-up:before { content: '\e80a'; } .fontello-custom-angle-right:before { content: '\e80b'; } .fontello-custom-glyph-7:before { content: '\e80c'; } .fontello-custom-th:before { content: '\e80d'; } .fontello-custom-navicon:before { content: '\e80e'; } .fontello-custom-dot-3:before { content: '\e80f'; } .fontello-custom-th-1:before { content: '\e810'; } .fontello-custom-menu-1:before { content: '\e811'; } .fontello-custom-down-small:before { content: '\e812'; } .fontello-custom-left-small:before { content: '\e813'; } .fontello-custom-right-small:before { content: '\e814'; } .fontello-custom-up-small:before { content: '\e815'; } .fontello-custom-th-2:before { content: '\e816'; } .fontello-custom-th-list:before { content: '\e817'; } .fontello-custom-play:before { content: '\e818'; } .fontello-custom-pause:before { content: '\e819'; } .fontello-custom-stop:before { content: '\e81a'; } html { margin: 0; padding: 0; } body { font-family: "PT Sans", "Segoe UI", sans-serif; font-size: 16px; line-height: 1.5; color: #444445; background-color: #FFF; } .wrapper { max-width: 1000%; } .wrapper .navbtn { font-family: "fontello-custom" !important; display: inline-block; color: #808080; font-size: 32px; position: absolute; top: 66px; left: 16px; text-decoration: none; } .wrapper .main { margin: 0 auto; } .main .col h1 { font-family: "PT Serif", "Segoe UI Light", serif; font-weight: normal; text-align: left; /*color: #80397B;*/ -webkit-column-break-inside: avoid; column-break-inside: avoid; margin-top: 0; } .main h1 { font-size: 40px; font-family: "PT Serif", "Segoe UI Light", serif; font-weight: normal; text-align: left; /*color: #80397B;*/ -webkit-column-break-inside: avoid; column-break-inside: avoid; margin: 0 0 24px 16px; } .main .col h2 { -webkit-column-break-inside: avoid; column-break-inside: avoid; } .main .col a { color: #80397B; } .main .col a:hover { text-decoration: none; } .main .col p, .main .col div, .main .col h1, .main .col h2, .main .col h3, .main .col h4, .main .col ol, .main .col ul { margin-right: 16px; margin-left: 16px; } .main .col p:first-child { margin-top: 0; } .main .col .hyphenate { text-align: justify; } .main .col strong, .main .col .bolder { font-family: "PT Sans", "Segoe UI", sans-serif !important; /*color: #548DD4;*/ } .cf:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } @media screen and (min-width: 980px) { .wrapper .main { min-width: 100%; position: absolute; top: 0; left: 0; bottom: 0; right: 0; white-space: nowrap; vertical-align: top; margin: 60px 40px 124px 60px; } .main .col { height: 100%; display: inline-block; -webkit-column-width: 21em; -moz-column-width: 21em; column-width: 21em; -webkit-column-gap: 1px; -moz-column-gap: 1px; column-gap: 1px; -webkit-column-fill: auto; -moz-column-fill: auto; column-fill: auto; /* -webkit-column-rule: 1px dotted #ccc; -moz-column-rule: 1px dotted #ccc; column-rule: 1px dotted #ccc; */ white-space: normal; vertical-align: top; } } @media screen and (max-width: 980px) { .wrapper .main { width: 30em; } } @media screen and (max-width: 620px) { .wrapper .main { width: 25em; } } @media screen and (max-width: 500px) { .wrapper .main { width: 95%; } } </style> </head> <body> <div class="wrapper cf"> <a class="navbtn fontello-custom-glyph-2" href="https://englishextra.github.io/pages/contents.html"></a> <div class="main cf"> <h1>The Man with the Scar</h1> <div class="col"> <p class="hyphenate larger bolder" lang="ru"> 'Do not say anything or do anything unusual. I have a gun and will use it if I have to. Put five thousand dollars in an envelope and hand it to me.' </p> <p class="hyphenate text" lang="en"> When Detective Paul Nichols asked the teller at the Middleton Bank to describe the robber, she replied. </p> <p class="hyphenate text" lang="en"> 'He had a long, ugly scar on his right cheek. Also, he seemed quite <strong>ill at ease</strong>, as though he might be unsure of what he was doing. But he did it. I had the feeling, though, that he went through with it almost just <strong>to save face</strong>. Once he decided to rob the bank, he had <strong>to carry out</strong> his plan.' </p> <p class="hyphenate text" lang="en"> She explained that the man had come into the bank that morning and stood in line with the other customers, as if waiting to deposit money or cash a check. When he reached the window, however, he did not <strong>beat around the bush</strong> he handed the girl a piece of paper that had written on it, 'Do not say anything or do anything unusual. I have a gun and will use it if I have to. Put five thousand dollars in an envelope and hand it to me.' </p> <p class="hyphenate text" lang="en"> The girl was so shocked that she just stood looking at him for a moment. She realized he was not joking what he ordered was <strong>straight from the shoulder</strong>. He said he would use his gun if he had to, and she was sure he would keep his word if she didn't cooperate. The teller did exactly as he told her. </p> <p class="hyphenate text" lang="en"> 'Remember me to your mother,' the thief said. Then he walked casually out of the bank. Not even the lady behind him in line at the window realized what had happened. </p> <p class="hyphenate text" lang="en"> The teller sounded the alarm, and immediately the guards ran to find the thief. 'You can't mistake him with that scar,' the girl told them. 'But be careful. He has a gun.' </p> <p class="hyphenate text" lang="en"> A thorough search was made, but no such person was found. The guards couldn't even come up with a piece of evidence. </p> <p class="hyphenate text" lang="en"> 'I can't understand how he could get away so rapidly,' Detective Nichols told his wife Nancy that evening, as the two of them were having supper. 'We questioned everyone inside and outside the bank at the time of the robbery. No one saw a man with a scar on his face. The guard at the door sees everyone who goes in and out, but he doesn't recall anyone with a scar. It looks as though the man appeared from nowhere and returned to nowhere. At least, for the moment it seems so.' </p> <p class="hyphenate text" lang="en"> 'He came from somewhere and he went somewhere when he left the bank,' Nancy replied. 'The question is, where did he go?' Nancy Nichols was a very practical woman. Her husband liked to discuss his cases with her because of this trait. </p> <p class="hyphenate text" lang="en"> Paul continued. 'The girl was surprised because it all happened within a few seconds, and so smoothly. She just stood watching the man walk away. When he went out the door, her senses returned to her and she called the guard.' </p> <p class="hyphenate text" lang="en"> 'What time of day was it?' Nancy asked. </p> <p class="hyphenate text" lang="en"> 'Noon. The streets were filled with people. At that hour of the day, it's always that way in front of the Middleton Bank. He could get lost in the crowd very easily. The men on the police force insist he just disappeared.' </p> <p class="hyphenate text" lang="en"> 'With a scar on his face? I take that <strong>with a grain of salt</strong>. He didn't disappear you can be sure of that. But what did he do?' Nancy began to have an expression of real excitement in her eyes. She was in her element when helping Paul solve a case. She loved to do her bit and resented it when Paul didn't consult with her. After ten years of being a detective's wife, she ought to <strong>know the ropes</strong>—and she did. This was the type of case she enjoyed most. </p> <p class="hyphenate text" lang="en"> 'That's what is so confusing. We looked <strong>high and low</strong> and questioned everyone in the area at the time of the robbery but no one observed anything or anyone unusual. Several people admitted they saw a man come out of the bank about that time, but he didn't have a scar on his face.' Paul shook his head and sighed wearily. It had been a tiring day and a mystifying case. <strong>Once in a blue moon</strong> Paul had a case that seemed impossible to solve. This was one of them. And it was up to Paul to solve it. </p> <p class="hyphenate text" lang="en"> 'Don't worry,' Nancy encouraged him. 'In the end you'll find your thief.' </p> <p class="hyphenate text" lang="en"> When supper was over, the Nichols had their coffee in the living room. Paul turned on the television set and immediately became interested in a detective program. Nancy did not watch the program but sat drinking her coffee in silence. When she had finished, she went into the kitchen and began washing the dishes. </p> <p class="hyphenate text" lang="en"> Fifteen minutes later she returned to the living room. She went directly to the television set and turned it off. </p> <p class="hyphenate text" lang="en"> 'What are you doing?' Paul objected, almost losing his temper. 'It's a very exciting story tonight!' </p> <p class="hyphenate text" lang="en"> 'Have you taken into account,' Nancy asked, ignoring his annoyance, 'the possibility that the thief wanted the teller to see his scar, that he was just <strong>leading her on</strong>?' </p> <p class="hyphenate text" lang="en"> 'What? But why?' asked Paul, immediately forgetting the TV show. 'Why should he want her to see it? It would be an excellent way to describe him. Just the opposite. He would want to hide the scar.' </p> <p class="hyphenate text" lang="en"> 'As you say, it's an excellent way to describe him. And that's exactly what he wanted. He wanted her to describe him just as she did. That way, the police would be looking for a man with a scar on his right cheek.' </p> <p class="hyphenate text" lang="en"> Paul shook his head again. 'What are you trying to say, Nancy?' </p> <p class="hyphenate text" lang="en"> She did not reply. Instead she simply peeled off one of her false eyelashes. </p> <p class="hyphenate text" lang="en"> For a moment Paul sat staring at her, more confused than ever. Nancy's false eyelashes were one of the few things the Nichols ever argued about. Paul tried to discourage her using false eyelashes by making fun of them. 'I like your eyes the way Nature made them,' he told her. He was always <strong>getting after her</strong> to leave her eyes alone and not try to make her lashes artificially longer. But sometimes she wore the lashes anyway. 'I like them,' she gave as her reason. </p> <p class="hyphenate text" lang="en"> Now she was standing in front of him deliberately removing them. What was this all about? They were talking about the man with the war and… </p> <p class="hyphenate text" lang="en"> 'Of course!' he shouted, jumping up from his chair. </p> <p class="hyphenate text" lang="en"> 'Why didn't I think of that?' </p> <p class="hyphenate text" lang="en"> Five minutes later he was in his car, hurrying to the police station. </p> <p class="hyphenate text" lang="en"> 'Hold your horses!' Chief Simpson said when Paul tried to tell him all at once what Nancy had discovered. 'Now, begin again and this time <strong>take your time</strong>.' </p> <p class="hyphenate text" lang="en"> Paul caught his breath and started again, more calmly. The chief of police listened closely as Detective Nichols revealed his wife's discovery. When Paul had finished, the chief turned on his radio. 'Calling all cars! Calling all cars!' He gave a detailed description of the man with the scar. Except that this time he did not mention a scar. </p> <p class="hyphenate text" lang="en"> The police made short work of capturing him they had their man within twenty-four hours. Shortly afterward they had his confession. </p> <p class="hyphenate text" lang="en"> He was an actor without work, desperate for money. His parents were not wealthy, and the young man <strong>didn't have the heart to ask</strong> them for help. This was his first crime. As an actor, he knew how to disguise himself well. He was very clever. He had come into the bank with the other customers, gone to the washroom, and put a thin strip of transparent material on his cheek. The material gave the appearance of a real scar. It looked completely authentic. Then he had gone to the teller's window and taken the money. When he stopped to light a cigarette, he quickly peeled off the scar, just as Nancy had done with her false eyelash. The guard at the door and the people outside saw no one with a scar, because there was no such person. </p> <p class="hyphenate text" lang="en"> The thief had walked quietly down the street in the middle of the noonday crowd, the money in his pocket, thinking he <strong>had pulled the wool over the eyes</strong> of everyone. But, unfortunately for him, he had bitten off more than he could chew. In the end he was caught. </p> <p class="hyphenate text" lang="en"> Nancy smiled when Chief Simpson thanked her for her part in helping solve the mystery. 'Maybe now,' she laughed, 'Paul will stop <strong>getting on his high horse</strong> about my false eyelashes.' </p> <p class="hyphenate text" lang="en"> The detective smiled, too. 'Okay, okay. I'll <strong>eat my words</strong>. You can wear them all you want. I'll never again hold that against you.' </p> <div class="cf"></div> </div> </div> </div> <div class="fixed-nav cf"></div> <script src="https://cdn.rawgit.com/englishextra/hyphenator/5a842bf8893034c4cbf5dd845de591d15d752110/4.2.0/js/hyphenator.min.js"></script> <script src="https://cdn.jsdelivr.net/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/mousewheel/3.1.9/jquery.mousewheel.min.js"></script> <script> "undefined"!==typeof window.jQuery&&$(document).ready(function(){$("html, body, *").mousewheel(function(a,b){this.scrollLeft-=40*b;a.preventDefault()})}); </script>
</body>
</html>
| Developer | Englishextra |
| Username | englishextra |
| Uploaded | January 17, 2023 |
| Rating | 3 |
| Size | 7,115 Kb |
| Views | 8,096 |
Do you need developer help for Responsive CSS3 Columns with Horizontal Scroll?
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!
Englishextra (englishextra) Script Codes
| Name | Size |
| QR code generating with vanilla js | 5,758 Kb |
| Typeboost.css | 25,474 Kb |
| Responsive Flexbox Administration | 7,376 Kb |
| JSON based picture gallery with lazyloading | 10,270 Kb |
| Metro UI Colors Palettes | 53,243 Kb |
| Grid 2 Go | 3,049 Kb |
| A Pen by englishextra | 6,117 Kb |
| CSS angled stripes | 5,116 Kb |
| Blog Article Template | 14,860 Kb |
| Parallax.js | 11,997 Kb |
Create amazing SEO content 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!
Similar Scripts & Codes
| Name | Username | Size |
| Boxes | H3l1um | 2,563 Kb |
| Responsive Table-less Shopping Cart | Alex_rodrigues | 6,637 Kb |
| Arrow Navigation | Hinducows | 1,973 Kb |
| Website Concept | Sagoza | 3,104 Kb |
| Responsive Menu I | Rodericksandoval | 3,045 Kb |
| SVG Text Masking | JMChristensen | 2,141 Kb |
| Lightrays v2 | Sinthetyc | 2,903 Kb |
| RWD- Mostly Fluid Layout Pattern | Marcocastro | 2,312 Kb |
| Faux column absolute wrapper | Yurimorini | 1,823 Kb |
| This in constructor context | _shree33 | 1,718 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!