Colors

Developer
Sarah Dunlap
Size
2,573 Kb
Views
6,072
  1. Colors Previews
  2. Colors HTML Codes
  3. Colors CSS Codes
  4. Colors JS Codes

How do I make an colors?

Change the border color of menu items when you hover over an item.. What is a colors? How do you make a colors? This script and codes were developed by Sarah Dunlap on 18 January 2023, Wednesday.

Colors Previews
IQ Test

Colors - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Colors</title> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class ="container"> <h1>COLORS</h1> <div class="nav"> <ul> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> <li><a href="#">Link 4</a></li> <li><a href="#">Link 5</a></li> </ul> </div> <div class="row"> <div class="col-md-4 skill-box" id="box1"><h3>Box 1</h3></div> <div class="col-md-4 skill-box" id="box2"><h3>Box 2</h3></div> <div class="col-md-4 skill-box" id="box3"><h3>Box 3</h3></div> </div> <div class="row"> <div class="col-md-4 skill-box" id="box4"><h3>Box 4</h3></div> <div class="col-md-4 skill-box" id="box5"><h3>Box 5</h3></div> <div class="col-md-4 skill-box" id="box6"><h3>Box 6</h3></div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Colors - Script Codes CSS Codes

body {background-color: #262626;}
.nav, .container {text-align: center;}
.nav {margin-top: 20px; }
.container { font-size: 30px; color:#fff; margin-top: 20px;
}
h1 {font-weight: 700;}
.nav ul { font-size: 25px; list-style-type: none; padding: 0; text-transform: uppercase; display: inline-block;
}
.nav li { float: left;
}
.nav li a { display: block; color: #fff; border-bottom: solid thick; padding: 14px 16px 0px 16px; text-decoration: none; border-bottom-color: #262626;
}
.nav li a:hover { border-bottom: solid thick; color: #fff; text-decoration: none; transition: border-bottom-color .3s linear;
}
.skill-box {background-color: #f4f4f4 ; border: 1px solid #262626; border-width: 0 0px 0px 10px; padding: 4%; text-align:center; font-weight: 400; margin-top: 5px;}
.skill-box h3 {font-weight: 400; font-family: 'Muli',sans-serif; font-size: 22px; text-transform:uppercase; color: #000;}
.skill-box:hover h3 {color:#262626; cursor:pointer;}
.row {padding-top: 15px;}

Colors - Script Codes JS Codes

//change colors here to the colors you want
var colors = ["#BD232A","#ffff00","#a500ff","#5db845","#FF8300"];
var colorCount = -1;
function findColor () { colorCount += 1; if (colorCount === colors.length) { colorCount = 0; } return colors[colorCount];
}
//fun squares using menu colors
function changeColor(){ var changeColor = findColor(); $(this).css('backgroundColor',changeColor);
}
function originalColor() { var id = $(this).attr('id'); $(this).css('backgroundColor', '#f4f4f4');
}
//changes color of the border bottom for Link Examples
$("li").hover(function() { var changeColor = findColor(); $(this).find("a").css("border-bottom-color", changeColor);
}, function() { $(this).find("a").removeAttr("style");
});
$('.skill-box').mouseenter(changeColor);
$('.skill-box').mouseleave(originalColor);
Colors - Script Codes
Colors - Script Codes
Home Page Home
Developer Sarah Dunlap
Username SarahDunlap
Uploaded January 18, 2023
Rating 3
Size 2,573 Kb
Views 6,072
Do you need developer help for Colors?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Sarah Dunlap (SarahDunlap) Script Codes
Name
Rotate Circle
Pomodoro Clock
Tribute
Wikipedia Search
Twitch
Angular Clock
Cat Clicker
Work in Progress
React Weather App
Random Quotes
Create amazing love letters with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!