Skip to content

Commit fcd9390

Browse files
Merge pull request #1088 from AnupK1234/feature/newProject
Social Media Reference Landing Page project added [SSOC 2.0]
2 parents 2393f8b + 6d7b00f commit fcd9390

7 files changed

Lines changed: 136 additions & 0 deletions

File tree

1.79 KB

🚀 Social-Media-Reference-Landing-Page

This repository is a social media reference landing page. Similar to Linktree. This site is currently hosted through Netlify

Screenshot

Click here to view the live demo.

Technologies Used

➡️ HTML
➡️ CSS

💻How to Run & Edit it Locally

To run this application on web, at least one web browser should be installed on your computer.

# Clone this repository or download it.
$ git clone https://github.com/AnupK1234/Social-Media-Reference-Landing-Page

# Double click the index.html and open it in visual studio code or another IDE you use to edit it!

🤝 Contribution

I really appreciate contributions, issues and feature requests because this application is far from perfect. Feel free to pull requests and make changes to this project.

1.19 MB
Loading
922 Bytes
Loading
Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
<title>Your Name</title>
8+
<link rel="icon" type="image/x-icon" href="favicon.png">
9+
<link rel="stylesheet" href="sytle.css">
10+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
11+
</head>
12+
<body>
13+
<!-- Profile Photo -->
14+
<img src="profile.png" alt="ProfileImage">
15+
16+
<div>
17+
<h1>@Your Name <img type="icon" class="img1" src="tick.svg"></h1>
18+
</div>
19+
20+
<!-- Links -->
21+
<div style="margin: bottom 0;">
22+
<a href="mailto:example@gmail.com" target="_blank" class="links"><i class="fa fa-envelope fa-lg" style="color:rgb(15, 15, 15);float: left;"></i>Email</a>
23+
</div> <!-- Enter your Email Id -->
24+
25+
<div>
26+
<a href="... Your Twitter Id URL ..." target="_blank" class="links"><i class="fa fa-twitter fa-lg" style="color:rgb(15, 15, 15);float: left;"></i>Twitter</a>
27+
</div>
28+
29+
<div>
30+
<a href="... Your LinkedIn Id URL ..." target="_blank" class="links"><i class="fa fa-linkedin fa-lg" style="color:rgb(15, 15, 15);float: left;"></i>LinkedIn</a>
31+
</div>
32+
33+
<div>
34+
<a href="... Your GitHub Id URL ..." target="_blank" class="links"><i class="fa fa-github fa-lg" style="color:rgb(15, 15, 15);float: left;"></i>Github</a>
35+
</div>
36+
37+
<div>
38+
<a href="... Your Instagram Id URL ..." target="_blank" class="links"><i class="fa fa-instagram fa-lg" style="color:rgb(15, 15, 15);float: left;"></i>Instagram</a>
39+
</div>
40+
41+
<div>
42+
<a href="... Your Quora Id URL ..." target="_blank" class="links"><i class="fa fa-quora fa-lg" style="color:rgb(15, 15, 15);float: left;"></i>Quora</a>
43+
</div>
44+
45+
<div>
46+
<a href="... Your Medium Id URL ..." target="_blank" class="links">
47+
<div class="icon">
48+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 512"><path d="M180.5,74.262C80.813,74.262,0,155.633,0,256S80.819,437.738,180.5,437.738,361,356.373,361,256,280.191,74.262,180.5,74.262Zm288.25,10.646c-49.845,0-90.245,76.619-90.245,171.095s40.406,171.1,90.251,171.1,90.251-76.619,90.251-171.1H559C559,161.5,518.6,84.908,468.752,84.908Zm139.506,17.821c-17.526,0-31.735,68.628-31.735,153.274s14.2,153.274,31.735,153.274S640,340.631,640,256C640,171.351,625.785,102.729,608.258,102.729Z"/></svg>
49+
</div>
50+
Medium</a>
51+
</div>
52+
53+
<div>
54+
<a href="... Your Dev.to Id URL ..." target="_blank" class="links">
55+
<div class="icon">
56+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M120.12 208.29c-3.88-2.9-7.77-4.35-11.65-4.35H91.03v104.47h17.45c3.88 0 7.77-1.45 11.65-4.35 3.88-2.9 5.82-7.25 5.82-13.06v-69.65c-.01-5.8-1.96-10.16-5.83-13.06zM404.1 32H43.9C19.7 32 .06 51.59 0 75.8v360.4C.06 460.41 19.7 480 43.9 480h360.2c24.21 0 43.84-19.59 43.9-43.8V75.8c-.06-24.21-19.7-43.8-43.9-43.8zM154.2 291.19c0 18.81-11.61 47.31-48.36 47.25h-46.4V172.98h47.38c35.44 0 47.36 28.46 47.37 47.28l.01 70.93zm100.68-88.66H201.6v38.42h32.57v29.57H201.6v38.41h53.29v29.57h-62.18c-11.16.29-20.44-8.53-20.72-19.69V193.7c-.27-11.15 8.56-20.41 19.71-20.69h63.19l-.01 29.52zm103.64 115.29c-13.2 30.75-36.85 24.63-47.44 0l-38.53-144.8h32.57l29.71 113.72 29.57-113.72h32.58l-38.46 144.8z"/></svg>
57+
</div>
58+
Dev.to</a>
59+
</div>
60+
61+
<div>
62+
<a href="... Your Facebook Id URL ..." target="_blank" class="links"><i class="fa fa-facebook fa-lg" style="color:rgb(15, 15, 15);float: left;"></i>Facebook</a>
63+
</div>
64+
<p class="f">Made with &#10084;&#65039;</p>
65+
66+
</body>
67+
</html>
68+
4.8 KB
Loading
Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
body{
2+
background-image: url(background_img.jpg);
3+
}
4+
img{
5+
height: 140px;
6+
border-radius: 50%;
7+
display: block;
8+
margin-top: 3%;
9+
margin-left: auto;
10+
margin-right: auto;
11+
width: auto;
12+
}
13+
img:hover{
14+
transition: ease;
15+
transition-duration: 1s;
16+
transform:scale(1.2);
17+
}
18+
h1{
19+
margin: 0%;
20+
color: white;
21+
font-size: 25px;
22+
text-align: center;
23+
margin-top: 0px;
24+
font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
25+
}
26+
.img1{
27+
display: inline;
28+
height: inherit;
29+
}
30+
.f{
31+
color: rgb(255, 255, 255);
32+
text-align: center;
33+
font-size: 20px;
34+
}
35+
.links{
36+
text-decoration: none;
37+
color: black;
38+
text-align: center;
39+
font-size:22px;
40+
font-family: 'Times New Roman', Times, serif;
41+
background-color: white;
42+
border: 1px solid white;
43+
width: 40%;
44+
display: block;
45+
padding: 1%;
46+
border-radius: 25px;
47+
margin-top: 25px;
48+
margin-left: auto;
49+
margin-right: auto;
50+
transition: .8s ease
51+
}
52+
.links:hover{
53+
-webkit-box-shadow: 0px 0px 25px 0px rgb(255, 255, 255);
54+
-moz-box-shadow: 0px 0px 25px 0px rgb(255, 255, 255);
55+
box-shadow: 0px 0px 25px 0px rgb(255, 255, 255);
56+
transition: .8s ease;
57+
}
58+
59+
.icon{
60+
float: left;
61+
margin: -1px 1px;
62+
width: 33px;
63+
height: 33px;
64+
}
Lines changed: 4 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)