Initial commit

CSS/style.css

+body{
+font:15px/1.5 Arial,helvetica,sans-serif;
+padding: 0;
+margin: 0;
+background-color: #f4f4f4;
+}
+/*Global */
+.container{
+  width:80%;
+  margin: auto;
+  overflow: hidden;
+}
+ul{
+  margin: 0;
+  padding: 0;
+}
+.button_1{
+  height: 38px;
+  background: #e8491d;
+  border: 0;
+  padding-left: 20px;
+  padding-right: 20px;
+  margin-right: 400px;
+  color: #ffffff;
+}
+.dark{
+  padding: 15px;
+  background: #35424a;
+  color: #ffffff;
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+/*header **/
+header{
+  background: #35424a;
+  color: #ffffff;
+padding-top: 30px;
+min-height: 70px;
+border-bottom: #e8491d 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:#e8491d !important;
+  font-weight: bold;
+}
+
+header a:hover{
+  color: #cccccc;
+  font-weight: bold;
+
+}
+
+/*showcase*/
+#showcase{
+  min-height: 400px;
+  background:url('../Images/showcase.jpg'), no-repeat,0 200px;
+text-align: center;
+color: #ffffff;
+}
+#showcase h1{
+  margin top: 100px;
+  font-size: 55px;
+  margin-bottom: 18px;
+}
+#showcase p{
+  font-size: 20px;
+}
+/* Newsletter*/
+#newsletter p{
+  padding: 15px;
+  color: #ffffff;
+  background:#35424a;
+}
+#newsletter h1{
+  float: left;
+}
+#newsletter form{
+  float: right;
+  margin-top: 15px;
+
+}
+#newsletter input[type="email"]{
+  padding: 4px;
+  height: 25px;
+  width: 250px
+}
+/* Boxes */
+#boxes{
+  margin-top: 20px;
+  }
+
+  #boxes .box{
+    float: left;
+    text-align: center;
+    width: 30%;
+    padding: 10px;
+    }
+    #Boxes .box img {
+      width: 90px;
+      }
+      /* Sidebar*/
+      aside#sidebar{
+        float:right;
+        width: 30%;
+        margin-top: 10px;
+      }
+      aside#sidebar .quote input, aside#sidebar .quote textarea{
+        width:90%;
+        padding:5px;
+      }
+      /* Main-col */
+      article#main-col{
+        float: left;
+        width: 65%;
+
+      }
+      /* Services*/
+      ul#services li{
+        list-style: none;
+        padding: 20px;
+        border: #cccccc solid 1px;
+        margin-bottom: 5px;
+        background:#e6e6e6;
+      }
+
+      footer{
+        padding: 20px;
+        margin-top: 20px;
+        color: #ffffff;
+        background-color: #e8491d;
+        text-align: center;
+      }
+/*login **/
+
+.login-page {
+  width: 60%;
+  padding: 7% 0 0;
+  margin: auto;
+}
+.form {
+  position: relative;
+  z-index: 1;
+  background: #FFFFFF;
+  max-width: 360px;
+  margin: 0 auto 100px;
+  padding: 45px;
+  text-align: center;
+  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
+}
+.form input {
+  font-family: "Roboto", sans-serif;
+  outline: 0;
+  background: #f2f2f2;
+  width: 100%;
+  border: 0;
+  margin: 0 0 15px;
+  padding: 15px;
+  box-sizing: border-box;
+  font-size: 14px;
+}
+.form button {
+  font-family: "Roboto", sans-serif;
+  text-transform: uppercase;
+  outline: 0;
+  background: #e8491d;
+  width: 100%;
+  border: 0;
+  padding: 15px;
+  color: #FFFFFF;
+  font-size: 14px;
+  -webkit-transition: all 0.3 ease;
+  transition: all 0.3 ease;
+  cursor: pointer;
+}
+.form button:hover,.form button:active,.form button:focus {
+  background: #cccccc;
+}
+.form .message {
+  margin: 15px 0 0;
+  color: #b3b3b3;
+  font-size: 12px;
+}
+.form .message a {
+  color: #e8491d;
+  text-decoration: none;
+}
+.form  {
+  border-top: 20px;
+}
+/*signup **/
+.signup{
+  padding-top: 7%;
+}

Images/csscrashcourse/csscheatsheet/css/style.css

