how to make the clip path circle follow when scrolled

how to make the clip path circle follow when scrolled - javascript

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

Related

How I show value of an input inside a span tag in the form of typing effect?

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>

How to get card to resize when screen size is changed

I have a webpage with a navigation bar and a card with information on it. The navigation bar resizes with the screen but I'm struggling to get the card to do the same
. I've tried changing the px to rem in the CSS but that doesn't seem to work. I've also tried making a wrapper that goes around the elements within the body of the HTML but that hasn't solved the problem either.
If anyone can help me with this I'd be really appreciative.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<div class="content-wrapper">
<div class="loader"></div>
<header>
[Ayanfe]:)
<ul>
<li>Next</li>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</header>
<main>
<a href="#" class="card">
<div class="inner">
<time class="subtitle">Before I delve into my pitch, I think its important to acknowledge that present me is much different from younger me. Growing up, I was extroverted, trusting and extremely open to people. As life progressed the realities of the world became more apparent and the world that lived inside my head became a lot more attractive.<time>
<br>
<br>
<time class="Key">Keyword: Escapism<time>
</div>
</a>
</div>
</body>
</html>
CSS
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: black;
padding: 0;
margin: 0;
height: 100vh;
width: 100vh;
}
header {
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 1.875rem 6.25rem;
display: flex;
justify-content: space-between;
align-items: center;
font-family: Poppins, sans-serif;
z-index: 10000;
}
header .logo {
color: #fff;
font-weight: 700;
text-decoration: none;
font-size: 1.563rem;
text-transform: uppercase;
letter-spacing: 0.313rem;
}
header ul{
display: flex;
justify-content: center;
align-items: center;
}
header ul li {
list-style: none;
margin-left: 1.25rem;
}
header ul li a {
text-decoration: none;
padding: 0.375rem 0.938rem;
color: #fff;
border-radius: 1.25rem;
}
header ul li a:hover,
header ul li a.active {
background: #fff;
color: #2b1055;
}
main,
footer {
max-width: 60rem;
margin: 0 auto;
}
.card {
height: 28.125rem;
position: relative;
left: 18.75rem;
top: 12.5rem;
padding: 1.25rem;
box-sizing: border-box;
display: flex;
align-items: flex-end;
text-decoration: none;
border: 0.25rem solid;
border-color: black;
margin-bottom: 1.25rem;
background: url(./Images/1.jpg);
background-repeat: no-repeat;
background-size: 105%;
margin: auto;
}
#include media {
height: 500px;
}
.inner {
height: 100%;
width: 500px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: white;
box-sizing: border-box;
padding: 40px;
border: solid;
border-color: grey;
border-radius: 2px;
}
#include media {
width: 50%;
height: 100%;
}
.title {
font-size: 24px;
color: black;
text-align: center;
font-weight: 700;
color: #181818;
text-shadow: 0px 2px 2px #a6f8d5;
position: relative;
margin: 0 0 20px 0;
}
#include media {
font-size: 30px;
}
.subtitle {
color: black;
font-size: 20px;
text-align: center;
}
.content-wrapper {
margin-left: auto;
margin-right: auto;
width: 60rem;
}

