我为投资组合建立了主页，似乎有一个空白的看不见的正方形充当边框。我已经尝试过对CSS进行许多调整，但是我似乎无所适从。我的印象是与填充或边距有关，但似乎没有任何改变。有没有人经历过？我确信它是一个非常简单的修复程序。
任何想法如何删除并全屏显示吗？谢谢您的帮助。
@import url('https://fonts.googleapis.com/css?family=Nunito:300,400,700');
body {
font-family: "Nunito", sans-serif;
background: #eff1f7;
}
.content {
grid-area: content;
background: url(images/shapes.png);
}
.sidebar {
grid-area: sidebar;
background: linear-gradient(to right, rgba(249,107,142,1),
rgba(218,103,230,1),
rgba(130,125,253,1));
justify-content: center;
}
.footer {
grid-area: footer;
background: white;
}
.container {
font-size: 1.5em;
width: 100%;
height: 100vh;
display: grid;
grid-template-areas:
"sidebar"
"content"
"footer";
grid-template-columns: 1fr;
grid-template-rows: 130px 800px 250px;
}
.content,
.sidebar,
.footer {
padding: 1em;
}
nav ul {
margin: 0;
padding: 0;
display: flex;
justify-content: space-between;
text-align: center;
}
nav li {
list-style: none;
padding: 1em 0;
}
nav li a {
color: white;
font-weight: 700;
opacity: 0.6;
text-decoration: none;
transition: 0.3s;
}
nav li a:hover {
opacity: 1;
}
.hero {
max-width: 960px;
margin: 0 auto;
text-align: center;
}
.hero img {
width: 200px;
margin-right: 50px;
}
.hero h1 {
font-size: 2em;
font-weight: 300;
color: #373d46;
}
.hero p {
font-weight: 300;
line-height: 1.8em;
color: #98a0ad;
}
.action-btn {
display: inline-block;
text-decoration: none;
color: white;
font-weight: 700;
background: #867bfb;
padding: 1em 2em;
border-radius: 40px;
margin: 1em 0;
transition: 0.3s;
}
.action-btn:hover {
box-shadow: 0 10px 50px rgba(188,197,216,1);
}
footer ul {
max-width: 640px;
margin: 2em auto;
padding: 0;
text-align: center;
display: flex;
flex-direction: row;
}
footer ul li {
list-style: none;
align-self: flex-end;
}
footer ul li a {
text-decoration: none;
color: #c1c6ce;
}
svg {
width: 40%;
}
footer p {
font-size: 0.8em;
}
@media (min-width: 1040px) {
.container {
grid-template-areas:
"sidebar content"
"sidebar footer";
grid-template-columns: 300px 1fr;
grid-template-rows: 1fr auto;
}
nav ul {
display: flex;
justify-content: space-between;
flex-direction: column;
}
.sidebar {
background: linear-gradient(rgba(249,107,142,1),
rgba(218,103,230,1),
rgba(130,125,254,1));
padding-top: 3em;
}
.hero {
text-align: left;
margin: 2em auto;
}
.hero img {
width: 250px;
float: right;
}
.hero h1 {
font-size: 3em;
}
.hero p {
width: 60%;
}
footer ul {
max-width: 960px;
margin: 0 auto;
padding: 2em 0;
}
svg {
width: 20%;
}
}<!DOCTYPE html>
<html>
<head>
<title>Matt Mullins Designs</title>
<link rel="stylesheet" href="styles.css" type="text/css">
<link rel="stylesheet" href="normalize.css" type="text/css">
</head>
<body>
<div class="container">
<div class="sidebar">
<nav>
<ul>
<li><a href="#">About</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div>
<div class="content">
<section class="hero">
<img src="images/mm1.png"/>
<div class="hero-content">
<h1>Passionate<br>UX Designer</h1>
<p>Carlsbad, CA based designer who's worked with prominent startups as well as established businesses. I find the ability to prototype creative concepts plus code the initial template to be a huge advantage.</p>
<a class="action-btn" href="#">Hire me</a>
</div>
</section>
</div>
<div class="footer">
<footer>
<ul>
<li><a href="#"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 43.068 43.068"><defs><style>.a{fill:#b3b4b8;}</style></defs><path class="a" d="M0,21.534a21.1,21.1,0,0,1,2.886-10.81,21.381,21.381,0,0,1,7.838-7.838A21.094,21.094,0,0,1,21.534,0a21.094,21.094,0,0,1,10.81,2.886,21.38,21.38,0,0,1,7.838,7.838,21.094,21.094,0,0,1,2.886,10.81,21.094,21.094,0,0,1-2.886,10.81,21.38,21.38,0,0,1-7.838,7.838,21.094,21.094,0,0,1-10.81,2.886,21.094,21.094,0,0,1-10.81-2.886,21.381,21.381,0,0,1-7.838-7.838A21.1,21.1,0,0,1,0,21.534Zm3.575,0A17.365,17.365,0,0,0,8.1,33.377a24.646,24.646,0,0,1,6.546-7.709,21.41,21.41,0,0,1,8.743-4.608q-.646-1.507-1.249-2.713A52.328,52.328,0,0,1,6.116,20.715q-1.68,0-2.5-.043,0,.172-.022.431T3.575,21.534Zm.56-4.436q.948.086,2.8.086a47.266,47.266,0,0,0,13.652-1.938,43.609,43.609,0,0,0-7.192-9.69,17.484,17.484,0,0,0-5.836,4.78A18.387,18.387,0,0,0,4.134,17.1ZM10.552,35.7a17.6,17.6,0,0,0,17.313,2.584,63.239,63.239,0,0,0-3.359-14.255,18.368,18.368,0,0,0-7.989,4.35A24.43,24.43,0,0,0,10.552,35.7ZM17.141,4.178a45.767,45.767,0,0,1,7.02,9.776A21.449,21.449,0,0,0,32.99,7.709,17.458,17.458,0,0,0,21.534,3.575,16.531,16.531,0,0,0,17.141,4.178Zm8.57,12.834q.646,1.378,1.464,3.488,3.187-.3,6.934-.3,2.67,0,5.3.129A17.291,17.291,0,0,0,35.186,9.906Q32.387,14.083,25.711,17.012Zm2.541,6.5a61.816,61.816,0,0,1,2.972,13.093,17.969,17.969,0,0,0,5.556-5.642,17.4,17.4,0,0,0,2.584-7.451Q36.22,23.3,33.636,23.3,31.267,23.3,28.252,23.515Z" transform="translate(0)"/></svg></a></li>
<li><a href="#"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 63.104 39.265"><defs><style>.a{fill:#b3b4b8;}</style></defs><g transform="translate(0)"><path class="a" d="M56.988,86.8H41.176V82.876H56.989V86.8ZM30.65,102.909a10.383,10.383,0,0,1,1.53,5.752,11.455,11.455,0,0,1-1.744,6.265,10.864,10.864,0,0,1-2.778,3.084,10.733,10.733,0,0,1-4.431,1.971,27.4,27.4,0,0,1-5.544.531H0V81.247H18.963c4.78.078,8.168,1.463,10.169,4.182a9.991,9.991,0,0,1,1.8,6,8.74,8.74,0,0,1-1.815,5.781,9.257,9.257,0,0,1-2.99,2.234A8.718,8.718,0,0,1,30.65,102.909ZM9.055,96.727h8.309a7.873,7.873,0,0,0,4.151-.973A3.711,3.711,0,0,0,23.107,92.3,3.514,3.514,0,0,0,21,88.679a14.832,14.832,0,0,0-4.635-.614H9.055ZM23.907,108.1a4.211,4.211,0,0,0-2.5-4.206,9.839,9.839,0,0,0-3.926-.665H9.055v10.464h8.3A9.219,9.219,0,0,0,21.329,113C23.046,112.147,23.907,110.518,23.907,108.1Zm38.947-6.388A36.934,36.934,0,0,1,63.1,107.3H42.619q.169,4.24,2.939,5.934a7.4,7.4,0,0,0,4.054,1.056,5.711,5.711,0,0,0,5.591-3.22h7.506a9.142,9.142,0,0,1-2.724,5.083q-3.774,4.1-10.578,4.106a15.351,15.351,0,0,1-9.908-3.461q-4.282-3.469-4.288-11.267,0-7.319,3.87-11.213a13.564,13.564,0,0,1,10.062-3.9,16.036,16.036,0,0,1,6.614,1.315,11.39,11.39,0,0,1,4.855,4.165A13.882,13.882,0,0,1,62.854,101.712Zm-7.388.733A6.142,6.142,0,0,0,53.5,98a6.41,6.41,0,0,0-4.358-1.523,5.831,5.831,0,0,0-4.388,1.613,7.58,7.58,0,0,0-1.96,4.354H55.466Z" transform="translate(0 -81.247)"/></g></svg></a></li>
<li><a href="#"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25.414 48.937"><defs><style>.a{fill:#b3b4b8;}</style></defs><path class="a" d="M104.924,61.766V39.443h7.493l1.122-8.7h-8.615V25.189c0-2.519.7-4.235,4.312-4.235l4.607,0V13.171a61.74,61.74,0,0,0-6.713-.342c-6.642,0-11.189,4.054-11.189,11.5v6.416H88.428v8.7H95.94V61.766Z" transform="translate(-88.428 -12.829)"/></svg></a></li>
<li><a href="#"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 49.332 40.173"><defs><style>.a{fill:#b3b4b8;stroke:#5da8dc;}.a,.b{stroke-width:0.5px;}.b{fill:#fff;stroke:#fff;}</style></defs><g transform="translate(0.25 0.25)"><path class="a" d="M32.628.009V0h2.29l.837.167a8.949,8.949,0,0,1,1.519.427,10.805,10.805,0,0,1,1.321.616,12.562,12.562,0,0,1,1.158.718,7.127,7.127,0,0,1,.925.766,1.282,1.282,0,0,0,1.264.211,16.9,16.9,0,0,0,1.849-.55Q44.781,2,45.75,1.563T46.93,1l.22-.132.009-.013L47.2.837l.044-.022.044-.022.044-.022.009-.013.013-.009L47.37.74l.009-.013.044-.013L47.467.7l-.009.066-.013.066L47.423.9,47.4.969l-.022.044-.022.044-.022.066a1.532,1.532,0,0,0-.044.176,7.388,7.388,0,0,1-.418.881,11.014,11.014,0,0,1-.991,1.563,7.686,7.686,0,0,1-1.066,1.2q-.476.41-.63.572a1.89,1.89,0,0,1-.374.308l-.22.145-.044.022L43.5,6.01l-.009.013-.013.009-.013.009-.009.013-.044.022-.044.022-.009.013-.013.009-.013.009-.009.013-.009.013-.013.009-.013.009-.009.013h.22l1.233-.264a22.063,22.063,0,0,0,2.356-.638l1.189-.4.132-.044.066-.022.044-.022.044-.022.044-.022.044-.022.088-.013.088-.009V4.8l-.022.009-.022.013-.009.013-.013.009-.013.009-.009.013-.009.013-.013.009-.013.009L48.7,4.91l-.009.013-.013.009-.022.044-.022.044-.013.009-.559.749a6.188,6.188,0,0,1-.594.749q-.044.013-.123.132a12.618,12.618,0,0,1-.933.982,22.163,22.163,0,0,1-1.682,1.528,2.085,2.085,0,0,0-.837,1.656q-.013.978-.1,2.21T43.46,15.7a31.76,31.76,0,0,1-.749,3.236,29.426,29.426,0,0,1-1.233,3.523,27.445,27.445,0,0,1-1.519,3.082q-.793,1.365-1.453,2.312t-1.343,1.783q-.682.837-1.726,1.885t-1.145,1.145q-.1.1-.863.722T31.8,34.645a18.845,18.845,0,0,1-1.594,1.044q-.727.418-1.753.956a20.849,20.849,0,0,1-2.21,1q-1.189.462-2.51.859a22.927,22.927,0,0,1-2.554.616q-1.233.22-2.8.374l-1.563.154v.022H13.958v-.022l-.374-.022q-.374-.022-.616-.044t-1.827-.242q-1.585-.22-2.488-.44t-2.686-.837A26.134,26.134,0,0,1,2.915,36.82q-1.264-.625-1.585-.793t-.713-.405l-.4-.242-.009-.013L.2,35.358l-.013-.009-.009-.013-.044-.022-.044-.022-.009-.013L.066,35.27l-.013-.009-.009-.013-.009-.013-.013-.009H0v-.088l.044.009.044.013.2.022q.2.022,1.079.066t1.871,0a19.689,19.689,0,0,0,2.026-.2,22.821,22.821,0,0,0,2.444-.528,18.056,18.056,0,0,0,2.589-.889q1.176-.52,1.673-.775a16.292,16.292,0,0,0,1.506-.933l1.013-.683.009-.013.013-.009.013-.009.009-.013.009-.013.013-.009.013-.009.009-.013.044-.013.044-.009.009-.044.013-.044.013-.009.009-.013L14.355,31l-.683-.044a6.619,6.619,0,0,1-1.035-.2,9.931,9.931,0,0,1-1.519-.528,11.71,11.71,0,0,1-1.585-.837,7.8,7.8,0,0,1-1.114-.806q-.339-.317-.881-.9a8.909,8.909,0,0,1-.933-1.2,10.8,10.8,0,0,1-.757-1.422l-.366-.8L5.46,24.2l-.022-.066-.013-.044-.009-.044.066.009.066.013.484.066a10.762,10.762,0,0,0,1.519.044,11.762,11.762,0,0,0,1.431-.088q.4-.066.484-.088l.088-.022.11-.022.11-.022.009-.013L9.8,23.91l.013-.009.009-.013-.088-.022-.088-.022-.088-.022L9.467,23.8l-.088-.022q-.088-.022-.308-.088t-1.189-.484a9.092,9.092,0,0,1-1.541-.815,10.644,10.644,0,0,1-1.092-.867A12.461,12.461,0,0,1,4.117,20.3a8.808,8.808,0,0,1-1.1-1.739,10.578,10.578,0,0,1-.727-1.893,10.222,10.222,0,0,1-.317-1.827l-.079-.925.044.009.044.013.044.022.044.022L2.114,14l.044.022.683.308a8.611,8.611,0,0,0,1.7.528q1.013.22,1.211.242l.2.022h.4l-.009-.013L6.319,15.1l-.013-.009L6.3,15.081l-.009-.013-.013-.009-.013-.009-.009-.013-.044-.022-.044-.022-.009-.013-.013-.009-.013-.009-.009-.013-.044-.022-.044-.022-.009-.013-.379-.282a5.775,5.775,0,0,1-.757-.718q-.4-.44-.793-.925a7.14,7.14,0,0,1-.7-1.035,12.544,12.544,0,0,1-.652-1.4,9.94,9.94,0,0,1-.515-1.7,9.7,9.7,0,0,1-.2-1.7A10.675,10.675,0,0,1,2.07,5.7a9.353,9.353,0,0,1,.264-1.343,10.465,10.465,0,0,1,.572-1.585l.374-.837L3.3,1.871l.022-.066L3.338,1.8l.009-.013.009-.013.013-.009.013.009.009.013L3.4,1.8l.013.009.013.009.009.013.009.013.013.009.022.044.022.044.013.009.009.013.594.66q.594.66,1.409,1.475a8.28,8.28,0,0,0,.9.845.645.645,0,0,1,.22.2,8.989,8.989,0,0,0,.881.779q.749.616,1.959,1.431t2.686,1.607a26.208,26.208,0,0,0,3.17,1.431q1.7.638,2.378.837t2.334.506q1.651.308,2.488.4t1.145.1l.308.009-.009-.066-.013-.066-.088-.55a10.347,10.347,0,0,1-.088-1.541,10.105,10.105,0,0,1,.154-1.827,10.825,10.825,0,0,1,.462-1.7,9.056,9.056,0,0,1,.6-1.378A13.558,13.558,0,0,1,25.8,3.941a9.495,9.495,0,0,1,1.255-1.365,9.26,9.26,0,0,1,1.761-1.255A11.45,11.45,0,0,1,30.647.484,8.515,8.515,0,0,1,32.056.11a4.9,4.9,0,0,0,.572-.1Z"/><path class="b" d="M0,17.569V0H32.628V.009a4.909,4.909,0,0,1-.572.1,8.515,8.515,0,0,0-1.409.374,11.45,11.45,0,0,0-1.827.837,9.26,9.26,0,0,0-1.761,1.255A9.495,9.495,0,0,0,25.8,3.941a13.558,13.558,0,0,0-.784,1.176,9.056,9.056,0,0,0-.6,1.378,10.825,10.825,0,0,0-.462,1.7,10.105,10.105,0,0,0-.154,1.827,10.347,10.347,0,0,0,.088,1.541l.088.55.013.066.009.066-.308-.009q-.308-.013-1.145-.1t-2.488-.4q-1.651-.308-2.334-.506t-2.378-.837a26.208,26.208,0,0,1-3.17-1.431Q10.7,8.168,9.489,7.353T7.53,5.922a8.989,8.989,0,0,1-.881-.779.646.646,0,0,0-.22-.2,8.28,8.28,0,0,1-.9-.845Q4.712,3.28,4.117,2.62l-.594-.66-.009-.013L3.5,1.937l-.022-.044-.022-.044-.013-.009-.009-.013-.009-.013-.013-.009L3.4,1.8l-.009-.013L3.382,1.77l-.013-.009-.013.009-.009.013L3.338,1.8l-.013.009L3.3,1.871l-.022.066-.374.837a10.465,10.465,0,0,0-.572,1.585A9.353,9.353,0,0,0,2.07,5.7a10.675,10.675,0,0,0-.044,1.431,9.7,9.7,0,0,0,.2,1.7,9.94,9.94,0,0,0,.515,1.7,12.548,12.548,0,0,0,.652,1.4,7.14,7.14,0,0,0,.7,1.035q.4.484.793.925a5.775,5.775,0,0,0,.757.718l.379.282.009.013.044.022.044.022.009.013.013.009.013.009.009.013.044.022.044.022.009.013.013.009.013.009.009.013.009.013.013.009.013.009.009.013h-.4l-.2-.022q-.2-.022-1.211-.242a8.611,8.611,0,0,1-1.7-.528l-.683-.308L2.114,14,2.07,13.98l-.044-.022-.044-.022-.044-.013-.044-.009.079.925a10.222,10.222,0,0,0,.317,1.827,10.578,10.578,0,0,0,.727,1.893,8.808,8.808,0,0,0,1.1,1.739,12.461,12.461,0,0,0,1.132,1.224,10.643,10.643,0,0,0,1.092.867,9.092,9.092,0,0,0,1.541.815q.969.418,1.189.484t.308.088l.088.022.088.022.088.022.088.022.088.022-.009.013L9.8,23.91l-.013.009-.009.013-.11.022-.11.022L9.467,24q-.088.022-.484.088a11.762,11.762,0,0,1-1.431.088,10.762,10.762,0,0,1-1.519-.044l-.484-.066-.066-.013-.066-.009.009.044.013.044.022.066.022.066.366.8A10.8,10.8,0,0,0,6.6,26.486a8.909,8.909,0,0,0,.933,1.2q.542.581.881.9a7.8,7.8,0,0,0,1.114.806,11.71,11.71,0,0,0,1.585.837,9.931,9.931,0,0,0,1.519.528,6.619,6.619,0,0,0,1.035.2l.683.044.352.022-.009.013-.013.009-.013.044-.009.044-.044.009-.044.013-.009.013-.013.009-.013.009-.009.013-.009.013-.013.009-.013.009-.009.013-1.013.683a16.292,16.292,0,0,1-1.506.933q-.5.255-1.673.775a18.056,18.056,0,0,1-2.589.889,22.821,22.821,0,0,1-2.444.528,19.689,19.689,0,0,1-2.026.2q-.991.044-1.871,0T.286,35.182l-.2-.022-.044-.013L0,35.138ZM48.779,4.835l.009-.013.022-.013.022-.009V39.673H16.82v-.022l1.563-.154q1.563-.154,2.8-.374a22.927,22.927,0,0,0,2.554-.616q1.321-.4,2.51-.859a20.849,20.849,0,0,0,2.21-1q1.026-.537,1.753-.956A18.845,18.845,0,0,0,31.8,34.645q.872-.63,1.629-1.259t.863-.722q.1-.1,1.145-1.145t1.726-1.885q.683-.837,1.343-1.783t1.453-2.312a27.445,27.445,0,0,0,1.519-3.082,29.426,29.426,0,0,0,1.233-3.523A31.76,31.76,0,0,0,43.46,15.7q.242-1.431.33-2.664t.1-2.21a2.085,2.085,0,0,1,.837-1.656A22.162,22.162,0,0,0,46.41,7.64a12.616,12.616,0,0,0,.933-.982q.079-.119.123-.132a6.188,6.188,0,0,0,.594-.749l.559-.749.013-.009.022-.044.022-.044.013-.009L48.7,4.91l.009-.013.013-.009.013-.009.009-.013.009-.013.013-.009.013-.009ZM35.755.167,34.918,0H48.832V4.712l-.088.009-.088.013-.044.022-.044.022-.044.022-.044.022-.066.022-.132.044-1.189.4a22.063,22.063,0,0,1-2.356.638L43.5,6.187h-.22l.009-.013.013-.009.013-.009.009-.013.009-.013.013-.009.013-.009.009-.013.044-.022.044-.022.009-.013.013-.009.013-.009L43.5,6.01l.044-.022.044-.022.22-.145a1.89,1.89,0,0,0,.374-.308q.154-.163.63-.572a7.694,7.694,0,0,0,1.066-1.2,11.014,11.014,0,0,0,.991-1.563,7.388,7.388,0,0,0,.418-.881,1.532,1.532,0,0,1,.044-.176l.022-.066.022-.044L47.4.969,47.423.9l.022-.066.013-.066L47.467.7l-.044.009-.044.013L47.37.74l-.013.009-.013.009-.009.013-.044.022-.044.022L47.2.837l-.044.022L47.15.872,46.93,1q-.211.119-1.18.559t-1.959.793a16.9,16.9,0,0,1-1.849.55,1.282,1.282,0,0,1-1.264-.211,7.12,7.12,0,0,0-.925-.766,12.571,12.571,0,0,0-1.158-.718A10.805,10.805,0,0,0,37.274.594,8.949,8.949,0,0,0,35.755.167ZM0,37.45V35.226H.022l.013.009.009.013.009.013.013.009.013.009.009.013.044.022.044.022.009.013.013.009.013.009.009.013.4.242q.4.242.713.405t1.585.793a26.134,26.134,0,0,0,3.051,1.246q1.783.616,2.686.837t2.488.44q1.585.22,1.827.242t.616.044l.374.022v.022H0Z"/></g></svg></a></li>
</ul>
</footer>
</div>
</div>
</body>
</html>
答案 0 :(得分：1)
将margin: 0添加到您的body：
@import url('https://fonts.googleapis.com/css?family=Nunito:300,400,700');
body {
font-family: "Nunito", sans-serif;
background: #eff1f7;
margin: 0;
}
.content {
grid-area: content;
background: url(images/shapes.png);
}
.sidebar {
grid-area: sidebar;
background: linear-gradient(to right, rgba(249,107,142,1),
rgba(218,103,230,1),
rgba(130,125,253,1));
justify-content: center;
}
.footer {
grid-area: footer;
background: white;
}
.container {
font-size: 1.5em;
width: 100%;
height: 100vh;
display: grid;
grid-template-areas:
"sidebar"
"content"
"footer";
grid-template-columns: 1fr;
grid-template-rows: 130px 800px 250px;
}
.content,
.sidebar,
.footer {
padding: 1em;
}
nav ul {
margin: 0;
padding: 0;
display: flex;
justify-content: space-between;
text-align: center;
}
nav li {
list-style: none;
padding: 1em 0;
}
nav li a {
color: white;
font-weight: 700;
opacity: 0.6;
text-decoration: none;
transition: 0.3s;
}
nav li a:hover {
opacity: 1;
}
.hero {
max-width: 960px;
margin: 0 auto;
text-align: center;
}
.hero img {
width: 200px;
margin-right: 50px;
}
.hero h1 {
font-size: 2em;
font-weight: 300;
color: #373d46;
}
.hero p {
font-weight: 300;
line-height: 1.8em;
color: #98a0ad;
}
.action-btn {
display: inline-block;
text-decoration: none;
color: white;
font-weight: 700;
background: #867bfb;
padding: 1em 2em;
border-radius: 40px;
margin: 1em 0;
transition: 0.3s;
}
.action-btn:hover {
box-shadow: 0 10px 50px rgba(188,197,216,1);
}
footer ul {
max-width: 640px;
margin: 2em auto;
padding: 0;
text-align: center;
display: flex;
flex-direction: row;
}
footer ul li {
list-style: none;
align-self: flex-end;
}
footer ul li a {
text-decoration: none;
color: #c1c6ce;
}
svg {
width: 40%;
}
footer p {
font-size: 0.8em;
}
@media (min-width: 1040px) {
.container {
grid-template-areas:
"sidebar content"
"sidebar footer";
grid-template-columns: 300px 1fr;
grid-template-rows: 1fr auto;
}
nav ul {
display: flex;
justify-content: space-between;
flex-direction: column;
}
.sidebar {
background: linear-gradient(rgba(249,107,142,1),
rgba(218,103,230,1),
rgba(130,125,254,1));
padding-top: 3em;
}
.hero {
text-align: left;
margin: 2em auto;
}
.hero img {
width: 250px;
float: right;
}
.hero h1 {
font-size: 3em;
}
.hero p {
width: 60%;
}
footer ul {
max-width: 960px;
margin: 0 auto;
padding: 2em 0;
}
svg {
width: 20%;
}
}<!DOCTYPE html>
<html>
<head>
<title>Matt Mullins Designs</title>
<link rel="stylesheet" href="styles.css" type="text/css">
<link rel="stylesheet" href="normalize.css" type="text/css">
</head>
<body>
<div class="container">
<div class="sidebar">
<nav>
<ul>
<li><a href="#">About</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div>
<div class="content">
<section class="hero">
<img src="images/mm1.png"/>
<div class="hero-content">
<h1>Passionate<br>UX Designer</h1>
<p>Carlsbad, CA based designer who's worked with prominent startups as well as established businesses. I find the ability to prototype creative concepts plus code the initial template to be a huge advantage.</p>
<a class="action-btn" href="#">Hire me</a>
</div>
</section>
</div>
<div class="footer">
<footer>
<ul>
<li><a href="#"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 43.068 43.068"><defs><style>.a{fill:#b3b4b8;}</style></defs><path class="a" d="M0,21.534a21.1,21.1,0,0,1,2.886-10.81,21.381,21.381,0,0,1,7.838-7.838A21.094,21.094,0,0,1,21.534,0a21.094,21.094,0,0,1,10.81,2.886,21.38,21.38,0,0,1,7.838,7.838,21.094,21.094,0,0,1,2.886,10.81,21.094,21.094,0,0,1-2.886,10.81,21.38,21.38,0,0,1-7.838,7.838,21.094,21.094,0,0,1-10.81,2.886,21.094,21.094,0,0,1-10.81-2.886,21.381,21.381,0,0,1-7.838-7.838A21.1,21.1,0,0,1,0,21.534Zm3.575,0A17.365,17.365,0,0,0,8.1,33.377a24.646,24.646,0,0,1,6.546-7.709,21.41,21.41,0,0,1,8.743-4.608q-.646-1.507-1.249-2.713A52.328,52.328,0,0,1,6.116,20.715q-1.68,0-2.5-.043,0,.172-.022.431T3.575,21.534Zm.56-4.436q.948.086,2.8.086a47.266,47.266,0,0,0,13.652-1.938,43.609,43.609,0,0,0-7.192-9.69,17.484,17.484,0,0,0-5.836,4.78A18.387,18.387,0,0,0,4.134,17.1ZM10.552,35.7a17.6,17.6,0,0,0,17.313,2.584,63.239,63.239,0,0,0-3.359-14.255,18.368,18.368,0,0,0-7.989,4.35A24.43,24.43,0,0,0,10.552,35.7ZM17.141,4.178a45.767,45.767,0,0,1,7.02,9.776A21.449,21.449,0,0,0,32.99,7.709,17.458,17.458,0,0,0,21.534,3.575,16.531,16.531,0,0,0,17.141,4.178Zm8.57,12.834q.646,1.378,1.464,3.488,3.187-.3,6.934-.3,2.67,0,5.3.129A17.291,17.291,0,0,0,35.186,9.906Q32.387,14.083,25.711,17.012Zm2.541,6.5a61.816,61.816,0,0,1,2.972,13.093,17.969,17.969,0,0,0,5.556-5.642,17.4,17.4,0,0,0,2.584-7.451Q36.22,23.3,33.636,23.3,31.267,23.3,28.252,23.515Z" transform="translate(0)"/></svg></a></li>
<li><a href="#"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 63.104 39.265"><defs><style>.a{fill:#b3b4b8;}</style></defs><g transform="translate(0)"><path class="a" d="M56.988,86.8H41.176V82.876H56.989V86.8ZM30.65,102.909a10.383,10.383,0,0,1,1.53,5.752,11.455,11.455,0,0,1-1.744,6.265,10.864,10.864,0,0,1-2.778,3.084,10.733,10.733,0,0,1-4.431,1.971,27.4,27.4,0,0,1-5.544.531H0V81.247H18.963c4.78.078,8.168,1.463,10.169,4.182a9.991,9.991,0,0,1,1.8,6,8.74,8.74,0,0,1-1.815,5.781,9.257,9.257,0,0,1-2.99,2.234A8.718,8.718,0,0,1,30.65,102.909ZM9.055,96.727h8.309a7.873,7.873,0,0,0,4.151-.973A3.711,3.711,0,0,0,23.107,92.3,3.514,3.514,0,0,0,21,88.679a14.832,14.832,0,0,0-4.635-.614H9.055ZM23.907,108.1a4.211,4.211,0,0,0-2.5-4.206,9.839,9.839,0,0,0-3.926-.665H9.055v10.464h8.3A9.219,9.219,0,0,0,21.329,113C23.046,112.147,23.907,110.518,23.907,108.1Zm38.947-6.388A36.934,36.934,0,0,1,63.1,107.3H42.619q.169,4.24,2.939,5.934a7.4,7.4,0,0,0,4.054,1.056,5.711,5.711,0,0,0,5.591-3.22h7.506a9.142,9.142,0,0,1-2.724,5.083q-3.774,4.1-10.578,4.106a15.351,15.351,0,0,1-9.908-3.461q-4.282-3.469-4.288-11.267,0-7.319,3.87-11.213a13.564,13.564,0,0,1,10.062-3.9,16.036,16.036,0,0,1,6.614,1.315,11.39,11.39,0,0,1,4.855,4.165A13.882,13.882,0,0,1,62.854,101.712Zm-7.388.733A6.142,6.142,0,0,0,53.5,98a6.41,6.41,0,0,0-4.358-1.523,5.831,5.831,0,0,0-4.388,1.613,7.58,7.58,0,0,0-1.96,4.354H55.466Z" transform="translate(0 -81.247)"/></g></svg></a></li>
<li><a href="#"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25.414 48.937"><defs><style>.a{fill:#b3b4b8;}</style></defs><path class="a" d="M104.924,61.766V39.443h7.493l1.122-8.7h-8.615V25.189c0-2.519.7-4.235,4.312-4.235l4.607,0V13.171a61.74,61.74,0,0,0-6.713-.342c-6.642,0-11.189,4.054-11.189,11.5v6.416H88.428v8.7H95.94V61.766Z" transform="translate(-88.428 -12.829)"/></svg></a></li>
<li><a href="#"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 49.332 40.173"><defs><style>.a{fill:#b3b4b8;stroke:#5da8dc;}.a,.b{stroke-width:0.5px;}.b{fill:#fff;stroke:#fff;}</style></defs><g transform="translate(0.25 0.25)"><path class="a" d="M32.628.009V0h2.29l.837.167a8.949,8.949,0,0,1,1.519.427,10.805,10.805,0,0,1,1.321.616,12.562,12.562,0,0,1,1.158.718,7.127,7.127,0,0,1,.925.766,1.282,1.282,0,0,0,1.264.211,16.9,16.9,0,0,0,1.849-.55Q44.781,2,45.75,1.563T46.93,1l.22-.132.009-.013L47.2.837l.044-.022.044-.022.044-.022.009-.013.013-.009L47.37.74l.009-.013.044-.013L47.467.7l-.009.066-.013.066L47.423.9,47.4.969l-.022.044-.022.044-.022.066a1.532,1.532,0,0,0-.044.176,7.388,7.388,0,0,1-.418.881,11.014,11.014,0,0,1-.991,1.563,7.686,7.686,0,0,1-1.066,1.2q-.476.41-.63.572a1.89,1.89,0,0,1-.374.308l-.22.145-.044.022L43.5,6.01l-.009.013-.013.009-.013.009-.009.013-.044.022-.044.022-.009.013-.013.009-.013.009-.009.013-.009.013-.013.009-.013.009-.009.013h.22l1.233-.264a22.063,22.063,0,0,0,2.356-.638l1.189-.4.132-.044.066-.022.044-.022.044-.022.044-.022.044-.022.088-.013.088-.009V4.8l-.022.009-.022.013-.009.013-.013.009-.013.009-.009.013-.009.013-.013.009-.013.009L48.7,4.91l-.009.013-.013.009-.022.044-.022.044-.013.009-.559.749a6.188,6.188,0,0,1-.594.749q-.044.013-.123.132a12.618,12.618,0,0,1-.933.982,22.163,22.163,0,0,1-1.682,1.528,2.085,2.085,0,0,0-.837,1.656q-.013.978-.1,2.21T43.46,15.7a31.76,31.76,0,0,1-.749,3.236,29.426,29.426,0,0,1-1.233,3.523,27.445,27.445,0,0,1-1.519,3.082q-.793,1.365-1.453,2.312t-1.343,1.783q-.682.837-1.726,1.885t-1.145,1.145q-.1.1-.863.722T31.8,34.645a18.845,18.845,0,0,1-1.594,1.044q-.727.418-1.753.956a20.849,20.849,0,0,1-2.21,1q-1.189.462-2.51.859a22.927,22.927,0,0,1-2.554.616q-1.233.22-2.8.374l-1.563.154v.022H13.958v-.022l-.374-.022q-.374-.022-.616-.044t-1.827-.242q-1.585-.22-2.488-.44t-2.686-.837A26.134,26.134,0,0,1,2.915,36.82q-1.264-.625-1.585-.793t-.713-.405l-.4-.242-.009-.013L.2,35.358l-.013-.009-.009-.013-.044-.022-.044-.022-.009-.013L.066,35.27l-.013-.009-.009-.013-.009-.013-.013-.009H0v-.088l.044.009.044.013.2.022q.2.022,1.079.066t1.871,0a19.689,19.689,0,0,0,2.026-.2,22.821,22.821,0,0,0,2.444-.528,18.056,18.056,0,0,0,2.589-.889q1.176-.52,1.673-.775a16.292,16.292,0,0,0,1.506-.933l1.013-.683.009-.013.013-.009.013-.009.009-.013.009-.013.013-.009.013-.009.009-.013.044-.013.044-.009.009-.044.013-.044.013-.009.009-.013L14.355,31l-.683-.044a6.619,6.619,0,0,1-1.035-.2,9.931,9.931,0,0,1-1.519-.528,11.71,11.71,0,0,1-1.585-.837,7.8,7.8,0,0,1-1.114-.806q-.339-.317-.881-.9a8.909,8.909,0,0,1-.933-1.2,10.8,10.8,0,0,1-.757-1.422l-.366-.8L5.46,24.2l-.022-.066-.013-.044-.009-.044.066.009.066.013.484.066a10.762,10.762,0,0,0,1.519.044,11.762,11.762,0,0,0,1.431-.088q.4-.066.484-.088l.088-.022.11-.022.11-.022.009-.013L9.8,23.91l.013-.009.009-.013-.088-.022-.088-.022-.088-.022L9.467,23.8l-.088-.022q-.088-.022-.308-.088t-1.189-.484a9.092,9.092,0,0,1-1.541-.815,10.644,10.644,0,0,1-1.092-.867A12.461,12.461,0,0,1,4.117,20.3a8.808,8.808,0,0,1-1.1-1.739,10.578,10.578,0,0,1-.727-1.893,10.222,10.222,0,0,1-.317-1.827l-.079-.925.044.009.044.013.044.022.044.022L2.114,14l.044.022.683.308a8.611,8.611,0,0,0,1.7.528q1.013.22,1.211.242l.2.022h.4l-.009-.013L6.319,15.1l-.013-.009L6.3,15.081l-.009-.013-.013-.009-.013-.009-.009-.013-.044-.022-.044-.022-.009-.013-.013-.009-.013-.009-.009-.013-.044-.022-.044-.022-.009-.013-.379-.282a5.775,5.775,0,0,1-.757-.718q-.4-.44-.793-.925a7.14,7.14,0,0,1-.7-1.035,12.544,12.544,0,0,1-.652-1.4,9.94,9.94,0,0,1-.515-1.7,9.7,9.7,0,0,1-.2-1.7A10.675,10.675,0,0,1,2.07,5.7a9.353,9.353,0,0,1,.264-1.343,10.465,10.465,0,0,1,.572-1.585l.374-.837L3.3,1.871l.022-.066L3.338,1.8l.009-.013.009-.013.013-.009.013.009.009.013L3.4,1.8l.013.009.013.009.009.013.009.013.013.009.022.044.022.044.013.009.009.013.594.66q.594.66,1.409,1.475a8.28,8.28,0,0,0,.9.845.645.645,0,0,1,.22.2,8.989,8.989,0,0,0,.881.779q.749.616,1.959,1.431t2.686,1.607a26.208,26.208,0,0,0,3.17,1.431q1.7.638,2.378.837t2.334.506q1.651.308,2.488.4t1.145.1l.308.009-.009-.066-.013-.066-.088-.55a10.347,10.347,0,0,1-.088-1.541,10.105,10.105,0,0,1,.154-1.827,10.825,10.825,0,0,1,.462-1.7,9.056,9.056,0,0,1,.6-1.378A13.558,13.558,0,0,1,25.8,3.941a9.495,9.495,0,0,1,1.255-1.365,9.26,9.26,0,0,1,1.761-1.255A11.45,11.45,0,0,1,30.647.484,8.515,8.515,0,0,1,32.056.11a4.9,4.9,0,0,0,.572-.1Z"/><path class="b" d="M0,17.569V0H32.628V.009a4.909,4.909,0,0,1-.572.1,8.515,8.515,0,0,0-1.409.374,11.45,11.45,0,0,0-1.827.837,9.26,9.26,0,0,0-1.761,1.255A9.495,9.495,0,0,0,25.8,3.941a13.558,13.558,0,0,0-.784,1.176,9.056,9.056,0,0,0-.6,1.378,10.825,10.825,0,0,0-.462,1.7,10.105,10.105,0,0,0-.154,1.827,10.347,10.347,0,0,0,.088,1.541l.088.55.013.066.009.066-.308-.009q-.308-.013-1.145-.1t-2.488-.4q-1.651-.308-2.334-.506t-2.378-.837a26.208,26.208,0,0,1-3.17-1.431Q10.7,8.168,9.489,7.353T7.53,5.922a8.989,8.989,0,0,1-.881-.779.646.646,0,0,0-.22-.2,8.28,8.28,0,0,1-.9-.845Q4.712,3.28,4.117,2.62l-.594-.66-.009-.013L3.5,1.937l-.022-.044-.022-.044-.013-.009-.009-.013-.009-.013-.013-.009L3.4,1.8l-.009-.013L3.382,1.77l-.013-.009-.013.009-.009.013L3.338,1.8l-.013.009L3.3,1.871l-.022.066-.374.837a10.465,10.465,0,0,0-.572,1.585A9.353,9.353,0,0,0,2.07,5.7a10.675,10.675,0,0,0-.044,1.431,9.7,9.7,0,0,0,.2,1.7,9.94,9.94,0,0,0,.515,1.7,12.548,12.548,0,0,0,.652,1.4,7.14,7.14,0,0,0,.7,1.035q.4.484.793.925a5.775,5.775,0,0,0,.757.718l.379.282.009.013.044.022.044.022.009.013.013.009.013.009.009.013.044.022.044.022.009.013.013.009.013.009.009.013.009.013.013.009.013.009.009.013h-.4l-.2-.022q-.2-.022-1.211-.242a8.611,8.611,0,0,1-1.7-.528l-.683-.308L2.114,14,2.07,13.98l-.044-.022-.044-.022-.044-.013-.044-.009.079.925a10.222,10.222,0,0,0,.317,1.827,10.578,10.578,0,0,0,.727,1.893,8.808,8.808,0,0,0,1.1,1.739,12.461,12.461,0,0,0,1.132,1.224,10.643,10.643,0,0,0,1.092.867,9.092,9.092,0,0,0,1.541.815q.969.418,1.189.484t.308.088l.088.022.088.022.088.022.088.022.088.022-.009.013L9.8,23.91l-.013.009-.009.013-.11.022-.11.022L9.467,24q-.088.022-.484.088a11.762,11.762,0,0,1-1.431.088,10.762,10.762,0,0,1-1.519-.044l-.484-.066-.066-.013-.066-.009.009.044.013.044.022.066.022.066.366.8A10.8,10.8,0,0,0,6.6,26.486a8.909,8.909,0,0,0,.933,1.2q.542.581.881.9a7.8,7.8,0,0,0,1.114.806,11.71,11.71,0,0,0,1.585.837,9.931,9.931,0,0,0,1.519.528,6.619,6.619,0,0,0,1.035.2l.683.044.352.022-.009.013-.013.009-.013.044-.009.044-.044.009-.044.013-.009.013-.013.009-.013.009-.009.013-.009.013-.013.009-.013.009-.009.013-1.013.683a16.292,16.292,0,0,1-1.506.933q-.5.255-1.673.775a18.056,18.056,0,0,1-2.589.889,22.821,22.821,0,0,1-2.444.528,19.689,19.689,0,0,1-2.026.2q-.991.044-1.871,0T.286,35.182l-.2-.022-.044-.013L0,35.138ZM48.779,4.835l.009-.013.022-.013.022-.009V39.673H16.82v-.022l1.563-.154q1.563-.154,2.8-.374a22.927,22.927,0,0,0,2.554-.616q1.321-.4,2.51-.859a20.849,20.849,0,0,0,2.21-1q1.026-.537,1.753-.956A18.845,18.845,0,0,0,31.8,34.645q.872-.63,1.629-1.259t.863-.722q.1-.1,1.145-1.145t1.726-1.885q.683-.837,1.343-1.783t1.453-2.312a27.445,27.445,0,0,0,1.519-3.082,29.426,29.426,0,0,0,1.233-3.523A31.76,31.76,0,0,0,43.46,15.7q.242-1.431.33-2.664t.1-2.21a2.085,2.085,0,0,1,.837-1.656A22.162,22.162,0,0,0,46.41,7.64a12.616,12.616,0,0,0,.933-.982q.079-.119.123-.132a6.188,6.188,0,0,0,.594-.749l.559-.749.013-.009.022-.044.022-.044.013-.009L48.7,4.91l.009-.013.013-.009.013-.009.009-.013.009-.013.013-.009.013-.009ZM35.755.167,34.918,0H48.832V4.712l-.088.009-.088.013-.044.022-.044.022-.044.022-.044.022-.066.022-.132.044-1.189.4a22.063,22.063,0,0,1-2.356.638L43.5,6.187h-.22l.009-.013.013-.009.013-.009.009-.013.009-.013.013-.009.013-.009.009-.013.044-.022.044-.022.009-.013.013-.009.013-.009L43.5,6.01l.044-.022.044-.022.22-.145a1.89,1.89,0,0,0,.374-.308q.154-.163.63-.572a7.694,7.694,0,0,0,1.066-1.2,11.014,11.014,0,0,0,.991-1.563,7.388,7.388,0,0,0,.418-.881,1.532,1.532,0,0,1,.044-.176l.022-.066.022-.044L47.4.969,47.423.9l.022-.066.013-.066L47.467.7l-.044.009-.044.013L47.37.74l-.013.009-.013.009-.009.013-.044.022-.044.022L47.2.837l-.044.022L47.15.872,46.93,1q-.211.119-1.18.559t-1.959.793a16.9,16.9,0,0,1-1.849.55,1.282,1.282,0,0,1-1.264-.211,7.12,7.12,0,0,0-.925-.766,12.571,12.571,0,0,0-1.158-.718A10.805,10.805,0,0,0,37.274.594,8.949,8.949,0,0,0,35.755.167ZM0,37.45V35.226H.022l.013.009.009.013.009.013.013.009.013.009.009.013.044.022.044.022.009.013.013.009.013.009.009.013.4.242q.4.242.713.405t1.585.793a26.134,26.134,0,0,0,3.051,1.246q1.783.616,2.686.837t2.488.44q1.585.22,1.827.242t.616.044l.374.022v.022H0Z"/></g></svg></a></li>
</ul>
</footer>
</div>
</div>
</body>
</html>