Tutorial-proyecto-bootstrap-icons/index.html at main · aulaideal/Tutorial-proyecto-bootstrap-icons · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
    <link rel="stylesheet" href="css/estilos.css">
    <title>TRABAJANDO CON FONT BOOTSTRAP ICONS</title>


  </head>
  <body>
    <section id="caracteristicas-producto" class="bg-primary text-white text-center py-5">
      <div class="container py-3">
          <header class="mb-5">
              <h1 class="display-4 font-weight-bolder">Embebiendo el SVG dentro del código</h1>
              <p class="lead">
                Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptas fugiat nobis, corrupti voluptatem.
              </p>
          </header>

          <div class="row">
              <div class="col-12 col-sm-6 col-lg-3 mb-5 mb-lg-0">

                <svg width="5rem" height="5rem" viewBox="0 0 16 16" class="bi bi-alarm-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" d="M6 .5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1H9v1.07a7.001 7.001 0 0 1 3.274 12.474l.601.602a.5.5 0 0 1-.707.708l-.746-.746A6.97 6.97 0 0 1 8 16a6.97 6.97 0 0 1-3.422-.892l-.746.746a.5.5 0 0 1-.707-.708l.602-.602A7.001 7.001 0 0 1 7 2.07V1h-.5A.5.5 0 0 1 6 .5zM.86 5.387A2.5 2.5 0 1 1 4.387 1.86 8.035 8.035 0 0 0 .86 5.387zM11.613 1.86a2.5 2.5 0 1 1 3.527 3.527 8.035 8.035 0 0 0-3.527-3.527zM8.5 5.5a.5.5 0 0 0-1 0v3.362l-1.429 2.38a.5.5 0 1 0 .858.515l1.5-2.5A.5.5 0 0 0 8.5 9V5.5z"/>
                  </svg>
                <h5 class="mt-4">Combine Images</h5>
                  <p>Take separate Snagit images and combine them into one, organized.</p>

              </div>
              <div class="col-12 col-sm-6 col-lg-3 mb-5 mb-lg-0">

                <svg width="5rem" height="5rem" viewBox="0 0 16 16" class="bi bi-collection-play" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" d="M14.5 13.5h-13A.5.5 0 0 1 1 13V6a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-.5.5zm-13 1A1.5 1.5 0 0 1 0 13V6a1.5 1.5 0 0 1 1.5-1.5h13A1.5 1.5 0 0 1 16 6v7a1.5 1.5 0 0 1-1.5 1.5h-13zM2 3a.5.5 0 0 0 .5.5h11a.5.5 0 0 0 0-1h-11A.5.5 0 0 0 2 3zm2-2a.5.5 0 0 0 .5.5h7a.5.5 0 0 0 0-1h-7A.5.5 0 0 0 4 1z"/>
                    <path fill-rule="evenodd" d="M6.258 6.563a.5.5 0 0 1 .507.013l4 2.5a.5.5 0 0 1 0 .848l-4 2.5A.5.5 0 0 1 6 12V7a.5.5 0 0 1 .258-.437z"/>
                  </svg>

                <h5 class="mt-4">Favorites</h5>
                  <p>Keep all of your most valuable tools together in one spot.</p>

              </div>
              <div class="col-12 col-sm-6 col-lg-3 mb-5 mb-lg-0">

               <svg width="5rem" height="5rem" viewBox="0 0 16 16" class="bi bi-basket" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
  <path fill-rule="evenodd" d="M5.757 1.071a.5.5 0 0 1 .172.686L3.383 6h9.234L10.07 1.757a.5.5 0 1 1 .858-.514L13.783 6H15a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1v4.5a2.5 2.5 0 0 1-2.5 2.5h-9A2.5 2.5 0 0 1 1 13.5V9a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h1.217L5.07 1.243a.5.5 0 0 1 .686-.172zM2 9v4.5A1.5 1.5 0 0 0 3.5 15h9a1.5 1.5 0 0 0 1.5-1.5V9H2zM1 7v1h14V7H1zm3 3a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-1 0v-3A.5.5 0 0 1 4 10zm2 0a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-1 0v-3A.5.5 0 0 1 6 10zm2 0a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-1 0v-3A.5.5 0 0 1 8 10zm2 0a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-1 0v-3a.5.5 0 0 1 .5-.5zm2 0a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-1 0v-3a.5.5 0 0 1 .5-.5z"/>
