Hello!
I'm trying to make a terminal like interface, similar to PowerShell or Command Prompt.
I want to highlight the command name that the user inputs.
What I want in to look like:
Is there a possible way to do this with Javascript, CSS and HTML?
I am able to highlight the first word but it looks like this:
I took some code from another post and here is what it looks like for me:
The post: Set background-color of first word in textbox?
//=== MAIN ===\\
$(document).on(
"keydown keyup change",
".terminal-input-area #terminal-input",
function () {
if ($(this).val().length && $(this).val().split(" ").length) {
$(this)
.closest(".terminal-input-area")
.find(".first-word")
.html($(this).val().split(" ")[0])
.show();
} else {
$(this).closest(".terminal-input-area").find(".first-word").hide();
}
}
);
$(document).on("click", ".terminal-input-area .first-word", function () {
$(this).closest(".terminal-input-area").find("#terminal-input").focus();
});
/* ===== FONTS ==== */
#font-face {
font-family: "Fira Code";
src: url("fonts/FiraCode-Regular.ttf");
}
#font-face {
font-family: "Fira Code Retina";
src: url("fonts/FiraCode-Retina.ttf");
}
#font-face {
font-family: "Fira Code Light";
src: url("fonts/FiraCode-Light.ttf");
}
#font-face {
font-family: "Fira Code Medium";
src: url("fonts/FiraCode-Medium.ttf");
}
#font-face {
font-family: "Fira Code Semi-Bold";
src: url("fonts/FiraCode-SemiBold.ttf");
}
#font-face {
font-family: "Fira Code Bold";
src: url("fonts/FiraCode-Bold.ttf");
}
/* ===== VARIABLES ==== */
:root {
--background: #171717;
--text: #aaa;
}
/* ===== STYLES ==== */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
height: 100vh;
}
.terminal-container {
background: var(--background);
cursor: text;
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
}
.terminal-content {
color: var(--text);
display: flex;
flex-direction: column;
font-family: "Fira Code";
font-size: 15px;
line-height: 20px;
padding: 20px;
white-space: pre-wrap;
}
.terminal-input-area {
align-items: center;
display: inline-flex;
width: 100%;
}
.terminal-prompt {
margin-right: 5px;
}
#terminal-input {
background: transparent;
border: 0;
color: var(--text);
font-family: inherit;
font-size: inherit;
white-space: pre-wrap;
outline: none;
width: 100%;
}
.first-word {
color: #F0BF81;
}
<!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>coolterminalthing</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="terminal-container" tabindex="-1">
<div class="terminal-content">
<div class="terminal-input-area">
<span class="terminal-prompt">></span>
<div class="form-control first-word"></div>
<input name="input" id="terminal-input" spellcheck="false" autocapitalize="none" autocomplete="off" value="">
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="js/main.js" defer></script>
<script src="js/prompt.js" defer></script>
</body>
</html>
Thanks.
This will help you!
//=== MAIN ===\\
$("#terminal-input").keyup(
function () {
const [first,...second] = $(this).val().split(" ");
const f = `${first.length?first+" ":""}`
$(this)
.closest(".terminal-input-area")
.find("#first")
.html(f);
$(this)
.closest(".terminal-input-area")
.find("#second")
.html(`${second?second.join(" "):''}`);
}
);
$(document).on("click", ".terminal-input-area .first-word", function () {
$(this).closest(".terminal-input-area").find("#terminal-input").focus();
});
/* ===== FONTS ==== */
#font-face {
font-family: "Fira Code";
src: url("fonts/FiraCode-Regular.ttf");
}
#font-face {
font-family: "Fira Code Retina";
src: url("fonts/FiraCode-Retina.ttf");
}
#font-face {
font-family: "Fira Code Light";
src: url("fonts/FiraCode-Light.ttf");
}
#font-face {
font-family: "Fira Code Medium";
src: url("fonts/FiraCode-Medium.ttf");
}
#font-face {
font-family: "Fira Code Semi-Bold";
src: url("fonts/FiraCode-SemiBold.ttf");
}
#font-face {
font-family: "Fira Code Bold";
src: url("fonts/FiraCode-Bold.ttf");
}
/* ===== VARIABLES ==== */
:root {
--background: #171717;
--text: #aaa;
}
/* ===== STYLES ==== */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
height: 100vh;
}
.terminal-container {
background: var(--background);
cursor: text;
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
}
.terminal-content {
color: var(--text);
display: flex;
flex-direction: column;
font-family: "Fira Code";
font-size: 15px;
line-height: 20px;
padding: 20px;
white-space: pre-wrap;
}
.terminal-input-area {
align-items: center;
display: inline-flex;
width: 100%;
}
.terminal-prompt {
margin-right: 5px;
}
#terminal-input {
background: transparent;
border: 0;
font-family: inherit;
font-size: inherit;
white-space: pre-wrap;
outline: none;
width: 100%;
position: absolute;
left: 37px;
color: transparent;
caret-color: white;
}
#first {
color: #F0BF81;
}
<!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>coolterminalthing</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="terminal-container" tabindex="-1">
<div class="terminal-content">
<div class="terminal-input-area">
<span class="terminal-prompt">></span>
<span id ="first"></span>
<p id="second"></p>
<input name="input" id="terminal-input" spellcheck="false" autocapitalize="none" autocomplete="off" value="">
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="js/main.js" defer></script>
<script src="js/prompt.js" defer></script>
</body>
</html>
Related
I wanted to know how I can make a nav menu I made fill out the whole page. A simple solution I thought of was to put it on absolute position and set top, left, bottom, right to 0. However, this caused it to go over the content and made the whole page a different color. Here's my HTML/CSS:
//JS
function myFunction() {
var x = document.getElementById("nav-links");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
/* CSS */
body {
font-family: 'Roboto', Arial, sans-serif;
background: white;
}
.topnav {
overflow: hidden;
background-color: #333;
position: relative;
width: 100%;
}
.topnav #nav-links {
display: none;
}
.topnav a {
color: white;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
display: block;
}
.topnav a.icon {
background: black;
display: block;
position: absolute;
right: 0;
top: 0;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.active {
background-color: #b47b5a;
color: white;
}
.body {
display: flex;
margin: auto;
min-height: 300vh;
}
<!--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">
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="script/server.js"></script>
<title>Hello</title>
</head>
<body>
<header>
<div class="topnav">
Hello World!
<div id="nav-links">
Home
Contact
About
</div>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
</header>
<div class="body">
<h1>Hello World!</h1>
</div>
<script src="script/script.js"></script>
</body>
</html>
I have tried every method I could think of and search of, but can't really pull it off.
If you try to make the topnav position to absolute, it is the correct way. You just must to adjust the padding or margin of the content below the topnav or set the padding top to the body so the topnav is not to go over the content.
//JS
function myFunction() {
var x = document.getElementById("nav-links");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
/* CSS */
body {
font-family: 'Roboto', Arial, sans-serif;
background: white;
padding-top: 50px;
}
.topnav {
overflow: hidden;
background-color: #333;
position: absolute;
z-index: 999;
top: 0;
left: 0;
right: 0;
width: 100%;
}
.topnav #nav-links {
display: none;
}
.topnav a {
color: white;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
display: block;
}
.topnav a.icon {
background: black;
display: block;
position: absolute;
right: 0;
top: 0;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.active {
background-color: #b47b5a;
color: white;
}
.body {
display: flex;
margin: auto;
min-height: 300vh;
}
<!--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">
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="script/server.js"></script>
<title>Hello</title>
</head>
<body>
<header>
<div class="topnav">
Hello World!
<div id="nav-links">
Home
Contact
About
</div>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
</header>
<div class="body">
<h1>Hello World!</h1>
</div>
<script src="script/script.js"></script>
</body>
</html>
Or you can make the topnav width to 100vw so the topnav will fully contain the width of your device, and set the body margin and padding to 0. But i not recomend to use this because sometimes it can make your website have horizontal scrolling, so the best way is still to use the first answer.
//JS
function myFunction() {
var x = document.getElementById("nav-links");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
/* CSS */
body {
font-family: 'Roboto', Arial, sans-serif;
background: white;
padding: 0;
margin: 0;
}
.topnav {
overflow: hidden;
background-color: #333;
position: relative;
width: 100vw;
}
.topnav #nav-links {
display: none;
}
.topnav a {
color: white;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
display: block;
}
.topnav a.icon {
background: black;
display: block;
position: absolute;
right: 0;
top: 0;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.active {
background-color: #b47b5a;
color: white;
}
.body {
display: flex;
margin: auto;
min-height: 300vh;
}
<!--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">
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="script/server.js"></script>
<title>Hello</title>
</head>
<body>
<header>
<div class="topnav">
Hello World!
<div id="nav-links">
Home
Contact
About
</div>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
</header>
<div class="body">
<h1>Hello World!</h1>
</div>
<script src="script/script.js"></script>
</body>
</html>
The content is divided into different sections. I have disabled the vertical direct-scrolling, page can be scrolled using the submit buttons only. Each sections height has been set to 100vh to take up all the available viewport-height. This works great on desktops as well as mobile devices. But, being a form, the problem arises on the mobile devices when you click inside the input boxes and the in-built keyboard pops up. The in-built keyboard takes up almost 50% screen size ant the content (section) is scrolled/moved unusually. Even if the section remains at it place, it is slightly (maybe by 100px) scrolled up or down if you close the keyboard, making it look ugly. Works good if there's only one section but there will always be more than 10 sections. Is there any other approach to make this successful. I can do this with ajax, but want it to be a single-page (which can be scrolled using those buttons). Or is there any fix available so the content doesnot moves up or down if the mobile keyboard opens or closes?
Thankyou
~Vivek
#import url('https://fonts.googleapis.com/css2?family=Inter:wght#400;500;600;700;800;900&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Exo:wght#900&family=Inter:wght#400;500;600;700;800;900&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Baloo+Da+2:wght#800&family=Exo:wght#900&family=Inter:wght#400;500;600;700;800;900&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Fira+Sans&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
}
:focus {
outline: none;
}
:root {
/* Colors */
--primary: #FF7300;
--primary-light: #FFE3CC;
--secondary: #334762;
--white: #ffffff;
/* Fonts */
--font-one: 'Poppins', sans-serif;
--font-two: 'Exo', sans-serif;
--font-three: 'Baloo Da 2', cursive;
--font-four: 'Fira Sans', sans-serif;
--font-five: 'Lato', sans-serif;
}
::selection {
background: var(--white);
color: var(--primary);
}
body {
overflow-y: hidden;
background-color: var(--primary-light);
font-family: var(--font-four);
color: var(--secondary);
font-size: 16px;
}
section {
width: 100%;
height: 100vh;
}
.container {
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
gap: 1.25rem;
align-items: center;
}
/* Questions' Wrapper */
.question__wrapper {
max-width: 90%;
display: flex;
flex-direction: column;
flex-wrap: wrap;
align-items: flex-start;
gap: 1rem;
}
#media (max-width: 576px) {
.question__wrapper {
gap: .9rem;
}
}
.container input.text-answer {
font-size: 1.125rem;
color: var(--primary);
font-weight:700;
min-width: 400px;
height: 40px;
border: none;
border-bottom: 3px solid var(--secondary);
background-color: var(--bg-color);
}
#media (max-width: 767px) {
.container input.text-answer {
min-width: unset;
}
}
.small-button-container {
position: absolute;
right: 30px;
bottom: 30px;
}
.small-button {
font-size: 1.23rem;
padding: 10px 20px;
background-color: var(--primary);
text-decoration: none;
color: var(--white);
}
.submit-button {
display: block;
max-width: 100px;
border-radius: 3px;
text-align: center;
padding: .4rem .8rem;
cursor: pointer;
font-family: var(--font-three);
background-color: var(--primary);
color: var(--white);
font-size: 1.2rem;
font-weight: 900;
text-decoration: none;
}
#media (max-width: 767px) {
.submit-button {
margin-top: 20px;
}
}
<!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">
<link rel="stylesheet" href="style.css">
<title>Title</title>
</head>
<body>
<section id="name">
<div class="container">
<div class="logo">
<img src="logo.svg" alt="">
</div>
<div class="question__wrapper">
<div class="question">What is your Name?</div>
<input type="text" class="text-answer" placeholder="Type here" tabindex="1" required>
Submit
<div class="small-button-container">
🠗
</div>
</div>
</div>
</section>
<section id="email">
<div class="container">
<div class="logo">
<img src="logo.svg" alt="">
</div>
<div class="question__wrapper">
<div class="question">What is your Email?</div>
<input type="text" class="text-answer" placeholder="Type here" tabindex="1" required>
Submit
<div class="small-button-container">
🠕
🠗
</div>
</div>
</div>
</section>
</body>
</html>
In this project, my aim is to change emoji when I click and also I want "it wasn't funny bro" text to show up when I click to the emoji. When I click to the emoji it changes, but the text does not show up. I followed the same steps, it works for emojis but doesn't work for text. I could not figure out why it's not working.
My code looks like this:
const beginningFace = document.querySelector(".beginning");
const reactionFace = document.querySelector(".reaction");
const beginningText = document.querySelector(".beginningT");
const reactionTextFirst = document.querySelector(".reactionT-first");
const reactionTextSecond = document.querySelector(".reactionT-second");
beginningFace.addEventListener('click',()=>{
if(reactionFace.classList.contains('reaction')){
reactionFace.classList.add('active');
beginningFace.classList.remove('active');
}
});
beginningText.addEventListener('click',()=>{
if(reactionTextFirst.classList.contains('reactionT-first') && reactionTextSecond.classList.contains('reactionT-second')){
reactionTextFirst.classList.add('active');
reactionTextSecond.classList.add('active');
beginningFace.classList.remove('active');
}
});
#import url('https://fonts.googleapis.com/css2?family=Mr+Dafoe&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Exo:wght#900&display=swap');
body, html {
width: 100%;
height: 100%;
margin: 0;
overflow: hidden;
background-color: #202076;
}
body {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
perspective: 700px;
}
.beginningT {
display: none;
}
.reactionT-first {
display:none;
position: relative;
font-family: 'Exo';
font-size: 5em;
margin: 0;
transform: skew(-15deg);
letter-spacing: 0.03em;
}
.reactionT-second{
display: none;
font-family: 'Mr Dafoe';
margin: 0;
font-size: 5.5em;
margin-top: -0.6em;
color: white;
text-shadow: 0 0 0.05em #fff, 0 0 0.2em #fe05e1, 0 0 0.3em #fe05e1;
transform: rotate(-7deg);
}
.emoji{
font-size: 18rem;
cursor: pointer;
user-select: none;
}
.beginning{
display: none;
}
.reaction{
display: none;
}
.active{
display: block;
}
<!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">
</head>
<body>
<div class="emoji beginning active">😃</div>
<div class="emoji reaction">😐</div>
<div class ="text beginningT active" style="font-size: 2rem; font-style: italic; font-family: Verdana, Geneva, Tahoma, sans-serif; color: #F98299;">My reaction after your joke↑ (click to see it!)</div>
<div class="text reactionT-first">IT WASN'T</div>
<div class="text reactionT-second">FUNNY BRO</div>
<script src="app.js"></script>
</body>
</html>
If you want your other text to show up when you click on the emoji, you have to do all the logic inside beginningFace.addEventListener, instead of using two diffent event listeners. I moved the logic, and removed the second click listener.
These lines were missing in the first click listener
reactionTextFirst.classList.add('active');
reactionTextSecond.classList.add('active');
beginningText.classList.remove('active');
const beginningFace = document.querySelector(".beginning");
const reactionFace = document.querySelector(".reaction");
const beginningText = document.querySelector(".beginningT");
const reactionTextFirst = document.querySelector(".reactionT-first");
const reactionTextSecond = document.querySelector(".reactionT-second");
beginningFace.addEventListener('click',()=>{
if(reactionFace.classList.contains('reaction')){
reactionFace.classList.add('active');
beginningFace.classList.remove('active');
reactionTextFirst.classList.add('active');
reactionTextSecond.classList.add('active');
beginningText.classList.remove('active');
}
});
#import url('https://fonts.googleapis.com/css2?family=Mr+Dafoe&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Exo:wght#900&display=swap');
body, html {
width: 100%;
height: 100%;
margin: 0;
overflow: hidden;
background-color: #202076;
}
body {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
perspective: 700px;
}
.beginningT {
display: none;
}
.reactionT-first {
display:none;
position: relative;
font-family: 'Exo';
font-size: 5em;
margin: 0;
transform: skew(-15deg);
letter-spacing: 0.03em;
}
.reactionT-second{
display: none;
font-family: 'Mr Dafoe';
margin: 0;
font-size: 5.5em;
margin-top: -0.6em;
color: white;
text-shadow: 0 0 0.05em #fff, 0 0 0.2em #fe05e1, 0 0 0.3em #fe05e1;
transform: rotate(-7deg);
}
.emoji{
font-size: 18rem;
cursor: pointer;
user-select: none;
}
.beginning{
display: none;
}
.reaction{
display: none;
}
.active{
display: block;
}
<!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">
</head>
<body>
<div class="emoji beginning active">😃</div>
<div class="emoji reaction">😐</div>
<div class ="text beginningT active" style="font-size: 2rem; font-style: italic; font-family: Verdana, Geneva, Tahoma, sans-serif; color: #F98299;">My reaction after your joke↑ (click to see it!)</div>
<div class="text reactionT-first">IT WASN'T</div>
<div class="text reactionT-second">FUNNY BRO</div>
<script src="app.js"></script>
</body>
</html>
hey guys i am new to javascript and i am trying to figure out how to change the background image of my section while hovering the respective texts. currently i want to load 3 different backgrounds but i have issues trying to figure out. below is the code im using .do lmk if u have any suggestions. thanks in advance .
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>3d model</title>
<style>
#import url('https://fonts.googleapis.com/css2?family=Krona+One&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* custom webkit scrollbar
*/
html {
-ms-scroll-snap-type: y mandatory;
scroll-snap-type: y mandatory;
}
body {
overflow-x: hidden;
font-family: 'Krona One', sans-serif;
background-color: rgb(0, 0, 0);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
canvas {
position: fixed;
top: 0;
left: 0;
z-index: -1;
pointer-events: none;
}
.section {
width: 100%;
height: 100vh;
display: grid;
place-items: center;
scroll-snap-align: center;
user-select: none;
}
h1 {
font-weight: 500;
font-size: 5vw;
text-transform: uppercase;
color: white;
line-height: 100%;
text-align: center;
}
h2 {
font-weight: 500;
font-size: 6vw;
text-transform: uppercase;
-webkit-text-stroke: 1px white;
color: transparent;
}
</style>
</head>
<section class="section">
<h1 id="gold">Gold</h1>
<h2 id="silver">Silver</h2>
<h1 id="blue">Light Blue</h1>
</section>
</body>
</html>
First you need to get the element and then you need to set the backgroundImage property to that element like
var goldElement = document.getElementById('gold');
goldElement.addEventListener('mouseover'), (event)=> { `goldElement.style. backgroundImage = "url('path_to_image')" ` }
And change the background to normal when mouse leave.
goldElement.addEventListener('mouseleave', (event)=> { `goldElement.style. backgroundImage = "url('')" ` });
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>3d model</title>
<style>
#import url('https://fonts.googleapis.com/css2?family=Krona+One&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* custom webkit scrollbar
*/
html {
-ms-scroll-snap-type: y mandatory;
scroll-snap-type: y mandatory;
}
body {
margin:0;
padding:0;
overflow-x: hidden;
font-family: 'Krona One', sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
canvas {
position: fixed;
top: 0;
left: 0;
z-index: -1;
pointer-events: none;
}
.section {
width: 100%;
height: 100vh;
display: grid;
place-items: center;
scroll-snap-align: center;
user-select: none;
background-color: rgb(0, 0, 0);
}
h1 {
font-weight: 500;
font-size: 5vw;
text-transform: uppercase;
color: white;
line-height: 100%;
text-align: center;
}
h2 {
font-weight: 500;
font-size: 6vw;
text-transform: uppercase;
-webkit-text-stroke: 1px white;
color: transparent;
}
</style>
</head>
<body>
<section class="section">
<h1 id="gold" onMouseOver="gold()" onMouseOut="leave()">Gold</h1>
<h2 id="silver" onMouseOver="silver()" onMouseOut="leave()">Silver</h2>
<h1 id="blue" onMouseOver="blue()" onMouseOut="leave()">Light Blue</h1>
</section>
<script>
var sect = document.querySelector('section');
function gold(){
sect.style.background = '#FFD700';
}
function silver(){
sect.style.background = '#C0C0C0';
}
function blue(){
sect.style.background = '#ADD8E6';
}
function leave(){
sect.style.background = '#000000';
}
</script>
</body>
</html>
If you want to stay on the color just hovered, then remove the leave function from the above code and from the Tags too.
You can use the :hover property in CSS to add styles only whenever the mouse is over the specific HTML element; and to add an image you can use the CSS property background: url(URL_HERE);
For example, your gold ID can be set to display a background by creating a specific :hover property as such:
#gold:hover {
background: url(" https://via.placeholder.com/600x200.png/FFFF00/");
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>3d model</title>
<style>
#import url('https://fonts.googleapis.com/css2?family=Krona+One&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* custom webkit scrollbar
*/
html {
-ms-scroll-snap-type: y mandatory;
scroll-snap-type: y mandatory;
}
body {
overflow-x: hidden;
font-family: 'Krona One', sans-serif;
background-color: rgb(0, 0, 0);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
canvas {
position: fixed;
top: 0;
left: 0;
z-index: -1;
pointer-events: none;
}
.section {
width: 100%;
height: 100vh;
display: grid;
place-items: center;
scroll-snap-align: center;
user-select: none;
}
h1 {
font-weight: 500;
font-size: 5vw;
text-transform: uppercase;
color: white;
line-height: 100%;
text-align: center;
}
h2 {
font-weight: 500;
font-size: 6vw;
text-transform: uppercase;
-webkit-text-stroke: 1px white;
color: transparent;
}
#gold:hover {
background: url(" https://via.placeholder.com/600x200.png/FFFF00/");
}
#silver:hover {
background: url(" https://via.placeholder.com/600x200.png/CCCCCC/");
}
#blue:hover {
background: url(" https://via.placeholder.com/600x200.png/0000FF/");
}
</style>
</head>
<body>
<section class="section">
<h1 id="gold">Gold</h1>
<h2 id="silver">Silver</h2>
<h1 id="blue">Light Blue</h1>
</section>
</body>
</html>
For every image, you would need to provide a separate class - if you don't want this behaviour, consider using JavaScript instead to dynamically adjust the background image.
This is a 'To-Do List' project that I want to include in my portfolio. The text typed into the box starts at the bottom and keeps putting every additional 'to-do' text under the last one so it isn't legible. I'd like for the text to start at the top of the laptop screen that is on the page. Please click the link and enter any text twice and you will see my error.
https://nicoleirene.github.io/js-exercise-2/
My code is below.
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/style.css">
<title>JS Exercise 2</title>
</head>
<body>
<h1>Lets Do This</h1>
<form>
<label for="user-input" >Type your to do:</label>
<div class="wrapper">
<input type="text" name="user-input" id="user-input" placeholder="Enter To Do!">
<button type="submit" id="user-submit">Add To Do!</button>
</div>
</form>
<ul id="to-do-list" class="to-do-list">
</ul>
<!-- Make sure script is loaded at the bottom-->
<script src="js/app.js"></script>
</body>
</html>
JS
var userSubmit = document.querySelector('#user-submit');
var toDoList = document.querySelector('#to-do-list');
function addToDo(event){
event.preventDefault();
var userInput = document.querySelector('#user-input');
if(userInput.value === ''){
return false;
}
toDoList.innerHTML = '<li><i class="fa fa-window-close close-to-do" aria-hidden="true"></i>' + userInput.value + '</li>' + toDoList.innerHTML;
userInput.value = '';
}
function removeToDo(event){
if(event.target.classList.contains('close-to-do')) {
var li = event.target.parentElement;
toDoList.removeChild(li);
}
}
toDoList.addEventListener('click', removeToDo, false);
userSubmit.addEventListener('click', addToDo, false);
CSS
#import url('https://fonts.googleapis.com/css?family=Raleway');
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body{
font-family: 'Raleway', sans-serif;
background-color: #FFF;
background-image: url("../images/pixel-open-front.png");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
color: #000;
}
h1{
text-align: center;
padding:;
background-color: blue;
color:#FFF;
}
label{
display: block;
margin:right;
text-align: center;
background-color: red;
color:white;
}
input{
/*display:block;
margin:auto;*/
}
.wrapper{
text-align: center;
}
button{
color:white;
background-color:red;
border:none;
padding: 5px;
margin-top: 5px;
}
ul{
text-align: center;
padding: 300px;
list-style: none;
color:red;
}
.close-to-do{
display: inline-block;
margin-right: 10px;
}
I would set it up differently. Padding may cause problems with different screen sizes. Below I put the laptop as the background for the list.
var userSubmit = document.querySelector('#user-submit');
var toDoList = document.querySelector('#to-do-list');
function addToDo(event) {
event.preventDefault();
var userInput = document.querySelector('#user-input');
if (userInput.value === '') {
return false;
}
toDoList.innerHTML = '<li><i class="fa fa-window-close close-to-do" aria-hidden="true"></i>' + userInput.value + '</li>' + toDoList.innerHTML;
userInput.value = '';
}
function removeToDo(event) {
if (event.target.classList.contains('close-to-do')) {
var li = event.target.parentElement;
toDoList.removeChild(li);
}
}
toDoList.addEventListener('click', removeToDo, false);
userSubmit.addEventListener('click', addToDo, false);
#import url('https://fonts.googleapis.com/css?family=Raleway');
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Raleway', sans-serif;
background-color: #FFF;
color: #000;
}
h1 {
text-align: center;
padding: ;
background-color: blue;
color: #FFF;
}
label {
display: block;
margin: right;
text-align: center;
background-color: red;
color: white;
}
input {
/*display:block;
margin:auto;*/
}
.wrapper {
text-align: center;
}
button {
color: white;
background-color: red;
border: none;
padding: 5px;
margin-top: 5px;
}
ul {
text-align: center;
padding-top: 100px; /* same as top background */
list-style: none;
color: red;
}
ul:before {
content: url(https://nicoleirene.github.io/js-exercise-2/images/pixel-open-front.png);
position: absolute;
top: 100px; /* same as padding top */
left: 80px;
}
.close-to-do {
display: inline-block;
margin-right: 10px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<h1>Lets Do This</h1>
<form>
<label for="user-input">Type your to do:</label>
<div class="wrapper">
<input type="text" name="user-input" id="user-input" placeholder="Enter To Do!">
<button type="submit" id="user-submit">Add To Do!</button>
</div>
</form>
<ul id="to-do-list" class="to-do-list"></ul>
As mentioned in my comments, padding on Ul element is causing it to display at the middle of the screen.
Adjust padding to fix your issue.
For responsive design , please use media queries to display text properly