Skip to content

Instantly share code, notes, and snippets.

@pierrealexaline

pierrealexaline/index.html

Created April 20, 2020 19:09
Show Gist options
  • Save pierrealexaline/fc8d55764170017c4754f975bc83609c to your computer and use it in GitHub Desktop.
Save pierrealexaline/fc8d55764170017c4754f975bc83609c to your computer and use it in GitHub Desktop.
Download ZIP
X1 - CSS [advanced] : CSS Grid
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>FindThePrecious.com</title>
<link rel="stylesheet" href="style.css">
<link rel="icon" href="images/favicons/favicon.ico" />
</head>
<body id="container">
<section>
<h1>FindThePrecious.com</h1>
</section>
<section>
<figure>
<img src="https://via.placeholder.com/660x180" title="Fellowship try to destroy the ring" alt="Catch the Felons">
<figcaption>
<h3>Dangerous fellowship try to destroy the ring</h3>
<p>Orcs,Goblins,Balrogs, protect your masster Sauron !</p>
</figcaption>
</figure>
</section>
<section>
<h2>Fellows wanted dead (or alive if u want to eat them after !)</h2>
</section>
<section>
<article>
<figure>
<img src="https://via.placeholder.com/180" alt="The WIzard" title="the Wizard - Reward 1000 gold coins !">
<figcaption>
Reward 1000 <br>gold coins
</figcaption>
</figure>
<h3>The Wizard</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam.
</p>
</article>
<article>
<figure>
<img src="https://via.placeholder.com/180" alt="Hobbit #3" title="Hobbit #3 - Dead for now !">
</figure>
<h3>Hobbit #3</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam.
</p>
</article>
<article>
<figure>
<img src="https://via.placeholder.com/180" alt="Yummy Dwarf" title="Yummy Dwarf - 250 gold coins">
<figcaption>
Reward 250 <br>gold coins
</figcaption>
</figure>
<h3>Yummy Dwarf</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam.
</p>
</article>
</section>
<section>
<form>
<h2>We need you, </h2>
<input type="submit" value="Join our Army !">
</form>
</section>
<section>
<form>
<h2>Contact us</h2>
<input type="email" placeholder="@">
<input type="text" placeholder="&#8962;">
<input type="text" placeholder="I have seen one of them">
<textarea placeholder="Your message"></textarea>
<input type="submit" value="Send !">
</form>
</section>
<section>
<article>
<ul>
<li><a href="about_us" title="About us">About us</a></li>
<li><a href="fellows" title="Fellows">Fellows</a></li>
<li><a href="join_us" title="Join us">Join our army</a></li>
</ul>
</article>
<article>
<ul>
<li><a href="faq" title="FAQ">FAQ</a></li>
<li><a href="reward" title="Reward conditions">Reward conditions</a></li>
<li><a href="legal_mentions" title="Legal mentions">Legal mentions</a></li>
</ul>
</article>
<article>
<p>
<a href="https://www.sauron4ever.com" title="Sauron4ever.com">Sauron4Ever.com</a><br>
<a href="https://www.twitter.com" title="Follow us on twitter">Follow him also on twitter</a>
</p>
</article>
</section>
</body>
</html>
Raw
style.css
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
body{
min-height: 100vh;
font-family: Arial, Helvetica, sans-serif;
font-size:100%;
background:#111;
}
#container {
margin: 0;
display: grid;
grid-template-columns: 100%;
grid-template-rows: 40px auto auto auto auto auto auto;
grid-template-areas:
"header"
"title"
"slider"
"articles"
"join_us"
"contact_form"
"footer"
;
}
body section:nth-child(1){
grid-area:header;
grid-area: 1 / 1 / 2 / 2;
background:#333;
}
body section:nth-child(1) h1{
color:white;
margin:0;
font-size:1.1em;
font-weight:400;
padding:10px 20px;
}
body section:nth-child(2){
grid-area:slider;
grid-area: 2 / 1 / 3 / 2;
background:#ccc;
display:flex;
align-items: center;
}
body section:nth-child(2) figcaption h3{
font-size:1.4em;
font-weight:400;
padding:0;
color:#333;margin:10px 0 0;
}
body section:nth-child(2) figcaption p{
font-size:1em;
padding:10px 0 0;margin:0;
color:#666;
}
body section:nth-child(2) figCaption{
width:340px;
display:flex;
flex-direction:column;
justify-content:center;
align-items: center;
text-align:center;
font-size:0.9em;
font-weight:600;
top:45px;
left:50%;
margin-left:-170px;
position:absolute;
padding:5px 10px;
background:#eee;
border-radius:4px;
}
body section:nth-child(2) img{
width:100%;
height:auto;
}
h2{
font-size:1.4em;
font-weight:600;
padding:20px 0 40px;
text-align:center;
}
body section:nth-child(3){
grid-area:title;
grid-area: 4 / 1 / 5 / 2;
background:white;
display:flex;
flex-direction:column;
justify-content:center;
align-items: center;
}
body section:nth-child(4){
grid-area:articles;
grid-area: 5 / 1 / 6 / 2;
background:white;
display:flex;
flex-direction:column;
justify-content:center;
align-items: center;
}
body section:nth-child(4) article{
display:flex;
flex-direction:column;
justify-content:center;
padding:20px;
background:#fff;
box-shadow: 1px 0px 5px 0px rgba(0,0,0,0.5);
margin:10px 0;
width:260px;
border-radius:4px;
}
body section:nth-child(4) article h3
{
text-align:center;
padding:20px 0
}
body section:nth-child(4) article figure{
display:flex;
flex-direction:column;
justify-content:center;
align-self: center;
}
body section:nth-child(4) article figCaption{
display:inline-block;
position:absolute;
text-align:center;
padding:5px 10px;
font-size:0.9em;
font-weight:600;
background:#eee;
border-radius:4px;
margin-left:40px;
}
body section:nth-child(5){
margin: 0;
grid-area:join_us;
grid-area: 3 / 1 / 4 / 2;
background:white;
display:flex;
flex-direction:column;
justify-content:center;
align-items: center;
padding :20px 0;
}
body section:nth-child(6){
margin: 0;
grid-area:contact_form;
background:#eee;padding :20px 0;
grid-area: 6 / 1 / 7 / 2;
}
body section:nth-child(7){
margin: 0;
grid-area:7 / 1 / 8 / 2;
}
form{
display:flex;
flex-direction:column;
justify-content:center;
align-items: center;
}
input{
padding:5px 10px;
margin:10px 0 10px 0;
border:1px solid #ccc;
font-size:1em;
}
input[type="submit"]{
color:white;
padding:10px 20px;
margin:10px 0 10px 0;
border:1px solid #333;
font-size:1em;
border-radius:4px;
background:#333;
}
body section:nth-child(7){
margin: 0;
grid-area:footer;
grid-area: 9 / 1 / 10 / 2;
background:#333;
color:white;
}
body section:nth-child(7) ul,p{
list-style:none;
margin-top:20px;text-align:center;
}
body section:nth-child(7) a{
text-decoration:none;
padding:20px;
line-height:1.4;
color:#fff
}
@media only screen and (min-width: 481px) {
body section:nth-child(2) figCaption{
top:60px;
}
}
@media only screen and (min-width: 769px) {
body section:nth-child(2) figCaption{
top:70px;
}
}
@media only screen and (min-width: 961px) {
#container {
margin: 0;
display: grid;
grid-template-columns: auto 320px 320px 320px auto;
grid-template-rows: 40px 180px auto auto auto auto auto;
grid-template-areas:
"header"
"title"
"slider"
"articles"
"join_us"
"contact_form"
"footer"
;
}
body section:nth-child(1){
grid-area:header;
grid-area: 1 / 2 / 2 / 5;
background:#333;
}
body section:nth-child(1) h1{
margin:0;
font-size:1.1em;
font-weight:400;
padding:10px 20px;
}
body section:nth-child(2){
grid-area:slider;
grid-area: 2 / 2 / 3 / 4;
}
body section:nth-child(2) figcaption h3{
font-size:1.6em;
font-weight:400;
color:#333;
}
body section:nth-child(2) figcaption p{
font-size:1em;
padding-top:10px;
color:#666;
}
body section:nth-child(2) figCaption{
width:550px;
top:100px;
left:50%;
margin-left:-435px;
position:absolute;
text-align:center;
padding:5px 10px;
font-size:0.9em;
font-weight:600;
background:#eee;
border-radius:4px;
}
h2{
padding:25px 0;
}
body section:nth-child(3){
grid-area:title;
grid-area: 3 / 2 / 4 / 4;
}
body section:nth-child(4){
grid-area:articles;
grid-area: 4 / 2 / 6 / 4;
display:flex;
flex-direction:row;
justify-content:space-around;
align-items:baseline;
}
body section:nth-child(4) article{
width:auto;
max-width:200px;
padding:20px;
}
body section:nth-child(4) article h3
{
text-align:center;
padding:20px 0
}
body section:nth-child(5){
display:flex;
flex-direction:column;
justify-content:center;
align-items: center;
margin: 0;
grid-area:join_us;
grid-area: 2 / 4 / 4 / 5;
}
body section:nth-child(6){
grid-area:contact_form;
grid-area: 4 / 4 / 5 / 5;
}
body section:nth-child(7){
grid-area:footer;
grid-area: 5 / 4 / 6 / 5;
padding:20px 0;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment