align right without overflowing the screen CSS

align right without overflowing the screen CSS - javascript

Ok, I'm trying to make a menu. There is the side menu that is going to have certain elements and the top menu that is going to have other elements. I have a problem when I apply the positio:absolute and then a right:0px to align the icons and the name to the right it goes off screen because my body has a margin-left: 280px
let menuToggleButton = document.getElementById('menu_toggle_button');
let side_menu = document.getElementById('side_menu');
let body = document.getElementById('body');
menuToggleButton.addEventListener('click', function() {
side_menu.classList.toggle('resize-side-menu');
body.classList.toggle('resize-body');
});
*{
margin: 0px;
padding: 0px;
}
body{
display: flex;
}
.side-menu{
position: fixed;
display: inline-flex;
background: #ff000061;
width: 280px;
height: 100vh;
transition: .5s;
}
.resize-side-menu{
width: 50px;
transition: .5s;
}
.body{
display: inline-flex;
width: 100%;
height: 60px;
margin-left: 280px;
background: blue;
height: 2000px;
transition: .5s;
}
.resize-body{
margin-left: 50px;
transition: .5s;
}
.body .content-body{
display: block;
width: 100%;
height: 100%;
}
.body .content-body .header{
width: 100%;
height: 50px;
display: block;
position: fixed;
}
.content-items-header{
display: flex;
align-items: center;
background: brown;
position: relative;
height: 50px;
}
.body .content-body .header .content-items-header .content-search-input{
background: white;
color: rgb(0, 0, 0);
border: 2px solid blue;
}
.body .content-body .header .content-items-header .icons-content{
position:absolute;
right:0px;
}
<!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="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.0/css/all.min.css">
</head>
<body>
<div class="side-menu" id="side_menu">
</div>
<div class="body" id="body">
<div class="content-body">
<div class="header">
<div class="content-items-header">
<button class="fad fa-bars" id="menu_toggle_button">open</button>
<div class="content-search-input">
<input type="text" class="search" id="search">
<i class="fad fa-search"></i>
</div>
<div class="icons-content">
<i class="fas fa-bell"></i>
<i class="fas fa-envelope"></i>
<i class="fas fa-cog"></i>
<img src="brain.jpg" alt="" height="35px" width="35px">
<span>Aldahir Ruiz Valdez</span>
</div>
</div>
</div>
<div class="workspace">
</div>
</div>
</div>
<script src="main.js"></script>
</body>
</html>
I need them to always be aligned to the right but without leaving the screen

try overflow: hidden; or overflow: auto depending on what you want to achieve. overflow: hidden; will hide all the overflow, and overflow: auto will add a scroll bar if it is needed.

