"Social Media Feed"
Bootstrap 4.1.1 Snippet by hiteshvisit

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html lang="en">
<head>
<title>Social Media Feed</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<link rel= "stylesheet" href= "https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href = "feed.css">
<script src = "feed.js"></script>
</head>
<body>
<div class = "main panel panel-default z-depth-4">
<div class = "panel-body">
<div class="media">
<div class="media-left">
<img src="https://mms.businesswire.com/media/20190122005910/en/701785/5/Camila-x-MC.jpg" class="media-object circle">
</div>
<div class="media-body">
<p>Neo Motto <span class = "time">(13 min. ago)</span></p>
<span><i class = "fa fa-ellipsis-h right"></i></span>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.main{
width: 25vw;
background-color: white;
margin: auto;
position: relative;
top: 5vh;
}
body{
}
.media-object{
width: 3.5vw;
height: 3.5vw;
}
.media{
padding: 0.5vw;
}
.media-body{
padding-left: 1vw;
font-size: 1.2vw;
position: relative;
top: 0.5vw;
}
.fa-ellipsis-h{
position: relative;
bottom: 2vw;
font-size: 1.5vw;
margin-right: 1vw;
}
.panel-body{
padding: 1vw;
}
.not{
height: 20vw;
width: 100%;
}
.iconsec{
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: