How to change image position - javascript

I need some help, I'm currently trying to make a portfolio using HTML following a tutorial I'm watching.
I used undraw to add an image but unfortunately, the image is stuck to the right:
I want to put the image underneath my icons but not sure on how to do to this. Any advice on how to get the SVG image in the centre underneath my icons?
#import url('https://fonts.googleapis.com/css2?family=Lato:wght#400;700&family=Poppins:wght#400;500;600&display=swap');
*{
color:black;
font-family: 'Lato', sans-serif;
padding: 0;
margin: 0;
box-sizing: border-box;
}
h1,h2,h3,h4,h5,h6,span{
color:black;
text-align: center;
line-height: 1.25;
}
h1{
font-size: 36px;
}
p{
line-height: 1.5;
font-size: 16px;
}
li{
list-style-type: none;
}
.flex{
display: flex; /* this automatically aligns like columns or rows with auto width and auto height */
}
.flex-1{
flex: 1; /* this makes sure that it is the entire height of the page */
}
/* Navigation bar */
.row{
width: 100%;
max-width: 800px;
margin: 0 auto;
}
.text-pink{
color: #FF69B4 ;
}
nav{
height: 100px;
width: 100%;
max-width: 1000px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
}
.nav__link--list{
display: flex;
}
.nav__link--anchor{
margin: 0 12px;
color: black;
text-decoration: none;
font-weight: 700;
}
.nav__link--anchor-primary{
background-color: #FF69B4;
padding: 8px 20px;
border-radius: 50px;
color: white;
transition: all 300ms ease;
}
.nav__link--anchor-primary:hover{
background-color: #FF69B4;
}
.personal_logo{
font-size: 20px;
color: #FF69B4;
margin: 0 12px;
font-weight: bold;
}
/* About mE */
#about-me{
min-height: 100vh; /* entire height of the page */
display: flex;
flex-direction: column;
}
.about-me__info{
display: flex;
flex-direction: column;
}
.about-me__info--container {
display: flex;
flex-direction: column; /* so it is not side-by-side */
align-items: center;
max-width: 600px;
margin: 0 auto;
text-align: center;
}
.about-me--picture--mask{
width: 180px;
height: 180px;
border-radius: 100%;
overflow: hidden;
box-shadow: 0 8px 16px rgba(0,0,0,1);
margin-bottom: 20px;
}
.about-me__picture{
width: 100%;
transform: scale(1,1.1);
padding-top: 7px;
}
.about-me__info--para{
font-size: 15px;
margin-bottom: 28px;
}
.about-me__info--title{
margin-bottom: 15px;
}
.about-me__link{
font-size: 20px;
color:#FF69B4;
text-decoration: none;
padding: 0 16px;
}
.about-me__img--container{
flex: 1;
display: flex;
align-items: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Annette</title>
<link rel="stylesheet" href="./css/styles.css">
<script src="https://kit.fontawesome.com/6ad8c9aa3b.js" crossorigin="anonymous"></script>
</head>
<body>
<section id="about-me">
<nav>
<div class="personal_logo">Annette</div>
<ul class="nav__link--list">
<li class="nav__Link">
<a href="#languages" class="
nav__link--anchor
link__hover-effect
link_hover-effect--black"
>Languages</a>
</li>
<li class="nav__link">
<a href="#projects" class="
nav__link--anchor
link__hover-effect
link_hover-effect--black">
Projects</a>
</li>
<li class="nav__link">
<a href="" class=
"nav__link--anchor
nav__link--anchor-primary"
>Contact</a>
</li>
</ul>
</nav>
<div class="flex flex-1">
<div class=".about-me__info row"> <!--inside the row, there is 2 sections: infromation and image-->
<div class="about-me__info--container">
<figure class="about-me--picture--mask">
<img src="./images/Annette2.JPG" class= "about-me__picture" alt="Picture of Me!">
</figure> <!--this contains my image -->
<h1 class="about-me__info--title"> Hey! I'm <span class="text-pink">Jane Doe 👋 </span> </h1>
<h1>
<p class="about-me__info--para">
I recently just completed my <strong class="text-pink">insert text </strong> Throughout both degrees, I have always been interested in creating very engaging and interactive PowerPoints to present my work. This led to my passion for web development and designing projects on topics that I’m interested in such as <strong class="text-pink">Ethical AI, Social Justice and Emerging Technologies. </strong>
</p>
<div class="about-me__links"></div>
<a href="" class="about-me__link">
<i class="fa-brands fa-linkedin"></i>
</a>
<a href="" class="about-me__link">
<i class="fa-brands fa-github"></i>
</a>
<a href="" class="about-me__link">
<i class="fa-solid fa-inbox"></i>
</a>
<a href="" class="about-me__link">
<i class="fa-solid fa-file-pdf"></i>
</a>
</div>
</div>
<figure class="about-me__img--container">
<img src="./Assests/undraw_proud_coder_re_exuy.svg" alt="">
</figure>
</div>
</section>
</body>
</html>


Just need a little to fix the mark up. And to put the image in its own div, below the flex stuff.
#import url('https://fonts.googleapis.com/css2?family=Lato:wght#400;700&family=Poppins:wght#400;500;600&display=swap');
* {
color: black;
font-family: 'Lato', sans-serif;
padding: 0;
margin: 0;
box-sizing: border-box;
}
h1,
h2,
h3,
h4,
h5,
h6,
span {
color: black;
text-align: center;
line-height: 1.25;
}
h1 {
font-size: 36px;
}
p {
line-height: 1.5;
font-size: 16px;
}
li {
list-style-type: none;
}
.flex {
display: flex;
/* this automatically aligns like columns or rows with auto width and auto height */
}
.flex-1 {
flex: 1;
/* this makes sure that it is the entire height of the page */
}
/* Navigation bar */
.row {
width: 100%;
max-width: 800px;
margin: 0 auto;
}
.text-pink {
color: #FF69B4;
}
nav {
height: 100px;
width: 100%;
max-width: 1000px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
}
.nav__link--list {
display: flex;
}
.nav__link--anchor {
margin: 0 12px;
color: black;
text-decoration: none;
font-weight: 700;
}
.nav__link--anchor-primary {
background-color: #FF69B4;
padding: 8px 20px;
border-radius: 50px;
color: white;
transition: all 300ms ease;
}
.nav__link--anchor-primary:hover {
background-color: #FF69B4;
}
.personal_logo {
font-size: 20px;
color: #FF69B4;
margin: 0 12px;
font-weight: bold;
}
/* About mE */
#about-me {
min-height: 100vh;
/* entire height of the page */
display: flex;
flex-direction: column;
}
.about-me__info {
display: flex;
flex-direction: column;
}
.about-me__info--container {
display: flex;
flex-direction: column;
/* so it is not side-by-side */
align-items: center;
max-width: 600px;
margin: 0 auto;
text-align: center;
}
.about-me--picture--mask {
width: 180px;
height: 180px;
border-radius: 100%;
overflow: hidden;
box-shadow: 0 8px 16px rgba(0, 0, 0, 1);
margin-bottom: 20px;
}
.about-me__picture {
width: 100%;
transform: scale(1, 1.1);
padding-top: 7px;
}
.about-me__info--para {
font-size: 15px;
margin-bottom: 28px;
}
.about-me__info--title {
margin-bottom: 15px;
}
.about-me__link {
font-size: 20px;
color: #FF69B4;
text-decoration: none;
padding: 0 16px;
}
.about-me__img--container {
flex: 1;
display: flex;
align-items: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Annette</title>
<link rel="stylesheet" href="./css/styles.css">
<script src="https://kit.fontawesome.com/6ad8c9aa3b.js" crossorigin="anonymous"></script>
</head>
<body>
<section id="about-me">
<nav>
<div class="personal_logo">Annette</div>
<ul class="nav__link--list">
<li class="nav__Link">
<a href="#languages" class="
nav__link--anchor
link__hover-effect
link_hover-effect--black">Languages</a>
</li>
<li class="nav__link">
<a href="#projects" class="
nav__link--anchor
link__hover-effect
link_hover-effect--black">
Projects</a>
</li>
<li class="nav__link">
<a href="" class="nav__link--anchor
nav__link--anchor-primary">Contact</a>
</li>
</ul>
</nav>
<div class="flex flex-1">
<div class=".about-me__info row">
<!--inside the row, there is 2 sections: infromation and image-->
<div class="about-me__info--container">
<figure class="about-me--picture--mask">
<img src="./images/Annette2.JPG" class="about-me__picture" alt="Picture of Me!">
</figure>
<!--this contains my image -->
<h1 class="about-me__info--title"> Hey! I'm <span class="text-pink">Jane Doe 👋 </span> </h1>
<p class="about-me__info--para">
I recently just completed my <strong class="text-pink">insert text </strong> Throughout both degrees, I have always been interested in creating very engaging and interactive PowerPoints to present my work. This led to my passion for web development
and designing projects on topics that I’m interested in such as <strong class="text-pink">Ethical AI, Social Justice and Emerging Technologies. </strong>
</p>
<div class="about-me__links">
<a href="" class="about-me__link">
<i class="fa-brands fa-linkedin"></i>
</a>
<a href="" class="about-me__link">
<i class="fa-brands fa-github"></i>
</a>
<a href="" class="about-me__link">
<i class="fa-solid fa-inbox"></i>
</a>
<a href="" class="about-me__link">
<i class="fa-solid fa-file-pdf"></i>
</a>
</div>
</div>
</div>
</div>
<div>
<figure class="about-me__img--container" >
<img src="https://picsum.photos/200" alt="" style="margin: auto">
</figure>
</div>
</section>
</body>
</html>

Related

Website on phone is not the same on laptop mobile view

The website mobile version looks like this:desktop mobile view
But on my phone it looks like this: phone view
I make use of box-sizing, still don’t know why it’s having different scaling

Check what measurement unit you used. If it is Percent (%) or something else you should convert it to pixels, as Percent and other similar units are dependent on the screen size. If this is not the issue, please include the code for it so we can find the issue. Thanks!

If you set the width of the image in terms of the viewport size then you get a circle (at least on the tests I did on IOS).
Obviously you will want to set the vw amount to suit your particular requirement.
This snippet sets it to 10vw for this demo.
However, there is another factor. I think you are relying on the natural dimensions of the images to be square. If they aren't then things could look distorted so this snippet adds an object-fit: cover.This still relies on the faces being in a more or less central position in the overall image - but that would need correction depending on each individual image.
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.kill {
background: #1d1d1d;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(4.9);
-webkit-backdrop-filter: blur(4.9);
height: 100%;
color: white;
padding-top: 15px;
}
.navi {
width: 100%;
}
.nipp {
position: relative;
z-index: 33;
}
.rate {
background: transparent;
border: 0;
outline: none;
margin-right: 25px;
align-items: center;
}
.rell {
justify-content: end;
display: flex;
}
.mage {
width: 10vw;
height: 10vw;
object-fit: cover;
cursor: pointer;
}
.mage1 {
display: flex;
flex-direction: row;
justify-content: center;
}
.mage2 {
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
position: relative;
}
.mage4 {
border: 3px solid #5cb85c;
padding: 5px;
}
.butn {
border: 0;
outline: none;
background-color: transparent;
position: absolute;
left: 50px;
}
.txt {
margin-left: -10px;
}
#media screen and (max-width:992px) {
.kill {
background: #1d1d1d;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(4.9);
-webkit-backdrop-filter: blur(4.9);
height: 100%;
color: white;
padding-top: 15px;
}
.navi {
width: 100%;
}
.nipp {
position: relative;
z-index: 33;
}
.rate {
background: transparent;
border: 0;
outline: none;
margin-right: 25px;
align-items: center;
}
.rell {
justify-content: end;
display: flex;
}
.mage {
width: 10vw;
height: 10vw;
object-fit: cover;
cursor: pointer;
}
.mage1 {
display: flex;
flex-direction: row;
justify-content: center;
}
.mage2 {
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
position: relative;
}
.mage4 {
border: 3px solid #5cb85c;
padding: 5px;
}
.butn {
border: 0;
outline: none;
background-color: transparent;
position: absolute;
left: 50px;
}
.txt {
margin-left: -10px;
}
}
</style>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.8.0/font/bootstrap-icons.css" integrity="sha384-ejwKkLla8gPP8t2u0eQyL0Q/4ItcnyveF505U0NIobD/SMsNyXrLti6CWaD0L52l" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
<div class="kill">
<nav class="navbar navbar-expand-sm navbar-dark nipp navi">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<i class="bi bi-whatsapp h2"></i> Whatsapp
</a>
<div class="rell">
<button class="rate text-light h2"> <i class="bi bi-search"></i></button>
<img src="https://randomuser.me/api/portraits/men/12.jpg" alt="" class="rounded-circle w-25">
</div>
</div>
</nav>
<section>
<div class="container pt-4">
<div class="mage1">
<div class="mage2">
<img src="https://randomuser.me/api/portraits/men/10.jpg" class="rounded-circle mage ms-3 " alt="">
<h6 class="mt-2 txt">You</h6>
<button class="butn"> <i class="bi bi-plus-circle-fill"></i></button>
</div>
<div class="mage2">
<img src="https://randomuser.me/api/portraits/women/1.jpg" class="rounded-circle mage ms-3 mage4" alt="">
<h6 class="mt-2 txt">David</h6>
</div>
<div class="mage2">
<img src="https://randomuser.me/api/portraits/men/6.jpg" class="rounded-circle mage ms-3 mage4" alt="">
<h6 class="mt-2 txt">David</h6>
</div>
<div class="mage2">
<img src="https://randomuser.me/api/portraits/women/18.jpg" class="rounded-circle mage ms-3 mage4" alt="">
<h6 class="mt-2 txt">David</h6>
</div>
<div class="mage2">
<img src="https://randomuser.me/api/portraits/men/14.jpg" class="rounded-circle mage ms-3 mage4" alt="">
<h6 class="mt-2 txt">David</h6>
</div>
</div>
</div>
</section>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>
Incidentally, I'm not sure why you bother to repeat the styling und er the media query, for example for mage, but that doesn't affect your question so I've left it.

