diff --git a/tasks-by-users/Tauqeer-Ahmed-99/01-Positioning/index.html b/tasks-by-users/Tauqeer-Ahmed-99/01-Positioning/index.html new file mode 100644 index 0000000..a98dd7d --- /dev/null +++ b/tasks-by-users/Tauqeer-Ahmed-99/01-Positioning/index.html @@ -0,0 +1,13 @@ + + + + Positioning horizontally and vertically centered + + + + +
A
+
B
+
C
+ + diff --git a/tasks-by-users/Tauqeer-Ahmed-99/01-Positioning/style.css b/tasks-by-users/Tauqeer-Ahmed-99/01-Positioning/style.css new file mode 100644 index 0000000..2bebadc --- /dev/null +++ b/tasks-by-users/Tauqeer-Ahmed-99/01-Positioning/style.css @@ -0,0 +1,38 @@ +#Box { + padding: 15px; + margin: 15px; + width: 100%; + height: auto; + background-color: antiquewhite; + border: 2px black solid; + display: flex; + align-items: center; + justify-content: center; +} + +.A { + margin: 5px; + padding: 5px; + width: 200px; + height: 200px; + background: red; + border: 2px black solid; +} + +.B { + margin: 5px; + padding: 5px; + width: 150px; + height: 150px; + background: blue; + border: 2px black solid; +} + +.C { + margin: 5px; + padding: 5px; + width: 100px; + height: 100px; + background: pink; + border: 2px black solid; +} diff --git a/tasks-by-users/Tauqeer-Ahmed-99/02-First Webpage-CSS-added/Contact-us.html b/tasks-by-users/Tauqeer-Ahmed-99/02-First Webpage-CSS-added/Contact-us.html new file mode 100644 index 0000000..ae7b07c --- /dev/null +++ b/tasks-by-users/Tauqeer-Ahmed-99/02-First Webpage-CSS-added/Contact-us.html @@ -0,0 +1,19 @@ + + + + Contact US and Support + + + +
+

Contact US and Support

+

Address.:601, Uzair Tower, Next to Zoya Complex, ********.

+

Mob.No.:+91 887999****

+

E-mail.:tauqueerrkhan@gmail.com

+
+ +
+

Go Back

 +
+ + diff --git a/tasks-by-users/Tauqeer-Ahmed-99/02-First Webpage-CSS-added/about-us.html b/tasks-by-users/Tauqeer-Ahmed-99/02-First Webpage-CSS-added/about-us.html new file mode 100644 index 0000000..cd520ee --- /dev/null +++ b/tasks-by-users/Tauqeer-Ahmed-99/02-First Webpage-CSS-added/about-us.html @@ -0,0 +1,21 @@ + + + + About-us + + + +
+

About Us

+ +

PurchaseComputerparts.in is a computer parts dealer based in India.

+

We Provide PC parts all over India.

+

Contact our Customer Care to know more.

+
+ +

Customer Care Contact

+
+

Go Back

