Develop Reference

Responsive dotted lines among the images

I'm trying to create a responsive dots connecting among the images like below.
I'm able to achieve this with CSS, but the layout is collapsing when I tried to change the image widths or parent div width. How can I make this layout work for all screens and image dimensions?
Here is my code link:
https://jsfiddle.net/SampathPerOxide/q2yab607/29/
.dotted-line,
.dotted-line1 {
display: flex;
}
.over {
display: flex;
align-items: center;
justify-content: center;
}
.dotted-line::after {
content: ".......";
letter-spacing: 3px;
font-size: 30px;
color: #9cbfdb;
display: table-cell;
vertical-align: middle;
padding-left: 1px;
}
.dotted-line1::before {
content: "........";
letter-spacing: 3px;
font-size: 30px;
color: #9cbfdb;
display: table-cell;
vertical-align: middle;
padding-right: 1px;
}
.top:before {
transform: rotate(90deg);
content: "........";
letter-spacing: 3px;
font-size: 30px;
color: #9cbfdb;
position: absolute;
top: 5em;
margin-left: 0.5em;
}
<div style="width:90px;margin:0px auto;">
<div style=" height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
" class="top">
<img src="https://i.pinimg.com/736x/39/4b/f6/394bf6e1c3f2a7351105290ef9fe9dd1.jpg" style="width:100px;">
</div>
<br/><br/><br/>
<div class="over">
<div style="" class="dotted-line">
<img src="https://stat.overdrive.in/wp-content/odgallery/2020/06/57263_2020_Mercedes_Benz_GLS.jpg" style="width:100px;">
</div>
<div style="">
<h4 style="text-align:center;padding:10px;">
Choose
</h4>
</div>
<div style="" class="dotted-line1">
<img src="https://stat.overdrive.in/wp-content/odgallery/2020/06/57263_2020_Mercedes_Benz_GLS.jpg" style="width:100px;">
</div>
</div>
</div>