I changed the width of .body and .header to calc(100% - 280px), when pressing the button the width is changed to calc(100% - 50px). I also added a transition: .5s; for changing the width on the .header so it looks smooth (you'll see what I mean when you remove the transition). Hope this is the result you're looking for!
let menuToggleButton = document.getElementById('menu_toggle_button');
let side_menu = document.getElementById('side_menu');
let body = document.getElementById('body');
let header = document.querySelector('.header');
menuToggleButton.addEventListener('click', function() {
side_menu.classList.toggle('resize-side-menu');
body.classList.toggle('resize-body');
header.classList.toggle('resize-header');
});
* {
padding: 0;
margin: 0;
}
body{
display: flex;
}
.side-menu{
position: fixed;
display: inline-flex;
background: #ff000061;
width: 280px;
height: 100vh;
transition: .5s;
}
.resize-side-menu{
width: 50px;
transition: .5s;
}
.body {
width: calc(100% - 280px);
display: inline-flex;
height: 60px;
margin-left: 280px;
background: blue;
height: 2000px;
transition: .5s;
}
.resize-body{
margin-left: 50px;
transition: .5s;
width: calc(100% - 50px);
}
.body .content-body{
display: block;
width: 100%;
height: 100%;
}
.body .content-body .header{
width: calc(100% - 280px);
transition: .5s;
height: 50px;
display: block;
position: fixed;
}
.body .content-body .header.resize-header {
width: calc(100% - 50px);
transition: .5s;
}
.content-items-header{
display: flex;
align-items: center;
background: brown;
position: relative;
height: 50px;
}
.body .content-body .header .content-items-header .content-search-input{
background: white;
color: rgb(0, 0, 0);
border: 2px solid blue;
}
.body .content-body .header .content-items-header .icons-content{
position:absolute;
right:0px;
}
<div class="side-menu" id="side_menu">
</div>
<div class="body" id="body">
<div class="content-body">
<div class="header">
<div class="content-items-header">
<button class="fad fa-bars" id="menu_toggle_button">open</button>
<div class="content-search-input">
<input type="text" class="search" id="search">
<i class="fad fa-search"></i>
</div>
<div class="icons-content">
<i class="fas fa-bell"></i>
<i class="fas fa-envelope"></i>
<i class="fas fa-cog"></i>
<img src="brain.jpg" alt="" height="35px" width="35px">
<span>Aldahir Ruiz Valdez</span>
</div>
</div>
</div>
<div class="workspace">
</div>
</div>
</div>

Related

Navigation menu sidebar not closing with click on document

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()">&#9776</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.

FadeInLeft effect when changing content

window.addEventListener('scroll', () => {
let scrollDistance = window.scrollY;
if (window.innerWidth > 768) {
document.querySelectorAll('.section1').forEach((el, i) => {
if (el.offsetTop - document.querySelector('.nav').clientHeight <= scrollDistance) {
document.querySelectorAll('.nav a').forEach((el) => {
if (el.classList.contains('active')) {
el.classList.remove('active');
}
});
document.querySelectorAll('.nav li')[i].querySelector('a').classList.add('active');
}
});
}
});
body {
background: gray;
padding: 100px;
}
.block-2 {
display: flex;
flex-direction: row;
background: white;
width: 100%;
padding: 50px;
height: auto;
}
.section-left {
position: sticky;
top: 10px;
height: 300px;
/* background: gray; */
width: 100%;
}
.section-right {
background: blue;
width: 100%;
}
.wrap {
margin: 10px;
background: red;
}
.content {
height: 500px;
}
.footer {
width: 100%;
height: 700px;
background: red;
}
.nav {
position: relative;
left: 0;
top: 0;
width: 100%;
background-color: white;
/* padding: 20px;
*/
}
.nav ul {
display: flex;
list-style-type: none;
flex-direction: column;
padding: 0;
}
.nav a {
display: flex !important;
text-decoration: none;
color: black !important;
display: inline-block;
/* margin-right: 25px !important;
*/
}
#media screen and (max-width: 1024px) {}
.subtitle {
opacity: 0;
}
.active {
opacity: 1;
}
.content1 {
position: absolute;
background-color: red;
/*opacity: 0;*/
width: 100%;
height: 300px;
}
.content2 {
position: absolute;
background-color: gray;
/*opacity: 0;*/
width: 100%;
height: 300px;
}
.content3 {
position: absolute;
background-color: green;
/*opacity: 0;*/
width: 100%;
height: 300px;
}
.content4 {
position: absolute;
background-color: blue;
/*opacity: 0;*/
width: 100%;
height: 300px;
}
<body>
<div class="block-2">
<div class="section-left">
<nav class="nav">
<ul>
<li><a href="" class="active subtitle">
<div class="content1">
<h1>O1</h1>
</div>
</a></li>
<li><a href="" class="subtitle">
<div class="content2">
<h1>O2</h1>
</div>
</a></li>
<li><a href="" class="subtitle">
<div class="content3">
<h1>O3</h1>
</div>
</a></li>
<li><a href="" class="subtitle">
<div class="content4">
<h1>O4</h1>
</div>
</a></li>
</ul>
</nav>
</div>
<div class="section-right">
<div class="section1 wrap">
<div class="content">asdf</div>
</div>
<div class="wrap section1 ">
<div class="content">asdf</div>
</div>
<div class="wrap section1">
<div class="content">asdf</div>
</div>
<div class="wrap section1">
<div class="content">asdf</div>
</div>
</div>
</div>
<div class="footer"></div>
</body>
How can I get the FadeInLeft effect when changing content from .opacity=0 to .opacity=1 on the left side.
I tried to solve this problem with the given script, but it did not work for me.
P.S. See this layout in fullscreen.

Here is a very ruff first draft
Since you already have the .active class being added to your .subtitle class to change opacity, you can just tack on CSS Animation to those classes.
In my example I have .subtitle > div set to right: 100%; and .active > div set to right: 0%; with a transition: 300ms;
Which will animate the block from the left side of the screen over to the right side in 300ms. You can play around with this until you get the animation where you'd like.
Here's a great article from MDN with more information about Using CSS Transitions
CSS transitions provide a way to control animation speed when changing CSS properties. Instead of having property changes take effect immediately, you can cause the changes in a property to take place over a period of time. For example, if you change the color of an element from white to black, usually the change is instantaneous. With CSS transitions enabled, changes occur at time intervals that follow an acceleration curve, all of which can be customized.
Examples
div {
transition: <property> <duration> <timing-function> <delay>;
}
#delay {
font-size: 14px;
transition-property: font-size;
transition-duration: 4s;
transition-delay: 2s;
}
#delay:hover {
font-size: 36px;
}
.box {
border-style: solid;
border-width: 1px;
display: block;
width: 100px;
height: 100px;
background-color: #0000FF;
transition: width 2s, height 2s, background-color 2s, transform 2s;
}
.box:hover {
background-color: #FFCCCC;
width: 200px;
height: 200px;
transform: rotate(180deg);
}
window.addEventListener('scroll', () => {
let scrollDistance = window.scrollY;
if (window.innerWidth > 768) {
document.querySelectorAll('.section1').forEach((el, i) => {
if (el.offsetTop - document.querySelector('.nav').clientHeight <= scrollDistance) {
document.querySelectorAll('.nav a').forEach((el) => {
if (el.classList.contains('active')) {
el.classList.remove('active');
}
});
document.querySelectorAll('.nav li')[i].querySelector('a').classList.add('active');
}
});
}
});
body {
background: gray;
padding: 100px;
}
.block-2 {
display: flex;
flex-direction: row;
background: white;
width: 100%;
padding: 50px;
height: auto;
}
.section-left {
position: sticky;
top: 10px;
height: 300px;
/* background: gray; */
width: 100%;
}
.section-right {
background: blue;
width: 100%;
}
.wrap {
margin: 10px;
background: red;
}
.content {
height: 500px;
}
.footer {
width: 100%;
height: 700px;
background: red;
}
.nav {
position: relative;
left: 0;
top: 0;
width: 100%;
background-color: white;
/* padding: 20px;
*/
}
.nav ul {
display: flex;
list-style-type: none;
flex-direction: column;
padding: 0;
}
.nav a {
display: flex !important;
text-decoration: none;
color: black !important;
display: inline-block;
/* margin-right: 25px !important;
*/
}
#media screen and (max-width: 1024px) {}
.subtitle {
opacity: 0;
transition:300ms;
}
.subtitle > div {
transition:300ms;
right:100%;
}
.subtitle > div h1 {
opacity:0;
position:relative;
top:2em;
transition:300ms;
transition-delay:1s;
}
.active {
opacity: 1;
}
.active > div {
right:0;
}
.active > div h1 {
opacity:1;
top: 0;
}
.content1 {
position: absolute;
background-color: red;
/*opacity: 0;*/
width: 100%;
height: 300px;
}
.content2 {
position: absolute;
background-color: gray;
/*opacity: 0;*/
width: 100%;
height: 300px;
}
.content3 {
position: absolute;
background-color: green;
/*opacity: 0;*/
width: 100%;
height: 300px;
}
.content4 {
position: absolute;
background-color: blue;
/*opacity: 0;*/
width: 100%;
height: 300px;
}
<body>
<div class="block-2">
<div class="section-left">
<nav class="nav">
<ul>
<li><a href="" class="active subtitle">
<div class="content1">
<h1>O1</h1>
</div>
</a></li>
<li><a href="" class="subtitle">
<div class="content2">
<h1>O2</h1>
</div>
</a></li>
<li><a href="" class="subtitle">
<div class="content3">
<h1>O3</h1>
</div>
</a></li>
<li><a href="" class="subtitle">
<div class="content4">
<h1>O4</h1>
</div>
</a></li>
</ul>
</nav>
</div>
<div class="section-right">
<div class="section1 wrap">
<div class="content">asdf</div>
</div>
<div class="wrap section1 ">
<div class="content">asdf</div>
</div>
<div class="wrap section1">
<div class="content">asdf</div>
</div>
<div class="wrap section1">
<div class="content">asdf</div>
</div>
</div>
</div>
<div class="footer"></div>
</body>

