Skip to content

title update #5

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

Open
ayan878 wants to merge 5 commits into
base: main
Choose a base branch
from
Open

title update #5

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
cad8b3b
Merge pull request #1 from belaletech/main
ayan878 Mar 2, 2023
73511da
title update
ayan878 Mar 9, 2023
2ed22f6
commit
ayan878 Mar 9, 2023
c3f9d63
commit
ayan878 Mar 11, 2023
7f8bbd3
commit
ayan878 Mar 25, 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
3 changes: 3 additions & 0 deletions .vscode/settings.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"githubPullRequests.ignoredPullRequestBranches": ["main"]
}
Empty file added chech.h
View file
Open in desktop
Empty file.
119 changes: 55 additions & 64 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,79 +1,70 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>arise tech</title>
<title>Webster</title>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="responsive.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="main">
<div class="navbar">
<div class="icon">
<h2 class="logo">Arise<span>Tech</span></h2>
</div>
<div class="menu">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">Tutorial</a></li>
<li><a href="#">Practice</a></li>
<li><a href="#">Bootcamp</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</div>

<div class="search">
<input
class="srch"
type="search"
name=""
placeholder="Search our tutorial,e.g.C,Java.."
/>
<a href="#"><button class="btn">Search</button></a>
</div>

<nav class="nav">
<h2 class="logo">Web<span>ster</span></h2>
<button class="navbar"><a href="#">Home</a></button>
<button class="navbar"><a href="#">Tutorial</a></button>
<button class="navbar"><a href="#">Practice</a></button>
<button class="navbar"><a href="#">Bootcamp</a></button>
<button class="navbar"><a href="#">Contact</a></button>
<div class="search">
<input
class="srch"
type="search"
name=""
placeholder="Search our tutorials...."
/>
<a href="#"><button class="search_btn">Search</button></a>
</div>
<div class="content">
<h1>With the India's largest<br><span>Tutorial Site.</span></h1>
<p class="par">
<h2>Welcome to Arise Tech</h2><br />
The ultimate resource for computer science students!
<br />Whether you're just starting out or looking to enhance your
skills <br />our comprehensive tutorials and guides
cover everything from<br />programming languages to algorithms and data
structures.<br />
With easy-to-follow explanations, practical examples, and interactive
exercises<br />
you'll be able to master the fundamentals and advance your knowledge
in no time.<br />
Join our community of learners and let's embark on a journey of
discovery<br />
and growth in the exciting world of computer science!"
</nav>

<!-- Description container -->
<div class="hero">
<div class="content">
<h1>With the India's largest<br /><span>Tutorial Site.</span></h1>
<div class="text">
<h2>Welcome to Webster</h2>
<p>
The ultimate resource for computer science students! Whether you're
just starting out or looking to enhance your skills our comprehensive
tutorials and guides cover everything from programming languages to
algorithms and data structures. With easy-to-follow explanations,
practical examples, and interactive exercises you'll be able to master
the fundamentals and advance your knowledge in no time. Join our
community of learners and let's embark on a journey of discovery and
growth in the exciting world of computer science.
</p>
<br>
<button class="cn"><a href="#">JOIN US</a></button>

<div class="form">
<h2>Login Here</h2>
<input type="email" name="email" placeholder="Enter Email Here">
<input type="password" name="" placeholder="Enter Password Here">
<button class="btnn"><a href="#">Login</a></button>
<p class="link">Don't have an account<br>
<a href="#">Sign Up</a> Here</p>
<p class="liw">Login With</p>
<div class="icon">
<a href="#"><ion-icon name="logo-facebook"></ion-icon></a>
<a href="#"><ion-icon name="logo-instagram"></ion-icon></a>
<a href="#"><ion-icon name="logo-twitter"></ion-icon></a>
<a href="#"><ion-icon name="logo-google"></ion-icon></a>
<a href="#"><ion-icon name="logo-linkedin"></ion-icon></a>
<a href="#"><ion-icon name="logo-Skype"></ion-icon></a>


</div>
</div>
</div>
</div>

</div>
<!-- Sign form -->
<div class="form">
<h2>Sign in to Webster</h2>
<input type="email" name="email" placeholder="Email" />
<input type="password" placeholder="Password" />
<button class="btnn"><a href="#">Login</a></button>
<p class="link">Don't have an account? <a href="#">Sign Up</a></p>
<!-- <p class="liw">Login With</p> -->
<div class="icon">
<a href="#"><ion-icon name="logo-facebook"></ion-icon></a>
<a href="#"><ion-icon name="logo-instagram"></ion-icon></a>
<a href="#"><ion-icon name="logo-twitter"></ion-icon></a>
<a href="#"><ion-icon name="logo-google"></ion-icon></a>
<a href="#"><ion-icon name="logo-linkedin"></ion-icon></a>
<a href="#"><ion-icon name="logo-Skype"></ion-icon></a>
</div>
</div>
</div>

