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 UI changed Successfully #154

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Home Page UI changed Successfully #154

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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 added Countdown-removebg-preview.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.
367 changes: 86 additions & 281 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,305 +2,110 @@
<html lang="en">

<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Homepage</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" />
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous" />
<link rel="stylesheet" href="style.css" />
<link rel="apple-touch-icon" sizes="180x180" href="favicon_io/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="32x32" href="favicon_io/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="favicon_io/favicon-16x16.png" />
<link rel="manifest" href="favicon_io/site.webmanifest" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">

<style>
.carousel {
height: 40em;
}

.footer-basic {
padding: 40px 0;
background-color: #ffffff;
color: #4b4c4d;
}

.footer-basic ul {
padding: 0;
list-style: none;
text-align: center;
font-size: 18px;
line-height: 1.6;
margin-bottom: 0;
}

.footer-basic li {
padding: 0 10px;
}

.footer-basic ul a {
color: inherit;
text-decoration: none;
opacity: 0.8;
}

.footer-basic ul a:hover {
opacity: 1;
}

.footer-basic .social {
text-align: center;
padding-bottom: 25px;
}

.footer-basic .social>a {
font-size: 24px;
width: 40px;
height: 40px;
line-height: 40px;
display: inline-block;
text-align: center;
border-radius: 50%;
border: 1px solid #ccc;
margin: 0 8px;
color: inherit;
opacity: 0.75;
}

.footer-basic .social>a:hover {
opacity: 0.9;
}

.footer-basic .copyright {
margin-top: 15px;
text-align: center;
font-size: 13px;
color: #aaa;
margin-bottom: 0;
}

.card.bg-4 {
background: rgba(255, 255, 255, 0.9) url("https://i.scdn.co/image/ab67706c0000bebb01b4eb9c4a97c5d464c39b1a");
background-size: cover;
}
</style>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Countdowntimer</title>
<link rel="stylesheet" href="style.css">
<!--=============== BOXICONS ===============-->
<link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
<!--=============== CDN ===============-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<body>
<nav id="navbar" class="sticky">
<ul class="menu">
<div>
<li class="logo"><img src="Countdown.png" alt="Logo">
</li>
</div>
<div class="links">

<li class="item"><a href="index.html">Home</a></li>

<li class="item"><a href="./about.html">About</a></li>
<li class="item has-submenu">
<a class="submenu-title" tabindex="0">Services</a>
<ul class="submenu">
<li class="subitem">
<a href="./components/CountdownTimer.html">Timer app</a>
</li>
<li class="subitem">
<a href="./to-doLISt/index.html">Todo Manager</a>
</li>
<li class="subitem"><a href="#">Music Player</a></li>
</ul>
</li>
<li class="item has-submenu">
<a class="submenu-title" tabindex="0">Plans</a>
<ul class="submenu">
<li class="subitem"><a href="#">Freelancer</a></li>
<li class="subitem"><a href="#">Startup</a></li>
<li class="subitem"><a href="#">Enterprise</a></li>
</ul>
</li>
<li class="item"><a href="./blog.html">Blog</a></li>
<li class="item"><a href="./contact.html">Contact</a></li>

<li class="item button button1"><a href="LOGIN/LogIn.html">Log In</a></li>
<header>
<div class="logo">
<h1> Count... </h1>
</div>
<div class="menu_avez_movie">
<ul>
<li>Home</li>
<li>Products</li>
<li>Contact</li>
</ul>
</div>
</header>

</div>
<div>
<li class="item searched d-flex my-2">
<input type="search" placeholder="Search" id="form1" class="form-control" />
<button type="button" class="btn btn-primary mx-1">
<i class="fas fa-search"></i>
</button>
</li>
<li class="toggle">
<a href="#"><i class="fas fa-bars"></i></a>
</li>
</div>
</ul>
</nav>
<div class="carousel">
<img src="https://source.unsplash.com/1600x900/?quote" alt="quote" class="slide active fade" />
<img src="https://source.unsplash.com/1600x900/?quote" alt="quote" class="slide fade" />
</div>


<div class="container20">

<div class="card1">
<div class="face face1">
<div class="content">
<span class="stars"></span>
<h2 class="java">Music Instruments App</h2>
<p class="java">This is the best Music Instruments Sound app which will make this app unique from other apps.</p>
<a href="Pages/Musicapp/index.html" class="goto-btn">Open</a>
<section class="main-section">
<div class="avez_movie_main_section">
<div class="avez_movie_main_content">
<h1>Countdowntimer</h1>
<h2>The One Stop Platform to make command on your Time...</h2>
<h3> Wanna manage the time <span>Countdowntimer...</span> </h3>
<div class="avez_movie_btn">
<a href="#">Get Started <i &RightArrow; </a>
</div>
</div>
<div class="face face2">
<h2>Music Instruments App</h2>
<div class="avez_movie_main_image">
<img src="Countdown-removebg-preview.png" alt="">
</div>
</div>

<div class="card1">
<div class="face face1">
<div class="content">
<span class="stars"></span>
<h2 class="python">Todo Manager</h2>
<p class="python">Procrastination is opportunity's natural assassin</p>
<a href="to-doLISt/index.html" class="goto-btn">Open</a>
</section>

<section>
<div class="avezProductSection">
<h1>Our Products</h1>
<div class="avezCardsTimer">
<div class="avezCardTimer">
<div class="imageTimer">
<img src="images/blog3.jpeg" alt="">
</div>
<div class="title">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, quisquam.
</div>
</div>
</div>
<div class="face face2">
<h2>Todo Manager</h2>
</div>
</div>

<div class="card1">
<div class="face face1">
<div class="content">
<span class="stars"></span>
<h2 class="cSharp">Countdown Timer</h2>
<p class="cSharp">A simple web app for setting up a Countdown from right now to a
specific date</p>
<a href="components/CountdownTimer.html" class="goto-btn">Open</a>
<div class="avezCardTimer">
<div class="imageTimer">
<img src="images/blog3.jpeg" alt="">
</div>
<div class="title">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, quisquam.
</div>
</div>
<div class="avezCardTimer">
<div class="imageTimer">
<img src="images/blog3.jpeg" alt="">
</div>
<div class="title">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, quisquam.
</div>
</div>
</div>
<div class="face face2">
<h2>Countdown Timer</h2>
</div>
</div>
<div class="card1">
<div class="face face1">
<div class="content">
<span class="stars"></span>
<h2 class="python">lofi-beats</h2>
<p class="python"> A lofi beats playlist which helps you concentrate and focus.</p>
<a href="Pages/Musicapp/index.html" class="goto-btn">Open</a>
</section>



<footer class="footer_section_avez">
<div class="avez_movie_footer_container">
<div class="avez_movie_footer_logo">
<h1>Countdowntimer</h1>
<h3>Wanna manage the time <span>Countdowntimer...</span> </h3>
<div class="avez_movie_socials">
<ul>
<li>
<i class=''>f</i>
<i class=''>f</i>
<i class=''>f</i>
<i class=''>f</i>
</li>
</ul>
</div>
</div>
<div class="face face2">
<h2>lofi-beats</h2>
<div class="avez_movie_footer_desc">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Reiciendis praesentium quibusdam modi maiores vero. Ab
consequuntur eius sunt et illo nostrum laboriosam recusandae unde pariatur, accusantium quasi quae numquam
sapiente.
</div>
</div>
</div>

<script>
let slideIndex = 0;
const showSlides = async () => {
let slides = document.getElementsByClassName("slide");
let url;
try {
let response = await fetch(
"https://source.unsplash.com/1600x900/?quote"
);
url = response.url;
} catch (error) {
console.log(error);

}
slides[slideIndex].classList.toggle("active");
slideIndex++;
slideIndex %= slides.length;
slides[slideIndex].classList.toggle("active");
slides[slideIndex].src = url;
};
setInterval(showSlides, 5000);
const toggle = document.querySelector(".toggle");
const menu = document.querySelector(".menu");
/* Toggle mobile menu */
function toggleMenu() {
if (menu.classList.contains("active")) {
menu.classList.remove("active");
// adds the menu (hamburger) icon
toggle.querySelector("a").innerHTML = "<i class='fas fa-bars'></i>";
} else {
menu.classList.add("active");
// adds the close (x) icon
toggle.querySelector("a").innerHTML = "<i class='fas fa-times'></i>";
}
}
/* Event Listener */
toggle.addEventListener("click", toggleMenu, false);
const items = document.querySelectorAll(".item");

/* Activate Submenu */
function toggleItem() {
if (this.classList.contains("submenu-active")) {
this.classList.remove("submenu-active");
} else if (menu.querySelector(".submenu-active")) {
menu
.querySelector(".submenu-active")
.classList.remove("submenu-active");
this.classList.add("submenu-active");
} else {
this.classList.add("submenu-active");
}
}

/* Event Listeners */
for (let item of items) {
if (item.querySelector(".submenu")) {
item.addEventListener("click", toggleItem, false);
item.addEventListener("keypress", toggleItem, false);
<div class="branding_avez_dev">
&copy; 2022 Countdown Timer
</div>
</footer>

}
}
/* Close Submenu From Anywhere */
function closeSubmenu(e) {
if (menu.querySelector(".submenu-active")) {
let isClickInside = menu
.querySelector(".submenu-active")
.contains(e.target);

if (!isClickInside && menu.querySelector(".submenu-active")) {
menu
.querySelector(".submenu-active")
.classList.remove("submenu-active");
}
}
}
/* Event listener */
document.addEventListener("click", closeSubmenu, false);
</script>
<div class="footer-basic">
<footer>
<div class="social"><a href="#"><i class="icon ion-social-instagram"></i></a><a href="#"><i
class="icon ion-social-linkedin"></i></a><a href="#"><i class="icon ion-social-pinterest"></i></a><a
href="#"><i class="icon ion-social-facebook"></i></a><a href="#"><i class="icon ion-social-youtube"></i></div>
<ul class="list-inline">
<li class="list-inline-item"><a href="#">Home</a></li>
<li class="list-inline-item"><a href="#">Services</a></li>
<li class="list-inline-item"><a href="./about.html">About</a></li>
<li class="list-inline-item"><a href="#">Terms</a></li>
<li class="list-inline-item"><a href="#">Privacy Policy</a></li>
</ul>
<p class="copyright">CountdownTimer © 2021</p>
</footer>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
</body>

</html>
</html>
Loading