קוד: שבוע 12 שידור חי מספר 1

הקורס הפתוח שבוע 12
תגיות: , , ,

HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- https://github.com/joshbuchea/HEAD -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>GitHub Search</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha2/css/bootstrap.min.css" integrity="sha384-DhY6onE6f3zzKbjUPRc2hOzGAdEf4/Dz+WJwBvEYL/lkkIsI3ihufq9hk9K4lVoK" crossorigin="anonymous">
    <link rel="stylesheet" href="my.css">
  </head>
  <body>
    <h1>חיפוש בקוד</h1>
    <div id="search">
      <form id="search-form" class="row">
        <div class="col-auto">
          <label for="languages" class="visually-hidden">שפות תכנות</label>
          <input class="form-control" id="languages" name="languages" type="text" placeholder="שפות תכנות" tabindex=0 autofocus>
        </div>
        <div class="col-auto">
          <label for="keywords" class="visually-hidden">מילות חיפוש</label>
          <input class="form-control" id="keywords" name="keywords" type="text" placeholder="מילות חיפוש">
        </div>
        <div class="col-auto">
          <button type="submit" class="btn btn-primary">חיפוש</button>
        </div>
      </form>
    </div>
    <h2>תוצאות</h2>
    <div id="results">
      <!-- One result -->
      <div class="result" data-result-id="1">
        <div class="repo-details">
          <div class="repo-name repo-property">{{ repo_name }}</div>
          <div class="repo-languages repo-property">{{ repo_languages }}</div>
          <div class="repo-stars repo-property">{{ repo_stars }}</div>
          <div class="repo-followers repo-property">{{ repo_followes }}</div>
        </div>
        <div class="repo-code-samples">
          <pre>{{ code_sample }}</pre>
        </div>
      </div>
    </div>
  </body>
</html>

CSS:

html {
  text-align: right;
  direction: rtl;  
  margin: 1em;
}

#results {
  margin: 0.5em;
  background: rgba(230, 230, 230, 0.95);
}

.repo-details {
  background: rgba(210, 210, 210, 0.95);
  display: flex;
  justify-content: space-between;
}

.repo-property {
  display: flex;
}

h2 {
  margin-top: 3rem;
  margin-bottom: 1rem;
}
4 לייקים