Lab3_template.html

<!DOCTYPE html>

<html>
   <head>
      <meta charset = "utf-8">
      <title>Jane Doe Resume (example)</title>
      <style>
        /* A style tag has been created for you. Please add css code inside this style tag */
        /* Note: 2 bonus points if you do not add any addition attributes (ids, classes, etc.) in the given html document */

        body{
            /* TODO: Add padding of 5% viewport width on the left and right sides of the entire page (4pts) */
            padding-left: 5%;
            padding-right: 5%;
        }

        header{
            /* TODO: Add the following styles to the header content (6pts)
                1. Use the text-align property to center the name and professional title
                2. Set the background to a non-white color of your choice (any color but #FFFFFF)
                3. Add a padding of 2% of the viewport height on the top and bottom.
            */
            text-align: center;
            background: rosybrown;
            padding-top: 2%;
            padding-bottom: 2%;
        }

        main{
            /* TODO: Change the layout of the resume to have a narrow left column and a wide right column. (6pts)
                1. Set the "main" section a flex container
                2. Set the flex diretion to row reverse, such that the second section is displayed before the first section.
                3. Allow the two sections to be displayed vertically when the screen is too narrow
            */
            display: flex;
            flex-direction: row-reverse;
            flex-wrap: wrap;
        }
        /*
            TODO:
                1. Make the second section take 1/3 of the screen width, and the first section take 2/3 of the screen width. (4pts)
                2. Set minimum width of the left column to be 200px and the minimum width of the right column to be 600px. (2pts)
        */
        /* right section */
        .first-section{
            flex: 2;
            min-width: 600px;
        }

        /* left column */
        .second-section{
            flex: 1;
            min-width: 200px;
        }

        /*
            For grading:
            Both ways are correct:
                section:nth-of-type(2) or main:nth-child(2)
                section:first-of-type or main:first-child

        */

        /*
            TODO (10 pts): Style the navigation menu such that
                1. Each link is displayed side by side.
                2. Distributes all the items evenly along the main axis with a bit of space left at either end.
                3. Remove the default black dots in front of each navigation item
                   Note: please do this only inside of the nav manu. Keep the default black dots in other bullet lists.
                4. Make each menu item look like a clickable button (you can pick your preferred styles!), you should at least do the following
                    - remove the default underline
                    - change the default text color
                    - change the default background
                5. Center the nav menu on the page. (By default, <ul> tags have additional padding space on the left.)
        */
        nav{
            display: flex;
            flex-direction: column;
            flex-wrap: wrap;
            justify-content: space-between;
        }

        nav ul{
            list-style-type: none;
            display: flex;
            justify-content: space-between;
            padding: 0;
        }

        nav ul li{
            display: inline-flex;
            justify-content: space-between;
            padding-left: 1%;
            padding-right: 1%;
        }

        nav a{
            text-decoration: none;
            background-color: rosybrown;
            color: black;
            padding: 10px;
            padding-top: 20px;
            margin-top: 10px;
            border-radius: 25px;
        }

        nav a:hover{
            background-color: black;
            color: white;
        }
      </style>
   </head>

   <body>
      <header role = "banner">
         <h1>Jane Doe</h1>
         <p>Professional Title</p>
      </header>

      <nav>
         <ul>
            <li><a href = "#profile">Professional Summary</a></li>
            <li><a href = "#work">Work Experience</a></li>
            <li><a href = "#education">Education</a></li>
            <li><a href = "#skills">Skills</a></li>
            <li><a href = "#contact">Contact</a></li>
         </ul>
      </nav>

      <main>
        <section class="first-section">
            <article id="profile">
               <h2>Professional Summary</h2>
               <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid natus commodi dolores quaerat ducimus officia saepe architecto sed amet eveniet, ratione consequatur iure magnam, possimus nulla dolorem, pariatur vitae? Sequi!</p>
            </article>
            <article id="work">
               <h2>Work Experience</h2>
               <div>
                   <h3>Job Position 1</h3>
                   <div><span>Company</span> | <span>Location</span> | <span>Duration</span></div>
                   <div>
                       <ul>
                           <li>Lorem, ipsum dolor sit amet consectetur adipisicing elit. </li>
                           <li>Quo officiis repellat natus pariatur reprehenderit quisquam, nulla voluptas veritatis eius perferendis itaque maiores unde accusamus neque rerum laborum sit laboriosam vel?</li>
                       </ul>
                   </div>
               </div>
               <div>
                   <h3>Job Position 2</h3>
                   <div><span>Company</span> | <span>Location</span> | <span>Duration</span></div>
                   <div>
                       <ul>
                           <li>Lorem, ipsum dolor sit amet consectetur adipisicing elit. </li>
                           <li>Quo officiis repellat natus pariatur reprehenderit quisquam, nulla voluptas veritatis eius perferendis itaque maiores unde accusamus neque rerum laborum sit laboriosam vel?</li>
                       </ul>
                   </div>
               </div>
            </article>
            <article id="projects">
                <h2>Projects</h2>
                <div>
                    <h3>Project Title 1</h3>
                    <div>
                        <ul>
                            <li>Lorem, ipsum dolor sit amet consectetur adipisicing elit. </li>
                            <li>Quo officiis repellat natus pariatur reprehenderit quisquam, nulla voluptas veritatis eius perferendis itaque maiores unde accusamus neque rerum laborum sit laboriosam vel?</li>
                        </ul>
                    </div>
                </div>
                <div>
                    <h3>Project Title 1</h3>
                    <div>
                        <ul>
                            <li>Lorem, ipsum dolor sit amet consectetur adipisicing elit. </li>
                            <li>Quo officiis repellat natus pariatur reprehenderit quisquam, nulla voluptas veritatis eius perferendis itaque maiores unde accusamus neque rerum laborum sit laboriosam vel?</li>
                        </ul>
                    </div>
                </div>
            </article>
        </section>
        <section class="second-section">
            <article id="education">
                <a name="anchorname"></a>
               <h2>Education</h2>
               <div>
                   <h3>Degree 1</h3>
                   <div><span>School</span> | <span>Major</span> | <span>Duration</span></div>
               </div>
               <div>
                   <h3>Degree 2</h3>
                   <div><span>School</span> | <span>Major</span> | <span>Duration</span></div>
               </div>
            </article>
            <article id="courses">
                <h2>Relevant Courses</h2>
                <ul>
                    <li>Course 1</li>
                    <li>Course 2</li>
                </ul>
            </article>
            <article id="skills">
               <h2>Skills</h2>
               <div>
                   <h3>Professional</h3>
                   <ul>
                       <li>Professional skill 1</li>
                       <li>Professional skill 2</li>
                   </ul>
               </div>
               <div>
                   <h3>Technical</h3>
                   <ul>
                       <li>Technical skill 1</li>
                       <li>Technical skill 2</li>
                   </ul>
               </div>
            </article>
            <article id="contact">
               <h2>Contact</h2>
               <ul>
                   <li>Phone Number</li>
                   <li>Email</li>
                   <li>Address</li>
                   <li>Website</li>
               </ul>
            </article>
        </section>
         <aside>
         </aside>
      </main>

      <footer>
        <small>&copy; Copyright 2022, Jane Doe</small>
      </footer>
   </body>
