Develop Reference

How to remove underline from li elements using CSS

I am using NextJs framework for a frontend development I am new to frontend I am trying to create navbar in which I am getting underline below menu items. I tried few CSS property but they didn't work out.
Below is my code:
Navbar.js
import Link from 'next/link';
const Navbar = () => {
return(
<nav className='navigation'>
<div className="logo">
<h1>My logo</h1>
</div>
<div className="menu">
<ul>
<li className="menu-items"><Link href="/">Home</Link></li>
<li className="menu-items"><Link href="/about">About</Link></li>
<li className="menu-items"><Link href="/contact">Contact</Link></li>
</ul>
</div>
</nav>
);
}
export default Navbar;
global.css
html,
body {
padding: 0;
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
}
.navigation {
display: flex;
justify-content: space-between;
}
.menu-items {
list-style-type: none;
display: inline;
margin-right: 20px;
background-color: coral;
color: white;
padding: 10px;
border-radius: 3px;
}
How can I achieve my desired results?

try using "Text Decoration".
.menu-items {
list-style-type: none;
display: inline;
margin-right: 20px;
background-color: coral;
color: white;
padding: 10px;
border-radius: 3px;
text-decoration: none; /* <=== add this */
}
if not work, try this.
.menu-items > a {
text-decoration: none;
}

How to make a simple toggle button work using jQuery

I am trying to build a simple toggle button to change the classes on an element and its text of the containing 'p' element.
On the first click it works just fine, but then it doesn't toggle back.
What do I miss here?
$('.disclaimer').click(function() {
if ($('#disclaimerText').text = "Disclaimer Declined") {
$('.disclaimer').addClass("disclaimerAccepted");
$('#disclaimerText').text("Disclaimer Accepted")
} else {
$('.disclaimer').removeClass("disclaimerAccepted");
$('#disclaimerText').text("Disclaimer Declined")
}
});
.disclaimer {
font-family: 'Varela Round', sans-serif;
font-weight: bold;
font-size: 0.7vw;
width: 15%;
height: 50px;
border-radius: 20px;
background-color: #f96c8a;
color: #545d7b;
}
.disclaimerAccepted {
font-family: 'Varela Round', sans-serif;
font-weight: bold;
font-size: 0.7vw;
width: 15%;
height: 50px;
border-radius: 20px;
background-color: #30e83a;
color: #545d7b;
}
#disclaimerText {
display: block;
margin: auto;
font-size: 2vw;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="disclaimer">
<p id="disclaimerText">Disclaimer Declined</p>
</div>

You can use jQuery's .toggleClass():
Add or remove one or more classes from each element in the set of matched elements, depending on either the class's presence or the value of the state argument.
Please Note: text is a jQuery method, to get the text you have to use .text() and also instead of assignment operator (=), you have to use comparison operator (== or ===) to compare the text:
$('.disclaimer').click(function() {
$('.disclaimer').toggleClass("disclaimerAccepted");
if ($('#disclaimerText').text() == "Disclaimer Declined") {
$('#disclaimerText').text("Disclaimer Accepted")
} else {
$('#disclaimerText').text("Disclaimer Declined")
}
});
.disclaimer {
font-family: 'Varela Round', sans-serif;
font-weight: bold;
font-size: 0.7vw;
width: 15%;
height: 50px;
border-radius: 20px;
background-color: #f96c8a;
color: #545d7b;
}
.disclaimerAccepted {
font-family: 'Varela Round', sans-serif;
font-weight: bold;
font-size: 0.7vw;
width: 15%;
height: 50px;
border-radius: 20px;
background-color: #30e83a;
color: #545d7b;
}
#disclaimerText {
display: block;
margin: auto;
font-size: 2vw;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="disclaimer">
<p id="disclaimerText">Disclaimer Declined</p>
</div>

