Vertical carousel on scroll react
I want to have a section of the website which is fixed while to slide the carousel on scroll (vertically). Once you are at the last slide the scroll will let you continue on the page instead of changing the slide of the carousel. No idea on how to do this
row with a different background color which remain fixed while the user slides through the carousel slides by scrolling the page. once we arrive on the last slide the scroll will do the usual function on the page
do you know?
how many words do you know
See also questions close to this topic
-
how to change prettier format for react native
my code formatting prettier didn't works well for react native, i don't understand where to config it but it works well with flutter
from this code
import { View, Text } from 'react-native' import React from 'react' export default function App() { return ( <View> <Text>Apps</Text> </View> ) }
it's formatted to this
import { View, Text } from 'react-native' import React from 'react' export default function App() { return ( < View > < Text > Apps < /Text> < /View> ) }
-
MarkLogic server-side JavaScript and XQuery
I am just starting using NoSQL MarkLogic DB and trying to choose for me the best query language to learn and use in future. On server side MarkLogic provides the possibility to use JavaScript API or XQuery API.
I want to receive an advice. Which language is better to concentrate on and learn? JavaScript or XQuery?
- Popover in chrome extension using js
-
Creating Sticky Navbar with Drop Down Menu HTML
I am creating a HTML web page which contains a sticky navbar with drop down menu. However, when I created one, the dropdown menu does not works in the sticky navbar and so goes vise versa. below is the screenshot of both the result of the two codes.
*image with dropdown menu but without sticky navbar
*image with sticky navbar but without dropdown menu
below is the code for "image with dropdown menu but without sticky navbar"
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font- awesome/4.7.0/css/font-awesome.min.css"> <style> body {margin:0;font-family:Arial} .topnav { overflow: hidden; background-color: #333; } .topnav a { list-style-type: none; float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px; position: sticky; } .active { background-color: #04AA6D; color: white; } .topnav .icon { display: none; } .dropdown { float: left; overflow: hidden; } .dropdown .dropbtn { font-size: 17px; border: none; outline: none; color: white; padding: 14px 16px; background-color: inherit; font-family: inherit; margin: 0; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } .dropdown-content a { float: none; color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; } .topnav a:hover, .dropdown:hover .dropbtn { background-color: #555; color: white; } .dropdown-content a:hover { background-color: #ddd; color: black; } .dropdown:hover .dropdown-content { display: block; } @media screen and (max-width: 600px) { .topnav a:not(:first-child), .dropdown .dropbtn { display: none; } .topnav a.icon { float: right; display: block; } } @media screen and (max-width: 600px) { .topnav.responsive {position: relative;} .topnav.responsive .icon { position: absolute; right: 0; top: 0; } .topnav.responsive a { float: none; display: block; text-align: left; } .topnav.responsive .dropdown {float: none;} .topnav.responsive .dropdown-content {position: relative;} .topnav.responsive .dropdown .dropbtn { display: block; width: 100%; text-align: left; } } </style> </head> <body> <div class="header"> <h2>Scroll Down</h2> <p>Scroll down to see the sticky effect.</p> </div> <div class="topnav" id="myTopnav"> <a href="#home" class="active">Home</a> <a href="#news">News</a> <a href="#contact">Contact</a> <div class="dropdown"> <button class="dropbtn">Dropdown <i class="fa fa-caret-down"></i> </button> <div class="dropdown-content"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </div> <a href="#about">About</a> <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">☰</a> </div> <div style="padding-left:16px"> <h2>Responsive Topnav with Dropdown</h2> <p>Resize the browser window to see how it works.</p> <p>Hover over the dropdown button to open the dropdown menu.</p> </div> <h3>Sticky Navigation Bar Example</h3> <p>The navbar will <strong>stick</strong> to the top when you reach its scroll position.</p> <p><strong>Note:</strong> Internet Explorer do not support sticky positioning and Safari requires a -webkit- prefix.</p> <p>Some text to enable scrolling. </p> <p>Some text to enable scrolling. </p> <p>Some text to enable scrolling. </p> <p>Some text to enable scrolling. </p> <p>Some text to enable scrolling. </p> <p>Some text to enable scrolling. </p> <p>Some text to enable scrolling. </p> <p>Some text to enable scrolling. </p> <p>Some text to enable scrolling. </p> <p>Some text to enable scrolling. </p> <p>Some text to enable scrolling. </p> <p>Some text to enable scrolling. </p> <p>Some text to enable scrolling. </p> <p>Some text to enable scrolling. </p> <p>Some text to enable scrolling. </p> <script> function myFunction() { var x = document.getElementById("myTopnav"); if (x.className === "topnav") { x.className += " responsive"; } else { x.className = "topnav"; } } </script> </body> </html>
below is the code for "image with sticky navbar but without dropdown menu"
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font- awesome/4.7.0/css/font-awesome.min.css"> <style> body { font-size: 20px; } body {margin:0;} ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; position: -webkit-sticky; /* Safari */ position: sticky; top: 0; } li { float: left; } li a { display: block; color: white; text-align: center; padding: 16px 20px; text-decoration: none; } li a:hover { background-color: #111; } /*======================================================================*/ body { background-color:white; } ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #38444d; } li { float: left; } li a, .dropbtn { display: inline-block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } li a:hover, .dropdown:hover .dropbtn { background-color: red; } li.dropdown { display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; } .dropdown-content a:hover {background-color: #f1f1f1;} .dropdown:hover .dropdown-content { display: block; } footer { text-align: center; padding: 3px; background-color: DarkSalmon; color: white; } </style> </head> <body> <div class="header"> <h2>Scroll Down</h2> <p>Scroll down to see the sticky effect.</p> </div> <ul> <li><a href="#home">Home</a></li> <li><a href="#news">News</a></li> <li class="dropdown"> <a href="javascript:void(1)" class="dropbtn">Dropdown</a> <div class="dropdown-content"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </li> </ul> <h3>Sticky Navigation Bar Example</h3> <p>The navbar will <strong>stick</strong> to the top when you reach its scroll position.</p> <p><strong>Note:</strong> Internet Explorer do not support sticky positioning and Safari requires a -webkit- prefix.</p> <p>Some text to enable scrolling. </p> <p>Some text to enable scrolling. </p> <p>Some text to enable scrolling. </p> <p>Some text to enable scrolling. </p> <p>Some text to enable scrolling. </p> <p>Some text to enable scrolling. </p> <p>Some text to enable scrolling. </p> <p>Some text to enable scrolling. </p> <p>Some text to enable scrolling. </p> <p>Some text to enable scrolling. </p> <p>Some text to enable scrolling. </p> <p>Some text to enable scrolling. </p> <p>Some text to enable scrolling. </p> <p>Some text to enable scrolling. </p> <p>Some text to enable scrolling. </p> <footer> <p>Author: Hege Refsnes<br> <a href="mailto:hege@example.com">hege@example.com</a></p> </footer> </body> </html>
Please i need some help with this as i am new to html and css.
-
Javascript: Change element class if button has a certain value
<div class="main-div main-div2"> <!-- IF up to date, main-div3 --> <button id="update-btn" class="btn update-btn"> Up to date </button> </div>
I want to make it so if update-btn has a value of "Up to date", change the div class from "main-div main-div2" to "main-div main-div3". Otherwise, if it's any other value, change it to "main-div main-div2"
What kind of loop would be good for this Javascript function too if I want it to be checking constantly?
Thank you.
-
Boostrap vertical sizing with different style width and height
I am trying to set verticaly icon on profile photo card inside div to be in the middle in white box(div), but dont know why it doesnt works. When I use
style="width: 300px; height: 300px;
for div square I can center it on horizontaly, but not verticaly :/ Can someone explain me what I am doing wrong?Anyway is there any way how to resize bootstrap icons except display-1???
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css"> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> <div class="container-sm offset-md"> <h1 class="p-4 m-4">Nastavení profilu</h1> <div class="row"> <div class="col"> <div class="card p-4 m-4"> Osobní údaje <input type="text" name="name" class="form-control" placeholder="Jméno"> <input type="text" name="surname" class="form-control" placeholder="Příjmení"> <input type="email" name="email" class="form-control" placeholder="E-Mail"> <input type="date" name="name" class="form-control"> </div> </div> <div class="col-4"> <div class="card p-4 m-4 bg-light"> Profilová fotografie <div class=" square text-center border display-1 m-3 bg-white mx-auto"> <i class="bi bi-person-fill align-middle justify-content-center text-secondary"></i> </div> <input type="file" id="customFile" name="file" hidden=""> <div class="text-center"> <button class="btn btn-success" for="customFile">Nahrát</button> <button type="button" class="btn btn-danger">Smazat</button> <p class="text-muted mt-3 mb-0">Poznámka: Minimální velikost 300px x 300px</p> </div> </div> </div> </div> <div class="row"> <div class="col"> <div class="card p-4 m-4"> Změna hesla </div> </div> <div class="col"> <div class="card p-4 m-4"> Zobrazit/skrýt podrobnosti </div> </div> </div> </div>
-
react-router-dom v6 params only numbers
I want add number regex in may param in react-router-dom v6. it work fin in v5 like it:
<Route path="list/:id(\d+)" element={<MyComponent/>} />
but it not work in v6.
-
How can I fixed my problem"FirebaseError: Firebase: Error (auth/invalid-api-key)."
My environment variable is ok. No comas and name mistakes but they given me error like "FirebaseError: Firebase: Error (auth/invalid-api-key)". How can I fixed it. Please Help me...
This my .env file
REACT_APP_apiKey=AIzaSyBWobnhbdeMdNpXXXXXXXXXXXXXXXXXXXX REACT_APP_authDomain=XXXXX.firebaseapp.com REACT_APP_projectId=XXXX REACT_APP_storageBucket=XXXXX.appspot.com REACT_APP_messagingSenderId=4997390XXXXX REACT_APP_appId=1:4997390XXXXX:web:cc7bc80aa1bdb78fXXXXXX REACT_APP_measurementId=G-M1XDXXXXXX
This my firebase config file
const firebaseConfig = { apiKey: process.env.REACT_APP_apiKey, authDomain: process.env.REACT_APP_authDomain, projectId: process.env.REACT_APP_projectId, storageBucket: process.env.REACT_APP_storageBucket, messagingSenderId: process.env.REACT_APP_messagingSenderId, appId: process.env.REACT_APP_appId, measurementId: process.env.REACT_APP_measurementId, }; when I debugging firebaseConfig object console.log(firebaseConfig.apiKey); ==========> undefined console.log(firebaseConfig.authDomain); ==========> undefined console.log(firebaseConfig.projectId); ==========> undefined console.log(firebaseConfig.storageBucket); ==========> undefined console.log(firebaseConfig.measurementId); ==========> undefined console.log(firebaseConfig.appId); ==========> undefined console.log(firebaseConfig.measurementId); ==========> undefined
client side given error this "FirebaseError: Firebase: Error (auth/invalid-api-key)"
-
Getting error while creating an IBAction "Cannot convert value of type 'Float' to expected argument type '[CVarArg]'"
I want to connect a slider to the viewController in my app which I am writing with swift.
As soon as I create an IBAction:
@IBAction func heightSlider(_ sender: UISlider) {}
I immediately get the error message:
"Cannot convert value of type 'Float' to expected argument type '[CVarArg]'".
I have already searched for the solution in the Apple documentation but I can't get rid of the error.
Can someone please help me with this?
Many greetings
FULL CODE: import UIKit
class ViewController: UIViewController { override func viewDidLoad() { super.viewDidLoad() // Do any additional setup after loading the view. } @IBAction func heightSlider(_ sender: UISlider) { } @IBAction func weightSlider(_ sender: UISlider) { } }
Screenshot: Cannot convert value of type 'Float' to expected argument type '[CVarArg]'
I am using Xcode Version 13.3 (13E113)
-
How to find index of previous active class
I am trying to make a slider. Most of it is working till here, but I am not getting further as I want to find the index of the item which I removed the class as last from.(before the click)
So when I click on a dot, the clicked dot must be enabled and get the active class and the class on the previous active dot needs to be removed.
navDots.addEventListener('click', e => { // make only dot's clickable const targetDot = e.target.closest('.dots'); // disable NavDots for clicks if(!targetDot)return; //Find the index of the clicked btn const dotIndex = Array.from(targetDot.parentNode.children).indexOf(targetDot); console.log(dotIndex); // Add the active class tot the dot navDots.children[dotIndex].classList.add('active'); //HOW TO REMOVE PREVIOUS DOT ACTIVE style? //show image with dotIndex showImages(dotIndex); });
Thank you for helping,
r,y.
-
Slider in Apple store style
I know I would show some effort in this but I have no idea... I'm trying to make a slider like the one in the store section of Apple website.
The slider has to be aligned to the left side of the grid when the page is loaded and then it has to go full width when the user scrolls it. I can't find any solution. Can someone point me to the right direction?
-
carousel moving to bottom when clicking next and before buttons
Instead of using bootstrap, I use CSS to cover those. My code looks as follows:
<style> @keyframes tonext { 75% { left: 0; } 95% { left: 100%; } 98% { left: 100%; } 99% { left: 0; } } @keyframes tostart { 75% { left: 0; } 95% { left: -300%; } 98% { left: -300%; } 99% { left: 0; } } @keyframes snap { 96% { scroll-snap-align: center; } 97% { scroll-snap-align: none; } 99% { scroll-snap-align: none; } 100% { scroll-snap-align: center; } } body { max-width: 100rem; margin: 0 auto; padding: 0 1.25rem; font-family: 'Lato', sans-serif; } * { box-sizing: border-box; scrollbar-color: transparent transparent; /* thumb and track color */ scrollbar-width: 0px; } *::-webkit-scrollbar { width: 0; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: transparent; border: none; } * { -ms-overflow-style: none; } *{ -webkit-animation-delay: 3600s; } ol, li { list-style: none; margin: 0; padding: 0; } .carousel { position: relative; padding-top: 50%; filter: drop-shadow(0 0 10px #0003); perspective: 100px; } .carousel__viewport { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; overflow-x: scroll; counter-reset: item; scroll-behavior: smooth; scroll-snap-type: x mandatory; } .carousel__slide { position: relative; flex: 0 0 100%; width: 100%; counter-increment: item; -webkit-animation: slide 3600s infinite linear; } .carousel__slide:nth-child(even) { -webkit-animation-delay: 3600s; } .carousel__slide:nth-child(odd) { -webkit-animation-delay: 3600s; } .carousel__slide:before { content: counter(item); position: absolute; top: 50%; left: 50%; transform: translate3d(-50%,-40%,70px); color: #fff; font-size: 2em; } .carousel__snapper { position: absolute; top: 0; left: 0; width: 100%; height: 100%; scroll-snap-align: center; } @media (hover: hover) { .carousel__snapper { animation-name: tonext, snap; animation-timing-function: ease; animation-duration: 4s; animation-iteration-count: infinite; } .carousel__slide:last-child .carousel__snapper { animation-name: tostart, snap; } } @media () { .carousel__snapper { animation-name: none; } } .carousel:hover .carousel__snapper, .carousel:focus-within .carousel__snapper { animation-name: none; } .carousel__navigation { position: absolute; right: 0; bottom: 0; left: 0; text-align: center; } .carousel__navigation-list, .carousel__navigation-item { display: inline-block; } .carousel__navigation-button { display: inline-block; width: 1.5rem; height: 1.5rem; background-color: #333; background-clip: content-box; border: 0.25rem solid transparent; border-radius: 50%; font-size: 0; transition: transform 0.1s; } .carousel::before, .carousel::after, .carousel__prev, .carousel__next { position: absolute; top: 0; margin-top: 20%; width: 3rem; height: 3rem; transform: translateY(-50%); border-radius: 50%; font-size: 0; outline: 0; } .carousel::before, .carousel__prev { left: -0.5rem; } .carousel::after, .carousel__next { right: 1rem; } .carousel::before, .carousel::after { content: ''; z-index: 1; background-color: #333; background-size: 2rem 2rem; background-repeat: no-repeat; background-position: center center; color: #fff; font-size: 2.5rem; line-height: 4rem; text-align: center; pointer-events: none; } .carousel::before { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='0,50 80,100 80,0' fill='%23fff'/%3E%3C/svg%3E"); } .carousel::after { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='100,50 20,100 20,0' fill='%23fff'/%3E%3C/svg%3E"); } .outer-container{ display: flex; justify-content: space-around; /*max-width: 960px;*/ margin-left: 10px; padding-top: 10px; } .vertical-separator{ border: solid 1px #D5DBDB; } .left-container{ padding-right: 5px; } .right-container{ padding-top: 20px; padding-left: 5px; padding-right: 5px; } .center { display: block; margin-left: auto; margin-right: auto; } </style>
<crowd-form answer-format="flatten-objects"> <div id="errorBox"></div> <section class="carousel" aria-label="survey" data-interval="false"> <ol class="carousel__viewport"> </li> <li id="carousel__slide1" tabindex="0" class="carousel__slide"> <div class="carousel__snapper"> <div class="outer-container"> <span class="left-container"> <h3>#1</h3> <img src = "${h1_image_url}" width="100" height="250"> </span> <span class="vertical-separator"></span> <span class="right-container"> <div> <br> <br> <br> <br> <p><strong>choose one</strong></p> <input type="radio" id="Happy_1" name="h1" value="Happy"> <label for="Happy_1">Happiness</label><br> <input type="radio" id="Sad_1" name="h1" value="Sad"> <label for="Sad_1">Sadness</label><br> <input type="radio" id="Happy_1" name="h1" value="Happy"> <label for="Happy_2">Happiness</label><br> <input type="radio" id="Happy_2" name="h1" value="Happy"> <label for="Happy_3">Happiness</label><br> <input type="radio" id="Happy_3" name="h1" value="Happy"> <label for="Happy_3">Happiness</label><br> </div> </span> </div> <a href="#carousel__slide2" class="carousel__prev">Go to last slide</a> <a href="#carousel__slide2" class="carousel__next">Go to next slide</a> </div> </li> <li id="carousel__slide2" tabindex="0" class="carousel__slide"> <div class="carousel__snapper"> <div class="outer-container"> <span class="left-container"> <h3>#2</h3> <img src = "${h2_image_url}" class="center" width="100" height="250"> </span> <span class="vertical-separator"></span> <span class="right-container"> <div> <br> <br> <br> <br> <p><strong>choose one</strong></p> <input type="radio" id="Happy_4" name="h2" value="Happy"> <label for="Happy_4">Happiness</label><br> <input type="radio" id="Sad_2" name="h2" value="Sad"> <label for="Sad_2">Sadness</label><br> <input type="radio" id="Sad_3" name="h2" value="Sad"> <label for="Sad_3">Sadness</label><br> <input type="radio" id="Sad_4" name="h2" value="Sad"> <label for="Sad_4">Sadness</label><br> <input type="radio" id="Sad_5" name="h2" value="Sad"> <label for="Sad_5">Sadness</label><br> </div> </span> </div> <a href="#carousel__slide1" class="carousel__prev">Go to previous slide</a> <a href="#carousel__slide1" class="carousel__next">Go to next slide</a> </div> </li> </ol> <aside class="carousel__navigation"> <ol class="carousel__navigation-list"> <li class="carousel__navigation-item"> <a href="/#carousel__slide1" class="carousel__navigation-button">Go to slide 1</a> </li> <li class="carousel__navigation-item"> <a href="/#carousel__slide2" class="carousel__navigation-button">Go to slide 2</a> </li> </ol> </aside> </section> </crowd-form>
When I press the next and previous buttons, the page moves itself to the bottom of the browser. I want to fix the browser if the user does not scroll the window.
I tired to add href="/#carouselExample" but it does not work. Is there any other way I can fix it?
-
Show relevant text when looping through images
I'm trying to loop through the image carousel and show the text related to the portrait image when there is a portrait image being displayed and the same for the landscape image, but only display the relative text and not both sets of text at the same time. Any help would be greatly appreciated.
const img = document.querySelector(".slide"); const portraitText = document.querySelector(".portrait-text"); const landscapeText = document.querySelector(".landscape-text"); const next = document.querySelector(".next"); const prev = document.querySelector(".prev"); next.addEventListener("click", () => { if (img.hasAttribute('[data-orientation="portrait"]')) { landscapeText.style.display = "none"; portraitText.style.display = "block"; } else { portraitText.style.display = "none"; landscapeText.style.display = "block"; } });
<ul data-slides> <li class="slide" data-orientation="landscape" data-active> <img src="" alt="" /> </li> <li class="slide" data-orientation="landscape"> <img src="" alt="" /> </li> <li class="slide" data-orientation="landscape"> <img src="" alt="" /> </li> <li class="slide" data-orientation="portrait"> <img src="" alt="" /> </li> <li class="slide" data-orientation="landscape"> <img src="" alt="" /> </li> </ul> <div class="gallery-content"> <div class="gallery-text"> <h1>Title</h1> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> </div> <div class="sizing"> <h2>Size</h2> <button class="sizes">M</button> <button class="sizes">L</button> <button class="sizes">XL</button> </div> <div class="dimensions-container landscape-text"> <h2 class="dimensions-title">Landscape</h2> <h2 class="dimensions">100 x 66.6cm (39.3"x 26.2") - Edition of 25</h2> <h2 class="dimensions">110 x 165cm (43.3"x 64.9") - Edition of 12</h2> <h2 class="dimensions">200 x 133.3cm (78.7"x 52.4") - Edition of 8</h2> </div> <div class="dimensions-container portrait-text"> <h2 class="dimensions-title">Portrait</h2> <h2 class="dimensions">100 x 63.5cm (39.3"x 25") - Edition of 25</h2> <h2 class="dimensions">173 x 110cm (68,1"x 43.3") - Edition of 12</h2> <h2 class="dimensions">209.8 x133.3cm (82.6"x 52.4") - Edition of 8</h2> </div> <a href="" target="_blank" rel="nooppener noreferrer" ><button class="inquire uppercase">Inquire</button></a > </div>