The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> HTML Website
tntnd
post Jan 3 2021, 09:49 AM
Post #1





Group: Members
Posts: 4
Joined: 3-January 21
Member No.: 27,708



Hello and happy new year .

I have a project to finish for my university and I'm doing a small website , but I have a problem that I don't know how to solve .
As you can see on the screenshots , I have 3 catrgories on top of each page --> HOME - PRODUCTS - SIGN IN

I want on both pages , the words home product and sing in to be in the same row , but when I do margin-top , everything goes wrong . I want the same space from the top .
The second one is that when I press these words , I have colors on click etc , but on the second page it doesnt work and there is a line under each word .

Can anybody help me ? I can also send the code for somebody to help .


Attached File(s)
Attached File  example.pdf ( 201.73k ) Number of downloads: 255
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 3 2021, 10:06 AM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Happy New Year! Attached Image

We need to see the HTML and CSS. Please either link to a sample page or paste the lot in here.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
tntnd
post Jan 3 2021, 10:26 AM
Post #3





Group: Members
Posts: 4
Joined: 3-January 21
Member No.: 27,708



QUOTE(pandy @ Jan 3 2021, 10:06 AM) *

Happy New Year! Attached Image

We need to see the HTML and CSS. Please either link to a sample page or paste the lot in here.


MAIN PAGE :

<DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>F1 Official Site</title>
<link rel="stylesheet" href="project css.css">
</head>
<body>
<section>
<div class="circle"></div>
<header>
<a href="#"><img src="logo.png" class="logo"></a>
<ul>
<li><a href="#">Home</a></li>
<li><a href="file:///C:/Users/alexnd/Desktop/proejct/products.html">Products</a></li>
<li><a href="file:///C:/Users/alexnd/Desktop/proejct/register.html">Register</a></li>
</ul>
</header>
<div class="content">
<div class="textBox">
<h2><br>Welcome to the Official F1 store!<br></h2>


<img src="https://i.gifer.com/Co5.gif">

<p>Formula One (also known as Formula 1 or F1) is the highest class
of international auto racing for single-seater racing cars
sanctioned by the Fédération Internationale de l'Automobile (FIA).</p>

<a href="https://www.formula1.com/" target="_blank">Learn More</a>
</div>
<div class="imgBox">
<img src="img1.png" class="formulacar">
</div>
</div>
<ul class="thumb">
<li><img src="thumb1.png" onclick="imgSlider('img1.png');changeCircleColor('#302F2F')"></li>
<li><img src="thumb2.png" onclick="imgSlider('img2.png');changeCircleColor('#302F2F')"></li>
<li><img src="thumb3.png" onclick="imgSlider('img3.png');changeCircleColor('#302F2F')"></li>
</ul>
<ul class="sci">
<li><a href="https://www.facebook.com/Formula1/"><img src="facebook.png"></a></li>
<li><a href="https://www.instagram.com/f1/"><img src="instagram.png"></a></li>
<li><a href="https://twitter.com/F1?ref_src=twsrc%5Egoogle%7Ctwcamp%5Eserp%7Ctwgr%5Eauthor"><img src="twitter.png"></a></li>
</ul>
</section>

<script type="text/javascript">
function imgSlider(anything){
document.querySelector('.formulacar').src = anything;
}
function changeCircleColor(color){
const circle = document.querySelector('.circle');
circle.style.background = color;
}
</script>

</body>
</html>

MAIN PAGE CSS :

