From 001bc9d615e4fe379296ea74ddde7cfc993c4a02 Mon Sep 17 00:00:00 2001 From: Nisarg Date: Sat, 14 Oct 2023 19:48:13 +0530 Subject: [PATCH] added components code --- components.css | 147 ++++++++++++++++++++++++++++++++++++++++++++++++ components.html | 45 +++++++++++++++ index.html | 2 +- 3 files changed, 193 insertions(+), 1 deletion(-) create mode 100644 components.css create mode 100644 components.html diff --git a/components.css b/components.css new file mode 100644 index 0000000..a8dd43d --- /dev/null +++ b/components.css @@ -0,0 +1,147 @@ +@import url("https://fonts.googleapis.com/css2?family=Lato&display=swap"); +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: Arial; +} + +body { + /* background-image: url(bg.jpg);` */ + background-color: #f0f0f0; + /* background-size: cover; */ + /* height: 100vh; */ + /* background-position: center; */ + padding: 0 3%; + font-family: "Lato", sans-serif; +} + +header { + width: 100%; + height: 100px; + display: flex; + justify-content: space-between; + align-items: center; + position: fixed; + z-index: 99; + box-shadow: 0 0 10px #0000; + background: rgba(0, 0, 0, 0.5); +} + +#chk1 { + display: none; +} + +i { + color: #fff; + cursor: pointer; +} + +header .logo { + flex: 1; + color: #fff; + margin-left: 50px; + text-transform: uppercase; + font-size: 15px; +} + +header .search-box { + flex: 1; + position: relative; +} + +.search-box input { + width: 100%; + height: 30px; + border: none; + outline: none; + background: #f2f2f2; + border-radius: 30px; + color: gray; + font-size: 14px; + text-align: center; + padding-left: 5px; + padding-right: 40px; +} + +.search-box button { + cursor: pointer; + width: 30px; + height: 30px; + border-radius: 50%; + border: none; + position: absolute; + top: 0; + right: 5px; + transform: scale(0.9); + background: green; +} + +header .menu { + font-size: 2.5em; + display: none; +} + +@media (max-width: 1000px) { + .search-box button { + position: absolute; + } + + header ul { + position: fixed; + top: 100px; + right: -100%; + background: rgba(0, 0, 0, 0.5); + height: calc(100vh - 100px); + width: 50%; + flex-direction: column; + align-items: center; + transition: right 0.5s linear; + } + + header .menu { + display: block; + width: 100px; + text-align: center; + } + + #chk1:checked ~ ul { + right: 0; + } +} + +@media (max-width: 600px) { + header .logo { + font-size: 10px; + margin-left: 8px; + } + + header ul { + width: 100%; + flex-wrap: wrap; + justify-content: center; + } +} +.navbar-brand { + color: #2a2a2a; + font-size: 200%; + font-weight: 600; + width: 60%; +} +.nav-item { + margin: 0 20px; +} + +.row { + width: 100%; +} +@media only screen and (max-width: 600px) { + .navbar-brand { + width: 70%; + } +} +@media only screen and (max-width: 450px) { + .navbar-brand { + font-size: 150%; + } +} diff --git a/components.html b/components.html new file mode 100644 index 0000000..6912e24 --- /dev/null +++ b/components.html @@ -0,0 +1,45 @@ + + + + + + + Document + + + + + + + + + + + \ No newline at end of file diff --git a/index.html b/index.html index 74e957f..3542e5a 100644 --- a/index.html +++ b/index.html @@ -41,7 +41,7 @@ Home
  • - Components + Components
  • Contact