Develop Reference

How to make my red circle always stays on the green line using html and css code?

I have a webpage like this:
Its code can be found here in JSFiddle
<div class="arrow">
<div class="line"></div>
<div class="triangle"></div>
</div>
<div id="warmup_container">
<p id="warmup_title">這是中文</p>
<div id="warmup_mark"></div>
<p id="warmup_text">some text </p>
</div>
:root {
--arrow-body-length: 500px;
--arrow-tip-length: 30px;
}
.arrow {
position: absolute;
top: 42%;
width: var(--arrow-body-length) + var(--arrow-tip-length);
}
.line {
margin-top: 11px;
width: var(--arrow-body-length);
background: green;
height: 9px;
float: left;
}
.triangle {
width: 0;
height: 0;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-left: var(--arrow-tip-length) solid green;
float: right;
}
#warmup_container {
height: 200px;
display: flex;
flex-direction: column;
align-items: center;
position: absolute;
top: 8%;
}
#warmup_title {
text-align: center;
margin-top: 0px;
writing-mode: vertical-rl;
}
#warmup_mark {
width: 20px;
height: 20px;
background-color: red;
border-radius: 50%;
margin-top: 10px;
margin-bottom: -10px;
}
#warmup_text {
text-align: center;
width: 200px;
}
My problem is that when I add more characters into warmup_title, the red circle would not stay on the green line.
How can I change my code so that the red circle always stays on the green line no matter how many characters I type in warmup_title element?
The red circle might also not stay on the green line when I change the size of the window of my browser.

Try this:
:root {
--arrow-body-length: 500px;
--arrow-tip-length: 30px;
}
.arrow {
display: inline-flex;
position: absolute;
bottom: 40%;
width: var(--arrow-body-length) + var(--arrow-tip-length);
}
.line {
margin-top: 11px;
width: var(--arrow-body-length);
background: green;
height: 9px;
float: left;
}
.triangle {
width: 0;
height: 0;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-left: var(--arrow-tip-length) solid green;
float: right;
}
#warmup_container {
height: 200px;
display: flex;
flex-direction: column;
align-items: center;
position: absolute;
top: 8%;
}
#warmup_title {
text-align: center;
margin-top: 0px;
writing-mode: vertical-rl;
}
#warmup_mark {
width: 20px;
height: 20px;
background-color: red;
border-radius: 50%;
margin-top: 10px;
margin-bottom: -10px;
z-index: 10;
}
#warmup_text {
text-align: center;
width: 200px;
}
<div id="warmup_container">
<p id="warmup_title">這是中文abc</p>
<div id="warmup_mark"></div>
<p id="warmup_text">some text </p>
<div class="arrow">
<div class="line"></div>
<div class="triangle"></div>
</div>
</div>

Your idea of fixing the green line is right, but it shouldn't use the top property, since the text can be extend, so it will break the visual. Instead make it bottom to anchor it at the end; also remove the height: 200px, add an outer div with position: relative to contain the absolute one.
About the breaking arrow when changing window size, i think make it width: 100% with a max-width to contain the width of it done better job than fixing it right away, so it can responsive with the screen size.
:root {
--arrow-body-length: calc(100% - 30px);
--arrow-tip-length: 30px;
}
.container {
position: relative;
}
.arrow {
position: absolute;
bottom: 35px;
width: var(--arrow-body-length) + var(--arrow-tip-length);
width: 100%;
max-width: 500px;
}
.line {
margin-top: 11px;
width: var(--arrow-body-length);
background: green;
height: 9px;
float: left;
}
.triangle {
width: 0;
height: 0;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-left: var(--arrow-tip-length) solid green;
float: right;
}
#warmup_container {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
}
#warmup_title {
text-align: center;
margin-top: 0px;
writing-mode: vertical-rl;
}
#warmup_mark {
width: 20px;
height: 20px;
background-color: red;
border-radius: 50%;
margin-top: 10px;
margin-bottom: -10px;
}
#warmup_text {
text-align: center;
width: 200px;
}
<div class="container">
<div class="arrow">
<div class="line"></div>
<div class="triangle"></div>
</div>
<div id="warmup_container">
<p id="warmup_title">這是中文abc def</p>
<div id="warmup_mark"></div>
<p id="warmup_text">some text </p>
</div>
</div>

HTML/CSS - ScrollBar missing

