diff --git a/basic/day 2/References Day 2.txt b/basic/day 2/References Day 2.txt new file mode 100644 index 0000000..8041bca --- /dev/null +++ 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 new file mode 100644 index 0000000..528d724 --- /dev/null +++ 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 new file mode 100644 index 0000000..91f4872 --- /dev/null +++ b/basic/day 2/index.html @@ -0,0 +1,50 @@ + + + + + Facebook Home Page + + + + + +
+
+
+
+

Mark

+
+
+
+
+

Jon

+
+
+
+
+

Rahul

+
+
+
+
+

Gal

+
+
+
+
+
+
+ + + diff --git a/basic/day 2/webimages/facebook-logo.jpg b/basic/day 2/webimages/facebook-logo.jpg new file mode 100644 index 0000000..0aa6376 Binary files /dev/null and b/basic/day 2/webimages/facebook-logo.jpg differ diff --git a/basic/day 2/webimages/fb.png b/basic/day 2/webimages/fb.png new file mode 100644 index 0000000..ebb67f2 Binary files /dev/null and b/basic/day 2/webimages/fb.png differ diff --git a/basic/day 2/webimages/insta.png b/basic/day 2/webimages/insta.png new file mode 100644 index 0000000..cb0beb6 Binary files /dev/null and b/basic/day 2/webimages/insta.png differ diff --git a/basic/day 2/webimages/link.png b/basic/day 2/webimages/link.png new file mode 100644 index 0000000..f3e5d18 Binary files /dev/null and b/basic/day 2/webimages/link.png differ diff --git a/basic/day 2/webimages/twi.png b/basic/day 2/webimages/twi.png new file mode 100644 index 0000000..7716008 Binary files /dev/null and b/basic/day 2/webimages/twi.png differ diff --git a/basic/day 2/webimages/user1.jpeg b/basic/day 2/webimages/user1.jpeg new file mode 100644 index 0000000..51d9a46 Binary files /dev/null and b/basic/day 2/webimages/user1.jpeg differ diff --git a/basic/day 2/webimages/user2.jpg b/basic/day 2/webimages/user2.jpg new file mode 100644 index 0000000..e973652 Binary files /dev/null and b/basic/day 2/webimages/user2.jpg differ diff --git a/basic/day 2/webimages/user3.jpg b/basic/day 2/webimages/user3.jpg new file mode 100644 index 0000000..5cfdda7 Binary files /dev/null and b/basic/day 2/webimages/user3.jpg differ diff --git a/basic/day 2/webimages/user4.jpg b/basic/day 2/webimages/user4.jpg new file mode 100644 index 0000000..0c0e8d4 Binary files /dev/null and b/basic/day 2/webimages/user4.jpg differ diff --git a/basic/day 2/webimages/user5.jpg b/basic/day 2/webimages/user5.jpg new file mode 100644 index 0000000..2a07717 Binary files /dev/null and b/basic/day 2/webimages/user5.jpg differ diff --git a/basic/day 3/References Day 3.txt b/basic/day 3/References Day 3.txt new file mode 100644 index 0000000..424880f --- /dev/null +++ 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/ diff --git a/basic/day 3/index.css b/basic/day 3/index.css new file mode 100644 index 0000000..d762915 --- /dev/null +++ b/basic/day 3/index.css @@ -0,0 +1,207 @@ +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: 250px; + 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{ + color: white; + margin-left: 50px; + display: inline; +} + +nav ul li a{ + color: white; + text-decoration: none; /* to remove underline from hyperlinks */ +} + +#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); +} + +.photos-collection{ + margin-top: 100px; + height: 700px; + width: 700px; +} + +.sign-up-form{ + margin-top: 100px; + height: 700px; + width: 500px; +} + +.picture-box{ + display: inline-block; + margin-top: 40px; + margin-left: 80px; + margin-right: 10px; + height: 200px; + width: 200px; + background-color: white; + box-shadow: 5px 5px 5px #888888; /* x-axis y-axis z-axis color*/ +} + +#user1{ + display: flex; + height: 200px; + 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; /*cover : motive is to fill the div, for perfect image fitting use background-size : 100% 100%; */ +} + +#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; /* again to fix margin collapsing occured due to profile-name (child) div */ + 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{ + text-align : center; /*or can do margin-left: 80px;*/ + font-family: cursive; +} + +input{ + height: 40px; + width: 200px; + margin-right: 10px; + margin-top: 10px; + border-color: #bdc7d8; + border-radius: 5px; +} + +::-moz-placeholder{ /* "moz" is used for mozilla firefox, "webkit" for Google Chrome (browser specific) */ + font-size: 18px; + font-family: Helvetica; +} + +#create-account{ + height: 50px; + width: 250px; + background: linear-gradient(#67ae55, #578843); + background-color: #69a74e; + box-shadow: inset 0 1px 1px #a4e388; + border-color: #3b6e22 #3b6e22 #2c5115; + border: 1px solid; + border-radius: 5px; + color: #fff; /* font-family fallback system : whichever font is available out of all mentioned*/ + font-family: 'Freight Sans Bold', Helvetica, Arial, sans-serif !important; /*!important is used to override inline css */ + font-weight: bold; + font-size: 20px; + cursor: pointer; /* cursor changes when hovering on the button*/ + letter-spacing: 1px; + text-shadow: 0 1px 2px rgba(0,0,0,.5); /* x y z color, 'a' in rgba is for opacity*/ +} + +#pageFooter { + background-color: rgb(59, 89, 152); + padding-top: 1.5em; + overflow: hidden; + height: 150px; +} + +#pageFooter a { + display: inline-block; +} + +#pageFooter img { + width: 30px; + height: 30px; +} + +#pageFooter div{ + margin-top: -20px; + margin-left: 100px; + margin-right: 30px; + display: inline-block; + text-align: center; + height: 80px; +} + +#relatedtags{ + height: 70px; + width: 500px; +} + +#relatedtags ul li{ + margin-left: 8px; + margin-right: 8px; + font-size: 15px; + display: inline-block; +} + +#relatedtags ul li a{ + text-decoration: none; + color: white; +} diff --git a/basic/day 3/index.html b/basic/day 3/index.html new file mode 100644 index 0000000..1a636a5 --- /dev/null +++ b/basic/day 3/index.html @@ -0,0 +1,120 @@ + + + + + Facebook Home Page + + + + +
+
+
+
+

