Home Explore Help
Sign In
Helen
/
markup
Watch 1
Star 0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

lesson 7

Elena 3 years ago
parent
58952e10c3
commit
71ff15cec5
4 changed files with 189 additions and 0 deletions
Unified View Show Diff Stats
  1. BIN
      Markup Lesson 7/img/card.png
  2. BIN
      Markup Lesson 7/img/logo.png
  3. 189 0
      Markup Lesson 7/index.html
  4. BIN
      Markup Lesson 7/screen-validator/HTML.png

BIN
Markup Lesson 7/img/card.png
View File


BIN
Markup Lesson 7/img/logo.png
View File


+ 189 - 0
Markup Lesson 7/index.html
View File 

@@ -0,0 +1,189 @@
 
+<!doctype html>
 
+<html lang="en">
 
+
 
+<head>
 
+    <meta charset="utf-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1">
 
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"
 
+        integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
 
+    <title>Hello, world!</title>
 
+</head>
 
+
 
+<body>
 
+    <div class="wrapper d-flex flex-column" style="min-height: 100vh;">
 
+        <header>
 
+            <div class="container-fluid">
 
+                <div class="row">
 
+                    <div class="header__inner col-12 bg-warning py-4">
 
+                        <nav class="navbar navbar-expand-lg navbar-light d-flex">
 
+                            <a class="navbar-brand" href="#">
 
+                                <img width="150" src="img/logo.png" alt="logo">
 
+                            </a>
 
+                            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
 
+                                aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
 
+                                <span class="navbar-toggler-icon"></span>
 
+                            </button>
 
+                            <div class="collapse navbar-collapse justify-content-end" id="navbarNav">
 
+                                <ul class="navbar-nav">
 
+                                    <li class="nav-item">
 
+                                        <a class="nav-link active" href="#">Item1</a>
 
+                                    </li>
 
+                                    <li class="nav-item">
 
+                                        <a class="nav-link" href="#">Item2</a>
 
+                                    </li>
 
+                                    <li class="nav-item">
 
+                                        <a class="nav-link" href="#">Item3</a>
 
+                                    </li>
 
+                                    <li class="nav-item">
 
+                                        <a class="nav-link" href="#">Item4</a>
 
+                                    </li>
 
+                                    <li class="nav-item">
 
+                                        <a class="nav-link" href="#">Item5</a>
 
+                                    </li>
 
+                                </ul>
 
+                            </div>
 
+                        </nav>
 
+                    </div>
 
+                </div>
 
+            </div>
 
+        </header>
 
+
 
+        <main class="d-flex flex-grow-1">
 
+            <div class="container-fluid d-flex">
 
+                <div class="row flex-grow-1">
 
+                    <div class="col-12 order-1 py-4 col-md-12 order-md-0 col-lg-8 order-lg-1">
 
+                        <div class="row d-flex justify-content-around">
 
+                            <div class="px-0 text-center card mx-3 mb-5" style="width: 18rem;">
 
+                                <div class="item d-flex flex-column" style="height: 100%;">
 
+                                    <img src="img/card.png" class="card-img p-4" width="150" alt="card">
 
+                                    <div class="card-body flex-grow-1">
 
+                                        <h5 class="card-title">Card title</h5>
 
+                                        <p class="card-text">
 
+                                            Some quick example text to build on the card title and makeup
 
+                                            the bulk of the card's content.
 
+                                        </p>
 
+                                    </div>
 
+                                    <div class="btn-block bg-light p-3 border-top">
 
+                                        <a href="#" class="btn d-block btn-primary">
 
+                                            Go
 
+                                        </a>
 
+                                    </div>
 
+                                </div>
 
+                            </div>
 
+                            <div class="card px-0 text-center mx-3 mb-5" style="width: 18rem;">
 
+                                <div class="item d-flex flex-column" style="height: 100%;">
 
+                                    <img src="img/card.png" class="card-img p-4" alt="card">
 
+                                    <div class="card-body flex-grow-1">
 
+                                        <h5 class="card-title">Card title</h5>
 
+                                        <p class="card-text">
 
+                                            Some quick example text to build on the card title and makeup
 
+                                            the bulk of the card's content.
 
+                                        </p>
 
+                                    </div>
 
+                                    <div class="btn-block bg-light p-3 border-top">
 
+                                        <a href="#" class="btn d-block btn-primary">
 
+                                            Go
 
+                                        </a>
 
+                                    </div>
 
