sharing-likes secion add icon

canriquez · Nov 25, 2019 · 483b907 · 483b907
1 parent 2261a2b
commit 483b907
Show file tree

Hide file tree

Showing 2 changed files with 83 additions and 5 deletions.
diff --git a/index.html b/index.html
@@ -57,11 +57,21 @@ <h1 id="video-title">Contributing to Open Source Part I: The Easy Way</h1>
                 <div id="views">45094</div>
             </div>
             <div id="sharing-likes">
-                <div class="add"></div>
-                <div class="share"></div>
-                <div class="more"></div>
-                <div class="like"></div>
-                <div class="dislike"></div>
+                <div id="add">
+                    <span class="icon same-prop"></span><span>Add to</span>
+                </div>
+                <div id="share">
+                    <span class="icon same-prop"></span><span>Share</span>
+                </div>
+                <div id="more">
+                    <span class="icon same-prop"></span><span>More</span>                    
+                </div>
+                <div id="like">
+                    <span class="icon same-prop"></span><span>899</span>
+                </div>
+                <div id="dislike">
+                    <span class="icon same-prop"></span><span>12</span>
+                </div>
             </div>
         </div>
         <div id="video-description">

diff --git a/style.css b/style.css
@@ -194,3 +194,71 @@
 #views {
   width: 30%;
 }
+
+#sharing-likes {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+}
+
+#add {
+  width: 10%;
+}
+
+#share {
+  width: 10%;
+}
+#more {
+  width: 60%;
+}
+#like {
+  width: 10%;
+}
+
+#dislike {
+  width: 10%;
+}
+
+.same-prop {
+  font-size: 100%;
+  display: inline-block;
+  opacity: 0.6;
+  text-indent: -10000px;
+  background-image: url("https://archive.ph/Bss88/73e7cc59947d2ad243d63294411f83990629f7fc.png");
+  background-color: transparent;
+  box-shadow: none;
+  background-repeat: no-repeat;
+  border-width: medium;
+  border-style: none;
+  margin: 0px 25px;
+  padding: 0px;
+  border-color: white;
+}
+#add .icon {
+  width: 20px;
+  height: 20px;
+  background-position: -151px -725px;
+}
+
+#share .icon {
+  width: 20px;
+  height: 20px;
+  background-position: -267px -824px;
+}
+#more .icon {
+  width: 20px;
+  height: 20px;
+  background-position: -154px -860px;
+}
+#like .icon {
+  width: 20px;
+  height: 20px;
+  background-position: 0px -867px;
+}
+#dislike .icon {
+  width: 20px;
+  height: 20px;
+  background-position: -174px -804px;
+}
+
+