+
+ + diff --git a/tasks-by-users/Tauqeer-Ahmed-99/02-First Webpage-CSS-added/css/styles.css b/tasks-by-users/Tauqeer-Ahmed-99/02-First Webpage-CSS-added/css/styles.css new file mode 100644 index 0000000..8ec1e8b --- /dev/null +++ b/tasks-by-users/Tauqeer-Ahmed-99/02-First Webpage-CSS-added/css/styles.css @@ -0,0 +1,217 @@ +/****************************************** +Created, maintained & Owned by: Tauqeer Khan +Date: 16/07/21 +******************************************/ + +body { + font-family: arial; + margin: 10px auto; + background-color: lightgray; +} + +#Header { + width: 1000px; + margin: 20px auto; + background: white; +} + +#main-heading h1 { + font-family: italic; + font-weight: bolder; +} + +.first { + background: #181818; + padding: 10px; +} + +ul.first { + text-align: right; + list-style-type: none; + margin-right: 0; + + position: sticky; + top: 0; +} + +.first li { + display: inline-block; + margin-left: 30px; +} + +.first a { + color: white; + text-decoration: none; + text-transform: uppercase; + font-size: 18px; + padding: 6px; +} + +a.current { + background: #8f746c; + border-radius: 5px; +} +.first a:hover { + font-weight: bolder; + border: 1px white solid; + box-shadow: 1px 1px 2px 1px rgba(250, 250, 250, 0.8); +} + +#content { + text-align: center; + font-family: italic; + font-weight: bolder; + color: darkgrey; +} + +#Banner img { + width: 100%; + height: 500px; +} + +#Banner { + background-color: lightgray; +} +.span-list { + text-align: center; + background-color: blanchedalmond; + width: 100%; + margin: 0 auto; +} +.span-list > h1 { + font-family: italic; + font-weight: bolder; +} + +.span-list a img { + display: block; + height: 140px; + width: 300px; + margin: 10px auto; + padding: 20px auto; +} + +#second a { + text-decoration: none; + font-family: italic; + color: black; + text-align: left; + font-weight: bolder; +} + +#second a img:hover { + box-shadow: 4px 4px 8px 4px rgba(40, 40, 40, 0.8); +} + +#second a:hover { + color: blue; + text-decoration: underline; + text-transform: uppercase; +} + +#second a:visited { + color: purple; +} + +#bottom { + background-color: lightblue; +} + +#bottom h1 { + color: black; + font-family: italic; + font-weight: bolder; + font-size: 30px; +} +#bottom h2 { + color: black; + font-family: italic; + font-weight: bolder; + font-size: 20px; +} + +#bottom a { + text-decoration: none; + color: black; + display: block; + list-style-type: none; + padding: 10px; + margin: 10px; + width: 90px; + border: 2px black dashed; + text-align: center; +} + +#bottom a:hover { + font-weight: bolder; + border: 3px black solid; + box-shadow: 2px 2px 4px 2px rgba(40, 40, 40, 0.8); +} +#contact { + width: 1000px; + margin: 0 auto; + background: inherit; +} +#contact-us-page h1 { + font-family: italic; + font-weight: bolder; +} + +#contact-us-page p { + font-family: arial; + font-size: 20px; +} + +#go-back a { + text-decoration: none; + font-family: arial; + display: block; + width: 110px; + margin: 0px; + border: 2px black dashed; + text-align: center; + color: black; +} + +#go-back a:hover { + text-decoration: none; + font-family: arial; + display: block; + width: 110px; + margin: 10px; + font-weight: bolder; + border: 3px black solid; + box-shadow: 1px 1px 2px 1px rgba(40, 40, 40, 0.8); +} + +#about-us h1 { + font-family: italic; + font-weight: bolder; +} + +#about-us p { + font-family: arial; + font-size: 20px; +} + +#customer { + text-decoration: none; + font-family: arial; + display: block; + width: 180px; + margin: 0; + border: 2px black dashed; + text-align: center; + color: black; +} + +#customer:hover { + text-decoration: none; + font-family: arial; + display: block; + width: 180px; + margin: 10px; + font-weight: bolder; + border: 3px black solid; + box-shadow: 1px 1px 2px 1px rgba(40, 40, 40, 0.8); +} diff --git a/tasks-by-users/Tauqeer-Ahmed-99/02-First Webpage-CSS-added/images/accesoriesimage.jpg b/tasks-by-users/Tauqeer-Ahmed-99/02-First Webpage-CSS-added/images/accesoriesimage.jpg new file mode 100644 index 0000000..a9f7009 Binary files /dev/null and b/tasks-by-users/Tauqeer-Ahmed-99/02-First Webpage-CSS-added/images/accesoriesimage.jpg differ diff --git a/tasks-by-users/Tauqeer-Ahmed-99/02-First Webpage-CSS-added/images/graphiccardimage.jpg b/tasks-by-users/Tauqeer-Ahmed-99/02-First Webpage-CSS-added/images/graphiccardimage.jpg new file mode 100644 index 0000000..d67eb64 Binary files /dev/null and b/tasks-by-users/Tauqeer-Ahmed-99/02-First Webpage-CSS-added/images/graphiccardimage.jpg differ diff --git a/tasks-by-users/Tauqeer-Ahmed-99/02-First Webpage-CSS-added/images/monitorimage.jpg b/tasks-by-users/Tauqeer-Ahmed-99/02-First Webpage-CSS-added/images/monitorimage.jpg new file mode 100644 index 0000000..3090bac Binary files /dev/null and b/tasks-by-users/Tauqeer-Ahmed-99/02-First Webpage-CSS-added/images/monitorimage.jpg differ diff --git a/tasks-by-users/Tauqeer-Ahmed-99/02-First Webpage-CSS-added/images/motherboards.jpg b/tasks-by-users/Tauqeer-Ahmed-99/02-First Webpage-CSS-added/images/motherboards.jpg new file mode 100644 index 0000000..fac2757 Binary files /dev/null and b/tasks-by-users/Tauqeer-Ahmed-99/02-First Webpage-CSS-added/images/motherboards.jpg differ diff --git a/tasks-by-users/Tauqeer-Ahmed-99/02-First Webpage-CSS-added/images/pcbuildimage.jpg b/tasks-by-users/Tauqeer-Ahmed-99/02-First Webpage-CSS-added/images/pcbuildimage.jpg new file mode 100644 index 0000000..747f02c Binary files /dev/null and b/tasks-by-users/Tauqeer-Ahmed-99/02-First Webpage-CSS-added/images/pcbuildimage.jpg differ diff --git a/tasks-by-users/Tauqeer-Ahmed-99/02-First Webpage-CSS-added/images/processorsimage.jpg b/tasks-by-users/Tauqeer-Ahmed-99/02-First Webpage-CSS-added/images/processorsimage.jpg new file mode 100644 index 0000000..3a2271f Binary files /dev/null and b/tasks-by-users/Tauqeer-Ahmed-99/02-First Webpage-CSS-added/images/processorsimage.jpg differ diff --git a/tasks-by-users/Tauqeer-Ahmed-99/02-First Webpage-CSS-added/images/ramimage.jpg b/tasks-by-users/Tauqeer-Ahmed-99/02-First Webpage-CSS-added/images/ramimage.jpg new file mode 100644 index 0000000..567b739 Binary files /dev/null and b/tasks-by-users/Tauqeer-Ahmed-99/02-First Webpage-CSS-added/images/ramimage.jpg differ diff --git a/tasks-by-users/Tauqeer-Ahmed-99/02-First Webpage-CSS-added/index.html b/tasks-by-users/Tauqeer-Ahmed-99/02-First Webpage-CSS-added/index.html new file mode 100644 index 0000000..3160378 --- /dev/null +++ b/tasks-by-users/Tauqeer-Ahmed-99/02-First Webpage-CSS-added/index.html @@ -0,0 +1,141 @@ + + + + + + Welcome to PurchaseComputerParts.in + + + + + + + diff --git a/tasks-by-users/muzeeb100/index.html b/tasks-by-users/muzeeb100/index.html new file mode 100644 index 0000000..7f91c9c --- /dev/null +++ b/tasks-by-users/muzeeb100/index.html @@ -0,0 +1,35 @@ + + + + + CSS Card Hover Effects Html & CSS + + + +
+
+
+ +
+
+

