first commit

KartikRaut29 · Jun 25, 2017 · 38d71a1 · 38d71a1
commit 38d71a1
Show file tree

Hide file tree

Showing 14 changed files with 3,103 additions and 0 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/README.md b/README.md
@@ -0,0 +1,8 @@
+# Build A Real-World HTML5 & CSS3 Responsive Website From Scratch
+
+## Sample Application
+
+This is the sample app of the tutorial __Build A Real-World HTML5 & CSS3 Responsive Website From Scratch__ available on [CodingTheSmartWay.com](http://codingthesmartway.com/).
+
+## Online Course
+Check out the online course: [The Web Developer Bootcamp ](http://codingthesmartway.com/courses/web-developer-bootcamp/)
diff --git a/about.html b/about.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width">
+    <meta name="description" content="Affordable Web Design For Small And Medium-Sized Companies">
+    <meta name="author" content="Sebastian Eschweiler">
+    <title>1-2-3 Web Design - About</title>
+    <link rel="stylesheet" href="./css/style.css">
+    <link rel="stylesheet" href="./css/font-awesome.min.css">
+  </head>
+  <body>
+    <header>
+      <div class="container">
+        <div id="branding">
+          <h1><i class="fa fa-rocket"></i> <span class="highlight">1-2-3</span> Web Design</h1>
+        </div>
+        <nav>
+          <ul>
+            <li><a href="index.html">Home</a></li>
+            <li  class="current"><a href="about.html">About</a></li>
+            <li><a href="services.html">Services</a></li>
+          </ul>
+        </nav>
+      </div>
+    </header>
+
+    <section class="main">
+      <div class="container">
+        <article id="main-col">
+          <h1 class="page-title">
+            About Us
+          </h1>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit ea, officiis consectetur, aspernatur tenetur quaerat ipsam minus vitae repellendus ipsa maiores numquam sint quae fugit tempora quo cumque ratione quisquam.
+          </p>
+          <p class="dark">
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo natus dolorem debitis commodi suscipit esse obcaecati, dolor autem consequuntur, dolores veritatis atque iste porro possimus quas mollitia non, dignissimos, labore.
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis harum tenetur maxime, sit quis aut. Quas accusamus, ab ipsa illo esse laborum quam itaque voluptatibus! Debitis doloremque, sint eligendi possimus.
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae maiores et vero, itaque praesentium maxime eos unde repudiandae similique commodi facere repellat amet totam! Ab cumque voluptatum quidem fugiat, similique!
+          </p>
+        </article>
+        <aside id="sidebar">
+          <div class="dark">
+            <h3><i class="fa fa-users"></i> The Team</h3>
+            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi laborum fugit itaque iste facilis nesciunt, libero esse adipisci quos nihil vero enim deleniti cupiditate? Repudiandae adipisci dolorem velit nemo maiores.</p>
+          </div>
+        </aside>
+      </div>
+    </section>
+    <footer>
+      <p>1-2-3 Web Design, Copyright &copy; 2017</p>
+    </footer>
+  </body>
+</html>
diff --git a/css/font-awesome.min.css b/css/font-awesome.min.css
diff --git a/css/style.css b/css/style.css
@@ -0,0 +1,207 @@
+body {
+  font: 15px/1.5 Arial, Helvetica, sans-serif;
+  padding: 0;
+  margin: 0;
+  background-color: #f4f4f4;
+}
+
+.container{
+  width: 80%;
+  margin: auto;
+  overflow: hidden;
+}
+
+.dark{
+  padding: 15px;
+  background: #35424a;
+  color: #ffffff;
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+
+ul{
+  margin: 0;
+  padding: 0;
+}
+
+/* Header */
+
+header{
+  background: #353637;
+  color: #ffffff;
+  padding-top: 30px;
+  min-height: 70px;
+  border-bottom: #32a0c2 3px solid;
+}
+
+header a{
+  color: #ffffff;
+  text-decoration: none;
+  text-transform: uppercase;
+  font-size: 16px;
+}
+
+header li{
+  float: left;
+  display: inline;
+  padding: 0 20px 0 20px;
+}
+
+header #branding {
+  float: left;
+}
+
+header #branding h1{
+  margin: 0;
+}
+
+header nav{
+  float: right;
+  margin-top: 10px;
+}
+
+header .highlight, header .current a {
+  color: #32a0c2;
+  font-weight: bold;
+}
+
+header a:hover{
+  color: #cccccc;
+  font-weight: bold;
+}
+
+/* Showcase */
+
+#showcase {
+  min-height: 400px;
+  background:url('../img/headerbg.jpg') no-repeat center;
+  background-size: cover;
+  text-align: center;
+  color: #ffffff;
+}
+
+#showcase h1{
+  margin-top: 100px;
+  font-size: 55px;
+  margin-bottom: 10px;
+}
+
+#showcase p{
+  font-size: 20px;
+}
+
+/* Newsletter */
+#newsletter {
+  padding: 15px;
+  color: #ffffff;
+  background: #353637;
+}
+
+#newsletter h1{
+  float: left;
+}
+
+#newsletter form {
+  float: right;
+  margin-top: 15px;
+}
+
+#newsletter input[type="email"]{
+  padding: 4px;
+  height: 25px;
+  width: 250px;
+}
+
+.button_1{
+  height: 38px;
+  background: #cccccc;
+  border: 0;
+  padding-left: 20px;
+  padding-right: 20px;
+  color: #353637;
+}
+
+#boxes{
+  margin-top: 20px;
+}
+
+#boxes .box{
+  float:left;
+  text-align: center;
+  width: 30%;
+  padding: 10px;
+}
+
+footer{
+  padding: 20px;
+  margin-top: 20px;
+  color: #ffffff;
+  background-color: #32a0c2;
+  text-align: center;
+}
+
+/* Sidebar */
+aside#sidebar {
+  float: right;
+  width: 30%;
+  padding: 5px;
+}
+
+article#main-col{
+  float: left;
+  width: 65%;
+}
+
+aside#sidebar input, aside#sidebar textarea {
+  width: 90%;
+  padding: 5px;
+}
+
+/* Services */
+ul#services li{
+  list-style: none;
+  padding: 20px;
+  border: #cccccc solid 1px;
+  margin-bottom: 5px;
+  background: #32a0c2;
+}
+
+ul#services h3{
+  border-bottom: #353637 solid 1px;
+}
+
+@media(max-width: 768px){
+  header #branding,
+  header nav,
+  header nav li,
+  #newsletter h1,
+  #newsletter form,
+  #boxes .box,
+  article#main-col,
+  aside#sidebar {
+    float: none;
+    text-align: center;
+    width: 100%;
+  }
+
+  header {
+    padding-bottom: 20px;
+  }
+
+  #showcase h1 {
+    margin-top: 40px;
+  }
+
+  #newsletter button {
+    display: block;
+    width: 100%;
+  }
+
+  #newsletter form input[type="email"],
+  .contact input,
+  .contact textarea,
+  .contact label{
+    width: 100%;
+    margin-bottom: 5px;
+  }
+}
diff --git a/fonts/FontAwesome.otf b/fonts/FontAwesome.otf
diff --git a/fonts/fontawesome-webfont.eot b/fonts/fontawesome-webfont.eot