Wrapping/Aligning Images Around a Circle

I'm not sure if I'm unable to find the right term to search or if there isn't much out there relating to this, but I was wondering if someone could help me figure out how to wrap or align images/elements around a circular shape.
I'm not sure if it's possible to do it purely with HTML and CSS or if JS is needed, but I'm open to all suggestions.
Here's an example in photoshop of what I'm looking for. I only show 4 here, but I will need the ability to add more circles as needed and still remain consistent. It could go onto another column though, if necessary.
for context, this is going to be some type of navigation menu.
Here's what I have code wise:
#import url('https://fonts.googleapis.com/css2?family=Roboto:wght#100;300;400;500;700;900&display=swap');
/*Colours:*/
:root {
--dark: #16161a;
--off-dark: #242629;
--off-white: #fffffe;
--purple: #7f5af0;
--off-blue: #94a1b2;
}
body {
color: var(--off-white);
font-family: 'Roboto', sans-serif;
}
.create-icon-size {
font-size: 1.5rem;
}
.circle-wrap {
position: relative;
top: 50%;
left: 50%;
width: 320px;
height: 320px;
border: 5px solid var(--off-dark);
border-radius: 160px;
transform: translate(-50%, -50%);
}
.icon-background {
background-color: var(--purple);
color: var(--off-dark);
position: relative;
border-radius: 25px;
width: 50px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
}
<html lang="en" class="html">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css" type="text/css">
<script src="https://kit.fontawesome.com/fcb91982ab.js" crossorigin="anonymous"></script>
<title>Document</title>
</head>
<body>
<div class="circle-wrap">
<div id="head" class="icon-background">
<span class="fas fa-meh-blank create-icon-size"></span>
</div>
<div id="body" class="icon-background">
<span class="fas fa-child create-icon-size"></span>
</div>
<div id="legs" class="icon-background">
<span class="fas fa-capsules create-icon-size"></span>
</div>
<div id="feet" class="icon-background">
<span class="fas fa-shoe-prints create-icon-size"></span>
</div>
</div>
</body>
</html>

