Instantly share code, notes, and snippets.
Created
August 10, 2018 21:41
-
Star
0
(0)
You must be signed in to star a gist -
Fork
0
(0)
You must be signed in to fork a gist
-
Save riyaadazad/627fa136be6209d5150a58de78359dc5 to your computer and use it in GitHub Desktop.
Social template provided by "w3schools.com" utilizing the W3.CSS stylesheet
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <title>W3.CSS</title> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css"> | |
| <body class="w3-light-grey"> | |
| <div class="w3-topnav w3-large w3-teal"> | |
| <a href="#">Home</a> | |
| <a href="#">Messages</a> | |
| <a href="#">My Account</a> | |
| </div> | |
| <br> | |
| <div class="w3-container w3-center"> | |
| <div class="w3-row"> | |
| <div class="w3-col m3"> | |
| <div class="w3-card-2 w3-round w3-white"> | |
| <div class="w3-container"> | |
| <p><a href="#">My Profile</a></p> | |
| <p><img src="img_avatar.jpg" class="w3-circle" height="75" width="75" alt="Avatar"></p> | |
| </div> | |
| </div> | |
| <br> | |
| <div class="w3-card-2 w3-round w3-white"> | |
| <div class="w3-container"> | |
| <p><a href="#">Interests</a></p> | |
| <p> | |
| <span class="w3-tag w3-small w3-red">News</span> | |
| <span class="w3-tag w3-small w3-blue">W3Schools</span> | |
| <span class="w3-tag w3-small w3-purple">Labels</span> | |
| <span class="w3-tag w3-small w3-green">Games</span> | |
| <span class="w3-tag w3-small w3-brown">Friends</span> | |
| <span class="w3-tag w3-small w3-yellow">Family</span> | |
| </p> | |
| </div> | |
| </div> | |
| <br> | |
| <div class="w3-container w3-round w3-teal w3-margin-bottom"> | |
| <span onclick="this.parentElement.style.display='none'" class="w3-closebtn">×</span> | |
| <p><strong>Ey!</strong></p> | |
| <p>People are looking at your profile. Find out who.</p> | |
| </div> | |
| </div> | |
| <div class="w3-col m7"> | |
| <div class="w3-row-padding"> | |
| <div class="w3-col m12"> | |
| <div class="w3-card-2 w3-round w3-white"> | |
| <div class="w3-container w3-padding w3-left-align"> | |
| <p contenteditable="true">Status: Feeling Blue</p> | |
| <button type="button" class="w3-btn w3-teal">Like</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="w3-row-padding w3-margin-top"> | |
| <div class="w3-col m3"> | |
| <div class="w3-card-2 w3-white w3-round-large"> | |
| <div class="w3-container"> | |
| <p>John</p> | |
| <p><img src="img_avatar.jpg" class="w3-circle w3-image" alt="Avatar" width="96" height="96"></p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="w3-col m9"> | |
| <div class="w3-card-2 w3-white w3-round-large"> | |
| <div class="w3-container"> | |
| <p>Just Forgot that I had to mention something about someone to someone about how I forgot something, but now I forgot it. Ahh, forget it! Or wait. I remember.... no I don't.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="w3-row-padding w3-margin-top"> | |
| <div class="w3-col m3"> | |
| <div class="w3-card-2 w3-white w3-round-large"> | |
| <div class="w3-container"> | |
| <p>John</p> | |
| <p><img src="img_avatar.jpg" class="w3-circle w3-image" alt="Avatar" width="96" height="96"></p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="w3-col m9"> | |
| <div class="w3-card-2 w3-white w3-round-large"> | |
| <div class="w3-container"> | |
| <p>Just Forgot that I had to mention something about someone to someone about how I forgot something, but now I forgot it. Ahh, forget it! Or wait. I remember.... no I don't.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="w3-row-padding w3-margin-top"> | |
| <div class="w3-col m3"> | |
| <div class="w3-card-2 w3-white w3-round-large"> | |
| <div class="w3-container"> | |
| <p>John</p> | |
| <p><img src="img_avatar.jpg" class="w3-circle w3-image" alt="Avatar" width="96" height="96"></p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="w3-col m9"> | |
| <div class="w3-card-2 w3-white w3-round-large"> | |
| <div class="w3-container"> | |
| <p>Just Forgot that I had to mention something about someone to someone about how I forgot something, but now I forgot it. Ahh, forget it! Or wait. I remember.... no I don't.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="w3-row-padding w3-margin-top w3-margin-bottom"> | |
| <div class="w3-col m3"> | |
| <div class="w3-card-2 w3-white w3-round-large"> | |
| <div class="w3-container"> | |
| <p>John</p> | |
| <p><img src="img_avatar.jpg" class="w3-circle w3-image" alt="Avatar" width="96" height="96"></p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="w3-col m9"> | |
| <div class="w3-card-2 w3-white w3-round-large"> | |
| <div class="w3-container"> | |
| <p>Just Forgot that I had to mention something about someone to someone about how I forgot something, but now I forgot it. Ahh, forget it! Or wait. I remember.... no I don't.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="w3-col m2"> | |
| <div class="w3-card-2 w3-round w3-white"> | |
| <div class="w3-container"> | |
| <p>Upcoming Events:</p> | |
| <img src="img_5terre.png" alt="Cinque Terre" style="width:100%;"> | |
| <p><strong>Italy</strong></p> | |
| <p>Friday 15:00</p> | |
| <p><button class="w3-btn">Info</button></p> | |
| </div> | |
| </div> | |
| <br> | |
| <div class="w3-card-2 w3-round w3-white w3-padding-16"> | |
| <p>ADS</p> | |
| </div> | |
| <div class="w3-card-2 w3-round w3-white"> | |
| <p>ADS</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <br> | |
| <footer class="w3-container w3-teal"> | |
| <h5>Footer</h5> | |
| <p>Footer information goes here</p> | |
| </footer> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment