modified: index.html

modified:   style.css

index.html

@@ -24,12 +24,30 @@
       <p class="name">Morgan Oakley</p>
      </div>
 
-     <div class="header-bottom"></div>
+     <div class="header-bottom">
+
+      <div class="profile-container">
+        <div class="profile-pic">
+          <img src="images/desired-outcome-narrow.png" alt="">
+        </div>
+        <div class="description">
+          <p class="message">Hi there.</p>
+          <p class="name">Morgan Oakley(@morgon)</p>
+        </div>
+      </div>
+
+      <div class="buttons-container">
+        <button class="new">New</button>
+        <button class="upload">Upload</button>
+        <button class="share">Share</button>
+      </div>
+
+     </div>
 
     </header>
 
     <main class="main-content">
-
+      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Totam, alias quod facere voluptatibus accusamus rem maiores eaque consectetur unde saepe voluptas quibusdam odio pariatur quidem cupiditate quae dolore, perferendis distinctio animi explicabo ducimus laudantium delectus. Similique dolore minus tenetur commodi cumque officia dicta saepe. Quam consequuntur quos porro eligendi perferendis. Omnis dignissimos ducimus autem quis hic! Eius ut magnam rem repellendus, et sit laborum iste, ex laboriosam earum impedit maxime. Saepe perferendis tempora ab amet vero alias quibusdam magni recusandae inventore ratione officiis culpa unde, aperiam esse sint delectus. A ad praesentium, non libero necessitatibus hic? Repellat ut nostrum, velit eum ducimus possimus quod est tenetur commodi qui mollitia, quae temporibus accusamus facere. Repellendus assumenda facere alias sed iste pariatur odio culpa quibusdam similique aspernatur, aperiam accusamus quidem maiores quis praesentium blanditiis recusandae hic ipsum architecto mollitia veritatis eius officiis voluptatum excepturi. Necessitatibus at modi inventore eius reiciendis quisquam quidem animi culpa eaque? Vero aliquid cum ea quisquam sapiente amet asperiores beatae ex optio maiores, adipisci, natus iusto dolor sunt laborum rerum doloribus recusandae atque minus totam nihil perspiciatis nisi ullam nam. Odit omnis necessitatibus provident, eaque nisi reiciendis sequi quas exercitationem, delectus quaerat pariatur accusamus est ullam sed atque commodi incidunt. Ea odit cumque corporis accusantium amet ab inventore temporibus similique facilis! Ipsam aliquam quaerat minus similique in praesentium omnis minima at beatae! Excepturi magnam dolor quia voluptatum sequi, est doloribus dolorem saepe, rem maxime sapiente accusamus aperiam autem culpa quaerat nobis veniam ut qui eligendi optio perferendis minus temporibus quae incidunt! Sint sunt animi nulla, sequi corporis delectus esse repellendus, harum, eligendi ullam consequatur! Ipsa quia quae pariatur eos? Dignissimos, aliquam magnam delectus dolorum ullam commodi non error illo numquam. Minus iure deserunt odit nulla corporis eveniet nisi nam, inventore omnis saepe deleniti commodi. Culpa blanditiis debitis quo dolores et, itaque possimus? Ratione, reiciendis ab! Incidunt, sequi nulla. Corporis dignissimos sunt libero porro veniam natus quae ullam eius voluptatum aperiam molestias quam ex, ipsa commodi placeat nemo velit est ab culpa architecto quia quas! Eveniet, accusantium eum ipsa soluta repellat modi deleniti quae repellendus hic necessitatibus vitae! Sunt iure eius rem corrupti fugiat non velit quisquam debitis pariatur voluptate quam sequi magnam, ipsum sapiente porro at placeat assumenda dignissimos repellendus dolores? Fugiat repellendus ullam labore perspiciatis pariatur ut saepe, minima, consectetur debitis, doloribus optio odit ad ex dolores. Explicabo minima iusto tempore et dignissimos delectus cumque deserunt temporibus. Corrupti distinctio voluptatem nulla modi eligendi commodi odio quam cum, harum in pariatur placeat cumque sequi suscipit laboriosam voluptates expedita iste nesciunt minus. Nisi consectetur iusto cupiditate harum repellat quisquam provident earum veniam, repellendus sed! Ipsam, debitis ipsum! Magni dolorum harum ipsa exercitationem totam aliquam at velit commodi consequuntur iusto veritatis incidunt fugit blanditiis rerum, dolorem architecto sit ducimus facere voluptate dicta sequi expedita quo dolore. Quas quod numquam consequuntur fugiat maxime! Omnis aliquid laudantium aliquam et molestiae quae quo facere provident vitae animi sed officia necessitatibus vero odit ex temporibus impedit exercitationem neque eum cumque, blanditiis est veritatis culpa. Temporibus, harum minima eveniet quia laudantium in deserunt sequi ipsa? Deleniti id doloremque optio recusandae fuga eaque provident eos repellat dolorem reiciendis, nam adipisci magnam! Impedit sit neque voluptatibus obcaecati iste placeat, tempora saepe distinctio necessitatibus dicta ex nobis corrupti cum ducimus magni voluptates, eligendi aliquam aspernatur, ratione doloremque. Nam sunt praesentium reiciendis magnam! Voluptatibus cum cumque maxime dolorum at molestias dicta corrupti molestiae aliquam? Suscipit consectetur officia fugit ea error iure distinctio aliquam dicta labore iusto obcaecati pariatur ullam voluptatibus corporis qui, hic inventore incidunt provident, cumque, sunt amet numquam. Sed, odit! Accusamus sunt ad vitae porro veniam assumenda. Totam labore aliquid eaque sapiente perferendis ullam, quaerat impedit ducimus corrupti? Nemo consequuntur architecto minus iste obcaecati fugiat assumenda necessitatibus temporibus fuga veritatis minima incidunt quae adipisci reiciendis beatae aspernatur voluptate, quisquam eligendi voluptas provident, ipsum id. Natus omnis optio rerum mollitia ipsum minus veritatis, aut nostrum a suscipit dicta adipisci delectus consequatur expedita nobis temporibus? Libero soluta asperiores natus? Fuga minima at cum similique sit, fugit iure culpa, id placeat quae dicta aliquam voluptatum, unde mollitia distinctio omnis temporibus? Ipsa enim accusamus tenetur, ullam perferendis suscipit. Asperiores, eos? Aliquam, nesciunt neque beatae sunt quas cupiditate cumque ullam dolorem iure deleniti, perferendis nam dolor recusandae blanditiis sapiente doloremque animi aliquid? Voluptas, magni quos illum quisquam corrupti adipisci, totam sit mollitia unde minima nobis consequuntur ipsam odio quo temporibus magnam ut nulla in fugiat animi? Ut illo labore, tempore explicabo autem aliquam facere molestias, eum culpa exercitationem deleniti. Assumenda non laboriosam atque neque est ad ex aliquam odio eligendi autem quod beatae, nisi quis iste, id perferendis fuga velit tenetur voluptate reiciendis sed saepe! Qui, esse illum velit quasi corrupti et voluptas repudiandae voluptates, pariatur culpa, eveniet similique excepturi? Nesciunt eligendi, aspernatur aut tempore ex, vero quis magni quod ipsum debitis esse commodi ut? Atque commodi cum ipsam porro officia quia nostrum obcaecati eos, nihil quis labore accusamus! Quibusdam magni itaque ipsa sequi velit? Nemo optio nobis consequuntur molestiae numquam tenetur officia nisi quis, nihil tempore asperiores eaque vitae eveniet, corrupti ducimus sapiente natus recusandae accusantium, magnam voluptates repudiandae. Vero tempore laborum saepe impedit velit minus quasi natus doloribus nihil rem suscipit aspernatur deleniti praesentium tenetur necessitatibus iste porro ipsa ea non ipsum perferendis, blanditiis odio voluptatum. Nihil porro ex labore optio aliquid voluptatibus similique placeat! Repellat molestias rem ratione nesciunt earum quos expedita, veritatis assumenda sed magni dicta deleniti possimus voluptate beatae temporibus minus, facilis, consequatur reiciendis rerum dolore fuga! Explicabo expedita id fuga fugiat modi, dolorem ullam ipsum magni, est voluptatibus possimus exercitationem molestiae nam reprehenderit commodi consequatur consectetur! Sapiente corporis tempora iure perspiciatis qui itaque, illum minus, adipisci voluptates magnam at ipsa sit consequuntur neque laudantium earum nulla architecto cupiditate ducimus ipsam necessitatibus maiores provident nam voluptas. Architecto culpa, natus ipsa, ducimus, eius dolor impedit vitae recusandae rerum quia eum ad quo! Dolor inventore alias sequi corporis? Deserunt quia dolorem voluptatibus assumenda perspiciatis reiciendis a, nam aspernatur quasi veritatis atque eius animi. Voluptatum quam animi molestias sit debitis ad iste reprehenderit unde iure explicabo laudantium sunt vitae omnis, voluptates culpa, assumenda facilis rerum quidem officiis perferendis autem libero adipisci a velit? Voluptas possimus eligendi voluptate suscipit in omnis, corporis veritatis a dicta, vitae culpa sed, cum vel sunt nihil animi dignissimos quo eius nostrum consequuntur. Eos beatae excepturi totam rem, alias ea eum! Iure aspernatur obcaecati corrupti sequi ad et porro maiores asperiores, eius, enim voluptates nesciunt aliquam officiis aut suscipit optio cumque delectus excepturi. Voluptas, odio quasi? Ea asperiores accusamus aliquam eum nobis ut sequi eveniet eius officiis temporibus impedit consequuntur autem, magnam consectetur. Accusamus laboriosam, doloribus possimus maxime praesentium tempore facilis perspiciatis quo quam vel velit saepe molestiae ducimus! Veniam earum voluptatum rem exercitationem facilis reiciendis. Quibusdam, ut deleniti! Praesentium autem, dolorem nostrum, eos ullam sapiente itaque labore reiciendis iste voluptate unde natus voluptas optio nihil veritatis maxime perferendis eius nulla ratione. Quidem quis asperiores vitae nobis accusamus veniam aliquid, culpa aut placeat maiores nostrum illum consequuntur? Laborum reiciendis numquam sint minima ullam! Quia nostrum incidunt ducimus blanditiis. Laborum, aperiam eos nobis distinctio fugit molestias sequi vero tempora corporis, quaerat dicta deleniti repellendus et veritatis odio! Repudiandae quasi amet nihil vero dolorem laborum, non perspiciatis eligendi eveniet veritatis sunt eius sint impedit quaerat, consectetur saepe necessitatibus velit eaque ullam debitis cumque ut? Ipsum sunt earum voluptas, accusantium quam maiores ratione magnam explicabo, non ad minima unde. Neque, deleniti maxime? Ipsam nam quo officiis natus corporis, totam enim facilis error dolor ullam ratione fugiat atque fugit tempora, dicta quia quisquam minima. Ea recusandae aut nulla tenetur iusto adipisci laborum non nihil eligendi doloribus inventore officiis ipsa quae odio accusamus ab, possimus consequuntur, qui obcaecati commodi! Maxime ullam ratione quo. Repudiandae repellat aliquam iure sapiente vitae corrupti perspiciatis optio facere libero vero. Sapiente explicabo officiis doloremque ipsum doloribus quaerat laboriosam quam, aspernatur porro soluta inventore nam ipsa aliquam iusto tempore, nemo dolorum? Accusamus illo, nisi cumque tempora repellat dicta itaque asperiores quos laboriosam inventore dolorem nulla doloremque quo excepturi, facilis id rerum dignissimos veritatis, numquam aspernatur! Facere sunt quibusdam vel! Impedit pariatur ut suscipit et veniam. Harum impedit voluptatibus repellendus quidem, quisquam molestiae voluptates in alias consectetur quaerat? Itaque facilis, illo recusandae in labore nesciunt a maxime voluptatum. Hic dolore enim nisi, a odit autem placeat eveniet facilis illum dolor adipisci voluptas, tempora eum praesentium ipsam, nihil alias. Quo saepe a, quos accusamus recusandae iure est eos quod consectetur pariatur, eveniet sit sed officiis facilis rerum quae, accusantium numquam architecto impedit veniam aspernatur nisi? Id veniam quae accusantium laborum dolorum explicabo magni officia laboriosam, harum suscipit fugiat ullam eveniet minima repellat eos consequatur, quaerat iure, pariatur placeat sequi? Minus, laboriosam facere neque placeat dolore doloribus qui magni, nostrum molestiae, illo itaque modi esse sed veniam excepturi numquam! Vel, porro. Mollitia, dolore placeat tempora perspiciatis unde vitae eius quae, aspernatur magni, a totam accusantium cum deserunt ducimus illum corporis qui sunt. Reiciendis porro veniam itaque, corporis odit veritatis maxime recusandae minima repellendus quasi assumenda nam, velit sapiente, iusto aspernatur quidem animi sed eaque delectus dolorem natus tempore unde at? Atque itaque voluptas ex. Excepturi, perspiciatis similique laborum impedit nobis porro nulla saepe ullam rerum ipsam numquam quidem, vitae omnis dolore minima ex deleniti voluptatum reiciendis aliquam eum ad iste at. Iste rem qui, adipisci, fugiat illum sequi in, illo ut omnis dolores blanditiis consequatur impedit provident ratione iusto incidunt quisquam eveniet eligendi saepe deleniti placeat expedita magnam. Rem quasi soluta, tenetur dolores molestias vel illo facere totam maiores corporis minima dolorum laudantium voluptatem consequuntur eveniet. Atque vitae dolores repellendus possimus maxime! Maxime obcaecati perferendis quidem quasi natus eos tempore ipsum ratione? Placeat similique laboriosam adipisci aspernatur molestiae possimus, excepturi voluptatibus aliquid debitis. Dicta consectetur id quos ullam eum, et similique accusamus possimus ad autem dolores odit ut beatae ipsum sed nulla! Ipsum corporis nam facilis rem nulla minima at non hic enim, magnam architecto voluptas temporibus soluta! Odit alias dignissimos nostrum quaerat, unde odio, ad, exercitationem dolore sit consequuntur quisquam nesciunt consequatur sed excepturi fuga quam repudiandae iure in. Quia architecto error soluta nostrum consequuntur maxime, dolores nihil aliquam quod. Enim recusandae rem impedit, consequatur natus tempore laboriosam quo quidem ad repellendus quas consequuntur, harum pariatur perspiciatis? Doloribus dignissimos ut ab unde, nihil tenetur, minus saepe temporibus ipsa fugiat, aliquid incidunt maxime obcaecati quasi pariatur esse error a fugit non hic quam praesentium nesciunt. Numquam, vel quaerat dolorem vitae consequatur cupiditate nemo adipisci aliquam accusantium eveniet sequi, minima accusamus aliquid, temporibus reprehenderit eum perspiciatis saepe magni deserunt recusandae. Dicta sed ratione non tempora, soluta quam culpa eius debitis facere iste quidem, ea veniam esse corrupti sapiente maiores possimus praesentium, quis deleniti voluptas suscipit. Dignissimos vel, illum voluptate illo praesentium eius, aspernatur similique architecto nihil libero nobis doloremque beatae quos ab, quam magni at quaerat adipisci atque. Maxime voluptatum assumenda libero temporibus vel numquam doloribus et facilis ut exercitationem! Iure vero odio ad est optio sunt totam pariatur similique atque quod excepturi adipisci minima minus fuga, dolores vel cupiditate quaerat necessitatibus accusantium ab laboriosam rem ex at! Esse nemo, incidunt nostrum at fuga omnis tenetur, tempore porro totam quis ipsam vero architecto sed, harum voluptates adipisci ea cupiditate veniam. Ut animi, in dignissimos saepe quia ducimus perferendis quo commodi quae. Ratione atque doloribus distinctio omnis tempora, ea rem, eaque, natus molestias minima culpa earum esse fugit necessitatibus iure molestiae nostrum quo. Deleniti dolorem dolore quam voluptatibus veritatis, harum, libero hic necessitatibus fugit, ducimus sunt! Alias amet ea, ad voluptatum deserunt quam explicabo molestiae non tempore eius eligendi esse! Optio quidem a placeat pariatur culpa similique possimus voluptates vitae doloribus sed mollitia, autem quis nesciunt hic blanditiis deserunt quos eveniet cum totam voluptas voluptatem harum et! Tenetur aliquam rerum odit sint harum? Veritatis, doloremque repellendus ex consequuntur quod cupiditate similique iure laudantium non! Molestias maiores porro nesciunt delectus recusandae aliquam eum pariatur ratione ipsam rem ducimus hic sint, ullam ea voluptatibus et, mollitia, dolor eius! Accusamus quod sapiente non quis aut! Quidem odio sit vel consequatur quibusdam minima expedita! Iure, expedita!
     </main>
 
 

