using flex positioning instead of grid

canriquez · Nov 26, 2019 · b3c0167 · b3c0167
1 parent 3b2df80
commit b3c0167
Show file tree

Hide file tree

Showing 3 changed files with 295 additions and 14 deletions.
diff --git a/index.html b/index.html
@@ -20,7 +20,7 @@
                 <a href="https://www.youtube.com"> <img src="img/youtube_logo.png" alt="logo"> </a>
             </div>
             <div id="in-search" >
-                <input type="text" value="Search" placeholder="search">
+                <input type="text" value="" placeholder="search">
             </div>
             <div id="b-search" >
                 <button type="button"><span id="magnifier"></span></button>

diff --git a/style.css b/style.css
@@ -4,8 +4,9 @@
   width: 1000px;
   height: 50px;
 
-  display: grid;
-  grid-template-columns: repeat(1fr, 14);
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
 }
 
 #main-video {
@@ -39,23 +40,24 @@
 }
 
 #menu-icon {
-  grid-column: 1 / span 1;
+  width: 10%;
 }
 #logo-icon {
-  grid-column: 2 / span 2;
-
+  width: 10%;
   display: flex;
   align-items: center;
   justify-content: left;
 }
+
 #in-search {
-  grid-column: 4 / span 7;
+  width: 60%;
   display: flex;
   align-items: center;
   justify-content: flex-end;
 }
+
 #b-search {
-  grid-column: 11 / 12;
+  width: 15%;
   display: flex;
   align-items: center;
   justify-content: flex-start;
@@ -74,13 +76,13 @@
   border-color: rgb(211, 211, 211) rgb(211, 211, 211) rgb(211, 211, 211) white;
 }
 #arrow-icon {
-  grid-column: 12 / 13;
+  width: 5%;
 }
 #bell-icon {
-  grid-column: 13 / 14;
+  width: 5%;
 }
 #b-sign-in {
-  grid-column: 14 / 15;
+  width: 10%;
 }
 
 #b-sign-in button {
@@ -106,7 +108,7 @@
 }
 
 #logo-icon img {
-  width: 50%;
+  width: 100%;
 }
 
 #magnifier {
@@ -142,7 +144,7 @@
   background-repeat: no-repeat;
   border-width: medium;
   border-style: none;
-  margin: 0px 25px;
+  margin: 0px 0px;
   padding: 0px;
   border-color: white;
 }
@@ -184,7 +186,7 @@
 }
 
 #in-search input {
-  width: 80%;
+  width: 90%;
   height: 60%;
 }
 

diff --git a/style_old.css b/style_old.css
@@ -0,0 +1,279 @@
+#navbar {
+  grid-area: navbar;
+  border: 1px solid black;
+  width: 1000px;
+  height: 50px;
+
+  display: grid;
+  grid-template-columns: repeat(1fr, 14);
+}
+
+#main-video {
+  grid-area: main;
+  border: 1px solid black;
+}
+
+#sidebar {
+  grid-area: sidebar;
+  border: 1px solid black;
+}
+
+.wrapper {
+  margin: auto;
+  display: grid;
+  width: 1000px;
+  grid-gap: 10px;
+  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
+  grid-template-areas:
+    "navbar navbar navbar navbar navbar"
+    "main main main sidebar sidebar"
+    "footer  footer  footer footer footer";
+  background-color: #fff;
+  color: #444;
+}
+
+.wrappers-navbar {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+#menu-icon {
+  grid-column: 1 / span 1;
+}
+#logo-icon {
+  grid-column: 2 / span 1;
+
+  display: flex;
+  align-items: center;
+  justify-content: left;
+}
+#in-search {
+  grid-column: 3 / span 7;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+#b-search {
+  grid-column: 11 / 12;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+}
+
+#b-search button {
+  height: 73%;
+  background-color: rgb(248, 248, 248);
+
+  border-top-left-radius: 0px 0px;
+  border-bottom-left-radius: 0px 0px;
+  border-top-right-radius: 2px 2px;
+  border-bottom-right-radius: 2px 2px;
+  border-width: 1px 1px 1px 0px;
+  border-style: solid solid solid none;
+  border-color: rgb(211, 211, 211) rgb(211, 211, 211) rgb(211, 211, 211) white;
+}
+#arrow-icon {
+  grid-column: 12 / 13;
+}
+#bell-icon {
+  grid-column: 13 / 14;
+}
+#b-sign-in {
+  grid-column: 14 / 15;
+}
+
+#b-sign-in button {
+  height: 70%;
+  background-color: rgb(22, 122, 198);
+  width: 80%;
+
+  border-radius: 2px;
+  border-width: 1px;
+  border-style: solid;
+  border-color: rgb(22, 122, 198);
+}
+
+#b-sign-in span {
+  width: 80%;
+  font-size: 100%;
+  color: white;
+  border-width: 0px;
+  border-style: none;
+  margin: 0px;
+  padding: 0px;
+  border-color: white;
+}
+
+#logo-icon img {
+  width: 50%;
+}
+
+#magnifier {
+  font-size: 100%;
+  display: block;
+  opacity: 0.6;
+  text-indent: -10000px;
+  background-image: url("https://archive.ph/Bss88/73e7cc59947d2ad243d63294411f83990629f7fc.png");
+  background-color: transparent;
+  width: 15px;
+  height: 15px;
+  box-shadow: none;
+  background-position: -28px -66px;
+  background-repeat: no-repeat;
+  border-width: medium;
+  border-style: none;
+  margin: 0px 25px;
+  padding: 0px;
+  border-color: white;
+}
+
+#arrow-icon div {
+  font-size: 100%;
+  display: block;
+  opacity: 0.6;
+  text-indent: -10000px;
+  background-image: url("https://archive.ph/Bss88/73e7cc59947d2ad243d63294411f83990629f7fc.png");
+  background-color: transparent;
+  width: 24px;
+  height: 24px;
+  box-shadow: none;
+  background-position: -125px -314px;
+  background-repeat: no-repeat;
+  border-width: medium;
+  border-style: none;
+  margin: 0px 25px;
+  padding: 0px;
+  border-color: white;
+}
+
+#bell-icon div {
+  width: 24px;
+  height: 24px;
+  display: block;
+  opacity: 0.6;
+}
+
+#sing-in {
+  font-size: 100%;
+  background-color: transparent;
+  border-width: 0px;
+  border-style: none;
+  margin: 0px;
+  padding: 0px;
+  border-color: white;
+}
+
+#menu-icon span {
+  font-size: 100%;
+  display: block;
+  opacity: 0.6;
+  text-indent: -10000px;
+  background-image: url("https://archive.ph/Bss88/73e7cc59947d2ad243d63294411f83990629f7fc.png");
+  background-color: transparent;
+  width: 16px;
+  height: 16px;
+  box-shadow: none;
+  background-position: -198px -862px;
+  background-repeat: no-repeat;
+  border-width: medium;
+  border-style: none;
+  margin: 0px 25px;
+  padding: 0px;
+  border-color: white;
+}
+
+#in-search input {
+  width: 80%;
+  height: 60%;
+}
+
+#video-likes {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+}
+
+#author-icon {
+  width: 10%;
+}
+
+#subscribe-author {
+  width: 90%;
+}
+
+#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;
+}
+
+.up-next {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+}