So I have a bug that make me go nuts. I’m writing the code for my personal website, i have two pages so far: index.html which is complete and about.html which I’m currently working on. I use the same stylesheet for both files called style.css. Problem is, for some unknown reason, I cannot style the article and the section of my about.html, css simply skips over that code bit, It doesn’t even appear on chrome developer tools. Anything else seems to work just fine.
Here’s the HTML :
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab:300,400,700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./css/style.css" >
<meta charset="utf-8">
<meta name="viewpoint" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Affordable and professional web design by Alex Fulop">
<meta name="keywords" content="web design, professional web design, responsive web design, affordable web design">
<meta name="author" content="Alex Fulop">
<title>Fulop Web Design | About</title>
</head>
<body>
<header>
<div class="headingContainer">
<div id="branding">
<h1> <span class="highlight">Fulop</span> Web Design</h1>
</div>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li class="current"><a href="about.html">About</a></li>
<li><a href="services.html">Services</a></li>
</ul>
</nav>
</div>
</header>
<section id="newsletter">
<div class="containerNewsletter">
<h1>Subscribe To My Newsletter</h1>
<form class="" action="index.html" method="post">
<input type="email" placeholder="Enter Your Email">
<button type="submit" class="button_1">Subscribe</button>
</form>
</div>
</section>
<section id="main">
<div class="container">
<article class="main-col">
<h1 class="page-title">About me</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</article>
<aside id="sidebar">
<h3>What I Do?</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</aside>
</div>
</section>
<footer>
<p>Fulop Web Design, copyright © 2019</p>
</footer>
</body>
</html>
And here the CSS:
* {
margin: auto;
padding: 0px;
}
body {
font-family: 'Roboto Slab', Helvetica;
font-size: 15px;
line-height: 1.5;
/* font: 15px/1.5/arial, helvetica, sans-serif; (same thing) */
margin: 0px;
background-color: #0D0D0D;
color: #F2F2F2;
width: 80%;
margin: auto;
}
ul {
margin: 0px;
padding: 0px;
}
.button_1 {
border: 0px;
background-color: #273240;
height: 36px;
font-family: 'Roboto Slab', Helvetica;
padding-left: 20px;
padding-right: 20px;
color: #F2F2F2;
}
.content {
overflow: hidden;
}
/* header */
header {
background-color: #A67C87;
padding-top: 30px;
min-height: 70px;
border-bottom: #0D0D0D 30px solid;
}
header a {
color: #F2F2F2;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
}
.container {
background-color: #273240;
}
header li {
float: left;
display: inline;
padding: 0 20px 0 20px;
}
header #branding {
float: left;
}
header #branding h1 {
margin-left: 80px;
}
header nav {
float: right;
margin-top: 10px;
}
header .highlight, header .current a {
color: #273240;
font-weight: bold;
}
header a:hover {
color: #0D0D0D;
font-weight: bold;
}
/* Showcase */
#showcase {
min-height: 400px;
background: url(../img/showcaseBackground.jpg);
background-repeat: no-repeat;
background-size: cover;
text-align: center;
}
.containerShowcase h1 {
position: relative;
top: 100px;
font-size: 55px;
bottom: 10px;
background-color: rgba(38, 38, 38, 0.8);
}
.containerShowcase p {
position: relative;
top: 100px;
bottom: 10px;
background-color: rgba(38, 38, 38, 0.8);
font-size: 20px;
}
/* newsletter */
#newsletter {
border-top: #0D0D0D 30px solid;
}
.containerNewsletter {
background-color: #A67C87;
padding-top: 30px;
min-height: 70px;
}
#newsletter h1 {
float: left;
margin-left: 80px;
}
#newsletter form {
float: right;
margin-right: 80px;
}
#newsletter input[type="email"] {
padding: 4px;
height: 25px;
width: 250px;
}
/* boxes */
#boxes .box {
background-color: #273240;
display: inline-block;
text-align: center;
width: 30%;
padding: 15px;
}
/* sidebar */
aside #sidebar{
float: right;
width: 30%;
margin-top: 10px;
}
/*main-col*/
article #main-col{
float: left;
width: 65%;
}
/* footer */
footer {
padding: 20px;
margin-top: 20px;
text-align: center;
}
Sorry if it is badly formated, I am a beginner. Huge thanks to anyone who could lay a hand.
