Hover (Change colour of RollOver)

Engaged ,
Jan 13, 2021 Jan 13, 2021

Copy link to clipboard

Copied

How can I change the colour of a RollOver during Hover, when I press the word 'Portfolio' so it changes from "White" to "Yellow" when touched.

 

Where about in the below code would I add the Hover/RollOver for colour change?

 

<!DOCTYPE html>
<html><head>
<meta charset="UTF-8">
<title>Ben</title>
 
<style>
img {
  display: block;
  margin-left: auto;
  margin-right: auto;
 
}
h1 {
  background-color: ;
  color: white;
}
 
h2 {
  background-color: ;
  color: white
}
 
body {
font-family: 'DotMatrix',sans-serif, sans-serif;
font-size: 7px;
color: #000;
position: relative;
line-height: 24px;
line-height: 1.5em;
background: #000;
 
-webkit-font-smoothing: antialiased;
 
 
</style>
</head>
<body>
 
<style>A {text-decoration: none;} </style>
 
<a href="Ben.html" >
<h1>PORTFOLIO</h1>
</a>
<h1>ABOUT</h1>
 
 <img src="NIKE Air Tailwind 79.jpg"/"NIKE" width="229" style="width:37%">
 
</body>
</html>
 
 
 

Views

181

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jan 13, 2021 Jan 13, 2021

Copy link to clipboard

Copied

Just add the below to your css styles, insert between the css <style> </style> block.

 

a:hover {

color: yellow;

}

 

This will turn every link on your page yellow on hover.

 

If you only want a set of specific links in a specific <div> to turn yellow on hover you would target only that div:

 

.myDivName a:hover {

color: yellow;

}

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Engaged ,
Jan 13, 2021 Jan 13, 2021

Copy link to clipboard

Copied

I'm not sure what I'm doing wrong, as it's not working.

 

Do I create a separate <style></style> or add it to to the already existing style in my HTML

 

<!DOCTYPE html>
<html><head>
<meta charset="UTF-8">
<title>Ben</title>
 
<style>
img {
  display: block;
  margin-left: auto;
  margin-right: auto;
 
}
h1 {
  background-color: ;
  color: white;
}
 
h2 {
  background-color: ;
  color: white
}
 
body {
font-family: 'DotMatrix',sans-serif, sans-serif;
font-size: 7px;
color: #000;
position: relative;
line-height: 24px;
line-height: 1.5em;
background: #000;
 
-webkit-font-smoothing: antialiased;

 

a:hover {

color: yellow;

}

</style>
</head>
<body>
 
<style>A {text-decoration: none;} </style>
 
<a href="Ben.html" >
<h1>PORTFOLIO</h1>
</a>
<h1>ABOUT</h1>
 
 <img src="NIKE Air Tailwind 79.jpg"/"NIKE" width="229" style="width:37%">
 
</body>
</html>
 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jan 13, 2021 Jan 13, 2021

Copy link to clipboard

Copied

Well your body css is missing a closing } see in red below:

 

body {
font-family: 'DotMatrix',sans-serif, sans-serif;
font-size: 7px;
color: #000;
position: relative;
line-height: 24px;
line-height: 1.5em;
background: #000;

-webkit-font-smoothing: antialiased;

}

 

a:hover {

color: yellow;

}

 

 

 

You dont want links surrounded by <h1></h1> tags, reserve heading tags for headers.

 

Try:

 

<a href="Ben.html" >PORTFOLIO</a>

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jan 13, 2021 Jan 13, 2021

Copy link to clipboard

Copied

It goes without saying that HOVER has no effect on touch screen devices which the majority of site visitors are using these days. So more than half of users will probably never see the a:hover effect. 

 

Experienced developers would NEVER waste precious heading tags on navigation.  <h1> headings are intended for the most important keywords on your page.  That's usually your site or business name, not navigation links.  Also <h1> is rarely if ever used more than 1 x per page.

 

The way you structure content in the markup is ranked by search engines.  And since search engines drive traffic to your site, you want to get this right the first time. Google's SEO starter guide is a MUST READ for anyone new to building web sites.

https://developers.google.com/search/docs/beginner/seo-starter-guide

 

Below is a quick code example to get you started in the right direction.

image.png

 

 

 

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Ben's Awesome Portfolio ~ since 2021 </title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* { box-sizing: border-box; }
body {
width: 96%;
margin: 0 auto;
font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", "monospace";
background: #222;
color: antiquewhite;
/**scale fonts to fit any size screen**/
font-size: calc(14px + 1vw);
line-height: calc(1.2em + 1.5vw);
}
header img {
vertical-align: baseline;
margin: 0 auto;
max-width: 100%;
}
nav li {
list-style-type: none;
text-align: right;
font-size: 1.75rem;
text-transform: uppercase;
letter-spacing: 0.16rem;
line-height: 1;
}
nav li a {
color: #FFF;
font-weight: bold;
text-decoration: none;
}
nav li a:hover, 
nav li a:active, 
nav li a:focus {
color: yellow;
text-decoration: underline;
}
</style>
</head>

<body>
<header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<h1>Ben's Awesome Portfolio</h1>
<h2>Home Page</h2>
<img src="https://dummyimage.com/1200x400" alt="placeholder">
</header>
<main>
<h3>Heading 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam magnam, praesentium asperiores. Et temporibus facilis, vel aliquam nostrum nam distinctio iure nisi consequuntur minus ea explicabo voluptate quo debitis. Fugiat!</p>
<hr>
<h3>Heading 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam magnam, praesentium asperiores. Et temporibus facilis, vel aliquam nostrum nam distinctio iure nisi consequuntur minus ea explicabo voluptate quo debitis. Fugiat!</p>
<hr>
<h3>Heading 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam magnam, praesentium asperiores. Et temporibus facilis, vel aliquam nostrum nam distinctio iure nisi consequuntur minus ea explicabo voluptate quo debitis. Fugiat!</p>
</main>
<hr>
<footer>
<p>© 2021 all rights reserved by XYZ Website</p>
</footer>
</body>
</html>

 

 

 

 

Nancy O'Shea, Product User & Community Expert
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Engaged ,
Jan 14, 2021 Jan 14, 2021

Copy link to clipboard

Copied

Thanks for this information etc.

 

Do you know of a good beginners guide book (or web forum) to making a website with HTML/CCS

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Engaged ,
Jan 14, 2021 Jan 14, 2021

Copy link to clipboard

Copied

I bascially want to make a basic web page that looks like this...Web 5.jpg

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jan 14, 2021 Jan 14, 2021

Copy link to clipboard

Copied

 

See if the below helps, its a template based on your design, works in mobile devices, tablet and smartphone as well as desktop. Just change up the fonts to those you want to use and insert your logo and youre good to go - create additional pages from the template and link to them.

 

 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ben Scarr - Portfolio</title>
<style>
body {
font-family: helvetica, sans-serif;
background-color: #000;
color: #fff;
}
.header {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
width: 85%;
max-width: 1200px;
margin: 75px auto 30px auto;
}
@media screen and (max-width: 800px) {
.header {
margin: 40px auto 30px auto;
}
}
.logo {
width: 69%;
}
@media screen and (max-width: 800px) {
.logo {
width: 100%;
text-align: center;
margin: 0 0 30px 0;
}
}
.logo h1 {
text-transform: uppercase;
margin: 0;
padding: 0;
font-size: 20px;
font-weight: 400;
letter-spacing: 1px;
}
.navigation {
width: 31%;
}
@media screen and (max-width: 800px) {
.navigation {
width: 100%;
}
}
.navigation ul {
display: flex;
justify-content: space-between;
margin: 0;
padding: 0;
}
@media screen and (max-width: 800px) {
.navigation ul {
justify-content: center;
}
}
.navigation li {
margin: 0;
padding: 0;
list-style: none;
}
.navigation a {
text-decoration: none;
text-transform: uppercase;
color: #fff;
font-size: 12px;
}
@media screen and (max-width: 800px) {
.navigation a {
padding: 0 20px;
}
}
.navigation a:hover {
color: yellow;
}
.navigation a.active {
color: yellow;
}
.mainContentWrapper{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
width: 85%;
max-width: 1200px;
margin: 0 auto 40px auto;
}
@media screen and (max-width: 500px) {
.mainContentWrapper{
width: 80%;
}
}
.showcase {
width: 41%;
padding-left: 23%;
margin-top: -50px;
}
@media screen and (max-width: 800px) {
.showcase {
width: 50%;
padding-left: 0;
margin-top: 0;
}
}
@media screen and (max-width: 500px) {
.showcase {
width: 100%;
}
}
.showcase img {
max-width: 100%;
height: 100%;
}

.mainContent {
display: flex;
flex-direction: column;
width: 31%;
}
@media screen and (max-width: 800px) {
.mainContent {
width: 45%;
}
}
@media screen and (max-width: 500px) {
.mainContent {
width: 100%;
}
}
.mainContentText {
flex: 1;
}
.mainContentText h2 {
font-weight: 400;
margin: 60px 0 0 0;
padding: 0;
}
@media screen and (max-width: 800px) {
.mainContentText h2 {
margin: 40px 0 0 0;
}
}
.mainContentText p {
font-size: 14px;
line-height: 20px;
}
.footer {
display: flex;
align-items: flex-end;
justify-content: flex-end;
grid-column: 3/4;
grid-row: 4/5;
}
.footer a {
text-decoration: none;
color: green;
}
.copyright {
color: #fff;
font-size: 12px;
margin-top: 5px;
}
@media screen and (max-width: 500px) {
.copyright {
text-align: right;
}
}


</style>
</head>
<body>
	
<header class="header">
<div class="logo"><h1>Ben Scarr</h1></div>
<nav class="navigation">
<ul>
<li><a href="#" class="active">Portfolio</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</nav>
</header>
<!-- end header -->

<section class="mainContentWrapper">

<div class="showcase">
<div><img src="https://via.placeholder.com/600x770"></div>
<div class ="copyright">&copy;Ben Scarr - 2021</div>
</div>
<!-- end showCase -->

<div class="mainContent">

<div class="mainContentText">
<h2>Nike Air Tailwind 79</h2>
<p>
I wanted to design a Marketing Material, in this case Nike, based on posters I see displayed in shop windows, like Size in Carnaby Street.
</p>
</div>
<!-- end mainContentText -->
	
<footer class="footer"><a href="#">Next ></a></footer>
</div>
<!-- end mainContent -->

</section>
<!-- end mainContentWrapper -->

</body>
</html>

 

 

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jan 14, 2021 Jan 14, 2021

Copy link to clipboard

Copied

"Do you know of a good beginners guide book (or web forum) to making a website with HTML/CCS?"

============

Start with these links.  Read the chapters, do code exercises and take quizzes at the end.
- https://www.w3schools.com/html/
- https://www.w3schools.com/css/
- https://www.w3schools.com/js/
- https://www.w3schools.com/bootstrap4/

Or if you want to get this done fast, just use Adobe Portfolio, a free perk with your paid Creative Cloud plan.  No set-up, no coding and hosting is included.

https://portfolio.adobe.com/

 

Nancy O'Shea, Product User & Community Expert
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Engaged ,
Jan 14, 2021 Jan 14, 2021

Copy link to clipboard

Copied

I guess from what your saying, it's best not to have the hover effect, and just leave the text/navigation as white due to mobile devices etc. I've noticed other people presenting there online portfolio don't have the hover effect.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jan 14, 2021 Jan 14, 2021

Copy link to clipboard

Copied

You can still have a:hover effects if you want.  In my example, I added a:active and a:focus states for people using a tab key or tapping the link with their finger.  But in the end it's all just eye candy and not very important compared to the correct use of <h1> tags.

 

As to your layout comp, how is that supposed to work on mobile phones and tablets that don't have enough real estate for a 3 column grid?  You have room for only one column on a mobile phone and possibly 2 on a tablet.  What do you envision for those devices?

 

Nancy O'Shea, Product User & Community Expert
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Engaged ,
Jan 14, 2021 Jan 14, 2021

Copy link to clipboard

Copied

I haven't really thought of it on devices just yet, but I will want my web site to be able to be viewed on mobile devices.

 

But at present I just want to get the basic knowledge of getting navigation to work, and being able to place pictures and text where I want them on a page first, so I know the basics of building a web site.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jan 14, 2021 Jan 14, 2021

Copy link to clipboard

Copied

LATEST

I haven't really thought of it on devices just yet, but I will want my web site to be able to be viewed on mobile devices.

 

See the template code I've supplied in the post above, that should get you going in the right direction.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
express Get Adobe Express free

Easily make social graphics, flyers, logos, and more from thousands of free templates.

Get free app
Free to use, no credit card required