Nike shoes

+
+

Size :

+ 7 + 8 + 9 + 10 +
+
+

Color :

+ + + + +
+ Buy Now +
+
+
+ + diff --git a/tasks-by-users/muzeeb100/running_shoes_PNG5816 (1).png b/tasks-by-users/muzeeb100/running_shoes_PNG5816 (1).png new file mode 100644 index 0000000..7917072 Binary files /dev/null and b/tasks-by-users/muzeeb100/running_shoes_PNG5816 (1).png differ diff --git a/tasks-by-users/muzeeb100/running_shoes_PNG5816.png b/tasks-by-users/muzeeb100/running_shoes_PNG5816.png new file mode 100644 index 0000000..e2cb140 Binary files /dev/null and b/tasks-by-users/muzeeb100/running_shoes_PNG5816.png differ diff --git a/tasks-by-users/muzeeb100/shoes_PNG5816.png b/tasks-by-users/muzeeb100/shoes_PNG5816.png new file mode 100644 index 0000000..aaa5211 Binary files /dev/null and b/tasks-by-users/muzeeb100/shoes_PNG5816.png differ diff --git a/tasks-by-users/muzeeb100/style.css b/tasks-by-users/muzeeb100/style.css new file mode 100644 index 0000000..61e7219 --- /dev/null +++ b/tasks-by-users/muzeeb100/style.css @@ -0,0 +1,176 @@ +* { + margin: 0; + padding: 0; + font-family: "Poppins", sans-serif; +} +body { + display: flex; + justify-content: center; + align-items: center; + min-height: 100vh; + background: #131313; +} +.container { + position: relative; +} +.container .card { + position: relative; + width: 320px; + height: 450px; + background: #232323; + border-radius: 20px; + overflow: hidden; +} + +.container .card:before { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: #9bdc28; + clip-path: circle(150px at 80% 20%); + transition: 0.5s ease-in-out; +} + +.container .card:hover:before { + clip-path: circle(300px at 80% -20%); +} + +.container .card:after { + content: "Nike"; + position: absolute; + top: 30%; + left: -20%; + font-size: 12em; + font-weight: 800; + font-style: italic; + color: rgba(255, 255, 255, 0.04); +} +.container .card .imgBx { + position: absolute; + top: 50%; + transform: translateY(-50%); + z-index: 10000; + width: 100%; + height: 220px; + transition: 0.5s; +} + +.container .card:hover .imgBx { + top: 0%; + transform: translateY(0%); +} +.container .card .imgBx img { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%) rotate(-25deg); + width: 270px; +} +.container .card .contentBx { + position: absolute; + bottom: 0; + width: 100%; + height: 100px; + text-align: center; + transition: 1s; + z-index: 10; +} +.container .card:hover .contentBx { + height: 210px; +} +.container .card .contentBx h2 { + position: relative; + font-weight: 600; + letter-spacing: 1px; + color: #fff; +} +.container .card:hover .contentBx .size { + opacity: 1; + visibility: visible; + transition-delay: 0.5s; +} +.card .contentBx .size, +.container .card .contentBx .color { + display: flex; + justify-content: center; + align-items: center; + padding: 8px 20px; + transition: 0.5s; + opacity: 0; + visibility: hidden; +} +.container .card:hover .contentBx .size { + opacity: 1; + visibility: visible; + transition-delay: 0.5s; +} +.container .card:hover .contentBx .color { + opacity: 1; + visibility: visible; + transition-delay: 0.6s; +} +.container .card .contentBx .size h3, +.container .card .contentBx .size h3 { + color: #fff; + font-weight: 300; + font-size: 14px; + text-transform: uppercase; + letter-spacing: 2px; + margin-right: 10px; +} +.container .card .contentBx .size span { + width: 26px; + height: 26px; + text-align: center; + line-height: 26px; + font-size: 14px; + display: inline-block; + color: #111; + background: #fff; + margin: 0 5px; + transition: 0.5s; + color: #111; +} + +.container .card .contentBx .size span:hover { + background: #9bdc28; +} + +.container .card .contentBx .color span { + width: 20px; + height: 20px; + background: #ff0; + border-radius: 50%; + margin: 0 5px; + cursor: pointer; +} +.container .card .contentBx .color span:nth-child(2) { + background: #9bdc28; +} +.container .card .contentBx .color span:nth-child(3) { + background: #03a9f3; +} +.container .card .contentBx .color span:nth-child(4) { + background: #e91e63; +} +.container .card .contentBx a { + display: inline-block; + padding: 10px 20px; + background: #fff; + border-radius: 4px; + margin-top: 10px; + text-decoration: none; + font-weight: 600; + color: #111; + opacity: 0; + transform: translateY(50px); + transition: 0.5s; +} +.container .card:hover .contentBx a { + opacity: 1; + transform: translateY(0px); + transition-delay: 0.75s; +}