Mark

+
+
+
+
+

Jon

+
+
+
+
+

Rahul

+
+
+
+
+

Gal

+
+
+
+
+
+

Sign Up

+

It's free and always will be.

+
+
+ + + + + +

Birthday

+ + + +
+ Female + Male +
+

By clicking Create an account, you agree to our Terms and
+ confirm that you have read our Data Policy, including our Cookie
+ Use Policy. You may receive SMS message notifications from
+ Facebook and can opt out at any time. +

+ +
+
+
+ + + + diff --git a/basic/day 3/webimages/facebook-logo.jpg b/basic/day 3/webimages/facebook-logo.jpg new file mode 100644 index 0000000..0aa6376 Binary files /dev/null and b/basic/day 3/webimages/facebook-logo.jpg differ diff --git a/basic/day 3/webimages/fb.png b/basic/day 3/webimages/fb.png new file mode 100644 index 0000000..ebb67f2 Binary files /dev/null and b/basic/day 3/webimages/fb.png differ diff --git a/basic/day 3/webimages/insta.png b/basic/day 3/webimages/insta.png new file mode 100644 index 0000000..cb0beb6 Binary files /dev/null and b/basic/day 3/webimages/insta.png differ diff --git a/basic/day 3/webimages/link.png b/basic/day 3/webimages/link.png new file mode 100644 index 0000000..f3e5d18 Binary files /dev/null and b/basic/day 3/webimages/link.png differ diff --git a/basic/day 3/webimages/twi.png b/basic/day 3/webimages/twi.png new file mode 100644 index 0000000..7716008 Binary files /dev/null and b/basic/day 3/webimages/twi.png differ diff --git a/basic/day 3/webimages/user1.jpeg b/basic/day 3/webimages/user1.jpeg new file mode 100644 index 0000000..51d9a46 Binary files /dev/null and b/basic/day 3/webimages/user1.jpeg differ diff --git a/basic/day 3/webimages/user2.jpg b/basic/day 3/webimages/user2.jpg new file mode 100644 index 0000000..e973652 Binary files /dev/null and b/basic/day 3/webimages/user2.jpg differ diff --git a/basic/day 3/webimages/user3.jpg b/basic/day 3/webimages/user3.jpg new file mode 100644 index 0000000..5cfdda7 Binary files /dev/null and b/basic/day 3/webimages/user3.jpg differ diff --git a/basic/day 3/webimages/user4.jpg b/basic/day 3/webimages/user4.jpg new file mode 100644 index 0000000..0c0e8d4 Binary files /dev/null and b/basic/day 3/webimages/user4.jpg differ diff --git a/basic/day 3/webimages/user5.jpg b/basic/day 3/webimages/user5.jpg new file mode 100644 index 0000000..2a07717 Binary files /dev/null and b/basic/day 3/webimages/user5.jpg differ