make .icon-background to absolute, and set it with top bottom right left values.
.main {
position: relative;
width: 400px;
}
.big-img {
height: 400px;
width: 400px;
border-radius: 100%;
}
.sm-img {
position: absolute;
height: 80px;
width: 80px;
border-radius: 100%;
border: 5px solid #fff;
}
.one {
top: 0;
right: 0;
}
.two {
top: 100px;
right: -50px;
}
.three {
bottom: 100px;
right: -50px;
}
.four {
bottom: 0;
right: 0;
}
<div class="main">
<img src="https://images.unsplash.com/photo-1525268499284-86ec700c826d?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2000&q=80" class="big-img" alt="image-1">
<img src="https://images.unsplash.com/photo-1525268499284-86ec700c826d?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2000&q=80" class="sm-img one" alt="image-1">
<img src="https://images.unsplash.com/photo-1525268499284-86ec700c826d?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2000&q=80" class="sm-img two" alt="image-1">
<img src="https://images.unsplash.com/photo-1525268499284-86ec700c826d?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2000&q=80" class="sm-img three" alt="image-1">
<img src="https://images.unsplash.com/photo-1525268499284-86ec700c826d?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2000&q=80" class="sm-img four" alt="image-1">
</div>
/*Colours:*/
:root {
--dark: #16161a;
--off-dark: #242629;
--off-white: #fffffe;
--purple: #7f5af0;
--off-blue: #94a1b2;
}
body {
color: var(--off-white);
font-family: 'Roboto', sans-serif;
}
.main{
display:flex;
justify-content:center;
align-items:center;
height:100vh;
}
.create-icon-size {
font-size: 1.5rem;
}
.circle-wrap {
position: relative;
width: 320px;
height: 320px;
border: 5px solid var(--off-dark);
border-radius: 160px;
}
.icon-background {
background-color: var(--purple);
color: var(--off-dark);
position: absolute;
border-radius: 25px;
width: 50px;
height: 50px;
}
#head{
top:0;
right: 25px;
}
#body{
top: 80px;
right: -25px;
}
#legs{
bottom: 80px;
right: -25px;
}
#feet{
bottom:0;
right: 25px;
<div class="main"><div class="circle-wrap">
<div id="head" class="icon-background">
<span class="fas fa-meh-blank create-icon-size"></span>
</div>
<div id="body" class="icon-background">
<span class="fas fa-child create-icon-size"></span>
</div>
<div id="legs" class="icon-background">
<span class="fas fa-capsules create-icon-size"></span>
</div>
<div id="feet" class="icon-background">
<span class="fas fa-shoe-prints create-icon-size"></span>
</div>
</div></div>

Bootstrap pill content not going away

