Skip to content

Commit

Permalink
Landing page
Browse files Browse the repository at this point in the history
  • Loading branch information
@WinnieNgina
WinnieNgina committed Nov 9, 2023
0 parents commit c902210
Show file tree
Hide file tree
Showing 3 changed files with 356 additions and 0 deletions.
Binary file added images/lappy.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
103 changes: 103 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,103 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TaskHub</title>

<!-- fontawesome -->
<script src="https://kit.fontawesome.com/065d7448de.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="styles.css">
</head>
<body>

<nav>
<div class="container nav__container">
<a href="#" class="nav__logo">TaskHub</a>
<ul class="nav__items">
<li><a href="#">Features</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Plans</a></li>
<li><a href="#contact">Contact</a></li>

</div>
</nav>

<section class="section section-top">
<div class="content rellax" data-rellax-speed="5">
<h1>TaskHub brings all your tasks, teammates, and tools together</h1>
<a href="#" class="btn btn-primary">Learn More</a>
</div>
</section>

<section class="section section-stream">
<img src="/Users/user/Desktop/TaskHubUI/images/lappy.png" class="laptop" alt=""/>
<div class="content rellax" data-rellax-speed="10">
<div>
<h2 class="secondary-text">Keep everything in the same place, even if your team isn’t.</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore et
dicta consectetur incidunt omnis nam quis quidem nisi ipsa deserunt.
</p>
</div>
<div>
<h2 class="secondary-text">A productivity powerhouse</h2 class="secondary-text">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore et
dicta consectetur incidunt omnis nam quis quidem nisi ipsa deserunt.
</p>
</div>
</div>
</section>

<section class="section section-grid">
<div class="rellax" data-rellax-speed="1" data-rellax-xs-speed="3">
<i class="fas fa-video fa-3x secondary-text"></i>
<h2>Organize<span class="secondary-text dot">.</span></h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore et
dicta consectetur incidunt omnis nam quis quidem nisi ipsa deserunt.
</p>
</div>
<div class="rellax" data-rellax-speed="4" data-rellax-xs-speed="3">
<i class="fas fa-users fa-3x secondary-text"></i>
<h2>Manage<span class="secondary-text dot">.</span></h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore et
dicta consectetur incidunt omnis nam quis quidem nisi ipsa deserunt.
</p>
</div>
<div class="rellax" data-rellax-speed="7" data-rellax-xs-speed="3">
<i class="fas fa-book fa-3x secondary-text"></i>
<h2>Automate<span class="secondary-text dot">.</span></h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore et
dicta consectetur incidunt omnis nam quis quidem nisi ipsa deserunt.
</p>
</div>
</section>

<footer id="contact" class="footer">
<ul>
<li> <a href="https://github.com/WinnieNgina/TaskHub" target="_blank">
<i class="social-icon fa-brands fa-github fa-xl"></i></a>
</li>

<li>
<a href=""><i class="fa-brands fa-linkedin fa-xl"></i></a>
</li>

<li>
<a href="mailto:[email protected]">
<i class="social-icon fa-solid fa-envelope fa-xl"></i></a>
</li>

<li>
<a href="https://twitter.com/WinfredKilonzoN_" target="_blank">
<i class="social-icon fa-brands fa-x-twitter fa-xl"></i></a>
</li>



</body>
</html>
253 changes: 253 additions & 0 deletions styles.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,253 @@
@import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap');

:root {
--primary-color: #2d2254;
--secondary--color: #1fd1f9;
--text-color: #c5bbec;
}

* {
box-sizing: border-box;
margin: 0;
padding: 0;
}

body {
font-family: 'Montserrat', sans-serif;
background: var(--primary-color);
color: #fff;
font-size: 18px;
line-height: 1.6;
}

h1,
h2,
h3,
p {
margin-bottom: 10px;
}

a {
text-decoration: none;
color: #fff;
}

ul {
list-style: none;
}

.btn {
display: inline-block;
border: 0;
/* background: var(--secondary--color); */
background-color: #1fd1f9;
background-image: linear-gradient(315deg, #1fd1f9 0%, #b621fe 74%);
color: #fff;
border-radius: 20px;
padding: 8px 30px;
text-transform: uppercase;
font-weight: bold;
font-size: 16px;
margin-top: 10px;
}

.btn:hover {
transform: scale(0.98);
background: plum;
}

.primary-text {
color: var(--primary-color);
}

.secondary-text {
color: var(--secondary--color);
}

.section {
position: relative;
padding: 0 20px;
}

/* Section Top */
.section-top {
min-height: 500px;
background: url('https://i.ibb.co/PhVR2Vh/bg1.png') no-repeat center center/cover;
}

.section-top h1 {
font-size: 70px;
line-height: 1.3;
}

.section-top .content {
position: absolute;
top: 100px;
right: 20px;
width: 55%;
}

/* Section Stream */
.section-stream {
min-height: 700px;
background: url('https://i.ibb.co/bsX6RV0/bg2.png') no-repeat center center/cover;
}

.section-stream h2 {
font-size: 35px;
}

.section-stream .play {
width: 27%;
position: absolute;
top: 100px;
left: 50px;
}

.section-stream .content {
position: absolute;
width: 50%;
top: 130px;
right: 70px;
}

.section-stream .content > div, .section-grid > div {
background: rgba(255, 255, 255, 0.1);
padding: 20px;
margin-bottom: 20px;
border-radius: 10px;
}

/* Section Grid */
.section-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 30px;
text-align: center;
}

.section-grid p {
color: var(--text-color);
}

.section-grid .dot {
font-size: 40px;
padding-left: 2px;
}

/* Footer */
.footer {
border-top: var(--text-color) 1px solid;
padding: 30px;
margin-top: 20px;
}

.footer ul {
display: flex;
align-items: center;
justify-content: space-around;
text-align: center;
}

/* Mobile */
@media (max-width: 700px) {
.section-top .content,
.section-stream .play,
.section-stream .content {
position: static;
width: 100%;
}

.section-top {
min-height: 200px;
padding-top: 20px;
}

.section-top .content {
text-align: center;
}

.section-top .content h1 {
font-size: 45px;
}

.section-stream {
min-height: 400px;
}

.section-stream .play {
width: 50%;
display: block;
margin: 30px auto;
}

.section-grid {
display: block;
margin-top: 0;
}

.footer ul {
display: block;
}
}

.laptop {
height: 80%;
width: 40%;
margin-top: 150px;
}

nav {
background: linear-gradient(to right, hsl(279, 56%, 30%), hsl(261, 59%, 42%));
width: 100vw;
height: 4.5rem;
position: fixed;
top: 0;
z-index: 10;
box-shadow: 0 1rem 1rem rgba(0, 0, 0, 0.2)

}


.nav__container {
height: 100%;
display: flex;
align-items: center;
justify-content: space-between;
}



.nav__logo {
font-weight: 600;
font-size: 1.2rem;
margin-left:10%;
}

.nav__items {
display: flex;
align-items: center;
gap: 4rem;
margin-right: 10%;

}


/* Media Queries for Responsive Design */
@media only screen and (max-width: 768px) {
.nav__logo {
margin-left: 5%; /* Adjust the margin for the logo on smaller screens */
}

.nav__items {
display: none; /* Hide the navigation items on smaller screens */
}
}








0 comments on commit c902210

Please sign in to comment.