+/*
+*{
+	margin:0;
+	padding:0;
+}
+*/
+
+body{
+	background-color:#f4f4f4;
+	color:#555555;
+
+	font-family: Arial, Helvetica, sans-serif;
+	font-size:16px;
+	font-weight:normal;
+	/* Same as above */
+	font: normal 16px Arial, Helvetica, sans-serif;
+
+	line-height:1.6em;
+	margin:0;
+}
+
+a{
+	text-decoration: none;
+	color:#000;
+}
+
+a:hover{
+	color:red;
+}
+
+a:active{
+	color:green;
+}
+
+a:visited{
+	
+}
+
+.container{
+	width:80%;
+	margin:auto;
+}
+
+.button{
+	background-color:#333;
+	color:#fff;
+	padding:10px 15px;
+	border:none;
+}
+
+.button:hover{
+	background:red;
+	color:#fff;
+}
+
+.clr{
+	clear:both;
+}
+
+.box-1{
+	background-color:#333;
+	color:#fff;
+
+	border-right:5px red solid;
+	border-left:5px red solid;
+	border-top:5px red solid;
+	border-bottom:5px red solid;
+	border-width:3px;
+	border-bottom-width:10px;
+	border-top-style:dotted;
+
+	border: 5px red solid;
+
+	padding-top:20px;
+	padding-bottom:20px;
+	padding-right:20px;
+	padding-left:20px;
+
+	/* Same as above */
+	padding:20px;
+
+	margin-top:20px;
+	margin:20px 0;
+}
+
+.box-1 h1{
+	font-family:Tahoma;
+	font-weight:800;
+	font-style:italic;
+	text-decoration:underline;
+	text-transform:uppercase;
+	letter-spacing: 0.2em;
+	word-spacing: 1em;
+}
+
+.box-2{
+	border:3px dotted #ccc;
+	padding:20px;
+	margin:20px 0;
+}
+
+.categories{
+	border:1px #ccc solid;
+	padding:10px;
+	border-radius:15px;
+}
+
+.categories h2{
+	text-align:center;
+}
+
+.categories ul{
+	padding:0;
+	padding-left:20px;
+	list-style:square;
+	list-style:none;
+}
+
+.categories li{
+	padding-bottom:6px;
+	border-bottom:dotted 1px #333;
+	list-style-image: url('../images/check.png');
+}
+
+.my-form{
+	padding:20px;
+}
+
+.my-form .form-group{
+	padding-bottom:15px;
+}
+
+.my-form label{
+	display:block;
+}
+
+.my-form input[type="text"], .my-form textarea{
+	padding:8px;
+	width:100%;
+}
+
+.block{
+	float:left;
+	width:33.3%;
+	border:1px solid #ccc;
+	padding:10px;
+	box-sizing:border-box;
+}
+
+#main-block{
+	float:left;
+	width:70%;
+	padding:15px;
+	box-sizing: border-box;
+}
+
+#sidebar{
+	float:right;
+	width:30%;
+	background-color:#333;
+	color:#fff;
+	padding:15px;
+	box-sizing: border-box;
+}
+
+.p-box{
+	width:800px;
+	height:500px;
+	border:1px solid #000;
+	margin-top:30px;
+	position:relative;
+	background-image:url('../images/bgimage.jpg');
+	background-repeat: no-repeat;
+	background-position:100px 200px;
+	background-position:center top;
+}
+
+.p-box h1{
+	position:absolute;
+	top:100px;
+	left:200px;
+}
+
+.p-box h2{
+	position:absolute;
+	bottom:40px;
+	right:100px;
+}
+
+.fix-me{
+	position:fixed;
+	top:400px;
+}
+
+.my-list li:first-child{
+	background: red;
+}
+
+.my-list li:last-child{
+	background: blue;
+}
+
+.my-list li:nth-child(5){
+	background: yellow;
+}
+
+.my-list li:nth-child(even){
+	background: grey;
+}
+

Images/csscrashcourse/csscheatsheet/index.html