</html>
	<!DOCTYPE html>

	<html>
	<head>
	<meta charset = "utf-8">
	<title>Jane Doe Resume (example)</title>
	<style>
	/* A style tag has been created for you. Please add css code inside this style tag */
	/* Note: 2 bonus points if you do not add any addition attributes (ids, classes, etc.) in the given html document */

	body{
	/* TODO: Add padding of 5% viewport width on the left and right sides of the entire page (4pts) */
	padding-left: 5%;
	padding-right: 5%;
	}

	header{
	/* TODO: Add the following styles to the header content (6pts)
	1. Use the text-align property to center the name and professional title
	2. Set the background to a non-white color of your choice (any color but #FFFFFF)
	3. Add a padding of 2% of the viewport height on the top and bottom.
	*/
	text-align: center;
	background: rosybrown;
	padding-top: 2%;
	padding-bottom: 2%;
	}

	main{
	/* TODO: Change the layout of the resume to have a narrow left column and a wide right column. (6pts)
	1. Set the "main" section a flex container
	2. Set the flex diretion to row reverse, such that the second section is displayed before the first section.
	3. Allow the two sections to be displayed vertically when the screen is too narrow
	*/
	display: flex;
	flex-direction: row-reverse;
	flex-wrap: wrap;
	}
	/*
	TODO:
	1. Make the second section take 1/3 of the screen width, and the first section take 2/3 of the screen width. (4pts)
	2. Set minimum width of the left column to be 200px and the minimum width of the right column to be 600px. (2pts)
	*/
	/* right section */
	.first-section{
	flex: 2;
	min-width: 600px;
	}

	/* left column */
	.second-section{
	flex: 1;
	min-width: 200px;
	}

	/*
	For grading:
	Both ways are correct:
	section:nth-of-type(2) or main:nth-child(2)
	section:first-of-type or main:first-child

	*/

	/*
	TODO (10 pts): Style the navigation menu such that
	1. Each link is displayed side by side.
	2. Distributes all the items evenly along the main axis with a bit of space left at either end.
	3. Remove the default black dots in front of each navigation item
	Note: please do this only inside of the nav manu. Keep the default black dots in other bullet lists.
	4. Make each menu item look like a clickable button (you can pick your preferred styles!), you should at least do the following
	- remove the default underline
	- change the default text color
	- change the default background
	5. Center the nav menu on the page. (By default, <ul> tags have additional padding space on the left.)
	*/
	nav{
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	justify-content: space-between;
	}

	nav ul{
	list-style-type: none;
	display: flex;
	justify-content: space-between;
	padding: 0;
	}

	nav ul li{
	display: inline-flex;
	justify-content: space-between;
	padding-left: 1%;
	padding-right: 1%;
	}

	nav a{
	text-decoration: none;
	background-color: rosybrown;
	color: black;
	padding: 10px;
	padding-top: 20px;
	margin-top: 10px;
	border-radius: 25px;
	}

	nav a:hover{
	background-color: black;
	color: white;
	}
	</style>
	</head>

	<body>
	<header role = "banner">
	<h1>Jane Doe</h1>
	<p>Professional Title</p>
	</header>

	<nav>
	<ul>
	<li><a href = "#profile">Professional Summary</a></li>
	<li><a href = "#work">Work Experience</a></li>
	<li><a href = "#education">Education</a></li>
	<li><a href = "#skills">Skills</a></li>
	<li><a href = "#contact">Contact</a></li>
	</ul>
	</nav>

	<main>
	<section class="first-section">
	<article id="profile">
	<h2>Professional Summary</h2>
	<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid natus commodi dolores quaerat ducimus officia saepe architecto sed amet eveniet, ratione consequatur iure magnam, possimus nulla dolorem, pariatur vitae? Sequi!</p>
	</article>
	<article id="work">
	<h2>Work Experience</h2>
	<div>
	<h3>Job Position 1</h3>
	<div><span>Company</span> \| <span>Location</span> \| <span>Duration</span></div>
	<div>
	<ul>
	<li>Lorem, ipsum dolor sit amet consectetur adipisicing elit. </li>
	<li>Quo officiis repellat natus pariatur reprehenderit quisquam, nulla voluptas veritatis eius perferendis itaque maiores unde accusamus neque rerum laborum sit laboriosam vel?</li>
	</ul>
	</div>
	</div>
	<div>
	<h3>Job Position 2</h3>
	<div><span>Company</span> \| <span>Location</span> \| <span>Duration</span></div>
	<div>
	<ul>
	<li>Lorem, ipsum dolor sit amet consectetur adipisicing elit. </li>
	<li>Quo officiis repellat natus pariatur reprehenderit quisquam, nulla voluptas veritatis eius perferendis itaque maiores unde accusamus neque rerum laborum sit laboriosam vel?</li>
	</ul>
	</div>
	</div>
	</article>
	<article id="projects">
	<h2>Projects</h2>
	<div>
	<h3>Project Title 1</h3>
	<div>
	<ul>
	<li>Lorem, ipsum dolor sit amet consectetur adipisicing elit. </li>
	<li>Quo officiis repellat natus pariatur reprehenderit quisquam, nulla voluptas veritatis eius perferendis itaque maiores unde accusamus neque rerum laborum sit laboriosam vel?</li>
	</ul>
	</div>
	</div>
	<div>
	<h3>Project Title 1</h3>
	<div>
	<ul>
	<li>Lorem, ipsum dolor sit amet consectetur adipisicing elit. </li>
	<li>Quo officiis repellat natus pariatur reprehenderit quisquam, nulla voluptas veritatis eius perferendis itaque maiores unde accusamus neque rerum laborum sit laboriosam vel?</li>
	</ul>
	</div>
	</div>
	</article>
	</section>
	<section class="second-section">
	<article id="education">
	<a name="anchorname"></a>
	<h2>Education</h2>
	<div>
	<h3>Degree 1</h3>
	<div><span>School</span> \| <span>Major</span> \| <span>Duration</span></div>
	</div>
	<div>
	<h3>Degree 2</h3>
	<div><span>School</span> \| <span>Major</span> \| <span>Duration</span></div>
	</div>
	</article>
	<article id="courses">
	<h2>Relevant Courses</h2>
	<ul>
	<li>Course 1</li>
	<li>Course 2</li>
	</ul>
	</article>
	<article id="skills">
	<h2>Skills</h2>
	<div>
	<h3>Professional</h3>
	<ul>
	<li>Professional skill 1</li>
	<li>Professional skill 2</li>
	</ul>
	</div>
	<div>
	<h3>Technical</h3>
	<ul>
	<li>Technical skill 1</li>
	<li>Technical skill 2</li>
	</ul>
	</div>
	</article>
	<article id="contact">
	<h2>Contact</h2>
	<ul>
	<li>Phone Number</li>
	<li>Email</li>
	<li>Address</li>
	<li>Website</li>
	</ul>
	</article>
	</section>
	<aside>
	</aside>
	</main>

	<footer>
	<small>© Copyright 2022, Jane Doe</small>
	</footer>
	</body>
	</html>