How can I use HTML, CSS, or JS to make an element active by default?

I would like for <li>Home</li> to be automatically active when a user arrives at my page.
Is there any way to use css, html, or js to set a link to active by default when the user initially arrives at the site? That way, the :active style will visually indicate the location of the nav bar.
Also, once the user clicks on another list item, <li>Home</li> should no longer be active until clicked again.
Thanks, everyone.
Here is the HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./styles.css">
<link rel="shortcut icon" href="./images/Pizza logo.jpg" type="image/x-icon">
<title>Best slice</title>
</head>
<body>
<!-- HEADING -->
<h1>Best Slice (NYC)</h1>
<!-- NAV -->
<div class="nav-container">
<ul>
<li>Home</li>
<li>Slices</li>
<li>Team</li>
<!-- <li>Locations</li> -->
</ul>
</div>
<!-- SLOGAN -->
<div class="slogan-container">
<p>Pizza, you'd <strong>die</strong> for.</p>
</div>
<!-- SLICES -->
<div id='slices' class="slices-container">
<div class="slices-text">
<h2>By the slice</h2>
<h4>Premium slices of za' just seconds out of the oven</h4>
</div>
<div class="slice-cards">
<div class="card">
<img src="./images/Sausage pizza.jpg" alt="Sausage Pizza">
<br>
<span>Sausage, $8.99/slice</span>
</div>
<div class="card">
<img src="./images/Pepperoni Pizza.jpg" alt="Pepperoni Pizaa">
<br>
<span>Pepperoni, $8.99/slice</span>
</div>
<div class="card">
<img src="./images/Cheese Pizza.jpg" alt="Cheese pizza">
<br>
<span>Cheese, $7.99/slice</span>
</div>
<div class="card">
<img src="./images/Pineapple Pizza.jpg" alt="Pineapple Pizza">
<br>
<span>Pineapple, $10.99/slice</span>
</div>
<div class="card">
<img src="./images/Buffalo Chicken Pizza.jpg" alt="Buffalo Chicken Pizza">
<br>
<span>Buffalo Chicken, $10.99/slice</span>
</div>
</div>
</div>
<!-- TEAM -->
<div class="team-container" id="team">
<div class="team-text">
<h2>Team</h2>
<h4>Meet the genuis behind our insanely good recipes</h4>
</div>
<div class="team-cards">
<div class="team-member-card">
<img src="./images/Chef.jpg" alt="Head Chef">
<h3>Alex, Chef</h3>
<p>Awarded #1 slice in Manhattan.</p>
</div>
<div class="team-member-card">
<img src="./images/Cashier.jpg" alt="Cashier">
<h3>Jack, Cashier</h3>
<p>Decent at math.</p>
</div>
<div class="team-member-card">
<img src="./images/Delivery boy.jpg" alt="Pizza Delivery Boy">
<h3>Matt, Delivery Boy</h3>
<p>He has a need for speed.</p>
</div>
</div>
</div>
</body>
<footer>
<p>Email: Bestslice#bestslicenyc.com</p>
<p>Call us: (XXX) XXX-XXX</p>
<p>Dine with us: 111 Madison Ave NYC</p>
<p>© Best Slice NYC 2021</p>
</footer>
</html>
Here is the CSS
/* Global settings */
#import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Varela+Round&display=swap');
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
text-align: center;
}
/* GLOBAL HEADINGS & TEXT */
h1 {
text-align: center;
font-size: 6rem;
font-family: 'Bebas Neue', cursive;
margin-top: 1rem;
color: tomato;
}
h2 {
font-family: 'Bebas Neue', cursive;
font-size: 4rem;
color: tomato;
}
h3, h4 {
font-size: 1.5rem;
font-family: 'Varela Round', sans-serif;
padding: 10px;
}
p {
font-size: 1.2rem;
padding: 10px;
}
/* NAV */
.nav-container {
display: flex;
justify-content: space-around;
margin-top: 2rem;
}
ul {
list-style-type: none;
}
li {
display: inline;
font-size: 1.25rem;
font-family: 'Varela Round', sans-serif;
}
li a {
color: black;
text-decoration: none;
padding: 1rem 2rem;
transition: 0.5s;
}
li a:hover {
background-color: tomato;
border-radius: 2.5rem;
color: white;
}
/* SLOGAN */
.slogan-container {
margin-top: 2rem;
align-content: center;
justify-content: center;
display: flex;
flex-wrap: wrap;
height: 50vh;
/* border: red 1px solid; */
}
.slogan-container p {
font-family: 'Varela Round', sans-serif;
font-size: 6rem;
display: block;
}
/* SLICES SECTION */
.slices-container {
margin: auto;
margin-bottom: 7rem;
/* border: red 1px solid; */
margin-top: 1rem;
}
.slices-text {
margin-bottom: 2rem;
}
.slice-cards {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
/* border: red 5px solid; */
padding-top: 2rem;
}
.card {
/* border: blue 3px solid; */
margin-top: 2rem;
}
.card img {
width: 350px;
height: 300px;
overflow: hidden;
}
.card span {
font-family: 'Varela Round', sans-serif;
font-size: 1.5rem;
font-weight: 700;
color: tomato;
}
/* TEAM */
.team-container {
width: auto;
/* border: red 5px solid; */
margin-bottom: 3rem;
}
.team-text {
margin-bottom: 2rem;
}
.team-cards {
display: flex;
flex-wrap: wrap;
align-content: center;
justify-content: space-around;
}
.team-member-card img {
height: 300px;
width: 250px;
}
/* FOOTER */
footer {
background-color: black;
padding: 15px;
}
footer p {
color: white;
z-index: 10;
font-family: 'Varela Round', sans-serif;
}
#media only screen and (max-width: 500px) {
h1 {
font-size: 5rem;
}
.slogan-container {
height: 40vh;
margin-top: 3rem;
margin-bottom: 3rem;
}
}

