clrko/desktop_resolution.css

## desktop_resolution.css
.grid {
    display: grid;
    grid-template-rows: repeat(5, minmax(10px auto));
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas:
    "header header header"
    "carousel carousel join"
    "carousel carousel form"
    "fellows  fellows form"
    "fellows  fellows footer";
}

.carousel {
    height: 300px;
}
.fellows {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
}
.fellows > .article-item {
    width: 15vw;
    height: 15vw;
    justify-self: center;
}

.footer-grid {
    padding-bottom: 50px;
}

## index.html
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="author" content="Claire Kodia">
        <meta name="description" content="The FindThePrecious.com website aims to recruit bounty hunters in order to capture members of the fellowship.">
        <title>Find the precious!</title>
        <link rel="stylesheet" href="style.css"/>
        <link rel="stylesheet" media="screen and (min-width: 961px)" href="desktop_resolution.css"/> -->
    </head>
    <body>
        <section class="grid">
            <!--Header-->
            <header>
                <p>FindThePrecious.com</p>
            </header>

            <!--Join-->
            <section class="join">
                <h2>We need You!</h2>
                <button type="submit">Join our army</button>
            </section>

            <!--carousel-->
            <div class="carousel"></div>

            <!--Fellows-->
            <section class="fellows">
                <h2>Fellows wanted dead or alive</h2>
                <article class="article-item"></article>
                <article class="article-item"></article>
                <article class="article-item"></article>
            </section>

            <!--Contact us-->
            <form class="form1">
                <h2>Contact us</h2>
                <div class="form-container">
                    <label for="mail">Email</label>
                    <input type="email" id="mail">
                    <label for="subject">Subject</label>
                    <input type="text" id="subject">
                    <label for="message">Message</label>
                    <textarea id="message"></textarea>
                </div>
            </form>

            <!--Footer-->
            <footer class="footer-grid">
                <ul>
                    <li>Sauron4Ever.com</li>
                    <li>Follow him</li>
                </ul>
                <ul>
                    <li>About us</li>
                    <li>Fellows</li>
                    <li>Join our amry</li>
                </ul>
                <ul>
                    <li>FAQ</li>
                    <li>Reward condition</li>
                    <li>Legal mention</li>
                </ul>
            </footer>
        </section>
    </body>
</html>

## style.css
* {
    margin: 0;
    padding: 0;
    list-style:none;
}

.grid {
    display: grid;
    grid-template: repeat(6, minmax(10px auto)) / 100%;
    grid-template-areas:
    "header"
    "join"
    "carousel"
    "fellows"
    "form"
    "footer";
}

/*--header--*/

header {
    background-color: #5e6164;
    color: lightgrey;
    grid-area: header;
    width: 100%;
}

header > p {
    width: 70%;
    margin: 10px auto;
}

/*--Join--*/
.join {
    display: flex;
    flex-direction: column;
    grid-area: join;
    width: 70%;
    margin: 20px auto;
}

.join > button {
    background-color: black;
    color: lightgrey;
    padding: 10px 30px;
    width: 100%;
}

/*--Carousel--*/
.carousel {
    background-color: rgb(159, 169, 175);
    height: 200px;
    grid-area: carousel;
}

/*--Fellows & Contact--*/
.fellows, .form-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 70%;
    margin: 20px auto;
}
.fellows {
    grid-area: fellows;
}

.fellows > h2 {
    width: 100%;
    margin: auto;
    margin-bottom: 10px;
}

.fellows > .article-item {
    background-color: grey;
    width: 50vw;
    height: 50vw;
    margin-bottom: 10px;
    align-self: center;
}

/*--form--*/
.form1 {
    grid-area: form;
    background-color: rgb(179, 182, 184);
}

.form1 > h2 {
    width: 70%;
    margin: 20px auto;
}

input, textarea {
    width: 100%;
    margin-bottom: 8px;
    border: 1px solid lightgrey;
    padding: 10px;
}

textarea {
    height: 50px;
}

/*footer*/

.footer-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-area: footer;
    background-color: #5e6164;
    color: lightgrey;
    padding: 30px 0;
}

ul:nth-of-type(1) {
    grid-column-start: span 2;
    width: 85%;
    justify-self: flex-end;
}

ul:nth-of-type(2) {
    grid-row-start: 2;
    grid-column-start: 1;
    width: 70%;
    justify-self: flex-end;
}

