Skip to content

Instantly share code, notes, and snippets.

@Costafirmo

Costafirmo/grid.css

Last active November 12, 2019 16:12
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Costafirmo/2121455e1f4d8229825255b46f24a653 to your computer and use it in GitHub Desktop.
Save Costafirmo/2121455e1f4d8229825255b46f24a653 to your computer and use it in GitHub Desktop.
Download ZIP
Dificuldades para formatas style.css a grid.css
Raw
gistfile1.txt
Ola!
Tenho um grid que quero alinhar o conteudo de cada celula de um jeito diferente. Nao estou conseguindo fazer.
Queria alinhar o
- sec1-text li(1) no topo a esquerda;
- sec1-text li(2) no meio centralizado;
- sec1-text li(3) embaixo a direita;
- os conteudos do sec1-buttons no topo a esquerda;
Espero que possa me ajudar.
Obrigada!
Raw
grid.css
/* ----------------------------------------------- */
/* HEADER */
/* ----------------------------------------------- */
.header {
grid-area: header;
padding: 1rem 2rem;
background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(../img/hero.jpg);
background-size: cover;
background-position: center;
background-attachment: fixed;
height: 100vh;
display: grid;
grid-template-columns: auto 50% 42%;
grid-template-rows: auto 50% 35%;
grid-gap: .2rem;
}
.logo-img {
grid-column: 1 / 2;
grid-row: 1 / 1;
}
.logo-name {
grid-column: 2 / 3;
grid-row: 1 / 1;
}
.header-nav{
grid-column: 3 / 4;
grid-row: 1 / 1;
}
.header.text{
grid-column: 2 / 4;
grid-row: 2 / 3;
}
.header.buttons{
grid-column: 2 / 4;
grid-row: 3 / 4;
}
}
/* ----------------------------------------------- */
/* ABOUT */
/* ----------------------------------------------- */
.about {
background-color: orange;
grid-area: about;
padding: 0 2rem;
}
/* ----------------------------------------------- */
/* HOW IT WORKS */
/* ----------------------------------------------- */
.howitworks {
background-color: lightgreen;
grid-area: howitworks;
padding: 0 2rem;
}
/* ----------------------------------------------- */
/* SIGN UP */
/* ----------------------------------------------- */
.signup {
background-color: lightblue;
grid-area: signup;
padding: 0 2rem;
}
/* ----------------------------------------------- */
/* FOOTER */
/* ----------------------------------------------- */
.footer {
background-color: purple;
grid-area: footer;
padding: 0 2rem;
}
Raw
index.html
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Thais Fachini</title>
<link href="./css/normalize.css" rel="stylesheet">
<link href="./css/reset.css" rel="stylesheet">
<link href="./css/style.css" rel="stylesheet">
<link href="./css/grid.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,300italic' rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/css?family=Cagliostro&display=swap" rel="stylesheet">
</head>
<body class="app">
<div class="header">
<div class="logo-img"><img src="img/logo_small.png" alt="Logo Thais Fachini" class="logo-img"></div>
<div class="logo-name"><h1>THAÍS FACHINI</h1><p>Nutrition for Life</p></div>
<div class="links">
<nav>
<a href="#" class="header-link">About</a>
<a href="#" class="header-link">How It Works</a>
<a href="#" class="header-link">Sign Up</a>
<a href="#" class="header-link">Member</a>
</nav>
</div>
<div class="B1"></div>
<div class="sec1-text">
<ul>
<li>Alimentação funcional</li>
<li>para o equilíbrio do corpo</li>
<li> e o prazer de comer bem.</li>
</ul>
</div>
<div class="B3"></div>
<div class="C1"></div>
<div class="sec1-buttons">
<nav>
<a href="#" class="button-full">Sign Up</a>
<a href="#" class="button-ghost">Member</a>
</nav>
</div>
<div class="C3"></div>
</div>
<div class="about">About</div>
<div class="howitworks">How it Works</div>
<div class="signup">Sign Up</div>
<div class="footer">Footer</div>
</body>
Raw
style.css
/* ----------------------------------------------- */
/* BASIC SETUP */
/* ----------------------------------------------- */
* {
margin: 0;
}
/* ----------------------------------------------- */
/* BODY */
/* ----------------------------------------------- */
.app {
background-color: #ccc;
color: #555;
font-family: 'Lato', 'Arial', sans-serif;
font-weight: 300;
font-size: 20px;
display: grid;
grid-template-areas:
"header"
"about"
"howitworks"
"signup"
"footer";
grid-template-columns: auto;
grid-template-rows: 100vh 100vh 100vh 100vh 100vh;
}
/*HEADER ------------------------------------------ */
.header{
align-items: center;
}
.logo-img{
height: 80px;
width: auto;
}
.logo-name h1{
display:flex;
color: #fff;
font-family: 'Cagliostro', sans-serif;
text-decoration: none;
font-size: 140%;
}
.logo-name p{
display:flex;
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-size: 70%;
font-weight: 500;
}
.header-link{
color: #fff;
text-decoration: none;
font-size: 100%;
padding: 8px 10px;
margin-left: 2rem;
border-bottom: 2px solid transparent;
transition: border-bottom 0.2s;
}
.sec1-text {
margin-top: 0;
margin-bottom: 20px;
color: #fff;
font-size: 200%;
word-spacing: 4px;
letter-spacing: 1px;
}
sec1-text li:nth-child(1){
text-align: left;
}
sec1-text li:nth-child(2){
text-align: center;
}
sec1-text li:nth-child(3){
text-align: right;
}
.button-full, .button-ghost{
color: #fff;
text-decoration: none;
font-size: 100%;
padding: 8px 10px;
border-bottom: 2px solid transparent;
transition: border-bottom 0.2s;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment