defistrategies Posted February 2, 2022 Posted February 2, 2022 Site URL: https://www.defistrategies.com/consulting So I have inserted code I have been working on but now it wont justify in the center when that's what I have coded to my knowledge. It also affects the heading that is text from squarespace. The other issue is that it isnt off centered in an external coding platforms. <html lang="en"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body { margin: 0; padding: 0; justify-content: center; align-items: center; min-height: 100vh; background-color: #141d2f; flex-wrap: wrap; } body .container { width: 100%; padding: 20px 0; display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 15px; margin:0 auto; flex-wrap: wrap; } @media screen and (max-width: 1150px){ body .container{ display: flex; } } body .container .card { position: relative; width: 300px; height:400px; background: #4cb5ff; border-radius: 15px; box-shadow: 0 15px 60px rgba(0, 0, 0, 0.5); overflow: hidden; margin: 0 auto; } body .container .card .face { position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; } body .container .card .face.face1 { box-sizing: border-box; padding: 20px; } body .container .card .face.face1 h2 { margin: 0; padding: 0; } body .container .card:hover .face.face2 img { display: none; } body .container .card .face.face1 .java { background-color: #000000; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } body .container .card .face.face1 .python { background-color: #000000; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } body .container .card .face.face1 .cSharp { background-color: #000000; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } body .container .card .face.face2 { transition: 0.5s; } body .container .card .face.face2 h2 { margin: 0; padding: 0; font-size: 10em; color: #fff; transition: 0.5s 0.5s; text-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); z-index: 10; } body .container .card:hover .face.face2 { height: 60px; } body .container .card:hover .face.face2 h4 { justify-content: center; font-size: 100%; margin: auto; padding-top: 20px; } body .container .card:nth-child(1) .face.face2 { background-image: linear-gradient(40deg, #0069B2 0%, #0096FF 45%, #4CB5FF 100%); border-radius: 15px; } body .container .card:nth-child(2) .face.face2 { background-image: linear-gradient(40deg, #0096FF 0%, #4CB5FF 45%, #0069B2 100%); border-radius: 15px; } body .container .card:nth-child(3) .face.face2 { background-image: linear-gradient(40deg, #0069B2 0%, #0096FF 45%, #4CB5FF 100%); border-radius: 15px; } body .container .card:nth-child(4) .face.face2 { background-image: linear-gradient(40deg, #0069B2 0%, #0096FF 45%, #4CB5FF 100%); border-radius: 15px; } body .container .card:nth-child(5) .face.face2 { background-image: linear-gradient(40deg, #0096FF 0%, #4CB5FF 45%, #0069B2 100%); border-radius: 15px; } body .container .card:nth-child(6) .face.face2 { background-image: linear-gradient(40deg, #0069B2 0%, #0096FF 45%, #4CB5FF 100%); border-radius: 15px; } img:hover { display: none; } .token{ text-align: center; } </style> <div class="container"> <div class="card"> <div class="face face1"> <div class="content"> <span class="stars"></span> <p style="font-weight: bold;"class="java">We assist you with launching your own Security Token, Equity Token, and/or Utility Token Offering.</p> </div> </div> <div class="face face2"> <div class="token"> <img style=" width: 70%; margin-top:3em;"src="https://user-images.githubusercontent.com/97566770/150205540-bc1a2e4d-b0eb-4455-8f0d-132c76fe5e73.png"/> <h4>Tokenization</h4> </div> </div> </div> <div class="card"> <div class="face face1"> <div class="content"> <span class="stars"></span> <p style="font-weight: bold;" class="python">From implementing business processes to effective and efficient business models we assist clients to plug the leaks and stop the inefficiencies.</p> </div> </div> <div class="face face2"> <div class="token"> <img style="width: 70%; margin-top:3em;"src="https://user-images.githubusercontent.com/97566770/150205607-81ae512c-9f2a-4288-bacb-7101330bcf21.png"/> <h4 >Business Development</h4> </div> </div> </div> <div class="card"> <div class="face face1"> <div class="content"> <span class="stars"></span> <p style="font-weight: bold;"class="cSharp">We offer best practices for handling blockchain and digital assets. Our knowledge ranges from storage basics to industry leading security innovations.</p> </div> </div> <div class="face face2"> <div class="token"> <img style=" width: 70%; margin-top:3em;"src="https://user-images.githubusercontent.com/97566770/150205681-57acd564-9d10-4847-879a-45ac1ec6780c.png"/> <h4>Storage & Security</h4> </div> </div> </div> <!--</div> <div class="container">--> <div class="card"> <div class="face face1"> <div class="content"> <span class="stars"></span> <p style="font-weight: bold;"class="java">Experts in the non-fungible token space, we can help you create any type of digital item.</p> </div> </div> <div class="face face2"> <div class="token"> <img style=" width: 70%; margin-top:3em;"src="https://user-images.githubusercontent.com/97566770/150205573-0e68ec7c-36c1-44c9-8c68-609865e4f37e.png"/> <h4>Non-Fungible Tokens (NFTs)</h4> </div> </div> </div> <div class="card"> <div class="face face1"> <div class="content"> <span class="stars"></span> <p style="font-weight: bold;"class="python">Experienced in compliance and regulation, our industry knowledge gives you access to the resources required to navigate through this critical step. There is no better way to learn than from others who have walked a similar path.</p> </div> </div> <div class="face face2"> <div class="token"> <img style=" width: 70%; margin-top:3em;"src="https://user-images.githubusercontent.com/97566770/150205634-f465c702-3f3f-4a6b-8379-f2005f4462b0.png"/> <h4>Regulatory Compliance</h4> </div> </div> </div> <div class="card"> <div class="face face1"> <div class="content"> <span class="stars"></span> <p style="font-weight: bold;"class="cSharp">We offer private coaching sessions designed to empower you to create and manage your own global digital assets.</p> </div> </div> <div class="face face2"> <div class="token"> <img style=" width: 70%; margin-top:3em;"src="https://user-images.githubusercontent.com/97566770/150205707-80c66a6c-0fd1-4a7b-8c1a-e5e40a5f1881.png"/> <h4>Executive On-Boarding</h4> </div> </div> </div> </div> Beyondspace 1
Beyondspace Posted February 7, 2022 Posted February 7, 2022 On 2/3/2022 at 6:04 AM, defistrategies said: Site URL: https://www.defistrategies.com/consulting So I have inserted code I have been working on but now it wont justify in the center when that's what I have coded to my knowledge. It also affects the heading that is text from squarespace. The other issue is that it isnt off centered in an external coding platforms. <html lang="en"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body { margin: 0; padding: 0; justify-content: center; align-items: center; min-height: 100vh; background-color: #141d2f; flex-wrap: wrap; } body .container { width: 100%; padding: 20px 0; display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 15px; margin:0 auto; flex-wrap: wrap; } @media screen and (max-width: 1150px){ body .container{ display: flex; } } body .container .card { position: relative; width: 300px; height:400px; background: #4cb5ff; border-radius: 15px; box-shadow: 0 15px 60px rgba(0, 0, 0, 0.5); overflow: hidden; margin: 0 auto; } body .container .card .face { position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; } body .container .card .face.face1 { box-sizing: border-box; padding: 20px; } body .container .card .face.face1 h2 { margin: 0; padding: 0; } body .container .card:hover .face.face2 img { display: none; } body .container .card .face.face1 .java { background-color: #000000; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } body .container .card .face.face1 .python { background-color: #000000; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } body .container .card .face.face1 .cSharp { background-color: #000000; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } body .container .card .face.face2 { transition: 0.5s; } body .container .card .face.face2 h2 { margin: 0; padding: 0; font-size: 10em; color: #fff; transition: 0.5s 0.5s; text-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); z-index: 10; } body .container .card:hover .face.face2 { height: 60px; } body .container .card:hover .face.face2 h4 { justify-content: center; font-size: 100%; margin: auto; padding-top: 20px; } body .container .card:nth-child(1) .face.face2 { background-image: linear-gradient(40deg, #0069B2 0%, #0096FF 45%, #4CB5FF 100%); border-radius: 15px; } body .container .card:nth-child(2) .face.face2 { background-image: linear-gradient(40deg, #0096FF 0%, #4CB5FF 45%, #0069B2 100%); border-radius: 15px; } body .container .card:nth-child(3) .face.face2 { background-image: linear-gradient(40deg, #0069B2 0%, #0096FF 45%, #4CB5FF 100%); border-radius: 15px; } body .container .card:nth-child(4) .face.face2 { background-image: linear-gradient(40deg, #0069B2 0%, #0096FF 45%, #4CB5FF 100%); border-radius: 15px; } body .container .card:nth-child(5) .face.face2 { background-image: linear-gradient(40deg, #0096FF 0%, #4CB5FF 45%, #0069B2 100%); border-radius: 15px; } body .container .card:nth-child(6) .face.face2 { background-image: linear-gradient(40deg, #0069B2 0%, #0096FF 45%, #4CB5FF 100%); border-radius: 15px; } img:hover { display: none; } .token{ text-align: center; } </style> <div class="container"> <div class="card"> <div class="face face1"> <div class="content"> <span class="stars"></span> <p style="font-weight: bold;"class="java">We assist you with launching your own Security Token, Equity Token, and/or Utility Token Offering.</p> </div> </div> <div class="face face2"> <div class="token"> <img style=" width: 70%; margin-top:3em;"src="https://user-images.githubusercontent.com/97566770/150205540-bc1a2e4d-b0eb-4455-8f0d-132c76fe5e73.png"/> <h4>Tokenization</h4> </div> </div> </div> <div class="card"> <div class="face face1"> <div class="content"> <span class="stars"></span> <p style="font-weight: bold;" class="python">From implementing business processes to effective and efficient business models we assist clients to plug the leaks and stop the inefficiencies.</p> </div> </div> <div class="face face2"> <div class="token"> <img style="width: 70%; margin-top:3em;"src="https://user-images.githubusercontent.com/97566770/150205607-81ae512c-9f2a-4288-bacb-7101330bcf21.png"/> <h4 >Business Development</h4> </div> </div> </div> <div class="card"> <div class="face face1"> <div class="content"> <span class="stars"></span> <p style="font-weight: bold;"class="cSharp">We offer best practices for handling blockchain and digital assets. Our knowledge ranges from storage basics to industry leading security innovations.</p> </div> </div> <div class="face face2"> <div class="token"> <img style=" width: 70%; margin-top:3em;"src="https://user-images.githubusercontent.com/97566770/150205681-57acd564-9d10-4847-879a-45ac1ec6780c.png"/> <h4>Storage & Security</h4> </div> </div> </div> <!--</div> <div class="container">--> <div class="card"> <div class="face face1"> <div class="content"> <span class="stars"></span> <p style="font-weight: bold;"class="java">Experts in the non-fungible token space, we can help you create any type of digital item.</p> </div> </div> <div class="face face2"> <div class="token"> <img style=" width: 70%; margin-top:3em;"src="https://user-images.githubusercontent.com/97566770/150205573-0e68ec7c-36c1-44c9-8c68-609865e4f37e.png"/> <h4>Non-Fungible Tokens (NFTs)</h4> </div> </div> </div> <div class="card"> <div class="face face1"> <div class="content"> <span class="stars"></span> <p style="font-weight: bold;"class="python">Experienced in compliance and regulation, our industry knowledge gives you access to the resources required to navigate through this critical step. There is no better way to learn than from others who have walked a similar path.</p> </div> </div> <div class="face face2"> <div class="token"> <img style=" width: 70%; margin-top:3em;"src="https://user-images.githubusercontent.com/97566770/150205634-f465c702-3f3f-4a6b-8379-f2005f4462b0.png"/> <h4>Regulatory Compliance</h4> </div> </div> </div> <div class="card"> <div class="face face1"> <div class="content"> <span class="stars"></span> <p style="font-weight: bold;"class="cSharp">We offer private coaching sessions designed to empower you to create and manage your own global digital assets.</p> </div> </div> <div class="face face2"> <div class="token"> <img style=" width: 70%; margin-top:3em;"src="https://user-images.githubusercontent.com/97566770/150205707-80c66a6c-0fd1-4a7b-8c1a-e5e40a5f1881.png"/> <h4>Executive On-Boarding</h4> </div> </div> </div> </div> It seems fine on your site. Do you still need help? BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox - PDF Lightbox popup - ...) </> 🗓️ Delivery Date Picker (Date picker form field) Gallery block 7.1 workaround </> No-code customisations for Squarespace
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment