I have looked at the other questions that have been answered, tried them out myself and I still couldn't click on my burger and have the slide out menu. I was following a tutorial and it was turning out fine until I got to the JavaScript section of it. I'm not really too sure what I am doing wrong here. Looked around in the forum and tried all the solutions I could find for it to still not work.
const navSlide = () => {
const burger = document.querySelector('.burger');
const nav = document.querySelector('.navigation');
burger.addEventListener('click', () => {
nav.classList.toggle('nav-active');
});
}
const app = () => {
navSlide();
}
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.townlogo{
display: flex;
justify-content: center;
margin-top: 20px;
mix-blend-mode: multiply;
}
nav{
display: flex;
justify-content: space-around;
align-items: center;
min-height: 8vh;
background-color: white;
margin-bottom: 20px;
}
ul.navigation{
display: flex;
justify-content: space-around;
width: 40%;
align-items: center;
margin-top: 20px;
background-color: (white);
font-family: athelas, serif;
font-weight: 400;
font-style: normal;
letter-spacing: 1px;
}
ul.navigation li{
list-style: none;
}
ul.navigation a{
color: black;
text-decoration: none;
}
.burger{
display: none;
cursor: pointer;
}
.burger div{
width: 25px;
height: 3px;
background-color: black;
margin: 5px;
}
li a:hover{
color: rgb(190 30 45);
}
.indexbody{
height: 100%;
margin: 0;
font-size: 17px;
font-family: athelas, serif;
font-weight: 400;
font-style: normal;
line-height: 1.8em;
color: rgb(65 57 61);
}
.img1, .img2{
position: relative;
opacity:0.70;
background-position: center;
background-size:cover;
background-repeat: no-repeat;
background-attachment: fixed; /*Can be adjusted for mobile viewing*/
}
.img1{
background-image: url('../Images/lantern.jpg');
min-height: 600px;
}
.img2{
background-image: url('../Images/cookingcropped.jpg');
min-height: 400px;
}
.section{
text-align: center;
padding:50px 80px;
}
.section-mission{
background-color: rgb(65 57 61);
color:white;
}
.section-vision{
background-color: rgb(65 57 61);
color:white;
}
.menutext{
position: absolute;
font-size: 40px;
top: 50%;
width: 100%;
text-align: center;
color: white;
letter-spacing: 3px;
text-shadow: 3px 3px 3px black ;
}
.menutext .border{
border-style: solid;
border-width: 4px;
padding: 8px;
color: white;
box-shadow: 3px 3px 3px black;
text-decoration: none;
}
a.viewmenu:link{
text-decoration: none;
}
a.viewmenu:visited{
text-decoration: none;
}
a.viewmenu:hover{
background-color: transparent;
}
a.viewmenu:active{
text-decoration: none;
}
/*rectangle div contains copyright footer section*/
.rectangle{
text-align: center;
font-family: athelas, serif;
font-weight: 400;
font-style: normal;
font-size: 14px;
border-left: 520px solid rgb(190 30 45) ;
border-right: 520px solid rgb(190 30 45) ;
margin-top: 20px;
margin-bottom: 20px;
}
#media screen and (max-width: 1024px){
.navigation{
width: 50%;
}
}
#media screen and (max-width: 768px){
body{
overflow-x: hidden;
}
.navigation{
position: absolute;
right: 0px;
height: 92vh;
top: 8vh;
background-color: (white);
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
transform: translateX(100%);
transition: transform 0.5s ease-in;
}
.navigation li{
opacity: 0;
}
.burger{
display: block;
}
}
.nav-active{
transform: translateX(0%);
}
.rectangle{
text-align: center;
font-family: athelas, serif;
font-weight: 400;
font-style: normal;
font-size: 14px;
border-left: 200px solid rgb(190 30 45) ;
border-right: 200px solid rgb(190 30 45) ;
margin-top: 20px;
margin-bottom: 20px;
}
<!DOCTYPE html>
<html lang="en">
<head> <!--Header containing title,meta,and links-->
<title>ctowncuisine</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://use.typekit.net/qsw5hiv.css">
<link rel="stylesheet" href="CSS/style.css"> <!--link reference to CSS stylesheet-->
</head>
<body>
<nav>
<div class="townlogo"> <!--Technically the header of the page, but used in the body for consistency-->
<img src="Images/townlogo.jpg" alt="chinese restaurant logo">
</div>
<ul class="navigation"> <!--section for top navigation bar-->
<li>Home</li>
<li>Menu</li>
<li>Contact</li>
<li><span>Reserve Table</span></li>
</ul>
<div class="burger" id="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
<div class="line4"></div>
</div>
</nav>
<div class="indexbody"></div>
<div class="img1"></div> <!--lantern.html image class-->
<a class="viewmenu" href="menu.html"> <!--Linking border text with href-->
<div class="menutext">
<span class="border ">
View Our Menu
</span>
</div>
</a>
<section class="section section-mission">
<h2 class="mission">Our Mission</h2> <!--This is the second heading containing: Our Mission section-->
<p>To bring quality, style and the wish for good fortune to all of our guests. We provide a high-end experience through Chinese cuisine.
</p> <!--Paragraph containing the mission statement of TOWN-->
</section>
<div class="img2"> <!--div classifying second image: cookingcropped.html-->
<span class="border">
</span>
</div>
<section class="section section-vision">
<h2 class="vision">Vision</h2> <!--header 2 containing a class for CSS: Vision-->
<p> <span style="color: rgb( 213 162 141);">TOWN</span> combines a variety of chinese cuisine to excite and delight our customers.
Our vision for the future is to create experiential dining that is more than just a night out.<br> We aim to bring quality and luxury across all aspects of our brand.
The approach of <span style="color: rgb( 213 162 141);">TOWN</span> is to develop our brand with the understanding of both our culture and consumer insights.<br> Within our vision always lives the promise of inspiring creativity, conversation and quality.
Our audience is a high-end clientele who values a dining experience.<br>The age range of our customers are from early 30s-60s. We would like them to come back for both personal dining and events.
</p>
</section>
<footer>
<div class="rectangle"> <!--This section is the footer-->
© 2022 ctowncuisine.com designed by <span>Mariah Mendoza</span>
</div>
</footer>
<script> src="./js/app.js"</script>
</body>
</html>
It‘s hard to help because your code does not work yet. The burger has no size so we cannot click it.
Otherwise, your positioning and transition seems fine. But you’re hiding all menu items with opacity: 0. Since the menu is white, you will not see anything.
The current code has some accessibility issues, meaning it does not work well with assistive technology, which people with disabilities rely on. I improved them and I’ll explain them further down.
const navSlide = () => {
const burger = document.querySelector('.burger');
const nav = document.querySelector('.navigation');
burger.addEventListener('click', () => {
if (nav.classList.toggle('nav-active')) {
// now it’s active
burger.setAttribute('aria-expanded', true);
nav.setAttribute('aria-hidden', false);
} else {
burger.setAttribute('aria-expanded', false);
nav.setAttribute('aria-hidden', true);
}
});
}
const app = () => {
navSlide();
}
.navigation {
list-style-type: none;
}
.navigation a {
display: block;
padding: .5em;
}
#media screen and (max-width: 1024px) {
.navigation {
width: 50%;
}
}
#media screen and (max-width: 768px) {
body {
overflow-x: hidden;
}
.navigation {
position: absolute;
right: 0px;
height: 92vh;
top: 8vh;
background-color: (white);
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
transform: translateX(100%);
transition: transform 0.5s ease-in;
}
.burger {
display: block;
width: 40px;
}
.burger .line {
display: block;
background-color: black;
height: .2em;
margin: .4em 0;
}
.nav-active {
transform: translateX(0%);
}
}
<nav>
<div class="townlogo">
<!--Technically the header of the page, but used in the body for consistency-->
<img src="Images/townlogo.jpg" alt="Town">
</div>
<button class="burger" id="burger" aria-expanded="false" aria-controls="navigation" onclick="navSlide()">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</button>
<ul class="navigation" id="navigation">
<!--section for top navigation bar-->
<li>Home</li>
<li>Menu</li>
<li>Contact</li>
<li>Order Online</li>
</ul>
</nav>
Related
I made the header menu of my website become a sidebar with the screen width. Everything was working fine, the menu could be toggled by clicking the icon. But then i noticed the majority of websites had this property that the menu would close if the user clicks anywhere in the screen. I tryed everything i could but everythime i add the event listener to the code (to remove the class that makes the menu visible), the onclick event that adds the class stops working.
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">
<title>Portfolio.</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#300;400;700&display=swap" rel="stylesheet">
<link rel="apple-touch-icon" sizes="180x180" href="Favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="Favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="Favicon/favicon-16x16.png">
<link rel="shortcut icon" href="Favicon/favicon.ico" type="image/x-icon" />
<link rel="manifest" href="Favicon/site.webmanifest">
<link rel="stylesheet" href="https://unpkg.com/boxicons#latest/css/boxicons.min.css">
<link rel="stylesheet" href="style.css">
<script src="script.js" defer></script>
</head>
<body>
<!-- Header -->
<header id="header">
<div id="container">
<nav id="nav-bar">
Portfolio.
<ul id="nav-menu">
<div id="nav"><li><a id="link" href="#about-me">Sobre mim</a></li></div>
<div id="nav"><li><a id="link" href="#experience">Experiência</a></li></div>
<div id="nav"><li><a id="link" href="#projects">Projetos</a></li></div>
<div id="nav"><li><a id="link" href="#habilities">Competências</a></li></div>
<div id="nav"><button id="resume-btn">Currículo</button></li></div>
</ul>
<div class="menu-icon">
<h3 onclick="handleMenuToggle()">☰</h3>
</div>
</nav>
</div>
</header>
<!-- Sections -->
<main>
<section id="hero"> <!-- Main section -->
<div id="hero-txt">
<h2>
Seja bem vindo, eu sou
</h2>
<h1>
Yan Calvo
</h1>
<p>
Estudante de Ciência da computação e desenvolvedor web
</p>
<div class="social">
<i class='bx bxl-linkedin' ></i>
<i class='bx bxl-github' ></i>
</div>
</div>
</section>
<section id="about-me"> <!-- About section -->
<div id="txt-container" class="container reveal fade-left">
<h2>Sobre mim</h2>
<p>
Sou estudante de Ciência da computação, também
focado em aprender tecnologias de forma
independente. No momento me encontro dedicado a
aprimorar as minhas habilidades através da
experiência profissional e contato com outros
profissionais dedicados.<br><br>
O que mais me entusiasma em trabalhar com programação é poder projetar e criar coisas que tenham propósito e resolvam problemas reais.
Apoiar-se na pesquisa e percepção do cliente, encontrar as formas certas e dinâmicas de resolver determinados problemas, aprender com o processo e, em seguida, iterar e melhora-lo é a chave para um ótimo design.
</p>
</div>
<div class="container reveal fade-left">
<h4 id="quote">
“<br>
Knowledge has to be improved, challenged, and increased constantly, or it vanishes.<br>
”
</h4>
<h5>― Peter Drucker</h5>
</div>
</section>
<section id="experience"> <!-- Experience section -->
<div id="txt-container" class="container reveal fade-right">
<h2>Onde trabalhei </h2>
<p>
Ainda em busca de oportunidades profissionais
</p>
</div>
</section>
<section id="projects"> <!-- Projects section -->
<div id="txt-container" class="container reveal fade-left">
<h2>Projetos</h2>
<p>Trabalhos pessoais</p>
</div>
<div id="portfolio-content" class="container reveal fade-left">
<div class="col">
<img src="Img/work3.jpg">
<div class="layer">
<h3>Web Design</h3>
<h5>Popup</h5>
</div>
</div>
<div class="col">
<img src="Img/work3.jpg">
<div class="layer">
<h3>Web Design</h3>
<h5>Popup</h5>
</div>
</div>
<div class="col">
<img src="Img/work3.jpg">
<div class="layer">
<h3>Web Design</h3>
<h5>Popup</h5>
</div>
</div>
<div class="col">
<img src="Img/work3.jpg">
<div class="layer">
<h3>Web Design</h3>
<h5>Popup</h5>
</div>
</div>
<div class="col">
<img src="Img/work3.jpg">
<div class="layer">
<h3>Web Design</h3>
<h5>Popup</h5>
</div>
</div>
<div class="col">
<img src="Img/work3.jpg">
<div class="layer">
<h3>Web Design</h3>
<h5>Popup</h5>
</div>
</div>
</div>
</section>
<section id="habilities"> <!-- Contact section -->
<div id="txt-container" class="container reveal fade-right">
<h2>Competências</h2>
<div id="habilities-container">
<div id="hability-icons-container"></div>
<img id="hability-icon" src="Img/icons8-javascript-144.png" alt="">
<img id="hability-icon" src="Img/icons8-html-5-144.png" alt="">
<img id="hability-icon" src="Img/icons8-css3-144.png" alt="">
<img id="hability-icon" src="Img/icons8-git-144.png" alt="">
<img id="hability-icon" src="Img/icons8-github-128.png" alt="">
<div id="habilities-description"></div>
</div>
</div>
</section>
</main>
<!-- Footer -->
<footer id="footer">
<div id="footer-copyright">
<h6>Projetado por Yan Calvo</h6>
</div>
<div id="social">
<h6>Email para contato: yancalvo#gmail.com</h6>
</div>
</footer>
</body>
</html>
CSS:
* {
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
scroll-padding-top: 70px;
}
body {
position: relative;
background-color: #ece7e1;
}
html, body {
overflow-x: hidden;
}
/* Header */
header {
position: fixed;
top: 0;
width: 100%;
background-color: rgba(27,26,33,255);
z-index: 200;
}
#container {
width: 1800px;
margin: auto;
}
#nav-bar {
width: 95%;
margin: auto;
min-height: 70px;
display: flex;
justify-content: space-between;
align-items: center;
}
#nav-brand {
color: white;
text-decoration: none;
font-size: 30px;
}
#nav-menu {
display: flex;
justify-content: space-between;
align-items: center;
}
#nav {
margin: auto 30px;
}
.menu-icon {
display: none;
}
#link {
margin-right: 15px;
color: white;
text-decoration: none;
transition: color 0.15s;
}
#link:hover {
color: gray;
font-style: italic;
}
#resume-btn {
width: 100px;
font-weight: bold;
font-size: 15px;
color: rgba(27,26,33,255);
background-color: #ece7e1;
border-radius: 23.5px;
border-style: solid;
border-color: #ece7e1;
padding: 10px;
cursor: pointer;
transition: color 0.15s, border-color 0.15s, width 1.0s;
}
#resume-btn:hover {
width: 150px;
}
/* Sections */
main {
padding-top: 70px;
}
section {
padding: 0px 100px;
}
#hero {
position: relative;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
grid-gap: 4rem;
}
.social a {
color: white;
width: 35px;
height: 35px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(27,26,33,255);
font-size: 17px;
margin-right: 22px;
margin-bottom: 30px;
margin-top: 20px;
}
.social a:hover{
transform: scale(1.1);
transition: .5s;
}
#about-me {
background-color: #191919;
min-height: 500px;
padding-top: 40px;
margin-bottom: 100px;
display: grid;
grid-template-columns: repeat(2, 2fr);
grid-gap: 2rem;
white-space: normal;
}
#experience {
min-height: 300px;
padding-top: 40px;
margin-bottom: 100px;
display: flex;
justify-content: center;
text-align: center;
white-space: normal;
}
#projects {
background-color: #191919;
min-height: 800px;
padding-top: 40px;
margin-bottom: 100px;
display: flex;
flex-direction: column;
text-align: center;
align-items: center;
grid-gap: 2rem;
}
#portfolio-content {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, auto));
grid-gap: 2rem;
align-items: center;
margin-top: 5rem;
text-align: center;
cursor: pointer;
}
.layer{
background: transparent;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
border-radius: 12px;
transition: all .40s;
}
.layer:hover{
background: linear-gradient(rgba(0,0,0,0.5) 0%, #191919);
}
.layer h3{
position: absolute;
width: 100%;
font-size: 25px;
font-weight: 500;
color: white;
bottom: 0;
left: 50%;
transform: translateX(-50%);
opacity: 0;
transition: all .40s;
margin-bottom: 7px;
}
.layer:hover h3{
bottom: 52%;
opacity: 1;
}
.layer h5{
position: absolute;
width: 100%;
font-size:17px;
font-weight: 500;
color: white;
bottom: 0;
left: 50%;
transform: translateX(-50%);
opacity: 0;
transition: all .40s;
}
.layer:hover h5{
bottom: 48%;
opacity: 1;
}
.col {
position: relative;
}
.col img {
max-width: 100%;
width: 550px;
height: auto;
object-fit: cover;
border-radius: 12px;
}
#habilities {
min-height: 500px;
width: 90%;
margin-left: auto;
margin-right: auto;
display: flex;
justify-content: center;
text-align: center;
}
li {
list-style: none;
}
h1 {
font-size: 90px;
color: rgba(27,26,33,255);
margin: 10px 0px 25px;
}
h2 {
font-size: 30px;
margin-bottom: 60px;
}
#about-me h2,
#projects h2
{
color: #ece7e1;
}
#experience h2,
#habilities h2 {
color: #191919;
}
#habilities-container {
display: flex;
flex-direction: column;
align-items: ;
}
#hability-icon {
width: 144px;
height: 144px;
transition: all 0.8s;
}
#hability-icon:hover {
height: 155px;
width: 155px;
}
h6 {
font-size: 20px;
color: white;
}
h4 {
font-size: 40px;
color: #ece7e1;
font-style: italic;
}
h5 {
color: rgba(27,26,33,255);
}
p {
color: gray;
text-align: justify;
}
#footer {
background-color: #191919;
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 100px;
}
.reveal {
position: relative;
opacity: 0;
}
.reveal.active {
opacity: 1;
}
.active.fade-left {
animation: fade-left 0.5s ease-in;
}
.active.fade-right {
animation: fade-right 0.5s ease-in;
}
#keyframes fade-left {
0% {
transform: translateX(-100px);
opacity: 0;
}
100% {
transform: translateX(0);
opacity: 1;
}
}
#keyframes fade-right {
0% {
transform: translateX(100px);
opacity: 0;
}
100% {
transform: translateX(0);
opacity: 1;
}
}
#media(max-width:1800px) {
#container {
width: 100%;
}
}
#media only screen and (max-width: 1015px) {
#nav-menu {
position: fixed;
top: 70px;
right: -100%;
display: block;
background-color: rgba(27,26,33,255);
margin: 0;
height: 100%;
-webkit-box-shadow: 1px 6px 0px 6px rgba(0,0,0,0.13);
-moz-box-shadow: 1px 6px 0px 6px rgba(0,0,0,0.13);
box-shadow: 1px 6px 0px 6px rgba(0,0,0,0.13);
width: 250px;
transition: all 0.3s ease;
}
#nav-menu.show-nav {
right: 0;
}
#nav {
text-align: center;
margin: 20px auto;
}
.menu-icon {
color: white;
display: block;
margin: auto 0;
padding: 0 20px;
font-size: 30px;
cursor: pointer;
}
#brush-img {
display: none;
}
#about-me {
display: flex;
flex-direction: column;
}
}
Javascript:
//Toggle sidebar
const navContainer = document.getElementById('nav-menu')
function handleMenuToggle() {
navContainer.classList.add('show-nav')
}
document.onclick = function(e) {
if (e.target.id !== 'nav-menu' && e.target.id !== 'show-nav') {
navContainer.classList.remove('show-nav')
}
}
//Scroll animation
function reveal() {
var reveals = document.querySelectorAll(".reveal");
for (var i = 0; i < reveals.length; i++) {
var windowHeight = window.innerHeight;
var elementTop = reveals[i].getBoundingClientRect().top;
var elementVisible = 150;
if (elementTop < windowHeight - elementVisible) {
reveals[i].classList.add("active");
} else {
reveals[i].classList.remove("active");
}
}
}
window.addEventListener("scroll", reveal);
I just cannot make it work, i'm probably missing something or making some ugly mistakes in the structure of the code.
By taking a look at : this question you could try to do it this way : create a navbar sublcass called like :
navbar.open , and assign it these css properties :
/* If you use an id use #id_name or .classname if you use a class
*/
#id_of_navbar.open {
right: 0;
}
/* OR
.classname.open {
right: 0;
}
*/
And then add to your javascript :
var yournavbar = document.getElementById("id_of_navbar")
//Close menu when document is clicked anywhere
document.onclick = function () {
yournavbar.classList.remove("open");
};
And if you want your navbar to close if you click a part of it, just add this function :
//stop propagation on the side nav element
yournavbar.onclick = function(e) {
e.stopPropagation()
}
I tried that solution and it worked for me so I really hope it helps! Let me know if you are still trying to make it work without success despite this solution.
I have an accordion list and my task was to implement a smooth tabs open/close function for dynamic content without a set height.
The forEach method works perfectly.
The smooth open/close function (setHeight in JS snippet)also works fine, but only for the first tab.
In other tabs this function does not work and the opening does not happen as we would like it to.
I've already racked my brains.
How can I combine the forEach method and the "setHeight" function so that nothing breaks?
const accItems = document.querySelectorAll('.accordion__item');
accItems.forEach((item) => {
const icon = item.querySelector('.accordion__icon');
const content = item.querySelector('.accordion__content');
item.addEventListener('click', () => {
if (item.classList.contains('open')) {
item.classList.remove('open');
icon.classList.remove('open');
content.classList.remove('open');
} else {
const accOpen = document.querySelectorAll('.open');
accOpen.forEach((open) => {
open.classList.remove('open');
});
item.classList.add('open');
icon.classList.add('open');
content.classList.add('open');
}
if (content.clientHeight) {
content.style.height = 0;
} else {
let accText = item.querySelector('.acc-text');
content.style.height = accText.clientHeight + "px";
}
});
});
body {
margin: 0;
padding: 0;
box-sizing: border-box;
color: #1f1f1f;
background: #f2f2f2; }
html {
font-size: 62.5%; }
h5 {
margin: 0; }
p {
margin: 0; }
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: auto;
max-width: 140rem; }
.section-accordion {
display: flex;
align-items: center;
max-width: 134rem;
margin: auto; }
.accordion-image {
width: 630px;
height: 450px;
background: url("https://eternel.maitreart.com/wp-content/uploads/2021/07/creat-home-1.jpg");
background-repeat: no-repeat;
background-size: cover; }
.accordion {
width: 63rem;
height: auto;
margin-left: 8rem; }
.accordion__item {
border-top: 1px solid #a8a6a4;
overflow: hidden;
transition: height .5s;
padding-bottom: 1rem; }
.accordion__item:last-child {
border-bottom: 1px solid #a8a6a4; }
.accordion__item--header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 2rem 1rem 1rem 1rem;
cursor: pointer; }
.accordion__item.open {
width: 100%; }
.accordion__title {
font-family: 'Lora';
font-size: 2.4rem;
line-height: 1.2;
font-weight: 400;
text-transform: uppercase; }
.accordion__icon {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 2rem;
height: 2rem;
transition: transform .5s ease; }
.accordion__icon span:first-child {
transform: rotate(90deg) translateX(1px);
width: 1.4rem;
height: .1rem;
background: currentColor; }
.accordion__icon span {
display: block;
width: 1.4rem;
height: .1rem;
background: currentColor;
cursor: pointer; }
.accordion__icon.open {
transform: rotate(45deg); }
.accordion__content {
font-family: 'Roboto', sans-serif;
font-size: 1.6rem;
line-height: 1.62;
font-weight: 400;
padding: 0 1rem 0 1rem;
height: 0;
transition: height .5s;
overflow: hidden; }
.accordion__content.open {
margin-bottom: 1.2rem;
height: 100%; }
<div class="container">
<section class="section-accordion">
<div class="accordion-image"></div>
<div class="accordion">
<div class="accordion__item open">
<div class="accordion__item--header">
<h5 class="accordion__title">Visual direction</h5>
<div class="accordion__icon open">
<span></span>
<span></span>
</div>
</div>
<div class="accordion__content open">
<p class="acc-text">Carried nothing on am warrant towards. Polite in of in oh needed itself silent course.
Assistance travelling so especially do prosperous appearance mr no celebrated.
Wanted easily in my called formed suffer. Songs hoped sense.
</p>
</div>
</div>
<div class="accordion__item">
<div class="accordion__item--header">
<h5 class="accordion__title">Event production</h5>
<div class="accordion__icon">
<span class="accordion__icon--first"></span>
<span class="accordion__icon--second"></span>
</div>
</div>
<div class="accordion__content">
<p class="acc-text">Carried nothing on am warrant towards. Polite in of in oh needed itself silent course.
Assistance travelling so especially do prosperous appearance mr no celebrated.
Wanted easily in my called formed suffer. Songs hoped sense.
</p>
</div>
</div>
<div class="accordion__item">
<div class="accordion__item--header">
<h5 class="accordion__title">Brand creation</h5>
<div class="accordion__icon">
<span class="accordion__icon--first"></span>
<span class="accordion__icon--second"></span>
</div>
</div>
<div class="accordion__content">
<p class="acc-text">Carried nothing on am warrant towards. Polite in of in oh needed itself silent course.
Assistance travelling so especially do prosperous appearance mr no celebrated.
Wanted easily in my called formed suffer. Songs hoped sense.
</p>
</div>
</div>
<div class="accordion__item">
<div class="accordion__item--header">
<h5 class="accordion__title">Design concept</h5>
<div class="accordion__icon">
<span class="accordion__icon--first"></span>
<span class="accordion__icon--second"></span>
</div>
</div>
<div class="accordion__content">
<p class="acc-text">Carried nothing on am warrant towards. Polite in of in oh needed itself silent course.
Assistance travelling so especially do prosperous appearance mr no celebrated.
Wanted easily in my called formed suffer. Songs hoped sense.
</p>
</div>
</div>
</div>
</div>
It does not seem that you need setHeight which is the one that messes the display
Here is a delegated version
const accordionItems = document.querySelectorAll(".accordion__item");
document.querySelector('.accordion').addEventListener('click', (e) => {
const item = e.target.closest(".accordion__item");
if (!item) return
accordionItems.forEach(acItem => {
if (acItem !== item) {
acItem.classList.remove('open');
acItem.querySelector('.accordion__icon').classList.remove('open');
acItem.querySelector('.accordion__content').classList.remove('open');
}
});
const icon = item.querySelector('.accordion__icon');
const content = item.querySelector('.accordion__content');
item.classList.toggle("open")
const isOpen = item.classList.contains("open");
icon.classList.toggle("open", isOpen);
content.classList.toggle('open', isOpen);
});
body {
margin: 0;
padding: 0;
box-sizing: border-box;
color: #1f1f1f;
background: #f2f2f2;
}
html {
font-size: 62.5%;
}
h5 {
margin: 0;
}
p {
margin: 0;
}
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: auto;
max-width: 140rem;
}
.section-accordion {
display: flex;
align-items: center;
max-width: 134rem;
margin: auto;
}
.accordion-image {
width: 630px;
height: 450px;
background: url("https://eternel.maitreart.com/wp-content/uploads/2021/07/creat-home-1.jpg");
background-repeat: no-repeat;
background-size: cover;
}
.accordion {
width: 63rem;
height: auto;
margin-left: 8rem;
}
.accordion__item {
border-top: 1px solid #a8a6a4;
overflow: hidden;
transition: height .5s;
padding-bottom: 1rem;
}
.accordion__item:last-child {
border-bottom: 1px solid #a8a6a4;
}
.accordion__item--header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 2rem 1rem 1rem 1rem;
cursor: pointer;
}
.accordion__item.open {
width: 100%;
}
.accordion__title {
font-family: 'Lora';
font-size: 2.4rem;
line-height: 1.2;
font-weight: 400;
text-transform: uppercase;
}
.accordion__icon {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 2rem;
height: 2rem;
transition: transform .5s ease;
}
.accordion__icon span:first-child {
transform: rotate(90deg) translateX(1px);
width: 1.4rem;
height: .1rem;
background: currentColor;
}
.accordion__icon span {
display: block;
width: 1.4rem;
height: .1rem;
background: currentColor;
cursor: pointer;
}
.accordion__icon.open {
transform: rotate(45deg);
}
.accordion__content {
font-family: 'Roboto', sans-serif;
font-size: 1.6rem;
line-height: 1.62;
font-weight: 400;
padding: 0 1rem 0 1rem;
height: 0;
transition: height .5s;
overflow: hidden;
}
.accordion__content.open {
margin-bottom: 1.2rem;
height: 100%;
}
<div class="container">
<section class="section-accordion">
<div class="accordion-image"></div>
<div class="accordion">
<div class="accordion__item open">
<div class="accordion__item--header">
<h5 class="accordion__title">Visual direction</h5>
<div class="accordion__icon open">
<span></span>
<span></span>
</div>
</div>
<div class="accordion__content open" id="content__wrapper">
<p class="acc-text">Carried nothing on am warrant towards. Polite in of in oh needed itself silent course. Assistance travelling so especially do prosperous appearance mr no celebrated. Wanted easily in my called formed suffer. Songs hoped sense.
</p>
</div>
</div>
<div class="accordion__item">
<div class="accordion__item--header">
<h5 class="accordion__title">Event production</h5>
<div class="accordion__icon">
<span class="accordion__icon--first"></span>
<span class="accordion__icon--second"></span>
</div>
</div>
<div class="accordion__content" id="content__wrapper">
<p class="acc-text">Carried nothing on am warrant towards. Polite in of in oh needed itself silent course. Assistance travelling so especially do prosperous appearance mr no celebrated. Wanted easily in my called formed suffer. Songs hoped sense.
</p>
</div>
</div>
<div class="accordion__item">
<div class="accordion__item--header">
<h5 class="accordion__title">Brand creation</h5>
<div class="accordion__icon">
<span class="accordion__icon--first"></span>
<span class="accordion__icon--second"></span>
</div>
</div>
<div class="accordion__content" id="content__wrapper">
<p class="acc-text">Carried nothing on am warrant towards. Polite in of in oh needed itself silent course. Assistance travelling so especially do prosperous appearance mr no celebrated. Wanted easily in my called formed suffer. Songs hoped sense.
</p>
</div>
</div>
<div class="accordion__item">
<div class="accordion__item--header">
<h5 class="accordion__title">Design concept</h5>
<div class="accordion__icon">
<span class="accordion__icon--first"></span>
<span class="accordion__icon--second"></span>
</div>
</div>
<div class="accordion__content" id="content__wrapper">
<p class="acc-text">Carried nothing on am warrant towards. Polite in of in oh needed itself silent course. Assistance travelling so especially do prosperous appearance mr no celebrated. Wanted easily in my called formed suffer. Songs hoped sense.
</p>
</div>
</div>
</div>
</div>
</section>
</div>
cleaned up js to make it more readable:
const accItems = document.querySelectorAll('.accordion__item');
function handleItemClick(e, i) {
if (e) e.preventDefault();
const actives = document.getElementsByClassName("open");
while (actives.length)
actives[0].classList.remove('open');
accItems[i].classList.add("open");
}
accItems.forEach((item, i) =>
item.addEventListener("click", (e) => handleItemClick(e, i))
);
Handling height with just css:
I made icon and content children of .open
.accordion {
width: 63rem;
height: auto;
margin-left: 8rem; }
.accordion__item {
border-top: 1px solid #a8a6a4;
overflow: hidden;
transition: height .5s;
padding-bottom: 1rem; }
.accordion__item:last-child {
border-bottom: 1px solid #a8a6a4; }
.accordion__item--header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 2rem 1rem 1rem 1rem;
cursor: pointer; }
.open .accordion__item {
width: 100%; }
.accordion__title {
font-family: 'Lora';
font-size: 2.4rem;
line-height: 1.2;
font-weight: 400;
text-transform: uppercase; }
.accordion__icon {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 2rem;
height: 0;
transition: transform .5s ease; }
.accordion__icon span:first-child {
transform: rotate(90deg) translateX(1px);
width: 1.4rem;
height: .1rem;
background: currentColor; }
.accordion__icon span {
display: block;
width: 1.4rem;
height: .1rem;
background: currentColor;
cursor: pointer; }
open .accordion__icon {
transform: rotate(45deg);
height: 2rem; }
.accordion__content {
font-family: 'Roboto', sans-serif;
font-size: 1.6rem;
line-height: 1.62;
font-weight: 400;
padding: 0 1rem 0 1rem;
height: 0;
transition: height .5s;
overflow: hidden; }
.open .accordion__content {
margin-bottom: 1.2rem;
height: 100%; }
I'm new at coding (especially html/css/js) and for some reason, my bottom right image, keeps getting strected and it's not at the bottom right. The original image's resolution is 2280 x 2280.
This is for school. Is there any way to fix this simply? I'm really not sure where the error is.`
body {
background-image: url("https://lh3.googleusercontent.com/3ZUxEMdTqMRqUSdgVZ2o-g64VwIIpg9vrudRJ_sgHc0sH8kSyw2wniPdctzoJvYkIWxCdMWG7z02RtSndmuDdtuBRbnC-KiCjJIIWitWyTvbOlSIycuZTwTFYhqGr2qj3YF8K84rlA=w2400?source=screenshot.guru");
height: 100%;
background-position: center;
background-repeat: repeat;
background-size: cover;
font-family: 'Carter One', cursive;
color: white;
}
h1 {
color: white;
text-align: center;
}
h2 {
color: white;
text-align: center;
}
img {
border: 5px solid #FFFFFF;
}
body, html {
height: 100%;
margin: 0;
font-family: 'Carter One', cursive;
}
.topnav {
overflow: hidden;
background-color: #333;
}
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #F3721D;
color: white;
}
.top_left{
float: left;
position: absolute;
left: 16px;
}
.right {
float: right;
position: absolute;
top: 200px;
right: 16px;
}
.bottom_left {
float: left;
bottom: 0px;
left: 16px;
z-index: 10;
padding: 0px;
margin: 500px 500px 100px 16px;
}
.bottomright {
float: right;
bottom: 0px;
right: 16px;
z-index: 10;
padding: 0px;
margin: 500px 16px 100px 500px;
}
<!DOCTYPE html>
<html>
<head>
<title>Charlotte's super cool art gallery</title>
<link rel="stylesheet" href="C:\Users\blazette\Downloads\bs\CSS\mystyle.css">
<link href="https://fonts.googleapis.com/css2?family=Carter+One&display=swap" rel="stylesheet">
</head>
<body>
<div class="topnav">
<a class="active" href="#home">Home</a>
Commissions
About
</div>
<div class="cubed">
<h1>I design stuff.</h1>
</div>
<div class="cubed">
<h2> My works.</h2>
</div>
<div class="top_left">
<img src="https://lh3.googleusercontent.com/nXUNj-kqfceSzKATH6slZLbb10j9p-WUilkT8v5EFBoA8wsfPJHxaBflhe51roafWlM8FV8z8rlOI4ET_O5j0pyHCoMN9W0_y8XGBcwsS7PSmBMtg-_K6x6VpoxQ0zts8C77DtR7nw=w2400?source=screenshot.guru" img width="310" height="372" id="top_left">
<p>
A digital illustration of Sherlock Holmes <br>from the TV series Sherlock.
</p>
</div>
<div class="bottom_left">
<img src="https://lh3.googleusercontent.com/AiNJsDbDBkv0rXUj0wEe-vdggMKBTNFEyfB-Ukw9DrsLAKj7I_-jWjxOPYMG50ItNXolThQesF3LnVyjsuPSRkhln0nmoL1cdEewTr7H03w2JauCUqseab2Wol-9mP8Adv0dT18iiw=w2400?source=screenshot.guru" img width="310" height="372">
<p>
A digital illustration of Clockson. An <br>original character based on antique clocks
</p>
</div>
<div class="right">
<img src="https://lh3.googleusercontent.com/9NRWdbN3EqE5u6Z4cZDZmBVu2Ar3o8lcBR09C8gtTXDmz0rDdZRuaL23UDM7B-bgBVSfg_4w4lvZiV4I6qwDlHoBsYCbgjybw5ZOGPtu_vj-8whkKHtaKN9PwbNEDix-RHD2zMHLrQ=w2400?source=screenshot.guru" img width="310" height="372" id="right">
<p>
Doctor Who fanart of the 13th Doctor.
</p>
</div>
<div class="bottomright">
<img src="https://lh3.googleusercontent.com/BhntO9ci2WyceI-7qWdlNzsUcS0Bo8_29s2HDO09gM2nSV6Syehodp5q14wQ9vgUUpE8KL9elU9z52xLHDYhigypqpAnFO0inqgoW1fOlTRwlCeXwH6uppVSLBjHBKMfXfQ14xlIJw=w600-h315-p-k" width="310" height="310">
</div>
</body>
</html>
`
You're hard coding the image width and height, it may be the case that some of those images aren't actually that dimension. Try and see if changing the width and height fixes it. Change the width and height in the html tag for the
guys! I have some problems with my script. It's with my navigation button which if you press the tab should be coming up. I don't get any error codes. Could I get some help? It does give me value back in the console "true" or "false". I think the problem is not with the javascript more like with CSS or HTML. Thank you in advance!
const primaryNav = document.querySelector(".nav-items");
const navToggle = document.querySelector(".mobile-nav-toggle");
navToggle.addEventListener("click", () => {
const visibility = primaryNav.getAttribute("data-visible");
if(visibility === "false"){
primaryNav.setAttribute("data-visible", true);
navToggle.setAttribute("aria-expanded", true);
} else if (visibility === "true"){
primaryNav.setAttribute("data-visible", false);
navToggle.setAttribute("aria-expanded" , false);
}
});
html,body{
margin: 0%;
box-sizing: border-box;
background-image: url(../assets/Coding2.jpg);
background-size: cover;
background-attachment: fixed;
overflow-x: hidden;
}
/*-------Global Classes ------*/
a{
text-decoration: none;
}
.flex-row{
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
ul{
list-style-type: none;
}
/* -------navbar-------*/
.nav{
padding: 0 2rem;
height: 0rem;
min-height: 15vh;
overflow: hidden;
}
.nav .nav-brand a{
font-size:2rem;
padding:1rem 1.5rem;
position:relative;
top: 15%;
font-family: Arial, "Time New Roman";
color: white;
}
.nav .nav-items{
list-style-type: none;
display: flex;
margin: 0;
align-items: center;
justify-content: space-between;
}
.nav .nav-menu{
justify-content: space-between;
}
.nav .nav-items .nav-link{
padding: 1rem 1.5rem;
position: relative;
font-size: 1.1rem;
font-family: Arial, "Time New Roman";
color: white;
}
.nav .social{
padding:1.4rem 0;
}
.nav .nav-items a{
text-decoration: none;
color: white;
font-family: Arial, "Time New Roman";
}
.mobile-nav-toggle{
display: none;
}
.nav .nav-items a > [aria-hidden="true"]{
font-weight: 700;
margin-inline-end: 0.75rem;
}
#media (max-width: 35em){
.nav .nav-brand a{
right: 30%;
font-size: 1.5rem;
}
.nav .nav-items{
--gap: 2em;
position: fixed;
z-index: 1000;
inset: 0 0 0 30%;
flex-direction: column;
padding: min(20vh, 10rem) 2em;
background: hsl(0 0% 100% / 0.1);
backdrop-filter: blur(1rem);
transform: translateX(100%);
}
.nav .nav-times[data-visible="true"]{
transform: translateX(0%);
}
.mobile-nav-toggle{
display: block;
position: absolute;
background: url(../assets/icon-hamburger.svg);
background-repeat: no-repeat;
border: 0;
z-index: 9999;
width: 2rem;
aspect-ratio: 1;
top: 2rem;
right: 2rem;
font-size: 0;
}
}
/* ---X---navbar---X---*/
<!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>Computer Science Website</title>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<script src="./js/main.js" defer></script>
<button class="mobile-nav-toggle" aria-controls ="nav-items" aria-expanded ="false"><span class="sr-only">Menu</span></button>
<nav class="nav">
<div class="nav-menu flex-row">
<div class="nav-brand">
CBlogging
</div>
<div>
<ul id = "nav-items" data-visible = "false" class="nav-items flex">
<li class ="nav-link">
<span aria-hidden="true">00</span>Home
</li>
<li class ="nav-link">
<span aria-hidden="true">01</span>Contact
</li>
<li class ="nav-link">
<span aria-hidden="true">02</span>Article
</li>
<li class ="nav-link">
<span aria-hidden="true">03</span>Home
</li>
</ul>
</div>
<!---
<div class="social text-gray">
F
I
T
Y
</div>
-->
</div>
</nav>
</body>
</html>
First step is change background-color like:
body {
background-color: #252525;
}
Now in button change font-size to example 17px:
.mobile-nav-toggle {
font-size: 17px;
}
Second and last step is change name of css atribute .nav-times to .nav-items:
.nav .nav-items[data-visible='true'] {
transform: translateX(100%);
}
That's it. Your welcome :)
I'm unable to format https://evolveyourgaming.com/extensions/ecademy.php correctly. I cannot get the images to float:left with their names underneath, and the bios to float:right. Currently my VS Code is giving me yellow squiggly lines for all my Float properties. Can anyone offer any insight as CSS is not my strong suit.
function condenseLinks() {
var x = document.getElementById("links");
if (x.className === "vidlinks") {
x.className += " responsive";
} else {
x.className = "vidlinks";
}
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.content {
height: 100%;
text-align: center;
display: inline-block;
}
.vidbody {
background-color: black;
height: 100%;
display: inline-block;
}
.logo {
float: left;
max-width: 90%;
padding-top: 6px;
}
.vidhead {
background-color: black;
position: relative;
height: 10%;
width: 100%;
}
body {
background-color: black;
background-size: cover;
display: inline-block;
width: 100%;
height: 100%;
}
.container {
width: 90%;
max-width: 120rem;
height: 100%;
margin: 0 auto;
position: relative;
}
.teamBios .container {
display: flex;
}
.container img {
float: left;
}
.teamBios .about-details {
flex: 1;
}
.vidlinks {
float: right;
width: 45%;
text-decoration: none;
color: white;
font-family: cairo, sans-serif;
font-style: normal;
font-weight: 200;
padding-top: 16px;
}
/* Hide the link that should open and close the topnav on small screens */
.vidlinks .icon {
display: none;
}
/* Dropdown container - needed to position the dropdown content */
.dropdown {
float: left;
overflow: hidden;
}
/* Style the dropdown button to fit inside the topnav */
.dropdown .dropbtn {
font-size: 17px;
border: none;
outline: none;
color: black;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
/* Style the dropdown content (hidden by default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
/* Style the links inside the dropdown */
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.left {
width: 40%;
text-align: center;
display: inline-block;
vertical-align: top;
}
.right {
width: 40%;
text-align: center;
display: inline-block;
vertical-align: top;
}
.mid {
text-align: center;
display: inline-block;
width: 10%;
}
.vidlinks a {
color: white;
}
/* Add a dark background on topnav links and the dropdown button on hover */
.vidlinks a:hover,
.dropdown:hover .dropbtn {
color: #7e3bfe;
}
/* Add a grey background to dropdown links on hover */
.dropdown-content a:hover {
color: #8449ff;
}
/* Show the dropdown menu when the user moves the mouse over the dropdown button */
.dropdown:hover .dropdown-content {
display: block;
}
#media screen and (max-width: 600px) {
.mid {
display: none;
}
.left {
width: 80%;
}
.right {
width: 80%;
}
.vidbody {
background-color: black;
height: auto;
width: auto;
display: inline-block;
}
.vidlinks {
text-align: center;
width: 90%;
text-decoration: none;
color: white;
font-family: cairo, sans-serif;
font-style: normal;
font-weight: 200;
padding-top: 16px;
}
.logo {
text-align: center;
max-width: 100%;
padding-top: 2px;
}
}
.vidlinks.responsive {
position: relative;
}
.vidlinks.responsive a.icon {
position: absolute;
right: 0;
top: 0;
}
.vidlinks.responsive a {
float: none;
display: block;
text-align: left;
}
.vidlinks .responsive .dropdown {
float: none;
}
.vidlinks .responsive .dropdown-content {
position: relative;
}
.vidlinks .responsive .dropdown .dropbtn {
display: block;
width: 100%;
text-align: left;
}
/* Style the form */
#regForm {
background-color: #ffffff;
margin: 100px auto;
padding: 40px;
width: 70%;
min-width: 300px;
}
/* Style the input fields */
.input {
padding: 10px;
width: 100%;
font-size: 17px;
font-family: Raleway;
border: 1px solid #aaaaaa;
}
/* Mark input boxes that gets an error on validation: */
.input.invalid {
background-color: #ffdddd;
}
/* Hide all steps by default: */
.tab {
display: none;
}
/* Make circles that indicate the steps of the form: */
.step {
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbbbbb;
border: none;
border-radius: 50%;
display: inline-block;
opacity: 0.5;
}
/* Mark the active step: */
.step.active {
opacity: 1;
}
/* Mark the steps that are finished and valid: */
.step.finish {
background-color: #4CAF50;
}
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<link href="https://fonts.googleapis.com/css?family=Cairo&display=swap" rel="stylesheet">
</head>
<body>
<div class='content'>
<div class='vidhead'>
<div class='logo'>
<p>
<img src='Evolvelogo.png' style='width:24%; height: 30%;'>
</p>
</div>
<div class='vidlinks' id='links'>
<a href='../index.html#about' style='text-decoration:none; font-weight:200px; ' class='inactive'>ABOUT</a>
<a href='../index.html#team' style='text-decoration:none; ' class='inactive'>TEAM</a>
<a href='../index.html#contact-form-section' style='text-decoration:none; ' class='inactive'>CONTACT</a>
<a href='tournament.php' style='text-decoration:none; ' class='active'>TOURNAMENT</a>
<a href='privacy.php' style='text-decoration:none; ' class='active'>PRIVACY POLICY</a>
<a href='ecademy.php' style='text-decoration:none; ' class='active'>ECADEMY</a>
<a href="javascript:void(0);" class="icon" onclick="condenseLinks()">
<i class="fa fa-bars"></i>
</a>
</div>
<div class='vidbody' style="text-align:center; width:100%;">
<h2 style="color:white; background:black; color:#8449ff; font-family:cairo, sans-serif; font-style:normal; font-weight:200px;">
<img src="eCademy_LogoPNG.png" alt="ecademy" style="width:400px; height:100px;">
</h2>
</div>
<div class="teamBios" style="color:black; background:white; width:100%; height:450px; color: #8449ff;
font-family: cairo, sans-serif; font-style: normal; font-weight:200px;">
<div class="container" style=" display:inline-block; width:40%; height:100%;">
<br><br><br>
<div class="bioPhotos" style="width:10%; height: 50%; display:inline-block; float:left;">
<img src="evolvephoto1.png" style="width:256px; height:266px;">
</div>
<div class="about-details" style="width:50%; height: 50%; display:inline-block; float:right; text-align:left;">
<br><br><br> NAME: Kevin Kapoor <br> IGN/Handle: Irøh (or sometimes ZukosUncle) <br> Twitch: #irohsTeaShop <br>
</div>
<p>
With fire in his heart and analysis on the brain, Kevin has been a competitor since birth. From being a state champion debater to a national champion beatboxer, regardless of the venue or skill, he identifies the most effective routes to victory and pushes
for the W. He is a proven League of Legends coach who can help an individual gain elo or a team win tournaments. No matter how big or small the aspiration, he will assist in achieving your goals by making you the best you that you can be.
</p>
</div>
</div>
</div>
<div class="teamBios" style="color:black; background:black; width:100%; height:450px; color: #8449ff;
font-family: cairo, sans-serif; font-style: normal; font-weight:200px;">
<div class="container" style=" display:inline-block; width:40%; height:100%;">
<br><br><br>
<div class="bioPhotos" style="width:10%; height: 50%; display:inline-block; float:left;">
<img src="Desmond Wong2.jpg" style="width:256px; height:266px;">
</div>
<div class="about-details" style="width:50%; height: 50%; display:inline-block; float:right; text-align:left;">
<br><br><br> NAME: Desmond Wong <br> IGN/Handle: Overlorred <br> Twitch: #overlorredtft <br>
</div>
<p>
A versatile coach in every sense of the word, he brings four years of experience competing at the top level of the collegiate esports scene as both a player and as a coach. Combined with his six years as a high elo solo queue player, his coaching style
brings together all the knowledge he has learned over the years from playing with and against the best. It is the perfect blend of his experiences from his time in the competitive scene and grinding the solo queue ladder. Whether you're completely
new to the game or an aspiring pro, Desmond is ready to guide you every step of the way to help you reach your goals.
</p>
</div>
</div>
<div class="teamBios" style="color:black; background:white; width:100%; height:450px; color: #8449ff;
font-family: cairo, sans-serif; font-style: normal; font-weight:200px;">
<div class="container" style=" display:inline-block; width:40%; height:100%;">
<br><br><br>
<div class="bioPhotos" style="width:10%; height: 50%; display:inline-block; float:left;">
<img src="Alex Gingrich2.jpg" style="width:256px; height:266px;">
</div>
<div class="about-details" style="width:50%; height: 50%; display:inline-block; float:right; text-align:left;">
<br><br><br> Name: Alex Gingrich<br> IGN/Handle: Chunder<br> Twitter: #alexgingrich<br>
</div>
<p>
Alex has built his entire professional life around applying traditional sports and business strategy into esports. Although Alex has been playing competitive games since the days of Halo 3 he got his first taste in esports player improvement at grad school
when he managed the inaugural Varsity Overwatch teams at The University of Akron. Since then Alex has gone on to work for ReKTGlobal, owners of Team Rogue and The London Royal Ravens, where he gains first hand knowledge of professional esports
and the mentalities of what makes a great player.
</p>
</div>
</div>
</div>
</div>
</body>
</html>
I think you put the image and name under e parent div and make the display flex. Also remove the unwanted tag. Hope it works
<div class="container">
<div class="bioPhotos">
<img src="evolvephoto1.png">
<div class="about-details">
NAME: Kevin Kapoor <br>
IGN/Handle: Irøh (or sometimes ZukosUncle) <br>
Twitch: #irohsTeaShop <br>
</div>
</div>
<p>
With fire in his heart and analysis on the brain, Kevin has been a competitor since birth. From being a state champion debater to a national champion beatboxer, regardless of the venue or skill, he identifies the most effective routes to victory and pushes for the W. He is a proven League of Legends coach who can help an individual gain elo or a team win tournaments. No matter how big or small the aspiration, he will assist in achieving your goals by making you the best you that you can be.
</p>
</div>
.container{
display: flex;
width: 50%;
}
.bioPhotos{
display: flex;
flex-direction: column;
}
.about-details{
display: flex;
}
p{
display: flex;
align-items: center;
justify-content: center;
}
Change this part:
<div class="container" style="display: flex;width: 60%;justify-content: center;padding: 20px;">
<div class="cullomnOne">
<div class="bioPhotos" style="width:256px; height:266px;min-width: 256px;min-height: 256px;">
<img src="evolvephoto1.png" style="width:100%; height:100%;">
</div>
<div class="about-details">
NAME: Kevin Kapoor <br>
IGN/Handle: Irøh (or sometimes ZukosUncle) <br>
Twitch: #irohsTeaShop <br>
</div>
</div>
<p style="padding: 20px;">
With fire in his heart and analysis on the brain, Kevin has been a competitor since birth. From being a state champion debater to a national champion beatboxer, regardless of the venue or skill, he identifies the most effective routes to victory and pushes for the W. He is a proven League of Legends coach who can help an individual gain elo or a team win tournaments. No matter how big or small the aspiration, he will assist in achieving your goals by making you the best you that you can be.
</p>
</div>