<script src="https://unpkg.com/ionicons@5.4.0/dist/ionicons.js"></script>
</body>

</html>
145 changes: 145 additions & 0 deletions majicNav.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,145 @@
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body
{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #222327;
}
.navigation
{
position: relative;
width: 400px;
height: 60px;
background: #6d1e1e;
display: flex;
justify-content: center;
align-items: center;
border-radius: 10px;
}
.navigation ul
{
display: flex;
width: 350px;
}
.navigation ul li
{
list-style: none;
position: relative;
/* 350 / 5 = 70 */
width: 70px;
height: 60px;
z-index: 2;
}
.navigation ul li a
{
position: relative;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
width: 100%;
text-align: center;
}
.navigation ul li a .icon
{
position: relative;
display: block;
line-height: 65px;
font-size: 1.5em;
width: 55px;
height: 55px;
border-radius: 50%;
transition: 0.5s;
transition-delay: 0s;
color: #222327;
}
.navigation ul li.active a .icon
{
transform: translateY(-27px);
color: #fff;
transition-delay: 0.25s;
background: var(--clr);
}
.navigation ul li a .icon::before
{
content: '';
position: absolute;
top: 10px;
left: 0;
width: 100%;
height: 100%;
transition: 0.5s;
transition-delay: 0s;
border-radius: 50%;
background: var(--clr);
filter: blur(5px);
opacity: 0;
}
.navigation ul li.active a .icon::before
{
transition-delay: 0.5s;
opacity: 0.5;
}
.indicator
{
position: absolute;
top: -35px;
width: 70px;
height: 70px;
background: #fff;
border-radius: 50%;
z-index: 1;
transition: 0.5s;
}
.indicator::before
{
content: '';
position: absolute;
top: 5px;
left: -28px;
width: 30px;
height: 30px;
background: transparent;
border-radius: 50%;
box-shadow: 15px 18px #fff;
}
.indicator::after
{
content: '';
position: absolute;
top: 5px;
right: -28px;
width: 30px;
height: 30px;
background: transparent;
border-radius: 50%;
box-shadow: -15px 18px #fff;
}

.navigation ul li:nth-child(1).active ~ .indicator
{
transform: translateX(calc(70px * 0));
}
.navigation ul li:nth-child(2).active ~ .indicator
{
transform: translateX(calc(70px * 1));
}
.navigation ul li:nth-child(3).active ~ .indicator
{
transform: translateX(calc(70px * 2));
}
.navigation ul li:nth-child(4).active ~ .indicator
{
transform: translateX(calc(70px * 3));
}
.navigation ul li:nth-child(5).active ~ .indicator
{
transform: translateX(calc(70px * 4));
}
64 changes: 64 additions & 0 deletions majicNav.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
<!DOCTYPE html>
<html>
<head>
<title>Magic Menu Indicator | 03</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="majicNav.css">
</head>
<body>
<div class="navigation">
<ul>
<li class="list active">
<a href="#">
<span class="icon" style="--clr:#f44336;">
<ion-icon name="home-outline"></ion-icon>
</span>
</a>
</li>
<li class="list">
<a href="#">
<span class="icon" style="--clr:#ffa117;">
<ion-icon name="person-outline"></ion-icon>
</span>
</a>
</li>
<li class="list">
<a href="#">
<span class="icon" style="--clr:#0fc70f;">
<ion-icon name="chatbubble-outline"></ion-icon>
</span>
</a>
</li>
<li class="list">
<a href="#">
<span class="icon" style="--clr:#2196f3;">
<ion-icon name="camera-outline"></ion-icon>
</span>
</a>
</li>
<li class="list">
<a href="#">
<span class="icon" style="--clr:#b145e9;">
<ion-icon name="settings-outline"></ion-icon>
</span>
</a>
</li>
<div class="indicator"></div>
</ul>
</div>

<script>
const list = document.querySelectorAll('.list');
function activeLink(){
list.forEach((item) =>
item.classList.remove('active'));
this.classList.add('active')
}
list.forEach((item) =>
item.addEventListener('click',activeLink));
</script>

<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
</body>
</html>
Loading