ul:nth-of-type(3) {
    grid-row-start: 2;
    grid-column-start: 2;
    width: 70%;
    justify-self: start;
}
	.grid {
	display: grid;
	grid-template-rows: repeat(5, minmax(10px auto));
	grid-template-columns: repeat(3, 1fr);
	grid-template-areas:
	"header header header"
	"carousel carousel join"
	"carousel carousel form"
	"fellows fellows form"
	"fellows fellows footer";
	}

	.carousel {
	height: 300px;
	}
	.fellows {
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-around;
	}
	.fellows > .article-item {
	width: 15vw;
	height: 15vw;
	justify-self: center;
	}

	.footer-grid {
	padding-bottom: 50px;
	}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="author" content="Claire Kodia">
	<meta name="description" content="The FindThePrecious.com website aims to recruit bounty hunters in order to capture members of the fellowship.">
	<title>Find the precious!</title>
	<link rel="stylesheet" href="style.css"/>
	<link rel="stylesheet" media="screen and (min-width: 961px)" href="desktop_resolution.css"/> -->
	</head>
	<body>
	<section class="grid">
	<!--Header-->
	<header>
	<p>FindThePrecious.com</p>
	</header>

	<!--Join-->
	<section class="join">
	<h2>We need You!</h2>
	<button type="submit">Join our army</button>
	</section>

	<!--carousel-->
	<div class="carousel"></div>

	<!--Fellows-->
	<section class="fellows">
	<h2>Fellows wanted dead or alive</h2>
	<article class="article-item"></article>
	<article class="article-item"></article>
	<article class="article-item"></article>
	</section>

	<!--Contact us-->
	<form class="form1">
	<h2>Contact us</h2>
	<div class="form-container">
	<label for="mail">Email</label>
	<input type="email" id="mail">
	<label for="subject">Subject</label>
	<input type="text" id="subject">
	<label for="message">Message</label>
	<textarea id="message"></textarea>
	</div>
	</form>

	<!--Footer-->
	<footer class="footer-grid">
	<ul>
	<li>Sauron4Ever.com</li>
	<li>Follow him</li>
	</ul>
	<ul>
	<li>About us</li>
	<li>Fellows</li>
	<li>Join our amry</li>
	</ul>
	<ul>
	<li>FAQ</li>
	<li>Reward condition</li>
	<li>Legal mention</li>
	</ul>
	</footer>
	</section>
	</body>
	</html>
	* {
	margin: 0;
	padding: 0;
	list-style:none;
	}

	.grid {
	display: grid;
	grid-template: repeat(6, minmax(10px auto)) / 100%;
	grid-template-areas:
	"header"
	"join"
	"carousel"
	"fellows"
	"form"
	"footer";
	}

	/--header--/

	header {
	background-color: #5e6164;
	color: lightgrey;
	grid-area: header;
	width: 100%;
	}

	header > p {
	width: 70%;
	margin: 10px auto;
	}

	/--Join--/
	.join {
	display: flex;
	flex-direction: column;
	grid-area: join;
	width: 70%;
	margin: 20px auto;
	}

	.join > button {
	background-color: black;
	color: lightgrey;
	padding: 10px 30px;
	width: 100%;
	}

	/--Carousel--/
	.carousel {
	background-color: rgb(159, 169, 175);
	height: 200px;
	grid-area: carousel;
	}

	/--Fellows & Contact--/
	.fellows, .form-container {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 70%;
	margin: 20px auto;
	}
	.fellows {
	grid-area: fellows;
	}

	.fellows > h2 {
	width: 100%;
	margin: auto;
	margin-bottom: 10px;
	}

	.fellows > .article-item {
	background-color: grey;
	width: 50vw;
	height: 50vw;
	margin-bottom: 10px;
	align-self: center;
	}

	/--form--/
	.form1 {
	grid-area: form;
	background-color: rgb(179, 182, 184);
	}

	.form1 > h2 {
	width: 70%;
	margin: 20px auto;
	}

	input, textarea {
	width: 100%;
	margin-bottom: 8px;
	border: 1px solid lightgrey;
	padding: 10px;
	}

	textarea {
	height: 50px;
	}

	/footer/

	.footer-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	grid-area: footer;
	background-color: #5e6164;
	color: lightgrey;
	padding: 30px 0;
	}

	ul:nth-of-type(1) {
	grid-column-start: span 2;
	width: 85%;
	justify-self: flex-end;
	}

	ul:nth-of-type(2) {
	grid-row-start: 2;
	grid-column-start: 1;
	width: 70%;
	justify-self: flex-end;
	}

	ul:nth-of-type(3) {
	grid-row-start: 2;
	grid-column-start: 2;
	width: 70%;
	justify-self: start;
	}