style.css

@@ -52,19 +52,26 @@ img {
 .main-container{
   display: grid;
   grid-template-columns: 1fr 5fr;
+  grid-template-rows: repeat(2,auto);
 }
 .header{
-  border: 1px solid #000;
   grid-column: 2/6;
   grid-row: 1;
   padding: 20px;
+
 }
 .header-top {
   display: grid;
   grid-template-columns: 1fr 8fr 1fr 1fr 2fr ;
   place-content: center;
   place-items: center;
 }
+.header-bottom{
+  display: grid;
+  grid-template-columns: repeat(2,1fr);
+  justify-content: space-between;
+  padding: 20px;
+}
 #searchbar {
   border: none;
   background: #e2e8f0;
@@ -81,9 +88,40 @@ img {
   height: 100%;
   border-radius: 25px;
 }
+
 .header-top .name {
   font-weight: bold;
 }
+.profile-container{
+  display: grid;
+  place-items: center;
+  justify-content: start;
+  grid-template-columns:auto auto;
+  gap: 10px;
+}
+.buttons-container {
+  display: grid;
+  grid-template-columns: repeat(3,auto);
+  justify-items: center;
+  align-items: center;
+}
+button{
+  cursor: pointer;
+}
+.message {
+  font-size: 0.8rem;
+}
+.buttons-container button{
+  padding: 5px 26px;
+  border: none;
+  background: #1992d4;
+  color: #fff;
+  font-weight: bold;
+  border-radius: 20px;
+
+}
+
+
 .main-content{
   grid-column: 2/6;
   grid-row: 2;