You wrong at text() instead of text, and missing == instead of = is assign operator
Change from
if ($('#disclaimerText').text = "Disclaimer Declined") {
to
if ($('#disclaimerText').text() == "Disclaimer Declined") {
$('.disclaimer').click(function() {
if ($('#disclaimerText').text() == "Disclaimer Declined") {
$('.disclaimer').addClass("disclaimerAccepted");
$('#disclaimerText').text("Disclaimer Accepted")
}
else {
$('.disclaimer').removeClass("disclaimerAccepted");
$('#disclaimerText').text("Disclaimer Declined")
}
});
.disclaimer {
font-family: 'Varela Round', sans-serif;
font-weight: bold;
font-size: 0.7vw;
width: 15%;
height: 50px;
border-radius: 20px;
background-color: #f96c8a;
color: #545d7b;
}
.disclaimerAccepted {
font-family: 'Varela Round', sans-serif;
font-weight: bold;
font-size: 0.7vw;
width: 15%;
height: 50px;
border-radius: 20px;
background-color: #30e83a;
color: #545d7b;
}
#disclaimerText {
display: block;
margin: auto;
font-size: 2vw;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="disclaimer">
<p id="disclaimerText">Disclaimer Declined</p>
</div>

Javascript slide left to right

I want to:
A roll-out animation from the header's abbreviation into the written out meaning + subheading with information about that main header.
Edit: Example: S3 rolling out into "Solidify solid states" and have the subheading gradually increase in transparency right after this occurs
Expanding it from left to right when it is clicked (thus revealing the underlying information that is hidden).
What I've done in jsfiddle seems to be very choppy. (It opens the secondary text in two segments).
<link href="https://fonts.googleapis.com/css?family=Poppins&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Fira+Sans+Condensed&display=swap" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class = "s3notebox">
<h1>S3</h1>
</div>
<div class = "sub-headings">
<p>S3 notes go in this section which should flare out.</p>
</div>
CSS:
.s3notebox{
background-color: rgba(174, 214, 241, 0.5);
display: flex, inline-block;
white-space: nowrap;
height: 3em;
width: 10vw;
font-family: 'Poppins', sans-serif;
border-left: 6px solid #48C9B0;
border-radius: 2px;
}
.sub-headings{
white-space: nowrap;
height: 3em;
width: 10vw;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
border-left: 6px solid yellow;
position:absolute;
}
JS:
$(document).ready(function(){
$(".s3notebox").click(function(){
$(".sub-headings").slideToggle();
});
});
https://jsfiddle.net/snpb0gau/

I just written a solution. Here I've made some changes in your html, css & js file. Hope it will help you.
$(document).ready(function(){
$(".s3notebox").click(function(){
$("#subHeading").toggleClass('left-to-right-slide');
});
});
.s3notebox{
background-color: rgba(174, 214, 241, 0.5);
display: flex, inline-block;
white-space: nowrap;
height: 3em;
width: 10vw;
font-family: 'Poppins', sans-serif;
border-left: 6px solid #48C9B0;
border-radius: 2px;
}
.sub-headings{
white-space: nowrap;
height: 3em;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
border-left: 6px solid yellow;
position: absolute;
transition: all 0.33s ease;
left: -100%;
}
.left-to-right-slide {
left: 1%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class = "s3notebox">
<h1>S3</h1>
</div>
<div id="subHeading" class = "sub-headings">
<p>S3 notes go in this section which should flare out.</p>
</div>

Not able to trigger click event for button or anchor element on page load

<a id="mybutton" class="btn open-mod" href="#open-modal">👋 Basic CSS-Only Modal</a>
<div id="open-modal" class="modal-window">
<div>
Close
<h1>Voilà!</h1>
<div>A CSS-only modal based on the :target pseudo-class. Hope you find it helpful.</div>
<div><small>Sponsor</small></div>
<a href="https://aminoeditor.com" target="_blank">👉 Amino: Live CSS Editor for Chrome</div>
</div>
</div>
I have a simple CSS based modal which i can to show on page load rather than when user click on the button on the link.
I tried few things but it's not working i use the link as well as a button to trigger the event but it doesn't work
$(window).load(function(){
// $(".open-mod").click();
$("#mybutton")[0].click()
});
$(document).ready(function(){
// $("#mybutton").trigger( "click" );
//$("#mybutton").click();
});
Not sure where i am doing it wrong...
https://codepen.io/anon/pen/ewZYwy

You haven't written a click function for your button.
$(document).ready(function(){
$("#mybutton").click();
});
$("#mybutton").on('click', function() {
$($(this).attr('href')).fadeToggle();
})
.modal-window {
position: fixed;
background-color: rgba(255, 255, 255, 0.25);
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 999;
display: none;
pointer-events: none;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
.modal-window:target {
opacity: 1;
pointer-events: auto;
}
.modal-window > div {
width: 400px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 2em;
background: #ffffff;
}
.modal-window header {
font-weight: bold;
}
.modal-window h1 {
font-size: 150%;
margin: 0 0 15px;
}
.modal-close {
color: #aaa;
line-height: 50px;
font-size: 80%;
position: absolute;
right: 0;
text-align: center;
top: 0;
width: 70px;
text-decoration: none;
}
.modal-close:hover {
color: black;
}
/* Demo Styles */
html,
body {
height: 100%;
}
body {
font: 600 18px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
background-image: linear-gradient(to right, #7f53ac 0, #657ced 100%);
color: black;
}
a {
color: inherit;
}
.container {
display: grid;
justify-content: center;
align-items: center;
height: 100vh;
}
.modal-window div:not(:last-of-type) {
margin-bottom: 15px;
}
small {
color: #aaa;
}
.btn {
background-color: #fff;
padding: 1em 1.5em;
border-radius: 3px;
text-decoration: none;
}
.btn i {
padding-right: 0.3em;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a id="mybutton" class="btn open-mod" href="#open-modal">👋 Basic CSS-Only Modal</a>
<div id="open-modal" class="modal-window">
<div>
Close
<h1>Voilà!</h1>
<div>A CSS-only modal based on the :target pseudo-class. Hope you find it helpful.</div>
<div><small>Sponsor</small></div>
<a href="https://aminoeditor.com" target="_blank">👉 Amino: Live CSS Editor for Chrome</div>
</div>
</div>

just use
$(document).ready(function(){
$('#idofmodal').modal('show')
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

I am having issues with Brackets trying to implement css, html Not able to achieve Image 1?

enter image description here
enter image description here
I am trying to achieve, image 1 with my code, But some how I am getting image 2. Although I have separate classes for my paragraphs, the colour and font size is not changing. Does someone know why this may be?
index.html file:
<!DOCTYPE html>
<html>
<!-- Link HTML to stylesheet-->
<link href="taniaWebsite.css" type="text/css" rel="Stylesheet" />
<body class="mainpage">
<h1 class="title">Project 180 Websites</h1>
<p class="intro">
Hey my name is Tania and I suck at web development so I am going to make 180 websites until I am better... <br>
<br>
This is the first one. I will list the other ones below this one.
<br>
<br>
You can follow the project here and on the blog.
</p>
<!-- Line decoration -->
<hr class="line">
<li> <p class="days"> Website 2 - </p> </li>
<li> <p class="days">Website 1 - Homepage</p></li>
css. file:
.eyes{
position: absolute;
top: 50%;
transform: translate(-50);
width: 100%;
text-align: center;
}
.eye{
width:240px;
height: 120px;
background: #fff;
display: inline-block;
margin: 40px;
border-radius: 50%;
position: relative;
overflow:hidden;
}
.ball{
width: 40px;
height: 40px;
background: #000;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
border:15px solid #333;
}
body.mainpage {
box-shadow: 0 0 2px rgba(0, 0, 0, 0.06);
color: #545454;
margin: 0 auto;
max-width: 800px;
padding: 2em 2em 4em;
background-color:white;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
body.website2{
background-color:rosybrown;
}
.container{
text-align: center;
position:absolute;
top: 50%;
left:50%;
transform: translate(-50%, -50%);
width:100%;
}
.container span{
text-transform:uppercase;
display:block;
}
.text1{
color:white;
font-size:60px;
font-weight:700;
letter-spacing: 8px;
margin-bottom:20px;
position:relative;
animation: text 3s 1;
}
.text2{
font-size:30px;
color:indianred;
}
#keyframes text{
0% {
color:darkgray;
margin-bottom: -40px;
}
20%{
letter-spacing:25px;
margin-bottom:-40px;
}
75%{
letter-spacing:8px;
margin-bottom: -40px;
}
.line {
margin-top: 1vw;
}
h1{
color: rgb(45);
text-align: left;
font-weight: 500;
font-size: 2em;
}
p.intro {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 16.5px;
line-height: 1.5;
}
p.days {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 12px;
line-height: 1.5;
color:darksalmon;
}
li {
list-style-type: none;
}
a:hover, a:visited, a:link, a:active {
text-decoration: none; }
I have two html documents for this project, but I have having issues with the index.html page. Something in my style sheet isn't responding to the html doc. I have trying to do a 180 Website challenge and some guidance or help would be greatly appreciated!!

Give the A tags a class, like 'a-days' like this...
<li><p class="days">Website 2 - </p></li>
and then define their color like this
a.a-days:hover, a.a-days:visited, a.a-days:link, a.a-days:active {
color:darksalmon;
}
also you should enclose the LI tags inside a UL (unOrdered list) or OL (Ordered list) tag. And to hide the bullet the list-style-type applies to OL and not LI
ul {
list-style-type: none;
}
Lastly... your #keyframe style is missing a closing bracket that is why no matter what you do after it does not work.
Here is a working JSfiddle example

You are missing a closing bracket on your keyframe
75%{
letter-spacing:8px;
margin-bottom: -40px;
}
} <== you are missing this closing bracket.
I made that change and it fixed your issue.