Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Home Page Redesign. #9

Merged
merged 2 commits into from
Oct 3, 2023
Merged

Home Page Redesign. #9

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7b4837e
modified some things
Lokesh-MV Oct 3, 2023
e261567
Home Page Redesigned
Lokesh-MV Oct 3, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file removed bg.jpg
View file
Open in desktop
Binary file not shown.
Binary file added images/wb.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
123 changes: 97 additions & 26 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,29 +1,100 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>
project
</title>
<link rel="stylesheet" href="style.css">
<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" />
</head>
<body>
<header>
<input type="checkbox" name="" id="chk1">
<div class="logo"><h1>Frontend Treasure</h1></div>
<div class="search-box">
<form action="">
<input type="text" name="search" id="srch" placeholder="Search">
<button type="submit"><i class="fa fa-search"></i></button>
</form>
</div>
<div class="menu">
<label for="chk1">
<i class="fa fa-bars"></i>
</label>
</div>
</header>
</body>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title>Frontend Treasure</title>
<!-- CSS Section -->
<!-- bootstrap CSS -->
<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="style.css" />
<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"
/>
</head>
<body>
<!-- Navbar Section -->
<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>
<li class="nav-item">
<a href="#" class="nav-link"> Components </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</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>

<section id="hero">
<div class="row">
<div class="col-md-6" id="hero-left">
<img src="images/wb.png" id="hero-img" />
</div>
<div class="col-md-6" id="hero-right">
<p id="hero-head">Code your Dreams!</p>
<p id="hero-text">
Frontend Treasure: Simplify web development. Copy, paste, and create
stunning websites effortlessly. Explore, customize, and bring your
ideas to life.
</p>
<form class="d-flex" role="search">
<input
class="form-control me-2"
type="search"
placeholder="Search by name, component & more... "
/>
<button class="btn btn-outline-success" type="submit">
Search
</button>
</form>
</div>
</div>
</section>
<!-- JS Section -->
<!-- Bootstrap JS -->
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
crossorigin="anonymous"
></script>
</body>
</html>

<!-- "Unlock a World of Frontend Magic! -->
228 changes: 146 additions & 82 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,121 +1,185 @@
@import url("https://fonts.googleapis.com/css2?family=Lato&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial;
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial;
}

body {
background-image: url(bg.jpg);
background-size: cover;
height: 100vh;
background-position: center;
/* 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);
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;
display: none;
}


i {
color: #fff;
cursor: pointer;
color: #fff;
cursor: pointer;
}

header .logo {
flex: 1;
color: #fff;
margin-left: 50px;
text-transform: uppercase;
font-size: 15px;
flex: 1;
color: #fff;
margin-left: 50px;
text-transform: uppercase;
font-size: 15px;
}

header .search-box {
flex: 1;
position: relative;
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;
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;
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;
font-size: 2.5em;
display: none;
}

@media (max-width: 1000px) {
.search-box button {
position: absolute;
}
.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 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;
}
header .menu {
display: block;
width: 100px;
text-align: center;
}

#chk1:checked ~ ul {
right: 0;
}
#chk1:checked ~ ul {
right: 0;
}
}

@media (max-width: 600px) {
header .logo {
font-size: 10px;
margin-left: 8px;
}
header .logo {
font-size: 10px;
margin-left: 8px;
}

header ul {
width: 100%;
flex-wrap: wrap;
justify-content: center;
}
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;
}
#hero-img {
width: 100%;
}
#hero-left {
padding: 7% 0;
}
#hero-head {
color: #4483e5;
font-size: 290%;
font-weight: bold;
}
#hero-right {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
}
#hero-text {
color: #2a2a2a;
font-size: 21px;
}
#hero-right form {
margin-top: 5%;
}
#hero-right form input {
width: 350px;
}
.row {
width: 100%;
}
@media only screen and (max-width: 600px) {
.navbar-brand {
width: 70%;
}
#hero-right form input {
width: 250px;
}
#hero-head {
font-size: 200%;
}
#hero-left {
text-align: center;
}
#hero-text {
font-size: 16px;
}
}
@media only screen and (max-width: 450px) {
.navbar-brand {
font-size: 150%;
}
}
Loading