I would go for
display flex to easily arrange the items inside a flexbox
Use a repeated background-image with radial-gradient to achieve repeated responsive dots
* {
margin: 0;
box-sizing: border-box;
}
h4 {
padding: 1em;
}
.flex {
display: flex;
}
.flex.col {
flex-direction: column;
}
.flex.center {
justify-content: center;
}
.grow {
flex-grow: 1;
}
.dots-h,
.dots-v {
flex-grow: 1;
background-image: radial-gradient(1px 1px at center, #888 1px, transparent 1px);
}
.dots-h {
height: 1em;
background-repeat: repeat-x;
background-size: 10px 1em;
margin: auto 0;
}
.dots-v {
width: 1em;
background-repeat: repeat-y;
background-size: 1em 10px;
margin: 0 auto;
}
<div>
<div class="flex center">
<img src="https://picsum.photos/id/1/100/100">
</div>
<div class="flex center">
<img src="https://picsum.photos/id/2/100/100">
<div class="dots-h"></div>
<div class="flex col center">
<div class="dots-v"></div>
<h4>Choose</h4>
<div class="grow"><!-- Just a spacer --></div>
</div>
<div class="dots-h"></div>
<img src="https://picsum.photos/id/9/100/100">
</div>
</div>

how to change the javascript code below so my div style toggle starts from display none to display grid?

hi I have a list of project website in my website and by clicking view projects button,
my websites which already are on display will hide and then show by clicking again. I need to start from not viewing the websites and then clicking the button to show and clicking to remove so I need to reverse what I have currently
const btn = document.getElementById('mybtn');
const images = document.getElementById('images');
btn.addEventListener('click', function () {
if (images.classList.contains('hidden')) {
images.classList.remove('hidden');
setTimeout(function () {
images.classList.remove('transform');
}, 20);
} else {
images.classList.add('transform');
images.addEventListener('transitionend', function(e) {
images.classList.add('hidden');
}, {
capture: false,
once: true,
passive: false
});
}
}, false);
#mybtn {
display: flex;
justify-content: center;
align-items: center;
width: 100px;
height: 40px;
background-color: rgba(143, 134, 134, 0.589);
text-decoration: none;
color: aliceblue;
font-family: "Montserrat", sans-serif;
text-align: center;
border-radius: 5px;
border:none;
cursor: pointer;
}
#mybtn:hover {
background-color: rgb(245, 38, 38);
}
.view-projects {
margin-top: 40px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
width: 100%;
height: 100%;
}
.project-images {
justify-items: center;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
grid-template-rows: repeat(auto-fit, minmax(100px, 1fr));
grid-gap: 10px;
margin-top: 30px;
z-index: 2;
position: relative;
transition: 0.5s ease-in ;
}
.hidden {
display: none;
}
.transform {
transform: translateY(100%);
opacity: 0;
}
.overlay:hover {
opacity: 1;
}
.image {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.image a {
text-decoration: none;
font-family: 'Montserrat', sans-serif;
color: aliceblue;
margin-top: 5px;
background-color: rgba(150, 144, 144, 0.233);
padding: 3px;
border-radius: 5px;
}
.image a:hover {
background-color: rgba(123, 126, 129, 0.116);
}
<div class="view-projects">
<button id="mybtn">View Projects</button>
</div>
<div id="images" class="project-images">
<div class="image">
<img src="./images/projects/color-flipper.PNG" alt="">
View Website
View Source
</div>
<div class="image">
<img src="./images/projects/counter.PNG" alt="">
View Website
View Source
</div>
<div class="image">
<img src="./images/projects/movies.PNG" alt="">
View Website
View Source
</div>
<div class="image">
<img src="./images/projects/quotes.PNG" alt="">
View Website
View Source
</div>
<div class="image">
<img src="./images/projects/secrets.PNG" alt="">
View Website
View Source
</div>
<div class="image">
<img src="./images/projects/todo.PNG" alt="">
View Website
View Source
</div>
</div>

You should add the hidden class to your <div id="images" class="project-images"> code. This would resolve your problem.

Add class hidden to your images element.
const btn = document.getElementById('mybtn');
const images = document.getElementById('images');
btn.addEventListener('click', function () {
if (images.classList.contains('hidden')) {
images.classList.remove('hidden');
setTimeout(function () {
images.classList.remove('transform');
}, 20);
} else {
images.classList.add('transform');
images.addEventListener('transitionend', function(e) {
images.classList.add('hidden');
}, {
capture: false,
once: true,
passive: false
});
}
}, false);
#mybtn {
display: flex;
justify-content: center;
align-items: center;
width: 100px;
height: 40px;
background-color: rgba(143, 134, 134, 0.589);
text-decoration: none;
color: aliceblue;
font-family: "Montserrat", sans-serif;
text-align: center;
border-radius: 5px;
border:none;
cursor: pointer;
}
#mybtn:hover {
background-color: rgb(245, 38, 38);
}
.view-projects {
margin-top: 40px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
width: 100%;
height: 100%;
}
.project-images {
justify-items: center;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
grid-template-rows: repeat(auto-fit, minmax(100px, 1fr));
grid-gap: 10px;
margin-top: 30px;
z-index: 2;
position: relative;
transition: 0.5s ease-in ;
}
.hidden {
display: none;
}
.transform {
transform: translateY(100%);
opacity: 0;
}
.overlay:hover {
opacity: 1;
}
.image {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.image a {
text-decoration: none;
font-family: 'Montserrat', sans-serif;
color: aliceblue;
margin-top: 5px;
background-color: rgba(150, 144, 144, 0.233);
padding: 3px;
border-radius: 5px;
}
.image a:hover {
background-color: rgba(123, 126, 129, 0.116);
}
<div class="view-projects">
<button id="mybtn">View Projects</button>
</div>
<div id="images" class="project-images hidden">
<div class="image">
<img src="./images/projects/color-flipper.PNG" alt="">
View Website
View Source
</div>
<div class="image">
<img src="./images/projects/counter.PNG" alt="">
View Website
View Source
</div>
<div class="image">
<img src="./images/projects/movies.PNG" alt="">
View Website
View Source
</div>
<div class="image">
<img src="./images/projects/quotes.PNG" alt="">
View Website
View Source
</div>
<div class="image">
<img src="./images/projects/secrets.PNG" alt="">
View Website
View Source
</div>
<div class="image">
<img src="./images/projects/todo.PNG" alt="">
View Website
View Source
</div>
</div>

How can I arrange my divs in 2 columns so it looks like a grid/photo gallery?

I am new to coding and web design. Right now, I am constructing a portfolio website which showcases the other websites I've created. I am trying to create a layout where my Divs on the site are in two columns (under 'my work'). I am trying to figure out what to use but I'm unsure if I'm being honest. I've played around with display flex and display grid but I did not get the result I wanted. Here is my below... I will also link another persons' site to give you a visual of what I'm trying to achieve. Any help or tips would be greatly appreciated... Thank you!
Also, I will include my code.
My page and work so far
What I'm trying to create
* {
margin: 0;
box-sizing: border-box;
}
h1 {
text-align: center;
padding-top: 370px;
padding-bottom: 370px;
background-color: rgb(38,61,66);
color: white;
font-family: 'Courier New', monospace;
font-weight: normal;
}
h2 {
text-align: center;
padding-top: 100px;
padding-bottom: 30px;
font-family: 'Courier New', monospace;
font-weight: normal;
}
.main-body {
background-color: rgb(244,132,95);
width: 100%;
overflow-x: hidden;
}
.main-body2 {
padding-top: 150px;
padding-bottom: 150px;
float: left;
width: 25%;
}
#tribute {
width: 100%;
}
#product {
width: 100%;
}
#survey {
width: 100%;
}
#technical {
width: 100%;
}
.work {
border: 1px solid #ccc;
}
.work:hover {
border: 1px solid rgb(38,61,66);
}
.desc {
text-align: center;
padding-top: 5px;
padding-bottom: 5px;
font-family: 'Courier New', monospace;
font-weight: normal;
}
</div><!DOCTYPE html>
<html>
<head>
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<h1>Welcome To My Portfolio</h1>
<main>
<div class="main-body">
<h2>Some of my work</h2>
<div class="main-body2">
<div class="work">
<a target="_blank" href="https://codepen.io/dechirila19/full/poEOXVz">
<img src="https://lh3.googleusercontent.com/P8cbTC4Y-l-4nwkjTh3S67d5qHCvRMX7XyE6cXAsbTg4IX1AvB9-xEHexWDOK1q5YidvZtxXLo4TzjqLd3n21kJM8j_3xr_a5aZM3UyX3GrCg_0C--3zujKK-AL7TEyJxbmyJaRv16NvcTR6-B1y-P03TcvNtp11zB3tHYEtvf5TrwZJtInwwE0l_BkhUR-0OKuQO4O2RZZY0zeoo0Mrq7fd4i5rjf3HWb0yJ4WAC3TQP8w1vW0XdarfZZeBtfvnZny9BAEfYqIoUw9Rp9hcXp5Se4zkRs4TaJmJmRwOiWb44RjvNCJ4-oYTGfJZ9R2vL21eUEO28G0TexVTkhHxeB4c4APGteu-iNAB6jx-xUZa37WATiDPylYTtUS4vBU5tbFgvxu9Lvfb4mwVJN8gG6CzuKHou80TJS0yEgxQI6tOZrunP1DtIOAKgXgbGtGqLe6bK8YxYc5yYBH9a5mbp3eA2k50Rrh3Uh7YXpl02GmaPI05fak2wGJ0o0lyWgo0rNd6H0w3bpC91Anqvv_hTVnI1drISA5n8bCfY1m8UNM827qozZQh9Q7CUXOjf_Vkh2NunlyGiKtksT94gtCk59_HfDeBiNb-FPFlKjcRnxS9OyGAQdHFGWgrs5i40KOUKqsEyxY-2zujyECMZidTp4Vvi7mRRsiUMVPAdEkWyLO462xkFUiYVN5_hKOXlQ=s571-no?authuser=0" alt="Tribute Page" id="tribute">
</a>
<div class="desc">Tribute Page</div>
</div>
</div>
<div class="main-body2">
<div class="work">
<a target="_blank" href="https://codepen.io/dechirila19/full/VwKgmBg">
<img src="https://lh3.googleusercontent.com/IJaG-M-uOIMWYyrEv1yOZRtlRmTV8diJY-d6DmFxyVJt2BE2-iXsRwFH1G21cOJgDBJCbjAZdvEG01gOTixgkZGmxaRbdlRqvaaVUI0wggikKtB8sGXa6irKIe3B3VB2apWyNghvYGEC0IoCCJgCskOP9x1Bs6wJAUSPONZa1maJrkOBYL_T3PPlfj5Jym_mj9hiuCAKYTMM_rV3ErLk94DJk3bSj2_ppQfo0meoZ_abrk7M81bB171SdDEKQ-q4MKf5SNQkZpZ4Xt-DWYINMbKe6ify9a_9jnAytdJxtcsDGzymzCAfTsW9Oo1QKuRVcp_fZmlKuL8ddJ2TPoYjW4UgwdU6Zt2Qya4Q2NvWcjUSsuScgChbtrqPFUDRuKAwkKD3YAdjAozXQxgGWHqKIR9Uvfd50NYGJRspzXm9t4HNmTHnknO3Alq80HUPVvXuxM3v6rtbfmj8k5__o5YXh7yAUBhO2WYRJxx3255laQXIPxXzXt9013nUp35bKsHGHxL56m6fdADPtxAm1grkEcICHlIoOyNayX2c34pMpXwaJFajEODZ4Le7ng0K7_ORv0CnfFM4Z4tEuw5B1DSK17UpPsRn2NFjPLSkI9BqCA-7ZL_DSlYZYwba7A4PyDbIXHstNzHjKuFPhmb3seCfVYkzMj4mOeGGzHwtL-P9ABTK9ImvZ4l4ILFgGMomXw=w567-h568-no?authuser=0" id="survey">
</a>
<div class="desc">Survey Form</div>
</div>
</div>
<div class="main-body2">
<div class="work">
<a target="_blank" href="https://codepen.io/dechirila19/full/oNzrYQZ">
<img src="https://lh3.googleusercontent.com/QkjpqBlrvlMgUdoK6qSnXAcaqSFAdsZEDwrEsl96CGa-QXQrSUOiuf87cQlnYw6ciaelPWkk6hffKoyys4rcWb24DzGId2g2mHUFE52N0toZ6RzIQlXogtYDyWk2YVdnKshfyU_uEmIZJXED_qQ-M4bJ-l22us9yhDOSOSprhEp1oQoB4tICP-d8VPetANQihYa018aa87ixwKu9IA1vRgeS1QEPNcs9MXl0mPaEYx7br_jZuT-DJ2Ae_revIXieopvH_s7Iw-p9kEbb0OzB8lbqThiwCXmDaF6RcfhEDhI_A-sRlnscG6sqCOMn2bPGkNoWbKLkd3KpFnknwFwGpyMX-E3Q4jiBAcbaiROV70WlzkkypOSRwHAZuwWDRwf9qlnAOx-hJ46kMryfuH4ONqh6pe2UMe5lzaEnBaKMYpFuzupAelufIxl2maSraO7LFVEhixhAPJF7ldSMbaFNhXjNEk93DnvxOQuTqLAsWYCBfmFxVCFzWF2hfOHmK2YW7kTI4wTdt66QaI_fbfKeBrKOdAQ3qozVbnpBWymdgXc0rPmn2NrJFoLt327yX0XlIhOdvN-u31koYN3ThSUmJpKI15Pid8ScF7JifzAat4mEJQxk_bDZvCSTQnTCYQQagTVOHfixcQZ-OHfUp5korzvdg4L9sjLVK66meA19KXNNeWDYc3iadl1LscknFQ=w572-h571-no?authuser=0" id="product">
</a>
<div class="desc">Product Landing Page</div>
</div>
</div>
<div class="main-body2">
<div class="work">
<a target="_blank" href="https://codepen.io/dechirila19/full/RworweN"><img src="https://lh3.googleusercontent.com/_K_RWpOCQKs5GZYhQkoupmelGzWqrZmhnOJ9zcRpSMZfDDGF8Z9x6KzCA-DpZdYKoh-sXB4B8wjzGXKiOseSkreQwa-rLboJmonxq1Ea2OdNYTIx5Ztdx4ZdHBliSKlEVPDej1yp1VqT80FYpcpao4TOpaS2doyBPFHg-KSkHID-Rr1tPHc8waaA44DiCvDpFI8zbT2E1qP9KprXOl5Zl9oKyOFOTr102ZqWvnWi4PnxgsnNSwQ34qDvYJmVX1C1XdcC1Yf7GNHbNjJ_Elh612G3tC2Ool7ynQ9TWnttk5T9Ah0HKks1BctQolk8NFHNnOKXAu0i2qVrz7Bq7GbYMH2h96v_btud-dGaV05E8rKQ2bMDLIhZeSq4cTPyBvhkHru5L0FgRUNuajR45suoZgbNVtkllKv5PM7pKfXbpgxDtTikii6-y6OhpoAZC3sFkyX0tWQP93PbJIJdXBPLjE1zoUNgxLqE0J2TDmU0mTYl1QcumbP2_C1biY9Q4fRj6MYgwiULgcsgb1EICpUVnsPIRVlc_jeMa81zTfoF-GJ_cIChtE0jTQt6IrDWjW55FU8rICtOUyRRyVhfy81_tkXdObtmzlJ8w9ZJL7RCXjbeCbl4YW0lTBoEqygUZJwRDAYuJTBOm4FWJIBIhC__lI1OKrVEwelyWyugOPVjSiyEt_IXk-V78vb2KkiJ7g=w570-h571-no?authuser=0" id="technical">
</a>
<div class="desc">Technical Documentation Page</div>
</div>
</div>
</div>
</main>
</body>
</html>

