Hello, im currently working on this Proyect
I have it divided into 1 grid area “wrap ” and a “nav-var ” (position:fixed) area,wich floats arround the page
inside the grid area there is an element thats a grid area itself “freatures ”. Whitin this area there are two divs one contains a h1 and a p and the other one an Iframe from youtube with its widht and height set to 100%
the i frame is staying at the top-left area of the grid, some how… im doing something wrong?
here is my code pen code so you guys can see it. CodePEN
Here is the code for those who dont want to go to codePen
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Landing Page</title>
<meta name="description" content="Landing Page">
<meta name="author" content="Big Clown">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header id="header">
<nav id="nav-var">
<img id="header-img" src="https://www.nvidia.com/etc/designs/nvidiaGDC/clientlibs_base/images/NVIDIA-Logo.svg" alt="logo">
<div id="nav-link">
<a href="#freatures" class="nav-links">Freatures</a>
<a href="#model" class="nav-links">Models</a>
<a href="#pricing" class="nav-links">Pricing</a>
</div>
</nav>
</header>
<div id="wrap">
<div id="freatures">
<div id="producto">
<h1 id="gpu-1-title" class="gpu-header"> GEFORCE RTX 2080 Ti </h1>
<p id="gpu-1-info" class="gpu-info"> La tarjeta gráfica más nueva de NVIDIA revoluciona
el realismo y el rendimiento de los juegos. Su poderosa
arquitectura GPU NVIDIA Turing™, además de las tecnologías
innovadoras y sus 11 GB de memoria GDDR6 ultrarrápida de
próxima generación la convierten en la GPU de juegos más
avanzada del mundo.
</p>
</div>
<div id="wrapper-iframe">
<iframe width="90%" height="100%" src="https://www.youtube.com/embed/02h_dNl-C-s" class="video" allowfullscreen> </iframe>
</div>
</div>
<div id="pricing">
<div id="gpu-1-price" class="gpu-price black-ba"></div>
</div>
<div id="buying">
<div id="info-buy black-ba">sent us an email to buy it</div>
<form id="form" class="black-ba" >
<input type="email" id="email" class="input-form" name="email" value="Email" >
</form>
</div>
<footer id="footer">im afooter
</footer>
</div>
</body>
</html>
CSS
body {
background-color:#8c8c8c;
text-align: center;
}
/* nav-var start - position:fixed; not part of the main grid area!
IGNORE- WORKS AMAZING -
*/
#nav-var { /*big container*/
display:grid;
grid-template-columns: 25% 1fr;
grid-template-rows:1fr;
background-color:#145A32 !important;
height:10%;
width:100%;
border-radius:5px;
position:fixed;
margin:-10px;
align-content:center;
justify-content:center;
grid-template-area: '#header-img #nav-link';
min-height:5vw;
}
#nav-link { /*nav-links container*/
grid-column: 2 / 4 ;
align-content:center;
justify-content:center;
margin:center;
display:grid;
grid-template-columns: 1fr 1fr 1fr;
}
#header-img {
grid-column: 1 / 2 ;
margin:auto;
}
.nav-links {
justify-self :center;
padding:2.5%;
font-size:2vw;
font-weight:900;
font-family: arial;
background-color:#114D2B;
border-radius:5px;
color:black;
text-decoration:none !important;
transition: background-color 0.5s ease;
}
.nav-links:hover {
background-color:#145A32; /*hover color*/
}
/* nav-var end - position:fixed; not part of the main grid area! */
#wrap {
width:100%;;
height:100%;
display:grid;
grid-template-columns: 10% 1fr 10%;
grid-template-rows: 1fr 1fr 1fr ;
grid-column-gap: 10px;
grid-row-gap: 30px;
padding-top:5%;
grid-template-areas: " . freaturess . "
" . pricingg . "
" . buyingg . "
" . footerr . ";
/* Main wrapper
divides
page in 4
padding-top=5%
its for
the nav-var
position
be visible
*/
}
header {
grid-column: 1 / 4;
grid-area: headerr;
height:90px;
}
#freatures {
grid-area: freaturess;
display:grid ;
height: 100%;
width: 100%;
justify-content: stretch;
grid-template-columns:15% 1fr 1fr 15%;
grid-template-rows:1fr 1fr;
box-shadow: 0px -6px 50px 5px #000000;
background-color:#633974;
border-radius:10px;
grid-template-areas: " . productoo productoo . "
" . wrapper-iframe wrapper-iframe . " ;
/* first area
of the main wrapper
its a grid within a grid
*/
}
#pricing {
grid-area:pricingg;
}
/* empty one so far, to be filled with shit */
#buying {
grid-area:buyingg;
}
/* empty one so far, to be filled with shit */
footer {
grid-area: footerr;
}
/* empty one so far, to be filled with shit */
}
.wrapper-iframe{
height:100%; /* to get parent height*/
width:100%; /* to get parent width*/
grid-area: wrapper-iframe; /* area name */
}
#producto {
grid-area: productoo; /* area-name */
height:100%; /* to get parent height*/
width:100%; /* to get parent width*/
}
lasjorg
December 15, 2019, 3:02pm
#3
wrapper-iframe is a id not a class (#wrapper-iframe).
lasjorg
December 15, 2019, 3:09pm
#5
You have a stray closing } before the selector.
lasjorg
December 15, 2019, 3:18pm
#7
No problem glad to help, happy coding!
1 Like