Parsons 2017 Fall Web Design<\/title> \n <meta name=\"Author\" content=\"Onno De Jong\"\/> \n <meta name=\"CreationTime\" content=\"2023-05-09T10:40:44Z\"\/> \n <meta name=\"ModificationTime\" content=\"2023-05-09T10:40:44Z\"\/> \n <meta name=\"Generator\" content=\"Cocoa HTML Writer\"\/> \n <meta name=\"CocoaVersion\" content=\"2299.5\"\/><\/p>\n<style type=\"text\/css\">\n p.p1 {margin: 0; font: 16.0px Helvetica; color: #272832; -webkit-text-stroke: #272832}\n p.p2 {margin: 0; font: 16.0px Helvetica; color: #9c9bb0; -webkit-text-stroke: #9c9bb0; min-height: 19.0px}\n p.p3 {margin: 0; font: 16.0px Helvetica; color: #272832; -webkit-text-stroke: #272832; min-height: 19.0px}\n p.p4 {margin: 0; font: 16.0px Times; color: #ffffff; -webkit-text-stroke: #ffffff}\n p.p5 {margin: 0; font: 16.0px Helvetica; color: #ffffff; -webkit-text-stroke: #ffffff}\n p.p6 {margin: 0; text-align: center; font: 12.0px Helvetica; color: #b8b8c8; -webkit-text-stroke: #b8b8c8; min-height: 14.0px}\n p.p7 {margin: 0; font: 12.0px Helvetica; color: #272832; -webkit-text-stroke: #272832}\n p.p8 {margin: 0; font: 16.0px Helvetica; color: #2a3140; -webkit-text-stroke: #2a3140}\n p.p9 {margin: 0; font: 16.0px Helvetica; color: #2a3140; -webkit-text-stroke: #2a3140}\n p.p10 {margin: 0; font: 12.0px Helvetica; color: #d0d0dc; -webkit-text-stroke: #d0d0dc}\n p.p11 {margin: 0; text-align: center; font: 12.0px Helvetica; color: #d0d0dc; -webkit-text-stroke: #d0d0dc; min-height: 14.0px}\n p.p12 {margin: 0; font: 14.0px Helvetica; color: #14986a; -webkit-text-stroke: #14986a; background-color: #000000}\n p.p13 {margin: 0; font: 14.0px Helvetica; color: #ffffff; -webkit-text-stroke: #ffffff; background-color: #000000}\n p.p14 {margin: 0; font: 14.0px Helvetica; color: #d41466; -webkit-text-stroke: #d41466; background-color: #000000}\n p.p15 {margin: 0; font: 14.0px Helvetica; color: #ffffff; -webkit-text-stroke: #ffffff; background-color: #000000; min-height: 17.0px}\n p.p16 {margin: 0; text-align: center; font: 16.0px Helvetica; color: #9c9bb0; -webkit-text-stroke: #9c9bb0; min-height: 19.0px}\n p.p17 {margin: 0; text-align: center; font: 12.0px Helvetica; color: #272832; -webkit-text-stroke: #272832; min-height: 14.0px}\n p.p18 {margin: 0; font: 14.0px Helvetica; color: #ffffff; color: rgba(255, 255, 255, 0.6); -webkit-text-stroke: rgba(255, 255, 255, 0.6); background-color: #000000}\n p.p19 {margin: 0; font: 14.0px Helvetica; color: #ffffff; color: rgba(255, 255, 255, 0.5); -webkit-text-stroke: rgba(255, 255, 255, 0.5); background-color: #000000}\n li.li9 {margin: 0; font: 16.0px Helvetica; color: #2a3140; -webkit-text-stroke: #2a3140}\n span.s1 {font-kerning: none}\n span.s2 {font-kerning: none; background-color: #18956c}\n span.s3 {font-kerning: none; background-color: #f5f5f6}\n span.s4 {background-color: #f5f5f6}\n span.s5 {font-kerning: none; background-color: #272832}\n span.s6 {font-kerning: none; color: #ffffff; -webkit-text-stroke: 0px #ffffff}\n span.s7 {font-kerning: none; color: #d41466; -webkit-text-stroke: 0px #d41466}\n span.s8 {font-kerning: none; color: #14986a; -webkit-text-stroke: 0px #14986a}\n span.s9 {background-color: #f5f5f6; -webkit-text-stroke: 0px #ffffff}\n span.s10 {font-kerning: none; color: #e2830e; -webkit-text-stroke: 0px #e2830e}\n span.s11 {font-kerning: none; color: #2781c9; -webkit-text-stroke: 0px #2781c9}\n span.s12 {font-kerning: none; color: #eb102f; -webkit-text-stroke: 0px #eb102f}\n span.s13 {font: 14.0px Helvetica; font-kerning: none; color: #0e121d; background-color: #f5f5f6; -webkit-text-stroke: 0px #0e121d}\n span.s14 {font: 16.0px Helvetica; text-decoration: underline ; font-kerning: none; color: #0e121d; -webkit-text-stroke: 0px #0e121d}\n ol.ol1 {list-style-type: decimal}\n * {padding: 2px;}\n div {background-color: silver}\n <\/style>\n<\/head> \n<body><\/p>\n<div style=\"width: 600px; margin: 0 auto\">\n<a id=\"doc1\"><\/a>how do I create a responsive three column responsive web page using css grid. \u00a0<\/span><\/span><\/p>\n<\/span><\/p>\n<\/span><\/p>\n<\/span><\/p>\n<\/span><\/p>\nTo create a three-column responsive web page using CSS grid, you can follow these steps:<\/span><\/p>\n<ol class=\"ol1\">\n<li class=\"li9\"><\/span>Create the HTML structure:<\/span><\/li>\n<\/ol>\n<div <\/span>class<\/span>=<\/span>“grid-container”<\/span>><\/span><\/p>\n\u00a0 <\/span><div <\/span>class<\/span>=<\/span>“grid-item”<\/span>>Column 1<\/div><\/span><\/p>\n\u00a0 <\/span><div <\/span>class<\/span>=<\/span>“grid-item”<\/span>>Column 2<\/div><\/span><\/p>\n\u00a0 <\/span><div <\/span>class<\/span>=<\/span>“grid-item”<\/span>>Column 3<\/div><\/span><\/p>\n<\/div><\/span><\/p>\n<ol class=\"ol1\">\n<li class=\"li9\"><\/span>Add CSS to create the grid container and set the number of columns:<\/span><\/li>\n<\/ol>\n.grid-container<\/span> {<\/span><\/p>\n\u00a0 <\/span><\/span>display<\/span>: grid;<\/span><\/p>\n\u00a0 <\/span><\/span>grid-template-columns<\/span>: <\/span>repeat<\/span>(<\/span>3<\/span>, <\/span>1<\/span>fr);<\/span><\/p>\n\u00a0 <\/span><\/span>grid-gap<\/span>: <\/span>20px<\/span>;<\/span><\/p>\n}<\/span><\/p>\nThis will create a grid container with three columns of equal width and a gap of 20 pixels between them.<\/span><\/p>\n<ol class=\"ol1\">\n<li class=\"li9\"><\/span>Add CSS to make the grid responsive:<\/span><\/li>\n<\/ol>\n@media<\/span> screen <\/span>and<\/span> (<\/span>max-width<\/span>: <\/span>768px<\/span>) {<\/span><\/p>\n\u00a0 <\/span><\/span>.grid-container<\/span> {<\/span><\/p>\n\u00a0 \u00a0 <\/span><\/span>grid-template-columns<\/span>: <\/span>1<\/span>fr;<\/span><\/p>\n\u00a0 <\/span>}<\/span><\/p>\n}<\/span><\/p>\nThis will change the grid to a single column when the screen size is less than or equal to 768 pixels.<\/span><\/p>\n<ol class=\"ol1\">\n<li class=\"li9\"><\/span>Add CSS to style the grid items:<\/span><\/li>\n<\/ol>\n.grid-item<\/span> {<\/span><\/p>\n\u00a0 <\/span><\/span>background-color<\/span>: <\/span>#fff<\/span>;<\/span><\/p>\n\u00a0 <\/span><\/span>padding<\/span>: <\/span>20px<\/span>;<\/span><\/p>\n\u00a0 <\/span><\/span>text-align<\/span>: center;<\/span><\/p>\n\u00a0 <\/span><\/span>font-size<\/span>: <\/span>20px<\/span>;<\/span><\/p>\n\u00a0 <\/span><\/span>box-shadow<\/span>: <\/span>0px<\/span> <\/span>2px<\/span> <\/span>5px<\/span> <\/span>rgba<\/span>(<\/span>0<\/span>, <\/span>0<\/span>, <\/span>0<\/span>, <\/span>0.3<\/span>);<\/span><\/p>\n}<\/span><\/p>\nThis will add some basic styling to the grid items, including a white background, padding, center alignment, font size, and a box shadow.<\/span><\/p>\nHere’s the complete CSS code:<\/span><\/p>\n.grid-container<\/span> {<\/span><\/p>\n\u00a0 <\/span><\/span>display<\/span>: grid;<\/span><\/p>\n\u00a0 <\/span><\/span>grid-template-columns<\/span>: <\/span>repeat<\/span>(<\/span>3<\/span>, <\/span>1<\/span>fr);<\/span><\/p>\n\u00a0 <\/span><\/span>grid-gap<\/span>: <\/span>20px<\/span>;<\/span><\/p>\n}<\/span><\/p>\n<\/span><\/p>\n@media<\/span> screen <\/span>and<\/span> (<\/span>max-width<\/span>: <\/span>768px<\/span>) {<\/span><\/p>\n\u00a0 <\/span><\/span>.grid-container<\/span> {<\/span><\/p>\n\u00a0 \u00a0 <\/span><\/span>grid-template-columns<\/span>: <\/span>1<\/span>fr;<\/span><\/p>\n\u00a0 <\/span>}<\/span><\/p>\n}<\/span><\/p>\n<\/span><\/p>\n.grid-item<\/span> {<\/span><\/p>\n\u00a0 <\/span><\/span>background-color<\/span>: <\/span>#fff<\/span>;<\/span><\/p>\n\u00a0 <\/span><\/span>padding<\/span>: <\/span>20px<\/span>;<\/span><\/p>\n\u00a0 <\/span><\/span>text-align<\/span>: center;<\/span><\/p>\n\u00a0 <\/span><\/span>font-size<\/span>: <\/span>20px<\/span>;<\/span><\/p>\n\u00a0 <\/span><\/span>box-shadow<\/span>: <\/span>0px<\/span> <\/span>2px<\/span> <\/span>5px<\/span> <\/span>rgba<\/span>(<\/span>0<\/span>, <\/span>0<\/span>, <\/span>0<\/span>, <\/span>0.3<\/span>);<\/span><\/p>\n}<\/span><\/p>\nNote that you can customize the CSS to suit your specific needs and design preferences.<\/span><\/p>\n<\/span><\/p>\n<\/span><\/p>\n<\/span><\/p>\nOnno:<\/p>\n<\/span><\/p>\n<\/span><\/p>\ngreat! now create a portfolio web page for a design student looking for employment<\/span><\/p>\n<\/span><\/p>\n<\/span><\/p>\n<\/span><\/p>\n<\/span><\/p>\nSure! Here’s an example of a portfolio web page for a design student looking for employment:<\/span><\/p>\nHTML code:<\/span><\/p>\n<!DOCTYPE <\/span>html<\/span>><\/span><\/p>\n<html <\/span>lang<\/span>=<\/span>“en”<\/span>><\/span><\/p>\n\u00a0 <\/span><head><\/span><\/p>\n\u00a0 \u00a0 <\/span><meta <\/span>charset<\/span>=<\/span>“UTF-8”<\/span>><\/span><\/p>\n\u00a0 \u00a0 <\/span><title>Design Portfolio | Jane Doe<\/title><\/span><\/p>\n\u00a0 \u00a0 <\/span><link <\/span>rel<\/span>=<\/span>“stylesheet”<\/span> <\/span>href<\/span>=<\/span>“style.css”<\/span>><\/span><\/p>\n\u00a0 <\/span><\/head><\/span><\/p>\n\u00a0 <\/span><body><\/span><\/p>\n\u00a0 \u00a0 <\/span><header><\/span><\/p>\n\u00a0 \u00a0 \u00a0 <\/span><h1>Jane Doe<\/h1><\/span><\/p>\n\u00a0 \u00a0 \u00a0 <\/span><nav><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 <\/span><ul><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><li><a <\/span>href<\/span>=<\/span>“#about”<\/span>>About<\/a><\/li><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><li><a <\/span>href<\/span>=<\/span>“#work”<\/span>>Work<\/a><\/li><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><li><a <\/span>href<\/span>=<\/span>“#contact”<\/span>>Contact<\/a><\/li><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 <\/span><\/ul><\/span><\/p>\n\u00a0 \u00a0 \u00a0 <\/span><\/nav><\/span><\/p>\n\u00a0 \u00a0 <\/span><\/header><\/span><\/p>\n<\/span><\/p>\n\u00a0 \u00a0 <\/span><main><\/span><\/p>\n\u00a0 \u00a0 \u00a0 <\/span><section <\/span>id<\/span>=<\/span>“about”<\/span>><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 <\/span><h2>About Me<\/h2><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 <\/span>I am a recent graduate from XYZ University with a degree in Graphic Design. Throughout my studies, I have developed a strong passion for visual storytelling and creating unique designs that capture the essence of a brand. I am constantly seeking new challenges and opportunities to expand my skill set.<\/p><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 <\/span><img <\/span>src<\/span>=<\/span>“profile-pic.jpg”<\/span> <\/span>alt<\/span>=<\/span>“Jane Doe”<\/span>><\/span><\/p>\n\u00a0 \u00a0 \u00a0 <\/span><\/section><\/span><\/p>\n<\/span><\/p>\n\u00a0 \u00a0 \u00a0 <\/span><section <\/span>id<\/span>=<\/span>“work”<\/span>><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 <\/span><h2>My Work<\/h2><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 <\/span><div <\/span>class<\/span>=<\/span>“grid-container”<\/span>><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><div <\/span>class<\/span>=<\/span>“grid-item”<\/span>><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><img <\/span>src<\/span>=<\/span>“project1.jpg”<\/span> <\/span>alt<\/span>=<\/span>“Project 1”<\/span>><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><h3>Project 1<\/h3><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi euismod purus velit, a volutpat enim pellentesque ac.<\/p><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><\/div><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><div <\/span>class<\/span>=<\/span>“grid-item”<\/span>><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><img <\/span>src<\/span>=<\/span>“project2.jpg”<\/span> <\/span>alt<\/span>=<\/span>“Project 2”<\/span>><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><h3>Project 2<\/h3><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi euismod purus velit, a volutpat enim pellentesque ac.<\/p><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><\/div><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><div <\/span>class<\/span>=<\/span>“grid-item”<\/span>><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><img <\/span>src<\/span>=<\/span>“project3.jpg”<\/span> <\/span>alt<\/span>=<\/span>“Project 3”<\/span>><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><h3>Project 3<\/h3><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi euismod purus velit, a volutpat enim pellentesque ac.<\/p><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><\/div><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 <\/span><\/div><\/span><\/p>\n\u00a0 \u00a0 \u00a0 <\/span><\/section><\/span><\/p>\n<\/span><\/p>\n\u00a0 \u00a0 \u00a0 <\/span><section <\/span>id<\/span>=<\/span>“contact”<\/span>><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 <\/span><h2>Contact Me<\/h2><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 <\/span><form <\/span>action<\/span>=<\/span>“#”<\/span> <\/span>method<\/span>=<\/span>“post”<\/span>><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><label <\/span>for<\/span>=<\/span>“name”<\/span>>Name:<\/label><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><input <\/span>type<\/span>=<\/span>“text”<\/span> <\/span>id<\/span>=<\/span>“name”<\/span> <\/span>name<\/span>=<\/span>“name”<\/span>><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><label <\/span>for<\/span>=<\/span>“email”<\/span>>Email:<\/label><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><input <\/span>type<\/span>=<\/span>“email”<\/span> <\/span>id<\/span>=<\/span>“email”<\/span> <\/span>name<\/span>=<\/span>“email”<\/span>><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><label <\/span>for<\/span>=<\/span>“message”<\/span>>Message:<\/label><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><textarea <\/span>id<\/span>=<\/span>“message”<\/span> <\/span>name<\/span>=<\/span>“message”<\/span>><\/textarea><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><button <\/span>type<\/span>=<\/span>“submit”<\/span>>Send Message<\/button><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 <\/span><\/form><\/span><\/p>\n\u00a0 \u00a0 \u00a0 <\/span><\/section><\/span><\/p>\n\u00a0 \u00a0 <\/span><\/main><\/span><\/p>\n<\/span><\/p>\n\u00a0 \u00a0 <\/span><footer><\/span><\/p>\n\u00a0 \u00a0 \u00a0 <\/span><\/span>©<\/span> 2023 Jane Doe<\/p><\/span><\/p>\n\u00a0 \u00a0 <\/span><\/footer><\/span><\/p>\n\u00a0 <\/span><\/body><\/span><\/p>\n<\/html><\/span><\/p>\nCSS code:<\/span><\/p>\n\/* Global styles *\/<\/span><\/p>\n* {<\/span><\/p>\n\u00a0 <\/span><\/span>box-sizing<\/span>: border-box;<\/span><\/p>\n\u00a0 <\/span><\/span>margin<\/span>: <\/span>0<\/span>;<\/span><\/p>\n\u00a0 <\/span><\/span>padding<\/span>: <\/span>0<\/span>;<\/span><\/p>\n}<\/span><\/p>\n<\/span><\/p>\nbody {<\/span><\/p>\n\u00a0 <\/span><\/span>font-family<\/span>: Arial, sans-serif;<\/span><\/p>\n\u00a0 <\/span><\/span>font-size<\/span>: <\/span>16px<\/span>;<\/span><\/p>\n\u00a0 <\/span><\/span>line-height<\/span>: <\/span>1.5<\/span>;<\/span><\/p>\n}<\/span><\/p>\n<\/span><\/p>\nh1, h2, h3 {<\/span><\/p>\n\u00a0 <\/span><\/span>font-family<\/span>: <\/span>‘Montserrat’<\/span>, sans-serif;<\/span><\/p>\n}<\/span><\/p>\n<\/span><\/p>\na {<\/span><\/p>\n\u00a0 <\/span><\/span>color<\/span>: <\/span>#333<\/span>;<\/span><\/p>\n\u00a0 <\/span><\/span>text-decoration<\/span>: none;<\/span><\/p>\n}<\/span><\/p>\n<\/span><\/p>\na<\/span><\/p>\n<\/span><\/p>\n<\/span><\/p>\n<\/span><\/p>\nonno:<\/p>\n<\/span><\/p>\n<\/span><\/p>\nCan you use images from the web to make this attractive?<\/span><\/p>\n<\/span><\/p>\n<\/span><\/p>\n<\/span><\/p>\n<\/span><\/p>\nSure! Here’s an updated HTML code for the portfolio web page, with image URLs from the web:<\/span><\/p>\n<!DOCTYPE <\/span>html<\/span>><\/span><\/p>\n<html <\/span>lang<\/span>=<\/span>“en”<\/span>><\/span><\/p>\n\u00a0 <\/span><head><\/span><\/p>\n\u00a0 \u00a0 <\/span><meta <\/span>charset<\/span>=<\/span>“UTF-8”<\/span>><\/span><\/p>\n\u00a0 \u00a0 <\/span><title>Design Portfolio | Jane Doe<\/title><\/span><\/p>\n\u00a0 \u00a0 <\/span><link <\/span>rel<\/span>=<\/span>“stylesheet”<\/span> <\/span>href<\/span>=<\/span>“style.css”<\/span>><\/span><\/p>\n\u00a0 <\/span><\/head><\/span><\/p>\n\u00a0 <\/span><body><\/span><\/p>\n\u00a0 \u00a0 <\/span><header><\/span><\/p>\n\u00a0 \u00a0 \u00a0 <\/span><h1>Jane Doe<\/h1><\/span><\/p>\n\u00a0 \u00a0 \u00a0 <\/span><nav><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 <\/span><ul><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><li><a <\/span>href<\/span>=<\/span>“#about”<\/span>>About<\/a><\/li><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><li><a <\/span>href<\/span>=<\/span>“#work”<\/span>>Work<\/a><\/li><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><li><a <\/span>href<\/span>=<\/span>“#contact”<\/span>>Contact<\/a><\/li><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 <\/span><\/ul><\/span><\/p>\n\u00a0 \u00a0 \u00a0 <\/span><\/nav><\/span><\/p>\n\u00a0 \u00a0 <\/span><\/header><\/span><\/p>\n<\/span><\/p>\n\u00a0 \u00a0 <\/span><main><\/span><\/p>\n\u00a0 \u00a0 \u00a0 <\/span><section <\/span>id<\/span>=<\/span>“about”<\/span>><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 <\/span><h2>About Me<\/h2><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 <\/span>I am a recent graduate from XYZ University with a degree in Graphic Design. Throughout my studies, I have developed a strong passion for visual storytelling and creating unique designs that capture the essence of a brand. I am constantly seeking new challenges and opportunities to expand my skill set.<\/p><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 <\/span><img <\/span>src<\/span>=<\/span>“https:\/\/picsum.photos\/400\/400?random=1”<\/span> <\/span>alt<\/span>=<\/span>“Jane Doe”<\/span>><\/span><\/p>\n\u00a0 \u00a0 \u00a0 <\/span><\/section><\/span><\/p>\n<\/span><\/p>\n\u00a0 \u00a0 \u00a0 <\/span><section <\/span>id<\/span>=<\/span>“work”<\/span>><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 <\/span><h2>My Work<\/h2><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 <\/span><div <\/span>class<\/span>=<\/span>“grid-container”<\/span>><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><div <\/span>class<\/span>=<\/span>“grid-item”<\/span>><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><img <\/span>src<\/span>=<\/span>“https:\/\/picsum.photos\/400\/400?random=2”<\/span> <\/span>alt<\/span>=<\/span>“Project 1”<\/span>><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><h3>Project 1<\/h3><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi euismod purus velit, a volutpat enim pellentesque ac.<\/p><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><\/div><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><div <\/span>class<\/span>=<\/span>“grid-item”<\/span>><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><img <\/span>src<\/span>=<\/span>“https:\/\/picsum.photos\/400\/400?random=3”<\/span> <\/span>alt<\/span>=<\/span>“Project 2”<\/span>><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><h3>Project 2<\/h3><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi euismod purus velit, a volutpat enim pellentesque ac.<\/p><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><\/div><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><div <\/span>class<\/span>=<\/span>“grid-item”<\/span>><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><img <\/span>src<\/span>=<\/span>“https:\/\/picsum.photos\/400\/400?random=4”<\/span> <\/span>alt<\/span>=<\/span>“Project 3”<\/span>><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><h3>Project 3<\/h3><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi euismod purus velit, a volutpat enim pellentesque ac.<\/p><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><\/div><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 <\/span><\/div><\/span><\/p>\n\u00a0 \u00a0 \u00a0 <\/span><\/section><\/span><\/p>\n<\/span><\/p>\n\u00a0 \u00a0 \u00a0 <\/span><section <\/span>id<\/span>=<\/span>“contact”<\/span>><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 <\/span><h2>Contact Me<\/h2><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 <\/span><form <\/span>action<\/span>=<\/span>“#”<\/span> <\/span>method<\/span>=<\/span>“post”<\/span>><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><label <\/span>for<\/span>=<\/span>“name”<\/span>>Name:<\/label><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><input <\/span>type<\/span>=<\/span>“text”<\/span> <\/span>id<\/span>=<\/span>“name”<\/span> <\/span>name<\/span>=<\/span>“name”<\/span>><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><label <\/span>for<\/span>=<\/span>“email”<\/span>>Email:<\/label><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><input <\/span>type<\/span>=<\/span>“email”<\/span> <\/span>id<\/span>=<\/span>“email”<\/span> <\/span>name<\/span>=<\/span>“email”<\/span>><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><label <\/span>for<\/span>=<\/span>“message”<\/span>>Message:<\/label><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><textarea <\/span>id<\/span>=<\/span>“message”<\/span> <\/span>name<\/span>=<\/span>“message”<\/span>><\/textarea><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><button <\/span>type<\/span>=<\/span>“submit”<\/span>>Send Message<\/button><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 <\/span><\/form><\/span><\/p>\n\u00a0 \u00a0 \u00a0 <\/span><\/section><\/span><\/p>\n\u00a0 \u00a0 <\/span><\/main><\/span><\/p>\n<\/span><\/p>\n\u00a0 \u00a0 <\/span><footer><\/span><\/p>\n\u00a0 \u00a0 \u00a0 <\/span><\/span>©<\/span> 2023 Jane Doe<\/p><\/span><\/p>\n\u00a0 \u00a0 <\/span><\/footer><\/span><\/p>\n\u00a0 <\/span><\/body><\/span><\/p>\n<\/html><\/span><\/p>\nNote that the <\/span>src<\/b><\/span> attributes of the <\/span>img<\/b><\/span> elements now point to image URLs from the web, obtained using the <a href=\"https:\/\/picsum.photos\/\">Lorem Picsum<\/span><\/a> service.<\/span><\/p>\n<\/span><\/p>\n<\/span><\/p>\n<\/span><\/p>\nOnno:<\/p>\n<\/span><\/p>\n<\/span><\/p>\nNo background picture to make eveything unified? How about design elements. Can we do it in 3 columns?<\/span><\/p>\n<\/span><\/p>\n<\/span><\/p>\n<\/span><\/p>\n<\/span><\/p>\nSure! Here’s an updated HTML code for the portfolio web page with a background image, design elements, and a three-column layout using CSS Grid:<\/span><\/p>\n<!DOCTYPE <\/span>html<\/span>><\/span><\/p>\n<html <\/span>lang<\/span>=<\/span>“en”<\/span>><\/span><\/p>\n\u00a0 <\/span><head><\/span><\/p>\n\u00a0 \u00a0 <\/span><meta <\/span>charset<\/span>=<\/span>“UTF-8”<\/span>><\/span><\/p>\n\u00a0 \u00a0 <\/span><title>Design Portfolio | Jane Doe<\/title><\/span><\/p>\n\u00a0 \u00a0 <\/span><link <\/span>rel<\/span>=<\/span>“stylesheet”<\/span> <\/span>href<\/span>=<\/span>“style.css”<\/span>><\/span><\/p>\n\u00a0 <\/span><\/head><\/span><\/p>\n\u00a0 <\/span><body><\/span><\/p>\n\u00a0 \u00a0 <\/span><header><\/span><\/p>\n\u00a0 \u00a0 \u00a0 <\/span><h1>Jane Doe<\/h1><\/span><\/p>\n\u00a0 \u00a0 \u00a0 <\/span><nav><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 <\/span><ul><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><li><a <\/span>href<\/span>=<\/span>“#about”<\/span>>About<\/a><\/li><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><li><a <\/span>href<\/span>=<\/span>“#work”<\/span>>Work<\/a><\/li><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><li><a <\/span>href<\/span>=<\/span>“#contact”<\/span>>Contact<\/a><\/li><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 <\/span><\/ul><\/span><\/p>\n\u00a0 \u00a0 \u00a0 <\/span><\/nav><\/span><\/p>\n\u00a0 \u00a0 <\/span><\/header><\/span><\/p>\n<\/span><\/p>\n\u00a0 \u00a0 <\/span><main><\/span><\/p>\n\u00a0 \u00a0 \u00a0 <\/span><section <\/span>id<\/span>=<\/span>“about”<\/span> <\/span>class<\/span>=<\/span>“section”<\/span>><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 <\/span><div <\/span>class<\/span>=<\/span>“grid-container”<\/span>><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><div <\/span>class<\/span>=<\/span>“grid-item”<\/span>><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><h2>About Me<\/h2><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span>I am a recent graduate from XYZ University with a degree in Graphic Design. Throughout my studies, I have developed a strong passion for visual storytelling and creating unique designs that capture the essence of a brand. I am constantly seeking new challenges and opportunities to expand my skill set.<\/p><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><\/div><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><div <\/span>class<\/span>=<\/span>“grid-item”<\/span>><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><img <\/span>src<\/span>=<\/span>“https:\/\/picsum.photos\/400\/400?random=1”<\/span> <\/span>alt<\/span>=<\/span>“Jane Doe”<\/span>><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><\/div><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 <\/span><\/div><\/span><\/p>\n\u00a0 \u00a0 \u00a0 <\/span><\/section><\/span><\/p>\n<\/span><\/p>\n\u00a0 \u00a0 \u00a0 <\/span><section <\/span>id<\/span>=<\/span>“work”<\/span> <\/span>class<\/span>=<\/span>“section”<\/span>><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 <\/span><h2>My Work<\/h2><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 <\/span><div <\/span>class<\/span>=<\/span>“grid-container”<\/span>><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><div <\/span>class<\/span>=<\/span>“grid-item”<\/span>><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><img <\/span>src<\/span>=<\/span>“https:\/\/picsum.photos\/400\/400?random=2”<\/span> <\/span>alt<\/span>=<\/span>“Project 1”<\/span>><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><h3>Project 1<\/h3><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi euismod purus velit, a volutpat enim pellentesque ac.<\/p><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><\/div><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><div <\/span>class<\/span>=<\/span>“grid-item”<\/span>><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><img <\/span>src<\/span>=<\/span>“https:\/\/picsum.photos\/400\/400?random=3”<\/span> <\/span>alt<\/span>=<\/span>“Project 2”<\/span>><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><h3>Project 2<\/h3><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi euismod purus velit, a volutpat enim pellentesque ac.<\/p><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><\/div><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><div <\/span>class<\/span>=<\/span>“grid-item”<\/span>><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><img <\/span>src<\/span>=<\/span>“https:\/\/picsum.photos\/400\/400?random=4”<\/span> <\/span>alt<\/span>=<\/span>“Project 3”<\/span>><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><h3>Project 3<\/h3><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi euismod purus velit, a volutpat enim pellentesque ac.<\/p><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><\/div><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 <\/span><\/div><\/span><\/p>\n\u00a0 \u00a0 \u00a0 <\/span><\/section><\/span><\/p>\n<\/span><\/p>\n\u00a0 \u00a0 \u00a0 <\/span><section <\/span>id<\/span>=<\/span>“contact”<\/span> <\/span>class<\/span>=<\/span>“section”<\/span>><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 <\/span><h2>Contact Me<\/h2><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 <\/span><form <\/span>action<\/span>=<\/span>“#”<\/span> <\/span>method<\/span>=<\/span>“post”<\/span>><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><label <\/span>for<\/span>=<\/span>“name”<\/span>>Name:<\/label><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><input <\/span>type<\/span>=<\/span>“text”<\/span> <\/span>id<\/span>=<\/span>“name”<\/span> <\/span>name<\/span>=<\/span>“name”<\/span>><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><label <\/span>for<\/span>=<\/span>“email”<\/span>>Email:<\/label><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><input <\/span>type<\/span>=<\/span>“email”<\/span> <\/span>id<\/span>=<\/span>“email”<\/span> <\/span>name<\/span>=<\/span>“email”<\/span>><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><label <\/span>for<\/span>=<\/span>“message”<\/span>>Message:<\/label><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><textarea <\/span>id<\/span>=<\/span>“message”<\/span> <\/span>name<\/span>=<\/span>“message”<\/span>><\/textarea><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><button <\/span>type<\/span>=<\/span>“submit”<\/span>>Send Message<\/button><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 <\/span><\/form><\/span><\/p>\n\u00a0 \u00a0 \u00a0 <\/span><\/section><\/span><\/p>\n\u00a0 \u00a0 <\/span><\/main><\/span><\/p>\n<\/span><\/p>\n\u00a0 \u00a0 <\/span><footer><\/span><\/p>\n\u00a0 \u00a0 \u00a0 <\/span><\/span>©<\/span> 2023 Jane Doe<\/p><\/span><\/p>\n\u00a0 \u00a0 <\/span><\/footer><\/span><\/p>\n\u00a0 <\/span><\/body><\/span><\/p>\n<\/html><\/span><\/p>\nAnd<\/span><\/p>\n<\/span><\/p>\n\/* Reset default margin and padding *\/<\/span><\/p>\n* {<\/span><\/p>\n\u00a0 <\/span><\/span>margin<\/span>: <\/span>0<\/span>;<\/span><\/p>\n\u00a0 <\/span><\/span>padding<\/span>: <\/span>0<\/span>;<\/span><\/p>\n}<\/span><\/p>\n<\/span><\/p>\n\/* Set the background image *\/<\/span><\/p>\nbody {<\/span><\/p>\n\u00a0 <\/span><\/span>background-image<\/span>: <\/span>url<\/span>(<\/span>“https:\/\/picsum.photos\/1920\/1080?random=5”<\/span>);<\/span><\/p>\n\u00a0 <\/span><\/span>background-size<\/span>: cover;<\/span><\/p>\n}<\/span><\/p>\n<\/span><\/p>\n\/* Style the header *\/<\/span><\/p>\nheader {<\/span><\/p>\n\u00a0 <\/span><\/span>display<\/span>: flex;<\/span><\/p>\n\u00a0 <\/span><\/span>justify-content<\/span>: space-between;<\/span><\/p>\n\u00a0 <\/span><\/span>align-items<\/span>: center;<\/span><\/p>\n\u00a0 <\/span><\/span>padding<\/span>: <\/span>20px<\/span>;<\/span><\/p>\n}<\/span><\/p>\n<\/span><\/p>\nh1 {<\/span><\/p>\n\u00a0 <\/span><\/span>font-size<\/span>: <\/span>2.5rem<\/span>;<\/span><\/p>\n\u00a0 <\/span><\/span>font-weight<\/span>: bold;<\/span><\/p>\n\u00a0 <\/span><\/span>color<\/span>: <\/span>#fff<\/span>;<\/span><\/p>\n}<\/span><\/p>\n<\/span><\/p>\nnav ul {<\/span><\/p>\n\u00a0 <\/span><\/span>display<\/span>: flex;<\/span><\/p>\n\u00a0 <\/span><\/span>list-style<\/span>: none;<\/span><\/p>\n}<\/span><\/p>\n<\/span><\/p>\nnav li {<\/span><\/p>\n\u00a0 <\/span><\/span>margin<\/span>: <\/span>0<\/span> <\/span>20px<\/span>;<\/span><\/p>\n}<\/span><\/p>\n<\/span><\/p>\nnav a {<\/span><\/p>\n\u00a0 <\/span><\/span>color<\/span>: <\/span>#fff<\/span>;<\/span><\/p>\n\u00a0 <\/span><\/span>text-decoration<\/span>: none;<\/span><\/p>\n\u00a0 <\/span><\/span>font-size<\/span>: <\/span>1.2rem<\/span>;<\/span><\/p>\n\u00a0 <\/span><\/span>font-weight<\/span>: bold;<\/span><\/p>\n}<\/span><\/p>\n<\/span><\/p>\n\/* Style the main content *\/<\/span><\/p>\nmain {<\/span><\/p>\n\u00a0 <\/span><\/span>display<\/span>: flex;<\/span><\/p>\n\u00a0 <\/span><\/span>flex-direction<\/span>: column;<\/span><\/p>\n\u00a0 <\/span><\/span>align-items<\/span>: center;<\/span><\/p>\n\u00a0 <\/span><\/span>padding<\/span>: <\/span>50px<\/span> <\/span>20px<\/span>;<\/span><\/p>\n}<\/span><\/p>\n<\/span><\/p>\n.section<\/span> {<\/span><\/p>\n\u00a0 <\/span><\/span>width<\/span>: <\/span>100%<\/span>;<\/span><\/p>\n\u00a0 <\/span><\/span>margin-bottom<\/span>: <\/span>50px<\/span>;<\/span><\/p>\n}<\/span><\/p>\n<\/span><\/p>\n.grid-container<\/span> {<\/span><\/p>\n\u00a0 <\/span><\/span>display<\/span>: grid;<\/span><\/p>\n\u00a0 <\/span><\/span>grid-template-columns<\/span>: <\/span>repeat<\/span>(<\/span>3<\/span>, <\/span>1<\/span>fr);<\/span><\/p>\n\u00a0 <\/span><\/span>gap<\/span>: <\/span>30px<\/span>;<\/span><\/p>\n}<\/span><\/p>\n<\/span><\/p>\n.grid-item<\/span> {<\/span><\/p>\n\u00a0 <\/span><\/span>background-color<\/span>: <\/span>#fff<\/span>;<\/span><\/p>\n\u00a0 <\/span><\/span>padding<\/span>: <\/span>20px<\/span>;<\/span><\/p>\n\u00a0 <\/span><\/span>border-radius<\/span>: <\/span>10px<\/span>;<\/span><\/p>\n\u00a0 <\/span><\/span>box-shadow<\/span>: <\/span>0<\/span> <\/span>0<\/span> <\/span>10px<\/span> <\/span>rgba<\/span>(<\/span>0<\/span>, <\/span>0<\/span>, <\/span>0<\/span>, <\/span>0.2<\/span>);<\/span><\/p>\n}<\/span><\/p>\n<\/span><\/p>\nimg {<\/span><\/p>\n\u00a0 <\/span><\/span>max-width<\/span>: <\/span>100%<\/span>;<\/span><\/p>\n\u00a0 <\/span><\/span>height<\/span>: auto;<\/span><\/p>\n\u00a0 <\/span><\/span>margin-bottom<\/span>: <\/span>20px<\/span>;<\/span><\/p>\n\u00a0 <\/span><\/span>border-radius<\/span>: <\/span>5px<\/span>;<\/span><\/p>\n}<\/span><\/p>\n<\/span><\/p>\nh2 {<\/span><\/p>\n\u00a0 <\/span><\/span>font-size<\/span>: <\/span>2rem<\/span>;<\/span><\/p>\n\u00a0 <\/span><\/span>font-weight<\/span>: bold;<\/span><\/p>\n\u00a0 <\/span><\/span>color<\/span>: <\/span>#fff<\/span>;<\/span><\/p>\n\u00a0 <\/span><\/span>margin-bottom<\/span>: <\/span>20px<\/span>;<\/span><\/p>\n}<\/span><\/p>\n<\/span><\/p>\nh3 {<\/span><\/p>\n\u00a0 <\/span><\/span>font-size<\/span>: <\/span>1.5rem<\/span>;<\/span><\/p>\n\u00a0 <\/span><\/span>font-weight<\/span>: bold;<\/span><\/p>\n\u00a0 <\/span><\/span>margin-bottom<\/span>: <\/span>10px<\/span>;<\/span><\/p>\n}<\/span><\/p>\n<\/span><\/p>\np {<\/span><\/p>\n\u00a0 <\/span><\/span>font-size<\/span>: <\/span>1.2rem<\/span>;<\/span><\/p>\n\u00a0 <\/span><\/span>line-height<\/span>: <\/span>1.5<\/span>;<\/span><\/p>\n\u00a0 <\/span><\/span>margin-bottom<\/span>: <\/span>20px<\/span>;<\/span><\/p>\n}<\/span><\/p>\n<\/span><\/p>\nform label {<\/span><\/p>\n\u00a0 <\/span><\/span>font-size<\/span>: <\/span>1.2rem<\/span>;<\/span><\/p>\n\u00a0 <\/span><\/span>font-weight<\/span>: bold;<\/span><\/p>\n\u00a0 <\/span><\/span>margin-bottom<\/span>: <\/span>10px<\/span>;<\/span><\/p>\n\u00a0 <\/span><\/span>display<\/span>: block;<\/span><\/p>\n}<\/span><\/p>\n<\/span><\/p>\nform input,<\/span><\/p>\nform textarea {<\/span><\/p>\n\u00a0 <\/span><\/span>padding<\/span>: <\/span>10px<\/span>;<\/span><\/p>\n\u00a0 <\/span><\/span>margin-bottom<\/span>: <\/span>20px<\/span>;<\/span><\/p>\n\u00a0 <\/span><\/span>border-radius<\/span>: <\/span>5px<\/span>;<\/span><\/p>\n\u00a0 <\/span><\/span>border<\/span>: none;<\/span><\/p>\n\u00a0 <\/span><\/span>font-size<\/span>: <\/span>1.2rem<\/span>;<\/span><\/p>\n}<\/span><\/p>\n<\/span><\/p>\nform button {<\/span><\/p>\n\u00a0 <\/span><\/span>background-color<\/span>: <\/span>#333<\/span>;<\/span><\/p>\n\u00a0 <\/span><\/span>color<\/span>: <\/span>#fff<\/span>;<\/span><\/p>\n\u00a0 <\/span><\/span>padding<\/span>: <\/span>10px<\/span> <\/span>20px<\/span>;<\/span><\/p>\n\u00a0 <\/span><\/span>border-radius<\/span>: <\/span>5px<\/span>;<\/span><\/p>\n\u00a0 <\/span><\/span>border<\/span>: none;<\/span><\/p>\n\u00a0 <\/span><\/span>font-size<\/span>: <\/span>1.2rem<\/span>;<\/span><\/p>\n\u00a0 <\/span><\/span>font-weight<\/span>: bold;<\/span><\/p>\n\u00a0 <\/span><\/span>cursor<\/span>: pointer;<\/span><\/p>\n\u00a0 <\/span><\/span>transition<\/span>: background-color <\/span>0.2s<\/span> ease-in-out;<\/span><\/p>\n}<\/span><\/p>\n<\/span><\/p>\nform button<\/span>:hover<\/span> {<\/span><\/p>\n\u00a0 <\/span><\/span>background-color<\/span>: <\/span>#555<\/span>;<\/span><\/p>\n}<\/span><\/p>\nThis should style the HTML code I provided earlier and create a visually appealing portfolio web page with the requested design elements.<\/span><\/p>\n<\/span><\/p>\n<\/span><\/p>\n<\/span><\/p>\nOnno:<\/p>\n<\/span><\/p>\n<\/span><\/p>\nNw could you make it responsive so it looks good on a smart phone?<\/span><\/p>\n<\/span><\/p>\n<\/span><\/p>\n<\/span><\/p>\n<\/span><\/p>\nSure! Here’s the updated CSS code with media queries to make the portfolio web page responsive for smaller screens such as smartphones:<\/span><\/p>\n\/* Reset default margin and padding *\/<\/span><\/p>\n* {<\/span><\/p>\n\u00a0 <\/span><\/span>margin<\/span>: <\/span>0<\/span>;<\/span><\/p>\n\u00a0 <\/span><\/span>padding<\/span>: <\/span>0<\/span>;<\/span><\/p>\n}<\/span><\/p>\n<\/span><\/p>\n\/* Set the background image *\/<\/span><\/p>\nbody {<\/span><\/p>\n\u00a0 <\/span><\/span>background-image<\/span>: <\/span>url<\/span>(<\/span>“https:\/\/picsum.photos\/1920\/1080?random=5”<\/span>);<\/span><\/p>\n\u00a0 <\/span><\/span>background-size<\/span>: cover;<\/span><\/p>\n}<\/span><\/p>\n<\/span><\/p>\n\/* Style the header *\/<\/span><\/p>\nheader {<\/span><\/p>\n\u00a0 <\/span><\/span>display<\/span>: flex;<\/span><\/p>\n\u00a0 <\/span><\/span>justify-content<\/span>: space-between;<\/span><\/p>\n\u00a0 <\/span><\/span>align-items<\/span>: center;<\/span><\/p>\n\u00a0 <\/span><\/span>padding<\/span>: <\/span>20px<\/span>;<\/span><\/p>\n}<\/span><\/p>\n<\/span><\/p>\nh1 {<\/span><\/p>\n\u00a0 <\/span><\/span>font-size<\/span>: <\/span>2.5rem<\/span>;<\/span><\/p>\n\u00a0 <\/span><\/span>font-weight<\/span>: bold;<\/span><\/p>\n\u00a0 <\/span><\/span>color<\/span>: <\/span>#fff<\/span>;<\/span><\/p>\n}<\/span><\/p>\n<\/span><\/p>\nnav ul {<\/span><\/p>\n\u00a0 <\/span><\/span>display<\/span>: flex;<\/span><\/p>\n\u00a0 <\/span><\/span>list-style<\/span>: none;<\/span><\/p>\n}<\/span><\/p>\n<\/span><\/p>\nnav li {<\/span><\/p>\n\u00a0 <\/span><\/span>margin<\/span>: <\/span>0<\/span> <\/span>20px<\/span>;<\/span><\/p>\n}<\/span><\/p>\n<\/span><\/p>\nnav a {<\/span><\/p>\n\u00a0 <\/span><\/span>color<\/span>: <\/span>#fff<\/span>;<\/span><\/p>\n\u00a0 <\/span><\/span>text-decoration<\/span>: none;<\/span><\/p>\n\u00a0 <\/span><\/span>font-size<\/span>: <\/span>1.2rem<\/span>;<\/span><\/p>\n\u00a0 <\/span><\/span>font-weight<\/span>: bold;<\/span><\/p>\n}<\/span><\/p>\n<\/span><\/p>\n\/* Style the main content *\/<\/span><\/p>\nmain {<\/span><\/p>\n\u00a0 <\/span><\/span>display<\/span>: flex;<\/span><\/p>\n\u00a0 <\/span><\/span>flex-direction<\/span>: column;<\/span><\/p>\n\u00a0 <\/span><\/span>align-items<\/span>: center;<\/span><\/p>\n\u00a0 <\/span><\/span>padding<\/span>: <\/span>50px<\/span> <\/span>20px<\/span>;<\/span><\/p>\n}<\/span><\/p>\n<\/span><\/p>\n.section<\/span> {<\/span><\/p>\n\u00a0 <\/span><\/span>width<\/span>: <\/span>100%<\/span>;<\/span><\/p>\n\u00a0 <\/span><\/span>margin-bottom<\/span>: <\/span>50px<\/span>;<\/span><\/p>\n}<\/span><\/p>\n<\/span><\/p>\n.grid-container<\/span> {<\/span><\/p>\n\u00a0 <\/span><\/span>display<\/span>: grid;<\/span><\/p>\n\u00a0 <\/span><\/span>grid-template-columns<\/span>: <\/span>repeat<\/span>(<\/span>3<\/span>, <\/span>1<\/span>fr);<\/span><\/p>\n\u00a0 <\/span><\/span>gap<\/span>: <\/span>30px<\/span>;<\/span><\/p>\n}<\/span><\/p>\n<\/span><\/p>\n.grid-item<\/span> {<\/span><\/p>\n\u00a0 <\/span><\/span>background-color<\/span>: <\/span>#fff<\/span>;<\/span><\/p>\n\u00a0 <\/span><\/span>padding<\/span>: <\/span>20px<\/span>;<\/span><\/p>\n\u00a0 <\/span><\/span>border-radius<\/span>: <\/span>10px<\/span>;<\/span><\/p>\n\u00a0 <\/span><\/span>box-shadow<\/span>: <\/span>0<\/span> <\/span>0<\/span> <\/span>10px<\/span> <\/span>rgba<\/span>(<\/span>0<\/span>, <\/span>0<\/span>, <\/span>0<\/span>, <\/span>0.2<\/span>);<\/span><\/p>\n}<\/span><\/p>\n<\/span><\/p>\nimg {<\/span><\/p>\n\u00a0 <\/span><\/span>max-width<\/span>: <\/span>100%<\/span>;<\/span><\/p>\n\u00a0 <\/span><\/span>height<\/span>: auto;<\/span><\/p>\n\u00a0 <\/span><\/span>margin-bottom<\/span>: <\/span>20px<\/span>;<\/span><\/p>\n\u00a0 <\/span><\/span>border-radius<\/span>: <\/span>5px<\/span>;<\/span><\/p>\n}<\/span><\/p>\n<\/span><\/p>\nh2 {<\/span><\/p>\n\u00a0 <\/span><\/span>font-size<\/span>: <\/span>2rem<\/span>;<\/span><\/p>\n\u00a0 <\/span><\/span>font-weight<\/span>: bold;<\/span><\/p>\n\u00a0 <\/span><\/span>color<\/span>: <\/span>#fff<\/span>;<\/span><\/p>\n\u00a0 <\/span><\/span>margin-bottom<\/span>: <\/span>20px<\/span>;<\/span><\/p>\n}<\/span><\/p>\n<\/span><\/p>\nh3 {<\/span><\/p>\n\u00a0 <\/span><\/span>font-size<\/span>: <\/span>1.5rem<\/span>;<\/span><\/p>\n\u00a0 <\/span><\/span>font-weight<\/span>: bold;<\/span><\/p>\n\u00a0 <\/span><\/span>margin-bottom<\/span>: <\/span>10px<\/span>;<\/span><\/p>\n}<\/span><\/p>\n<\/span><\/p>\np {<\/span><\/p>\n\u00a0 <\/span><\/span>font-size<\/span>: <\/span>1.2rem<\/span>;<\/span><\/p>\n\u00a0 <\/span><\/span>line-height<\/span>: <\/span>1.5<\/span>;<\/span><\/p>\n\u00a0 <\/span><\/span>margin-bottom<\/span>: <\/span>20px<\/span>;<\/span><\/p>\n}<\/span><\/p>\n<\/span><\/p>\nform label {<\/span><\/p>\n\u00a0 <\/span><\/span>font-size<\/span>: <\/span>1.2rem<\/span>;<\/span><\/p>\n\u00a0 <\/span><\/span>font-weight<\/span>: bold;<\/span><\/p>\n\u00a0 <\/span><\/span>margin-bottom<\/span>: <\/span>10px<\/span>;<\/span><\/p>\n\u00a0 <\/span><\/span>display<\/span>: block;<\/span><\/p>\n}<\/span><\/p>\n<\/span><\/p>\nform input,<\/span><\/p>\nform textarea {<\/span><\/p>\n\u00a0 <\/span><\/span>padding<\/span>: <\/span>10px<\/span>;<\/span><\/p>\n\u00a0 <\/span><\/span>margin-bottom<\/span>: <\/span>20px<\/span>;<\/span><\/p>\n\u00a0 <\/span><\/span>border-radius<\/span>: <\/span>5px<\/span>;<\/span><\/p>\n\u00a0 <\/span><\/span>border<\/span>: none;<\/span><\/p>\n\u00a0 <\/span><\/span>font-size<\/span>: <\/span>1.2rem<\/span>;<\/span><\/p>\n}<\/span><\/p>\n<\/span><\/p>\nform button {<\/span><\/p>\n\u00a0 <\/span><\/span>background-color<\/span>: <\/span>#333<\/span>;<\/span><\/p>\n\u00a0 <\/span><\/span>color<\/span>: <\/span>#fff<\/span>;<\/span><\/p>\n\u00a0 <\/span><\/span>padding<\/span>: <\/span>10px<\/span> <\/span>20px<\/span>;<\/span><\/p>\n\u00a0 <\/span><\/span>border-radius<\/span>: <\/span>5px<\/span>;<\/span><\/p>\n\u00a0 <\/span><\/span>border<\/span>: none;<\/span><\/p>\n\u00a0 <\/span><\/span>font-size<\/span>: <\/span>1.2rem<\/span>;<\/span><\/p>\n\u00a0 <\/span><\/span>font-weight<\/span>: bold;<\/span><\/p>\n\u00a0 <\/span><\/span>cursor<\/span>: pointer;<\/span><\/p>\n\u00a0 <\/span><\/span>transition<\/span>: background-color <\/span>0.2s<\/span> ease-in-out;<\/span><\/p>\n}<\/span><\/p>\n<\/span><\/p>\nform button<\/span>:hover<\/span> {<\/span><\/p>\n\u00a0 <\/span><\/span>background-color<\/span>: <\/span>#555<\/span>;<\/span><\/p>\n}<\/span><\/p>\n<\/span><\/p>\n\/* Media queries for smaller screens *\/<\/span><\/p>\n@media<\/span> screen <\/span>and<\/span> (<\/span>max-width<\/span>: <\/span>768px<\/span>) {<\/span><\/p>\n\u00a0 <\/span>header {<\/span><\/p>\n\u00a0 \u00a0 <\/span><\/span>flex-direction<\/span>: column;<\/span><\/p>\n\u00a0 \u00a0 <\/span><\/span>align-items<\/span>: center;<\/span><\/p>\n\u00a0 <\/span>}<\/span><\/p>\n<\/span><\/p>\n\u00a0 <\/span>nav ul {<\/span><\/p>\n\u00a0 \u00a0 <\/span><\/span>margin-top<\/span>: <\/span>20px<\/span>;<\/span><\/p>\n\u00a0 <\/span>}<\/span><\/p>\n<\/span><\/p>\n\u00a0 <\/span><\/span>.grid-container<\/span> {<\/span><\/p>\n\u00a0 \u00a0 <\/span><\/span>grid-template-columns<\/span>: <\/span>repeat<\/span>(<\/span>1<\/span>, <\/span>1<\/span>fr);<\/span><\/p>\n\u00a0 <\/span>}<\/span><\/p>\n\u00a0\u00a0<\/span><\/span><\/p>\n\u00a0 <\/span><\/span>.grid-item<\/span> {<\/span><\/p>\n\u00a0 \u00a0 <\/span><\/span>margin-bottom<\/span>: <\/span>30px<\/span>;<\/span><\/p>\n\u00a0 <\/span>}<\/span><\/p>\n<\/span><\/p>\n\u00a0 <\/span>h1 {<\/span><\/p>\n\u00a0 \u00a0 <\/span><\/span>font-size<\/span>: <\/span>2rem<\/span>;<\/span><\/p>\n\u00a0 \u00a0 <\/span><\/span>text-align<\/span>: center;<\/span><\/p>\n\u00a0 <\/span>}<\/span><\/p>\n<\/span><\/p>\n\u00a0 <\/span>h2 {<\/span><\/p>\n\u00a0 \u00a0 <\/span><\/span>font-size<\/span>: <\/span>1.5rem<\/span>;<\/span><\/p>\n\u00a0 <\/span>}<\/span><\/p>\n<\/span><\/p>\n\u00a0 <\/span>h3 {<\/span><\/p>\n\u00a0 \u00a0 <\/span><\/span>font-size<\/span>: <\/span>1.2rem<\/span>;<\/span><\/p>\n\u00a0 <\/span>}<\/span><\/p>\n<\/span><\/p>\n\u00a0 <\/span>p {<\/span><\/p>\n<\/div>\n<\/body> \n<\/html><\/p>\n","protected":false},"excerpt":{"rendered":"< !DOCTYPE html PUBLIC \"-\/\/W3C\/\/DTD HTML 4.01\/\/EN\" \"http:\/\/www.w3.org\/TR\/html4\/strict.dtd\"> Parsons 2017 Fall Web Design how do I create a responsive three column responsive web page using css grid. \u00a0 To create a three-column responsive web page using CSS grid, you can … <a href=\"http:\/\/b.parsons.edu\/~dejongo\/5895-2\/\">Continue reading →<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[5],"tags":[],"_links":{"self":[{"href":"http:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/posts\/5895"}],"collection":[{"href":"http:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/comments?post=5895"}],"version-history":[{"count":6,"href":"http:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/posts\/5895\/revisions"}],"predecessor-version":[{"id":5901,"href":"http:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/posts\/5895\/revisions\/5901"}],"wp:attachment":[{"href":"http:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/media?parent=5895"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/categories?post=5895"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/tags?post=5895"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":5895,"date":"2023-05-09T14:37:52","date_gmt":"2023-05-09T14:37:52","guid":{"rendered":"http:\/\/b.parsons.edu\/~dejongo\/?p=5895"},"modified":"2023-05-09T15:05:29","modified_gmt":"2023-05-09T15:05:29","slug":"5895-2","status":"publish","type":"post","link":"http:\/\/b.parsons.edu\/~dejongo\/5895-2\/","title":{"rendered":""},"content":{"rendered":"

< !DOCTYPE html PUBLIC \"-\/\/W3C\/\/DTD HTML 4.01\/\/EN\" \"http:\/\/www.w3.org\/TR\/html4\/strict.dtd\">
\n
\n
\n
\n
\n Parsons 2017 Fall Web Design<\/title> \n <meta name=\"Author\" content=\"Onno De Jong\"\/> \n <meta name=\"CreationTime\" content=\"2023-05-09T10:40:44Z\"\/> \n <meta name=\"ModificationTime\" content=\"2023-05-09T10:40:44Z\"\/> \n <meta name=\"Generator\" content=\"Cocoa HTML Writer\"\/> \n <meta name=\"CocoaVersion\" content=\"2299.5\"\/><\/p>\n<style type=\"text\/css\">\n p.p1 {margin: 0; font: 16.0px Helvetica; color: #272832; -webkit-text-stroke: #272832}\n p.p2 {margin: 0; font: 16.0px Helvetica; color: #9c9bb0; -webkit-text-stroke: #9c9bb0; min-height: 19.0px}\n p.p3 {margin: 0; font: 16.0px Helvetica; color: #272832; -webkit-text-stroke: #272832; min-height: 19.0px}\n p.p4 {margin: 0; font: 16.0px Times; color: #ffffff; -webkit-text-stroke: #ffffff}\n p.p5 {margin: 0; font: 16.0px Helvetica; color: #ffffff; -webkit-text-stroke: #ffffff}\n p.p6 {margin: 0; text-align: center; font: 12.0px Helvetica; color: #b8b8c8; -webkit-text-stroke: #b8b8c8; min-height: 14.0px}\n p.p7 {margin: 0; font: 12.0px Helvetica; color: #272832; -webkit-text-stroke: #272832}\n p.p8 {margin: 0; font: 16.0px Helvetica; color: #2a3140; -webkit-text-stroke: #2a3140}\n p.p9 {margin: 0; font: 16.0px Helvetica; color: #2a3140; -webkit-text-stroke: #2a3140}\n p.p10 {margin: 0; font: 12.0px Helvetica; color: #d0d0dc; -webkit-text-stroke: #d0d0dc}\n p.p11 {margin: 0; text-align: center; font: 12.0px Helvetica; color: #d0d0dc; -webkit-text-stroke: #d0d0dc; min-height: 14.0px}\n p.p12 {margin: 0; font: 14.0px Helvetica; color: #14986a; -webkit-text-stroke: #14986a; background-color: #000000}\n p.p13 {margin: 0; font: 14.0px Helvetica; color: #ffffff; -webkit-text-stroke: #ffffff; background-color: #000000}\n p.p14 {margin: 0; font: 14.0px Helvetica; color: #d41466; -webkit-text-stroke: #d41466; background-color: #000000}\n p.p15 {margin: 0; font: 14.0px Helvetica; color: #ffffff; -webkit-text-stroke: #ffffff; background-color: #000000; min-height: 17.0px}\n p.p16 {margin: 0; text-align: center; font: 16.0px Helvetica; color: #9c9bb0; -webkit-text-stroke: #9c9bb0; min-height: 19.0px}\n p.p17 {margin: 0; text-align: center; font: 12.0px Helvetica; color: #272832; -webkit-text-stroke: #272832; min-height: 14.0px}\n p.p18 {margin: 0; font: 14.0px Helvetica; color: #ffffff; color: rgba(255, 255, 255, 0.6); -webkit-text-stroke: rgba(255, 255, 255, 0.6); background-color: #000000}\n p.p19 {margin: 0; font: 14.0px Helvetica; color: #ffffff; color: rgba(255, 255, 255, 0.5); -webkit-text-stroke: rgba(255, 255, 255, 0.5); background-color: #000000}\n li.li9 {margin: 0; font: 16.0px Helvetica; color: #2a3140; -webkit-text-stroke: #2a3140}\n span.s1 {font-kerning: none}\n span.s2 {font-kerning: none; background-color: #18956c}\n span.s3 {font-kerning: none; background-color: #f5f5f6}\n span.s4 {background-color: #f5f5f6}\n span.s5 {font-kerning: none; background-color: #272832}\n span.s6 {font-kerning: none; color: #ffffff; -webkit-text-stroke: 0px #ffffff}\n span.s7 {font-kerning: none; color: #d41466; -webkit-text-stroke: 0px #d41466}\n span.s8 {font-kerning: none; color: #14986a; -webkit-text-stroke: 0px #14986a}\n span.s9 {background-color: #f5f5f6; -webkit-text-stroke: 0px #ffffff}\n span.s10 {font-kerning: none; color: #e2830e; -webkit-text-stroke: 0px #e2830e}\n span.s11 {font-kerning: none; color: #2781c9; -webkit-text-stroke: 0px #2781c9}\n span.s12 {font-kerning: none; color: #eb102f; -webkit-text-stroke: 0px #eb102f}\n span.s13 {font: 14.0px Helvetica; font-kerning: none; color: #0e121d; background-color: #f5f5f6; -webkit-text-stroke: 0px #0e121d}\n span.s14 {font: 16.0px Helvetica; text-decoration: underline ; font-kerning: none; color: #0e121d; -webkit-text-stroke: 0px #0e121d}\n ol.ol1 {list-style-type: decimal}\n * {padding: 2px;}\n div {background-color: silver}\n <\/style>\n<\/head> \n<body><\/p>\n<div style=\"width: 600px; margin: 0 auto\">\n<a id=\"doc1\"><\/a>how do I create a responsive three column responsive web page using css grid. \u00a0<\/span><\/span><\/p>\n<\/span><\/p>\n<\/span><\/p>\n<\/span><\/p>\n<\/span><\/p>\nTo create a three-column responsive web page using CSS grid, you can follow these steps:<\/span><\/p>\n<ol class=\"ol1\">\n<li class=\"li9\"><\/span>Create the HTML structure:<\/span><\/li>\n<\/ol>\n<div <\/span>class<\/span>=<\/span>“grid-container”<\/span>><\/span><\/p>\n\u00a0 <\/span><div <\/span>class<\/span>=<\/span>“grid-item”<\/span>>Column 1<\/div><\/span><\/p>\n\u00a0 <\/span><div <\/span>class<\/span>=<\/span>“grid-item”<\/span>>Column 2<\/div><\/span><\/p>\n\u00a0 <\/span><div <\/span>class<\/span>=<\/span>“grid-item”<\/span>>Column 3<\/div><\/span><\/p>\n<\/div><\/span><\/p>\n<ol class=\"ol1\">\n<li class=\"li9\"><\/span>Add CSS to create the grid container and set the number of columns:<\/span><\/li>\n<\/ol>\n.grid-container<\/span> {<\/span><\/p>\n\u00a0 <\/span><\/span>display<\/span>: grid;<\/span><\/p>\n\u00a0 <\/span><\/span>grid-template-columns<\/span>: <\/span>repeat<\/span>(<\/span>3<\/span>, <\/span>1<\/span>fr);<\/span><\/p>\n\u00a0 <\/span><\/span>grid-gap<\/span>: <\/span>20px<\/span>;<\/span><\/p>\n}<\/span><\/p>\nThis will create a grid container with three columns of equal width and a gap of 20 pixels between them.<\/span><\/p>\n<ol class=\"ol1\">\n<li class=\"li9\"><\/span>Add CSS to make the grid responsive:<\/span><\/li>\n<\/ol>\n@media<\/span> screen <\/span>and<\/span> (<\/span>max-width<\/span>: <\/span>768px<\/span>) {<\/span><\/p>\n\u00a0 <\/span><\/span>.grid-container<\/span> {<\/span><\/p>\n\u00a0 \u00a0 <\/span><\/span>grid-template-columns<\/span>: <\/span>1<\/span>fr;<\/span><\/p>\n\u00a0 <\/span>}<\/span><\/p>\n}<\/span><\/p>\nThis will change the grid to a single column when the screen size is less than or equal to 768 pixels.<\/span><\/p>\n<ol class=\"ol1\">\n<li class=\"li9\"><\/span>Add CSS to style the grid items:<\/span><\/li>\n<\/ol>\n.grid-item<\/span> {<\/span><\/p>\n\u00a0 <\/span><\/span>background-color<\/span>: <\/span>#fff<\/span>;<\/span><\/p>\n\u00a0 <\/span><\/span>padding<\/span>: <\/span>20px<\/span>;<\/span><\/p>\n\u00a0 <\/span><\/span>text-align<\/span>: center;<\/span><\/p>\n\u00a0 <\/span><\/span>font-size<\/span>: <\/span>20px<\/span>;<\/span><\/p>\n\u00a0 <\/span><\/span>box-shadow<\/span>: <\/span>0px<\/span> <\/span>2px<\/span> <\/span>5px<\/span> <\/span>rgba<\/span>(<\/span>0<\/span>, <\/span>0<\/span>, <\/span>0<\/span>, <\/span>0.3<\/span>);<\/span><\/p>\n}<\/span><\/p>\nThis will add some basic styling to the grid items, including a white background, padding, center alignment, font size, and a box shadow.<\/span><\/p>\nHere’s the complete CSS code:<\/span><\/p>\n.grid-container<\/span> {<\/span><\/p>\n\u00a0 <\/span><\/span>display<\/span>: grid;<\/span><\/p>\n\u00a0 <\/span><\/span>grid-template-columns<\/span>: <\/span>repeat<\/span>(<\/span>3<\/span>, <\/span>1<\/span>fr);<\/span><\/p>\n\u00a0 <\/span><\/span>grid-gap<\/span>: <\/span>20px<\/span>;<\/span><\/p>\n}<\/span><\/p>\n<\/span><\/p>\n@media<\/span> screen <\/span>and<\/span> (<\/span>max-width<\/span>: <\/span>768px<\/span>) {<\/span><\/p>\n\u00a0 <\/span><\/span>.grid-container<\/span> {<\/span><\/p>\n\u00a0 \u00a0 <\/span><\/span>grid-template-columns<\/span>: <\/span>1<\/span>fr;<\/span><\/p>\n\u00a0 <\/span>}<\/span><\/p>\n}<\/span><\/p>\n<\/span><\/p>\n.grid-item<\/span> {<\/span><\/p>\n\u00a0 <\/span><\/span>background-color<\/span>: <\/span>#fff<\/span>;<\/span><\/p>\n\u00a0 <\/span><\/span>padding<\/span>: <\/span>20px<\/span>;<\/span><\/p>\n\u00a0 <\/span><\/span>text-align<\/span>: center;<\/span><\/p>\n\u00a0 <\/span><\/span>font-size<\/span>: <\/span>20px<\/span>;<\/span><\/p>\n\u00a0 <\/span><\/span>box-shadow<\/span>: <\/span>0px<\/span> <\/span>2px<\/span> <\/span>5px<\/span> <\/span>rgba<\/span>(<\/span>0<\/span>, <\/span>0<\/span>, <\/span>0<\/span>, <\/span>0.3<\/span>);<\/span><\/p>\n}<\/span><\/p>\nNote that you can customize the CSS to suit your specific needs and design preferences.<\/span><\/p>\n<\/span><\/p>\n<\/span><\/p>\n<\/span><\/p>\nOnno:<\/p>\n<\/span><\/p>\n<\/span><\/p>\ngreat! now create a portfolio web page for a design student looking for employment<\/span><\/p>\n<\/span><\/p>\n<\/span><\/p>\n<\/span><\/p>\n<\/span><\/p>\nSure! Here’s an example of a portfolio web page for a design student looking for employment:<\/span><\/p>\nHTML code:<\/span><\/p>\n<!DOCTYPE <\/span>html<\/span>><\/span><\/p>\n<html <\/span>lang<\/span>=<\/span>“en”<\/span>><\/span><\/p>\n\u00a0 <\/span><head><\/span><\/p>\n\u00a0 \u00a0 <\/span><meta <\/span>charset<\/span>=<\/span>“UTF-8”<\/span>><\/span><\/p>\n\u00a0 \u00a0 <\/span><title>Design Portfolio | Jane Doe<\/title><\/span><\/p>\n\u00a0 \u00a0 <\/span><link <\/span>rel<\/span>=<\/span>“stylesheet”<\/span> <\/span>href<\/span>=<\/span>“style.css”<\/span>><\/span><\/p>\n\u00a0 <\/span><\/head><\/span><\/p>\n\u00a0 <\/span><body><\/span><\/p>\n\u00a0 \u00a0 <\/span><header><\/span><\/p>\n\u00a0 \u00a0 \u00a0 <\/span><h1>Jane Doe<\/h1><\/span><\/p>\n\u00a0 \u00a0 \u00a0 <\/span><nav><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 <\/span><ul><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><li><a <\/span>href<\/span>=<\/span>“#about”<\/span>>About<\/a><\/li><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><li><a <\/span>href<\/span>=<\/span>“#work”<\/span>>Work<\/a><\/li><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><li><a <\/span>href<\/span>=<\/span>“#contact”<\/span>>Contact<\/a><\/li><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 <\/span><\/ul><\/span><\/p>\n\u00a0 \u00a0 \u00a0 <\/span><\/nav><\/span><\/p>\n\u00a0 \u00a0 <\/span><\/header><\/span><\/p>\n<\/span><\/p>\n\u00a0 \u00a0 <\/span><main><\/span><\/p>\n\u00a0 \u00a0 \u00a0 <\/span><section <\/span>id<\/span>=<\/span>“about”<\/span>><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 <\/span><h2>About Me<\/h2><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 <\/span>I am a recent graduate from XYZ University with a degree in Graphic Design. Throughout my studies, I have developed a strong passion for visual storytelling and creating unique designs that capture the essence of a brand. I am constantly seeking new challenges and opportunities to expand my skill set.<\/p><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 <\/span><img <\/span>src<\/span>=<\/span>“profile-pic.jpg”<\/span> <\/span>alt<\/span>=<\/span>“Jane Doe”<\/span>><\/span><\/p>\n\u00a0 \u00a0 \u00a0 <\/span><\/section><\/span><\/p>\n<\/span><\/p>\n\u00a0 \u00a0 \u00a0 <\/span><section <\/span>id<\/span>=<\/span>“work”<\/span>><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 <\/span><h2>My Work<\/h2><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 <\/span><div <\/span>class<\/span>=<\/span>“grid-container”<\/span>><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><div <\/span>class<\/span>=<\/span>“grid-item”<\/span>><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><img <\/span>src<\/span>=<\/span>“project1.jpg”<\/span> <\/span>alt<\/span>=<\/span>“Project 1”<\/span>><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><h3>Project 1<\/h3><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi euismod purus velit, a volutpat enim pellentesque ac.<\/p><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><\/div><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><div <\/span>class<\/span>=<\/span>“grid-item”<\/span>><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><img <\/span>src<\/span>=<\/span>“project2.jpg”<\/span> <\/span>alt<\/span>=<\/span>“Project 2”<\/span>><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><h3>Project 2<\/h3><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi euismod purus velit, a volutpat enim pellentesque ac.<\/p><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><\/div><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><div <\/span>class<\/span>=<\/span>“grid-item”<\/span>><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><img <\/span>src<\/span>=<\/span>“project3.jpg”<\/span> <\/span>alt<\/span>=<\/span>“Project 3”<\/span>><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><h3>Project 3<\/h3><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi euismod purus velit, a volutpat enim pellentesque ac.<\/p><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><\/div><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 <\/span><\/div><\/span><\/p>\n\u00a0 \u00a0 \u00a0 <\/span><\/section><\/span><\/p>\n<\/span><\/p>\n\u00a0 \u00a0 \u00a0 <\/span><section <\/span>id<\/span>=<\/span>“contact”<\/span>><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 <\/span><h2>Contact Me<\/h2><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 <\/span><form <\/span>action<\/span>=<\/span>“#”<\/span> <\/span>method<\/span>=<\/span>“post”<\/span>><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><label <\/span>for<\/span>=<\/span>“name”<\/span>>Name:<\/label><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><input <\/span>type<\/span>=<\/span>“text”<\/span> <\/span>id<\/span>=<\/span>“name”<\/span> <\/span>name<\/span>=<\/span>“name”<\/span>><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><label <\/span>for<\/span>=<\/span>“email”<\/span>>Email:<\/label><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><input <\/span>type<\/span>=<\/span>“email”<\/span> <\/span>id<\/span>=<\/span>“email”<\/span> <\/span>name<\/span>=<\/span>“email”<\/span>><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><label <\/span>for<\/span>=<\/span>“message”<\/span>>Message:<\/label><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><textarea <\/span>id<\/span>=<\/span>“message”<\/span> <\/span>name<\/span>=<\/span>“message”<\/span>><\/textarea><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><button <\/span>type<\/span>=<\/span>“submit”<\/span>>Send Message<\/button><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 <\/span><\/form><\/span><\/p>\n\u00a0 \u00a0 \u00a0 <\/span><\/section><\/span><\/p>\n\u00a0 \u00a0 <\/span><\/main><\/span><\/p>\n<\/span><\/p>\n\u00a0 \u00a0 <\/span><footer><\/span><\/p>\n\u00a0 \u00a0 \u00a0 <\/span><\/span>©<\/span> 2023 Jane Doe<\/p><\/span><\/p>\n\u00a0 \u00a0 <\/span><\/footer><\/span><\/p>\n\u00a0 <\/span><\/body><\/span><\/p>\n<\/html><\/span><\/p>\nCSS code:<\/span><\/p>\n\/* Global styles *\/<\/span><\/p>\n* {<\/span><\/p>\n\u00a0 <\/span><\/span>box-sizing<\/span>: border-box;<\/span><\/p>\n\u00a0 <\/span><\/span>margin<\/span>: <\/span>0<\/span>;<\/span><\/p>\n\u00a0 <\/span><\/span>padding<\/span>: <\/span>0<\/span>;<\/span><\/p>\n}<\/span><\/p>\n<\/span><\/p>\nbody {<\/span><\/p>\n\u00a0 <\/span><\/span>font-family<\/span>: Arial, sans-serif;<\/span><\/p>\n\u00a0 <\/span><\/span>font-size<\/span>: <\/span>16px<\/span>;<\/span><\/p>\n\u00a0 <\/span><\/span>line-height<\/span>: <\/span>1.5<\/span>;<\/span><\/p>\n}<\/span><\/p>\n<\/span><\/p>\nh1, h2, h3 {<\/span><\/p>\n\u00a0 <\/span><\/span>font-family<\/span>: <\/span>‘Montserrat’<\/span>, sans-serif;<\/span><\/p>\n}<\/span><\/p>\n<\/span><\/p>\na {<\/span><\/p>\n\u00a0 <\/span><\/span>color<\/span>: <\/span>#333<\/span>;<\/span><\/p>\n\u00a0 <\/span><\/span>text-decoration<\/span>: none;<\/span><\/p>\n}<\/span><\/p>\n<\/span><\/p>\na<\/span><\/p>\n<\/span><\/p>\n<\/span><\/p>\n<\/span><\/p>\nonno:<\/p>\n<\/span><\/p>\n<\/span><\/p>\nCan you use images from the web to make this attractive?<\/span><\/p>\n<\/span><\/p>\n<\/span><\/p>\n<\/span><\/p>\n<\/span><\/p>\nSure! Here’s an updated HTML code for the portfolio web page, with image URLs from the web:<\/span><\/p>\n<!DOCTYPE <\/span>html<\/span>><\/span><\/p>\n<html <\/span>lang<\/span>=<\/span>“en”<\/span>><\/span><\/p>\n\u00a0 <\/span><head><\/span><\/p>\n\u00a0 \u00a0 <\/span><meta <\/span>charset<\/span>=<\/span>“UTF-8”<\/span>><\/span><\/p>\n\u00a0 \u00a0 <\/span><title>Design Portfolio | Jane Doe<\/title><\/span><\/p>\n\u00a0 \u00a0 <\/span><link <\/span>rel<\/span>=<\/span>“stylesheet”<\/span> <\/span>href<\/span>=<\/span>“style.css”<\/span>><\/span><\/p>\n\u00a0 <\/span><\/head><\/span><\/p>\n\u00a0 <\/span><body><\/span><\/p>\n\u00a0 \u00a0 <\/span><header><\/span><\/p>\n\u00a0 \u00a0 \u00a0 <\/span><h1>Jane Doe<\/h1><\/span><\/p>\n\u00a0 \u00a0 \u00a0 <\/span><nav><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 <\/span><ul><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><li><a <\/span>href<\/span>=<\/span>“#about”<\/span>>About<\/a><\/li><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><li><a <\/span>href<\/span>=<\/span>“#work”<\/span>>Work<\/a><\/li><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><li><a <\/span>href<\/span>=<\/span>“#contact”<\/span>>Contact<\/a><\/li><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 <\/span><\/ul><\/span><\/p>\n\u00a0 \u00a0 \u00a0 <\/span><\/nav><\/span><\/p>\n\u00a0 \u00a0 <\/span><\/header><\/span><\/p>\n<\/span><\/p>\n\u00a0 \u00a0 <\/span><main><\/span><\/p>\n\u00a0 \u00a0 \u00a0 <\/span><section <\/span>id<\/span>=<\/span>“about”<\/span>><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 <\/span><h2>About Me<\/h2><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 <\/span>I am a recent graduate from XYZ University with a degree in Graphic Design. Throughout my studies, I have developed a strong passion for visual storytelling and creating unique designs that capture the essence of a brand. I am constantly seeking new challenges and opportunities to expand my skill set.<\/p><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 <\/span><img <\/span>src<\/span>=<\/span>“https:\/\/picsum.photos\/400\/400?random=1”<\/span> <\/span>alt<\/span>=<\/span>“Jane Doe”<\/span>><\/span><\/p>\n\u00a0 \u00a0 \u00a0 <\/span><\/section><\/span><\/p>\n<\/span><\/p>\n\u00a0 \u00a0 \u00a0 <\/span><section <\/span>id<\/span>=<\/span>“work”<\/span>><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 <\/span><h2>My Work<\/h2><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 <\/span><div <\/span>class<\/span>=<\/span>“grid-container”<\/span>><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><div <\/span>class<\/span>=<\/span>“grid-item”<\/span>><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><img <\/span>src<\/span>=<\/span>“https:\/\/picsum.photos\/400\/400?random=2”<\/span> <\/span>alt<\/span>=<\/span>“Project 1”<\/span>><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><h3>Project 1<\/h3><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi euismod purus velit, a volutpat enim pellentesque ac.<\/p><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><\/div><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><div <\/span>class<\/span>=<\/span>“grid-item”<\/span>><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><img <\/span>src<\/span>=<\/span>“https:\/\/picsum.photos\/400\/400?random=3”<\/span> <\/span>alt<\/span>=<\/span>“Project 2”<\/span>><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><h3>Project 2<\/h3><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi euismod purus velit, a volutpat enim pellentesque ac.<\/p><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><\/div><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><div <\/span>class<\/span>=<\/span>“grid-item”<\/span>><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><img <\/span>src<\/span>=<\/span>“https:\/\/picsum.photos\/400\/400?random=4”<\/span> <\/span>alt<\/span>=<\/span>“Project 3”<\/span>><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><h3>Project 3<\/h3><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi euismod purus velit, a volutpat enim pellentesque ac.<\/p><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><\/div><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 <\/span><\/div><\/span><\/p>\n\u00a0 \u00a0 \u00a0 <\/span><\/section><\/span><\/p>\n<\/span><\/p>\n\u00a0 \u00a0 \u00a0 <\/span><section <\/span>id<\/span>=<\/span>“contact”<\/span>><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 <\/span><h2>Contact Me<\/h2><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 <\/span><form <\/span>action<\/span>=<\/span>“#”<\/span> <\/span>method<\/span>=<\/span>“post”<\/span>><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><label <\/span>for<\/span>=<\/span>“name”<\/span>>Name:<\/label><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><input <\/span>type<\/span>=<\/span>“text”<\/span> <\/span>id<\/span>=<\/span>“name”<\/span> <\/span>name<\/span>=<\/span>“name”<\/span>><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><label <\/span>for<\/span>=<\/span>“email”<\/span>>Email:<\/label><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><input <\/span>type<\/span>=<\/span>“email”<\/span> <\/span>id<\/span>=<\/span>“email”<\/span> <\/span>name<\/span>=<\/span>“email”<\/span>><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><label <\/span>for<\/span>=<\/span>“message”<\/span>>Message:<\/label><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><textarea <\/span>id<\/span>=<\/span>“message”<\/span> <\/span>name<\/span>=<\/span>“message”<\/span>><\/textarea><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><button <\/span>type<\/span>=<\/span>“submit”<\/span>>Send Message<\/button><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 <\/span><\/form><\/span><\/p>\n\u00a0 \u00a0 \u00a0 <\/span><\/section><\/span><\/p>\n\u00a0 \u00a0 <\/span><\/main><\/span><\/p>\n<\/span><\/p>\n\u00a0 \u00a0 <\/span><footer><\/span><\/p>\n\u00a0 \u00a0 \u00a0 <\/span><\/span>©<\/span> 2023 Jane Doe<\/p><\/span><\/p>\n\u00a0 \u00a0 <\/span><\/footer><\/span><\/p>\n\u00a0 <\/span><\/body><\/span><\/p>\n<\/html><\/span><\/p>\nNote that the <\/span>src<\/b><\/span> attributes of the <\/span>img<\/b><\/span> elements now point to image URLs from the web, obtained using the <a href=\"https:\/\/picsum.photos\/\">Lorem Picsum<\/span><\/a> service.<\/span><\/p>\n<\/span><\/p>\n<\/span><\/p>\n<\/span><\/p>\nOnno:<\/p>\n<\/span><\/p>\n<\/span><\/p>\nNo background picture to make eveything unified? How about design elements. Can we do it in 3 columns?<\/span><\/p>\n<\/span><\/p>\n<\/span><\/p>\n<\/span><\/p>\n<\/span><\/p>\nSure! Here’s an updated HTML code for the portfolio web page with a background image, design elements, and a three-column layout using CSS Grid:<\/span><\/p>\n<!DOCTYPE <\/span>html<\/span>><\/span><\/p>\n<html <\/span>lang<\/span>=<\/span>“en”<\/span>><\/span><\/p>\n\u00a0 <\/span><head><\/span><\/p>\n\u00a0 \u00a0 <\/span><meta <\/span>charset<\/span>=<\/span>“UTF-8”<\/span>><\/span><\/p>\n\u00a0 \u00a0 <\/span><title>Design Portfolio | Jane Doe<\/title><\/span><\/p>\n\u00a0 \u00a0 <\/span><link <\/span>rel<\/span>=<\/span>“stylesheet”<\/span> <\/span>href<\/span>=<\/span>“style.css”<\/span>><\/span><\/p>\n\u00a0 <\/span><\/head><\/span><\/p>\n\u00a0 <\/span><body><\/span><\/p>\n\u00a0 \u00a0 <\/span><header><\/span><\/p>\n\u00a0 \u00a0 \u00a0 <\/span><h1>Jane Doe<\/h1><\/span><\/p>\n\u00a0 \u00a0 \u00a0 <\/span><nav><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 <\/span><ul><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><li><a <\/span>href<\/span>=<\/span>“#about”<\/span>>About<\/a><\/li><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><li><a <\/span>href<\/span>=<\/span>“#work”<\/span>>Work<\/a><\/li><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><li><a <\/span>href<\/span>=<\/span>“#contact”<\/span>>Contact<\/a><\/li><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 <\/span><\/ul><\/span><\/p>\n\u00a0 \u00a0 \u00a0 <\/span><\/nav><\/span><\/p>\n\u00a0 \u00a0 <\/span><\/header><\/span><\/p>\n<\/span><\/p>\n\u00a0 \u00a0 <\/span><main><\/span><\/p>\n\u00a0 \u00a0 \u00a0 <\/span><section <\/span>id<\/span>=<\/span>“about”<\/span> <\/span>class<\/span>=<\/span>“section”<\/span>><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 <\/span><div <\/span>class<\/span>=<\/span>“grid-container”<\/span>><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><div <\/span>class<\/span>=<\/span>“grid-item”<\/span>><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><h2>About Me<\/h2><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span>I am a recent graduate from XYZ University with a degree in Graphic Design. Throughout my studies, I have developed a strong passion for visual storytelling and creating unique designs that capture the essence of a brand. I am constantly seeking new challenges and opportunities to expand my skill set.<\/p><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><\/div><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><div <\/span>class<\/span>=<\/span>“grid-item”<\/span>><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><img <\/span>src<\/span>=<\/span>“https:\/\/picsum.photos\/400\/400?random=1”<\/span> <\/span>alt<\/span>=<\/span>“Jane Doe”<\/span>><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><\/div><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 <\/span><\/div><\/span><\/p>\n\u00a0 \u00a0 \u00a0 <\/span><\/section><\/span><\/p>\n<\/span><\/p>\n\u00a0 \u00a0 \u00a0 <\/span><section <\/span>id<\/span>=<\/span>“work”<\/span> <\/span>class<\/span>=<\/span>“section”<\/span>><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 <\/span><h2>My Work<\/h2><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 <\/span><div <\/span>class<\/span>=<\/span>“grid-container”<\/span>><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><div <\/span>class<\/span>=<\/span>“grid-item”<\/span>><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><img <\/span>src<\/span>=<\/span>“https:\/\/picsum.photos\/400\/400?random=2”<\/span> <\/span>alt<\/span>=<\/span>“Project 1”<\/span>><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><h3>Project 1<\/h3><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi euismod purus velit, a volutpat enim pellentesque ac.<\/p><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><\/div><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><div <\/span>class<\/span>=<\/span>“grid-item”<\/span>><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><img <\/span>src<\/span>=<\/span>“https:\/\/picsum.photos\/400\/400?random=3”<\/span> <\/span>alt<\/span>=<\/span>“Project 2”<\/span>><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><h3>Project 2<\/h3><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi euismod purus velit, a volutpat enim pellentesque ac.<\/p><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><\/div><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><div <\/span>class<\/span>=<\/span>“grid-item”<\/span>><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><img <\/span>src<\/span>=<\/span>“https:\/\/picsum.photos\/400\/400?random=4”<\/span> <\/span>alt<\/span>=<\/span>“Project 3”<\/span>><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><h3>Project 3<\/h3><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi euismod purus velit, a volutpat enim pellentesque ac.<\/p><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><\/div><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 <\/span><\/div><\/span><\/p>\n\u00a0 \u00a0 \u00a0 <\/span><\/section><\/span><\/p>\n<\/span><\/p>\n\u00a0 \u00a0 \u00a0 <\/span><section <\/span>id<\/span>=<\/span>“contact”<\/span> <\/span>class<\/span>=<\/span>“section”<\/span>><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 <\/span><h2>Contact Me<\/h2><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 <\/span><form <\/span>action<\/span>=<\/span>“#”<\/span> <\/span>method<\/span>=<\/span>“post”<\/span>><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><label <\/span>for<\/span>=<\/span>“name”<\/span>>Name:<\/label><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><input <\/span>type<\/span>=<\/span>“text”<\/span> <\/span>id<\/span>=<\/span>“name”<\/span> <\/span>name<\/span>=<\/span>“name”<\/span>><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><label <\/span>for<\/span>=<\/span>“email”<\/span>>Email:<\/label><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><input <\/span>type<\/span>=<\/span>“email”<\/span> <\/span>id<\/span>=<\/span>“email”<\/span> <\/span>name<\/span>=<\/span>“email”<\/span>><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><label <\/span>for<\/span>=<\/span>“message”<\/span>>Message:<\/label><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><textarea <\/span>id<\/span>=<\/span>“message”<\/span> <\/span>name<\/span>=<\/span>“message”<\/span>><\/textarea><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><button <\/span>type<\/span>=<\/span>“submit”<\/span>>Send Message<\/button><\/span><\/p>\n\u00a0 \u00a0 \u00a0 \u00a0 <\/span><\/form><\/span><\/p>\n\u00a0 \u00a0 \u00a0 <\/span><\/section><\/span><\/p>\n\u00a0 \u00a0 <\/span><\/main><\/span><\/p>\n<\/span><\/p>\n\u00a0 \u00a0 <\/span><footer><\/span><\/p>\n\u00a0 \u00a0 \u00a0 <\/span><\/span>©<\/span> 2023 Jane Doe<\/p><\/span><\/p>\n\u00a0 \u00a0 <\/span><\/footer><\/span><\/p>\n\u00a0 <\/span><\/body><\/span><\/p>\n<\/html><\/span><\/p>\nAnd<\/span><\/p>\n<\/span><\/p>\n\/* Reset default margin and padding *\/<\/span><\/p>\n* {<\/span><\/p>\n\u00a0 <\/span><\/span>margin<\/span>: <\/span>0<\/span>;<\/span><\/p>\n\u00a0 <\/span><\/span>padding<\/span>: <\/span>0<\/span>;<\/span><\/p>\n}<\/span><\/p>\n<\/span><\/p>\n\/* Set the background image *\/<\/span><\/p>\nbody {<\/span><\/p>\n\u00a0 <\/span><\/span>background-image<\/span>: <\/span>url<\/span>(<\/span>“https:\/\/picsum.photos\/1920\/1080?random=5”<\/span>);<\/span><\/p>\n\u00a0 <\/span><\/span>background-size<\/span>: cover;<\/span><\/p>\n}<\/span><\/p>\n<\/span><\/p>\n\/* Style the header *\/<\/span><\/p>\nheader {<\/span><\/p>\n\u00a0 <\/span><\/span>display<\/span>: flex;<\/span><\/p>\n\u00a0 <\/span><\/span>justify-content<\/span>: space-between;<\/span><\/p>\n\u00a0 <\/span><\/span>align-items<\/span>: center;<\/span><\/p>\n\u00a0 <\/span><\/span>padding<\/span>: <\/span>20px<\/span>;<\/span><\/p>\n}<\/span><\/p>\n<\/span><\/p>\nh1 {<\/span><\/p>\n\u00a0 <\/span><\/span>font-size<\/span>: <\/span>2.5rem<\/span>;<\/span><\/p>\n\u00a0 <\/span><\/span>font-weight<\/span>: bold;<\/span><\/p>\n\u00a0 <\/span><\/span>color<\/span>: <\/span>#fff<\/span>;<\/span><\/p>\n}<\/span><\/p>\n<\/span><\/p>\nnav ul {<\/span><\/p>\n\u00a0 <\/span><\/span>display<\/span>: flex;<\/span><\/p>\n\u00a0 <\/span><\/span>list-style<\/span>: none;<\/span><\/p>\n}<\/span><\/p>\n<\/span><\/p>\nnav li {<\/span><\/p>\n\u00a0 <\/span><\/span>margin<\/span>: <\/span>0<\/span> <\/span>20px<\/span>;<\/span><\/p>\n}<\/span><\/p>\n<\/span><\/p>\nnav a {<\/span><\/p>\n\u00a0 <\/span><\/span>color<\/span>: <\/span>#fff<\/span>;<\/span><\/p>\n\u00a0 <\/span><\/span>text-decoration<\/span>: none;<\/span><\/p>\n\u00a0 <\/span><\/span>font-size<\/span>: <\/span>1.2rem<\/span>;<\/span><\/p>\n\u00a0 <\/span><\/span>font-weight<\/span>: bold;<\/span><\/p>\n}<\/span><\/p>\n<\/span><\/p>\n\/* Style the main content *\/<\/span><\/p>\nmain {<\/span><\/p>\n\u00a0 <\/span><\/span>display<\/span>: flex;<\/span><\/p>\n\u00a0 <\/span><\/span>flex-direction<\/span>: column;<\/span><\/p>\n\u00a0 <\/span><\/span>align-items<\/span>: center;<\/span><\/p>\n\u00a0 <\/span><\/span>padding<\/span>: <\/span>50px<\/span> <\/span>20px<\/span>;<\/span><\/p>\n}<\/span><\/p>\n<\/span><\/p>\n.section<\/span> {<\/span><\/p>\n\u00a0 <\/span><\/span>width<\/span>: <\/span>100%<\/span>;<\/span><\/p>\n\u00a0 <\/span><\/span>margin-bottom<\/span>: <\/span>50px<\/span>;<\/span><\/p>\n}<\/span><\/p>\n<\/span><\/p>\n.grid-container<\/span> {<\/span><\/p>\n\u00a0 <\/span><\/span>display<\/span>: grid;<\/span><\/p>\n\u00a0 <\/span><\/span>grid-template-columns<\/span>: <\/span>repeat<\/span>(<\/span>3<\/span>, <\/span>1<\/span>fr);<\/span><\/p>\n\u00a0 <\/span><\/span>gap<\/span>: <\/span>30px<\/span>;<\/span><\/p>\n}<\/span><\/p>\n<\/span><\/p>\n.grid-item<\/span> {<\/span><\/p>\n\u00a0 <\/span><\/span>background-color<\/span>: <\/span>#fff<\/span>;<\/span><\/p>\n\u00a0 <\/span><\/span>padding<\/span>: <\/span>20px<\/span>;<\/span><\/p>\n\u00a0 <\/span><\/span>border-radius<\/span>: <\/span>10px<\/span>;<\/span><\/p>\n\u00a0 <\/span><\/span>box-shadow<\/span>: <\/span>0<\/span> <\/span>0<\/span> <\/span>10px<\/span> <\/span>rgba<\/span>(<\/span>0<\/span>, <\/span>0<\/span>, <\/span>0<\/span>, <\/span>0.2<\/span>);<\/span><\/p>\n}<\/span><\/p>\n<\/span><\/p>\nimg {<\/span><\/p>\n\u00a0 <\/span><\/span>max-width<\/span>: <\/span>100%<\/span>;<\/span><\/p>\n\u00a0 <\/span><\/span>height<\/span>: auto;<\/span><\/p>\n\u00a0 <\/span><\/span>margin-bottom<\/span>: <\/span>20px<\/span>;<\/span><\/p>\n\u00a0 <\/span><\/span>border-radius<\/span>: <\/span>5px<\/span>;<\/span><\/p>\n}<\/span><\/p>\n<\/span><\/p>\nh2 {<\/span><\/p>\n\u00a0 <\/span><\/span>font-size<\/span>: <\/span>2rem<\/span>;<\/span><\/p>\n\u00a0 <\/span><\/span>font-weight<\/span>: bold;<\/span><\/p>\n\u00a0 <\/span><\/span>color<\/span>: <\/span>#fff<\/span>;<\/span><\/p>\n\u00a0 <\/span><\/span>margin-bottom<\/span>: <\/span>20px<\/span>;<\/span><\/p>\n}<\/span><\/p>\n<\/span><\/p>\nh3 {<\/span><\/p>\n\u00a0 <\/span><\/span>font-size<\/span>: <\/span>1.5rem<\/span>;<\/span><\/p>\n\u00a0 <\/span><\/span>font-weight<\/span>: bold;<\/span><\/p>\n\u00a0 <\/span><\/span>margin-bottom<\/span>: <\/span>10px<\/span>;<\/span><\/p>\n}<\/span><\/p>\n<\/span><\/p>\np {<\/span><\/p>\n\u00a0 <\/span><\/span>font-size<\/span>: <\/span>1.2rem<\/span>;<\/span><\/p>\n\u00a0 <\/span><\/span>line-height<\/span>: <\/span>1.5<\/span>;<\/span><\/p>\n\u00a0 <\/span><\/span>margin-bottom<\/span>: <\/span>20px<\/span>;<\/span><\/p>\n}<\/span><\/p>\n<\/span><\/p>\nform label {<\/span><\/p>\n\u00a0 <\/span><\/span>font-size<\/span>: <\/span>1.2rem<\/span>;<\/span><\/p>\n\u00a0 <\/span><\/span>font-weight<\/span>: bold;<\/span><\/p>\n\u00a0 <\/span><\/span>margin-bottom<\/span>: <\/span>10px<\/span>;<\/span><\/p>\n\u00a0 <\/span><\/span>display<\/span>: block;<\/span><\/p>\n}<\/span><\/p>\n<\/span><\/p>\nform input,<\/span><\/p>\nform textarea {<\/span><\/p>\n\u00a0 <\/span><\/span>padding<\/span>: <\/span>10px<\/span>;<\/span><\/p>\n\u00a0 <\/span><\/span>margin-bottom<\/span>: <\/span>20px<\/span>;<\/span><\/p>\n\u00a0 <\/span><\/span>border-radius<\/span>: <\/span>5px<\/span>;<\/span><\/p>\n\u00a0 <\/span><\/span>border<\/span>: none;<\/span><\/p>\n\u00a0 <\/span><\/span>font-size<\/span>: <\/span>1.2rem<\/span>;<\/span><\/p>\n}<\/span><\/p>\n<\/span><\/p>\nform button {<\/span><\/p>\n\u00a0 <\/span><\/span>background-color<\/span>: <\/span>#333<\/span>;<\/span><\/p>\n\u00a0 <\/span><\/span>color<\/span>: <\/span>#fff<\/span>;<\/span><\/p>\n\u00a0 <\/span><\/span>padding<\/span>: <\/span>10px<\/span> <\/span>20px<\/span>;<\/span><\/p>\n\u00a0 <\/span><\/span>border-radius<\/span>: <\/span>5px<\/span>;<\/span><\/p>\n\u00a0 <\/span><\/span>border<\/span>: none;<\/span><\/p>\n\u00a0 <\/span><\/span>font-size<\/span>: <\/span>1.2rem<\/span>;<\/span><\/p>\n\u00a0 <\/span><\/span>font-weight<\/span>: bold;<\/span><\/p>\n\u00a0 <\/span><\/span>cursor<\/span>: pointer;<\/span><\/p>\n\u00a0 <\/span><\/span>transition<\/span>: background-color <\/span>0.2s<\/span> ease-in-out;<\/span><\/p>\n}<\/span><\/p>\n<\/span><\/p>\nform button<\/span>:hover<\/span> {<\/span><\/p>\n\u00a0 <\/span><\/span>background-color<\/span>: <\/span>#555<\/span>;<\/span><\/p>\n}<\/span><\/p>\nThis should style the HTML code I provided earlier and create a visually appealing portfolio web page with the requested design elements.<\/span><\/p>\n<\/span><\/p>\n<\/span><\/p>\n<\/span><\/p>\nOnno:<\/p>\n<\/span><\/p>\n<\/span><\/p>\nNw could you make it responsive so it looks good on a smart phone?<\/span><\/p>\n<\/span><\/p>\n<\/span><\/p>\n<\/span><\/p>\n<\/span><\/p>\nSure! Here’s the updated CSS code with media queries to make the portfolio web page responsive for smaller screens such as smartphones:<\/span><\/p>\n\/* Reset default margin and padding *\/<\/span><\/p>\n* {<\/span><\/p>\n\u00a0 <\/span><\/span>margin<\/span>: <\/span>0<\/span>;<\/span><\/p>\n\u00a0 <\/span><\/span>padding<\/span>: <\/span>0<\/span>;<\/span><\/p>\n}<\/span><\/p>\n<\/span><\/p>\n\/* Set the background image *\/<\/span><\/p>\nbody {<\/span><\/p>\n\u00a0 <\/span><\/span>background-image<\/span>: <\/span>url<\/span>(<\/span>“https:\/\/picsum.photos\/1920\/1080?random=5”<\/span>);<\/span><\/p>\n\u00a0 <\/span><\/span>background-size<\/span>: cover;<\/span><\/p>\n}<\/span><\/p>\n<\/span><\/p>\n\/* Style the header *\/<\/span><\/p>\nheader {<\/span><\/p>\n\u00a0 <\/span><\/span>display<\/span>: flex;<\/span><\/p>\n\u00a0 <\/span><\/span>justify-content<\/span>: space-between;<\/span><\/p>\n\u00a0 <\/span><\/span>align-items<\/span>: center;<\/span><\/p>\n\u00a0 <\/span><\/span>padding<\/span>: <\/span>20px<\/span>;<\/span><\/p>\n}<\/span><\/p>\n<\/span><\/p>\nh1 {<\/span><\/p>\n\u00a0 <\/span><\/span>font-size<\/span>: <\/span>2.5rem<\/span>;<\/span><\/p>\n\u00a0 <\/span><\/span>font-weight<\/span>: bold;<\/span><\/p>\n\u00a0 <\/span><\/span>color<\/span>: <\/span>#fff<\/span>;<\/span><\/p>\n}<\/span><\/p>\n<\/span><\/p>\nnav ul {<\/span><\/p>\n\u00a0 <\/span><\/span>display<\/span>: flex;<\/span><\/p>\n\u00a0 <\/span><\/span>list-style<\/span>: none;<\/span><\/p>\n}<\/span><\/p>\n<\/span><\/p>\nnav li {<\/span><\/p>\n\u00a0 <\/span><\/span>margin<\/span>: <\/span>0<\/span> <\/span>20px<\/span>;<\/span><\/p>\n}<\/span><\/p>\n<\/span><\/p>\nnav a {<\/span><\/p>\n\u00a0 <\/span><\/span>color<\/span>: <\/span>#fff<\/span>;<\/span><\/p>\n\u00a0 <\/span><\/span>text-decoration<\/span>: none;<\/span><\/p>\n\u00a0 <\/span><\/span>font-size<\/span>: <\/span>1.2rem<\/span>;<\/span><\/p>\n\u00a0 <\/span><\/span>font-weight<\/span>: bold;<\/span><\/p>\n}<\/span><\/p>\n<\/span><\/p>\n\/* Style the main content *\/<\/span><\/p>\nmain {<\/span><\/p>\n\u00a0 <\/span><\/span>display<\/span>: flex;<\/span><\/p>\n\u00a0 <\/span><\/span>flex-direction<\/span>: column;<\/span><\/p>\n\u00a0 <\/span><\/span>align-items<\/span>: center;<\/span><\/p>\n\u00a0 <\/span><\/span>padding<\/span>: <\/span>50px<\/span> <\/span>20px<\/span>;<\/span><\/p>\n}<\/span><\/p>\n<\/span><\/p>\n.section<\/span> {<\/span><\/p>\n\u00a0 <\/span><\/span>width<\/span>: <\/span>100%<\/span>;<\/span><\/p>\n\u00a0 <\/span><\/span>margin-bottom<\/span>: <\/span>50px<\/span>;<\/span><\/p>\n}<\/span><\/p>\n<\/span><\/p>\n.grid-container<\/span> {<\/span><\/p>\n\u00a0 <\/span><\/span>display<\/span>: grid;<\/span><\/p>\n\u00a0 <\/span><\/span>grid-template-columns<\/span>: <\/span>repeat<\/span>(<\/span>3<\/span>, <\/span>1<\/span>fr);<\/span><\/p>\n\u00a0 <\/span><\/span>gap<\/span>: <\/span>30px<\/span>;<\/span><\/p>\n}<\/span><\/p>\n<\/span><\/p>\n.grid-item<\/span> {<\/span><\/p>\n\u00a0 <\/span><\/span>background-color<\/span>: <\/span>#fff<\/span>;<\/span><\/p>\n\u00a0 <\/span><\/span>padding<\/span>: <\/span>20px<\/span>;<\/span><\/p>\n\u00a0 <\/span><\/span>border-radius<\/span>: <\/span>10px<\/span>;<\/span><\/p>\n\u00a0 <\/span><\/span>box-shadow<\/span>: <\/span>0<\/span> <\/span>0<\/span> <\/span>10px<\/span> <\/span>rgba<\/span>(<\/span>0<\/span>, <\/span>0<\/span>, <\/span>0<\/span>, <\/span>0.2<\/span>);<\/span><\/p>\n}<\/span><\/p>\n<\/span><\/p>\nimg {<\/span><\/p>\n\u00a0 <\/span><\/span>max-width<\/span>: <\/span>100%<\/span>;<\/span><\/p>\n\u00a0 <\/span><\/span>height<\/span>: auto;<\/span><\/p>\n\u00a0 <\/span><\/span>margin-bottom<\/span>: <\/span>20px<\/span>;<\/span><\/p>\n\u00a0 <\/span><\/span>border-radius<\/span>: <\/span>5px<\/span>;<\/span><\/p>\n}<\/span><\/p>\n<\/span><\/p>\nh2 {<\/span><\/p>\n\u00a0 <\/span><\/span>font-size<\/span>: <\/span>2rem<\/span>;<\/span><\/p>\n\u00a0 <\/span><\/span>font-weight<\/span>: bold;<\/span><\/p>\n\u00a0 <\/span><\/span>color<\/span>: <\/span>#fff<\/span>;<\/span><\/p>\n\u00a0 <\/span><\/span>margin-bottom<\/span>: <\/span>20px<\/span>;<\/span><\/p>\n}<\/span><\/p>\n<\/span><\/p>\nh3 {<\/span><\/p>\n\u00a0 <\/span><\/span>font-size<\/span>: <\/span>1.5rem<\/span>;<\/span><\/p>\n\u00a0 <\/span><\/span>font-weight<\/span>: bold;<\/span><\/p>\n\u00a0 <\/span><\/span>margin-bottom<\/span>: <\/span>10px<\/span>;<\/span><\/p>\n}<\/span><\/p>\n<\/span><\/p>\np {<\/span><\/p>\n\u00a0 <\/span><\/span>font-size<\/span>: <\/span>1.2rem<\/span>;<\/span><\/p>\n\u00a0 <\/span><\/span>line-height<\/span>: <\/span>1.5<\/span>;<\/span><\/p>\n\u00a0 <\/span><\/span>margin-bottom<\/span>: <\/span>20px<\/span>;<\/span><\/p>\n}<\/span><\/p>\n<\/span><\/p>\nform label {<\/span><\/p>\n\u00a0 <\/span><\/span>font-size<\/span>: <\/span>1.2rem<\/span>;<\/span><\/p>\n\u00a0 <\/span><\/span>font-weight<\/span>: bold;<\/span><\/p>\n\u00a0 <\/span><\/span>margin-bottom<\/span>: <\/span>10px<\/span>;<\/span><\/p>\n\u00a0 <\/span><\/span>display<\/span>: block;<\/span><\/p>\n}<\/span><\/p>\n<\/span><\/p>\nform input,<\/span><\/p>\nform textarea {<\/span><\/p>\n\u00a0 <\/span><\/span>padding<\/span>: <\/span>10px<\/span>;<\/span><\/p>\n\u00a0 <\/span><\/span>margin-bottom<\/span>: <\/span>20px<\/span>;<\/span><\/p>\n\u00a0 <\/span><\/span>border-radius<\/span>: <\/span>5px<\/span>;<\/span><\/p>\n\u00a0 <\/span><\/span>border<\/span>: none;<\/span><\/p>\n\u00a0 <\/span><\/span>font-size<\/span>: <\/span>1.2rem<\/span>;<\/span><\/p>\n}<\/span><\/p>\n<\/span><\/p>\nform button {<\/span><\/p>\n\u00a0 <\/span><\/span>background-color<\/span>: <\/span>#333<\/span>;<\/span><\/p>\n\u00a0 <\/span><\/span>color<\/span>: <\/span>#fff<\/span>;<\/span><\/p>\n\u00a0 <\/span><\/span>padding<\/span>: <\/span>10px<\/span> <\/span>20px<\/span>;<\/span><\/p>\n\u00a0 <\/span><\/span>border-radius<\/span>: <\/span>5px<\/span>;<\/span><\/p>\n\u00a0 <\/span><\/span>border<\/span>: none;<\/span><\/p>\n\u00a0 <\/span><\/span>font-size<\/span>: <\/span>1.2rem<\/span>;<\/span><\/p>\n\u00a0 <\/span><\/span>font-weight<\/span>: bold;<\/span><\/p>\n\u00a0 <\/span><\/span>cursor<\/span>: pointer;<\/span><\/p>\n\u00a0 <\/span><\/span>transition<\/span>: background-color <\/span>0.2s<\/span> ease-in-out;<\/span><\/p>\n}<\/span><\/p>\n<\/span><\/p>\nform button<\/span>:hover<\/span> {<\/span><\/p>\n\u00a0 <\/span><\/span>background-color<\/span>: <\/span>#555<\/span>;<\/span><\/p>\n}<\/span><\/p>\n<\/span><\/p>\n\/* Media queries for smaller screens *\/<\/span><\/p>\n@media<\/span> screen <\/span>and<\/span> (<\/span>max-width<\/span>: <\/span>768px<\/span>) {<\/span><\/p>\n\u00a0 <\/span>header {<\/span><\/p>\n\u00a0 \u00a0 <\/span><\/span>flex-direction<\/span>: column;<\/span><\/p>\n\u00a0 \u00a0 <\/span><\/span>align-items<\/span>: center;<\/span><\/p>\n\u00a0 <\/span>}<\/span><\/p>\n<\/span><\/p>\n\u00a0 <\/span>nav ul {<\/span><\/p>\n\u00a0 \u00a0 <\/span><\/span>margin-top<\/span>: <\/span>20px<\/span>;<\/span><\/p>\n\u00a0 <\/span>}<\/span><\/p>\n<\/span><\/p>\n\u00a0 <\/span><\/span>.grid-container<\/span> {<\/span><\/p>\n\u00a0 \u00a0 <\/span><\/span>grid-template-columns<\/span>: <\/span>repeat<\/span>(<\/span>1<\/span>, <\/span>1<\/span>fr);<\/span><\/p>\n\u00a0 <\/span>}<\/span><\/p>\n\u00a0\u00a0<\/span><\/span><\/p>\n\u00a0 <\/span><\/span>.grid-item<\/span> {<\/span><\/p>\n\u00a0 \u00a0 <\/span><\/span>margin-bottom<\/span>: <\/span>30px<\/span>;<\/span><\/p>\n\u00a0 <\/span>}<\/span><\/p>\n<\/span><\/p>\n\u00a0 <\/span>h1 {<\/span><\/p>\n\u00a0 \u00a0 <\/span><\/span>font-size<\/span>: <\/span>2rem<\/span>;<\/span><\/p>\n\u00a0 \u00a0 <\/span><\/span>text-align<\/span>: center;<\/span><\/p>\n\u00a0 <\/span>}<\/span><\/p>\n<\/span><\/p>\n\u00a0 <\/span>h2 {<\/span><\/p>\n\u00a0 \u00a0 <\/span><\/span>font-size<\/span>: <\/span>1.5rem<\/span>;<\/span><\/p>\n\u00a0 <\/span>}<\/span><\/p>\n<\/span><\/p>\n\u00a0 <\/span>h3 {<\/span><\/p>\n\u00a0 \u00a0 <\/span><\/span>font-size<\/span>: <\/span>1.2rem<\/span>;<\/span><\/p>\n\u00a0 <\/span>}<\/span><\/p>\n<\/span><\/p>\n\u00a0 <\/span>p {<\/span><\/p>\n<\/div>\n<\/body> \n<\/html><\/p>\n","protected":false},"excerpt":{"rendered":"< !DOCTYPE html PUBLIC \"-\/\/W3C\/\/DTD HTML 4.01\/\/EN\" \"http:\/\/www.w3.org\/TR\/html4\/strict.dtd\"> Parsons 2017 Fall Web Design how do I create a responsive three column responsive web page using css grid. \u00a0 To create a three-column responsive web page using CSS grid, you can … <a href=\"http:\/\/b.parsons.edu\/~dejongo\/5895-2\/\">Continue reading →<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[5],"tags":[],"_links":{"self":[{"href":"http:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/posts\/5895"}],"collection":[{"href":"http:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/comments?post=5895"}],"version-history":[{"count":6,"href":"http:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/posts\/5895\/revisions"}],"predecessor-version":[{"id":5901,"href":"http:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/posts\/5895\/revisions\/5901"}],"wp:attachment":[{"href":"http:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/media?parent=5895"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/categories?post=5895"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/tags?post=5895"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}