Jump to content

Search the Community

Showing results for tags 'grid; flex; css'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • W3Schools
    • General
    • Suggestions
    • Critiques
  • HTML Forums
    • HTML/XHTML
    • CSS
  • Browser Scripting
    • JavaScript
    • VBScript
  • Server Scripting
    • Web Servers
    • Version Control
    • SQL
    • ASP
    • PHP
    • .NET
    • ColdFusion
    • Java/JSP/J2EE
    • CGI
  • XML Forums
    • XML
    • XSLT/XSL-FO
    • Schema
    • Web Services
  • Multimedia
    • Multimedia
    • FLASH

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests


Languages

Found 1 result

  1. I picked the code from this youtube video(https://www.youtube.com/watch?v=v5KzBPUEgGQ), but my page doesnt look as the video shows it(no matter what browser). I added a pdf file, it shows how the page looks like. I looked over and over to see if I missed anything. My intencion, whenever I go through such videos, is, to get it work and then to analyze the things. So, maybe someone sees whats left or whats wrong. <!DOCTYPE html> <html> <head> <title>supply a title</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <header> <h1 class="header-Title"> Header CSS Grid Templat Area </h1> </header> <div class="hero">HERO AREA <div class="hero-title">hero-title Grid-Areas</div> <p class="hero-subtitle">hero-subtitle making life easier</p> </div> <main> <h1>main starts from the blog </h1> <div class="card"> <img src="GB.jpg" alt="foto" class="card-img"> <h2 class="card-title">blog post title</h2> <div class="card-content"> <p>text ljvslvhöh psoupsdhp bölabvnta</p> </div> <a href="">read more</a> </div> </main> <aside> <h1>sidebar stuff</h1> <p>kvdldghldfghf kvdldghldfghfkvdldghldfghfvkvdldghldfghfkvdldghldfghfkvdldghldfghf kvdldghldfghfkvdldghldfghfvvkvdldghldfghfkvdldghldfghfkvdldghldfghfkvdldghldfghf kvdldghldfghf kvdldghldfghfkvdldghldfghfvkvdldghldfghfkvdldghldfghfkvdldghldfghf kvdldghldfghfkvdldghldfghfvvkvdldghldfghfkvdldghldfghfkvdldghldfghfkvdldghldfghf kvdldghldfghf kvdldghldfghfkvdldghldfghfvkvdldghldfghfkvdldghldfghfkvdldghldfghf kvdldghldfghfkvdldghldfghfvvkvdldghldfghfkvdldghldfghfkvdldghldfghfkvdldghldfghf kvdldghldfghf kvdldghldfghfkvdldghldfghfvkvdldghldfghfkvdldghldfghfkvdldghldfghf kvdldghldfghfkvdldghldfghfvvkvdldghldfghfkvdldghldfghfkvdldghldfghfkvdldghldfghf</p> </aside> <footer> <h1 class="footer-Title"> footer</h1> </footer> </body> </html> /*https://www.youtube.com/watch?v=v5KzBPUEgGQ*/ body{ background-color: transparent; /* @include font-base; */ line-height: 1.6; display: grid; /* grid-template-rows: 10em 50vh auto 10em; grid-template-columns: 1fr 5fr 2fr 1fr;*/ grid-template: "header header header header" 10em "hero hero hero hero" 50vh ". main sidebar ." auto "footer footer footer footer" 10em / 1fr 5fr 2fr 1fr; } header{ grid-area: header; } header,footer{ display: flex; background-color: yellow; justify-content: center; align-items: center; } .header-Title, .footer-Title{ background-color: red; font-size: 1.0rem; } .hero{ background-color: coral; grid-area: hero; /* background-image: url('SCL90R_GraphBig.png');*/ background-repeat: no-repeat; display: flex; flex-direction: column; align-items: center; justify-content: center; } aside{ grid-area: sidebar; background: #fff; } footer{ grid-area: footer; } main{ background-color: red; grid-area: main; } .card{ display: grid; /* grid-template-columns: 1fr 3fr; grid-template-rows: min-content auto; grid-template-areas: "img title" "img content";*/ grid-template: "img title" min-content "img content" auto / 1fr 5fr; } .card-img{ grid-area: img; max-width: 100%; background-color: pink; } .card-title{ grid-area: title; background: lightblue; } .card-content{ grid-area: content; background: lightgreen; }
×
×
  • Create New...