JacR
Coder
Hi, CodeForum Community,
I am trying to code a website but in need of help with certain elements like picture postitioning.
I want to change the position of the bottom logo to the right of the top logo so it'll line up.
Here's a direct link to the codepen project https://codepen.io/jacrhisiart/pen/WNxwXVM
I am trying to code a website but in need of help with certain elements like picture postitioning.
I want to change the position of the bottom logo to the right of the top logo so it'll line up.
Here's a direct link to the codepen project https://codepen.io/jacrhisiart/pen/WNxwXVM
HTML:
<!DOCTYPEhtml>
<body>
<link href="https://fonts.googleapis.com/css2?family=Alata&display=swap" rel="stylesheet">
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css"
/>
</body>
<html>
<center>
<h1>TheFilePartition</h1>
<p>Tech News Delivered.</p>
<br />
<br />
<img
class="animate__animated animate__zoomIn"
src="https://thefilepartition.tk/assets/My%20Post%20(21).png"
width="200"
alt="amongus "
class="header-title-avatar"
/>
<br /><br />
<div class="container">
<br />
<br />
<img
class="animate__animated animate__zoomIn"
img src="https://thefilepartition.tk/assets/My%20Post%20(24).png"
top="200px"
width="200px"
alt="amongus "
class="header-title-avatar"
/>
<br /><br />
</div>
</center>
<div id="mySidebar" class="sidebar">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<body style="background-color:#919395;">
<a href="i am idiot">Please help</a>
<a href="example">example</a>
<a href="stuff">stuff</a>
<div id="main">
<button class="openbtn" onclick="openNav()">☰ </button>
</html>
CSS:
body {
font-family: 'Alata', sans-serif;
background-color: #919395;
color:white;
}
* { color:#fff; text-decoration: none;}
.sidebar {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #696969;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidebar a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #919395;
display: block;
transition: 0.3s;
}
.sidebar a:hover {
color: #f1f1f1;
}
.sidebar .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
.openbtn {
font-size: 20px;
cursor: pointer;
background-color: #919395;
color: white;
padding: 10px 15px;
border: none;
position: fixed;
top: 0;
left: 0;
}
.openbtn:hover {
background-color: #919395;
}
#main {
transition: margin-left .5s;
padding: 16px;
JavaScript:
var TxtType = function(el, toRotate, period) {
this.toRotate = toRotate;
this.el = el;
this.loopNum = 0;
this.period = parseInt(period, 10) || 2000;
this.txt = '';
this.tick();
this.isDeleting = false;
};
TxtType.prototype.tick = function() {
var i = this.loopNum % this.toRotate.length;
var fullTxt = this.toRotate[i];
if (this.isDeleting) {
this.txt = fullTxt.substring(0, this.txt.length - 1);
} else {
this.txt = fullTxt.substring(0, this.txt.length + 1);
}
this.el.innerHTML = '<span class="wrap">'+this.txt+'</span>';
var that = this;
var delta = 200 - Math.random() * 100;
if (this.isDeleting) { delta /= 2; }
if (!this.isDeleting && this.txt === fullTxt) {
delta = this.period;
this.isDeleting = true;
} else if (this.isDeleting && this.txt === '') {
this.isDeleting = false;
this.loopNum++;
delta = 500;
}
setTimeout(function() {
that.tick();
}, delta);
};
window.onload = function() {
var elements = document.getElementsByClassName('typewrite');
for (var i=0; i<elements.length; i++) {
var toRotate = elements[i].getAttribute('data-type');
var period = elements[i].getAttribute('data-period');
if (toRotate) {
new TxtType(elements[i], JSON.parse(toRotate), period);
}
}
// INJECT CSS
var css = document.createElement("style");
css.type = "text/css";
css.innerHTML = ".typewrite > .wrap { border-right: 0.08em solid #fff}";
document.body.appendChild(css);
};
function openNav() {
document.getElementById("mySidebar").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
}
function closeNav() {
document.getElementById("mySidebar").style.width = "0";
document.getElementById("main").style.marginLeft= "0";
}
