{"id":906,"date":"2018-10-31T00:38:39","date_gmt":"2018-10-31T00:38:39","guid":{"rendered":"http:\/\/ucsbwebdev.local\/?p=906"},"modified":"2018-10-31T00:38:39","modified_gmt":"2018-10-31T00:38:39","slug":"css-home-exercise","status":"publish","type":"post","link":"https:\/\/ucsbwebdev.fzilla.com\/?p=906","title":{"rendered":"CSS Home Exercise"},"content":{"rendered":"<p>Let&#8217;s get your CSS skills up to par with this fun exercise. The final result should resemble something like this:<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-907 \" src=\"http:\/\/ucsbwebdev.local\/wp-content\/uploads\/2018\/10\/img_5bd8eaa7d4214.png\" alt=\"\" \/><\/p>\n<p>Download the initial HTML code from this link\u00a0<a href=\"https:\/\/my.pcloud.com\/publink\/show?code=XZpAHM7ZkMJvAaSzqeSD8pN8oSFlw8m00AQk\" target=\"_blank\" rel=\"noopener\">https:\/\/my.pcloud.com\/publink\/show?code=XZpAHM7ZkMJvAaSzqeSD8pN8oSFlw8m00AQk<\/a> inside your Class folder and double-click to extract it. Then open it in Visual Studio Code.<\/p>\n<p>The following boxes should exist:<\/p>\n<ul>\n<li>div.header.flex\n<ul>\n<li>h1.logo<\/li>\n<li>div.header-menu\n<ul>\n<li>a.menu-item href\u00a0#about<\/li>\n<li>a.menu-item href\u00a0#news<\/li>\n<li>a.menu-item href\u00a0#contact<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<li>div.about.flex <strong>id<\/strong>=about\n<ul>\n<li>div.about-left\n<ul>\n<li>img.about-image <strong>src<\/strong>=link to image of you<\/li>\n<li>h3.about-name<\/li>\n<li>p.about-text<\/li>\n<\/ul>\n<\/li>\n<li>div.about-right\n<ul>\n<li>h2<\/li>\n<li>p<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<li>div.news\u00a0<strong>id<\/strong>=news\n<ul>\n<li>h2<\/li>\n<li>div.news-story\n<ul>\n<li>h3<\/li>\n<li>p<\/li>\n<li>p<\/li>\n<\/ul>\n<\/li>\n<li>div.news-story\n<ul>\n<li>h3<\/li>\n<li>p<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<li>div.contact\u00a0<strong>id<\/strong>=contact\n<ul>\n<li>h2<\/li>\n<li>div.contact-info.flex\n<ul>\n<li>div.contact-map\n<ul>\n<li>iframe (from google maps embed\u00a0<a href=\"http:\/\/x.co\/gmapslink\">http:\/\/x.co\/gmapslink<\/a><\/li>\n<li>or use the following code directly<br \/>\n<code class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">&lt;iframe src=\"https:\/\/www.google.com\/maps\/embed?pb=!1m18!1m12!1m3!1d3291.5035300186455!2d-119.85113568388252!3d34.413962880508954!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x80e93f67f3314b37%3A0x4e956b7e5cb6cec2!2sUniversity+of+California%2C+Santa+Barbara!5e0!3m2!1sen!2sus!4v1540941782587\" width=\"600\" height=\"450\" frameborder=\"0\" style=\"border:0\" allowfullscreen&gt;&lt;\/iframe&gt;<\/code><\/li>\n<\/ul>\n<\/li>\n<li>div.contact-address\n<ul>\n<li>h4<\/li>\n<li>h5<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>Your stylesheet should contain the following classes and declarations<\/p>\n<ul>\n<li>.logo\n<ul>\n<li>margin 0<\/li>\n<li>padding 0<\/li>\n<li>color red<\/li>\n<\/ul>\n<\/li>\n<li>.menu-item\n<ul>\n<li>color green<\/li>\n<\/ul>\n<\/li>\n<li>.about-left\n<ul>\n<li>width 350px<\/li>\n<li>padding 20px<\/li>\n<\/ul>\n<\/li>\n<li>.about-right\n<ul>\n<li>width 100%<\/li>\n<\/ul>\n<\/li>\n<li>.about-image\n<ul>\n<li>width 100px<\/li>\n<\/ul>\n<\/li>\n<li>.about-name\n<ul>\n<li>color red<\/li>\n<\/ul>\n<\/li>\n<li>.news-story\n<ul>\n<li>padding 20px<\/li>\n<\/ul>\n<\/li>\n<li>.contact-address\n<ul>\n<li>width 50%<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Let&#8217;s get your CSS skills up to par with this fun exercise. The final result should resemble something like this: Download the initial HTML code from this link\u00a0https:\/\/my.pcloud.com\/publink\/show?code=XZpAHM7ZkMJvAaSzqeSD8pN8oSFlw8m00AQk inside your Class folder and double-click to extract it. Then open it in Visual Studio Code. The following boxes should exist: div.header.flex h1.logo div.header-menu a.menu-item href\u00a0#about a.menu-item [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,7],"tags":[],"class_list":["post-906","post","type-post","status-publish","format-standard","hentry","category-class-reference","category-css"],"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/ucsbwebdev.fzilla.com\/index.php?rest_route=\/wp\/v2\/posts\/906","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ucsbwebdev.fzilla.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ucsbwebdev.fzilla.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ucsbwebdev.fzilla.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ucsbwebdev.fzilla.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=906"}],"version-history":[{"count":0,"href":"https:\/\/ucsbwebdev.fzilla.com\/index.php?rest_route=\/wp\/v2\/posts\/906\/revisions"}],"wp:attachment":[{"href":"https:\/\/ucsbwebdev.fzilla.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=906"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ucsbwebdev.fzilla.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=906"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ucsbwebdev.fzilla.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=906"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}