You can .focus the element.
const anchor = document.querySelector('a[href="#"]')
anchor.focus()
/* Global settings */
#import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Varela+Round&display=swap');
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
text-align: center;
}
/* GLOBAL HEADINGS & TEXT */
h1 {
text-align: center;
font-size: 6rem;
font-family: 'Bebas Neue', cursive;
margin-top: 1rem;
color: tomato;
}
h2 {
font-family: 'Bebas Neue', cursive;
font-size: 4rem;
color: tomato;
}
h3, h4 {
font-size: 1.5rem;
font-family: 'Varela Round', sans-serif;
padding: 10px;
}
p {
font-size: 1.2rem;
padding: 10px;
}
/* NAV */
.nav-container {
display: flex;
justify-content: space-around;
margin-top: 2rem;
}
ul {
list-style-type: none;
}
li {
display: inline;
font-size: 1.25rem;
font-family: 'Varela Round', sans-serif;
}
li a {
color: black;
text-decoration: none;
padding: 1rem 2rem;
transition: 0.5s;
}
li a:hover {
background-color: tomato;
border-radius: 2.5rem;
color: white;
}
/* SLOGAN */
.slogan-container {
margin-top: 2rem;
align-content: center;
justify-content: center;
display: flex;
flex-wrap: wrap;
height: 50vh;
/* border: red 1px solid; */
}
.slogan-container p {
font-family: 'Varela Round', sans-serif;
font-size: 6rem;
display: block;
}
/* SLICES SECTION */
.slices-container {
margin: auto;
margin-bottom: 7rem;
/* border: red 1px solid; */
margin-top: 1rem;
}
.slices-text {
margin-bottom: 2rem;
}
.slice-cards {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
/* border: red 5px solid; */
padding-top: 2rem;
}
.card {
/* border: blue 3px solid; */
margin-top: 2rem;
}
.card img {
width: 350px;
height: 300px;
overflow: hidden;
}
.card span {
font-family: 'Varela Round', sans-serif;
font-size: 1.5rem;
font-weight: 700;
color: tomato;
}
/* TEAM */
.team-container {
width: auto;
/* border: red 5px solid; */
margin-bottom: 3rem;
}
.team-text {
margin-bottom: 2rem;
}
.team-cards {
display: flex;
flex-wrap: wrap;
align-content: center;
justify-content: space-around;
}
.team-member-card img {
height: 300px;
width: 250px;
}
/* FOOTER */
footer {
background-color: black;
padding: 15px;
}
footer p {
color: white;
z-index: 10;
font-family: 'Varela Round', sans-serif;
}
#media only screen and (max-width: 500px) {
h1 {
font-size: 5rem;
}
.slogan-container {
height: 40vh;
margin-top: 3rem;
margin-bottom: 3rem;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./styles.css">
<link rel="shortcut icon" href="./images/Pizza logo.jpg" type="image/x-icon">
<title>Best slice</title>
</head>
<body>
<!-- HEADING -->
<h1>Best Slice (NYC)</h1>
<!-- NAV -->
<div class="nav-container">
<ul>
<li>Home</li>
<li>Slices</li>
<li>Team</li>
<!-- <li>Locations</li> -->
</ul>
</div>
<!-- SLOGAN -->
<div class="slogan-container">
<p>Pizza, you'd <strong>die</strong> for.</p>
</div>
<!-- SLICES -->
<div id='slices' class="slices-container">
<div class="slices-text">
<h2>By the slice</h2>
<h4>Premium slices of za' just seconds out of the oven</h4>
</div>
<div class="slice-cards">
<div class="card">
<img src="./images/Sausage pizza.jpg" alt="Sausage Pizza">
<br>
<span>Sausage, $8.99/slice</span>
</div>
<div class="card">
<img src="./images/Pepperoni Pizza.jpg" alt="Pepperoni Pizaa">
<br>
<span>Pepperoni, $8.99/slice</span>
</div>
<div class="card">
<img src="./images/Cheese Pizza.jpg" alt="Cheese pizza">
<br>
<span>Cheese, $7.99/slice</span>
</div>
<div class="card">
<img src="./images/Pineapple Pizza.jpg" alt="Pineapple Pizza">
<br>
<span>Pineapple, $10.99/slice</span>
</div>
<div class="card">
<img src="./images/Buffalo Chicken Pizza.jpg" alt="Buffalo Chicken Pizza">
<br>
<span>Buffalo Chicken, $10.99/slice</span>
</div>
</div>
</div>
<!-- TEAM -->
<div class="team-container" id="team">
<div class="team-text">
<h2>Team</h2>
<h4>Meet the genuis behind our insanely good recipes</h4>
</div>
<div class="team-cards">
<div class="team-member-card">
<img src="./images/Chef.jpg" alt="Head Chef">
<h3>Alex, Chef</h3>
<p>Awarded #1 slice in Manhattan.</p>
</div>
<div class="team-member-card">
<img src="./images/Cashier.jpg" alt="Cashier">
<h3>Jack, Cashier</h3>
<p>Decent at math.</p>
</div>
<div class="team-member-card">
<img src="./images/Delivery boy.jpg" alt="Pizza Delivery Boy">
<h3>Matt, Delivery Boy</h3>
<p>He has a need for speed.</p>
</div>
</div>
</div>
</body>
<footer>
<p>Email: Bestslice#bestslicenyc.com</p>
<p>Call us: (XXX) XXX-XXX</p>
<p>Dine with us: 111 Madison Ave NYC</p>
<p>© Best Slice NYC 2021</p>
</footer>
</html>

Add an id to your object, es "homeLink":
<li>Home</li>
.
window.addEventListener('load', (event) => {
document.getElementById("homeLink").focus();
});

FIRST METHOD:
You can just simply make an ID and tabindex="0" attribute for the element:
<li>Home</li>
And then focus it with JS:
document.getElementById("focusTime").focus();
SECOND METHOD:
You can just simply make an :active CSS pseudo-class by default only in JS!:
document.getElementById("focusTime").active();
And then it'll simply make the element "clicked" by JS!
THIRD METHOD:
document.getElementById("focusTime").click()
SAME AS THE SECOND METHOD
I hope very much this helps!

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>

JQuery MouseMove on triggered element

I'm try to reach a mousemove triggered by a div, I'm thinking the problem it's on this line of code: [_ $('.mousePointer').css({left:e.pageX, top:e.pageY})_]
because the position of the mouse move it's triggered by the size of the entire page, right?
How can I activate the mousemove on different div and change the img in the pointer on different div?
I hope i can explain the problem. I want to use the mouse move as title of each post
body{
margin: 0;
padding: 0;
font-family: "Open Sans", sans-serif;
background-color: #800f62;
}
.headerz{
background-color: grey;
max-height: 120px;
}
.headerz img{
width: 80px;
margin: 10px;
}
.wrapper{
margin-bottom: 100px;
}
.content{
background-color: purple;
min-height: 200px;
font-size: 40px;
display: flex;
align-items: center;
justify-content: center;
}
.Post_container{
color: white;
margin: 5%;
background-color: #620c75;
min-width: 80%;
min-height: 400px;
border-radius: 10px 10px 10px 10px;
align-items: center;
justify-content: center;
display: flex;
position: relative;
}
/*try follower mouse*/
.mousePointer{
width: 50px;
height: 30px;
position: absolute;
top: 50%;
left: 50%;
z-index: 9999;
}
/*Fine Mouse Follow*/
footer{
background: #121212;
padding: 5px 0;
position: fixed;
left: 0;
bottom: 0;
text-align: center;
width: 100%;
height: 65px;
box-shadow: 0px 0px 08px black;
}
.footer-container{
max-width: 100%;
margin: auto;
padding: 0 20px;
background: black;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap-reverse;
}
.social-media{
margin: 20px 0;
}
.social-media a{
color: white;
margin: 20px;
font-size: 33px;
text-decoration: none;
transition: .3s linear;
}
.social-media a:hover{
color: purple;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js"> </script>
<link rel="stylesheet" href="DigiArch_may20200.css">
<link rel="stylesheet" href="try.js">
<title>Digital Archive Update May 2020</title>
</head>
<body>
<div class="headerz">
<img src="1E_Alpha.png" alt="">
</div>
<div class="wrapper">
<div class="content">
<div class="mousePointer" ><img src="https://i.ibb.co/sQXKSH1/1e-Alpha.png" alt="1e-Alpha" border="0" style="width:100px"></div>
<script type="text/javascript">
$(document).mousemove(function(e){
$('.mousePointer').css({left:e.pageX, top:e.pageY})
})
</script>
<div class="Post_container" style="background-image: url(https://lh3.googleusercontent.com/HA4mqBRa6t03RGDnEYUL3kuqWxsc1yNMJEgo9EetoKEabEqFASgcIPM89Ec8xSG6HosGD4xi03-C1zEnv54gH2VnV_fnr3k6V_LXrUlSImKsW-jWQrTbhBkXtdLTh8Sg70UEiLvGzA=s200-p-k); ">
Post
</div>
</div>
<div class="content" >
<div class="Post_container" style="background-image: url(https://lh3.googleusercontent.com/HA4mqBRa6t03RGDnEYUL3kuqWxsc1yNMJEgo9EetoKEabEqFASgcIPM89Ec8xSG6HosGD4xi03-C1zEnv54gH2VnV_fnr3k6V_LXrUlSImKsW-jWQrTbhBkXtdLTh8Sg70UEiLvGzA=s200-p-k); ">
Post1
</div>
</div>
<footer>
<div class="footer-container">
<div class="social-media">
<i class="fab fa-instagram"></i>
<i class="fab fa-soundcloud"></i>
<i class="fab fa-behance"></i>
<i class="fab fa-twitch"></i>
<i class="fab fa-paypal"></i>
</div>
</div>
</footer>
</body>
</html>

The problem is with the document. It's targeting the whole page whereas what you need is to focus it on .Post_container since its the container of your image. That's pretty much it.
$(".Post_container").mousemove(function(e){ //======> replaced document with container class
$('.mousePointer').css({left:e.pageX, top:e.pageY})
})
Hope it helps :)

Categories

Resources