Basic files added

GDGJIITNOIDA · Sep 15, 2017 · ec22221 · ec22221
1 parent f1dccd3
commit ec22221
Show file tree

Hide file tree

Showing 26 changed files with 523 additions and 0 deletions.
diff --git a/basic/day 2/References Day 2.txt b/basic/day 2/References Day 2.txt
@@ -0,0 +1,8 @@
+CSS Overflow Property : 
+https://developer.mozilla.org/en-US/docs/Web/CSS/overflow
+
+Margin Collapsing : 
+https://magnusbenoni.com/collapsing-margins-css/
+
+CSS Display property Reference :
+https://developer.mozilla.org/en-US/docs/Web/CSS/display
diff --git a/basic/day 2/index.css b/basic/day 2/index.css
@@ -0,0 +1,132 @@
+body {
+  margin: 0;
+}
+
+nav{
+  display: flex;
+  position: fixed;
+  height: 100px;
+  width: 100%;
+  background-color: rgb(59, 89, 152);
+}
+
+#logo{
+  margin-top: 20px;
+  margin-left: 80px;
+  height: 80px;
+  width: 700px;
+  background-image: url("webimages/facebook-logo.jpg");
+  background-size: contain;
+  background-repeat: no-repeat;
+}
+
+nav ul{
+  display: flex;
+  height: 100px;
+  width: 700px;
+  margin-left: 300px;
+  margin-top: 50px;
+}
+
+nav ul li{
+  margin-left: 50px;
+  display: inline;
+}
+
+nav ul li a{
+  color: white;
+  text-decoration: none;
+}
+
+#major-part{
+  display: flex; /* only to fix margin collapsing, can use overflow : hidden or display : inline-block too */
+  height: 700px;
+  width : 100%;
+  background-color: rgb(237, 240, 245);
+}
+
+.sign-up-form{
+  margin-top: 100px;
+  height: 600px;
+  width: 500px;
+}
+
+.photos-collection{
+  margin-top: 100px;
+  height: 600px;
+  width: 700px;
+}
+
+.picture-box{
+  display: inline-block;
+  margin-top: 40px;
+  margin-left: 80px;
+  margin-right: 10px;
+  height: 200px;
+  width: 200px;
+  box-shadow: 5px 5px 5px #888888; /* x-axis y-axis z-axis color*/
+}
+
+#user1{
+  display: flex;
+  height: 200px; /* height, width inherit*/
+  width: 200px;
+  background-image: url("webimages/user1.jpeg");
+  background-size: cover;
+  background-repeat: no-repeat;
+}
+
+#user1:hover .profile-name{
+  visibility: visible;
+}
+
+#user2{
+  display: flex;
+  height: 200px;
+  width: 200px;
+  background-image: url("webimages/user3.jpg");
+  background-size: cover;
+}
+
+#user2:hover .profile-name{
+  visibility: visible;
+}
+
+#user3{
+  display: flex;
+  height: 200px;
+  width: 200px;
+  background-image: url("webimages/user4.jpg");
+  background-size: cover;
+}
+
+#user3:hover .profile-name{
+  visibility: visible;
+}
+
+#user4{
+  display: flex;
+  height: 200px;
+  width: 200px;
+  background-image: url("webimages/user5.jpg");
+  background-size: cover;
+}
+
+#user4:hover .profile-name{
+  visibility: visible;
+}
+
+.profile-name{
+  box-shadow: 5px 5px 5px #888888;
+  visibility: hidden;
+  margin-top: 150px;
+  height: 50px;
+  width: inherit;
+  background-color: white;
+}
+
+.profile-name-written{
+  /*margin-left: 80px;*/
+  text-align: center;
+  font-family: cursive;
+}
diff --git a/basic/day 2/index.html b/basic/day 2/index.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html> <!-- <html lang="en-US">-->
+  <head>
+    <meta charset="utf-8">
+    <title>Facebook Home Page</title>
+    <link rel="stylesheet" type="text/css" href="index.css">
+    <link rel="icon" href="webimages/fb.png" sizes="16x16" type="image/png">
+  </head>
+  <body>
+    <nav>
+			<div id="logo"></div>
+			<div id ="ulwrapper">
+			<ul>
+				<li><a href="index.html">Home</a></li>
+				<li><a href="index.html">About</a></li>
+				<li><a href="index.html">Team</a></li>
+				<li><a href="index.html">Gallery</a></li>
+				<li><a href="#bottom">Contact Us</a></li>
+			</ul>
+			</div>
+		</nav>
+    <div id="major-part">
+    <div class="photos-collection">
+      <div class="picture-box">
+        <div id="user1">
+          <div class="profile-name"><p class="profile-name-written">Mark</div> <!--span-->
+        </div>
+      </div>
+      <div class="picture-box">
+        <div id="user2">
+          <div class="profile-name"><p class="profile-name-written">Jon</div>
+        </div>
+      </div>
+      <div class="picture-box">
+        <div id="user3">
+          <div class="profile-name"><p class="profile-name-written">Rahul</div>
+        </div>
+      </div>
+      <div class="picture-box">
+        <div id="user4">
+            <div class="profile-name"><p class="profile-name-written">Gal</div>
+          </div>
+        </div>
+      </div>
+    <section class="sign-up-form">
+    </section>
+    </div>
+    <a name="bottom"></a>
+    </body>
+  </html>
diff --git a/basic/day 2/webimages/facebook-logo.jpg b/basic/day 2/webimages/facebook-logo.jpg
diff --git a/basic/day 2/webimages/fb.png b/basic/day 2/webimages/fb.png
diff --git a/basic/day 2/webimages/insta.png b/basic/day 2/webimages/insta.png
diff --git a/basic/day 2/webimages/link.png b/basic/day 2/webimages/link.png
diff --git a/basic/day 2/webimages/twi.png b/basic/day 2/webimages/twi.png
diff --git a/basic/day 2/webimages/user1.jpeg b/basic/day 2/webimages/user1.jpeg
diff --git a/basic/day 2/webimages/user2.jpg b/basic/day 2/webimages/user2.jpg
diff --git a/basic/day 2/webimages/user3.jpg b/basic/day 2/webimages/user3.jpg
diff --git a/basic/day 2/webimages/user4.jpg b/basic/day 2/webimages/user4.jpg
diff --git a/basic/day 2/webimages/user5.jpg b/basic/day 2/webimages/user5.jpg
diff --git a/basic/day 3/References Day 3.txt b/basic/day 3/References Day 3.txt
@@ -0,0 +1,6 @@
+Web Development References : 
+MDN : https://developer.mozilla.org/
+W3SCHOOLS : https://www.w3schools.com/
+
+CSS Flexbox References :
+https://css-tricks.com/snippets/css/a-guide-to-flexbox/