| /* this is taken directly from http://www.paulirish.com/2012/box-sizing-border-box-ftw/ based on his August 2014 update */ | |
| /* apply a natural box layout model to all elements, but allowing components to change */ | |
| html { | |
| box-sizing: border-box; | |
| } | |
| *, *:before, *:after { | |
| box-sizing: inherit; | |
| } |
| <main class="design cards"> | |
| <h2 class="cards_header">Graphic Design Projects</h2> | |
| {%- for page in collections.design %} | |
| <div class="pjcard"> | |
| <div class="card_img"> | |
| <a href="{{page.url}}"><img src="/images/{{page.data.postImg}}" alt="{{page.data.postImgAlt}}"></a></div> | |
| <div class="card_text"> | |
| <h3><a href="{{page.url}}">{{page.data.title}}</a></h3> | |
| <p>{{page.data.description}}<p> | |
| </div> |
| <ul> | |
| {% for page in collections.post %} | |
| <li> | |
| <a href="{{ page.url }}"> {{ page.data.title }}</a> | |
| </li> | |
| {% endfor %} | |
| </ul> |
This HTML and CSS shows how to embed a Google Map so that it is responsive and resizes with the window. To use it in your project you need to change two things:
| /* Optional, include a web font */ | |
| @import url('https://fonts.googleapis.com/css2?family=Antonio:wght@100;600&family=EB+Garamond:ital,wght@0,400;0,700;1,400;1,700&display=swap'); | |
| /* The html and body selectors below set the base font for the entire page */ | |
| html {font-size: 1rem;} | |
| /* Note: this sheet uses Serif font for body and sans for headings. You will want to change this to fit your site */ | |
| body { | |
| font-family: 'EB Garamond', serif; |
| /* ================================== | |
| Responsive Styling and Layout | |
| ================================== */ | |
| /* ================= Use Border Box model ================= */ | |
| html { | |
| box-sizing: border-box; | |
| } | |
| *, *:before, *:after { | |
| box-sizing: inherit; |
| <!doctype html> | |
| <html lang="en-us"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta http-equiv="x-ua-compatible" content="ie=edge"> | |
| <title>Change to Your Title</title> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <link rel="stylesheet" href="css/style.css"> | |
| </head> |
| <div class="container"> | |
| <header class="page-header cf"> | |
| <div class="logo"> | |
| <img src="http://placehold.it/200x200" alt="placeholder logo"> | |
| </div> | |
| <h1>My Site Title</h1> | |
| </header> | |
| <!-- NAVIGATION--> | |
| <div class="menu"> <a href="#" id="menu_button">Menu</a> </div> |
| // Change the palette colors to your own. You can also change which color is where and add your own variables. | |
| //colors from Beautiful American Palette by Oktober http://www.colourlovers.com/palette/83708/Beautiful_American | |
| $palette1: #AC0000; //harvard Red | |
| $palette2: #FFF; //white | |
| $palette3: #C8D3E6; //light blue "frosty breeze" | |
| $palette4: #657FAD ; //medium blue "institutional blue" | |
| $palette5: #002255 ; //dark blue changed slightly from original reference palette | |
| //Now we set some of the main colors based on the palette |