+                                </div>
 
+                            </div>
 
+                            <div class="card px-0 text-center mx-3 mb-5" style="width: 18rem;">
 
+                                <div class="item d-flex flex-column" style="height: 100%;">
 
+                                    <img src="img/card.png" class="card-img p-4" alt="card">
 
+                                    <div class="card-body flex-grow-1">
 
+                                        <h5 class="card-title">Card title</h5>
 
+                                        <p class="card-text">
 
+                                            Some quick example text to build on the card title and makeup
 
+                                            the bulk of the card's content.
 
+                                            Some quick example text to build on the card title and makeup
 
+                                            the bulk of the card's content.
 
+                                        </p>
 
+                                    </div>
 
+                                    <div class="btn-block bg-light p-3 border-top">
 
+                                        <a href="#" class="btn d-block btn-primary">
 
+                                            Go
 
+                                        </a>
 
+                                    </div>
 
+                                </div>
 
+                            </div>
 
+                            <div class="card px-0 text-center mx-3 mb-5" style="width: 18rem;">
 
+                                <div class="item d-flex flex-column" style="height: 100%;">
 
+                                    <img src="img/card.png" class="card-img p-4" alt="card">
 
+                                    <div class="card-body flex-grow-1">
 
+                                        <h5 class="card-title">Card title</h5>
 
+                                        <p class="card-text">
 
+                                            Some quick example text to build on the card title and makeup
 
+                                            the bulk of the card's content.
 
+                                            Some quick example text to build on the card title and makeup
 
+                                            the bulk of the card's content.
 
+                                        </p>
 
+                                    </div>
 
+                                    <div class="btn-block bg-light p-3 border-top">
 
+                                        <a href="#" class="btn d-block btn-primary">
 
+                                            Go
 
+                                        </a>
 
+                                    </div>
 
+                                </div>
 
+                            </div>
 
+                            <div class="card px-0 text-center mx-3 mb-5" style="width: 18rem;">
 
+                                <div class="item d-flex flex-column" style="height: 100%;">
 
+                                    <img src="img/card.png" class="card-img p-4" alt="card">
 
+                                    <div class="card-body flex-grow-1">
 
+                                        <h5 class="card-title">Card title</h5>
 
+                                        <p class="card-text">
 
+                                            Some quick example text to build on the card title and makeup
 
+                                            the bulk of the card's content.
 
+                                        </p>
 
+                                    </div>
 
+                                    <div class="btn-block bg-light p-3 border-top">
 
+                                        <a href="#" class="btn d-block btn-primary">
 
+                                            Go
 
+                                        </a>
 
+                                    </div>
 
+                                </div>
 
+                            </div>
 
+                            <div class="card px-0 text-center mx-3 mb-5" style="width: 18rem;">
 
+                                <div class="item d-flex flex-column" style="height: 100%;">
 
+                                    <img src="img/card.png" class="card-img p-4" alt="card">
 
+                                    <div class="card-body flex-grow-1">
 
+                                        <h5 class="card-title">Card title</h5>
 
+                                        <p class="card-text">
 
+                                            Some quick example text to build on the card title and makeup
 
+                                            the bulk of the card's content.
 
+                                            Some quick example text to build on the card title and makeup
 
+                                            the bulk of the card's content.
 
+                                        </p>
 
+                                    </div>
 
+                                    <div class="btn-block bg-light p-3 border-top">
 
+                                        <a href="#" class="btn d-block btn-primary">
 
+                                            Go
 
+                                        </a>
 
+                                    </div>
 
+                                </div>
 
+                            </div>
 
+                        </div>
 
+                    </div>
 
+                    <div class="col-12 order-0 py-4 bg-danger col-md-6 order-md-1 col-lg-2 order-lg-0">aside</div>
 
+                    <div class="col-12 order-2 py-4 bg-info col-md-6 order-md-2 col-lg-2 order-lg-2">aside</div>
 
+                </div>
 
+            </div>
 
+        </main>
 
+
 
+        <footer class="bg-success text-center py-4">
 
+            <div class="container-fluid">
 
+                footer
 
+            </div>
 
+        </footer>
 
+    </div>
 
+
 
+    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
 
+        integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous">
 
+    </script>
 
+    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
 
+        integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous">
 
+    </script>
 
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
 
+        integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous">
 
+    </script>
 
+</body>
 
+</html>

BIN
Markup Lesson 7/screen-validator/HTML.png
View File