I am using bootstrap's pill nav bar and for some reason once I add my code which contains tiles that give a netflix feel (on the STEMuli tab), the navbar will no longer remove the content when going to another tab. It actually will add the next tabs information directly below. I thought I was missing some div tags, but I took away some code and rebuilt it to double check, div tags checkout. I am not sure what could cause this? Because right when I remove the content in my "STEMuli" tab in the actual code and just add some plain text it works just fine, even if I add a row to it...I am stuck please help!
.popover-header{
color:#000000;
}
#row{
overflow: hidden;
}
.logo{
z-index:0;
}
.row {
overflow: scroll;
width: 100%;
z-index: 1;
}
.row__inner {
-webkit-transition: 450ms -webkit-transform;
transition: 450ms -webkit-transform;
transition: 450ms transform;
transition: 450ms transform, 450ms -webkit-transform;
font-size: 0;
white-space: nowrap;
margin: 50px 0;
padding-bottom: 30px;
padding-bottom: 30px;
}
.tile {
position: relative;
display: inline-block;
width: 250px;
height: 250px;
margin-right: 10px;
margin-left: 50px;
font-size: 20px;
cursor: pointer;
-webkit-transition: 450ms all;
transition: 450ms all;
-webkit-transform-origin: center left;
transform-origin: center left;
}
.tile__img {
width: 250px;
height: 250px;
-o-object-fit: cover;
object-fit: cover;
}
.tile__details {
position: absolute;
bottom: 0;
left: 0;
right: 0;
top: 0;
font-size: 10px;
opacity: 0;
background: -webkit-gradient(linear, left bottom, left top, from(rgba(0,0,0,0.9)), to(rgba(0,0,0,0)));
background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 100%);
-webkit-transition: 450ms opacity;
transition: 450ms opacity;
}
.tile__details:after,
.tile__details:before {
content: '';
position: absolute;
top: 50%;
left: 50%;
display: #000;
}
.tile__details:before {
left: 0;
width: 100%;
font-size: 30px;
margin-left: 7px;
margin-top: -18px;
text-align: center;
z-index: 2;
}
.tile:hover .tile__details {
opacity: 1;
}
.tile__title {
position: absolute;
bottom: 0;
padding: 10px;
}
.row__inner:hover {
-webkit-transform: translate3d(-62.5px, 0, 0);
transform: translate3d(-62.5px, 0, 0);
}
.row__inner:hover .tile {
opacity: 0.3;
}
.row__inner:hover .tile:hover {
-webkit-transform: scale(1.5);
transform: scale(1.5);
opacity: 1;
}
.tile:hover ~ .tile {
-webkit-transform: translate3d(125px, 0, 0);
transform: translate3d(125px, 0, 0);
}
a:hover{
color: #F1D302;
}
.checkbox-wrapper {
height: 13px;
width: 13px;
}
.btn{
background-color: #F1D302;
}
body {
font-family: 'Rubik', sans-serif;
}
.card-img-top {
height: 300px;
width: 100%;
}
.btn-xlong {
padding: 10px 50px;
font-size: 22px;
line-height: normal;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.steps-form-3 {
width: 2px;
height: 470px;
position: relative; }
.steps-form-3 .steps-row-3 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column; }
.steps-form-3 .steps-row-3:before {
top: 14px;
bottom: 0;
position: absolute;
content: "";
width: 2px;
height: 100%;
background-color: #7283a7; }
.steps-form-3 .steps-row-3 .steps-step-3 {
height: 150px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
text-align: center;
position: relative; }
.steps-form-3 .steps-row-3 .steps-step-3.no-height {
height: 50px; }
.steps-form-3 .steps-row-3 .steps-step-3 p {
margin-top: 0.5rem; }
.steps-form-3 .steps-row-3 .steps-step-3 button[disabled] {
opacity: 1 !important;
filter: alpha(opacity=100) !important; }
.steps-form-3 .steps-row-3 .steps-step-3 .btn-circle-3 {
width: 60px;
height: 60px;
border: 2px solid #59698D;
background-color: white !important;
color: #59698D !important;
border-radius: 50%;
padding: 18px 18px 15px 15px;
margin-top: -22px; }
.steps-form-3 .steps-row-3 .steps-step-3 .btn-circle-3:hover {
border: 2px solid #4285F4;
color: #4285F4 !important;
background-color: white !important; }
.steps-form-3 .steps-row-3 .steps-step-3 .btn-circle-3 .fa {
font-size: 1.7rem; }
::-webkit-scrollbar{
width: 0px;
height:5px;
background-color: #161925;
}
::-webkit-scrollbar-thumb{
background-color: #F1D302;
border-radius:10px;
box-shadow: insert 0 0 6px rgba(0,0,0,.3);
}
.spacing{
padding: 6px;
}
/*This css file defines the color scheme and font of all of the webpages so import into every new webpage*/
body {
font-family: 'Rubik', sans-serif;
background-color: #9E2B25;
color:#FDFFFC;
}
h4{
color:#FDFFFC;
}
.button{
background-color:#0267C1;
}
.nav-pills .nav-link.active
{
background-color: #0267c1;
}
h3{
color: #ffffff;
}
#cardimg
{
height:300px;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>STEMuli</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Rubik:500" rel="stylesheet">
<link href="/css/mastercss.css" rel="stylesheet">
<link rel="stylesheet" href="/css/profile.css" crossorigin="anonymous">
<script src="/js/moment.js"></script>
</head>
<script>
(function() {
('[data-toggle="popover"]').popover()
})
</script>
<body>
<!--This is where the logo is-->
<div id="row" class="row h-100 justify-content-center">
<img src="/img/tcb-logo.png" class="img-fluid" alt="Responsive image">
</a>
</div>
<ul class="nav nav-pills mb-3 justify-content-center" id="pills-tab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-STEM" role="tab" aria-controls="pills-home" aria-selected="true"><h3>STEMuli</h3></a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-Community" role="tab" aria-controls="pills-profile" aria-selected="false"><h3>Community</h3></a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-aboutUs" role="tab" aria-controls="pills-contact" aria-selected="false"><h3>Who We Are</h3></a>
</li>
</ul>
<div class="tab-content" id="pills-tabContent">
<div class="tab-pane fade" id="pills-STEM" role="tabpanel" aria-labelledby="pills-home-tab">
<div class="row">
<h2>Credit</h2>
<div class="row__inner">
<a onclick="redirectbankon()">
<div class="tile" data-toggle="popover" data-trigger="hover" data-placement="right" data-html="true" title="Description" data-content="The Bank On It module provides an overview of banking services and is designed to help participants build a positive relationship with a financial institution.">
<div class="tile__media">
<img class="tile__img" src="/img/bankonit.png" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
<h5>Bank On It</h5>
</div>
</div>
</div>
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="/img/borrowing.png" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
<h5>Borrowing Basics</h5>
</div>
</div>
</div>
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="/img/keepitsafe.png" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
<h5>Keep it Safe</h5>
</div>
</div>
</div>
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="/img/checkitoutpt1.png" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
<h5>Check It Out</h5>
</div>
</div>
</div>
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="/img/yourownhome.png" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
<h5>Your Own Home</h5>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="pills-Community" role="tabpanel" aria-labelledby="pills-profile-tab">How are you</div>
<div class="tab-pane fade" id="pills-aboutUs" role="tabpanel" aria-labelledby="pills-contact-tab">.</div>
</div>
</main>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script type="text/JavaScript" src="/js/redirect.js"></script>
<script type="text/JavaScript" src="/js/form.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script>
$(function() {
$('[data-toggle="popover"]').popover()
})
</script>
</body>
</html>

You have a lot of invalid HTML markup, somewhere unclosed tags and an unknown </main> tag in the end before the body, an unclosed <a href='#.' onclick="redirectbankon()"> which is wrapping the nested div.tile which is ok if you are using HTML5 but you still need to close it. A better way would be to provide an id to the anchor and then bind the click event to the anchor to call the function on click.
Remove the flaws in your HTML and it will work correctly by replacing the content rather than adding the tab underneath the first.
See a demo below of your code.
.popover-header {
color: #000000;
}
#row {
overflow: hidden;
}
.logo {
z-index: 0;
}
.row {
overflow: scroll;
width: 100%;
z-index: 1;
}
.row__inner {
-webkit-transition: 450ms -webkit-transform;
transition: 450ms -webkit-transform;
transition: 450ms transform;
transition: 450ms transform, 450ms -webkit-transform;
font-size: 0;
white-space: nowrap;
margin: 50px 0;
padding-bottom: 30px;
padding-bottom: 30px;
}
.tile {
position: relative;
display: inline-block;
width: 250px;
height: 250px;
margin-right: 10px;
margin-left: 50px;
font-size: 20px;
cursor: pointer;
-webkit-transition: 450ms all;
transition: 450ms all;
-webkit-transform-origin: center left;
transform-origin: center left;
}
.tile__img {
width: 250px;
height: 250px;
-o-object-fit: cover;
object-fit: cover;
}
.tile__details {
position: absolute;
bottom: 0;
left: 0;
right: 0;
top: 0;
font-size: 10px;
opacity: 0;
background: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.9)), to(rgba(0, 0, 0, 0)));
background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 100%);
-webkit-transition: 450ms opacity;
transition: 450ms opacity;
}
.tile__details:after,
.tile__details:before {
content: '';
position: absolute;
top: 50%;
left: 50%;
display: #000;
}
.tile__details:before {
left: 0;
width: 100%;
font-size: 30px;
margin-left: 7px;
margin-top: -18px;
text-align: center;
z-index: 2;
}
.tile:hover .tile__details {
opacity: 1;
}
.tile__title {
position: absolute;
bottom: 0;
padding: 10px;
}
.row__inner:hover {
-webkit-transform: translate3d(-62.5px, 0, 0);
transform: translate3d(-62.5px, 0, 0);
}
.row__inner:hover .tile {
opacity: 0.3;
}
.row__inner:hover .tile:hover {
-webkit-transform: scale(1.5);
transform: scale(1.5);
opacity: 1;
}
.tile:hover~.tile {
-webkit-transform: translate3d(125px, 0, 0);
transform: translate3d(125px, 0, 0);
}
a:hover {
color: #F1D302;
}
.checkbox-wrapper {
height: 13px;
width: 13px;
}
.btn {
background-color: #F1D302;
}
body {
font-family: 'Rubik', sans-serif;
}
.card-img-top {
height: 300px;
width: 100%;
}
.btn-xlong {
padding: 10px 50px;
font-size: 22px;
line-height: normal;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.steps-form-3 {
width: 2px;
height: 470px;
position: relative;
}
.steps-form-3 .steps-row-3 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
.steps-form-3 .steps-row-3:before {
top: 14px;
bottom: 0;
position: absolute;
content: "";
width: 2px;
height: 100%;
background-color: #7283a7;
}
.steps-form-3 .steps-row-3 .steps-step-3 {
height: 150px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
text-align: center;
position: relative;
}
.steps-form-3 .steps-row-3 .steps-step-3.no-height {
height: 50px;
}
.steps-form-3 .steps-row-3 .steps-step-3 p {
margin-top: 0.5rem;
}
.steps-form-3 .steps-row-3 .steps-step-3 button[disabled] {
opacity: 1 !important;
filter: alpha(opacity=100) !important;
}
.steps-form-3 .steps-row-3 .steps-step-3 .btn-circle-3 {
width: 60px;
height: 60px;
border: 2px solid #59698D;
background-color: white !important;
color: #59698D !important;
border-radius: 50%;
padding: 18px 18px 15px 15px;
margin-top: -22px;
}
.steps-form-3 .steps-row-3 .steps-step-3 .btn-circle-3:hover {
border: 2px solid #4285F4;
color: #4285F4 !important;
background-color: white !important;
}
.steps-form-3 .steps-row-3 .steps-step-3 .btn-circle-3 .fa {
font-size: 1.7rem;
}
::-webkit-scrollbar {
width: 0px;
height: 5px;
background-color: #161925;
}
::-webkit-scrollbar-thumb {
background-color: #F1D302;
border-radius: 10px;
box-shadow: insert 0 0 6px rgba(0, 0, 0, .3);
}
.spacing {
padding: 6px;
}
/*This css file defines the color scheme and font of all of the webpages so import into every new webpage*/
body {
font-family: 'Rubik', sans-serif;
background-color: #9E2B25;
color: #FDFFFC;
}
h4 {
color: #FDFFFC;
}
.button {
background-color: #0267C1;
}
.nav-pills .nav-link.active {
background-color: #0267c1;
}
h3 {
color: #ffffff;
}
#cardimg {
height: 300px;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>STEMuli</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB"
crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Rubik:500" rel="stylesheet">
<link href="/css/mastercss.css" rel="stylesheet">
<link rel="stylesheet" href="/css/profile.css" crossorigin="anonymous">
<script src="/js/moment.js"></script>
</head>
<script>
(function () {
('[data-toggle="popover"]').popover()
})
</script>
<body>
<!--This is where the logo is-->
<div id="row" class="row h-100 justify-content-center">
<img src="/img/tcb-logo.png" class="img-fluid" alt="Responsive image">
</div>
<ul class="nav nav-pills mb-3 justify-content-center" id="pills-tab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-STEM" role="tab" aria-controls="pills-home"
aria-selected="true">
<h3>STEMuli</h3>
</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-Community" role="tab" aria-controls="pills-profile"
aria-selected="false">
<h3>Community</h3>
</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-aboutUs" role="tab" aria-controls="pills-contact"
aria-selected="false">
<h3>Who We Are</h3>
</a>
</li>
</ul>
<div class="tab-content" id="pills-tabContent">
<div class="tab-pane fade" id="pills-STEM" role="tabpanel" aria-labelledby="pills-home-tab">
<div class="row">
<h2>Credit</h2>
<div class="row__inner">
<a href='#.' onclick="redirectbankon()">
<div class="tile" data-toggle="popover" data-trigger="hover" data-placement="right" data-html="true" title="Description"
data-content="The Bank On It module provides an overview of banking services and is designed to help participants build a positive relationship with a financial institution.">
<div class="tile__media">
<img class="tile__img" src="/img/bankonit.png" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
<h5>Bank On It</h5>
</div>
</div>
</div>
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="/img/borrowing.png" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
<h5>Borrowing Basics</h5>
</div>
</div>
</div>
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="/img/keepitsafe.png" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
<h5>Keep it Safe</h5>
</div>
</div>
</div>
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="/img/checkitoutpt1.png" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
<h5>Check It Out</h5>
</div>
</div>
</div>
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="/img/yourownhome.png" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
<h5>Your Own Home</h5>
</div>
</div>
</div>
</a>
</div>
</div>
</div>
<div class="tab-pane fade" id="pills-Community" role="tabpanel" aria-labelledby="pills-profile-tab">How are you</div>
<div class="tab-pane fade" id="pills-aboutUs" role="tabpanel" aria-labelledby="pills-contact-tab">.</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script type="text/JavaScript" src="/js/redirect.js"></script>
<script type="text/JavaScript" src="/js/form.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
<script>
$(function () {
$('[data-toggle="popover"]').popover()
})
</script>
</body>
</html>

Cannot center image

My image wont center either will any text when I use the center tool in both CSS and HTML it tends to just stay close to the Top left hand corner if anyone has Ideas on what to do please let me know. also I followed a video tutorial on a vertical nav bar so maybe that is interfering with centering my elements that I would like centered
body, html{
margin: 0;
padding: 0;
font-family: 'Oswald', sans-serif;
overflow-x: hidden;
}
.logo{
float: right;
}
nav {
position: fixed;
z-index: 1000;
top: 0;
bottom: 0;
width: 200px;
background-color: #000000;
transform: translate3d(-200px, 0, 0);
transition: transform 0.4s ease;
font-size: 35px;
text-decoration: none;
color: #000000;
}
.active-nav nav{
transform: translate3d(0, 0, 0);
}
nav ul {
list-style: none;
margin-top: 100px;
}
nav ul li a {
text-decoration: none;
display: block;
text-align: center;
color: #ffffff
padding: 10px 0;
margin: 35px;
}
a {
text-decoration: none;
color: #ffffff;
}
.nav-toggle-btn {
display: block;
position: absolute;
left: 200px;
width: 40px;
height: 40px;
background-color: inherit;
}
active-nav .content {
transform: translate3d(200px, 0, 0);
}
video {
position: absolute;
z-index: 0;
background: url(mel.jpg) no-repeat;
background-size: 100% 100%;
top: 0px;
left: 0px; /* fixed to left. Replace it by right if you want.*/
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
}
.overlay {
position:absolute;
top:0;
left:0;
z-index:1;
}
<doctype.html>
<head>
<title> LAP Aerial Photography </title>
<link rel="stylesheet" href="styles.css">
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/font-awesome.css">
</head>
<body>
<div class="overlay">
<header>
<nav>
<i class="fa fa-bars" aria-hidden="true"></i>
<ul>
<li><i class="fa fa-home" aria-hidden="true"></i>Home</li>
<li><i class="fa fa-user" aria-hidden="true"></i>About</li>
<li><i class="fa fa-phone" aria-hidden="true"></i>Contact</li>
<li><i class="fa fa-money" aria-hidden="true"></i>Pricing</li>
<li><i class="fa fa-picture-o" aria-hidden="true"></i>Gallary</li>
</ul>
</nav>
<div class="logo">
<img src="Final_Logo.png" alt="LAP Aerial Photography">
</div>
</div>
</header>
</div>
<video autoplay="true" loop="true">
<source src="Background.mov" type="video/mov">
<source src="Background.webm" type="video/webm">
</video>
<footer>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
(function() {
var bodyEl = $('body'),
navToggleBtn = bodyEl.find('.nav-toggle-btn');
navToggleBtn.on('click' , function(e) {
bodyEl.toggleClass('active-nav');
e.preventDefault()
});
})();
</script>
</body>
</html>

Follow this Guide! It is well-explained and clear.
EDIT:
I’ve used CSS-transformations to center the image, because flexbox is’t supported in old browsers:
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
I hope the following code will help you.
(function() {
var bodyEl = $('body'),
navToggleBtn = bodyEl.find('.nav-toggle-btn');
navToggleBtn.on('click' , function(e) {
bodyEl.toggleClass('active-nav');
e.preventDefault()
});
})();
body, html{
margin: 0;
padding: 0;
font-family: 'Oswald', sans-serif;
overflow-x: hidden;
}
#logo > img {
/* center image */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* nav */
nav {
position: fixed;
z-index: 1000;
top: 0;
bottom: 0;
width: 200px;
background-color: #000000;
transform: translate3d(-200px, 0, 0);
transition: transform 0.4s ease;
font-size: 35px;
text-decoration: none;
color: #000000;
}
.active-nav nav{
transform: translate3d(0, 0, 0);
}
nav ul {
list-style: none;
margin-top: 100px;
}
nav ul li a {
text-decoration: none;
display: block;
text-align: center;
color: #ffffff
padding: 10px 0;
margin: 35px;
}
a {
text-decoration: none;
color: #ffffff;
}
.nav-toggle-btn {
display: block;
position: absolute;
left: 200px;
width: 40px;
height: 40px;
background-color: inherit;
}
active-nav .content {
transform: translate3d(200px, 0, 0);
}
<!DOCTYPE html>
<html>
<head>
<title>LAP Aerial Photography</title>
<link rel="stylesheet" href="styles.css">
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/font-awesome.css">
</head>
<body>
<header>
<nav>
<i class="fa fa-bars" aria-hidden></i>
<ul>
<li><i class="fa fa-home" aria-hidden></i>Home</li>
<li><i class="fa fa-user" aria-hidden></i>About</li>
<li><i class="fa fa-phone" aria-hidden></i>Contact</li>
<li><i class="fa fa-money" aria-hidden></i>Pricing</li>
<li><i class="fa fa-picture-o" aria-hidden></i>Gallary</li>
</ul>
</nav>
<div id="logo">
<img src="Final_Logo.png" alt="LAP Aerial Photography">
</div>
</header>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</body>
</html>

We Keep Coding

JavaScript is the programming language of the Web.

align right without overflowing the screen CSS - javascript

try overflow: hidden; or overflow: auto depending on what you want to achieve. overflow: hidden; will hide all the overflow, and overflow: auto will add a scroll bar if it is needed.

Related

Navigation menu sidebar not closing with click on document

FadeInLeft effect when changing content

Wrapping/Aligning Images Around a Circle

Bootstrap pill content not going away

Cannot center image

Categories

Resources