The solution to your problem is to remove the body {...} option and then responsiveness will work for <a class="card">. Plus I added some #media(max-width: ... px) settings.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: black;
}
header {
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 1.875rem 6.25rem;
display: flex;
justify-content: space-between;
align-items: center;
font-family: Poppins, sans-serif;
z-index: 10000;
}
header .logo {
color: #fff;
font-weight: 700;
text-decoration: none;
font-size: 1.563rem;
text-transform: uppercase;
letter-spacing: 0.313rem;
}
header ul{
display: flex;
justify-content: center;
align-items: center;
}
header ul li {
list-style: none;
margin-left: 1.25rem;
}
header ul li a {
text-decoration: none;
padding: 0.375rem 0.938rem;
color: #fff;
border-radius: 1.25rem;
}
header ul li a:hover,
header ul li a.active {
background: #fff;
color: #2b1055;
}
main,
footer {
max-width: 60rem;
margin: 0 auto;
}
.card {
height: 28.125rem;
width: 70%;
position: relative;
left: 18.75rem;
top: 12.5rem;
padding: 1.25rem;
display: flex;
align-items: flex-end;
text-decoration: none;
border: 0.25rem solid;
border-color: black;
background: url(./Images/1.jpg);
background-repeat: no-repeat;
background-size: 105%;
margin: 0 !important;
}
/*
#include media {
height: 500px;
}*/
.inner {
height: 100%;
width: 50%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: white;
box-sizing: border-box;
padding: 40px;
border: solid;
border-color: grey;
border-radius: 2px;
}
/* #include media {
width: 50%;
height: 100%;
}*/
.title {
font-size: 24px;
color: black;
text-align: center;
font-weight: 700;
color: #181818;
text-shadow: 0px 2px 2px #a6f8d5;
position: relative;
margin: 0 0 20px 0;
}
/*#include media {
font-size: 30px;
}*/
.subtitle {
color: black;
font-size: 20px;
text-align: center;
}
.Key{
margin-top: 50px;
}
.content-wrapper {
height: 100vh;
}
#media(max-width: 1000px) {
.Key, .subtitle {
font-size: 1rem;
}
}
#media(max-width: 750px) {
.Key, .subtitle {
font-size: 0.8rem;
}
.inner {
height: 70%;
}
}
#media(max-width: 720px) {
.Key, .subtitle {
font-size: 0.6rem;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="content-wrapper">
<header>
[Ayanfe]:)
<ul>
<li>Next</li>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</header>
<a href="#" class="card">
<div class="inner">
<time class="subtitle">Before I delve into my pitch, I think its important to acknowledge that present me is much different from younger me. Growing up, I was extroverted, trusting and extremely open to people. As life progressed the realities of the world became more apparent and the world that lived inside my head became a lot more attractive.<time>
<br>
<br>
<time class="Key">Keyword: Escapism<time>
</div>
</a>
</div>
</body>
</html>

You have the width of .inner set to 500px.
That means it will always stay 500px, independent of screen size.
Try using a percentage instead - your header has width: 100%, that's why it changes width on resize.
If you need more flexibility than that, calc() allows you to calculate a value with different units, such as width: calc(20% - 10px + 2rem)

Create a menu from a modal

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>

How do I make this “Convert” button translate text from an input to binary?

I am trying to create a basic website which can convert text to binary using JavaScript, but I don’t really know how to make the Convert! button work. Does anyone have a simple fix that I can use? (Don’t mind the CSS missing some code, I’m not finished.)
function convert() {
const input_el = document.querySelector(".input-text");
const output_el = document.querySelector(".output-binary");
input_el.addEventListener("input", (event) => {
let input_text = event.target.value;
let output_arr = [];
for (var i = 0; i < input_text.length; i++) {
output_arr.push(input_text.charCodeAt(i).toString(2));
}
output_el.innerHTML = output_arr.join(" ");
});
}
body {
margin: 0;
padding: 0;
}
header {
padding: 30px;
background: #09A954;
color: white;
text-align: center;
font-family: arial;
font-size: 30px;
}
.navbar {
padding: 12px;
background: #363636;
color: white;
font-size: 15px;
}
.container {
display: flex;
flex-direction: column;
padding: 80px;
background: #B3B3B3;
}
.input_box {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 40px;
background: #D35400;
border-radius: 10px;
text-align: center;
box-shadow: 0px 3px 5px #000000;
height: 100px;
width: ;
}
input {
background: #D35400;
border: none;
border-bottom: 2px solid #000000;
font-size: 15px;
}
button {
width: 100px;
}
.output_box {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 40px;
background: #2980B9;
border-radius: 10px;
text-align: center;
box-shadow: 0px 3px 5px #000000;
height: 100px;
width: ;
}
p2 {
font-size: 30px;
font-family: calibri;
}
p4 {
font-size: 15px;
font-family: arial;
}
<!DOCTYPE html>
<html>
<head>
<title>Text to binary converter</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Text to binary converter</h1>
</header>
<div class="navbar">
<p1>link</p1>
</div>
<div class="container">
<div class="input_box">
<p2>This is what a human sees:</p2><br>
<p3>Please enter text below</p3><br>
<input type="text" name="" class="input-text">
</div><br><br>
<button onclick="convert()">Convert!</button><br><br>
<div class="output_box">
<p2>This is what a machine sees:</p2><br>
<p4 class="output-binary"></p4>
</div>
</div>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
Link to JSFiddle: https://jsfiddle.net/SaltySandwich/65te8omy/

