Social Media Template

Free Social Media Template by w3

"W3.CSS Website Templates

We have created some responsive W3.CSS website templates for you to use.

You are free to modify, save, share, and use them in all your projects."

Source Code

<!DOCTYPE html>

<html>

<title>W3.CSS Template</title>

<style>

html,body,h1,h2,h3,h4,h5 {font-family: "Open Sans", sans-serif}

</style>

<a href="#" class="w3-bar-item w3-button">One new friend request</a>

<a href="#" class="w3-bar-item w3-button">John Doe posted on your wall</a>

<a href="#" class="w3-bar-item w3-button">Jane likes your post</a>

</div>

</a>

</div>

<a href="#" class="w3-bar-item w3-button w3-padding-large">My Profile</a>

</div>

<h4 class="w3-center">My Profile</h4>

<hr>

<p><i class="fa fa-pencil fa-fw w3-margin-right w3-text-theme"></i> Designer, UI</p>

<p><i class="fa fa-home fa-fw w3-margin-right w3-text-theme"></i> London, UK</p>

<p><i class="fa fa-birthday-cake fa-fw w3-margin-right w3-text-theme"></i> April 1, 1988</p>

</div>

<br>

<button onclick="myFunction('Demo1')" class="w3-button w3-block w3-theme-l1 w3-left-align"><i class="fa fa-circle-o-notch fa-fw w3-margin-right"></i> My Groups</button>

</div>

<button onclick="myFunction('Demo2')" class="w3-button w3-block w3-theme-l1 w3-left-align"><i class="fa fa-calendar-check-o fa-fw w3-margin-right"></i> My Events</button>

<p>Some other text..</p>

</div>

<button onclick="myFunction('Demo3')" class="w3-button w3-block w3-theme-l1 w3-left-align"><i class="fa fa-users fa-fw w3-margin-right"></i> My Photos</button>

<br>

</div>

</div>

</div>

</div>

</div>

</div>

<br>

<p>Interests</p>

<p>

<span class="w3-tag w3-small w3-theme-d4">W3Schools</span>

<span class="w3-tag w3-small w3-theme-d3">Labels</span>

<span class="w3-tag w3-small w3-theme-d2">Games</span>

<span class="w3-tag w3-small w3-theme-d1">Friends</span>

<span class="w3-tag w3-small w3-theme">Games</span>

<span class="w3-tag w3-small w3-theme-l1">Friends</span>

<span class="w3-tag w3-small w3-theme-l3">Design</span>

<span class="w3-tag w3-small w3-theme-l5">Photos</span>

</p>

</div>

<br>

</span>

<p>People are looking at your profile. Find out who.</p>

</div>

</div>

<h6 class="w3-opacity">Social Media template by w3.css</h6>

<p contenteditable="true" class="w3-border w3-padding">Status: Feeling Blue</p>

</div>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

</div>

</div>

<button type="button" class="w3-button w3-theme-d2 w3-margin-bottom"><i class="fa fa-comment"></i> Comment</button>

</div>

<button type="button" class="w3-button w3-theme-d2 w3-margin-bottom"><i class="fa fa-comment"></i> Comment</button>

</div>

<h4>Angie Jane</h4><br>

<button type="button" class="w3-button w3-theme-d2 w3-margin-bottom"><i class="fa fa-comment"></i> Comment</button>

</div>

</div>

<p>Upcoming Events:</p>

<p><strong>Holiday</strong></p>

<p>Friday 15:00</p>

</div>

<br>

<p>Friend Request</p>

</div>

</div>

<br>

</div>

<br>

</div>

</div>

</div>

</div>

<br>

<h5>Footer</h5>

</footer>

<p>Powered by <a href="https://www.w3schools.com/w3css/default.asp" target="_blank">w3.css</a></p>

</footer>

// Accordion

function myFunction(id) {

var x = document.getElementById(id);

if (x.className.indexOf("w3-show") == -1) {

x.className += " w3-show";

x.previousElementSibling.className += " w3-theme-d1";

} else {

x.className = x.className.replace("w3-show", "");

x.previousElementSibling.className =

x.previousElementSibling.className.replace(" w3-theme-d1", "");

}

// Used to toggle the menu on smaller screens when clicking on the menu button

function openNav() {

var x = document.getElementById("navDemo");

if (x.className.indexOf("w3-show") == -1) {

x.className += " w3-show";

} else {

x.className = x.className.replace(" w3-show", "");

}

</script>

</body>

</html>

Search This Blog

Free Code Examples