Skip to content

Commit fcd9390

Browse files
TusharKesarwaniTusharKesarwani
authored
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

‎Projects/Social Media Reference Landing Page/README.md‎

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.

‎Projects/Social Media Reference Landing Page/background_img.jpg‎

1.19 MB
Loading

‎Projects/Social Media Reference Landing Page/favicon.png‎

922 Bytes
Loading

‎Projects/Social Media Reference Landing Page/index.html‎

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+

‎Projects/Social Media Reference Landing Page/profile.png‎

4.8 KB
Loading

‎Projects/Social Media Reference Landing Page/sytle.css‎

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+
}

‎Projects/Social Media Reference Landing Page/tick.svg‎

Lines changed: 4 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)