+<!DOCTYPE html>
+<html>
+<head>
+	<title>CSS Cheat Sheet</title>
+	<link rel="stylesheet" type="text/css" href="css/style.css">
+</head>
+<body>
+	<div class="container">
+		<div class="box-1">
+			<h1>Hello World</h1>
+			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+			tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+			quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+			consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+			cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+			proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+		</div>
+
+		<div class="box-2">
+			<h1>Goodbye World</h1>
+			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+			tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+			quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+			consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+			cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+			proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+			<a class="button" href="">Read More</a>
+		</div>
+
+		<div class="categories">
+			<h2>Categories</h2>
+			<ul>
+				<li><a href="#">Category 1</a></li>
+				<li><a href="#">Category 2</a></li>
+				<li><a href="#">Category 3</a></li>
+				<li><a href="#">Category 4</a></li>
+				<li><a href="test.html">Category 5</a></li>
+			</ul>
+		</div>
+
+		<form class="my-form">
+			<div class="form-group">
+				<label>Name: </label>
+				<input type="text" name="name">
+			</div>
+			<div class="form-group">
+				<label>Email: </label>
+				<input type="text" name="email">
+			</div>
+			<div class="form-group">
+				<label>Message: </label>
+				<textarea name="message"></textarea>
+			</div>
+			<input class="button" type="submit" value="Submit" name="">
+		</form>
+
+		<div class="block">
+			<h3>Heading</h3>
+			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+			tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+			</p>
+		</div>
+		<div class="block">
+			<h3>Heading</h3>
+			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+			tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+			</p>
+		</div>
+		<div class="block">
+			<h3>Heading</h3>
+			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+			tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+			</p>
+		</div>
+
+		<div class="clr"></div>
+
+		<div id="main-block">
+			<h3>Heading</h3>
+			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+			tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+			</p>
+		</div>
+
+		<div id="sidebar">
+			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+			tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+			</p>
+		</div>
+
+		<div class="clr"></div>
+
+		<div class="p-box">
+			<h1>Hello</h1>
+			<h2>Goodbye</h2>
+		</div>
+
+		<ul class="my-list">
+			<li>List Item</li>
+			<li>List Item</li>
+			<li>List Item</li>
+			<li>List Item</li>
+			<li>List Item</li>
+			<li>List Item</li>
+			<li>List Item</li>
+			<li>List Item</li>
+			<li>List Item</li>
+			<li>List Item</li>
+			<li>List Item</li>
+			<li>List Item</li>
+		</ul>
+	</div><!-- ./container -->
+
+	<a class="fix-me button" href="">Hello</a>
+
+	<div style="margin-top:500px;"></div>
+</body>
+</html>
\ No newline at end of file

Images/csscrashcourse/mywebsite/css/style.css

+body{
+	background-color:#f4f4f4;
+	color:#555;
+	font-family:Arial, Helvetica, sans-serif;
+	font-size:16px;
+	line-height:1.6em;
+	margin:0;
+}
+
+.container{
+	width:80%;
+	margin:auto;
+	overflow:hidden;
+}
+
+#main-header{
+	background-color:coral;
+	color:#fff;
+}
+
+#navbar{
+	background-color:#333;
+	color:#fff;
+}
+
+#navbar ul{
+	padding:0;
+	list-style: none;
+}
+
+#navbar li{
+	display:inline;
+}
+
+#navbar a{
+	color:#fff;
+	text-decoration: none;
+	font-size:18px;
+	padding-right:15px;
+}
+
+#showcase{
+	background-image:url('../images/showcase.jpg');
+	background-position:center right;
+	min-height:300px;
+	margin-bottom:30px;
+	text-align: center;
+}
+
+#showcase h1{
+	color:#fff;
+	font-size:50px;
+	line-height: 1.6em;
+	padding-top:30px;
+}
+
+#main{
+	float:left;
+	width:70%;
+	padding:0 30px;
+	box-sizing: border-box;
+}
+
+#sidebar{
+	float:right;
+	width:30%;
+	background: #333;
+	color:#fff;
+	padding:10px;
+	box-sizing: border-box;
+}
+
+#main-footer{
+	background: #333;
+	color:#fff;
+	text-align: center;
+	padding:20px;
+	margin-top:40px;
+}
+
+@media(max-width:600px){
+	#main{
+		width:100%;
+		float:none;
+	}
+
+	#sidebar{
+		width:100%;
+		float:none;
+	}
+}
\ No newline at end of file

Images/csscrashcourse/mywebsite/index.html

