I'm trying to center a div on my screen by making its position absolute, setting its top value to 50%, and then subtracting the top margin by half of the div's height. I am using offsetHeight, but it seems that the height returned by the offsetHeight property is less than the actual height of the div element. (See screenshot below)
Is there a fix for this? Is there an alternative that I can do instead of this?
Thanks in advance.
The height returned by offsetHeight is 69 px instead of the actual height, which is 328.375px.
// Custom title
let customTitle = document.getElementById("title");
chrome.storage.sync.get("title", (result) => {
customTitle.textContent = result.title;
});
// Centering container
let container = document.getElementById("container");
container.style.marginTop = -container.offsetHeight / 2 + "px";
window.onresize = container.style.marginTop = -container.offsetHeight / 2 + "px";
pre {
color: white;
display: block;
font-family: 'Mulish', sans-serif;
font-weight: 800;
font-size: 96px;
margin-block-start: 0.2em;
margin-block-end: 0.2em;
margin-inline-start: 0px;
margin-inline-end: 0px;
}
.container {
position: absolute;
top: 50%;
left: 10%;
}
button {
width: 150px;
height: 50px;
border: none;
border: solid 2.7px white;
border-radius: 8px;
background: rgba(168, 166, 166, 0);
font-family: 'Mulish', sans-serif;
font-weight: 600;
font-size: 18px;
color: white;
cursor: pointer;
}
<!DOCTYPE html>
<html>
<head>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Mulish:wght#600;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="blocked.css">
</head>
<body>
<div id="container" class="container">
<pre id="title"></pre>
<button id="unblockButton">
Unblock
</button>
</div>
<script src="blocked.js"></script>
</body>
</html>
It can be done using styling like this, you don't need to use javascript at all.
.container {
position: absolute;
top: 50%;
transform: translateY(-50%); /* This moves container upword by its half height */
left: 10%;
}
Related
I wanted to make div height change with input so it can represent floors.
I dont really understand how to make a script variable represent an actual value, beacuse if i set
document.getElementById("height_representation_floors").setAttribute("style","height: height_floor ");
to change to 500px or so it works just as intended.
What can i do?
function calculus_meters() {
height_floor = 0
height_input_code_meters = document.getElementById("height_input").value
height_floor = height_input_code_meters / 2.7
document.getElementById("height_representation_floors").setAttribute("style","height: height_floor ");
document.getElementById("output").textContent = height_input_code_meters + ' meters of height is approximately ' + height_floor.toFixed(0) + ' floors of a regular living building'
}
function calculus_feet() {
height_floor = 0
height_input_code_feet = document.getElementById("height_input").value
height_floor = height_input_code_feet / 8.86
document.getElementById("output").textContent = height_input_code_feet + ' feet of height is approximately ' + height_floor.toFixed(0) + ' floors of a regular living building'
}
body {
margin: 0;
background: #595959;
height: 100%;
overflow-x: hidden;
}
#output {
position: absolute;
font: small-caps bold 24px/1 sans-serif;
background: white;
border: solid 2px black;
}
#button_1 {
position: absolute;
top: 3vh;
left: 62vw;
}
#button_2 {
position: absolute;
top: 3vh;
left: 69.7vw;
}
#height_representation_floors {
position: absolute;
top: 20vh;
height: 1100px;
width: 500px;
background-image: url(images/height_representation.png);
}
#height_representation_stickman {
position: absolute;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyles.css" media="screen" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<div id="house_2">
<div id="output" style="height: 5vh; width: 60vw; margin: 2vw; ">
</div>
<h1 style="position: absolute; left: 2vw; top: 8vh; text-align: left; font: small-caps bold 24px/1 sans-serif;"> Input wanted height: </h1>
<input type="number" step="any" id="height_input" style="position: absolute; margin: 2vw; top: 8vh; text-align: left; width: 60vw; height: 5vh; font-size: 2vw; border: solid 2px black;">
<div id="button_1">
<button type="button" onClick="calculus_meters()" style="width: 14.6vh; height: 14.6vh; border: solid 2px black; font-size: 1.5vw">Convert (in meters)</button>
</div>
<div id="button_2">
<button type="button" onClick="calculus_feet()" style="width: 14.6vh; height: 14.6vh; border: solid 2px black; font-size: 1.5vw">Convert (in feet)</button>
</div>
<div id="height_representation_floors">
</div>
</div>
</body>
</html>
You should use template literals to concatenate the variable into the string:
document.getElementById("height_representation_floors").setAttribute("style", height: `${height_floor}px`);
This will correctly insert the value of the variable height_floor into the string, so that the div's height will change based on the input value.
The issue with your code is that you are setting the "height" style attribute to the string "height_floor" instead of the value of the variable height_floor. To set the height of the div to the value of the height_floor variable, you should change the line of code to:
document.getElementById("height_representation_floors").setAttribute("style", "height: " + height_floor + "px;");
This will set the "style" attribute of the div to a string that includes the value of the height_floor variable followed by "px" to specify that the value is in pixels.
I want every element in my document to resize proportionally based on screen size and screen resizing..
please look at this Codepen.
and here is the article of the codepen.
In the Codepen you can see that the content is right at the center of the gray container and if you resize the gray container the content resizes proportionally and still at the center of the gray container right?
Now I want my whole document to behave like the gray container. the only difference is I want the content resize when the screen resizes not when user grab and resize the gray container. does it make sense?
So I created this container scale-container and I'll put every element inside it :
const $el = $("#scale-container");
const elHeight = $el.outerHeight();
const elWidth = $el.outerWidth();
window.addEventListener('resize', () => {
doResize();
});
function doResize(event, ui) {
let scale, origin;
scale = Math.min(getViewPortWidth() / elWidth, getViewPortHeight() / elHeight);
console.log(scale)
$el.css({ transform: `translate(-50%, -50%) scale(${scale})` });
function getViewPortWidth() {
return Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0)
}
function getViewPortHeight() {
return Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0)
}
}
doResize();
body {
background: #ccc;
overflow: hidden;
margin: 0;
}
.scale-container {
/*fill whole screen if it's 1920*1080 */
width: 1536px;
height: 864px;
text-align: center;
background: white;
position: relative;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
transform-origin: center center;
}
.ui-resizable-se {
width: 10px;
height: 10px;
background: orange;
position: absolute;
bottom: 0;
right: 0;
}
.bigred {
color: red;
font-size: 5rem;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="scale-container" id="scale-container">
<h1>I am designed just so.</h1>
<p>My design is intentional. I want to be scaled in such a way that scales the design. No reflows or anything, just straight up scaling. Kinda like SVG.</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/skull-and-crossbones.svg" alt="" />
<p class="bigred"> ✖ ✖ ✖ </p>
</div>
<script SRC="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js" TYPE="text/javascript"></script>
<script SRC="script.js" TYPE="text/javascript"></script>
</body>
</html>
The issue is obvious, I want scale-container to fill the whole screen when it's possible (when the aspect ratio doesn't change) and I want it at the center of the screen ...
How can I fix this?
Try using this. in ./iframe.html, just use viewport units and you should be fine.
* {
padding: 0px;
border: 0px;
margin: 0px;
}
html {
width: 100vw;
height: 100vh;
}
body {
width: 100vw;
background-color: rgb(19, 19, 19);
}
div#mainContainer {
margin: calc((100vh - ((6/7) * 100vw)) / 2) 0px;
width: 100vw;
height: calc((6/7) * 100vw);
background-color: rgb(180, 180, 180);
z-index: 1;
}
iframe {
width: 100%;
height: 100%;
}
#media only screen and (min-aspect-ratio: 7/6) {
div#mainContainer {
margin: 0px calc((100vw - ((7/6) * 100vh)) / 2);
width: calc((7/6) * 100vh);
height: 100vh;
}
}
<html>
<head>
<title></title>
</head>
<body>
<div id="mainContainer">
<iframe src="./iframe.html"></iframe>
</div>
</body></html>
I have some code working to make 2 div tags visible only when another div is clicked (an attempt to make a custom title bar)The 2 divs are invisible initially.
const {remote} = require('electron');
var win = remote.getCurrentWindow();
win.setSize(810,610);
function max(){
var win = remote.getCurrentWindow();
if(win.isMaximized()){
win.unmaximize();
document.getElementById('file').style.right = "744px";
document.getElementById('about_us').style.right = "664px";
}else{
win.maximize();
document.getElementById('file').style.right = "1314px";
document.getElementById('about_us').style.right = "1234px";
}
}
hidden = true;
function get(el){
return document.getElementById(el);
}
function open_file_menu(){
var fileMenu = [get('file_menu'),get('file_menu2')];
if (hidden == false){
for (i = 0;i<fileMenu.length;i++){
fileMenu[i].style.visibility = 'hidden';
hidden = true;
}
}
else{
for (i = 0;i<fileMenu.length;i++){
fileMenu[i].style.visibility = 'visible';
hidden = false;
}
}
}
body,html{
width: 47.5pc;
height: 100pc;
overflow: hidden;
-webkit-app-region:drag;
z-index: 0;
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: monospace;
z-index: 1;
}
#container{
width: 100pc;
height: 100pc;
display: block;
position: absolute;
right: 40px;
top: 0;
}
#container nav{
display: grid;
width: 100pc;
height: 2.2pc;
background-color: #333333;
z-index: 1;
}
span{
position: absolute;
top:0;
transform: translateX(100px);
color:#dacbcb;
font-size: 1.5em;
font-weight:bold;
background-color: #222222;
padding-left: 25px;
padding-right: 25px;
padding-top: 7px;
padding-bottom: 6px;
transition: ease-in-out 1ms;
-webkit-app-region:no-drag;
}
#buttons{
position: absolute;
right: 120px;
}
#maximize{
transform: translateX(-124px);
}
#maximize span:hover,#minimize:hover span,.menu1:hover,.menu2:hover{
background-color: #333333;
}
#file{
position: absolute;
right:743px;
}
#about_us{
position: absolute;
right:663px;
#run{
transform: translateY(100px);
}
.menu1{
font-size: 1.1em;
padding-left: 25px;
padding-right: 25px;
padding-top: 10px;
padding-bottom: 8px;
}
.menu2{
font-size: 1.1em;
padding-left: 25px;
padding-right: 25px;
padding-top: 10px;
padding-bottom: 8px;
}
#file_menu{
visibility: hidden;
background-color: #222222;
transform: translateY(34px);
font-size: 1.1em;
}
#file_menu2{
visibility: hidden;
background-color: #222222;
transform: translateY(63px);
font-size: 1.1em;
padding-left: 25px;
padding-right: 17px;
padding-top: 7px;
padding-bottom: 6px;
}
.fm{
z-index: 2;
}
#file_menu:hover,#file_menu2:hover{
background-color: #333333;
}
<!DOCTYPE html>
<html>
<head>
<script src="init.js"></script>
<script src="text_editor.js"></script>
<meta charset="UTF-8">
<title>Extorc App</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div onclick="uff()">
<span id = "file_menu" class = "fm">new</span>
</div>
<div>
<span id = "file_menu2" class = "fm">open</span>
</div>
<div id="container">
<nav>
<div id="buttons">
<div id="file" onclick="open_file_menu()">
<span class = "menu1">file</span>
</div>
<div id="about_us">
<span class = "menu2">about..us</span>
</div>
<div id="maximize" onclick="max()">
<span>+</span>
</div>
</div>
</nav>
</div>
</body>
</html>
The code works ... the menu opens up with 2 divs displaying but the divs are un clickable or probably totally passive (i have set a :hover background color in my css)Though , this problem ends if i open the 2 divs and then maximize the window..then they become interactable and then after minimizing also they work which means the divs are un-interactable initially but then after one maximize , they work...any fix for that....should i not use visibility here?
Edit Not only by fullscreen but also if i resize the window , the buttons start working , and starting the window as fullscreen : true, doesnt make it work
You cannot put all the body as draggable: -webkit-app-region:drag; on body,html
You will have to define a specific area where it defined as draggable.
My recommendation define a specific area / SVG that means drag and don't put clickables on it.
E.g take a look at known electron products (VSCODE, Slack) you have specific regions from which you can drag from.
Hope I have helped.
I do this :
I need to separate the circle , I want to draw something like dart game, and I need to calculate the time that mouse still inside the circle.
If you can help me to do this ?
And how to make this responsive with mobile ?
And can any one build like this with android or react ?
html :
<body>
<div id="outer-circle" onmouseover="stext()" onmouseout="rest1()">
<div id="inner-circle" onmouseover="htext()" onmouseout="stext()">
<div id="inner-circle1" onmouseover="htext()" onmouseout="stext()">
</div>
</div>
</div>
</body>
css :
#outer-circle {
background: #385a94;
border-radius: 50%;
height: 500px;
width: 500px;
position: relative;
/*
Child elements with absolute positioning will be
positioned relative to this div
*/
}
#inner-circle {
position: absolute;
background: #a9aaab;
border-radius: 50%;
height: 300px;
width: 300px;
/*
Put top edge and left edge in the center
*/
top: 50%;
left: 50%;
margin: -150px 0px 0px -150px;
/*
Offset the position correctly with
minus half of the width and minus half of the height
*/
}
js:
function stext() {
var x = document.getElementById("outer-circle");
x.style.background = 'blue';
}
function rest1() {
var x = document.getElementById("outer-circle");
x.style.background = '#385a94';
}
function htext() {
var x = document.getElementById("outer-circle");
var y = document.getElementById("inner-circle");
y.style.background = 'red';
x.style.background = 'blue';
}
You can use Date.now() at two times (mouseover & mouseout) and calculate difference.
Get time difference between two dates in seconds
Edit:
Here's the code. It's responsive and it haves perfectly centered circles.
css transform
css units (length)
Enjoy your code!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>asd</title>
<style>
body {
margin: 0px;
}
#outer-circle {
background: #385a94;
border-radius: 50%;
height: 100vmin;
width: 100vmin;
position: relative;
margin: auto;
}
#middle-circle {
position: absolute;
background: #a9aaab;
border-radius: 50%;
height: 60vmin; /*responsive */
width: 60vmin;
top: 50%;
left: 50%;
transform: translate(-50%,-50%); /*center the circle*/
}
#inner-circle {
position: absolute;
background: #f99;
border-radius: 50%;
height: 20vmin;
width: 20vmin;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
</style>
</head>
<body>
<div id="outer-circle" onmouseover="stext()" onmouseout="rest1()">
<div id="middle-circle" onmouseover="htext()" onmouseout="stext()"></div>
<div id="inner-circle" onmouseover="htext()" onmouseout="stext()"></div>
</div>
</body>
</html>
I would like to create a circle (without any animation) which is surrounded by other circles, like this:
but i would like to build in a phonegap app, so i don't want to increase the file size to big.
somebody know a plugin/method or any other solution?
I searched on the internet, but the methods i found are increase the size of my files too big.
No one addressed the javascript aspect of this question. Below is a complete (albeit quick and dirty) web page that will draw 6 perfectly spaced circles around a parent circle's center using html, css3, and javascript; it uses pure javascript so no need to reference a jquery library. You should be able to see how you could easily extract methods from the code to control the number of satellite circles, their distance from the center of the parent, parent and satellite radii, satellite offset, etc:
var div = 360 / 6;
var radius = 150;
var parentdiv = document.getElementById('parentdiv');
var offsetToParentCenter = parseInt(parentdiv.offsetWidth / 2); //assumes parent is square
var offsetToChildCenter = 20;
var totalOffset = offsetToParentCenter - offsetToChildCenter;
for (var i = 1; i <= 6; ++i) {
var childdiv = document.createElement('div');
childdiv.className = 'div2';
childdiv.style.position = 'absolute';
var y = Math.sin((div * i) * (Math.PI / 180)) * radius;
var x = Math.cos((div * i) * (Math.PI / 180)) * radius;
childdiv.style.top = (y + totalOffset).toString() + "px";
childdiv.style.left = (x + totalOffset).toString() + "px";
parentdiv.appendChild(childdiv);
}
#parentdiv {
position: relative;
width: 150px;
height: 150px;
background-color: #ac5;
border-radius: 150px;
margin: 150px;
}
.div2 {
position: absolute;
width: 40px;
height: 40px;
background-color: #ac5;
border-radius: 100px;
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<div id="parentdiv"></div>
</body>
</html>
To make a circle, use border-radius: 50%. Then just position 6 circular divs with position: absolute around the larger circle.
Kind of like this: http://jsfiddle.net/yxVkk/
<div id="big-circle" class="circle big">
<div class="circle one"></div>
<div class="circle two"></div>
<div class="circle three"></div>
<div class="circle four"></div>
<div class="circle five"></div>
<div class="circle six"></div>
</div>
<style>
.circle {
border-radius: 50%;
width: 50px;
height: 50px;
background-color: red;
display: inline-block;
position: absolute;
}
.circle.big {
width: 150px;
height: 150px;
background-color: blue;
margin: 100px;
}
.one {
left: -25px;
top: -25px;
}
.two {
top: -60px;
left: 50px;
}
.three {
right: -25px;
top: -25px;
}
.four {
left: -25px;
bottom: -25px;
}
.five {
bottom: -60px;
left: 50px;
}
.six {
right: -25px;
bottom: -25px;
}
</style>
Using css you can try something like that. but use circle tag of HTML5 will give you a better result.
http://jsbin.com/etuzis/1/
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div class=div2 style='top:12px; left:45px;'></div>
<div class=div2 style='top:4px; left:160px;'></div>
<div class=div2 style='top:94px; left:210px;'></div>
<div class=div1></div>
</body>
</html>
CSS
.div1{
margin:40px 10px 10px 50px;
position:relative;
width:150px;
height:150px;
background-color:#ac5;
border-radius:100px;
}
.div2{
position:absolute;
width:40px;
height:40px;
background-color:#ac5;
border-radius:100px;
}
Adding border-radius:50% to a <div> that has an equal with and height then putting a background-color on it will make a circle out of CSS (light load).
.big_circle {
width:10em;
height:10em;
border-radius:50%;
background-color:blue;
}
You can then absolutely position the circle directly in the middle of the screen by using the position:absolute and negative margin trick.
.big_circle {
width:10em;
height:10em;
border-radius:50%;
background-color:blue;
position:absolute;
top:50%;
left:50%;
margin-left:-5em;
margin-top:-5em;
}
Create a class to take care of the styling for the smaller circles.
.little_circle {
width:3em;
height:3em;
border-radius:50%;
background-color:green;
position:relative;
}
Then add IDs (or any other way of identifying them) to position the relatively compared to the big circle.
#little_one {
bottom:1em;
right:2em;
}
#little_two {
bottom:6.5em;
left:3.5em;
}
#little_three {
bottom:7em;
left:9em;
}
// etc...
Here's a CodePen with a sample.
As somebody said in the comments, you have to set border-radius:50% and then, positioning absolutely. I've made a dummy jsfiddle for illustrate link:
circle{
width : 50px;
height : 50px;
border-radius : 50%;
background: red;
position : absolute;
top : 50px;
left : 150px;
}
.small_circle_1{
width : 20px;
height : 20px;
border-radius : 50%;
background: blue;
position : absolute;
top : -25px;
left : 15px;
}
.small_circle_2{
width : 20px;
height : 20px;
border-radius : 50%;
background: blue;
position : absolute;
top : 15px;
left : -25px;
}
.small_circle_3{
width : 20px;
height : 20px;
border-radius : 50%;
background: blue;
position : absolute;
top : 55px;
left : 15px;
}
.small_circle_4{
width : 20px;
height : 20px;
border-radius : 50%;
background: blue;
position : absolute;
top : 15px;
left : 55px;
}
To display a radial array of items, center them and use trigonometry to rotate them around the center. This assumes all the items share the same width and height.
Notes about this approach:
Multiple radials can reuse the JS function in a wide variety of configurations
There should only be one .radial_center (though the code could be updated to allow multiple layered centers, taking the diameter of the largest for calculations)
There can be multiple .radial_edge items, and the function automatically adjusts the angle of rotation
Trig functions and coefficients are adjusted so the first edge is always on top
data fields in the .radial wrapper can manually set diameters for the center and edge items, as well as the percentage gap between them, which calculates to the radius for the edge items from the center item
The center item can be hidden to create a "ring only" effect, though the center still needs to exist
Yes, any code written in jQuery or any other lib can be re-written in vanilla (or asm or binary). I just used jQuery for my own convenience :)
const ns = {
radial: (r) => {
//capture radial edges
let el = $(r),
e = el.children('.radial_edge');
//avoid div zero
if (e.length) {
//calc orbital angle and radius
let c = el.children('.radial_center'),
sa = -360 / e.length, //-360 rotates clockwise, 360 rotates counter
i = 0, //0 sets first child at top
cw = el.data('center') || c.width() || 100,
ew = el.data('edge'),
gap = el.data('gap') || .2;
//calc x,y and reposition each edge
e.each(function() {
let re = $(this),
ewa = ew || re.width() || 50,
rad = (cw + ewa) * (1 + gap),
x = Math.cos((sa * i) * (Math.PI / 180)) * rad * -1, //-1 flips vertically
y = Math.sin((sa * i) * (Math.PI / 180)) * rad * -1;
re.css({
inset: x + 'px 0 0 ' + y + 'px'
});
i++;
});
}
}
}
$(document).ready(() => {
//parse each radial group
$('.radial').each(function() {
ns.radial(this);
});
});
:root {
/* decorative */
--bs: 1px 1px 3px 0px grey;
--b-soft: thin solid silver;
font-family: monospace;
color: gray;
}
img {
display: block;
}
.hidden {
display: none;
}
.examples {
display: flex;
flex-wrap: wrap;
}
.radial {
/* required */
position: relative;
/* dev only */
margin: 1em auto;
border: 1px solid lightgray;
width: 350px;
aspect-ratio: 1/1;
border-radius: 50%;
}
.radial_center {
/* required */
width: fit-content;
aspect-ratio: 1/1;
position: absolute;
inset: 50%;
transform: translate(-50%, -50%);
/* decorative */
border-radius: 50%;
box-shadow: var(--bs);
border: var(--b-soft);
}
.radial_edge {
/* required */
position: absolute;
width: 50px;
aspect-ratio: 1/1;
margin: auto;
/* decorative */
border-radius: 50%;
box-shadow: var(--bs);
border: var(--b-soft);
opacity: .7;
display: flex;
justify-content: center;
align-items: center;
font-weight: 500;
font-size: 2em;
}
.bigger .radial_center {
width: 150px;
}
.bigger .radial_edge {
width: 100px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="examples">
<div class="radial" data-gap=".3">
<img class="radial_center" src="https://picsum.photos/100" alt="center image" />
<div class="radial_edge">1</div>
<div class="radial_edge">2</div>
<div class="radial_edge">3</div>
<div class="radial_edge">4</div>
<div class="radial_edge">5</div>
</div>
<div class="radial bigger" data-gap=".05">
<img class="radial_center" src="https://picsum.photos/150" alt="center image" />
<img class="radial_edge" src="https://picsum.photos/100" alt="satellite image" />
<img class="radial_edge" src="https://picsum.photos/100" alt="satellite image" />
<img class="radial_edge" src="https://picsum.photos/100" alt="satellite image" />
</div>
<div class="radial" data-center="75" data-edge="75">
<div class="radial_center hidden"></div>
<div class="radial_edge">1</div>
<img class="radial_edge" src="https://picsum.photos/50" alt="satellite image" data-pos="1" />
<div class="radial_edge">3</div>
<img class="radial_edge" src="https://picsum.photos/50" alt="satellite image" data-pos="2" />
<div class="radial_edge">5</div>
<img class="radial_edge" src="https://picsum.photos/50" alt="satellite image" data-pos="3" />
</div>
</div>