Skip to content

Commit 0fbfc90

Browse files
Manishkr1007Manishkr1007
authored
adding new social media project name as Socially
1 parent 0a77ac4 commit 0fbfc90

11 files changed

Lines changed: 269 additions & 0 deletions

File tree

‎Projects/socialmediaweb/back-image.png‎

66.5 KB
Loading

‎Projects/socialmediaweb/index.html‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>socilly social media </title>
7+
<link rel="stylesheet" href="style.css">
8+
</head>
9+
<body>
10+
<div class="hero">
11+
<nav>
12+
<img src="logo.png" class="logo">
13+
<ul>
14+
<li><a href="#">Features</a></li>
15+
<li><a href="#">How it works</a></li>
16+
<li><a href="#">Privacy</a></li>
17+
</ul>
18+
<div>
19+
<a href="#" class="login-btn">log in</a>
20+
<a href="#" class="btn">Download App</a>
21+
</div>
22+
</nav>
23+
<div class="content">
24+
<h1 class="anim">Make<br>New Friends</h1>
25+
26+
27+
<p class="anim">Socially is a new social media platfrom to make new friends online iin the world.Now let's explore all it's amazing features.</p>
28+
<a href="#" class="btn anim" >Join Now</a>
29+
</div>
30+
<img src="pic.png" class="feature-img anim">
31+
</div>
32+
</body>
33+
</html>

‎Projects/socialmediaweb/logo.png‎

6.12 KB
Loading

‎Projects/socialmediaweb/pic.png‎

718 KB
Loading

‎Projects/socialmediaweb/socally/README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
# socally is the frontpage design of a social media plateform.

‎Projects/socialmediaweb/socally/back-image.png‎

66.5 KB
Loading

‎Projects/socialmediaweb/socally/index.html‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>socilly social media </title>
7+
<link rel="stylesheet" href="style.css">
8+
</head>
9+
<body>
10+
<div class="hero">
11+
<nav>
12+
<img src="logo.png" class="logo">
13+
<ul>
14+
<li><a href="#">Features</a></li>
15+
<li><a href="#">How it works</a></li>
16+
<li><a href="#">Privacy</a></li>
17+
</ul>
18+
<div>
19+
<a href="#" class="login-btn">log in</a>
20+
<a href="#" class="btn">Download App</a>
21+
</div>
22+
</nav>
23+
<div class="content">
24+
<h1 class="anim">Make<br>New Friends</h1>
25+
26+
27+
<p class="anim">Socially is a new social media platfrom to make new friends online iin the world.Now let's explore all it's amazing features.</p>
28+
<a href="#" class="btn anim" >Join Now</a>
29+
</div>
30+
<img src="pic.png" class="feature-img anim">
31+
</div>
32+
</body>
33+
</html>

‎Projects/socialmediaweb/socally/logo.png‎

6.12 KB
Loading

‎Projects/socialmediaweb/socally/pic.png‎

718 KB
Loading

‎Projects/socialmediaweb/socally/style.css‎

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
*{
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
font-family: 'poppins',sans-serif;
6+
}
7+
.hero{
8+
width: 100%;
9+
min-height: 100vh;
10+
background-image: url(back-image.png);
11+
background-position: center;
12+
background-size: cover;
13+
padding:10px 10%;
14+
overflow: hidden;
15+
position: relative;
16+
17+
}
18+
nav{
19+
padding:10px 0;
20+
display: flex;
21+
align-items: center;
22+
justify-content: space-between;
23+
}
24+
.logo{
25+
width:140px;
26+
27+
}
28+
nav ul li{
29+
display: inline-block;
30+
list-style: none;
31+
margin: 10px 15px;
32+
}
33+
nav ul li a{
34+
text-decoration: none;
35+
color: #333;
36+
font-weight: 400;
37+
}
38+
.login-btn
39+
{
40+
text-decoration: none;
41+
color: #333;
42+
margin-right: 15px;
43+
font-weight: 400;
44+
}
45+
.btn{
46+
display: inline-block;
47+
text-decoration: none;
48+
padding: 14px 40px;
49+
color: #fff;
50+
background-image: linear-gradient(45deg,#df4881,#c430d7);
51+
font-size: 14px;
52+
border-radius: 30px;
53+
border-top-right-radius: 0;
54+
transition: 0.5s;
55+
}
56+
.content{
57+
margin-top: 10%;
58+
max-width: 600px;
59+
60+
}
61+
.content h1{
62+
font-size: 70px;
63+
color: #222;
64+
}
65+
p{
66+
margin: 10px 0 30px;
67+
color: #333;
68+
animation-delay: 0.5s;
69+
}
70+
.content .btn{
71+
padding: 15px 80px;
72+
font-size: 16px;
73+
animation-delay: 1s;
74+
}
75+
.btn:hover{
76+
border-top-right-radius:30px ;
77+
}
78+
.feature-img{
79+
width: 530px;
80+
position: absolute;
81+
bottom: 0;
82+
right: 10%;
83+
}
84+
.feature-img.anim{
85+
animation-delay: 1.5s;
86+
87+
}
88+
.anim{
89+
opacity: 0;
90+
transform: translateY(30px);
91+
animation: moveup 0.5s linear forwards;
92+
}
93+
@keyframes moveup {
94+
100%{
95+
opacity: 1;
96+
transform: translateY(0px);
97+
98+
99+
}
100+
101+
}

0 commit comments

Comments
 (0)