I fixed your exisiting project.
I took an easier aproach at JavaScript. You can write everything you need in 6 lines on JavaScript code :)
For your output, you should use the <output> instead of <input>.
Take a look at this:
function convert() {
var output = document.getElementById("output_text");
var input = document.getElementById("input_text").value;
output.value = "";
for (i = 0; i < input.length; i++) {
output.value += input[i].charCodeAt(0).toString(2) + " ";
}
}
body {
margin: 0;
padding: 0;
}
header {
padding: 30px;
background: #09A954;
color: white;
text-align: center;
font-family: arial;
font-size: 30px;
}
.navbar {
padding: 12px;
background: #363636;
color: white;
font-size: 15px;
}
.container {
display: flex;
flex-direction: column;
padding: 80px;
background: #B3B3B3;
}
.input_box {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 40px;
background: #D35400;
border-radius: 10px;
text-align: center;
box-shadow: 0px 3px 5px #000000;
height: 100px;
width: ;
}
input {
background: #D35400;
border: none;
border-bottom: 2px solid #000000;
font-size: 15px;
}
input:focus {
border: none;
border-bottom: 2px solid #000000;
font-size: 15px;
outline: none;
}
button {
width: 100px;
}
.output_box {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 40px;
background: #2980B9;
border-radius: 10px;
text-align: center;
box-shadow: 0px 3px 5px #000000;
height: 100px;
width: ;
}
p2 {
font-size: 30px;
font-family: calibri;
}
p4 {
font-size: 15px;
font-family: arial;
}
<!DOCTYPE html>
<html>
<head>
<title>Text to binary converter</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Text to binary converter</h1>
</header>
<div class="navbar">
<p1>link</p1>
</div>
<div class="container">
<div class="input_box">
<p2>This is what a human sees:</p2><br>
<p3>Please enter text below</p3><br>
<!--INPUT FIELD-->
<input id="input_text" value="Human sees this" />
</div><br><br>
<button onclick="convert()">Convert!</button><br><br>
<div class="output_box">
<p2>This is what a machine sees:</p2><br>
<!--INPUT FIELD-->
<output id="output_text">
</div>
</div>
<script src="main.js"></script>
</body>
</html>
Ohh.. I also edited your CSS a little bit so the input doesn't have the annoying border around it... You can delete my changes by deleting this:
input:focus {
border: none;
border-bottom: 2px solid #000000;
font-size: 15px;
outline: none;
}
If you need anything cleared out be sure to comment under this post :)

Take a look at this:
function convert() {
var output=document.getElementById("ti2");
var input=document.getElementById("ti1").value;
output.value = "";
for (i=0; i < input.length; i++) {
output.value +=input[i].charCodeAt(0).toString(2) + " ";
}
}
input {font-size:12px; width:200px;}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="">
</head>
<body>
<input id="ti1" value ="Human sees this"/>
<input id="ti2" value ="Machine sees this"/>
<button onclick="convert();">Convert!</button>
<script src="main.js"></script>
</body>
</html>
It should give you the basic idea...

H1 tag overflow the image?

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;
}

Develop Reference

JavaScript is the programming language of the Web.

how to make the clip path circle follow when scrolled - javascript

Related

How I show value of an input inside a span tag in the form of typing effect?

How to get card to resize when screen size is changed

Create a menu from a modal

How do I make this “Convert” button translate text from an input to binary?

H1 tag overflow the image?

Categories

Resources