Problem:
The scrollbar is missing on my (social-media) website. It's because of the "position: fixed;" thing. Everything was fine before. I tried to set overflow to "overflow: auto;" where I set "position: fixed". But it only made things worse, and still... no scrollbar.
I tried to create two different divs (one for a menu, with pages etc. (class: "row") and other for user stuff (settings, inbox, profile etc.) (class: "row2"))).
HTML:
<body>
<!-- HEADER, LOGO, SLOGAN, HR -->
<header>
<h1>PTRN</h1>
<h2>something</h2>
<hr class="headerhr">
</header>
<!-- SIDE BAR 1 -->
<div class="container">
<div class="row">
#1
#2
#3
#4
#5
#6
#7
#8
#9
#10
<div class="searchbar">
<p class="searchplaceholder">Search</p>
</div>
</div>
</div>
<!-- SIDE BAR 2 -->
<div class="container2">
<img class="menu1" src="file:///C:/Users/calex/Downloads/download.%20(1).jpg">
<div class="row2">
Inbox
Notifications
Meetings
Inbox
<p class="shared">Shared</p>
Documents
Photos
<div class="row2_2">
Settings
Help & Contact
</div>
</div>
<!-- POST SAMPLE -->
<div class="container3">
<img src="https://tiffanieanne.com/wp-content/uploads/2020/08/Batter-Spencer-Best-Views-in-San-Francisco-SF-Instagram-Worthy-Photo-Spots-SF-Photography-tiffanieanne.com_-768x954.jpg" alt="San Francisco, CA, USA">
<div class="container4">
<p class="username_post">Chita Cosmin</p>
<p class="jobb">Founder & CEO of Pictoren Platforms, Inc. since 2020</p>
<img class="prpic" src="https://images.unsplash.com/photo-1540512663861-0dcbe11ab7a3?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1yZWxhdGVkfDE1fHx8ZW58MHx8fHw%3D&w=1000&q=80" alt="Profile Pic">
<div class="container5">
<b class="fakebutton">Info</b>
</div>
</div>
</div>
CSS:
#import url("https://cdn.jsdelivr.net/npm/bootstrap-icons#1.3.0/font/bootstrap-icons.css");
/* BODY */
body {
margin: 0;
padding: 0;
font-family: Helvetica, Sans-Serif;
background: #a9c4db;
}
/* BACKGROUND NOTE: #acb6b7 */
/* LOGO AND SLOGAN */
h1 {
font-size: 50px;
text-transform: uppercase;
font-weight: 900;
letter-spacing: 7px;
position: absolute;
top: 6%;
left: 50%;
transform: translate(-50%,-50%);
margin: 0;
background: url(https://data.whicdn.com/images/342108134/original.gif);
background-size: cover;
-webkit-text-fill-color:transparent;
-webkit-background-clip:text;
}
h2 {
font-size: 10px;
font-weight: 900;
letter-spacing: 2px;
position: absolute;
top: 70px;
left: 49.5%;
transform: translate(-50%,-50%);
margin: 0;
background: url(https://data.whicdn.com/images/342108134/original.gif);
background-size: cover;
-webkit-text-fill-color:transparent;
-webkit-background-clip:text;
}
/* HEAEDER SEPARATOR */
.headerhr {
border: none;
height: 3px;
width: 40.6cm;
background-color: #9700FF;
margin-top: 90px;
}
/* HEADER */
header {
display: flex;
flex-wrap: wrap;
height: 90px;
background-color: black;
justify-content: space-between;
align-items: center;
}
/* SIDE BAR 1 */
.container {
position: fixed;
top: 110px;
left: 40px;
background-color: white;
height: 800px;
width: 280px;
border-radius: 22px;
overflow: auto;
}
.row {
display: flex;
flex-direction: column;
font-size: 15px;
position: fixed;
left: 87px;
top: 190px;
overflow: auto;
}
.row a:link {
color: black;
background-color: transparent;
text-decoration: none;
}
.searchbar {
position: fixed;
background-color: #f9f9f9;
border-radius: 5px;
border-style: solid;
border-width: 2px;
border-color: #d9d9d9;
z-index: 4000;
top: 150px;
width: 180px;
height: 37px;
top: 135px;
overflow: auto;
}
.searchplaceholder {
position: fixed;
font-size: 13px;
color: #8a8a8a;
top: 135px;
left: 95px;
overflow: auto;
}
.container bi-house {
position: absolute;
left: 50%;
size: 250px;
}
/* SIDE BAR 2 */
.container2 {
position: fixed;
top: 110px;
right: 40px;
background-color: white;
height: 800px;
width: 280px;
border-radius: 22px;
overflow: auto;
}
.row2 {
display: flex;
flex-direction: column;
font-size: 18px;
position: fixed;
right: 180px;
overflow: auto;
}
.row2 a:link {
color: black;
background-color: transparent;
text-decoration: none;
}
.shared {
opacity: 40%;
color: black;
font-size: 14px;
}
.row2_2 {
display: flex;
flex-direction: column;
font-size: 18px;
position: fixed;
right: 160px;
bottom: 50px;
overflow: auto;
}
.menu1 {
position: fixed;
max-width: 100%;
max-height: 100%;
float: right;
border-radius: 22px;
margin-top: 0%;
z-index: 2000;
margin-left: 1%;
border-width: 1px;
border-color: white;
overflow: auto;
}
/* POST SAMPLE */
.container3 {
position: absolute;
top: 2px;
right: 147%;
background-color: white;
height: 700px;
width: 640px;
border-radius: 22px;
}
img {
max-width: 100%;
max-height: 100%;
float: right;
margin-top: 15.43%;
border-radius: 22px;
margin-right: 5.6%;
border-width: 1px;
border-style: solid;
border-color: #efeded;
}
.container4 {
position: absolute;
top: 24px;
right: 5%;
background-color: white;
height: 70px;
width: 570px;
border-radius: 22px;
border-width: 2px;
border-style: solid;
border-color: #efeded;
z-index: 999;
}
.username_post {
position: fixed;
font-size: 18px;
font-weight: 600;
right: 860px;
top: 137px;
overflow: auto;
}
.prpic {
position: fixed;
max-width: 10%;
max-height: 10%;
float: left;
top: -100px;
left: 500px;
border-radius: 100%;
clip-path: circle();
overflow: auto;
}
.jobb {
position: fixed;
color: #878787;
font-size: 13px;
top: 165px;
left: 561px;
overflow: auto;
}
.fakebutton{
position: fixed;
font-size: 17px;
transform: translate(-50%,-50%);
margin: 0;
background: url(https://data.whicdn.com/images/342108134/original.gif);
background-size: cover;
-webkit-text-fill-color:transparent;
-webkit-background-clip:text;
top: 174px;
right: 500px;
z-index: 1001;
overflow: auto;
}
.container5 {
position: absolute;
z-index: 1000;
background-color: white;
height: 30px;
width: 65px;
border-radius: 17px;
border-width: 2px;
border-style: solid;
border-color: #9700FF;
right: 12px;
top: 19px;
}

If you want 'overflow' to work, then try adding 'max-height' property to that element in your css code.

Fitting text within parent div

I've been working on this for weeks and can't even seem to reproduce the problem in a consistent way.
I need to make sure the text in my buttons is as large as possible without extending outside of the parent div. I've tried 5-10 fitty/fitText type plug-ins and none of them are working properly, and the text either shrinks or expands way too big.
I've created this codepen to show the problem with it being too big:
https://codepen.io/TheNomadicAspie/pen/WNjRpOQ
I had to use an online link to jQuery and fitText. The weird thing is, if I copy the exact same code to JSfiddle, everything works perfectly:
https://jsfiddle.net/TheNomadicAspie/3yjw8kbt/7/
This is exactly how I want it to look, it's perfect. But when I run it in VS Code with a live server (Only difference being a local file instead of a link), it looks like the codepen and expands outside of the div:
I uploaded the fitText and jQuery links myself so I know they're the same version, and with the exact same code it doesn't work on Codepen or on my VS Code, but it does work on JS Fiddle. How can that be, and how can I make my code work the same way as it does on JS Fiddle?
Here's my code in case the Codepen or JS Fiddle changes.
<div id="screen" , class="screen">
<div id="menu_bar" , class="menu-bar">
<div id="logo" , class="logo">
<img src="logo.png" />
</div>
<div id="title" , class="title">Title</div>
<div id="menu_button" , class="menu-button">
<img src="menu.png" />
</div>
</div>
<div id="display" , class="display">
<div id="speech_bubble" , class="speech-bubble">
<div id="logo_animation" , class="logo-animation"><img src="https://media2.giphy.com/media/E0SE1bDv0sTbCH4p6V/giphy.gif?cid=790b761143fe1cebe2466c26bfb82fc6b178eb7ecad3874e&rid=giphy.gif"/></div>
<div id="question" class="question resize">
<div id="question_text" class="question-text">
<span>This is some test text</span>
</div>
</div>
<div id="speech_bubble_middle_bar" class="speech-bubble-middle-bar">
<input type="text" id="input-text" class="input-text" />
</div>
<div id="speech_bubble_bottom_bar" class="speech-bubble-bottom-bar">
<div id="left" class="left-button-container">
<button id="left_button" class="button resize">Wow!</button>
</div>
<div id="right_button_container" class="right-button-container">
<button id="right_button" class="button resize">Next</button>
</div>
</div>
</div>
<div id="bottom_bar" , class="bottom-bar">
<div id="character" , class="character">
</div>
<div id="bottom_display" , class="bottom-display">
<div id="answers_display" , class="answers-display">
<div id="answer_container_1" , class="answer-button-1">
<div id="answer_checkbox_1" , class="checkbox">
</div>
<div id="answer_button_container_1" , class="answer-button-container">
<button id="answer_button_1" , class="button pushable resize">
<span class="front">Super long button times four five six seven</span>
</button>
</div>
</div>
<div id="answer_container_2" , class="answer-button-2">
<div id="answer_checkbox_2" , class="checkbox">
</div>
<div id="answer_container_2" , class="answer-button-container">
<button id="answer_button_2" , class="button pushable resize">
<span class="front">Button 2</span>
</button>
</div>
</div>
<div id="answer_container_3" , class="answer-button-3">
<div id="answer_checkbox_3" , class="checkbox">
</div>
<div id="answer_container_3" , class="answer-button-container">
<button id="answer_button_3" , class="button pushable resize">
<span class="front">Button 3</span>
</button>
</div>
</div>
<div id="answer_container_4" , class="answer-button-4">
<div id="answer_checkbox_4" , class="checkbox">
</div>
<div id="answer_container_4" , class="answer-button-container">
<button id="answer_button_4" , class="button pushable resize">
<span class="front">Button 4</span>
</button>
</div>
</div>
</div>
<div id="menu_display" , class="menu-display">
<div id="menu_container_1" , class="menu-button-1">
<div id="menu_button_container_1" , class="menu-button-container">
<button id="menu_button_1" , class="button resize">Restart</button>
</div>
</div>
<div id="menu_container_2" , class="menu-button-2">
<div id="menu_button_container_2" , class="menu-button-container">
<button id="menu_button_2" , class="button resize">Options</button>
</div>
</div>
<div id="menu_container_3" , class="menu-button-3">
<div id="menu_button_container_3" , class="menu-button-container">
<button id="menu_button_3" , class="button resize">More Info</button>
</div>
</div>
<div id="menu_container_4" , class="menu-button-4">
<div id="menu_button_container_4" , class="menu-button-container">
<button id="menu_button_4" , class="button resize">Log out</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://filebin.net/ykl05vxy49xx5vxp/jquery.min.js"></script>
<script src="https://filebin.net/ykl05vxy49xx5vxp/jquery.fittext.js"></script
* {
-webkit-box-sizing: border-box;
-mo-box-sizing: border-box;
box-sizing: border-box;
}
html,
body {
position: fixed;
height: 100%;
background-color: #311049;
font-size: 2vh;
margin: 0 auto;
}
.screen {
position: absolute;
height: 100%;
}
.menu-bar {
display: grid;
grid-template-columns: 33.33% 33.33% 33.33%;
position: relative;
height: 13.714%;
width: 100vw;
top: 0%;
text-align: center;
}
.logo {
grid-column: 1/2;
position: relative;
height: 100%;
}
.logo img {
position: absolute;
height: auto;
max-height: 95%;
max-width: 95%;
left: 50%;
right: 50%;
top: 50%;
bottom: 50%;
transform: translate(-50%, -50%);
}
.title {
grid-column: 2/3;
position: relative;
color: #f5f5f5;
height: 100%;
width: 100%;
margin: 0 auto;
text-align: center;
justify-content: center;
align-items: center;
font-family: hack;
font-size: clamp(2vw, 8vw, 10vh);
display: flex;
top: 0%;
}
.menu-button {
grid-column: 3/4;
position: relative;
height: 100%;
}
.menu-button img {
position: absolute;
height: auto;
max-height: 75%;
max-width: 75%;
left: 50%;
right: 50%;
top: 50%;
bottom: 50%;
transform: translate(-50%, -50%);
}
.display {
position: relative;
height: 86.286%;
width: 100vw;
}
.speech-bubble {
display: grid;
grid-template-rows: 60% 20% 20%;
position: relative;
background-color: #f5f5f5;
height: 61.8%;
width: 90vw;
margin: auto;
border-radius: 2em;
z-index: 10;
padding-bottom: 1em;
}
.speech-bubble:after {
content: '';
position: absolute;
bottom: 0;
left: 15vw;
width: 0;
height: 0;
border: 4em solid transparent;
border-top-color: #f5f5f5;
border-bottom: 0;
margin-left: -2em;
margin-bottom: -2em;
z-index: -1;
}
.logo-animation {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: flex;
align-items: center;
justify-content: center;
padding-bottom: 10%;
padding-top: 10%;
padding-left: 10%;
padding-right: 10%;
display: none;
}
.logo-animation img {
height: 100%;
object-fit: contain;
margin-left: auto;
margin-right: auto;
}
.question {
grid-rows: 1/2;
position: relative;
font-size: 3vh;
padding-left: 0.5em;
padding-right: 0.5em;
padding-top: 0.5em;
padding-bottom: 0.5em;
}
.question-text {
height: 100%;
width: 100%;
overflow: auto;
}
.speech-bubble-middle-bar {
grid-rows: 2/3;
padding-left: 1%;
padding-right: 1%;
padding-top: 1%;
padding-bottom: 1%;
}
.input-text {
visibility: hidden;
width: 100%;
height: 100%;
border-radius: 2.5em;
border: 0.25em solid black;
padding: 1%;
font-size: 2em;
text-align: center;
}
.speech-bubble-bottom-bar {
grid-rows: 3/4;
display: grid;
grid-template-columns: 50% 50%;
position: relative;
width: 100%;
}
.left-button-container {
position: absolute;
height: 100%;
width: 38.2%;
left: 0%;
margin-left: 1em;
}
.left-button-container button {
width: 100%;
font-size: 2em;
}
.right-button-container {
position: absolute;
height: 100%;
width: 38.2%;
right: 0%;
margin-right: 1em;
}
.right-button-container button {
width: 100%;
font-size: 2em;
}
.bottom-bar {
display: grid;
grid-template-columns: 38.2% 61.8%;
position: relative;
height: 38.2%;
width: 100vw;
bottom: 0%;
}
.character {
grid-columns: 1/2;
position: relative;
background-image: url('character.png');
background-size: contain;
background-repeat: no-repeat;
background-position-y: bottom;
background-position-x: center;
margin-left: 4%;
margin-right: 4%;
margin-top: 3em;
}
.character img {
position: absolute;
max-height: 80%;
max-width: 90%;
bottom: 0%;
margin-left: 4%;
margin-right: 4%;
}
.bottom-display {
grid-columns: 2/3;
position: relative;
height: 100%;
padding-right: 5vw;
padding-top: 1%;
padding-bottom: 3%;
}
.answers-display {
display: grid;
gap: 1%;
height: 99%;
max-height: 99%;
grid-template-columns: repeat(auto-fill, minmax(clamp( 28vw, 45vmin, 35vw ), 1fr));
grid-auto-rows:1fr;
height:100%;
}
.menu-display {
display: grid;
grid-auto-rows:1fr;
grid-template-columns: repeat(auto-fill, minmax(clamp( 28vw, 45vmin, 35vw ), 1fr));
height: 100%;
gap: 1%;
display: none;
}
.answer-button-1 {
grid-rows: 1/2;
display: grid;
grid-template-columns: 20% 80%;
height: 98%;
}
.answer-button-2 {
grid-rows: 2/3;
display: grid;
grid-template-columns: 20% 80%;
height: 98%;
}
.answer-button-3 {
grid-rows: 3/4;
display: grid;
grid-template-columns: 20% 80%;
height: 99%;
}
.answer-button-4 {
grid-rows: 4/5;
display: grid;
grid-template-columns: 20% 80%;
height: 99%;
}
.checkbox {
grid-columns: 1/2;
max-height: 90%;
background-image: url('checkbox_unchecked.png');
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
background-image: none;
}
.answer-button-container {
grid-columns: 2/3;
padding-left: 5%;
height: 100%;
}
.answer-button-container button {
width: 100%;
padding-left: 5%;
padding-right: 5%;
padding-top: 2%;
padding-bottom: 2%;
}
.menu-button-container button {
width: 100%;
padding-left: 5%;
padding-right: 5%;
padding-top: 2%;
padding-bottom: 2%;
}
.menu-button-container {
padding-left: 5%;
height: 100%;
}
.menu-button-1 {
grid-rows: 1/2;
height: 98%;
}
.menu-button-2 {
grid-rows: 2/3;
height: 98%;
}
.menu-button-3 {
grid-rows: 3/4;
height: 99%;
}
.menu-button-4 {
grid-rows: 4/5;
height: 99%;
}
.button {
position: relative;
display: inline-block;
height: 100%;
width: 100%;
background-color: #311049; /*Button Color*/
color: #f5f5f5;
font-family: hack;
font-size: 1.5rem;
font-size: clamp(1rem, 3vw, 2rem);
border-radius: 20px;
text-decoration: none;
padding: 0.2em;
box-shadow: 0.1em 0.2em black;
transition: 0.2s;
}
.button:hover:active {
transition: 0.1s;
box-shadow: 0.01em 0.02em black;
transform: translate(0.05em, 0.1em);
}
.button:hover {
box-shadow: 0.06em 0.12em black;
transform: translate(-0.01em, -0.02em);
}
.left-btn::after {
display: block;
color: #f5f5f5;
line-height: 0.5em;
content: "\2190";
}
.right-btn::after {
display: block;
color: #f5f5f5;
line-height: 0.5em;
content: "\2192";
}
const left_button = document.getElementById('left_button')
const right_button = document.getElementById('right_button')
const answer_button_1 = document.getElementById('answer_button_1')
const answer_button_2 = document.getElementById('answer_button_2')
const answer_button_3 = document.getElementById('answer_button_3')
const answer_button_4 = document.getElementById('answer_button_4')
var answer_button_dict = {
'1': answer_button_1,
'2': answer_button_2,
'3': answer_button_3,
'4': answer_button_4,
'left': left_button,
'right': right_button
}
Object.values(answer_button_dict).forEach(button => {
jQuery(button).fitText()
})

Remove your fitting script (it's not working in your JS fiddle anyway, works just on codepen), remove font-size from .left-button-container button and .right-button-container button, set .button from font-size: clamp(1rem, 3vw, 2rem); to font-size: clamp(1rem, 6vh, 3rem);
You are trying to rely on page width for button width and to rely on page height for button and its text height - just test more screen sizes and play with font-size: clamp part

How to put elements on the border of another element?

I am working on a project trying to make a (let's call it a lake) that is centered inside another (ground) and it has smaller elements around the edge those would be the docks. Docks need to be clickable by the user so it needs to be an element, not just a background image.
This is how i imagined(sorry for the bad paint):
How can I achieve this result with css and HTML or even with javascript/jquery?
.ground {
width: 100%;
height: 600px;
border: 2px solid black;
position: relative;
}
.lake {
width: 60%;
height: 60%;
border: 2px solid black;
border-radius: 200px;
background: blue;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.dock {
width: 30px;
height: 50px;
margin: 10px;
background: black;
float: right;
}
<div class="ground">
<div class="lake">
<div class="dock"></div>
<div class="dock"></div>
<div class="dock"></div>
<div class="dock"></div>
</div>
</div>

You can do like this using <ul> <li> adjust the positions how much you want I have done sample code.
.ground {
width: 100%;
height: 600px;
border: 2px solid black;
position: relative;
}
.lake {
width: 20%;
height: 60%;
border: 2px solid black;
border-radius: 200px;
background: blue;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
li {
list-style-type: none;
}
li.dock {
position: absolute;
width: 30px;
height: 50px;
margin: 10px;
background: black;
float: right;
}
li:nth-child(1) {
top: -2%;
left: 30%;
}
li:nth-child(2) {
left: -2%;
top: 40%;
}
li:nth-child(3) {
right: -2%;
top: 40%;
}
li:nth-child(4) {
left: 50%;
bottom: -2%;
}
li:nth-child(5) {
bottom: -2%;
left: 30%;
}
li:nth-child(6) {
bottom: 10%;
}
li:nth-child(7) {
top: -2%;
left: 50%;
}
<div class="ground">
<ul class="lake">
<li class="dock"></li>
<li class="dock"></li>
<li class="dock"></li>
<li class="dock"></li>
<li class="dock"></li>
<li class="dock"></li>
<li class="dock"></li>
</ul>
</div>

you can use ':nth-child()' or ':nth-of-type()' in css to target the docks and position them individually. Here's an example: https://codepen.io/anon/pen/rqPere
.dock:nth-of-type(1) {
left:auto;
right:0;
transform: translate(50%, -50%);
}
.dock:nth-of-type(2) {
left:50%;
top:0;
}
.dock:nth-of-type(3) {
left:50%;
top:100%;
}

Adjust the position of the docks as needed:
.ground {
width: 100%;
height: 90vh;
min-height: 260px;
border: 2px solid black;
display: flex;
align-items: center;
justify-content: center;
}
.lake {
width: 80%;
min-width:360px;
height: 50%;
min-height: 200px;
border: 8px solid green;
border-radius: 50%;
background: blue;
position: relative;
}
.dock {
width: 30px;
height: 50px;
border: solid green 4px;
background: black;
position: absolute;
}
.dock.first {
top: 20px;
left: 20px;
}
.dock.second {
top: 20px;
right: 20px;
}
.dock.third {
bottom: 40px;
left: 0px;
}
.dock.fourth {
bottom: 40px;
right: 0px;
}
<div class="ground">
<div class="lake">
<div class="dock first"></div>
<div class="dock second"></div>
<div class="dock third"></div>
<div class="dock fourth"></div>
</div>
</div>

Infinite carousel animation

I'm trying to create a spinner like loader but in my own style, this is like a carousel like it spins horizontally infinitely and add 'active' class to the item that caught inside the search icon but it seems my code does not produce the right result. I just want to loop it like a carousel infinitely and add class to the item that is inside the search icon, any help, ideas please?
$(function() {
setInterval(function() {
animateSpinner();
}, 2000);
});
function animateSpinner() {
$('.anim-wrapper').animate({
left: -(parseInt($('.anim-wrapper').attr('data-start-offset')) + 60)
}, 500, function() {
$('.anim-wrapper .active').removeClass('active').next().addClass('active');
$('.anim-circle:nth-child(1)').appendTo($('.anim-wrapper'));
});
}
body {
padding: 64px;
margin: 0px;
color: #242424;
}
.anim-wrapper {
overflow: auto;
left: -14px;
position: relative;
width: 720px;
padding: 0px;
margin: 0px;
top: 10px;
height: 61px;
overflow: hidden;
}
.anim-circle {
width: 50px;
height: 50px;
background: #ededed;
display: flex;
align-items: center;
justify-content: center;
float: left;
list-style: none;
margin: 5px;
border-radius: 50%;
font-size: 12px;
text-align: center;
}
.position-relative {
position: relative;
}
.magnifying-wrapper {
position: absolute;
width: 80px;
height: 80px;
z-index: 999;
margin: 0px auto;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
justify-content: center;
font-size: 100px;
top: 11px;
}
.cn-spinner {
width: 295px;
position: relative;
height: 150px;
overflow: hidden;
}
.anim-circle.active {
/* transform: scale(1.21); */
background: #ef7100;
color: #FFF;
}
<link href="https://1662037994.rsc.cdn77.org/plugins/foundry/css/themify-icons.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="position-relative cn-spinner center-content-parent">
<div class="magnifying-wrapper">
<i class="ti-search"></i>
</div>
<ul class="anim-wrapper overflow-auto" data-start-offset="14">
<li class="anim-circle">Jobs</li>
<li class="anim-circle">Real<br>estate</li>
<li class="anim-circle active">Busi-<br>ness</li>
<li class="anim-circle">Cars</li>
<li class="anim-circle">Deals</li>
<li class="anim-circle">Events</li>
</ul>
</div>

Here is the working demo with your code.i adjusted the left value to handle it as per your requirement.
$(function(){
setInterval(function(){
animateSpinner();
}, 2000);
});
function animateSpinner(){
$('.anim-wrapper').animate({
left: - ( parseInt( $('.anim-wrapper').attr('data-start-offset') ) )
},
500, function() {
$('.anim-wrapper .active').removeClass('active').next().addClass('active');
$('.anim-circle:nth-child(1)').appendTo($('.anim-wrapper'));
});
}
body{
padding: 64px;
margin: 0px;
color: #242424;
}
.anim-wrapper{
overflow: auto;
left: -14px;
position: relative;
width: 720px;
padding: 0px;
margin: 0px;
top: 10px;
height: 61px;
overflow:hidden;
}
.anim-circle{
width: 50px;
height: 50px;
background:#ededed;
display: flex;
align-items: center;
justify-content: center;
float: left;
list-style: none;
margin: 5px;
border-radius: 50%;
font-size: 12px;
text-align: center;
}
.position-relative{
position: relative;
}
.magnifying-wrapper{
position: absolute;
width: 80px;
height: 80px;
z-index: 999;
margin: 0px auto;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
justify-content: center;
font-size: 100px;
top: 11px;
}
.cn-spinner{
width: 295px;
position: relative;
height: 150px;
overflow: hidden;
}
.anim-circle.active{
/* transform: scale(1.21); */
background: #ef7100;
color: #FFF;
animation-name: spin;
animation-duration: 1000ms;
}
#keyframes spin {
from {
transform:rotate(0deg);
}
to {
transform:rotate(360deg);
}
}
<link href="https://1662037994.rsc.cdn77.org/plugins/foundry/css/themify-icons.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="position-relative cn-spinner center-content-parent">
<div class="magnifying-wrapper">
<i class="ti-search"></i>
</div>
<ul class="anim-wrapper overflow-auto" data-start-offset="14">
<li class="anim-circle">Jobs</li>
<li class="anim-circle">Real<br>estate</li>
<li class="anim-circle active">Busi-<br>ness</li>
<li class="anim-circle">Cars</li>
<li class="anim-circle">Deals</li>
<li class="anim-circle">Events</li>
</ul>
</div>

In your approach it looks like the animation is only run once, even though it does run as expected.
The reason is that on your first animation you set it to -74 (60 +14 offset), but you never change this value which is why it remains at -74.
The jumpy "animation" is what it looks like when you remove and append elements.
I've put together a quick'n dirty solution which might need a bit of tweeking.
This manipulates the first child within .anim-wrapper, rather than the element itself.
$(function() {
setInterval(function() {
$('.anim-circle:nth-child(1)').animate({
marginLeft: -74
}, 500, function() {
$('.anim-circle:nth-child(1)').css('margin-left', 5);
$('.anim-wrapper .active').removeClass('active').next().addClass('active');
$('.anim-circle:nth-child(1)').appendTo($('.anim-wrapper'));
});
}, 2000);
});
body {
padding: 64px;
margin: 0px;
color: #242424;
}
.anim-wrapper {
overflow: auto;
left: -14px;
position: relative;
width: 720px;
padding: 0px;
margin: 0px;
top: 10px;
height: 61px;
overflow: hidden;
}
.anim-circle {
width: 50px;
height: 50px;
background: #ededed;
display: flex;
align-items: center;
justify-content: center;
float: left;
list-style: none;
margin: 5px;
border-radius: 50%;
font-size: 12px;
text-align: center;
}
.position-relative {
position: relative;
}
.magnifying-wrapper {
position: absolute;
width: 80px;
height: 80px;
z-index: 999;
margin: 0px auto;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
justify-content: center;
font-size: 100px;
top: 11px;
}
.cn-spinner {
width: 295px;
position: relative;
height: 150px;
overflow: hidden;
}
.anim-circle.active {
background: #ef7100;
color: #FFF;
}
<link href="https://1662037994.rsc.cdn77.org/plugins/foundry/css/themify-icons.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="position-relative cn-spinner center-content-parent">
<div class="magnifying-wrapper">
<i class="ti-search"></i>
</div>
<ul class="anim-wrapper data-start-offset="14">
<li class="anim-circle">Jobs</li>
<li class="anim-circle">Real<br>estate</li>
<li class="anim-circle active">Busi-<br>ness</li>
<li class="anim-circle">Cars</li>
<li class="anim-circle">Deals</li>
<li class="anim-circle">Events</li>
</ul>
</div>