Add files via upload
This commit is contained in:
Sam
GitHub
parent
9457940d5e
commit
205b6ea161
6
100_projects/43-landing-design-socially/css/all.min.css
vendored
Normal file
6
100_projects/43-landing-design-socially/css/all.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
175
100_projects/43-landing-design-socially/css/style.css
Normal file
175
100_projects/43-landing-design-socially/css/style.css
Normal file
@ -0,0 +1,175 @@
|
||||
*{
|
||||
margin:0;
|
||||
padding:0;
|
||||
box-sizing: border-box;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
}
|
||||
.hero{
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
background: url(img/back-image.png);
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
padding: 20px 10%;
|
||||
overflow: hidden;
|
||||
}
|
||||
.hero nav .nav{
|
||||
background: transparent;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-content: center;
|
||||
z-index: 999;
|
||||
}
|
||||
.hero nav .nav .logo{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.hero nav .nav .logo svg{
|
||||
color: #c430d7;
|
||||
font-size: 40px;
|
||||
transition: .3s;
|
||||
}
|
||||
.hero nav .nav .logo:hover svg{
|
||||
color: #df4881;
|
||||
}
|
||||
.hero nav .nav .logo span{
|
||||
font-size: 28px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
.hero .nav p{
|
||||
align-self: center;
|
||||
}
|
||||
.hero .nav #menuToggle{
|
||||
display: none;
|
||||
}
|
||||
.hero .nav #navigation{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
list-style: none;
|
||||
gap: 20px;
|
||||
}
|
||||
.hero .nav #navigation li{
|
||||
cursor: pointer;
|
||||
}
|
||||
.hero .nav #navigation li a{
|
||||
text-decoration: none;
|
||||
color: #333;
|
||||
transition: .3s;
|
||||
}
|
||||
.hero .nav #navigation li a:hover{
|
||||
color: #df4881;
|
||||
}
|
||||
@media(max-width:767px){
|
||||
.hero .nav #navigation{
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
top: 70px;
|
||||
left: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-image: linear-gradient(45deg, #df4881, #c430d7);
|
||||
width: 100%;
|
||||
height: 0;
|
||||
transition: .3s;
|
||||
z-index: 88;
|
||||
}
|
||||
.hero .nav #navigation li a{
|
||||
color: #fff;
|
||||
}
|
||||
.hero .nav #navigation li a:hover{
|
||||
color: #333;
|
||||
}
|
||||
.hero .nav #navigation.active{
|
||||
height: 250px;
|
||||
padding-top: 50px;
|
||||
}
|
||||
.hero .nav #menuToggle{
|
||||
display: block;
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top:5px;
|
||||
font-size: 24px;
|
||||
padding: 5px 10px;
|
||||
cursor: pointer;
|
||||
transition: .3s;
|
||||
}
|
||||
.hero .nav #menuToggle:hover{
|
||||
border-radius: 5px;
|
||||
border: 1px solid #df4881;
|
||||
}
|
||||
}
|
||||
.btn-login{
|
||||
margin-right: 15px;
|
||||
color: #333;
|
||||
text-decoration: none;
|
||||
font-weight: 400;
|
||||
}
|
||||
.btn{
|
||||
text-decoration: none;
|
||||
padding: 15px 30px;
|
||||
color: #fff !important;
|
||||
background-image: linear-gradient(45deg, #df4881, #c430d7);
|
||||
font-size: 16px;
|
||||
border-radius: 20px;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
transition: .5s;
|
||||
}
|
||||
.btn:hover, .btn:focus{
|
||||
background-image: linear-gradient(45deg, #c430d7, #df4881);
|
||||
border-top-right-radius: 50px;
|
||||
border-bottom-left-radius: 50px;
|
||||
}
|
||||
.header{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
}
|
||||
@media(max-width:767px){
|
||||
.header{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 50px;
|
||||
}
|
||||
}
|
||||
.content{
|
||||
max-width: 600px;
|
||||
}
|
||||
.content h1{
|
||||
font-size: 5rem;
|
||||
color: #333;
|
||||
}
|
||||
.content p{
|
||||
margin: 10px 0 30px;
|
||||
color: #333;
|
||||
animation-delay: .5s;
|
||||
}
|
||||
.content .btn{
|
||||
padding: 15px 80px;
|
||||
animation-delay: 1s;
|
||||
}
|
||||
.hero .img{
|
||||
max-width: 100%;
|
||||
width: 530px;
|
||||
}
|
||||
.hero .img.animation{
|
||||
animation-delay: 1s;
|
||||
}
|
||||
.animation{
|
||||
opacity: 0;
|
||||
transform: translateY(50px);
|
||||
animation: moveup .5s linear forwards;
|
||||
}
|
||||
@keyframes moveup{
|
||||
100%{
|
||||
opacity: 1;
|
||||
transform: translateY(0px);
|
||||
}
|
||||
}
|
||||
BIN
100_projects/43-landing-design-socially/img/back-image.png
Normal file
BIN
100_projects/43-landing-design-socially/img/back-image.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 66 KiB |
BIN
100_projects/43-landing-design-socially/img/logo.png
Normal file
BIN
100_projects/43-landing-design-socially/img/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.1 KiB |
BIN
100_projects/43-landing-design-socially/img/pic.png
Normal file
BIN
100_projects/43-landing-design-socially/img/pic.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 718 KiB |
43
100_projects/43-landing-design-socially/index.html
Normal file
43
100_projects/43-landing-design-socially/index.html
Normal file
@ -0,0 +1,43 @@
|
||||
<!DOCTYPE html>
|
||||
<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">
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
<link rel="stylesheet" href="css/all.min.css">
|
||||
<title>Document</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="hero">
|
||||
<nav>
|
||||
<div class="nav">
|
||||
<div class="logo">
|
||||
<i class="fa-solid fa-icons"></i>
|
||||
<span>Socially</span>
|
||||
</div>
|
||||
<div id="menuToggle" onclick="menuToggle();"><i class="fa-solid fa-bars"></i></div>
|
||||
<ul id="navigation">
|
||||
<li><a href="#">Features</a></li>
|
||||
<li><a href="#">How It Works</a></li>
|
||||
<li><a href="#">privacy</a></li>
|
||||
<li><a href="#" class="btn-login">Log in</a></li>
|
||||
<li><a href="#" class="btn">Download App</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="header">
|
||||
<div class="content">
|
||||
<h1 class="animation">Make <br> New Friends</h1>
|
||||
<P class="animation">Socially is a new social media platform to make new Friends
|
||||
online in the world. new let's explore all it's amazing features.
|
||||
</P>
|
||||
<a href="#" class="btn animation">Join Now</a>
|
||||
</div>
|
||||
<img src="img/pic.png" class="img animation" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<script src="js/main.js"></script>
|
||||
<script src="js/all.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
6
100_projects/43-landing-design-socially/js/all.min.js
vendored
Normal file
6
100_projects/43-landing-design-socially/js/all.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
7
100_projects/43-landing-design-socially/js/main.js
Normal file
7
100_projects/43-landing-design-socially/js/main.js
Normal file
@ -0,0 +1,7 @@
|
||||
// Toggle Menu
|
||||
function menuToggle(){
|
||||
const menuToggle = document.getElementById('menuToggle');
|
||||
const navigation = document.getElementById('navigation');
|
||||
menuToggle.classList.toggle('active');
|
||||
navigation.classList.toggle('active');
|
||||
};
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Loading…
Reference in New Issue
Block a user