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;
}
Related
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 header panel in my project, where burger button is designed with width 32px and height 24px.
.header {
display: flex;
font-weight: bold;
font-size: 50px;
height: 100px;
border: 1px solid black;
position: relative;
justify-content: space-between;
align-items: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>blueeye</title>
<link rel="stylesheet" href="index.css">
<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=Montserrat:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100&display=swap" rel="stylesheet">
</head>
<body>
<div class="header">
<div class="logo">
<span class="logoStart">blue</span><span class="logoEnd">eye</span>
</div>
<div class="BurgerMenu">
<div class="menuLine menuLine1"></div>
<div class="menuLine menuLine2"></div>
<div class="menuLine menuLine3"></div>
</div>
</div>
</body>
</html>
* {
font-family: 'Montserrat', sans-serif;
padding: 0;
margin: 0;
}
.header {
display: flex;
font-weight: bold;
font-size: 50px;
height: 100px;
border: 1px solid black;
position: relative;
justify-content: space-between;
align-items: center;
}
.logo {
margin: 16px;
font: normal normal bold 40px/49px Montserrat;
}
.logoStart {
color: #041731;
}
.logoEnd {
color: #1B6FE0;
}
.menuLine {
height: 6px;
width: 32px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background-color: #041731;
margin-bottom: 3px;
}
.BurgerMenu {
margin-right: 16px;
}
* {
font-family: 'Montserrat', sans-serif;
padding: 0;
margin: 0;
}
.header {
display: flex;
font-weight: bold;
font-size: 50px;
height: 100px;
border: 1px solid black;
position: relative;
justify-content: space-between;
align-items: center;
}
.logo {
margin: 16px;
font: normal normal bold 40px/49px Montserrat;
}
.logoStart {
color: #041731;
}
.logoEnd {
color: #1B6FE0;
}
.menuLine {
height: 6px;
width: 32px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background-color: #041731;
margin-bottom: 3px;
}
.BurgerMenu {
margin-right: 16px;
}
I get this in browser
but in design seems burger icon is larger.
I gave the same parameters for height and width as in design.
Header in design
what I'm doing wrong, that I can't get same view as in design?
<meta name="viewport" content="width=device-width, initial-scale=1">
I should add this in my html page
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>
Im trying to "Code" a cards still in early process of learning to code...i cant figure how to keep IMG from resizing over the headder when trying to zoom it in on hover i've been googling for hours and cant get it right...
now i know there is going to be a LOT of useless code but i still cant recognize a good code so please dont roast me on that :/
*{
padding: 0px;
margin: 0px;
box-sizing: border-box;
}
body{
font-family: 'Poppins', sans-serif;
background-color: #5c6370;
}
.cards{
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
position: relative;
top: 100px;
}
.card{
background-color: #ffffff;
position: relative;
overflow: hidden;
height: 510px;
width: 380px;
display: flex;
flex-direction: column;
border-radius: 20px;
box-shadow: 0 2rem 5rem rgba(0, 0, 0, 0.671);
text-align: center;
transition: 0.1s ease-in;
margin: 25px;
box-sizing: border-box;
}
.card:hover{
transform: scale(1.07);
}
.card img {
max-width: 100%;
height: 250px;
display: block;
border-radius: 20px 20px 0px 0px;
transition: transform .4s;
overflow: hidden;
}
.card img:hover {
transform: scale(1.2);
transform-origin: 50% 50%;
}
.card-header h1{
margin: 15px;
}
.card-bttns button{
margin: 15px;
position: relative;
top: 15px;
padding: 10px 17px;
font-family: 'Anton', sans-serif;
letter-spacing: 2px;
text-transform: uppercase;
font-size: 20px;
border: 2px solid black;
cursor: pointer;
background-color: #5c637000;
transition: 0.1s ease-in;
}
.card-bttns button:hover{
background-color: black;
color: #ffffff;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="/css/style.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Anton&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
<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>Cards</title>
</head>
<body>
<section class="cards-top">
<div class="cards">
<div class="card">
<img src='https://images.unsplash.com/photo-1519681393784-d120267933ba?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80', alt='Snowy Mountains'>
<div class="card-header">
<h1>Pretty Mountain</h1>
</div>
<div class="card-info"><p>Very Much Snowy i like snow <br>i like to throw snowballs wow its cool <br>
do zou like to throw snowballs? Cause i Do!</p></div>
<div class="card-bttns">
<button type="submit">Follow</button>
<button type="submit">Contact</button>
</div>
</div>
</div>
</section>
</body>
</html>
In your case, adding overflow: hidden to the photo doesn't make sense. You need to add this to the div which will contain the photo. Then the image will increase but will not go beyond the div - of course you have to give the constant height.
Try this code:
I added new div to image.
Added css styles to class card-img-hld
*{
padding: 0px;
margin: 0px;
box-sizing: border-box;
}
body{
font-family: 'Poppins', sans-serif;
background-color: #5c6370;
}
.cards{
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
position: relative;
top: 100px;
}
.card{
background-color: #fff;
position: relative;
overflow: hidden;
height: 510px;
width: 380px;
display: flex;
flex-direction: column;
border-radius: 20px;
box-shadow: 0 2rem 5rem rgba(0, 0, 0, 0.671);
text-align: center;
transition: 0.1s ease-in;
margin: 25px;
box-sizing: border-box;
}
.card:hover{
transform: scale(1.07);
}
.card img {
width: 100%;
height: 250px;
display: block;
border-radius: 20px 20px 0px 0px;
transition: transform .4s;
object-fit: cover;
}
.card img:hover {
transform: scale(1.2);
}
.card-header h1{
margin: 15px;
}
.card-img-hld {
width: 100%;
overflow: hidden;
height: 250px;
}
.card-bttns button{
margin: 15px;
position: relative;
top: 15px;
padding: 10px 17px;
font-family: 'Anton', sans-serif;
letter-spacing: 2px;
text-transform: uppercase;
font-size: 20px;
border: 2px solid black;
cursor: pointer;
background-color: #5c637000;
transition: 0.1s ease-in;
}
.card-bttns button:hover{
background-color: black;
color: #ffffff;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="/css/style.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Anton&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
<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>Cards</title>
</head>
<body>
<section class="cards-top">
<div class="cards">
<div class="card">
<div class="card-img-hld">
<img src='https://images.unsplash.com/photo-1519681393784-d120267933ba?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80', alt='Snowy Mountains'>
</div>
<div class="card-header">
<h1>Pretty Mountain</h1>
</div>
<div class="card-info"><p>Very Much Snowy i like snow <br>i like to throw snowballs wow its cool <br>
do zou like to throw snowballs? Cause i Do!</p></div>
<div class="card-bttns">
<button type="submit">Follow</button>
<button type="submit">Contact</button>
</div>
</div>
</div>
</section>
</body>
</html>
Trying to get a main logo and then an enter button to fade in when this web page loads. Tried the below code in addition to taking the divs out after the code, but no luck.
Any ideas? Thank you in advance.
<!doctype html>
<html>
<head>
<title>The Webspace of Reality</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(function() {
$("#mainImage").hide().fadeIn("slow", function() {
$("#enterButton").hide().fadeIn("slow")
});
});
</script>
<div id="mainImage">
</div>
<div id="enterButton"></div>
</body>
</html>
#mainImage img {
width: 550px;
display: block;
position: static;
margin-right: auto;
margin-left: auto;
}
#enterButton button {
background-color: black;
font-family: Futura, Helvetica, sans-serif;
font-size: 28px;
border-radius: 10px;
height: 50px;
width: 200px;
color: white;
margin-right: auto;
margin-left: auto;
display: block;
position: static;
margin-top: 20px;
border-style: none;
}
Your problem is in css. The commas are added after name selectors:
#mainImage, img {
width: 550px;
display: block;
position: static;
margin-right: auto;
margin-left: auto;
}
#enterButton, button {
background-color: black;
font-family: Futura, Helvetica, sans-serif;
font-size: 28px;
border-radius: 10px;
height: 50px;
width: 200px;
color: white;
margin-right: auto;
margin-left: auto;
display: block;
position: static;
margin-top: 20px;
border-style: none;
}
Hope this help.
Try this in your script tags:
$("#mainImage, #enterButton").hide();
$("#mainImage").fadeIn("slow", function() {
$("#enterButton").fadeIn("slow");
});
Here's the jsfiddle.