This question already has answers here:
How to remove underline from links?
(2 answers)
Closed last month.
I'm a newbie at html and css, please could someone help me out. I'm trying to get rid of the underline in the header section and in the see my resume section. I also want to make the writing black in the header section. I've tried using 'text-decoration: none; ' to get rid of it but nothing happened. Please explain it in a simple way I could understand.
Below are the images:
enter image description here
enter image description here
Thank You!
HTML 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">
<title>""</title>
<link rel="stylesheet" href="">
<link rel="shortcut icon" href=""type="image/jpg">
</div>
</head>
<body>
<nav class="header">
<img src=""alt=""/>
<ul class="menu">
<li>Home</li>
<li> Education</li>
<li> Experience</li>
<li>Projects</li>
<li>Contact Me</li>
</ul>
</nav>
<div id="container">
<img src="" alt="">
<div class="text">
<h1 class="greeting-text" style="color: rgb(0, 28, 85);"> ""
<span class="wave-emoji"><img src="hi wave.png"></span></h1>
<h2 class="greeting-nickname" style="color: rgb(0, 28, 85);">""</h2>
<h3>
<p class="greeting-text-p subTitle" style="color: rgb(122, 122, 145);">""
</p>
</h3>
<p>
<a class="rounded-button" href="">
<ion-icon name="logo-instagram" size="large"></ion-icon> </a>
<a class="rounded-button" href="">
<ion-icon name="logo-linkedin" size="large"></ion-icon> </a>
<a class="rounded-button" href="">
<ion-icon name="logo-github" size="large"></ion-icon>
</a>
<a class="rounded-button" href="mailto:">
<ion-icon name="mail-outline" size="large"></ion-icon> </a>
<div id="contact">
See My Resume
</div>
</P>
<div class="container.two">
<h2 class="heading"> What I Do?</h2>
<img class="new-pic"src="" alt="what I Do">
<h1 class="name" style="color: rgb(3, 2, 8);"> Full Stack Development</h1>
<p class="icon">
<a class="set" href=""><ion-icon name="logo-html5"></ion-icon></a>
<a class="set" href=""><ion-icon name="logo-css3"></ion-icon></a>
<a class="set" href=""><ion-icon name="logo-nodejs"></ion-icon></a>
<a class="set" href=""><ion-icon name="logo-python"></ion-icon></a>
<a class="set" href=""><ion-icon name="logo-javascript"></ion-icon></a>
<a class="set" href=""><ion-icon name="logo-react"></ion-icon></a>
</p>
<ul>
<li class="blue">""</li>
<li class="blue"> ""</li>
</ul>
<div class="container.three">
<h2 class="wex"> Tech interest</h2>
</div>
</div>
</div>
</div>
<script type="module" src="https://unpkg.com/ionicons#5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons#5.5.2/dist/ionicons/ionicons.js"></script>
</body>
</html>
CSS CODE
body
{
margin:0%;
font-family: Hoefler Text;
background-color: rgb(233, 245, 248);
color:rgb(7, 9, 10);
}
header{
margin: 3% 10% 3% 10%;
padding: 37px 161px;
align-items: center;
}
.menu{
list-style-type: none;
margin: 0;
padding: 0;
float: right;
}
.menu li{
display: inline-block;
padding: 20px 40px;
font-size: 20px;
}
.menu li a:hover {
color: rgb(82, 198, 235);
text-decoration: none;
}
#container{
margin: 0 20px 15px 100px;
text-align: right;
float: right;
}
img{
max-width: 400px;
padding: 10px 10px 10px 10px;
}
.heading{
display: grid;
grid-template-columns: repeat(3, 1fr);
align-items: center;
column-gap: 1.5rem;
margin-top: 300px;
padding: 0px 0px 0px 100px;
}
.heading::before, .heading::after{
content: "";
height: 2px;
background-color: #03090a;
display: flex;
}
.text{
text-align: justify;
font-family: Hoefler Text;
font-size: 20px;
padding: 10px 600px 5px 2px;
float: left;
position: relative;
bottom: 700px;
}
.rounded-button{
width: 60px;
height: 60px;
background: rgb(37, 198, 235);
color: rgb(246, 250, 250) ;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
padding: 0 0 0 0;
border-radius: 50%;
border: none;
text-decoration: none;
transition: background 0.2s;
}
.rounded-button:hover{
background: rgb(0, 28, 85);
}
#contact{
margin: 5px;
background-color: rgb(37, 198, 235);
display: inline-block;
padding: 2% 5%;
font-size: 20px;
font-weight: 501;
border-radius: 10px;
cursor: pointer;
border: none;
text-align: left;
text-decoration: none;
transition: background 0.2s;
}
#contact:hover{
background:rgb(0, 28, 85);
}
.new-pic{
max-width: 500px;
padding: 20px 50px 20px 10px;
}
.name{
text-align: right;
font-family: Hoefler Text;
font-size: 37px;
padding: 10px 10px 100px 300px;
width: 100%;
align-items: right;
position: relative;
bottom: 400px;
}
.icon{
text-align: right;
font-size: 37px;
padding: 10px 10px 10px 300px;
width: 100%;
align-items: right;
position: relative;
bottom: 500px;
}
.set{
width: 60px;
height: 60px;
background: rgb(37, 198, 235);
color: rgb(246, 250, 250) ;
display: inline-flex;
align-items: center;
justify-content: center;
text-align: right;
cursor: pointer;
padding: 0 0 0 0;
border-radius: 50%;
border: none;
text-decoration: none;
transition: background 0.2s;
}
.set:hover{
background: rgb(0, 28, 85);
}
.blue{
color: rgb(122, 122, 145);
font-size: 25px;
font-family: Hoefler Text;
list-style: none;
padding: 10px 10px 10px 440px;
text-align: center;
align-items: center;
width: 100%;
position: relative;
bottom: 510px;
}
.blue:not(:last-child){
margin-bottom: 10px;
}
.blue:before{
content: "\1F535";
}
#containerone{
margin: 0 20px 15px 20px;
text-align: left;
float: left;
}
.title{
text-align: justify;
font-family: Hoefler Text;
font-size: 20px;
padding: 10px 20px 20px 700px;
align-items: right;
position: relative;
bottom: 500px;
}
.studies{
font-size: 50px;
position: none;
bottom: 300px;
text-align: center;
}
img{
max-width: 500px;
padding: 10px 10px 10px 10px
}
.wex{
display: grid;
grid-template-columns: repeat(3, 1fr);
align-items: center;
column-gap: 1.5rem;
margin-top: 10px;
padding: 0px 0px 0px 100px;
}
.wex::before, .wex::after{
content: "";
height: 2px;
background-color: #03090a;
display: flex;
}
The link tag (anchor tag) can be in 4 different states called pseudo-classes:
a:link: the regular state of the link when it is not active, visited, or hovered on
a:visited: when the link has been clicked by the user, that is, visited
a:hover: when the user is hovering on the link
a:active: when the user is clicking on the link
css to remove underline for each state
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
now your link is black and underline only on mouse hover with color change:
.menu li a {
text-decoration: none;
color: black;
}
.menu li a:hover {
color: rgb(82, 198, 235);
text-decoration: underline;
}
try this
a{text-decoration:none;}
Related
I'm new to HTML and CSS. I have a project due on Friday and I don't understand how to make my page look the same in all browsers and resolutions. I will leave my CSS and HTML code, so if anyone is kind enough to help me figure it out I'd really appreciate it. We did some simple designs before but I was trying new things out and I guess what I did looks good on like bigger displays but on smaller ones the elements are just messed up.
body{
font-family: 'Playfair Display';
font-size: 20px;
}
.figure1{
float:right;
clear: both;
padding-bottom: 150px;
padding-left: 450px;
padding-right: 8px;
background-color: #D1C45E;
width: 500px;
height: 600px;
}
.figure2{
float:left;
clear: both;
padding-top: 250px;
padding-bottom: 50px;
padding-right: 450px;
padding-left: 8px;
background-color: #D1C45E;
width: 400px;
height: 400px;
}
.imgMe {
position: absolute;
left: 770px;
top: 65px;
}
.navbar {
overflow: hidden;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 10px 12px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 20px;
border: none;
outline: none;
color: black;
padding: 14px 16px;
background-color: #D1C45E;
font-family: inherit;
margin: 0;
}
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: #D1C45E;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #fff;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #D1C45E;
}
.dropdown:hover .dropdown-content {
display: block;
}
h1{
display: inline;
float: none;
padding-left: 140px;
font-size: 80px;
font-weight: 700;
line-height: 1.2;
}
h3{
display: block;
float: none;
padding-top: 350px;
padding-left: 340px;
text-transform: uppercase;
color: #d5c455;
font-size: 20px;
}
h2{
display: block;
float: right;
position: relative;
left: 1030px;
bottom: 650px;
text-transform: uppercase;
font-size: 42px;
}
button {
margin: 20px;
outline: none;
}
.custom-btn {
width: 130px;
height: 40px;
padding: 10px 25px;
border: 2px solid #000;
font-family: 'Lato', sans-serif;
background: transparent;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
display: inline-block;
position: relative;
left: 395px;
font-weight: bold;
font-style: italic;
}
.btn-1 {
transition: all 0.3s ease;
}
.btn-1:hover {
box-shadow:
-7px -7px 20px 0px #fff9,
-4px -4px 5px 0px #fff9,
7px 7px 20px 0px #0002,
4px 4px 5px 0px #0001;
}
br {
display: inline-block;
content: "";
margin-top: 35%;
}
.pText{
display: block;
float: right;
position: absolute;
left: 930px;
top: 1500px;
line-height: 40px;
}
a{
all: revert;
text-decoration: none;
color: black;
}
html {
scroll-behavior: smooth;
}
#down {
margin-top: 100%;
padding-bottom: 25%;
}
footer {
text-align: center;
padding: 40px;
background-color: #D1C45E;
color: white;
display: block;
position: absolute;
top: 2100px;
left: 0px;
width: 1823px;
height: 100px;
}
.socials{
list-style: none;
display: flex;
align-items: center;
justify-content: center;
margin: 1rem 0 3rem 0;
}
.copyright{
text-align: left;
display: inline;
position: absolute;
bottom: 0px;
left: 5px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> Janko's homepage </title>
<link href="assets/CSS/project1.css" rel="stylesheet" type="text/css">
<link rel="icon" href="assets/media/home.png">
</head>
<body>
<div class="navbar">
<div class="dropdown">
<button class="dropbtn">
<img src="assets/media/menu.png" alt="an image of a dropdown menu" height="50" width="50">
</button>
<div class="dropdown-content">
Education
Personal
Résumé
</div>
</div>
</div>
<section>
<figure class="figure1">
<img class="imgMe" src="assets/media/janko-image.png" title="Janko " alt="An image of me" width="950" height="815">
</figure>
<h3> Web designer & developer </h3>
<h1> I'm Janko </h1>
<button class="custom-btn btn-1">About me</button>
</section>
<section>
<br>
<figure class="figure2">
<div id="down">
<h2> About me </h2>
</div>
<p class="pText"> I'm a 19 year old Web developer and designer from Croatia. I specialise in HTML and Java. I'm interested in finding a fullstack developer job. The mission of this site is to showcase my web-developing and designing abilities to my potential employers, my professors and viewers who might take inspiration from my website. Not to mention all the feedback I can get will most definitely help me form my webdesign style in the future.</p>
</figure>
<br>
</section>
<section>
<br>
<footer>
<ul class="socials">
<li><img src="assets/media/instagram.png" alt="instagram icon" height="60" width="60"></li>
<li><img src="assets/media/email.png" alt="mail icon" height="60" width="60"></li>
<li><img src="assets/media/facebook.png" alt="facebook icon" height="55" width="60"></li>
</ul>
<p class="copyright"> Copyright © Janko 2022</p>
</footer>
</section>
</body>
</html>
I'm trying to build an ecommerce website by watching a YouTube video. I am stuck at apply CSS style to some classes. I have given my html CSS code below. In that from the class "#product1 .pro.des{ "onwards CSS styling is not applying to its content.on #product1 .pro.des{ element in CSS I tried to align text to start but it is not reflecting. Not only that but also the styling of other elements which comes after "#product1 .pro.des{" also are not working. Hope someone will resolve this?
#import url('https://fonts.googleapis.com/css2?family=Roboto+Slab&family=Spartan:wght#100;200;300;400;500;600;700;800;900&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Spartan' sans-serif;
}
h1{
font-size: 50PX;
line-height: 64px;
color: #222;
}
h2{
font-size: 46PX;
line-height: 54px;
color: #222;
}
h4{
font-size: 20PX;
color: #222;
}
h6{
font-weight: 700;
font-size: 12px
}
p{
font-size: 16PX;
color: #465b52;
margin: 15px 0 20px 0;
}
.section-p1{
padding: 40px 80px;
}
.section-p1{
margin: 40px 0;
}
body{
width: 100%;
}
/*header start*/
#header{
display: flex;
justify-content: space-between ;
align-items: center;
padding: 20px 80px;
background-color: #e3e6f3;
box-shadow: 0px 5px 15p rgba(0, 0, 0, 0.06);
z-index: 999;
position: sticky;
top: 0;
left: 0;
}
#navbar{
display: flex;
justify-content: center;
align-items: center;
}
#navbar li{
list-style: none;
padding: 0 20px;
position: relative;
}
#navbar li a{
text-decoration: none;
font-size: 16px;
font-weight: 600;
color: #1a1a1a;
transition: 0.3s ease;
}
#navbar li a:hover,
#navbar li a.active{
color: #088178;
}
#navbar li a.active::after,
#navbar li a:hover::after{
content: "";
width: 30%;
height: 2px;
background: #088178;
position: absolute;
bottom: -4px;
left: 20px;
}
#hero{
background-image: url("img/hero4.png");
height: 90vh;
width: 100%;
background-position: top 25 right 0;
background-size: cover;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
}
#hero h4{
padding-bottom: 15px;
}
#hero h1{
color: #088178;
}
#hero button{
background-image: url(img/button.png);
background-color: transparent;
color: #088178;
border:0;
padding: 14px 80px 14px 65px;
background-repeat: no-repeat;
cursor: pointer;
font-weight: 700;
font-size: 15px;
}
#feature{
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
}
#feature .fe-box{
width: 180px;
text-align: center;
padding: 25px 15px;
box-shadow: 20px 20px 34px rgba(0, 0, 0, 0.03);
border: 1px solid #cce7d0;
border-radius: 4px;
margin: 15px 0;
}
#feature .fe-box:hover{
box-shadow: 10px 10px 34px rgba(0, 0, 0, 0.03);
}
#feature .fe-box h6{
display: inline-block;
padding: 9px 8px 6px 8px;
line-height: 1;
border-radius: 4px;
color: #088178;
background-color: #fddde4;
}
#feature .fe-box img{
width: 100%;
margin-bottom: 10px;
}
#product1{
text-align: center;
}
#product1 .pro{
width: 23%;
min-width: 250px;
padding: 10px 12px;
border: 1px solid #cce7d0;
border-radius: 25px;
cursor: pointer;
box-shadow: 20px 20px 30px rgba(0, 0, 0, 0.02);
margin: 15px 0;
}
#product1 .pro img{
width: 100%;
border-radius: 20px;
}
#product1 .pro.des{
text-align: start;
padding: 10px 0;
}
#product1.pro.des span{
color: #606063;
font-size: 50px;
}
#product1 .pro.des h5{
padding-top: 7px;
color: #1a1a1a;
font-size: 14px;
}
#product1 .pro.des i{
font-size: 25px;
color: rgb(241, 183, 25);
}
<!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>Ecommerce</title>
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.15.4/css/all.css"/>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section id="header">
<img src="img/logo.png" class="logo">
<div>
<ul id="navbar">
<li><a class="active" href="index.html">Home</a></l1>
<li>Shop</l1>
<li>Blog</l1>
<li>About</l1>
<li>Contact</li>
<li><i class="fa-solid fa-cart-arrow-down"></i></li>
</ul>
</div>
</section>
<section id="hero">
<h4>Trade-in-offer</h4>
<h2>Super Value Deals</h2>
<h1>On all products</h1>
<p>Save more with coupons & upto 70%off</p>
<button>Shop Now</button>
</section>
<section id="feature" class="section-p1">
<div class="fe-box">
<img src="img/features/f1.png">
<h6>Free Shipping</h6>
</div>
<div class="fe-box">
<img src="img/features/f2.png">
<h6>Online Order</h6>
</div>
<div class="fe-box">
<img src="img/features/f3.png">
<h6>Save Money</h6>
</div>
<div class="fe-box">
<img src="img/features/f4.png">
<h6>Promotions</h6>
</div>
<div class="fe-box">
<img src="img/features/f5.png">
<h6>Happy Sell</h6>
</div>
<div class="fe-box">
<img src="img/features/f6.png">
<h6>Support</h6>
</div>
</section>
<section id="product1" class="section-p1">
<h2>Featured Products</h2>
<p>Summer Collections</p>
<div class="pro-container">
<div class="pro">
<img src="img/products/f1.jpg">
<div class="des">
<span>adidas</span>
<h5>Cartoon Astronaut Tshirt</h5>
<div class="star">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
<h4>$78</h4>
</div>
<i class="fal fa-shopping-cart"></i>
</div>
</div>
</section>
<script src="script.js"></script>
</body>
</html>
Add Spaces Between your selectors like:
#product1 .pro .des h5{
padding-top: 7px;
color: #1a1a1a;
font-size: 14px;
}
#product1 .pro .des i{
font-size: 25px;
color: rgb(241, 183, 25);
}
Should be .pro > .des or .pro .des (with a space) because .des is a child to .pro.
.pro.des would only be valid if those classes shared the same element.
#import url('https://fonts.googleapis.com/css2?family=Roboto+Slab&family=Spartan:wght#100;200;300;400;500;600;700;800;900&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Spartan' sans-serif;
}
h1 {
font-size: 50PX;
line-height: 64px;
color: #222;
}
h2 {
font-size: 46PX;
line-height: 54px;
color: #222;
}
h4 {
font-size: 20PX;
color: #222;
}
h6 {
font-weight: 700;
font-size: 12px
}
p {
font-size: 16PX;
color: #465b52;
margin: 15px 0 20px 0;
}
.section-p1 {
padding: 40px 80px;
}
.section-p1 {
margin: 40px 0;
}
body {
width: 100%;
}
/*header start*/
#header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 80px;
background-color: #e3e6f3;
box-shadow: 0px 5px 15p rgba(0, 0, 0, 0.06);
z-index: 999;
position: sticky;
top: 0;
left: 0;
}
#navbar {
display: flex;
justify-content: center;
align-items: center;
}
#navbar li {
list-style: none;
padding: 0 20px;
position: relative;
}
#navbar li a {
text-decoration: none;
font-size: 16px;
font-weight: 600;
color: #1a1a1a;
transition: 0.3s ease;
}
#navbar li a:hover,
#navbar li a.active {
color: #088178;
}
#navbar li a.active::after,
#navbar li a:hover::after {
content: "";
width: 30%;
height: 2px;
background: #088178;
position: absolute;
bottom: -4px;
left: 20px;
}
#hero {
background-image: url("img/hero4.png");
height: 90vh;
width: 100%;
background-position: top 25 right 0;
background-size: cover;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
}
#hero h4 {
padding-bottom: 15px;
}
#hero h1 {
color: #088178;
}
#hero button {
background-image: url(img/button.png);
background-color: transparent;
color: #088178;
border: 0;
padding: 14px 80px 14px 65px;
background-repeat: no-repeat;
cursor: pointer;
font-weight: 700;
font-size: 15px;
}
#feature {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
}
#feature .fe-box {
width: 180px;
text-align: center;
padding: 25px 15px;
box-shadow: 20px 20px 34px rgba(0, 0, 0, 0.03);
border: 1px solid #cce7d0;
border-radius: 4px;
margin: 15px 0;
}
#feature .fe-box:hover {
box-shadow: 10px 10px 34px rgba(0, 0, 0, 0.03);
}
#feature .fe-box h6 {
display: inline-block;
padding: 9px 8px 6px 8px;
line-height: 1;
border-radius: 4px;
color: #088178;
background-color: #fddde4;
}
#feature .fe-box img {
width: 100%;
margin-bottom: 10px;
}
#product1 {
text-align: center;
}
#product1 .pro {
width: 23%;
min-width: 250px;
padding: 10px 12px;
border: 1px solid #cce7d0;
border-radius: 25px;
cursor: pointer;
box-shadow: 20px 20px 30px rgba(0, 0, 0, 0.02);
margin: 15px 0;
}
#product1 .pro img {
width: 100%;
border-radius: 20px;
}
#product1 .pro>.des {
text-align: start;
padding: 10px 0;
}
#product1.pro>.des span {
color: #606063;
font-size: 50px;
}
#product1 .pro >.des h5 {
padding-top: 7px;
color: #1a1a1a;
font-size: 14px;
}
#product1 .pro >.des i {
font-size: 25px;
color: rgb(241, 183, 25);
}
<!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>Ecommerce</title>
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.15.4/css/all.css" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<section id="header">
<img src="img/logo.png" class="logo">
<div>
<ul id="navbar">
<li><a class="active" href="index.html">Home</a></li>
<li>Shop</li>
<li>Blog</li>
<li>About</li>
<li>Contact</li>
<li><i class="fa-solid fa-cart-arrow-down"></i></li>
</ul>
</div>
</section>
<section id="hero">
<h4>Trade-in-offer</h4>
<h2>Super Value Deals</h2>
<h1>On all products</h1>
<p>Save more with coupons & upto 70%off</p>
<button>Shop Now</button>
</section>
<section id="feature" class="section-p1">
<div class="fe-box">
<img src="img/features/f1.png">
<h6>Free Shipping</h6>
</div>
<div class="fe-box">
<img src="img/features/f2.png">
<h6>Online Order</h6>
</div>
<div class="fe-box">
<img src="img/features/f3.png">
<h6>Save Money</h6>
</div>
<div class="fe-box">
<img src="img/features/f4.png">
<h6>Promotions</h6>
</div>
<div class="fe-box">
<img src="img/features/f5.png">
<h6>Happy Sell</h6>
</div>
<div class="fe-box">
<img src="img/features/f6.png">
<h6>Support</h6>
</div>
</section>
<section id="product1" class="section-p1">
<h2>Featured Products</h2>
<p>Summer Collections</p>
<div class="pro-container">
<div class="pro">
<img src="img/products/f1.jpg">
<div class="des">
<span>adidas</span>
<h5>Cartoon Astronaut Tshirt</h5>
<div class="star">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
<h4>$78</h4>
</div>
<i class="fal fa-shopping-cart"></i>
</div>
</div>
</section>
<script src="script.js"></script>
</body>
</html>
Side note: markup was invalid due to missing closing <li> - you had </ll> instead.
https://sagarj2021.github.io/first-website/
This is my website but it only open fullscreen in destop of my laptop. It does not open in fullscreen in smartphones destop as well as in normal search. (Actully in smartphone right side is 50% of white blank color). I dont know how to fix this issue..
I have given my code also,
so please can you help mi ?
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.hero {
height: 100vh;
width: 100%;
background-color: black;
background-size: cover;
background-position: center;
}
nav {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 45px;
padding-left: 8%;
padding-right: 8%;
}
.logo {
color: white;
font-size: 35px;
letter-spacing: 1px;
cursor: pointer;
}
span {
color: red;
}
nav ul li {
list-style-type: none;
display: inline-block;
padding: 10px 25px;
}
nav ul li a {
color: white;
text-decoration: none;
font-weight: bold;
text-transform: capitalize;
}
nav ul li a:hover {
color: red;
transition: .4s;
}
.btn {
background-color: red;
color: white;
text-decoration: none;
border: 2px solid transparent;
font-weight: bold;
padding: 10px 25px;
border-radius: 30px;
transition: transform .4s;
}
.btn:hover {
transform: scale(1.2);
}
.content {
position: absolute;
top: 50%;
left: 8%;
transform: translateY(-50%);
}
h1 {
color: white;
margin: 20px 0px 20px;
font-size: 75px;
}
h3 {
color: white;
font-size: 25px;
margin-bottom: 50px;
}
h4 {
color: #fcfc;
letter-spacing: 2px;
font-size: 20px;
}
.newslatter form {
width: 380px;
max-width: 100%;
position: relative;
}
.newslatter form input:first-child {
display: inline-block;
width: 100%;
padding: 14px 130px 14px 15px;
border: 2px solid #f9004d;
outline: none;
border-radius: 30px;
}
.newslatter form input:last-child {
position: absolute;
display: inline-block;
outline: none;
border: none;
padding: 10px 30px;
border-radius: 30px;
background-color: #f9004d;
color: white;
box-shadow: 0px 0px 5px #000, 0px 0px 15px #858585;
top: 6px;
right: 6px;
}
.about {
width: 100%;
padding: 100px 0px;
background-color: #191919;
}
.about img {
height: auto;
width: 430px;
}
.about-text {
width: 550px;
}
.main {
width: 1130px;
max-width: 95%;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-around;
}
.about-text h2 {
color: white;
font-size: 75px;
text-transform: capitalize;
margin-bottom: 20px;
}
.about-text h5 {
color: white;
letter-spacing: 2px;
font-size: 22px;
margin-bottom: 25px;
text-transform: capitalize;
}
.about-text p {
color: #fcfc;
letter-spacing: 1px;
line-height: 28px;
font-size: 18px;
margin-bottom: 45px;
}
button {
background-color: #f9004d;
color: white;
text-decoration: none;
border: 2px solid transparent;
font-weight: bold;
padding: 13px 30px;
border-radius: 30px;
transition: .4s;
}
button:hover {
background-color: transparent;
border: 2px solid #f9004d;
cursor: pointer;
}
.service {
background: #101010;
width: 100%;
padding: 100px 0px;
}
.title h2 {
color: white;
font-size: 75px;
width: 1130px;
margin: 30px auto;
text-align: center;
}
.box {
display: flex;
justify-content: center;
align-items: center;
min-height: 400px;
}
.card {
height: 365px;
width: 335px;
padding: 20px 35px;
background: #191919;
border-radius: 20px;
margin: 15px;
position: relative;
overflow: hidden;
text-align: center;
}
.card i {
font-size: 50px;
display: block;
text-align: center;
margin: 25px 0px;
color: #f9004d;
}
h5 {
color: white;
font-size: 23px;
margin-bottom: 15px;
}
.pra p {
color: #fcfc;
font-size: 16px;
line-height: 27px;
margin-bottom: 25px;
}
.card .button {
background-color: #f9004d;
color: white;
text-decoration: none;
border: 2px solid transparent;
font-weight: bold;
padding: 9px 22px;
border-radius: 30px;
transition: .4s;
}
.card .button:hover {
background-color: transparent;
border: 2px solid #f9004d;
cursor: pointer;
}
.contact-me {
width: 100%;
height: 290px;
background: #191919;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
}
.contact-me p {
color: white;
font-size: 30px;
font-weight: bold;
margin-bottom: 25px;
}
.contact-me .button-two {
background-color: #f9004d;
color: white;
text-decoration: none;
border: 2px solid transparent;
font-weight: bold;
padding: 13px 30px;
border-radius: 30px;
transition: .4s;
}
.contact-me .button-two:hover {
background-color: transparent;
border: 2px solid #f9004d;
cursor: pointer;
}
footer {
position: relative;
width: 100%;
height: 400px;
background: #101010;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
footer p:nth-child(1) {
font-size: 30px;
color: white;
margin-bottom: 20px;
font-weight: bold;
}
footer p:nth-child(2) {
color: white;
font-size: 17px;
width: 500px;
text-align: center;
line-height: 26px;
}
.social {
display: flex;
}
.social a {
width: 45px;
height: 45px;
display: flex;
align-items: center;
justify-content: center;
background: #f9004d;
border-radius: 50%;
margin: 22px 10px;
color: white;
text-decoration: none;
font-size: 20px;
}
.social a:hover {
transform: scale(1.3);
transition: .3s;
}
.end {
position: absolute;
color: #f9004d;
bottom: 35px;
font-size: 14px;
}
<!--Sagar personal website-->
<!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="personalprofile.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=Roboto&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/34d51c031e.js" crossorigin="anonymous"></script>
<title>Personal website</title>
</head>
<body>
<div class="hero">
<nav>
<h2 class="logo">Portfo<span>lio</span></h2>
<ul>
<li>Home</li>
<li>About</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
Blog
</nav>
<div class="content">
<h4>hello, my name is</h4>
<h1>Sagar<span>Jadhav</span></h1>
<h3>I'm a Web Developer.</h3>
<div class="newslatter">
<form action="">
<input type="email" name="email" id="mail" placeholder="Enter Your Email">
<input type="submit" name="submit" value="Let start">
</form>
</div>
</div>
</div>
<!---About section start-->
<section class="about">
<div class="main">
<img src="#" alt="">
<div class="about-text">
<h2>About Me</h2>
<h5>Developer & Designer</h5>
<p>
I am a front-end web developer. I can provide clean code and pixel perfect design. I also make the website more & more interactive with web animations. I can provide clean code and pixel perfect design. I also make the website more & more interactive
with web animations. A responsive design makes your website accessible to all users, regardless of their devices.
</p>
<button type="button">Let's Talk</button>
</div>
</div>
</section>
<!--Service section start-->
<div class="service">
<div class="title">
<h2>Our Services</h2>
</div>
<div class="box">
<div class="card">
<i class="fas fa-bars"></i>
<h5>Web Development</h5>
<div class="pra">
<p>Every website should be built with two primary goals: Firstly, it needs to work across all devices. Secondly, it needs to be fast as possible. </p>
<p style="text-align: center;">
<a class="button" href="#">Read More</a>
</p>
</div>
</div>
<div class="card">
<i class="fa-regular fa-user"></i>
<h5>Web Development</h5>
<div class="pra">
<p>Every website should be built with two primary goals: Firstly, it needs to work across all devices. Secondly, it needs to be fast as possible. </p>
<p style="text-align: center;">
<a class="button" href="#">Read More</a>
</p>
</div>
</div>
<div class="card">
<i class="fa-regular fa-bell"></i>
<h5>Web Development</h5>
<div class="pra">
<p>Every website should be built with two primary goals: Firstly, it needs to work across all devices. Secondly, it needs to be fast as possible. </p>
<p style="text-align: center;">
<a class="button" href="#">Read More</a>
</p>
</div>
</div>
</div>
</div>
<!--Contact Me-->
<div class="contact-me">
<p>For any help.</p>
<a class="button-two" href="#">Contact Me</a>
</div>
<!--Footer start-->
<footer>
<p>Sagar Jadhav</p>
<p>For coding and syber security related update follow my blog chennal - please click on the link below to follow me:
</p>
<div class="social">
<i class="fa-brands fa-facebook"></i>
<i class="fa-brands fa-instagram"></i>
<i class="fa-brands fa-linkedin"></i>
</div>
<p class="end">CopyRight By Sagar Jadhav</p>
</footer>
</body>
</html>
Replace this code in your code
.title h2 {
color: white;
font-size: 75px;
width: 130px;
margin: 30px auto;
text-align: center;
}
I am trying to build my personal webpage but simply cant manage to make my footer not cover the two buttons.
This problem only occurs on my laptop. As soon as I switch to my external monitor, the two buttons arent covered anymore.
I have tried inserting html{overflow-y: scroll;} to my css but it doesnt seem to work :(
Any help would be awesome! Thank you.
HTML:
#import url('https://fonts.googleapis.com/css?family=Roboto:700&display=swap');
* {
padding: 0;
margin: 0;
}
body {
background-color: ghostwhite;
background-size: cover;
padding: 0;
margin: 0;
}
.navbar {
height: 80px;
width: 100%;
background-color: #808080;
}
.logo {
width: 140px;
height: auto;
padding: 15px 50px;
}
.navbar ul {
float: right;
margin-right: 20px;
}
.navbar ul li {
list-style: none;
margin: 0 8px;
display: inline-block;
line-height: 80px;
}
.navbar ul li a {
text-decoration: none;
color: white;
font-size: 20px;
padding: 2px 6px;
font-family: 'Roboto', sans-serif;
transition: .2s;
}
.navbar ul li a:hover {
background: lightsteelblue;
border-radius: 2px;
}
.wrapper .center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-family: sans-serif;
user-select: none;
}
.center h1 {
color: black;
font-size: 70px;
font-weight: bold;
width: 900px;
text-align: center;
}
.center h2 {
color: black;
font-size: 70px;
font-weight: bold;
width: 885px;
margin-top: 10px;
text-align: center;
}
.center .buttons {
margin: 35px 280px;
}
.buttons button {
height: 50px;
width: 150px;
font-size: 18px;
font-weight: bold;
color: white;
background-color: lightsteelblue;
border: 1px solid #4b79b4;
outline: none;
cursor: pointer;
border-radius: 25px;
transition: .5s;
}
.buttons .btn {
margin-left: 25px;
}
.buttons button:hover {
background: #4b79b4;
}
footer {
position: absolute;
background-color: #808080;
height: auto;
width: 100%;
padding-top: 40px;
color: black;
bottom: 0px;
}
.footer-content {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
text-align: center;
}
.footer-content h3 {
font-size: 1.8rem;
font-weight: 400;
text-transform: capitalize;
line-height: 3rem;
}
.footer-content p {
max-width: 500px;
margin: 10px auto;
line-height: 28px;
font-size: 14px;
}
.socials {
list-style: none;
display: flex;
align-items: center;
justify-content: center;
margin: 1rem 0 3rem 0;
}
.socials li {
margin: 0 10px;
}
.socials a {
text-decoration: none;
color: lightsteelblue;
}
.socials a i {
font-size: 1.1rem;
transition: color .4s ease;
}
.socials a:hover i {
color: #4b79b4;
}
.footer-bottom {
background-color: #737373;
width: 100%;
padding: 20px 0;
text-align: center;
}
.footer-bottom p {
font-size: 14px;
word-spacing: 2px;
text-transform: capitalize;
}
.footer-bottom span {
text-transform: uppercase;
opacity: .4;
font-weight: 200;
}
<!doctype html>
<html lang="en ">
<head>
<meta charset="utf-8">
<title>Moritz </title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="wrapper">
<!-- BEGIN NAVBAR -->
<nav class="navbar">
<img class="logo" src="logo.png">
<ul>
<li> <a class="active" href="#">Home</a></li>
<li> About</li>
<li> CV</li>
<li> Favourites</li>
<li> Contact</li>
</ul>
</nav>
<!-- END NAVBAR -->
<!-- BEGIN CONTENT -->
<div class="center">
<h1>Hi, I'm Moritz.</h1>
<h2>I'm a student.</h2>
<div class="buttons">
<button>Explore more</button>
<button class="btn">Contact me</button>
</div>
<!-- END CONTENT -->
</div>
<!-- BEGIN FOOTER -->
<footer>
<div class="footer-content">
<h3>Moritz </h3>
<p>Thank you for browsing. I hope to hear from you soon!</p>
<ul class="socials">
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-linkedin-square"></i></li>
<li><i class="fa fa-envelope"></i></li>
<li><i class="fa fa-phone"></i></li>
</ul>
</div>
<div class="footer-bottom">
<p> Copyright © 2021 Moritz </p>
</div>
</footer>
<!-- END FOOTER -->
</body>
</html>
What you describe kind of feels like a grid to me using three "rows", one for the "navbar", one for the "content" and one for the "footer" such as:
display: grid;
grid-template-rows: auto 1fr auto;
Now given that we can put the containers for the rows in a wrapper .wrapper
Then we tall it which "row" each of the sections belongs in. grid-row: 2/2; for the content for example in row 2 (start and end)
I took a good bit of liberty with your CSS (it is still a "lot" just for this) specifically, I added borders to show where things are - you will want to remove those but I did it to illustrate where is "is" in the flow.
This is by no means "perfect" but just a very quick place to build from.
#import url('https://fonts.googleapis.com/css?family=Roboto:700&display=swap');
* {
padding: 0;
margin: 0;
}
body {
background-color: ghostwhite;
padding: 0;
margin: 0;
border: solid orange 3px;
}
.wrapper {
display: grid;
grid-template-rows: auto 1fr auto;
border: lime 4px dashed;
}
.navbar-container {
border: red 4px solid;
grid-row: 1/1;
display: flex;
align-items: start;
margin: 0rem;
}
.content-container {
font-family: sans-serif;
display: grid;
place-items: center;
grid-row: 2/2;
border: blue 1px solid;
}
.footer-container {
padding-top: 2rem;
display: grid;
grid-template-rows: auto 1fr auto;
border: cyan 1px solid;
}
.footer-content {
display: grid;
grid-template-rows: 1fr auto 1fr;
align-items: center;
justify-items: center;
}
.footer-bottom {
grid-row: 3/3;
align-text: center;
padding: 0.25rem;
border: dashed blue 1px;
}
.navbar {
height: 5rem;
width: 100%;
background-color: #808080;
font-family: 'Roboto', sans-serif;
}
.navbar>.logo {
width: 140px;
height: auto;
padding-bottom: 15px;
padding-top: 15px;
padding-left: 50px;
padding-right: 50px;
border: solid 1px green;
}
.navbar ul li {
list-style: none;
margin: 0 8px;
display: inline-block;
line-height: 80px;
}
.navbar ul li a {
text-decoration: none;
color: white;
font-size: 20px;
padding: 2px 6px;
transition: 0.2s;
}
.navbar ul li a:hover {
background: lightsteelblue;
border-radius: 2px;
}
.wrapper .center {
user-select: none;
}
.buttons {
display: flex;
flex-direction: row;
margin-top: 1rem;
margin-bottom: 1rem;
}
.buttons button {
margin: 1rem;
}
.buttons button {
flex: auto;
height: 50px;
width: 150px;
font-size: 18px;
font-weight: bold;
color: white;
background-color: lightsteelblue;
border: 1px solid #4b79b4;
outline: none;
cursor: pointer;
border-radius: 25px;
transition: .5s;
}
.buttons button:hover {
background: #4b79b4;
}
.socials {
list-style: none;
display: flex;
align-items: middle;
justify-content: center;
}
.socials li {
margin-right: 10px;
}
.footer-bottom {
font-size: 0.75rem;
background-color: #737373;
text-align: center;
width: 100%;
text-transform: uppercase;
opacity: .4;
font-weight: 200;
}
<!doctype html>
<html lang="en ">
<head>
<meta charset="utf-8">
<title>Moritz </title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="wrapper">
<nav class="navbar navbar-container">
<img class="logo" src="logo.png">
<ul class="menu-items">
<li> <a class="active" href="#">Home</a></li>
<li> About</li>
<li> CV</li>
<li> Favourites</li>
<li> Contact</li>
</ul>
</nav>
<div class="center content-container">
<h1>Hi, I'm Moritz.</h1>
<h2>I'm a student.</h2>
<div class="buttons">
<button>Explore more</button>
<button class="btn">Contact me</button>
</div>
</div>
<footer class="footer-container">
<div class="footer-content">
<h3>Moritz </h3>
<p>Thank you for browsing. I hope to hear from you soon!</p>
<ul class="socials">
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-linkedin-square"></i></li>
<li><i class="fa fa-envelope"></i></li>
<li><i class="fa fa-phone"></i></li>
</ul>
</div>
<div class="footer-bottom">
<p> Copyright © 2021 Moritz </p>
</div>
</footer>
</body>
</html>
I'm trying to control the "show more" link and cannot, I've used link controls before, but this one is puzzling me. The link I've tried to control so far is #r_a_show_more_link ("show more" link on right under recent activity) it's code is at the bottom of the CSS, but I can't get it to work. Maybe I'm doing something wrong with the CSS selectors? Please look at the code and run the snippet!
Thanks a lot!
/* Main Nav */
#home_icon {
height: 40px;
float: left;
padding: 10px;
position: relative;
top: 95px;
}
li {
display: inline-block;
}
ul {
float: right;
position: relative;
top: 50px;
margin: 0px;
padding: 0px;
}
li a:link {
font-weight: bold;
display: inline-block;
text-decoration: none;
font-family: times;
font-size: 24px;
list-style: none;
padding: 5px;
margin: 3px;
margin-top: 0px;
border: 2px solid #000;
border-radius: 5px;
}
nav li a:visited {
color: black;
}
nav li a:hover {
color: gray;
border-color: gray;
}
nav li a:active {
color: black;
border-color: black;
}
nav {
width: 1000px;
height: 150px;
background-color: rgba(255,255,255,0.9);
padding: 10px;
margin: 0px auto;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
input[type=search] {
font-size: 16px;
}
#searchbox {
float: right;
margin: 15px;
display: inline-block;
background: #2b303b;
border: none;
color: #63717f;
border-radius: 5px;
}
#logo {
float: left;
height: 150px;
display: inline-block;
}
body {
background-image: url("../pictures/test.jpg");
background-color: blue;
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
margin: 0px;
padding: 0px;
}
aside {
position: absolute;
right: 0px;
background-color: rgba(255,255,255,0.9);
width: 170px;
height: 600px;
margin: 0;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
padding: 10px;
}
#main_content {
width: 1000px;
min-height: 600px;
display: block;
background-color: rgba(255,255,255,0.9);
margin: 0 auto;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
position: relative; top: 0px;
padding: 10px;
}
#here_you_can_learn {
font-size: 47px;
color: gray;
margin: 0 auto;
margin-bottom: 10px;
text-align: center;
}
#welcome {
color: white;
font-size: 130px;
margin-top: 20px;
margin-bottom: 10px;
text-align: center;
padding: 10px;
}
#down_arrow {
height: 50px;
margin: auto;
display: block;
padding: 10px;
}
#most_frequent {
width: 600px;
vertical-align: top;
display: inline-block;
background-color: rgba(0,0,0,0.1);
border-radius: 3px;
}
#m_f_heading {
font-size: 30px;
margin: 10px;
padding: 5px;
text-align: center;
background-color: rgba(0,0,0,0.2);
border-radius: 5px;
}
#m_f_show_more {
font-size: 20px;
margin: 10px;
padding: 5px;
text-align: center;
background-color: rgba(0,0,0,0.2);
border-radius: 5px;
}
#recent_activity {
width: 375px;
display: inline-block;
background-color: rgba(0,0,0,0.1);
border-radius: 3px;
}
#r_a_heading {
font-size: 30px;
margin: 10px;
padding: 5px;
text-align: center;
background-color: rgba(0,0,0,0.2);
border-radius: 5px;
}
#r_a_body {
font-size: 15px;
margin: 10px;
padding: 5px;
text-align: center;
background-color: rgba(0,0,0,0.2);
border-radius: 5px;
}
#r_a_show_more {
font-size: 20px;
margin: 10px;
padding: 5px;
text-align: center;
background-color: rgba(0,0,0,0.2);
border-radius: 5px;
}
#r_a_show_more_link :visited {
color: black;
}
#r_a_show_more_link :hover {
color: gray;
border-color: gray;
}
#r_a_show_more_link :active {
color: black;
border-color: black;
}
}
<!DOCTYPE html>
<head>
<title>Home | Jeff's Website</title>
<link href="styles/main_navigation.css" type="text/css" rel="stylesheet" />
<link href="styles/body.css" type="text/css" rel="stylesheet" />
<link href="styles/main_content.css" type="text/css" rel="stylesheet" />
</head>
<body>
<!--Main Nav-->
<header>
<nav>
<a href="">
<img id="logo" src="pictures/jeff_logo.png" alt="Logo">
</a>
<img src="pictures/home_icon.png" id="home_icon"/>
<form action="" id="searchbox">
<input id="search_input" type="search" name="searchmysite" placeholder="Search my Site!">
<input type="submit" value="Search!">
</form>
<ul>
<li>Blog</li>
<li>Trips</li>
<li>Politics</li>
<li>Pictures</li>
<li>Videos</li>
<li>Computer</li>
<li>Misc</li>
</ul>
</nav>
</header>
<!--Welcome to jeff's website-->
<div>
<h1 id="welcome">Welcome to </br> my website!</h1>
<a href="#here_you_can_learn">
<img src="pictures/down_arrow.png" id="down_arrow"/>
</a>
</div>
<!--right side nav-->
<aside>
<p>this is aside</p>
</aside>
<!--Main Content-->
<div id="main_content">
<h2 id="here_you_can_learn">Here you can learn about me and my adventures!</h2>
<!--Most Frequently visited pages: on left side of page-->
<div id="most_frequent">
<p id="m_f_heading">Most frequently visted pages!</p>
<p id="m_f_show_more">Show More</p>
</div>
<!--Recent Activity: on the right side of page-->
<div id="recent_activity">
<p id="r_a_heading">Recent Activity</p>
<p id="r_a_body">test</p>
<p id="r_a_show_more">Show More</p>
</div>
</div>
</body>
You need to remove the space before :visited in the CSS:
#r_a_show_more_link:visited {
color: black;
}
you have an extra space before your :hover,:visited and:active, so remove it, like this:
#r_a_show_more_link:visited {
color: black;
}
#r_a_show_more_link:hover {
color: gray;
border-color: gray;
}
#r_a_show_more_link:active {
color: black;
border-color: black;
}