diff --git a/Delta-apna-college b/Delta-apna-college new file mode 160000 index 0000000..a0429ce --- /dev/null +++ b/Delta-apna-college @@ -0,0 +1 @@ +Subproject commit a0429ced839d1b8c4af0d750d1366336f67ee702 diff --git a/camera.jpg b/camera.jpg new file mode 100644 index 0000000..2f5a1a6 Binary files /dev/null and b/camera.jpg differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..48e3f52 --- /dev/null +++ b/index.html @@ -0,0 +1,86 @@ + + + + + + + CSS Project + + + + + + + + + +
+ +
+ +
+ + +
+ + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..c99ece5 --- /dev/null +++ b/style.css @@ -0,0 +1,123 @@ +*{ + margin: 0; + padding: 0; + font-family: "Poppins", sans-serif; +} + +.main_box{ + background-image: url("camera.jpg"); + height: 100vh; + background-size: cover; +} +.btn_one i{ + font-size: 30px; + color: white; + font-weight: 700; + position: absolute; + left: 16px; + line-height: 70px; + cursor: pointer; + transition: all 0.3s linear; +} +.sidebar_menu{ + position: fixed; + left: -350px; + height: 100vh; + width: 300px; + background-color: rgba(255, 255, 255, 0.1); + box-shadow: 0 0 6px rgba(255, 255, 255, 0.6); + transition: all 0.3s linear; +} +.logo{ + position: absolute; + width: 100%; + + line-height:60px; + box-shadow: 0 0 4px rgba(255, 255, 255, 0.6); + top: 8px; + height: 60px; + + +} +.logo a{ + position: absolute; + left: 50px; + color: white; + text-decoration: none; + font-size: 20px; + font-weight: 500; +} +.menu{ + color: white; + position: absolute; + width: 100%; + top: 80px; +} +.btn_two i{ + color: grey; + font-size: 25px; + line-height: 70px; + position: absolute; + left: 275px; + transition: all 0.3s linear; + + +} +.menu li{ + margin-top: 6px; + padding: 14px 20px; + + +} +.menu li a,i{ + color: white; + text-decoration: none; + font-size: 20px; +} +.menu li i{ + padding-right: 8px; +} +.social_media{ + + position: absolute; + left: 25%; + bottom: 50px; + +} +.social_media i{ + color: white; + opacity: 0.5; + padding: 0 5px; + + +} +#check{ + display: none; +} +.menu li:hover{ + box-shadow: 0 0 4px rgba(255, 255, 255, 0.6); + +} +.btn_one i:hover{ + font-size: 40px; +} +.btn_two i:hover{ + font-size: 30px; +} +.social_media i:hover{ + opacity: 1; + transform: scale(1.1); +} +#check:checked~.sidebar_menu{ + left: 0; +} +#check:checked~.btn_one i{ + opacity: 0; +} +#check:checked~.sidebar_menu.btn_two i{ + opacity: 1; +} +.logo a{ + font-family: 'Cal Sans'} + +