</svg>
                  <h5 class="mt-4">Stamp Search</h5>
                  <p>Quickly search through nearly 2,000 pre-mades stamps.</p>

              </div>
              <div class="col-12 col-sm-6 col-lg-3">

                <svg width="5rem" height="5rem" viewBox="0 0 16 16" class="bi bi-cart-plus" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" d="M0 1.5A.5.5 0 0 1 .5 1H2a.5.5 0 0 1 .485.379L2.89 3H14.5a.5.5 0 0 1 .491.592l-1.5 8A.5.5 0 0 1 13 12H4a.5.5 0 0 1-.491-.408L2.01 3.607 1.61 2H.5a.5.5 0 0 1-.5-.5zM3.102 4l1.313 7h8.17l1.313-7H3.102zM5 12a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm7 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm-7 1a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm7 0a1 1 0 1 0 0 2 1 1 0 0 0 0-2z"/>
                    <path fill-rule="evenodd" d="M8.5 5a.5.5 0 0 1 .5.5V7h1.5a.5.5 0 0 1 0 1H9v1.5a.5.5 0 0 1-1 0V8H6.5a.5.5 0 0 1 0-1H8V5.5a.5.5 0 0 1 .5-.5z"/>
                  </svg>
                <h5 class="mt-4">Simplify Tool</h5>
                  <p>Convert your standard screenshots into simplified.</p>

              </div>


          </div>

      </div>

  </section>

  <section id="caracteristicas-producto" class="text-center py-5">
    <div class="container py-3">
        <header class="mb-5">

            <h1 class="display-4 font-weight-bolder">Incrustándolos como un Sprite SVG</h1>
            <p class="lead">
              Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptas fugiat nobis, corrupti voluptatem.
            </p>
        </header>

        <div class="row">
            <div class="col-12 col-sm-6 col-lg-3 mb-5 mb-lg-0">

                <svg class="bi text-primary" width="5rem" height="5rem" fill="currentColor">
                    <use xlink:href="libs/bootstrap-icons/bootstrap-icons.svg#toggle2-on"/>
                  </svg>


                <h5 class="mt-4">Combine Images</h5>
                <p>Take separate Snagit images and combine them into one, organized.</p>

            </div>
            <div class="col-12 col-sm-6 col-lg-3 mb-5 mb-lg-0">
                <svg class="bi text-primary" width="5rem" height="5rem" fill="currentColor">
                    <use xlink:href="libs/bootstrap-icons/bootstrap-icons.svg#trophy-fill"/>
                  </svg>

                <h5 class="mt-4">Favorites</h5>
                <p>Keep all of your most valuable tools together in one spot.</p>

            </div>
            <div class="col-12 col-sm-6 col-lg-3 mb-5 mb-lg-0">

                <svg class="bi text-primary" width="5rem" height="5rem" fill="currentColor">
                    <use xlink:href="libs/bootstrap-icons/bootstrap-icons.svg#vector-pen"/>
                  </svg>
                <h5 class="mt-4">Stamp Search</h5>
                <p>Quickly search through nearly 2,000 pre-mades stamps.</p>

            </div>
            <div class="col-12 col-sm-6 col-lg-3">
                <svg class="bi text-primary" width="5rem" height="5rem" fill="currentColor">
                    <use xlink:href="libs/bootstrap-icons/bootstrap-icons.svg#wrench"/>
                  </svg>
                <h5 class="mt-4">Simplify Tool</h5>
                <p>Convert your standard screenshots into simplified.</p>

            </div>


        </div>

    </div>

</section>


  <section id="premios" class="bg-light text-center py-5">
    <div class="container py-4">
<img src="libs/bootstrap-icons/cloud-arrow-up.svg" alt="Nube" width="200" height="auto" class="text-primary">
        <h1 class="h3">Incrustándolo con la etiqueta img</h1>
        <p class="lead mb-5">
            Snagit is the ultimate screen capture and video recording software for Windows and Mac. Way more
            than a basic, free screen capture tool, Snagit is powerful software to capture images and record
            videos of your computer screen. Start today for free!.
        </p>
        <a href="#" class="btn btn-primary btn-lg mr-2">Probar</a>
        <a href="#" class="btn btn-secondary btn-lg">Comprar</a>

    </div>

</section>

<footer class="text-center py-5">
<p><i class="iconoDerechos"></i> Creado con Bootstrap Icons</p>
</footer>


    <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>


  </body>
</html>