So I just started coding so don't judge me. I'm trying to create my website using vs code, I'm using html and css, however the title and button I'm trying to put in the top left corner of the code are not showing up on the browser, I've searched on the web and can't seem to understand. I am using google chrome browser to debug my code.
This is the html part:
/* This is a reset stylesheet to ensure consistency across different browsers */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* Custom styles for the poster store website */
body {
font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;
background-color: white;
color: #333;
}
header {
background-color: #87CEFA;
color: white;
text-align: center;
padding: 1em;
}
.header-container {
display: flex;
align-items: center;
justify-content: center;
height: 100px;
}
header h1 {
margin: 0;
font-size: 2em;
}
header .subtext {
display: block;
font-size: 1em;
font-style: italic;
color: white;
margin-top: 10px;
}
nav {
background-color: #87CEFA;
padding: 0.5em;
display: flex;
justify-content: space-between;
align-items: center;
position: fixed; /* this line adds */
top: 0; /* this line adds */
width: 100%; /* this line adds */
z-index: 1; /* this line adds */
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
}
nav li {
margin-right: 1em;
}
nav a {
color: white;
text-decoration: none;
font-weight: bold;
transition: all 0.3s ease;
}
nav a:hover {
color: #333;
}
/* Add this class to main section to create space for navigation bar */
main {
margin: 2em 0 0 0; /* this line changed */
}
main {
margin: 2em;
}
section {
margin-bottom: 2em;
}
h2 {
margin-top: 1em;
font-weight: normal;
}
ul {
list-style-type: none;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
li {
margin-bottom: 1em;
flex: 1 0 30%;
}
img {
width: 100%;
max-width: 200px;
height: auto;
}
button {
background-color: #87CEFA;
color: white;
padding: 0.5em 1em;
border: none;
font-weight: bold;
transition: all 0.3s ease;
cursor: pointer;
border-radius: 5px;
box-shadow: 0px 2px 3px #888888;
text-transform: uppercase;
font-size: 0.9em;
}
button:hover {
background-color: #4169E1;
box-shadow: 0px 4px 6px #888888;
}
.menu-icon {
position: absolute;
top: 20px;
right: 20px;
width: 40px;
height: 30px;
cursor: pointer;
}
.menu-icon:before,
.menu-icon:after,
.menu-icon div {
position: absolute;
top: 12px;
right: 0;
height: 3px;
width: 30px;
background: #333;
}
.menu-icon:before {
transform: rotate(45deg);
}
.menu-icon:after {
transform: rotate(-45deg);
}
.category-button {
background-color: #87CEFA;
color: white;
padding: 0.5em 1em;
border: none;
font-weight: bold;
transition: all 0.3s ease;
cursor: pointer;
border-radius: 5px;
box-shadow: 0px 2px 3px #888888;
text-transform: uppercase;
font-size: 0.9em;
margin-right: 1em;
display: block;
}
.category-button:hover {
background-color: #4169E1;
box-shadow: 0px 4px 6px #888888;
}
footer {
background-color: #87CEFA;
text-align: center;
padding: 0.5em;
color: #333;
}
/* Media Queries */
@media (max-width: 767px) {
nav ul {
flex-direction: column;
}
nav li {
margin-bottom: 0.5em;
}
section {
flex: 1 0 100%;
}
li {
flex: 1 0 100%;
}
}
<!DOCTYPE html>
<html>
<head>
<title>Poster Store</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div class="header-container">
<h1>Poster Store</h1>
<div class="subtext">Inspiring and New</div>
</div>
</header>
<button class="menu-icon">
</button>
<nav>
<ul>
<li><a href="#featured">Featured Posters</a></li>
<li><a href="#categories">Poster Categories</a></li>
<li><a href="#about">About Us</a></li>
<li><a href="#contact">Contact Us</a></li>
</ul>
</nav>
<main>
<section id="featured">
<h2>Featured Posters</h2>
<ul>
<li>
<h3>Poster 1</h3>
<img src="https://i.etsystatic.com/27014418/r/il/dae7c0/2873452298/il_570xN.2873452298_j7zs.jpg" alt="Kid Cudi Man on the mood album cover poster">
<p>Album cover poster</p>
<button>Add to Cart</button>
</li>
<li>
<h3>Poster 2</h3>
<img src="https://images.squarespace-cdn.com/content/v1/5d210a3c8ae83700013f313b/1562529741621-YEQY08PGYXBIRU8EWBAV/Screen+Shot+2019-07-07+at+4.01.10+PM.png?format=2500w" alt="Kanye West MBDTF album cover poster">
<p>Album cover poster</p>
<button>Add to Cart</button>
</li>
<li>
<h3>Poster 3</h3>
<img src="https://i.ebayimg.com/images/g/hJoAAOSwNK5fEoCb/s-l1600.jpg" alt="Mac Miller Swimming album cover poster">
<p>Album cover poster</p>
<button>Add to Cart</button>
<li>
<h4>Poster 4</h4>
<img src="https://d1csarkz8obe9u.cloudfront.net/themedlandingpages/tlp_hero_cool-posters-603bc3221337a524135e510d8ea4328a-1591125961.jpg" alt="cool">
<p>Poster</p>
<button>Add to Cart</button>
</li>
<li>
<h5>Poster 5</h5>
<img src="https://pbs.twimg.com/media/DwSC3wZUYAAQcUv.jpg" alt="cool">
<p>Poster</p>
<button>Add to Cart</button>
</li>
</ul>
</section>
<section id="categories">
<h2>Poster Categories</h2>
<ul>
<li><a href="#" class="category-button">Lol</a></li>
<li><a href="#" class="category-button">Category 2</a></li>
<li><a href="#" class="category-button">Category 3</a></li>
</ul>
</section>
<section id="about">
<h2>About Us</h2>
<p>A new poster store </p>
</section>
<section id="contact">
<h2>Contact Us</h2>
<p>feridtalibli854@gmail.com</p>
</section>
</main>
<footer>
<p>Copyright ©2022 Poster Store</p>
</footer>
<div class="menu-icon">
</div>
</body>
</html>
When I check the browser, there are few things with lines on it, for example I tried changing the font of the page once and using that, but I don't think that's the problem...
This is the part (css):
body {
font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;
background-color: white;
color: #333;
}
I try to see something like this in the upper middle position of the web page: "Poster Shop" and the subtext "Inspiring and New".
P粉0329004842024-04-02 12:52:33
The header shows up to me in Firefox and Chrome, I have "flex-direction:column;" added to make the elements one below the other. The button is empty without any text.
header {
background-color: #87CEFA;
color: white;
text-align: center;
padding: 1em;
}
.header-container {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
height: 100px;
}
header h1 {
margin: 0;
font-size: 2em;
}
header .subtext {
display: block;
font-size: 1em;
font-style: italic;
color: white;
margin-top: 10px;
}
Poster Store
Inspiring and New