Stuck on Product Landing Page challenge

HTML-CSS
1

I’ve been working on this one for a long, long time so I just left it behind and tried with another things. I felt kind of stuck, probably because my lack of knowledge, so after a month I tried again and after a while it seemed to be something decent enough. The problem is that when I copied all my code to the pen, the layout and the icons changed, and I cannot find any way to make it as in the browser alone.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Product Landing Page</title>
	<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;300&family=Rajdhani:wght@500&display=swap" rel="stylesheet">
	<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
	<link rel="stylesheet" href="../CSS Improvements/normalize.css">
	<link rel="stylesheet" href="../PRUEBA/PLP-css.css">
	<script src="../CSS Improvements/modernizr-custom.js"></script>
</head>
<body>
<!-- HEADER -->
<header id="header">
	<div id="logo">
		<img id="header-img" src="../pictures/graphic card 1.png" alt="Vector of an open book logo">
	</div>
	<div id="navigation">
		<nav id="nav-bar">
			<a class="nav-link" href="#information">Info</a>
			<a class="nav-link" href="#guide">guide</a>
			<a class="nav-link" href="#deals">Deals</a>
			<a class="nav-link" href="#newsletter">Newsletter</a>
		</nav>
	</div>
</header>
<!-- MAIN -->
<main>
	<section id="information">
		<div id="about-gc">
			<h2>About Graphics Cards</h2>
			<p class="info-gc">
					A graphics card is a type of display adapter or video card installed within most computing devices to display graphical data with high clarity, colour, definition and overall appearance. A graphics card provides high-quality visual display by processing and executing graphical data using advanced graphical techniques, features and functions.
			</p>
			<p class="info-gc">
					A graphics card is also known as a graphics adapter, graphics controller, graphics accelerator card or graphics board.
			</p>
		</div>
		<div id="video-product">
				<iframe width="853" height="505" src="https://www.youtube.com/embed/CU_dlbxpbjE" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
		</div>
	</section>
	<section id="guide">
		<div id="guide-gc">
			<h2>Guide to find your NVidia Graphics Card</h2>
			<p id="help-find">
					We will guide you to find a graphics card that fits your budget and parameters that you have in mind in terms of hardware, whether to buy a new one or simply replace your old graphics. So, for such thing, you need to keep in mind three points.
				</p>
			<div id="find-container">
				<div class="find-fact">
					<div class="icons">
						<i id="work" class="material-icons icon small">work</i>
						<i id="esport-controller" class="material-icons icon small">sports_esports</i>
					</div>
					<div class="fact-desc">
						<h3>What is it going to be used for</h3>
						<p>
						This is where you define if the card will really be destined to play, work or other varied uses.
						</p>
					</div>
				</div>	
				<div class="find-fact">
						<div class="icons">
							<i id="build" class="material-icons icon">build</i>
						</div>
						<div class="fact-desc">
						<h3>What hardware do you have?</h3>
						<p>
						In this point you are going to take into account the hardware you have, such as: processor, dimension of the tomer case, source power, amperage and connectors.
						</p>
						</div>
					</div>
					<div class="find-fact">
						<div class="icons">
							<i id="paid" class="material-icons icon">paid</i>
						</div>
						<div class="fact-desc">
						<h3>Budget</h3>
						<p>
						Although it may seem like a great delimitation when deciding, the truth is that there are countless options for affordable prices and quite decent performance.
						</p>
						</div>
					</div> 
				</div>				
			</div>
	</section>
	<section id="deals">
			<div id="new-deals">
				<h2>New Deals</h2>
				<div id="deals-wrapper">
					<div class="products-deals" id="must-try">
						<img src="https://assets.nvidia.partners/images/png/3070-ti-back-300x198.png" width="200" height="115" alt="ZOTAC GAMING GeForce RTX 3070 Ti Trinity">
						<div class="deal-info">
							<details>
								<summary><strong>GeForce RTX 3020 Ti</strong></summary>
								<h5>Cooling Unit:</h5>
								<p>Fan</p>
								<h5>Boost Clock Speed:</h5>
								<p>1770 MHz</p>
								<h5>GPU Memory Size:</h5>
								<p>8 GB</p>
						</details>
						</div><div class="btn">
							<button>Add to cart</button>
						</div>
						
					</div>
					<div class="products-deals">
						<img src="https://www.nvidia.com/content/dam/en-zz/Solutions/titan/titan-rtx/nvidia-titan-rtx-shop-2c50-d@2x.png" width="200" alt="NVIDIA TITAN RTX">
						<div class="deal-info">
							<details>
								<summary><strong>Nvidia TITAN RTX</strong></summary>
								<h5>Cooling System:</h5>
								<p>Dual 13-Blade Fans</p>
								<h5>Boost Clock Speed:</h5>
								<p>1770 MHz</p>
								<h5>GPU Memory Size:</h5>
								<p>24 Gb DDR6</p>
							</details>
						</div><div class="btn">
							<button>Add to cart</button>
						</div>
						
					</div>
					<div class="products-deals">
						<img src="https://www.nvidia.com/content/dam/en-zz/Solutions/design-visualization/productspage/quadro/quadro-desktop/v2/nvidia-quadro-rtx-a6000-4c25-l.png" width="200" alt="NVIDIA RTX A6000">
						<div class="deal-info">
							<details>
								<summary><strong>NVIDIA RTX A6000</strong></summary>
								<h5>Thermal Solution:</h5>
								<p>Active</p>
								<h5>GPU Memory Size:</h5>
								<p>48 GB with Error-Correcting Code (ECC)</p>
								<h5>Max Simultaneous Displays:</h5>
								<p>4x 4096 x 2160 @ 120 Hz</p>
								<p>4x 5120 x 2880 @ 60 Hz</p>
								<p>2x 7680 x 4320 @ 60 H</p>
								<h5>Nvidia Ampere Architechtural CUDA Cores:</h5>
								<p>10,752</p>
								<h5>VR Ready:</h5>
								<p>Yes</p>
							</details>
						</div><div class="btn">
							<button>Add to cart</button>
						</div>
						
					</div>
				</div>
			</div>
	</section>
	<section id="newsletter">
			<div id="newsletter-form">
				<h2>Newsletter</h2>
				<p>Subscribe in our <span>newsletter</span> to know about the latest products as fast as they are on stock, monthly deals, discount coupons and even more!</p>
				<form id="form" action="https://www.freecodecamp.com/email-submit" method="post">
					<input id="email" name="email" type="email" placeholder="Enter Your Email">
					<button>Submit</button>
				</form>
			</div>
		</section>
	</main>
