diff --git a/Navbar/navbar.css b/Navbar/navbar.css new file mode 100644 index 0000000..f5ca154 --- /dev/null +++ b/Navbar/navbar.css @@ -0,0 +1,63 @@ +@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap'); +*{ + margin: 0; + padding:0; + font-family: 'poppins',sans-serif; + outline: none; + border: none; + text-decoration: none; + box-sizing: border-box; +} +body{ + background: #dfe9f5; +} +.wrapper{ + display: flex; + position: relative; +} +.wrapper .snavbar{ + position: fixed; + width: 200px; + height: 100%; + background: #4b4376; + padding: 30px 0; +} +.wrapper .snavbar ul li{ + padding: 15px; + border-bottom: 1px solid rgba(0,0,0,0.05); + border-top: 1px solid rgba(225,225,225,0.05); +} +.wrapper .snavbar ul li a{ + color: #bdb8d7; + display: block; +} +.wrapper .snavbar ul li a .fas{ + width: 25px; +} +.wrapper .snavbar ul li:hover{ + background:#594f8d; +} +.wrapper .snavbar ul li:hover a{ + background:#fff; +} +.wrapper .snavbar .socialmedia{ + position: absolute; + bottom: 0; + left: 50%; + transform: translateX(-50%); + display: flex; +} + +.wrapper .snavbar .socialmedia a{ + display: block; + width: 40px; + background: #594f8d; + height: 40px; + line-height: 40px; + text-align: center; + margin: 0 5px; + color: #bdb8d7; + border-top-right-radius: 5px; + border-top-left-radius:5px ; +} + diff --git a/Navbar/navbar.html b/Navbar/navbar.html new file mode 100644 index 0000000..579ce9f --- /dev/null +++ b/Navbar/navbar.html @@ -0,0 +1,74 @@ + + + + + + Navbar + + + + + +
+
+ +
+
+ + + + + + + + + +
+
+ + diff --git a/ShoppingCard/card.css b/ShoppingCard/card.css new file mode 100644 index 0000000..7e819de --- /dev/null +++ b/ShoppingCard/card.css @@ -0,0 +1,107 @@ +@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap'); +*{ + margin: 0; + padding:0; + font-family: 'poppins',sans-serif; +} + +body{ + display: flex; + justify-content: center; + align-items: center; + min-height: 100vh; + background: #232526; /* fallback for old browsers */ + background: -webkit-linear-gradient(to right, #414345, #232526); /* Chrome 10-25, Safari 5.1-6 */ + background: linear-gradient(to right, #414345, #232526); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ + +} +.card{ + position: relative; + width: 320px; + height: 420px; + background: #122936; + border-radius: 23px; + overflow: hidden; +} +.card::before{ + content:''; + position: absolute; + top: -50%; + width: 100%; + height: 100%; + background: #d8790d; + transform: skewY(340deg); + transition: 0.5s; +} +.card:hover::before{ + top: -70%; + transform: skewY(498deg); +} +.card::after{ + content: 'Asus'; +position: absolute; +bottom: 0; +left: 0; +font-weight: 600; +font-size: 8em; +color:rgba(0,0,0,0.1); +} + +.card .imgbx{ + position: relative; + width: 100%; + display: flex; + justify-content: center; + align-items: center; + padding-top: 20px; + z-index: 1; +} +.card .imgbx img{ + max-width: 100%; + transition: 0.5s; +} +.card:hover .imgbx img{ + max-width: 50%; + +} +.card .contentbx{ + position: relative; + padding: 20px; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + z-index: 1; +} +.card .contentbx h3{ + font-size: 18px; + color: #fff; + font-weight: 780; + text-transform: uppercase; + letter-spacing: 1px; +} +.card .contentbx .price{ + font-size: 24px; + color: #fff; + font-weight: 700; + letter-spacing: 1px; +} + +.card .contentbx .buy{ + position: relative; + top: 200px; + opacity: 0; + padding: 10px 30px; + margin-top: 13px; + color: #fff; + text-decoration: none; + background: #2196f3; + border-radius: 30px; + text-transform: uppercase; + letter-spacing: 1px; + transition: 0.5s; +} +.card .contentbx .buy{ + top: 0; + opacity: 1; +} \ No newline at end of file diff --git a/ShoppingCard/card.html b/ShoppingCard/card.html new file mode 100644 index 0000000..a05e083 --- /dev/null +++ b/ShoppingCard/card.html @@ -0,0 +1,23 @@ + + + + + + Shop card + + + + + +
+
+ +
+
+

Asus Zephyrus G14

+

$899

+ Buy Now +
+
+ + \ No newline at end of file diff --git a/ShoppingCard/rog.png b/ShoppingCard/rog.png new file mode 100644 index 0000000..a0edc7c Binary files /dev/null and b/ShoppingCard/rog.png differ