• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Position polygons over Flexbox

New Here ,
Nov 05, 2019 Nov 05, 2019

Copy link to clipboard

Copied

I have successfully created a flexbox.  However, I would like this flexbox to be positioned with the polygons over it like I have it in this image.  How can I code it to look the way it does in the image? I tried to do the flexbox right under the polygons, but it did not do the way it is supposed to.Screen Shot 2019-11-05 at 12.57.27 PM.png

TOPICS
Code

Views

312

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

LEGEND , Nov 05, 2019 Nov 05, 2019

Code example below, not really sure how you intend to re-configure the layout for mobile devices.

(No frameworks involved).

 

 

 

 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"> 
<title>Example</title>
<style>
* {
box-sizing: border-box;
}
body {
font-family: helvetica, sans-serif;
font-size: 14px;
}
.contact-info {
width: 60%;
margin: 0 auto;
}
.arrows {
display: flex;
justify-content: space-around;
position: relative;
z-index: 100;
}
.arrow-down {
width: 0; 
height: 0; 
border-left:
...

Votes

Translate

Translate
Community Expert ,
Nov 05, 2019 Nov 05, 2019

Copy link to clipboard

Copied

Please upload the test page  to your server and post the URL. 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Nov 05, 2019 Nov 05, 2019

Copy link to clipboard

Copied

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Nov 05, 2019 Nov 05, 2019

Copy link to clipboard

Copied

That's not a URL.   That's a file on your Macbook desktop which nobody can see except you.   You need to FTP the file and supporting assets to a public facing web server like  https: // yourdomain . com 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Nov 05, 2019 Nov 05, 2019

Copy link to clipboard

Copied

Unless you are willing to spend a lot of time coding rather than getting an outcome, it is best to use a framework that has all included. In my case I make grateful use of Bootstrap and if I were to design something similar to what you have, I would inlude a card like in https://getbootstrap.com/docs/4.0/components/card/#image-overlays which is based on Flexbox.

Wappler, the only real Dreamweaver alternative.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Nov 05, 2019 Nov 05, 2019

Copy link to clipboard

Copied

LATEST

Code example below, not really sure how you intend to re-configure the layout for mobile devices.

(No frameworks involved).

 

 

 

 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"> 
<title>Example</title>
<style>
* {
box-sizing: border-box;
}
body {
font-family: helvetica, sans-serif;
font-size: 14px;
}
.contact-info {
width: 60%;
margin: 0 auto;
}
.arrows {
display: flex;
justify-content: space-around;
position: relative;
z-index: 100;
}
.arrow-down {
width: 0; 
height: 0; 
border-left: 70px solid transparent;
border-right: 70px solid transparent;
border-top: 70px solid #acadad;
}
.contact {
display: flex;
margin-top: -36px;
min-height: 200px;
}
.contact-icons {
display: flex;
align-items: center;
justify-content: center;
width: 50%;
background-image: url('https://images.unsplash.com/photo-1507679799987-c73779587ccf');
background-size: cover;
background-position: center center;
}
.contact-icons a {
padding: 15px;
background-color: rgba(255, 255, 255, 0.7);
color: #000;
text-decoration: none;
margin: 0 4px;
border-radius: 8px;
}
.contact-text {
display: flex;
flex-direction: column;
justify-content: center;
width: 50%;
background-color: #0caa4b;
padding: 20px;
}	
.contact-text h3 {
margin: 0;
padding: 10px 0;
color: #fff;
font-size: 22px;
font-weight: 400;
} 
.contact-text h4 {
margin: 0;
padding: 10px 0;
color: #fff;
font-size: 16px;
font-weight: 400;
}
</style>
 </head>
 <body>
<section class="contact-info">
<div class="arrows">
<div class="arrow-down"></div>
<div class="arrow-down"></div>
<div class="arrow-down"></div>
</div>
<!-- end arrows -->
<div class="contact">
<div class="contact-icons">
<a href="#">Icon</a>
<a href="#">Icon</a>
<a href="#">Icon</a>
<a href="#">Icon</a>
</div>
<div class="contact-text">
<h3>Give Us A call or Email Us</h3>
<h4>864-334-8539</h4>
<h4>buxmxhoxsxgrxenvixlx@xmaxl.com</h4>
</div>
</div>
<!-- end contact -->
</section>
<!-- end contact-info -->
</body>
</html> 

 

 

 

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines