Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <!-- Global site tag (gtag.js) - Google Analytics -->
- <script async="" src="https://www.googletagmanager.com/gtag/js?id=G-420XFJRS1M"></script>
- <script>
- window.dataLayer = window.dataLayer || [];
- function gtag() {
- dataLayer.push(arguments);
- }
- gtag('js', new Date());
- gtag('config', 'G-420XFJRS1M');
- </script>
- <link rel="shortcut icon" href="https://1xpto.netlify.app/items/favicon.gif" type="image/x-icon">
- <meta charset="UTF-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="keywords" content="CSS calc Function - responsive">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>CSS calc Function - responsive</title>
- <head>
- <style>
- .appsrc {
- font-size: 10px;
- z-index: 1;
- text-decoration: none;
- font-family: verdana;
- font-weight: bold;
- color: red;
- position: absolute;
- top: 0;
- left: 0;
- margin: 5px;
- border: 2px solid red;
- padding: 5px 10px;
- }
- .app {
- font-size: 10px;
- z-index: 1;
- text-decoration: none;
- font-family: verdana;
- font-weight: bold;
- color: red;
- position: absolute;
- top: 0;
- right: 0;
- margin: 5px;
- border: 2px solid red;
- padding: 5px 10px;
- }
- body {
- margin: 0;
- padding: 10px;
- }
- button {
- border: 0;
- outline: 0;
- background-color: white;
- }
- body h1 {
- text-align: center;
- font-family: verdana;
- font-size: 4vw;
- }
- body button {
- display: block;
- margin: 5px 0;
- }
- .btn1 img {
- width: 100%;
- }
- .btn1 {
- position: relative;
- left: 25%;
- width: calc(100% - 50%);
- border: 1px solid black;
- }
- .div2 {
- position: relative;
- left: 20%;
- width: calc(100% - 40%);
- border: 1px solid black;
- height: calc(80vw / 1.777);
- padding: 5px;
- }
- .div2 img {
- width: 100%;
- height: 100%;
- }
- .btn2 {
- position: relative;
- left: 35%;
- width: calc(100% - 70%);
- border: 1px solid black;
- }
- .btn2 p {
- float: left;
- text-align: justify;
- }
- .div1 {
- position: relative;
- left: 10%;
- width: calc(100% - 20%);
- border: 1px solid;
- height: calc(40vw / 1.777);
- padding: 5px 0;
- }
- .div1 img {
- width: 49%;
- height: 100%;
- float: left;
- margin: 0 0.5%;
- }
- .btn3 {
- position: relative;
- width: calc(100% - 20%);
- left: 10%;
- border: 1px solid;
- padding: 10px;
- }
- .btn3 img {
- width: 49.8%;
- }
- /* MEDIA */
- @media all and (orientation: portrait) and (max-width: 425px) {
- body h1 {
- font-size: 10vw;
- }
- .btn1 {
- left: 0;
- width: calc(100%);
- border: 1px solid black;
- }
- .div2 {
- left: 10%;
- width: calc(100% - 20%);
- border: 0;
- }
- .btn2 {
- left: 5%;
- width: calc(100% - 10%);
- }
- .btn3 img {
- width: 100%;
- margin: 2px 0;
- }
- }
- </style>
- </head>
- <body>
- <a class='app' href='https://1xpto.netlify.app/'>Visite Site</a>
- <a class='appsrc' href='https://1xpto.netlify.app/posts/CSS calc Function - responsive/local/index.txt'>Source code</a>
- <h1>CSS calc Function - responsive</h1>
- <button class='btn1'>
- <img src='https://1xpto.netlify.app/pic/5.jpg' />
- </button>
- <div class='div2'>
- <img src='https://1xpto.netlify.app/pic/3.jpg' />
- </div>
- <button class='btn2'>
- <p>Button, piece of solid material having holes or a shank through which it is sewed to one side of an article of clothing and used to fasten or close the garment by passing through a loop or hole in the other side. Purely decorative, non utilitarian buttons are also frequently used on clothing.</p>
- </button>
- <div class='div1'>
- <img src='https://1xpto.netlify.app/pic/8.jpg' />
- <img src='https://1xpto.netlify.app/pic/9.jpg' />
- </div>
- <button class='btn3'>
- <img src='https://1xpto.netlify.app/pic/12.jpg' />
- <img src='https://1xpto.netlify.app/pic/15.jpg' />
- </button>
- <script>
- history.scrollRestoration = "manual";
- $(window).on('beforeunload', function() {
- $(window).scrollTop(0);
- });
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement