Create an HTML and CSS page:

No

tags in the HTML code.

Do not use pixels (px). Use em, percent, and etc.

HTML Starter Code:

You are asked to build out a model call to action web page featuring three different User Experience (UX) degrees available at DePaul CDM. The page consists of a header featuring the university name, its tree logo, and the college name. The call to action features a large titled visual image, with three call to action panels beneath it. Each panel consists of a degree title, a paragraph description and an action button. Below is a screen capture of my solution. The assignment specifications detail which points you need to hit, and which design characteristics you may determine on your own. DEPAUL UNIVERSITY COLLEGE OF COMPUTING AND DIGITAL MEDIA Learning User Experience at DePaul CDM Masters of Science Human-Computer Interaction Masters of Arts Experience Design Bachelor of Science User Experience Design The Beam ederetuleredenen Theo vi vn mn, v ai vua Conce deve Sogn Cesign 10. Regatywne for ca. to the and concert and the wing. top med den students widendido otro sprache yane posto Soon apico Erich Wenn www. on todet. This image differs slightly from the one shown in PowerPoint. The header is rearranged, the fonts used are all installed from Google Fonts, the image is cropped differently, the three panels now have a light grey border, and the action buttons are not aligned at the bottom of the panels (which you may not be able to replicate without going beyond assignment expectations.) As I don't anticipate you will select the same fonts as I have, the feel of your solution may differ from mine. 1. I am providing you with extensive starter HTML for this lab. 2. Your heading must include the university name, the college name, and DePaul's tree logo. I am providing you with an SVG version of the logo. This content, if presented in one row, should be vertically centered. I implemented vertical centering by using flexbox. 3. The remaining site content is contained within a wrapper that is centered on the page. My wrapper is 8Dem wide, but you are free to choose a width that works for you. Content within this wrapper should be organized using flexbox. 4. The jumbotron includes both image and heading. It is your choice whether to draw a border around it. I am providing you with the image. My version of the image is cropped using CSS. For this lab, crop with css if you can. If you cannot, either crop with an editing tool, or show the image full height. Implement as a foreground image. 5. The three panels consist of headings, paragraph text, and a call to action button that points to CDM's actual page for each degree program. Content within each panel should be organized using flexbox. In class i emphasized to use flex-direction: row; even though the panel content is vertical. In the end, I decided to use flex-direction: column; as there is a nifty solution for aligning the buttons at bottom that only works with this choice. If you decide not to align buttons at bottom (like my previous screen capture), then you will be happy in flex-direction: row;. If you want to replicate my button alignment, flex-direction: column is the way to go (but even then the solution is not obvious). You don't have to align the buttons at the bottom; consider it a bonus challenge. The panel borders are optional. But if you include borders, the outer borders should match the border around the jumbotron. Whether or not you use borders, the left/right edge of text should match the left/right edge of the jumbotron image. 6. The calls to buttons should appear as buttons, but you have aesthetic control over what the buttons look like. Buttons should provide hover and action feedback. 7. You may adjust HTML elements if need be from what I have provided (as long as your adjustments remain semantic). 8. All of the text on your solution page should be implemented with foundry fonts (like Google Fonts) or installed fonts. Your solutions should not contain any default system fonts. 1. Do not rely on any browser default CSS. To ensure this is the case, include the following link element in your HTML ABOVE your link to your own CSS file: This "reset" file essentially turns off all the default css and leaves you to start with a blank presentation slate. 2. DO NOT use Pixel as a unit of measure anywhere in your css. All of your sizing must be done in Em, Percent, vw, or VH. (I am not expecting you to use the latter two, but they are available to you if you wish to explore.) 3. Document both your HTML and CSS with source code notes. 4. As always the webpage must be built using only HTML5. You are not permitted to use CSS nor JavaScript at all. You are not permitted to build in XHTML or HTML4.01. Any use of

or or

---

or or must be for semantic, not presentational, purposes. Beyond these constraints, you may use any other HTML5 element you deem semantically appropriate. 5. Your page layout MUST be achieved using Flexbox. You may not use float or position or table or display: inline-block to organize the presentation of your content. 6. The of your HTML5 file must contain: a. A meta element naming the Unicode character set you want the browser to use (UTF-8). b. a 6 7 8 9 10 11 12 13 14 9 10 11 12 13 14