+<!DOCTYPE html>
+<html>
+<head>
+	<title>My Website</title>
+	<link rel="stylesheet" type="text/css" href="css/style.css">
+</head>
+<body>
+	<header id="main-header">
+		<div class="container">
+			<h1>My Website</h1>
+		</div>
+	</header>
+
+	<nav id="navbar">
+		<div class="container">
+			<ul>
+				<li><a href="#">Home</a></li>
+				<li><a href="#">About</a></li>
+				<li><a href="#">Services</a></li>
+				<li><a href="#">Contact</a></li>
+			</ul>
+		</div>
+	</nav>
+
+	<section id="showcase">
+		<div class="container">
+			<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+			</h1>
+		</div>
+	</section>
+
+	<div class="container">
+		<section id="main">
+			<h1>Welcome</h1>
+			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+			tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+			quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+			consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+			cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+			proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+		</section>
+		<aside id="sidebar">
+			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+			tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+			quis nostrud </p>
+		</aside>
+	</div>
+
+	<footer id="main-footer">
+		<p>Copyright &copy; 2017 My Website</p>
+	</footer>
+</body>
+</html>
\ No newline at end of file

Read it.txt

+the website is almost done ....but if you want to make it compatible to mobile devices then add the following 
+codes at the end of footer in style.css
+/* Media Queries */
+@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, quote button{
+display:block;
+width:100%
+}
+#newsletter form input[type="email"], .quote input, quote textarea{
+width:100%
+margin-bottom:5px;
+
+}
+}
\ No newline at end of file

about.html

+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width-device-width">
+    <meta name="description" content="Articles and Published Blogs">
+    <meta name="keywords" content="web design, fitness , meditation , professional, others">
+    <meta name="author" content="Saif Ali">
+    <title>Blogs| About</title>
+    <link rel="stylesheet" href="./css/style.css">
+  </head>
+  <body>
+<header>
+  <div class="container">
+    <div id="branding">
+      <h1><span class="highlight">Articles</span> and Blogs</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
+          <li><a href="login.html">Login</a></li>
+        </ul>
+      </nav>
+    </div>
+</header>
+
+
+      <section id="newsletter">
+        <div class="container">
+          <h1>Subscribe to our Blogs</h1>
+          <form>
+            <input type="email" placeholder="Enter Username....">
+            <button type="submit" class="button_1">Subscribe</button>
+          </form>
+
+        </div>
+
+    </section>
+
+    <section id="main">
+<div class="container">
+  <article id="main-col">
+    <h1 class="page-title">About Us</h1>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquet, enim tincidunt tristique lacinia, ex sapien ultrices nulla, nec rhoncus sem sapien ac risus. Sed dignissim est quis mi molestie mattis. Integer sollicitudin pellentesque lorem, id sollicitudin arcu dapibus vitae. Pellentesque sit amet dolor sed odio euismod ultrices vel in diam. Nullam euismod lectus non ex auctor pulvinar. Praesent a lorem pharetra, vestibulum lacus in, luctus diam. Mauris nibh odio, mollis in tincidunt ac, lobortis quis mi. Pellentesque vestibulum venenatis felis eu condimentum. Praesent enim nulla, eleifend sit amet mauris in, luctus aliquet dolor. Nullam vulputate mattis imperdiet. Vestibulum augue nisi, aliquet in lectus sit amet, tincidunt tempus diam. Vivamus ac magna nunc. Sed sit amet pellentesque risus. Mauris sodales in eros mattis egestas.
+</p>
+<p class="dark">
+Pellentesque est tortor, tempus quis erat sit amet, dictum interdum arcu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce fermentum interdum venenatis. Etiam ac nisi libero. Suspendisse est magna, vulputate eu efficitur sit amet, ullamcorper vitae ex. Donec hendrerit eros nunc, sed vulputate leo pellentesque sed. Vestibulum rutrum bibendum lacus sit amet dictum. Proin eget lorem vel felis feugiat accumsan. Nam et lobortis velit.
+</p>
+
+
+  </article>
+  <aside id="sidebar">
+<div class="dark">
+<h3>What We Do</h3>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquet, enim tincidunt tristique lacinia, ex sapien ultrices nulla, nec rhoncus .
+    </p>
+    </div>
+  </aside>
+        </div>
+
+    </section>
+
+<footer>
+  <p>Tech-Science Blog, Copyright &copy; 2019</p>
+</footer>
+
+
+
+  </body>
+</html>