<!-- FOOTER -->
	<footer>
		<p>Thanks for visiting us!</p>
		<p>For further information o to contacts us, please click <a href="_blank">here</a>.</p>
	</footer>
</body><strong></strong>
</html>
2

@sagos0919, your page looks good. I/we have no idea what you were seeing previously so I’ll give you some things you can look at.

  • The test script, with all tests passing, should be included when you submit your projects.
    • Your page passes 13/16 user stories. Click the red button to see which test(s) are failing and text to help you correct the issue.
      Be sure and read more than just the first line of the failing message. The ability to read and comprehend error messages is a skill you’ll need to acquire as a developer. Ask questions on what you don’t understand.
  • Codepen provides the boilerplate for you. It only expects the code you’d put within the body element in the HTML editor. (No need to include the body tags). For anything you want to add to the <head> element click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.
    • For instance, links to fonts go in the box labeled ‘Stuff for <head>’
      Note also that you have links that reference files on your computer. They need to be someplace codepen can access them. GitHub maybe. I see one is a normalize stylesheet. If you really need this then you can click on the cog icon in codepen’s CSS editor and select ‘Normalize’ for the CSS Base.
  • Run your HTML code through the W3C validator.
    • There are HTML syntax/coding errors you should be aware of and address.
      Although these should not affect how the page displays in your browser or codepen they need to be cleaned up.

Hope that helps.

1 Like
3

Thanks a lot!

After few videos and trying lot of times with one thing or another, finally came to good results or at least what I wanted while at the same time fulfilled the points of the exercise.

4

It looks a lot better @sagos0919. All tests pass and the page is responsive.

A couple of things you can come back and revisit in the future,

  • Run your HTML code through the W3C validator (linked above). There are a couple of issues to clean up. One of them is the link to the image in your header. You can do some searching and find a place that hosts images for free.
  • Check that the user has entered a valid email addr. Throw an HTML5 validation error if not.
    You learned to do this when coding the survey form
  • Accessibility is about being accessible to all users. Review the giving meaningful text to links lesson. For a more thorough explanation read Web Accessibility in Mind.
    • “here” is not accessible
      Also, the blue link on a blue background does not offer enough contrast to be easily seen. You can use contrast checker to help.
5

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.