@import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap');
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
section
{
position: relative;
width: 100%;
min-height: 100vh;
padding: 100px;
display: flex;
justify-content: space-between;
align-items: center;
background: #fff;
}
header
{
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 20px 100px;
display: flex;
justify-content: space-between;
align-items: center;
}
header .logo
{
position: relative;
max-width: 160px;
}
header ul
{
position: relative;
display : flex;
}
header ul li
{
list-style: none;
}
header ul li a
{
display: inline-block;
color: rgb(190, 30, 30);
font-weight: 400;
margin-left: 40px;
text-decoration: none;
}
.content
{
position: relative;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
.content .textBox
{
position: relative;
max-width: 600px;
}
.content .textBox h2
{
color: #333;
font-size: 4em;
line-height: 1.4em;
font-weight: 500;
}
.content img
{
border-radius: 12%;
}
.content .textBox p
{
color: #333;
text-align: justify;
text-justify: inter-word;
margin-top: 18%;
}
.content .textBox a
{
display: inline-block;
margin-top: 20px;
padding: 8px 20px;
background: #F12E25;
color: #fff;
border-radius: 40px;
font-weight: 500;
letter-spacing: 1px;
text-decoration: none;
}
.content .imgBox
{
width: 600px;
display: flex;
justify-content: flex-end;
padding-right: 50px;
margin-top: 45px;
}
.content .imgBox img
{
max-width: 500px;
border-radius: 80%;
}
.thumb
{
position: absolute;
left: 50%;
bottom: 20px;
transform: translateX(-50%);
display: flex;
}
.thumb li
{
list-style: none;
display: inline-block;
margin: 0 20px;
cursor: pointer;
transition: 0,5s;
}
.thumb li:hover
{
transform: translateY(-15px);
}
.thumb li img
{
max-width: 60px;
border-radius: 50%;
}
.sci
{
position: absolute;
top: 50%;
right: 30px;
transform: translateY(-50%);
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.sci li
{
list-style: none;
}
.sci li a
{
display: inline-block;
margin: 5px 0;
transform: scale(0.6);
filter: invert(1);
}
.circle
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000000;
clip-path: circle(830px at right 705px);
}
a:link {
color: red;
}

/* visited link */
a:visited {
color: rgb(190, 30, 30);
}

/* mouse over link */
a:hover {
color: rgb(255, 255, 255);
}

/* selected link */
a:active {
color: blue;
}

PRODUCT PAGE :

<html>
<section>
<div class="circle"></div>
<header>
<ul>
<li><a href="file:///C:/Users/alexnd/Desktop/proejct/ProjectHTML.html">Home</a></li>
<li><a href="file:///C:/Users/alexnd/Desktop/proejct/products.html">Products</a></li>
<li><a href="file:///C:/Users/alexnd/Desktop/proejct/register.html">Register</a></li>
</ul>
</header>
<head>
<title>F1 Products</title>
<link rel="stylesheet" href="products.css">
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>

<div class="container">
<h2>New Items</h2>
<div class="row">
<div class="col-md-3">
<div class="product-top">
<img src="product1.png" >
<div class="overlay">
<button type="button" class="btn btn-secondary"
title="Buy Now"><i class="fa fa-eye"></i></button>
<button type="button" class="btn btn-secondary"
title="Buy Later"><i class="fa fa-heart-o"></i></button>
<button type="button" class="btn btn-secondary"
title="Add to cart"><i class="fa fa-shopping-cart"></i></button>
</div>
</div>
<div class="product-bottom text-center">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-half-o"></i>


<h3>F1 toy car</h3>
<h5>85.00$</h5>
</div>
</div>
<div class="col-md-3">
<div class="product-top">
<img src="product2.png">
<div class="overlay">
<button type="button" class="btn btn-secondary"
title="Buy Now"><i class="fa fa-eye"></i></button>
<button type="button" class="btn btn-secondary"
title="Buy Later"><i class="fa fa-heart-o"></i></button>
<button type="button" class="btn btn-secondary"
title="Add to cart"><i class="fa fa-shopping-cart"></i></button>
</div>
</div>
<div class="product-bottom text-center">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-half-o"></i>
<i class="fa fa-star-o"></i>

<h3>F1 cup</h3>
<h5>25.00$</h5>
</div>
</div>
<div class="col-md-3">
<div class="product-top">
<img src="product3.png">
<div class="overlay">
<button type="button" class="btn btn-secondary"
title="Buy Now"><i class="fa fa-eye"></i></button>
<button type="button" class="btn btn-secondary"
title="Buy Later"><i class="fa fa-heart-o"></i></button>
<button type="button" class="btn btn-secondary"
title="Add to cart"><i class="fa fa-shopping-cart"></i></button>
</div>
</div>
<div class="product-bottom text-center">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-o"></i>


<h3>F1 T-shirt</h3>
<h5>70.00$</h5>
</div>
</div>
<div class="col-md-3">
<div class="product-top">
<img src="product4.png">
<div class="overlay">
<button type="button" class="btn btn-secondary"
title="Buy Now"><i class="fa fa-eye"></i></button>
<button type="button" class="btn btn-secondary"
title="Buy Later"><i class="fa fa-heart-o"></i></button>
<button type="button" class="btn btn-secondary"
title="Add to cart"><i class="fa fa-shopping-cart"></i></button>
</div>
</div>
<div class="product-bottom text-center">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-half-o"></i>
<i class="fa fa-star-o"></i>

<h3>F1 Hat</h3>
<h5>30.00$</h5>
</div>
</div>
</div>
</div>
</section>
<script type="text/javascript">
function imgSlider(anything){
document.querySelector('.formulacar').src = anything;
}
function changeCircleColor(color){
const circle = document.querySelector('.circle');
circle.style.background = color;
}
</script>
</body>

</html>

PRODUCT CSS :

.container
{
width: 100%;
margin-top: 10%;
font-family: sans-serif;
letter-spacing: 1px;
}
.container h2
{
background: #5d75a175;
color: rgb(0, 0, 0);
width: 200px;
font-size: 24px;
padding: 5px;
height: 40px;
border: 3px solid rgb(0, 0, 0);
}
.container h2::after
{
content: '';
border-top: 40px solid #000000;
border-right: 40px solid transparent;
position: relative;
left: 70px;
top: 32px;
}
.row
{
margin-top: 30px ;
}
img
{
width: 100%;
}
.product-bottom .fa
{
color: #000000;
font-size: 10px;
}
.product-bottom h3
{
font-size: 20px;
font-weight: bold;
}
.product-bottom h5
{
font-size: 15px;
padding-bottom: 10px;
}
.overlay
{
display: block;
opacity: 0;
position: absolute;
top: 10%;
margin-left: 0;
width: 70px;
}
.product-top:hover .overlay
{
opacity: 1;
margin-left: 5%;
transition: 0,5s;
}
.overlay .fa
{
cursor: pointer;
background-color: rgb(0, 0, 0);
color: rgb(255, 255, 255);
height: 35px;
width: 35px;
font-size: 20px;
padding: 7px;
margin: 5%;
margin-bottom: 5%;
}
.overlay .btn-secondary
{
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
header ul
{
position: relative;
display : flex;

}
header ul li
{
list-style: none;
}
header ul li a
{
display: inline-block;
color: rgb(190, 30, 30);
font-weight: 400;
margin-left: 20px;
text-decoration: none;
}
.product-bottom
{
border: 3px solid #555;
}
.sci
{
position: absolute;
top: 50%;
right: 30px;
transform: translateY(-50%);
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.sci li
{
list-style: none;
}
.sci li a
{
display: inline-block;
margin: 5px 0;
transform: scale(0.6);
filter: invert(1);
}
.circle
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000000;
clip-path: circle(350px at left 10px);
}
a:link {
color: red;
}

/* visited link */
a:visited {
color: rgb(190, 30, 30);
}

/* mouse over link */
a:hover {
color: rgb(255, 255, 255);
}

/* selected link */
a:active {
color: rgb(255, 255, 255);
}
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 3 2021, 11:41 PM
Post #4


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



I start with the link colors. For the product page you have specified that hover and active colors should be the same, white. And that's what you get. So change the active color to blue.


CODE


/* :hover and :active use the same color */

/* mouse over link */
a:hover {
color: rgb(255, 255, 255);
}

/* selected link */
a:active {
color: rgb(255, 255, 255); }


It's usually a good idea to use a common style sheet for all pages, at least for common styling such as fonts, links colors and what else there may be.


The HTML for the product page is messed up. You've placed a chunk of BODY content before HEAD, between the start tags for HMTL and HEAD.

Here.

CODE
<html>


<!-- ˅˅˅˅ This should go in body! ˅˅˅˅ -->
<section>
<div class="circle"></div>
<header>
<ul>
<li><a href="file:///C:/Users/alexnd/Desktop/proejct/ProjectHTML.html">Home</a></li>
<li><a href="file:///C:/Users/alexnd/Desktop/proejct/products.html">Products</a></li>
<li><a href="file:///C:/Users/alexnd/Desktop/proejct/register.html">Register</a></li>
</ul>
</header>
<!--  ^^^^ This should go in body! ^^^^ -->

<head>
<title>F1 Products</title>


And the page lacks a doctype. Without doctype you risk to get browser discrepancies.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 3 2021, 11:49 PM
Post #5


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



As for the margin thing, the HEADER section and its content are styled totally different on the two pages. Among other things HEADER has a 20px top padding on the main page. It has no padding on the product page. That's probably what you see.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 4 2021, 12:07 AM
Post #6


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Forgot the underline. At first I was stumped.

You have this for the links.
CODE

a:link {
color: red;
}

/* visited link */
a:visited {
color: rgb(190, 30, 30);
}

/* mouse over link */
a:hover {
color: rgb(255, 255, 255);
}

/* selected link */
a:active {
color: rgb(255, 255, 255); }


And a bit higher up this.

CODE
header ul li a
{
display: inline-block;
color: rgb(190, 30, 30);
font-weight: 400;
margin-left: 20px;
text-decoration: none;
}



That should work. It behaves like 'text-decoration: none' is overridden by another rule, because if I add !important like below it does work.

CODE
header ul li a
{
display: inline-block;
color: rgb(190, 30, 30);
font-weight: 400;
margin-left: 20px;
text-decoration: none !important;
}


But you have no other declaration for text-decoration. Then I realized you have a link to a bootstrap style sheet. It must be in there. So you have no choice but to use !important if you want to use bootstrap. It gets messy sometimes when these canned libraries and style sheets are used.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 4 2021, 03:15 AM
Post #7


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Actually, bootstrap has specific rules using underline for :hover and :active. It would also work to use text-decoration: none in your rules for :hover and :active .

As long as nothing is changed in the bootstrap CSS. But they seem to use version numbers, so as long as you use the same version you should be fine.

Jesus what a monster. I've never bothered to look at it before. 140930 characters. That's crazy. ohmy.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
tntnd
post Jan 4 2021, 03:46 AM
Post #8





Group: Members
Posts: 4
Joined: 3-January 21
Member No.: 27,708



QUOTE(pandy @ Jan 4 2021, 03:15 AM) *

Actually, bootstrap has specific rules using underline for :hover and :active. It would also work to use text-decoration: none in your rules for :hover and :active .

As long as nothing is changed in the bootstrap CSS. But they seem to use version numbers, so as long as you use the same version you should be fine.

Jesus what a monster. I've never bothered to look at it before. 140930 characters. That's crazy. ohmy.gif


Holy , you read it all !!! ohmy.gif ohmy.gif

Thank you so much for the corections. Imagine that I haven't done HMTL before , it's my first time(1 month now) , so I have a lot of to learn . I know , it's not ready yet , it needs much work , so I will try to do what you said and then we will see . I also have a register page to make with sql , so I'm half the way .

Also , on product page still the headers are blue when I put my mouse over them . They do not change with the colors like the home page . If you can tell me how to put the same font on product page like the first because my code is not working and still the color blue appears even if I change the code .

Thanks again !

This post has been edited by tntnd: Jan 4 2021, 04:13 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 4 2021, 04:03 AM
Post #9


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



QUOTE(tntnd @ Jan 4 2021, 09:46 AM) *

Holy , you read it all !!! ohmy.gif ohmy.gif


I certainly did not! biggrin.gif I just searched it for 'text-decoration' until I found a rule that seemed to fit the bill. It occurs many times...
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
tntnd
post Jan 4 2021, 04:38 AM
Post #10





Group: Members
Posts: 4
Joined: 3-January 21
Member No.: 27,708



QUOTE(pandy @ Jan 4 2021, 04:03 AM) *

QUOTE(tntnd @ Jan 4 2021, 09:46 AM) *

Holy , you read it all !!! ohmy.gif ohmy.gif


I certainly did not! biggrin.gif I just searched it for 'text-decoration' until I found a rule that seemed to fit the bill. It occurs many times...


Lol , ok , I fixed it finally , with the colors etc .

Now the only thing is how to put the same fonts and I'm good
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 19th March 2024 - 04:15 AM