Add files via upload

hd-show · Oct 9, 2021 · 8d7efb3 · 8d7efb3
1 parent a918fbf
commit 8d7efb3
Show file tree

Hide file tree

Showing 2 changed files with 226 additions and 0 deletions.
diff --git a/module2-solution/css/styles.css b/module2-solution/css/styles.css
@@ -0,0 +1,200 @@
+/********** Base styles **********/
+* {
+  box-sizing: border-box;
+  font-famamily: serif;
+  }
+
+h1{
+  margin-bottom: 15px;
+  text-align: left;
+  color: darkred;
+}
+
+/*paragraph formatting*/
+
+}
+p{
+  width: 100%;
+  padding: 10px;
+
+
+ }
+
+  section {
+    float: right;
+    border-style: solid;
+    background-color: indianred;
+    font-weight: bolder;
+    display: inline-block;
+
+   }
+
+
+#p1 {
+  color: darkred;
+  position: relative;
+  top:0;
+  left: 0;
+  text-align: left;
+
+
+
+
+}
+
+#p2 {
+  color: darkgreen;
+  position: relative;
+  top: 0;
+  left: 0;
+  text-align: left;
+
+
+}
+
+#p3 {
+  color:  blueviolet;
+  position: relative;
+  top: 0;
+  left: 0;
+  text-align: left;
+
+}
+
+/********** desktop view **********/
+@media (min-width: 1200px) {
+  .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
+  float: left;
+  border: 1px solid black;
+  background-color: orange;
+  }
+  .col-lg-1 {
+    width: 8.33%;
+  }
+  .col-lg-2 {
+    width: 16.66%;
+  }
+  .col-lg-3 {
+    width: 25%;
+  }
+  .col-lg-4 {
+    width: 33.33%;
+  }
+  .col-lg-5 {
+    width: 41.66%;
+  }
+  .col-lg-6 {
+    width: 50%;
+  }
+  .col-lg-7 {
+    width: 58.33%;
+  }
+  .col-lg-8 {
+    width: 66.66%;
+  }
+  .col-lg-9 {
+    width: 74.99%;
+  }
+  .col-lg-10 {
+    width: 83.33%;
+  }
+  .col-lg-11 {
+    width: 91.66%;
+  }
+  .col-lg-12 {
+    width: 100%;
+  }
+}
+
+/********** tablet view **********/
+@media (min-width: 950px) and (max-width: 1199px) {
+  .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
+     float: left;
+     border: 1px solid black;
+     background-color: orange;
+
+  }
+  .col-md-1 {
+    width: 8.33%;
+  }
+  .col-md-2 {
+    width: 16.66%;
+  }
+  .col-md-3 {
+    width: 25%;
+  }
+  .col-md-4 {
+    width: 33.33%;
+  }
+  .col-md-5 {
+    width: 41.66%;
+  }
+  .col-md-6 {
+    width: 50%;
+  }
+  .col-md-7 {
+    width: 58.33%;
+  }
+  .col-md-8 {
+    width: 66.66%;
+  }
+  .col-md-9 {
+    width: 74.99%;
+  }
+  .col-md-10 {
+    width: 83.33%;
+  }
+  .col-md-11 {
+    width: 91.66%;
+  }
+  .col-md-12 {
+    width: 100%;
+  }
+}
+
+/********** mobile view **********/
+ @media (min-width: 767px){
+  .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
+     float: left;
+     border: 1px solid black;
+     background-color: orange;
+
+  }
+  .col-sm-1 {
+    width: 8.33%;
+  }
+  .col-sm-2 {
+    width: 16.66%;
+  }
+  .col-sm-3 {
+    width: 25%;
+  }
+  .col-sm-4 {
+    width: 33.33%;
+  }
+  .col-sm-5 {
+    width: 41.66%;
+  }
+  .col-sm-6 {
+    width: 50%;
+  }
+  .col-sm-7 {
+    width: 58.33%;
+  }
+  .col-sm-8 {
+    width: 66.66%;
+  }
+  .col-sm-9 {
+    width: 74.99%;
+  }
+  .col-sm-10 {
+    width: 83.33%;
+  }
+  .col-sm-11 {
+    width: 91.66%;
+  }
+  .col-sm-12 {
+    width: 100%;
+  }
+}
+
diff --git a/module2-solution/index.html b/module2-solution/index.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>Assignment 2</title>
+  <link rel= "stylesheet" type= "text/css" href="css/styles.css">
+
+
+<h1>Assignment 2</h1>
+
+<body>
+
+<div class="row">
+   <div class="col-lg-3 col-md-6 col-sm-9"> <section>Section 1:</section><p id="p1"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia distinctio aliquid cupiditate perferendis fuga, sit quasi alias vero sunt non, ratione earum dolores nihil! Consequuntur pariatur totam incidunt soluta expedita.</p></div>
+
+   <div class="col-lg-3 col-md-6 col-sm-9">
+    <section>Section 2:</section>
+    <p id="p2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia distinctio aliquid cupiditate perferendis fuga, sit quasi alias vero sunt non, ratione earum dolores nihil! Consequuntur pariatur totam incidunt soluta expedita.</p></div>
+
+   <div class="col-lg-3 col-md-6 col-sm-9">
+    <section>Section 3:</section>
+    <p id="p3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia distinctio aliquid cupiditate perferendis fuga, sit quasi alias vero sunt non, ratione earum dolores nihil! Consequuntur pariatur totam incidunt soluta expedita.</p></div>
+  </div>
+</body>
+</html>