code-differently · jeremyking1996 · Nov 6, 2020 · Nov 9, 2020 · Nov 16, 2020 · Nov 16, 2020
diff --git a/ConvertFirstPage.html b/ConvertFirstPage.html
@@ -0,0 +1,179 @@
+<!DOCTYPE HTML>
+    <html>
+    <head>
+        <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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+        <link rel="stylesheet" href="styles.css">
+    </head>
+    <body>
+
+        <!-- Nav Bar -->
+        <nav class="navbar navbar-expand-lg navbar-light">
+            <a class="navbar-brand text-light" href="#">Jkoros</a>
+            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
+              <span class="navbar-toggler-icon"></span>
+            </button>
+            <div class="collapse navbar-collapse justify-content-end" id="navbarNavAltMarkup">
+              <div class="navbar-nav">
+                <a class="nav-item nav-link active text-light" href="#">Home <span class="sr-only">(current)</span></a>
+                <a class="nav-item nav-link text-light" href="#">Service</a>
+                <a class="nav-item nav-link text-light" href="#">Portfolio</a>
+                <a class="nav-item nav-link text-light" href="#">About</a>
+                <a class="nav-item nav-link text-light" href="#">Blog</a>
+                <a class="nav-item nav-link text-light" href="#">Contact</a>
+              </div>
+            </div>
+          </nav>
+        </div>
+
+          <!-- End Nav bar -->
+
+            <!-- Start of cards -->
+            <div class="card-columns">
+                <div class="card">
+                  <img src="/Users/jeremyking/RR-JS-CSS-Convert-Mock/Images/code.jpeg" alt="..." class="img-thumbnail">
+                  <div class="card-body">
+                    <strong>Lorem Ipsem</strong>
+                    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+                  <hr>
+                  <i style="font-size:15px" class="fa">&#xf073;</i>
+                  </div>
+                </div>
+                <div class="card">
+                  <img src="/Users/jeremyking/RR-JS-CSS-Convert-Mock/Images/download.jpeg" alt="..." class="img-thumbnail"><br>
+                  <strong>Card Title</strong>
+                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+                <hr>
+                <i style="font-size:15px" class="fa">&#xf073;</i>
+                  </div>
+                <div class="card">
+                  <img src="/Users/jeremyking/RR-JS-CSS-Convert-Mock/Images/GreenCode.jpeg" alt="..." class="img-thumbnail">                  
+                  <div class="card-body">
+                    <h5 class="card-title">Notha Title</h5>
+                    <p class="card-text">Ut lie ferad silli, erant refe sol pre noeukf.</p>
+                    <hr>
+                    <i style="font-size:15px" class="fa">&#xf073;</i>
+                  </div>
+                </div>
+                <div class="card">
+                  <div class="card-body">
+                    <img src="/Users/jeremyking/RR-JS-CSS-Convert-Mock/Images/GreenCode.jpeg" alt="..." class="img-thumbnail">                   
+                     <h5 class="card-title">Card title</h5>
+                    <p class="card-text">This card has a regular title and short paragraphy of text below it.</p>
+                    <hr>
+                    <i style="font-size:15px" class="fa">&#xf073;</i>
+                  </div>
+                </div>
+                <div class="card">
+                  <div class="card-body">
+                    <img src="/Users/jeremyking/RR-JS-CSS-Convert-Mock/Images/code.jpeg" alt="..." class="img-thumbnail">                    <h5 class="card-title">Card title</h5>
+                    <p class="card-text">This card has a regular title and short paragraphy of text below it.</p>
+                    <hr>
+                    <i style="font-size:15px" class="fa">&#xf073;</i>
+                </div>
+                </div>
+                <div class="card">
+                  <div class="card-body">
+                    <img src="/Users/jeremyking/RR-JS-CSS-Convert-Mock/Images/code.jpeg" alt="..." class="img-thumbnail">                    <h5 class="card-title">Card title</h5>
+                    <p class="card-text">This card has a regular title and short paragraphy of text below it.</p>
+                    <hr>
+                    <i style="font-size:15px" class="fa">&#xf073;</i>
+                  </div>
+                </div>
+                <div class="card">
+                  <div class="card-body">
+                    <img src="/Users/jeremyking/RR-JS-CSS-Convert-Mock/Images/code.jpeg" alt="..." class="img-thumbnail">                    <h5 class="card-title">Card title</h5>
+                    <p class="card-text">This card has a regular title and short paragraphy of text below it.</p>
+                    <hr>
+                    <i style="font-size:15px" class="fa">&#xf073;</i>
+                    </div>
+                </div>
+                <div class="card">
+                  <div class="card-body">
+                    <img src="/Users/jeremyking/RR-JS-CSS-Convert-Mock/Images/code.jpeg" alt="..." class="img-thumbnail">                    <h5 class="card-title">Card title</h5>
+                    <p class="card-text">This card has a regular title and short paragraphy of text below it.</p>
+                    <hr>
+                    <i style="font-size:15px" class="fa">&#xf073;</i>
+                  </div>
+                </div>
+                <div class="card">
+                  <div class="card-body">
+                    <img src="/Users/jeremyking/RR-JS-CSS-Convert-Mock/Images/code.jpeg" alt="..." class="img-thumbnail">                    <h5 class="card-title">Card title</h5>
+                    <p class="card-text">This card has a regular title and short paragraphy of text below it.</p>
+                    <hr>
+                    <i style="font-size:15px" class="fa">&#xf073;</i>
+                    </div>
+                </div>
+              </div>
+                <!-- End of cards -->
+
+                <!-- Button -->
+      <hr class="under-cards">
+      <button type="button" class="btn btn-primary" style="margin-left: 15%">Older Links</button>
+    </body>
+      <footer class= "bottom" style="margin-top: 5%">
+              <!-- End of button -->
+
+                 <!-- Bottom of page -->
+    <div class="row">
+       <div class="col-left">
+         <h3>Popular Posts</h3>
+                <p>I love this website!<br>
+                <small>from May 15, 1953</small></p><hr>
+                <p>This website is amazing for blogs<br>
+                <small>from February 30, 2025</small></p><hr>
+                <p>I like blogging so this is perfect!<br>
+                <small>from March 1992 </small></p><hr>
+    </div>
+    <div class="col">
+      <h3>Twitter</h3>
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. -<a href="#">21 hours ago</a><hr>
+        Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. -<a href="#">19 hours ago</a><hr>
+        Ut enim ad minim veniam, quis nostrud, ut enim ad minim veniam, quis nostrud. -<a href="#">17 seconds ago</a><hr>
+      </p>
+    </div>
+    <div class="col">
+      <strong>A LITTLE ABOUT ME </strong>
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. <br><br>
+        Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+    </div>
+    <div class="col">
+
+                <!-- Start of form -->
+        <form>
+              <div class="form-group">
+                      <label for="exampleInputEmail1">Email address</label>
+                      <input type="email" class="form-control" id="message" aria-describedby="emailHelp">
+                      <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
+               </div>
+               <div class="form-group mb-5">
+                      <label for="subject">Subject</label>
+                      <input type="text" class="form-control" id="message">
+               </div>
+               <div class="form-group mb-5" style="margin-right: 10%">
+                    <label for="message">Reason for contacting</label>
+                      <input type="text" class="form-control" id="message">
+               </div>
+                <button type="submit" class="btn btn-primary">Submit</button>
+        </form>
+                  <!-- End of form -->
+                  </div>
+              </div>
+            </div>
+          </div>
+        </footer>
+        <div class="bottom-footer">&#169; Jkoros 2011 
+          <div class="bottom-footer__social">
+            <a href="#" class="fa fa-rss"></a>
+            <a href="#" class="fa fa-facebook"></a>
+            <a href="#" class="fa fa-twitter"></a>
+            <a href="#" class="fa fa-linkedin"></a>
+            <a href="#" class="fa fa-reddit"></a>
+            <a href="#" class="fa fa-flickr"></a>
+          </div>
+
+
+        </div>
+    <!-- End of footer -->
+
+    </html>
diff --git a/Images/GreenCode.jpeg b/Images/GreenCode.jpeg
diff --git a/Images/Hammrabi.jpeg b/Images/Hammrabi.jpeg
diff --git a/Images/batman.png b/Images/batman.png
diff --git a/Images/code.jpeg b/Images/code.jpeg
diff --git a/Images/download.jpeg b/Images/download.jpeg
diff --git a/Images/gearhead.png b/Images/gearhead.png
diff --git a/blog-post.png b/blog-post.png
diff --git a/secondpage.html b/secondpage.html
@@ -0,0 +1,167 @@
+<!DOCTYPE html>
+<html>
+    <head>
+    <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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+    <link rel="stylesheet" href="styles.css">
+</head>
+    <!-- Navbar -->
+    <body>
+    <nav class="navbar navbar-expand-lg navbar-light">
+        <a class="navbar-brand text-light" href="#">Jkoros</a>
+        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
+          <span class="navbar-toggler-icon"></span>
+        </button>
+        <div class="collapse navbar-collapse justify-content-end" id="navbarNavAltMarkup">
+          <div class="navbar-nav">
+            <a class="nav-item nav-link active text-light" href="#">Home <span class="sr-only">(current)</span></a>
+            <a class="nav-item nav-link text-light" href="#">Service</a>
+            <a class="nav-item nav-link text-light" href="#">Portfolio</a>
+            <a class="nav-item nav-link text-light" href="#">About</a>
+            <a class="nav-item nav-link text-light" href="#">Blog</a>
+            <a class="nav-item nav-link text-light" href="#">Contact</a>
+          </div>
+        </div>
+      </nav>
+</div>
+    <!-- /Navbar -->
+
+    <!-- Start of main content -->
+    <div class="container">
+        <div class="row">
+          <div class="col-6">
+            <div class="date-title"><p class="date">Jan 29 <h3>Ridiculus mattem forem<hr></h3>
+          </div>
+            <img src="/Users/jeremyking/RR-JS-CSS-Convert-Mock/Images/code.jpeg" alt="..." class="img-thumbnail" id="contentimage">
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis dui augue, ornare eu ultrices ac, posuere sed nibh. Aliquam venenatis diam elit, eget pulvinar purus commodo ultricies. Maecenas justo mi, commodo commodo blandit ut, luctus eu sapien. In laoreet dignissim urna, et fringilla mi cursus commodo. In pellentesque erat eu mi pulvinar, sit amet porta tellus cursus. Phasellus non sem viverra, hendrerit metus non, imperdiet lacus. Vestibulum vehicula urna egestas ex auctor pharetra. Pellentesque id tellus vel purus malesuada ullamcorper vel quis ligula.<br>
+                <br>
+            Nullam at lacinia lectus. Sed porttitor tempor felis, a dapibus turpis. Aenean tristique semper laoreet. Donec magna nisi, hendrerit ut elit vitae, aliquam accumsan nulla. Nulla facilisi. Curabitur malesuada odio a turpis commodo, ac fringilla eros pretium. Nunc congue gravida condimentum. Sed diam tellus, dapibus nec congue tristique, eleifend vitae elit. Integer condimentum libero nec ornare interdum. Nullam venenatis nibh lorem, quis pellentesque elit facilisis eu.<br><br>
+
+             Nulla facilisi. Donec posuere est in ligula pellentesque, vel efficitur dui accumsan. Sed imperdiet ultrices euismod. Fusce dignissim malesuada erat, eget tincidunt libero. Praesent eu rutrum massa. Proin justo leo, sodales sed euismod sed, placerat sed lectus. Cras vestibulum orci nunc, non facilisis lacus placerat eget. Cras nec faucibus tellus.</p><br>
+
+             <hr>
+    <!-- Start of related posts -->
+
+          <strong>Related Posts</strong><br><br>
+          <div class="relatedposts">
+          <img src="/Users/jeremyking/RR-JS-CSS-Convert-Mock/Images/code.jpeg" alt="..." class="img-thumbnail">
+          <img src="/Users/jeremyking/RR-JS-CSS-Convert-Mock/Images/GreenCode.jpeg" alt="..." class="img-thumbnail">
+          <img src="/Users/jeremyking/RR-JS-CSS-Convert-Mock/Images/download.jpeg" alt="..." class="img-thumbnail">
+          <img src="/Users/jeremyking/RR-JS-CSS-Convert-Mock/Images/Hammrabi.jpeg" alt="..." class="img-thumbnail">
+        </div>
+        <hr>
+        <!-- Start of responses -->
+
+        <strong>2 Responses to "Ridiculus Mattem"</strong>
+        <br><br>
+        <div class="responsebox">
+        <img src="/Users/jeremyking/RR-JS-CSS-Convert-Mock/Images/batman.png" alt="..." class="img-thumbnail" id="batman">
+        <div class="response"><strong>Not Batman</strong><br>
+          Nullam at lacinia lectus. Sed porttitor tempor felis, a dapibus turpis. Aenean tristique semper laoreet. Donec magna nisi, hendrerit
+        </div>
+      </div><br>
+      <div class="responsebox">
+        <img src="/Users/jeremyking/RR-JS-CSS-Convert-Mock/Images/gearhead.png" alt="..." class="img-thumbnail" id="batman">
+        <div class="response"><strong>Top Hat Guy</strong><br>
+          Nullam at lacinia lectus. Sed porttitor tempor felis, a dapibus turpis. Aenean tristique semper laoreet. Donec magna nisi, hendrerit
+        </div>
+      </div>
+        <hr>
+
+
+        <!-- Start of comment form -->
+
+         <strong>Submit a comment:</strong>
+         <br>
+         <small>Your email address will not be published. Required fields are marked with a * </small><br><br>
+
+         <input type="text" class="form-control" id="name" name="name" placeholder="Name*"><br><br>
+         <input type="text" class="form-control" id="email" name="email" placeholder="E-mail*"><br><br>
+         <input type="text" class="form-control" id="website" name="website" placeholder="Website"><br><br>
+         <input type="text" class="form-control" id="comment" name="comment">
+        </div>
+
+
+      <!-- Start of side column -->
+          <div class="col">
+            <h3>Popular Posts</h3>
+            <img src="/Users/jeremyking/RR-JS-CSS-Convert-Mock/Images/code.jpeg" alt="..." class="img-thumbnail">
+            <img src="/Users/jeremyking/RR-JS-CSS-Convert-Mock/Images/download.jpeg" alt="..." class="img-thumbnail">
+            <img src="/Users/jeremyking/RR-JS-CSS-Convert-Mock/Images/Hammrabi.jpeg" alt="..." class="img-thumbnail">
+            <hr>
+            <label for="search">Search</label>
+            <input type="text">
+            <hr>
+            <bold>Custom Text</bold>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <br>
+              Lorem ipsum dolor sit amet.</p>
+          </div>
+        </div>
+      </div>
+
+
+    <!-- Bottom of page -->
+    <div class="row bottom">
+      <div class="col-left">
+        <h3>Popular Posts</h3>
+        <p>I love this website!<br>
+          <small>from May 15, 1953</small></p><hr>
+          <p>This website is amazing for blogs<br>
+          <small>from February 30, 2025</small></p><hr>
+          <p>I like blogging so this is perfect!<br>
+          <small>from March 1992 </small></p><hr>
+   </div>
+   <div class="col">
+     <h3>Twitter</h3>
+     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. -<a href="#">21 hours ago</a><hr>
+      Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. -<a href="#">19 hours ago</a><hr>
+      Ut enim ad minim veniam, quis nostrud, ut enim ad minim veniam, quis nostrud. -<a href="#">17 seconds ago</a><hr>
+    </p>               
+   </div>
+   <div class="col">
+    <strong>A LITTLE ABOUT ME </strong>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. <br><br>
+      Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+   </div>
+   <div class="col">
+
+       <!-- Start of form -->
+       <form>
+             <div class="form-group">
+                     <label for="exampleInputEmail1">Email address</label>
+                     <input type="email" class="form-control" id="message" aria-describedby="emailHelp">
+                     <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
+              </div>
+              <div class="form-group mb-5">
+                     <label for="subject">Subject</label>
+                     <input type="text" class="form-control" id="message">
+              </div>
+              <div class="form-group mb-5" style="margin-right: 10%">
+                   <label for="message">Reason for contacting</label>
+                     <input type="text" class="form-control" id="message">
+              </div>
+               <button type="submit" class="btn btn-primary">Submit</button>
+       </form>
+                 <!-- End of form -->
+          </div>
+         </div>
+       </div>
+      </div>
+       </footer>
+       <div class="bottom-footer">&#169; Jkoros 2011
+        <div class="bottom-footer__social">
+          <a href="#" class="fa fa-rss"></a>
+          <a href="#" class="fa fa-facebook"></a>
+          <a href="#" class="fa fa-twitter"></a>
+          <a href="#" class="fa fa-linkedin"></a>
+          <a href="#" class="fa fa-reddit"></a>
+          <a href="#" class="fa fa-flickr"></a>
+        </div>
+        </div>
+
+   <!-- End of footer -->
+
+
+
+</body>
+</html>