added components code

csiddu · Oct 14, 2023 · 001bc9d · 001bc9d
1 parent af1b94a
commit 001bc9d
Show file tree

Hide file tree

Showing 3 changed files with 193 additions and 1 deletion.
diff --git a/components.css 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
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
+        integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
+        integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA=="
+        crossorigin="anonymous" referrerpolicy="no-referrer" />
+        <link rel="stylesheet" href="components.css">
+</head>
+
+<body>
+    <nav class="navbar navbar-expand-lg bg-none">
+        <div class="container-fluid">
+            <a class="navbar-brand" href="index.html">Frontend Treasure</a>
+            <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
+                data-bs-target="#navbarSupportedContent">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+            <div class="collapse navbar-collapse" id="navbarSupportedContent">
+                <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
+                    <li class="nav-item">
+                        <a class="nav-link active" href="index.html">Home</a>
+                    </li>
+                </ul>
+                <form class="d-flex" role="search">
+                    <input class="form-control me-3" type="search" placeholder="Search for the components"
+                        aria-label="Search" />
+                    <button class="btn btn-outline-success" type="submit">
+                        Search
+                    </button>
+                </form>
+            </div>
+        </div>
+    </nav>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
+        integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
+        crossorigin="anonymous"></script>
+</body>
+
+</html>
diff --git a/index.html b/index.html
@@ -41,7 +41,7 @@
               <a class="nav-link active" href="index.html">Home</a>
             </li>
             <li class="nav-item">
-              <a href="#" class="nav-link"> Components </a>
+              <a href="components.html" class="nav-link"> Components </a>
             </li>
             <li class="nav-item">
               <a class="nav-link" href="#">Contact</a>