use display : flex :
warp the four divs in a big div with class flex-main.
and this is the css:(only the parts with changes)
.main-body {
background-color: rgb(244,132,95);
width: 100%;
}
.flex-main{
display: flex;
flex-wrap: wrap;
flex-direction: row-reverse;
justify-content: center;
}
.main-body2 {
padding-top: 150px;
padding-bottom: 150px;
float: left;
width: 35%;
margin-right: auto;
margin-left: auto;
}
that would work as you want.good luck!

How to add a website link to HTML website?

I know how to add images to html website but theres one thing i am not sure how to do, even after searching plenty of sites on the internet.
I created a small animation using java script on some other IDE, and I copied the link of my output:
https://g2mjl.csb.app/
I want to paste this link onto my html website but I do not know how to. If i use the regular <img src .... it does not work.
Basically the animation was coded in Java Script and the code for js is as follows:
import Vue from "vue";
import App from "./App.vue";
import TypeIt from "typeit";
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
new TypeIt("#inner-demo-2", {
speed: 100,
lifelike: true,
cursor: true,
cursorSpeed: 200,
loop: true
})
.pause(1000)
.type('<span style="font-family: Segoe UI Emoji">👋</span>', {
html: true
})
.type("&nbspHi&nbspthere!&nbspI'm&nbspHussain Omer")
.go();
How can I add this code into my html file?
Also, this is for my personal website and not for school or anything, so answers are much appreciated!
I am fairly new to html too, as I started learning it a week ago, so help is really appreciated!
I want the animation to display at the very top and the width of it should cover basically my whole page but should be at the very top
Heres my html website code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Portfolio site template</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css">
<link rel="icon" href="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/Repl.it_logo.svg/220px-Repl.it_logo.png">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div class="container">
<!--────────────────Header───────────────-->
<header>
<a class="logo" href="#home">
<img src="https://newsletter-images--timmy-i-chen.repl.co/logo-light.png" alt="repl logo" />
</a>
<nav>
<ul class="nav-bar"><div class="bg"></div>
<li><a class="nav-link active" href="#home">Home</a></li>
<li><a class="nav-link" href="#projects">Projects</a></li>
<li><a class="nav-link" href="#contact">Contact</a></li>
</ul>
<div class="hamburger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
</header>
<main>
<!--─────────────────Home────────────────-->
<div id="home">
<div class="filter"></div>
<section class="intro">
<p>Short Description.</p>
<p>Something more about yourself.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
<!--────social media links─────-->
<div class="social-media">
<i class='fab fa-codepen'></i>
<i class='fab fa-twitter'></i>
<i class='fab fa-github'></i>
<i class='fab fa-linkedin-in'></i>
<i class="fab fa-youtube"></i>
</div>
</section>
</div>
<!--───────────────Projects───────────────-->
<div id="projects">
<h3>My Projects.<hr></h3>
<p>Here are some of my projects, you may like.</p>
<div class="work-box">
<div class="work">
<!--───────────────card───────────────-->
<div class="card">
<img class="work-img" src="https://images.unsplash.com/photo-1518611507436-f9221403cca2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1225&q=80">
<a href="" target="_blank"> <!--Link to project-->
<div class="work-content">Lorem ipsum dolor sit amet consectetur.</div></a>
</div>
<div class="card">
<img class="work-img" src="https://images.unsplash.com/photo-1462642109801-4ac2971a3a51?ixlib=rb-1.2.1&auto=format&fit=crop&w=1266&q=80">
<a href="" target="_blank"> <!--Link to project-->
<div class="work-content">Lorem ipsum dolor sit amet consectetur.</div></a>
</div>
<div class="card">
<img class="work-img" src="https://images.unsplash.com/photo-1485815457792-d1a966f9bde0?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80">
<a href="" target="_blank"> <!--Link to project-->
<div class="work-content">Lorem ipsum dolor sit amet consectetur.</div></a>
</div>
<div class="card">
<img class="work-img" src="https://images.unsplash.com/photo-1517842645767-c639042777db?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80">
<a href="" target="_blank"> <!--Link to project-->
<div class="work-content">Lorem ipsum dolor sit amet consectetur.</div></a>
</div>
<div class="card">
<img class="work-img" src="https://images.unsplash.com/photo-1535556116002-6281ff3e9f36?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=781&q=80">
<a href="" target="_blank"> <!--Link to project-->
<div class="work-content">Lorem ipsum dolor sit amet consectetur.</div></a>
</div>
<div class="card">
<img class="work-img" src="https://images.unsplash.com/photo-1483546416237-76fd26bbcdd1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80">
<a href="" target="_blank"> <!--Link to project-->
<div class="work-content">Lorem ipsum dolor sit amet consectetur.</div></a>
</div>
</div>
</div>
</div>
<!--──────────────Contact────────────────-->
<div id="contact">
<!--────social media links─────-->
<h3>Contact.<hr></h3>
<p>Feel free to contact me on my social media.</p>
<div class="social-media">
<i class='fab fa-codepen'></i>
<i class='fab fa-twitter'></i>
<i class='fab fa-github'></i>
<i class='fab fa-linkedin-in'></i>
<i class="fab fa-youtube"></i>
</div>
</div>
</main>
<footer class="copyright">© 2020
Lilykhan.
<!-- be sure to give credit to me :) -->
</footer>
</div>
</body>
</html>
CSS CLASS:
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#300&display=swap');
:root{
--main-background: #0b0c0f;
--main-fonts-color: #fff;
--main-decor-color:#00a9e2;
--main-header-background:#21252e;
--main-font-family: 'Poppins', sans-serif;
}
*{
margin: 0;
padding: 0;
scroll-behavior: smooth;
}
main{
padding: 0;
width: 100%;
height: 100%;
background: var(--main-background);
}
/*──────────────────
header
──────────────────*/
header{
margin: 0 auto;
width: 100%;
height: 70px;
display: flex;
align-items: center;
justify-content: space-around;
background: transparent;
position: fixed;
top: 0;
transition: 0.3s;
z-index: 5;
}
.nav-show{
opacity: 0;
}
header:hover{
opacity: 1;
background: var(--main-header-background);
}
.logo img{
padding-top: 5px;
height: 50px;
cursor: pointer;
}
.nav-bar{
list-style:none;
position: relative;
display: inline-flex;
}
a.nav-link{
margin: 2px;
padding: 5px 10px;
text-decoration: none;
color: var(--main-fonts-color);
font-family: var(--main-font-family);
cursor: pointer;
text-transform: uppercase;
}
.active{
background: var(--main-decor-color);
}
.nav-link:hover {
color: #000000;
background: var(--main-decor-color);
}
/*──────────────────
home
──────────────────*/
#home{
margin: auto;
height: 100vh;
color: var(--main-fonts-color);
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-evenly;
}
#home .filter{
background: url('https://images.unsplash.com/photo-1544099858-75feeb57f01b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80') no-repeat;
background-size: cover;
background-position:center;
position: absolute;
top: 0px;
bottom: 0;
left: 0;
right: 0;
opacity:.20;
}
.intro {
text-align:center;
color: var(--main-fonts-color);
z-index: 1;
margin: auto;
padding: 20px;
}
.intro p{
margin: 5px;
font-size:1.2rem;
font-family: var(--main-font-family);
text-align:center;
}
h3{
padding-bottom: 15px;
letter-spacing: normal;
font-family: var(--main-font-family);
font-style: normal;
font-size: 60px;
color: var(--main-fonts-color);
text-shadow: 0px 0px 40px var(--main-decor-color);
}
/*──────────────────
social media
──────────────────*/
.social-media{
padding: 10px;
display: flex;
position: center;
align-items: space-around;
justify-content:center;
}
.social-media a {
margin: 10px;
font-size: 2rem;
text-align:center;
display: inline-block;
color: var(--main-fonts-color);
}
.social-media a i{
cursor: pointer;
}
.social-media a:hover {
color: var(--main-decor-color);
text-shadow: 0 0 50px var(--main-decor-color);
}
/*──────────────────
projects
──────────────────*/
#projects{
margin-top:100px;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align:center;
color: var(--main-fonts-color);
}
#projects h3{
padding-top: 70px;
}
#projects p{
font-family: var(--main-font-family);
font-size:1.2rem;
padding: 10px;
}
.work{
display: flex;
flex: 1;
flex-wrap: wrap;
justify-content:center;
align-items: center;
padding: 20px;
}
.card{
display: flex;
flex-direction: column;
margin: 20px;
width: 200px;
height:250px;
border-radius:12px;
background:var(--main-decor-color);
}
.card img{
width: 100%;
height:70%;
border-radius:10px 10px 0px 0px;
}
.card .work-content{
text-align: center;
padding: 10px 5px;
font-size: 1rem;
color: var(--main-fonts-color);
font-family: var(--main-font-family);
cursor: pointer;
}
.card a{
text-decoration: none;
}
.card .work-content:hover{
color:#202020;
}
.card:hover{
box-shadow: 0 0 1.5rem gray;
}
/*──────────────────
Contact
──────────────────*/
#contact{
margin: auto;
padding-bottom: 20px;
height: 600px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: var(--main-fonts-color);
}
#contact p{
padding:10px;
text-align:center;
font-size:1.2rem;
font-family: var(--main-font-family);
}
/*──────────────────
footer
──────────────────*/
footer {
width: 100%;
height: 100%;
background-color: var(--main-header-background);
}
.copyright {
color: #fff;
font-size: 1.2rem;
line-height: 40px;
text-align: center;
}
.copyright a{
color: #fff;
font-size: 1rem;
letter-spacing: 1px;
text-decoration: none;
font-family: var(--main-font-family);
}
.copyright a:hover{
color: var(--main-decor-color);
}
/*──── hr ─────*/
hr {
background: var(--main-decor-color);
margin: 2px;
height: 3px;
width: 150px;
border-radius:5px;
border: hidden;
margin-inline-start: auto;
margin-inline-end: auto;
}
/*──────────────────
Scrollbar
──────────────────*/
::-webkit-Scrollbar{
width: 5px;
background: rgba(5,5,5,1);
}
::-webkit-Scrollbar-thumb{
border-radius: 10px;
background: var(--main-decor-color);
box-shadow: inset 0 0 20px var(--main-decor-color);
}
::-webkit-Scrollbar-track{
margin-top: 80px;
border-radius: 10px;
}
/*──────────────────
hamburger
──────────────────*/
.hamburger {
display: none;
}
.hamburger div{
width: 30px;
height: 3px;
background: #dbdbdb;
margin: 5px;
transition:all 0.3s ease;
}
.toggle .line1{
transform: rotate(-45deg) translate(-5px,6px);
}
.toggle .line2{
opacity: 0;
}
.toggle .line3{
transform: rotate(45deg) translate(-5px,-6px);
}
#keyframes navLinkFade{
from{
opacity:0;
transform: translatex(50px);
}
to{
opacity: 1;
transform:translatex(0px);
}
}
/*──────────────────
media queries
──────────────────*/
#media only screen and (max-width: 1484px) and (min-width: 1214px) {
.work{
padding:20px 20%;
}
}
#media only screen and (max-width: 1214px) and (min-width: 1000px) {
.work{
padding:20px 12%;
}
}
#media only screen and (max-width: 500px) {
#home, #projects, #contact{
overflow-x: hidden;
}
header{
background-color: var(--main-header-background);
}
.logo{
position:absolute;
top: 2px;
left: 30px;
}
.nav-show{
opacity: 1;
}
.nav-bar{
position:fixed;
top: 0px;
right:0;
width:60%;
height: 100vh;
display:flex;
flex-direction: column;
align-items: center;
justify-content:space-evenly;
background:var(--main-header-background);
transform:translatex(100%);
transition: transform 0.5s ease-in;
z-index: -1;
}
.hamburger{
position:absolute;
top: 17px;
right: 25%;
display: block;
cursor:pointer;
z-index: 5;
}
.nav-bar li{
opacity:0;
}
}
.nav-active{
transform:translatex(0%);
}
JS CLASS:
// header scrolling effect
$(window).on('scroll', function(){
if($(window).scrollTop()){
$('header').addClass('nav-show');
}
else{
$('header').removeClass('nav-show');
}
})
//hamburger
const navSlide = () => {
const hamburger = document.querySelector(".hamburger");
const navbar = document.querySelector(".nav-bar");
const navLinks = document.querySelectorAll(".nav-bar li");
hamburger.onclick = () => {
navbar.classList.toggle("nav-active");
//Animation links
navLinks.forEach((link, index) => {
if (link.style.animation) {
link.style.animation = "";
} else {
link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7+1}s`;
}
});
//hamburger animation
hamburger.classList.toggle("toggle");
}
}
window.onload = () => navSlide();
BTW this is a free html website template i got

As others have mentioned, using an iframe would be your best bet if you want to display the actual app on your website.
This is how you would implement the iframe.
<iframe src="https://g2mjl.csb.app/" title="My App"></iframe>
That being said, iframes are tricky. Depending on the website, it's possible that an iframe blocking policy is in place which could prevent you from embedding your app.
More info here and here.
Now, if all you want is a gif, I've gone ahead and done that for you, although, you may want to upload your own with something like giphy.
Here is a link to a gif I've created from your app: https://media.giphy.com/media/U9vs87YlzO1KrlFSaG/giphy.gif
You can also see it by running the snippet below:
<img src="https://media.giphy.com/media/boq1oJ25cQ21rpLRmo/giphy.gif" />
I wrapped the image with an anchor that will lead to your app page but you can just implement it in your img src as you originally attempted like this:
<img src="https://media.giphy.com/media/boq1oJ25cQ21rpLRmo/giphy.gif" />

you can use this code:
<h2>Iframe - Target for a Link</h2>
<iframe src="demo_iframe.htm" name="iframe_a" height="300px" width="100%" title="Iframe Example"></iframe>
<p>W3Schools.com</p>
<p>When the target attribute of a link matches the name of an iframe, the link will open in the iframe.</p>

Issues in Creating Custom Search Box [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
I am trying to create a custom search box. Please see code below.
Problem 1: The input element (although not visible) in the figure below appears to be above the search icon before it is clicked (see green circle). How can I place both as inline? Note: The layout of the blue container was created using flexbox.
.
Problem 2: In the image below, on clicking the search icon, a space appears between the input element and the icon element (see green circle in section 3). Is it a result of the flexbox property? How can I get rid of it?
Problem 3: I need help in perfectly aligning the contact details in section 1 (see image in problem 2) with their corresponding icons. The phone numbers and email address appear to be at the bottom of the icons instead of center.
Thank you!
body {
padding: 0 !important;
margin: 0 !important;
/* font-size: 1.2em; */
background: black;
}
* {
box-sizing: border-box;
}
/* PRE TOP NAVIGATION BAR */
.preTopNav {
background-color: navy;
display: flex;
flex-flow: row wrap;
justify-content: space-around;
align-items: center;
width: 100%;
}
.preTopNav-Items {
display: flex;
flex-flow: row wrap;
padding-top: 10px;
padding-bottom: 10px;
}
.preTopNav-Items img {
width: 20px;
height: 20px;
}
.preTopNav-Items a {
text-decoration: none;
color: white;
}
.preTopNav .contactDetails,
.preTopNav .socialDetails {
align-items: center;
justify-content: center;
}
.preTopNav .search {
align-items: center;
justify-content: flex-end;
width: 40px;
background-color: navy;
border-radius: 4px;
box-shadow: 10px 4px 10px 2px rgba(0, 0, 0, 0.5);
transition: width 0.5s;
padding: 0;
overflow: hidden;
border: mone;
}
.preTopNav .search img:hover {
cursor: pointer;
}
.preTopNav .search.active {
width: 300px;
}
.preTopNav .search input {
/* margin-right: 50px; */
position: relative;
right: 50px;
width: calc(100%-50px);
padding: 3px 10px;
font-size: 16px;
}
/* PHOTO SLIDESHOW */
/* MEDIA QUERIES */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Home BGS</title>
<link rel="stylesheet" href="main.css" />
<script
src="https://kit.fontawesome.com/718022a53c.js"
crossorigin="anonymous"
></script>
</head>
<body>
<!-- PRE TOP NAVIGATION BAR -->
<div class="preTopNav">
<div class="preTopNav-Items contactDetails">
<div class="contactDetails-Items">
<img src="https://www.telegram.org/img/t_logo.png" alt="" />
+2348056710255
</div>
<div class="contactDetails-Items">
<img src="https://www.telegram.org/img/t_logo.png" alt="" />
012911722
</div>
<div class="contactDetails-Items">
<img src="https://www.telegram.org/img/t_logo.png" alt="" />
<a href="info#bethelgeminischools.com"
>info#bethelgeminischools.com</a
>
</div>
</div>
<div class="preTopNav-Items socialDetails">
<a href="https://www.facebook.com/bethelgeminischools"
><img
src="/Icons/Facebook (Transparent - White Outline).png"
alt=""
/></a>
<a href="https://www.twitter.com/bethelgeminischools"
><img
src="/Icons/Twitter (Transparent - White Outline).png"
alt=""
/></a>
<a href="https://www.instagram.com/bethelgeminischools"
><img
src="/Icons/Instagram (Transparent - White Outline).png"
alt=""
/></a>
<a href="https://www.linkedin.com/bethelgeminischools"
><img
src="/Icons/LinkedIn (Transparent - White Outline).png"
alt=""
/></a>
<a href="https://www.wa.me/2348056710255"
><img
src="/Icons/Whatsapp (Transparent - White Outline).png"
alt=""
/></a>
<a href="https://www.t.me/bethelgeminischools"
><img
src="/Icons/Telegram (Transparent - White Outline).png"
alt=""
/></a>
</div>
<div class="preTopNav-Items search">
<input type="text" class="searchBar" placeholder="Search..." />
<img
class="searchIcon"
src="https://www.telegram.org/img/t_logo.png"
alt=""
/>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".searchIcon").click(function () {
$(".search").toggleClass("active");
});
});
</script>
</body>
</html>

You can simplify your HTML and use the flexbox efficiently.
Complete guide to CSS flexbox | Media Query for Responsive design
$(".searchIcon").click(function() {
$(".search").toggleClass("active");
})
* {
margin: 0
}
.preTopNav {
display: flex;
padding: 15px 20px;
align-items: center;
background-color: navy;
font-family: helvetica, arial, sans-serif;
}
.contactDetails {
display: flex;
flex: 1;
}
.contactDetails a {
display: flex;
text-decoration: none;
color: white;
margin-left: 20px;
align-items: center;
}
.contactDetails a:first-child {
margin-left: 0;
}
.contactDetails a img {
margin-right: 10px;
}
.socialDetails {
width: 30%;
display: flex;
justify-content: center;
}
.socialDetails a {
margin: 0 5px;
display: flex;
}
.search {
width: 18%;
display: flex;
justify-content: flex-end;
overflow: hidden;
}
.searchBar {
display: none;
}
.search.active .searchBar {
display: block;
margin-right: 10px;
box-sizing: border-box;
width: 100%;
transition: width 0.5s;
}
#media screen and (max-width: 991px) {
.preTopNav {
flex-direction: column
}
.socialDetails {
margin-top: 20px;
width: 100%;
justify-content: center;
}
.search {
width: 50%;
margin-top: 20px;
justify-content: center;
text-align: center;
}
}
#media screen and (max-width: 767px) {
.contactDetails a {
margin-bottom: 10px;
}
.contactDetails {
flex-direction: column;
align-items: center;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<div class="preTopNav">
<div class="preTopNav-Items contactDetails">
<img src="https://placehold.it/24x24" alt="" /><span>+2348056710255M</span>
<img src="https://placehold.it/24x24" alt="" /><span>012911722</span>
<img src="https://placehold.it/24x24" alt="" /><span>info#bethelgeminischools.com</span>
</div>
<div class="preTopNav-Items socialDetails">
<img src="https://placehold.it/24x24" alt="" />
<img src="https://placehold.it/24x24" alt="" />
<img src="https://placehold.it/24x24" alt="" />
<img src="https://placehold.it/24x24" alt="" />
<img src="https://placehold.it/24x24" alt="" />
<img src="https://placehold.it/24x24" alt="" />
</div>
<div class="preTopNav-Items search">
<input type="text" class="searchBar" placeholder="Search..." />
<img class="searchIcon" src="https://placehold.it/24x24" alt="" />
</div>
</div>

Problem 1:
If you add display: flex to the parent div container the items will displayed in a grid like view.
Problem 2: The gap is caused by right css attribute. Also note that when using calc you need to add a space between the operator
.preTopNav .search input {
position: relative;
right: 50px; <-- This is causing the space/gap between the search box and icon
width: calc(100% - 50px); <-- Added space before and after minus
padding: 3px 10px;
font-size: 16px;
}
Problem 3: Make the parent containers display flex and add align-items: center to align properly.
.contactDetails-Items {
display: flex;
align-items: center;
margin-right: 20px;
}
I've created a Sandbox where you can see the final result.