QUESTION
- Add the meta viewport element within the head element of your HTML files.
- Determine the most essential content on each page and style the HTML elements for a mobile viewport. Use a minimum of two class attributes within your website and create style rules for each class selector. Ensure that all page content fits within the mobile viewport.
- Design a mobile-friendly navigation system.
- Use at least one custom Google Font.
- Apply rounded corners to at least one element within your website.
- Comment out or remove any style rules that do not pertain to the mobile viewport design.
- Validate all HTML and CSS files and correct any errors.
- Review your website with a mobile simulator to ensure it appears as intended.
- Add a minimum of two media queries to your style sheet; one for tablet and at least one for desktop.
- Hide any mobile-specific content and show any tablet or desktop-specific content.
- Use at least one dynamic pseudo-class in your desktop media query.
- Add comments in your style sheet to note where each media query begins, and add other comments for new style rules as appropriate.
- View and test each viewport design and adjust breakpoints where necessary. Exit device mode to view and test the hover pseudo-class.
- Review your files for best coding practices; ensure proper spacing and indents for improved readability.
- Validate all HTML and CSS files and correct any errors.
MY HTML CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- Linking the webpage to style sheet -->
<link rel="stylesheet" href="./styles.css">
<title>Portfolio</title>
</head>
<body>
<!--for the main/unique content of the page-->
<main>
<header>
<nav class="navbar">
<ul id="list">
<li><a
href="projects.html">Projects</a></li>
<li><a href="about.html">About
Me</a></li>
<li><a href="contact.html">Contact
me</a></li>
</ul>
</nav>
<h1 class="primary-heading">John Smith 04/01/2021
</h1>
<!-- height and width have been removed -->
<img src="IMAGE/john.jpg">
<h3 class="secondary-heading">Who Am I?</h3>
</header>
<hr>
<!-- here starts the content on the page-->
<section>
<h3>My Experiences </h3>
<!-- here goes a symbol-->
<div>
<p>♥</p>
</div>
<article>
<p>
I WILL INCLUDE MY EXPERIENCES HERE.
</p>
<p>
I WILL INCLUDE MY EXPERIENCES HERE.
</p>
</article>
</section>
</main>
<footer>© Copyright 2021 XYZ</footer>
</body>
</html>
CSS STYLE CODE:
/* Select all the elements using the universal selector and give
them margin 0 and padding 0. It removes all inconsistent spacing
between all browsers. */
/* CSS Reset Style Rules */
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
/* padding: 30px; */
color: whitesmoke;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue',
sans-serif;
/* overflow: hidden; */
background-color: rgba(0,0,0,0.85);
}
/* For the main tag */
main{
margin-top: 30px;
margin-left: 10px;
margin-bottom: 20px;
}
/* For your image */
img{
display: block;
width: 28%;
height: 270px;
border: 2px solid #2ecc71;
/* margin: 10px 20px; */
}
/* For unordered list with id=list */
#list{
margin-bottom: 20px;
}
/* list elements inside unorder list */
.navbar > ul > li{
list-style: none;
display: inline-block;
margin-right: 5px;
}
/* anchor tags */
a{
text-decoration: none;
font-size: 20px;
color: black;
background: #2ecc71;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
/* display: inline-block; */
}
.primary-heading,
.secondary-heading{
margin: 20px 0;
}
footer{
background: #2ecc71;
color: white;
position: fixed;
bottom: 0;
width: 100%;
height: 40px;
font-size: 18px;
text-align: center;
padding-top: 5px;
}
article{
display: flex;
}
article > p{
border: 2px solid #2ecc71;
margin: 10px 20px;
padding: 10px;
text-align: justify;
border-radius: 8px;
}
Public Answer
