Main page
This is my primary page on my website, I wanna my website no be easy and don´t have so many pages, so when I press "us" I want that open a modal with options to navigate to other pages, like this photo above:
Desired result
My code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/src/styles/pages/menu2.css">
<title>menu</title>
</head>
<body>
<div class="container">
<div class="left"><a class="clickable" href="http://perspetiva-m.pt/projects">projects</a></div>
<div class="right">us</div>
</div>
</body>
</html>
Css:
html, body, .container {
height: 100%;
}
body {
margin: 0;
}
.container {
display: flex;
}
.left,
.right {
font-family: 'Times New Roman', Times, serif;
font-size: 50px;
width: 50%;
height: 100%;
}
.left {
background-image: url("https://images.unsplash.com/photo-1631031651060-424d82e511de?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1650&q=80");
background-size: cover;
}
.left, .right {
display: flex;
align-items: center;
justify-content: center;
}
.left {
color: white;
}
.clickable {
cursor: pointer;
text-decoration: none;
color: white;
}
Can someone help me?
Thank you,
you can use this code I added
html, body, .container {
height: 100%;
}
body {
margin: 0;
}
.container {
display: flex;
}
.left,
.right {
font-family: 'Times New Roman', Times, serif;
font-size: 50px;
width: 50%;
height: 100%;
}
.right a{
text-decoration: none;
color: black;
}
.left {
background-image: url("https://images.unsplash.com/photo-1631031651060-424d82e511de?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1650&q=80");
background-size: cover;
}
.left, .right {
display: flex;
align-items: center;
justify-content: center;
}
.left {
color: white;
}
.clickable {
cursor: pointer;
text-decoration: none;
color: white;
}
#model{
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background: #fff;
opacity: 0.8;
display: none;
flex-direction: column;
justify-content: center;
align-items: center;
}
.option{
margin-top: 10px;
margin-bottom: 10px;
font-weight: bold;
cursor: pointer;
}
.option a {
text-decoration: none;
color: black;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/src/styles/pages/menu2.css">
<title>menu</title>
</head>
<body>
<div class="container">
<div class="left"><a class="clickable" href="http://perspetiva-m.pt/projects">projects</a></div>
<div class="right" id='us'>us</div>
</div>
<div id="model">
<div class="option">About</div>
<div class="option">News</div>
<div class="option">Contact</div>
</div>
</body>
<script>
const $us = document.getElementById('us');
const $model = document.getElementById('model');
$us.onclick = function(){
$model.style.display = 'flex';
}
$model.onclick = function(){
this.style.display = 'none';
}
</script>
</html>
Related
I currently have this servcable playlist set up,
but it only loops each file and doesn't advance the list to the "next" video.
What changes need to be made, for the playback to advance to the next listentry once a file has finished playing ?
It would obviously be interesting to be able to return to the first file after finishing the playlist, but it is not required.
Basic "move to next" title is all that is required.
Demo: https://codepen.io/ryedai1/full/PoaaWVg
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - Videoplaylist Youtube Style (loop)</title>
</head>
<body>
<!-- partial:index.partial.html -->
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Video Playlist</title>
<style>
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#100;200;300;400;500;600&display=swap');
* {
font-family: 'Popins', sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
outline: none;
border: none;
text-decoration: none;
text-transform: capitalize;
}
body {
background-color: white;
padding: 20px;
}
.container {
max-width: 1200px;
margin: 0px auto;
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: 20px;
}
.container .main-video-container {
flex: 1 1 700px;
border-radius: 5px;
box-shadow: 0 5px 15px rgba(0, 0, 0, .1);
background-color: wheat;
padding: 15px;
}
.container .main-video-container .main-video {
margin-bottom: 7px;
border-radius: 5px;
width: 100%;
}
.container .main-video-container .main-vid-title {
font-size: 20px;
color: #444;
}
.container .video-list-container {
flex: 1 1 350px;
height: 485px;
overflow-y: scroll;
border-radius: 5px;
box-shadow: 0 5px 15px rgba(0, 0, 0, .1);
background-color: wheat;
padding: 15px;
}
.container .video-list-container::-webkit-scrollbar {
width: 10px;
}
.container .video-list-container::-webkit-scrollbar-track {
background-color: wheat;
border-radius: 5px;
}
.container .video-list-container::-webkit-scrollbar-thumb {
background-color: #444;
border-radius: 5px;
}
.container .video-list-container .list {
display: flex;
align-items: center;
gap: 15px;
padding: 10px;
background-color: whitesmoke;
cursor: pointer;
border-radius: 5px;
margin-bottom: 10px;
}
.container .video-list-container .list:last-child {
margin-bottom: 0;
}
.container .video-list-container .list.active {
background-color: #444;
}
.container .video-list-container .list.active .list-title {
color: wheat;
}
.container .video-list-container .list .list-video {
width: 100px;
border-radius: 5px;
}
.container .video-list-container .list .list-title {
font-size: 17px;
color: #444;
}
#media (max-width:1200px){
.container{
margin: 0;
}
}
#media (max-width:450px){
.container .main-video-container .main-vid-title{
font-size: 15px;
text-align: center;
}
.container .video-list-container .list{
flex-flow: column;
gap: 10px;
}
.container .video-list-container .list .list-video{
width: 100%;
}
.container .video-list-container .list .list-title{
font-size: 15px;
text-align: center;
}
}
</style>
</head>
<body>
<!-- partial:index.partial.html -->
<!DOCTYPE html>
<html lang="en pt-br">
<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">
<!--- Custom CSS file link --->
<!--<link rel="stylesheet" href="css/style.css">-->
</head>
<body>
<div class="container">
<div class="main-video-container">
<video src="https://video" loop controls class="main-video"></video>
<h3 class="main-vid-title">video</h3>
</div>
<div class="video-list-container">
<div class="list active">
<video src="https://video" class="list-video"></video>
<h3 class="list-title">video</h3>
</div>
<div class="list">
<video src="https://video" class="list-video"></video>
<h3 class="list-title">video2</h3>
</div>
<div class="list">
<video src="https://video" class="list-video"></video>
<h3 class="list-title">video3</h3>
</div>
</div>
</div>
</div>
<script>
let videoList = document.querySelectorAll('.video-list-container .list');
videoList.forEach(vid =>{
vid.onclick = () =>{
videoList.forEach(remove =>{remove.classList.remove('active')});
vid.classList.add('active');
let src = vid.querySelector('.list-video').src;
let title = vid.querySelector('.list-title').innerHTML;
document.querySelector('.main-video-container .main-video').src = src;
document.querySelector('.main-video-container .main-video').play();
document.querySelector('.main-video-container .main-vid-title').innerHTML = title;
};
});
</script>
</body>
</html>
<!-- partial -->
<!--<script src="./script.js"></script>-->
</body>
</html>
<!--https://codepen.io/Oral_Seventhplanet/pen/RwgKMBm -->
<!-- partial -->
</body>
</html>
i have a little problem, here i am designing an application where when i scroll there will be a clip path that follows it, it runs very well, until when i scroll the clip path it still follows, but lags above
here's the source code:
let pos = document.documentElement;
pos.addEventListener("mousemove", (e) => {
pos.style.setProperty("--x", e.clientX + "px");
pos.style.setProperty("--y", e.clientY + "px");
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
}
body {
width: 100%;
height: 1000px;
}
section.black {
width: 100%;
height: 100%;
background-color: #000;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 2;
clip-path: circle(80px at var(--x) var(--y));
position: absolute;
}
section.black .hehe__black {
color: #fff;
font-size: 4em;
letter-spacing: 1px;
text-align: center;
}
section.black .subhehe__black {
color: #fff;
font-size: 2em;
text-align: center;
}
section.white {
width: 100%;
height: 100%;
background-color: #fff;
position: absolute;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 1;
cursor: pointer;
}
section.white .hehe__white {
color: #000;
font-size: 4em;
letter-spacing: 1px;
text-align: center;
}
section.white .subhehe__white {
color: #000;
font-size: 2em;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Nyoba clip path</title>
</head>
<body>
<section class="black">
<h1 class="hehe__black">im misbah</h1>
<span class="subhehe__black">im front end developer</span>
</section>
<section class="white">
<h1 class="hehe__white">im misbah</h1>
<span class="subhehe__white">im front end developer</span>
</section>
</body>
</html>
Is there a way so that the c clip path doesn't lag at the top even when scrolled?
please help, every answer means a lot
When I click the write button, the value of input should be displayed inside span with id caption in the form of typing effect. But the speed of typing of any character should be 30ms. to this mean when displayed the first character, the second character displayed with a delay of 30ms And also to the end. displaying of text does with a delay of 30ms(the first setTimeout). I wrote the below code but it did not work. the output is in to form of numbers. how to fix it?
const caption = document.getElementById("caption");
const input = document.getElementById("user-caption");
function typing() {
const input_array = input.value.split("");
setTimeout(myfunction(), 30);
function myfunction() {
for (let i = 0; i < input_array.length; i++) {
caption.innerHTML += setTimeout(function() {
return input_array[i];
}, 30);
}
}
}
* {
box-sizing: border-box;
}
body {
padding: 0;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
font-family: "Lucida Sans Typewriter", "Lucida Console", Monaco, "Bitstream Vera Sans Mono", monospace;
background-color: #505050;
}
.container {
background-color: black;
flex-direction: column;
border-radius: 5px;
overflow: hidden;
gap: 8px;
width: 680px;
height: 360px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}
.console {
margin: 0;
color: #fff;
font-size: 27px;
}
#cursor {
display: inline-block;
width: 16px;
height: 4px;
margin-bottom: -5px;
margin-left: 5px;
background-color: #fff;
animation: cursorMotion 1s 0.5s ease infinite;
}
#keyframes cursorMotion {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.main {
height: 80%;
padding: 40px;
padding-bottom: 0;
}
.footer {
height: 20%;
background-color: #eee;
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
}
.footer button {
height: 35px;
min-width: 120px;
font-family: inherit;
cursor: pointer;
font-size: 16px;
}
.footer input {
height: 35px;
width: 230px;
font-family: inherit;
padding: 10px;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="styles.css" />
<link href="https://cdn.jsdelivr.net/gh/rastikerdar/vazir-font#v30.1.0/dist/font-face.css" rel="stylesheet" type="text/css" />
<title>تایپ کردن</title>
</head>
<body>
<div class="container">
<main class="main">
<p class="console">
<span>C:\</span>
<span id="caption"></span>
<span id="cursor"></span>
</p>
</main>
<footer class="footer">
<input type="text" id="user-caption" placeholder="your text ..." />
<button id="test-typing" onclick="typing()">write</button>
<button id="test-erasing">eraser</button>
</footer>
</div>
<script src="main.js"></script>
</body>
</html>
const caption = document.getElementById("caption");
const input = document.getElementById("user-caption");
function typing() {
const input_array = input.value.split("");
myfunction(input_array);
function myfunction(input) {
if (!input.length) return;
const w = input.shift();
caption.innerHTML += w;
setTimeout(() => myfunction(input), 30);
}
}
* {
box-sizing: border-box;
}
body {
padding: 0;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
font-family: "Lucida Sans Typewriter", "Lucida Console", Monaco, "Bitstream Vera Sans Mono", monospace;
background-color: #505050;
}
.container {
background-color: black;
flex-direction: column;
border-radius: 5px;
overflow: hidden;
gap: 8px;
width: 680px;
height: 360px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}
.console {
margin: 0;
color: #fff;
font-size: 27px;
}
#cursor {
display: inline-block;
width: 16px;
height: 4px;
margin-bottom: -5px;
margin-left: 5px;
background-color: #fff;
animation: cursorMotion 1s 0.5s ease infinite;
}
#keyframes cursorMotion {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.main {
height: 80%;
padding: 40px;
padding-bottom: 0;
}
.footer {
height: 20%;
background-color: #eee;
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
}
.footer button {
height: 35px;
min-width: 120px;
font-family: inherit;
cursor: pointer;
font-size: 16px;
}
.footer input {
height: 35px;
width: 230px;
font-family: inherit;
padding: 10px;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="styles.css" />
<link href="https://cdn.jsdelivr.net/gh/rastikerdar/vazir-font#v30.1.0/dist/font-face.css" rel="stylesheet" type="text/css" />
<title>تایپ کردن</title>
</head>
<body>
<div class="container">
<main class="main">
<p class="console">
<span>C:\</span>
<span id="caption"></span>
<span id="cursor"></span>
</p>
</main>
<footer class="footer">
<input type="text" id="user-caption" placeholder="your text ..." />
<button id="test-typing" onclick="typing()">write</button>
<button id="test-erasing">eraser</button>
</footer>
</div>
<script src="main.js"></script>
</body>
</html>
I have created a Navigation bar and that contain Toggle Button .The problem I am facing is in the responsive view, after clicking on the toggle button ,the toggle button hides and shows the navigation bar.
But after hiding the toggle button I want to show another button upon which clicking the navigation bar hides.
I don't understand what I'm doing wrong and what should I do?
Here is The code is:
let menuBar=document.querySelector('#menu-bar');
navBar=document.querySelector('.navbar');
menuBar.onclick=()=>{
menuBar.classList.add('hide');
// menuBar.classList.add('fa-times');
navBar.classList.add('show');
times();
}
let icon="fas fa-times";
function times(){
if(navBar.classList.contains('show')){
menuBar.innerHTML=`<i class="${icon}"></i>`;
}
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
html{
font-size: 62.5%;
}
header{
top: 0;
left: 0;
position: fixed;
background: #fff;
box-shadow:5px 5px 7px rgba(0,0,0,0.4);
width: 100%;
padding: 1.5rem 10%;
z-index: 1000;
display: flex;
justify-content: space-between;
align-items: center;
}
header h1{
font-size: 30px;
color: rgb(225, 156, 65);
text-transform: capitalize;
}
header .navbar ul{
display: flex;
align-items: center;
justify-content: center;
list-style: none;
}
header .navbar ul li{
margin-right: 3rem;
}
header .navbar ul li a{
text-decoration: none;
font-size: 1.3rem;
color: #568aef;
text-transform: capitalize;
}
#menu-bar{
font-size: 20px;
cursor: pointer;
display:none;
}
/*media query*/
#media (max-width:768px){
html{
font-size: 55%;
}
header #menu-bar{
display: block;
}
header #menu-bar.hide{
opacity: 0;
pointer-events: none;
}
header .navbar{
position: fixed;
top: 8rem;
left: 0;
background: #568aef;
width: 100%;
opacity: 0;
}
header .navbar.show{
opacity: 1;
}
header .navbar ul{
flex-flow: column;
padding: 2rem;
}
header .navbar ul li{
width: 100%;
margin: 1.5rem;
}
header .navbar ul li a{
color: #fff;
display: block;
padding-left: 2rem;
font-size: 2rem;
border-left: 0.3rem solid #fff;
}
.fa-times{
transform: rotate(180deg);
opacity: 1;
font-size: 20px;
color: black;
}
}
<!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>Nav4</title>
<!--fontawsome cdn link-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<link rel="stylesheet" href="css/nav4.css">
</head>
<body>
<header>
<h1>ninja codes</h1>
<div id="menu-bar" class="fas fa-hamburger"></div>
<nav class="navbar">
<ul>
<li>Home</li>
<li>about</li>
<li>services</li>
<li>contact</li>
<li>login</li>
</ul>
</nav>
</header>
<!--jquery cdn link-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!--custom js file link-->
<script src="nav4.js"></script>
</body>
</html>
Some notes:
It was not working previously because you did not remove the hide class after adding it to menuBar
You are nesting an icon in an icon - not recommended
You are performing unnecessary checks - you should just use classList.toggle() instead
Here's the working code:
let menuBar = document.querySelector('#menu-bar');
navBar = document.querySelector('.navbar');
menuBar.onclick = () => {
navBar.classList.toggle('hide');
navBar.classList.toggle('show');
times();
}
let icon = "fas fa-times";
function times() {
menuBar.classList.toggle('fa-times');
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 62.5%;
}
header {
top: 0;
left: 0;
position: fixed;
background: #fff;
box-shadow: 5px 5px 7px rgba(0, 0, 0, 0.4);
width: 100%;
padding: 1.5rem 10%;
z-index: 1000;
display: flex;
justify-content: space-between;
align-items: center;
}
header h1 {
font-size: 30px;
color: rgb(225, 156, 65);
text-transform: capitalize;
}
header .navbar ul {
display: flex;
align-items: center;
justify-content: center;
list-style: none;
}
header .navbar ul li {
margin-right: 3rem;
}
header .navbar ul li a {
text-decoration: none;
font-size: 1.3rem;
color: #568aef;
text-transform: capitalize;
}
#menu-bar {
font-size: 20px;
cursor: pointer;
display: none;
}
/*media query*/
#media (max-width:768px) {
html {
font-size: 55%;
}
header #menu-bar {
display: block;
}
header #menu-bar.hide {
opacity: 0;
pointer-events: none;
}
header .navbar {
position: fixed;
top: 8rem;
left: 0;
background: #568aef;
width: 100%;
opacity: 0;
}
header .navbar.show {
opacity: 1;
}
header .navbar ul {
flex-flow: column;
padding: 2rem;
}
header .navbar ul li {
width: 100%;
margin: 1.5rem;
}
header .navbar ul li a {
color: #fff;
display: block;
padding-left: 2rem;
font-size: 2rem;
border-left: 0.3rem solid #fff;
}
.fa-times {
transform: rotate(180deg);
opacity: 1;
font-size: 20px;
color: black;
}
}
<!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>Nav4</title>
<!--fontawsome cdn link-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<link rel="stylesheet" href="css/nav4.css">
</head>
<body>
<header>
<h1>ninja codes</h1>
<div id="menu-bar" class="fas fa-hamburger"></div>
<nav class="navbar hide">
<ul>
<li>Home</li>
<li>about</li>
<li>services</li>
<li>contact</li>
<li>login</li>
</ul>
</nav>
</header>
<!--jquery cdn link-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!--custom js file link-->
<script src="nav4.js"></script>
</body>
</html>
When window is in full screen it shows like this:
When I tried to make it mobile friendly or window shrink the h1 tag is overflow the image:
I also tried with overflow property but it didn't work. Also I want that my h1 and img must that particular position which one I did but also want it must be mobile friendly. If there any CSS or JavaScript I need to use, please suggest it.
Here is my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>test video</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Butcherman&subset=latin-ext" rel="stylesheet">
<style type="text/css">
html,body{
margin: 0;
padding: 0;
font-size: 100%;
}
#stripe img{
position: absolute;
top: 0;
left: 40%;
margin-left: 5px;
margin-top: 0;
margin-bottom: 0;
margin-right: 5px;
overflow: inherit;
}
h1{
position: fixed;
left: 45%;
top: 20px;
color: white;
font-size: 2em;
font-family: 'Butcherman', cursive;
font-weight: normal;
text-align: center;
margin-left: 5px;
margin-top: 0;
margin-bottom: 0;
margin-right: 0;
text-transform: uppercase;
overflow: inherit;
}
#stripe{
position : relative;
background: #404040;
height: 70px;
text-align: center;
overflow: hidden;
right: 0;
}
</style>
</head>
<body>
<div id="stripe">
<img src="logo/mask.png">
<h1>My Website</h1>
</div>
</body>
</html>
Try this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>test video</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Butcherman&subset=latin-ext" rel="stylesheet">
<style type="text/css">
html,body{
margin: 0;
padding: 0;
font-size: 100%;
}
#stripe img{
display: inline-block;
}
h1{
color: white;
font-size: 2em;
font-family: 'Butcherman', cursive;
font-weight: normal;
text-align: center;
margin-left: 5px;
margin-top: 0;
margin-bottom: 0;
text-transform: uppercase;
display: inline-block;
}
#stripe{
background: #404040;
height: 70px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<div id="stripe">
<img src="http://via.placeholder.com/50x50">
<h1>My Website</h1>
</div>
</body>
</html>
I think You should add the following CSS to your div and img styles.
#stripe{
position: relative;
}
#stripe img{
position: absolute;
}
and you not need to give h1 tag position: fixed style. remove it.
I suggest you to consider using flexboxes:
#stripe {
display: flex;
justify-content: center;
align-items: center;
background: #404040;
color: white;
height: 70px;
overflow: hidden;
}
img {
width: 50px;
height: 50px;
margin-right: 10px;
}
<div id="stripe">
<img src="https://cdn.pixabay.com/photo/2012/04/15/21/38/skull-35404_960_720.png" />
<h1>Someone's Website</h1>
</div>
Finally, I've solved my problem with this CSS:
html,body{
margin: 0;
padding: 0;
font-size: 100%;
}
#stripe img{
margin-left: 0;
margin-top: 0;
margin-bottom: 15px;
margin-right: 0;
}
h1{
color: white;
font-size: 2em;
font-family: 'Butcherman', cursive;
font-weight: normal;
text-align: center;
text-transform: uppercase;
}
img + h1{
display: inline-block;
}
#stripe{
position: relative;
background: #404040;
height: 70px;
text-align: center;
right: 0;
}