I was wondering about my HTML & CSS. I'll just create a list as to what concerns I have:
- Does my HTML & CSS follow proper coding standards and conventions?
- Am I making proper use of semantic tags in my HTML document?
- Is there any better way to do some of the stuff I am trying to accomplish? (e.g. centering elements in my document)
- I completely understand if you don't wanna do this one, but if you can run the code and look at the website, how does it stand out to you? Is the way the content is formatted appealing or does it not fit with the current context of the page (which is advertising and displaying info)? If it doesn't fit, could you recommend some resources by which I can learn how to format content on a page properly to make it more appealing?
HTML Source Code:
<!DOCTYPE html>
<html>
<head>
<title>Rollstar BJJ</title>
<!-- Font loading -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans|Roboto" rel="stylesheet">
<link rel="stylesheet" href="../CSS%20Files/style.css" />
<meta charset="utf-8" />
</head>
<body>
<main class="center-align">
<header>
<h1>Rollstar Brazilian Jiu-Jitsu</h1>
<p>Begin and end with respect</p>
</header>
</main>
<aside>
<h2>Anything you want to know</h2>
<hr />
</aside>
<section>
<header class="info-block justify-left">
<h2>About Us</h2>
<hr />
<p>Rollstar BJJ was initiated in 2017, and began with a small class of ~20 students in its free trial open mat session. Since then, it's presence has seen significant growth, with the paid students being around 14 in total, and our students already making competition appearances!</p>
</header>
<header class="info-block justify-right">
<h2>Our Mission</h2>
<hr />
<p>To equip our students with the skills the need to survive both on the street and in competition environments, as well as to handle any situation or altercation with a calm demeanor, and ending it harmlessly, with respect, leaving both parties reconciled. Also, as a total bonus: To have fun!</p>
</header>
<header id="contact-info" class="info-block center-align">
<h2>The Staff</h2>
<p><a href="#">Head Instructor Hernan</a> (BJJ Brown Belt from Ground Control, 10 years of experience)</p>
<hr />
<p class="small-text">That's all the current staff that I know lol ;) Also the contact link is dead sorry :(</p>
</header>
</section>
<hr />
<section>
<h2>Media</h2>
</section>
<hr />
<footer>
<p>© Rollstar Brazilian Jiu-Jitsu 2018</p>
</footer>
</body>
</html>
Formatting problems do not allow me to indent code correctly.
CSS Source Code:
h1, h2, h3, h4, h5, h6 {
font-family: Open Sans, sans-serif;
}
p {
font-family: Roboto, sans-serif;
}
a {
text-decoration: none;
}
a:hover {
color: dodgerblue;
}
/* For some reason the id overrides
ALL the original styles applied to objects of the .center-align class
SO I have to re-apply some of them... :(*/
#contact-info {
display: block;
margin: 0 auto;
text-align: center;
}
.center-align {
width: 500px;
margin: 0 auto;
text-align: center;
}
.small-text {
font-size: 10px;
font-style: italic;
}
.info-block {
position: relative;
display: inline-block;
width:25%;
padding:10px;
margin: 30px 15px;
border: 3px solid black;
border-radius: 15px;
}
.justify-left {
left: 50px;
}
.justify-right {
right: 50px;
float: right;
}
aside > h2 {
width: 500px;
margin: 0 auto;
text-align: center;
}
