How to make this smaller? - Kevin Powell

rmon · 2024-02-24T02:51:44.558Z

Hey there! Appreciate you guys taking time to help me out. I had a quick question as you see the three containers take up a good amount of space I was tryna screw around with it to make it smaller but can't because it keeps screwing with other stuff I'll send a CodePen of the HTML/CSS related to it if anyone can help make it better looking.

R

rmonOP•2/24/24, 3:10 AM

Ok, Just to let you guy's know I cannot send a CodePen as it's bugging out since I use imgaes that wont show up on CodePen

R

rmonOP•2/24/24, 3:12 AM

    <!--This Will House Content Regarding My Projects-->
    <div class="portfolio-projects">
      <div class="container">
        <div class="wrapper">
          <div class="CenteredHeaders">
            <h3 class="personal-info-text-design">My Work</h3>
            <h1 class="mywork">Find my work </h1>
          </div>
        </div>
        <div class="work-list">
          <div class="work">
            <img src="icons/work-1.png" alt="work-1-img">
            <div class="layer">
              <h3 class="project-styling">Calculator App</h3>
              <p class="project-styling">Experience the convenience of our user-friendly calculator app</p>
              <a href="#"></a>
            </div>
          </div>
          <div class="work">
            <img src="icons/work-2.png" alt="work-1-img">
            <div class="layer">
              <h3 class="project-styling">ToDo List</h3>
              <p class="project-styling">Simple and easy-to-use ToDo List to always stay on top of your tasks.</p>
              <a href="#"></a>
            </div>
          </div>
          <div class="work">
            <img src="icons/work-3.png" alt="work-1-img">
            <div class="layer">
              <h3 class="project-styling">Website Clone</h3>
              <p class="project-styling">Example Text</p>
              <a href="#"></a>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!--This Will House Content Regarding My Projects-->
    <div class="portfolio-projects">
      <div class="container">
        <div class="wrapper">
          <div class="CenteredHeaders">
            <h3 class="personal-info-text-design">My Work</h3>
            <h1 class="mywork">Find my work </h1>
          </div>
        </div>
        <div class="work-list">
          <div class="work">
            <img src="icons/work-1.png" alt="work-1-img">
            <div class="layer">
              <h3 class="project-styling">Calculator App</h3>
              <p class="project-styling">Experience the convenience of our user-friendly calculator app</p>
              <a href="#"></a>
            </div>
          </div>
          <div class="work">
            <img src="icons/work-2.png" alt="work-1-img">
            <div class="layer">
              <h3 class="project-styling">ToDo List</h3>
              <p class="project-styling">Simple and easy-to-use ToDo List to always stay on top of your tasks.</p>
              <a href="#"></a>
            </div>
          </div>
          <div class="work">
            <img src="icons/work-3.png" alt="work-1-img">
            <div class="layer">
              <h3 class="project-styling">Website Clone</h3>
              <p class="project-styling">Example Text</p>
              <a href="#"></a>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!--This Will House Content Regarding My Projects-->
    <div class="portfolio-projects">
      <div class="container">
        <div class="wrapper">
          <div class="CenteredHeaders">
            <h3 class="personal-info-text-design">My Work</h3>
            <h1 class="mywork">Find my work </h1>
          </div>
        </div>
        <div class="work-list">
          <div class="work">
            <img src="icons/work-1.png" alt="work-1-img">
            <div class="layer">
              <h3 class="project-styling">Calculator App</h3>
              <p class="project-styling">Experience the convenience of our user-friendly calculator app</p>
              <a href="#"></a>
            </div>
          </div>
          <div class="work">
            <img src="icons/work-2.png" alt="work-1-img">
            <div class="layer">
              <h3 class="project-styling">ToDo List</h3>
              <p class="project-styling">Simple and easy-to-use ToDo List to always stay on top of your tasks.</p>
              <a href="#"></a>
            </div>
          </div>
          <div class="work">
            <img src="icons/work-3.png" alt="work-1-img">
            <div class="layer">
              <h3 class="project-styling">Website Clone</h3>
              <p class="project-styling">Example Text</p>
              <a href="#"></a>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!--This Will House Content Regarding My Projects-->
    <div class="portfolio-projects">
      <div class="container">
        <div class="wrapper">
          <div class="CenteredHeaders">
            <h3 class="personal-info-text-design">My Work</h3>
            <h1 class="mywork">Find my work </h1>
          </div>
        </div>
        <div class="work-list">
          <div class="work">
            <img src="icons/work-1.png" alt="work-1-img">
            <div class="layer">
              <h3 class="project-styling">Calculator App</h3>
              <p class="project-styling">Experience the convenience of our user-friendly calculator app</p>
              <a href="#"></a>
            </div>
          </div>
          <div class="work">
            <img src="icons/work-2.png" alt="work-1-img">
            <div class="layer">
              <h3 class="project-styling">ToDo List</h3>
              <p class="project-styling">Simple and easy-to-use ToDo List to always stay on top of your tasks.</p>
              <a href="#"></a>
            </div>
          </div>
          <div class="work">
            <img src="icons/work-3.png" alt="work-1-img">
            <div class="layer">
              <h3 class="project-styling">Website Clone</h3>
              <p class="project-styling">Example Text</p>
              <a href="#"></a>
            </div>
          </div>
        </div>
      </div>
    </div>

R

rmonOP•2/24/24, 3:12 AM

/* Sections for styling for project portion of my website*/

.portfolio-projects {
  padding: 2em;
  background-color: #cbcbcb;
}

.personal-info-text-design {
  color: rgb(142 55 124);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.2rem;
  text-transform: uppercase;
}

.work-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-gap: 40px;
  margin-top: 50px;
}

.work {
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}

.work img {
  border-radius: 10px;
  overflow: hidden;
  display: block;
  width: 100%;
}

.layer {
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba(0, 0, 0, 0.6), #0f0f11);
  border-radius: 10px;
  position: absolute; /* Position relative to the parent .work */
  left: 0;
  bottom: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 0 40px;
  text-align: center;
  gap: 1em;
}

.project-styling {
  color: white;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
}

/* Sections for styling for project portion of my website*/

.portfolio-projects {
  padding: 2em;
  background-color: #cbcbcb;
}

.personal-info-text-design {
  color: rgb(142 55 124);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.2rem;
  text-transform: uppercase;
}

.work-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-gap: 40px;
  margin-top: 50px;
}

.work {
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}

.work img {
  border-radius: 10px;
  overflow: hidden;
  display: block;
  width: 100%;
}

.layer {
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba(0, 0, 0, 0.6), #0f0f11);
  border-radius: 10px;
  position: absolute; /* Position relative to the parent .work */
  left: 0;
  bottom: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 0 40px;
  text-align: center;
  gap: 1em;
}

.project-styling {
  color: white;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
}

/* Sections for styling for project portion of my website*/

.portfolio-projects {
  padding: 2em;
  background-color: #cbcbcb;
}

.personal-info-text-design {
  color: rgb(142 55 124);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.2rem;
  text-transform: uppercase;
}

.work-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-gap: 40px;
  margin-top: 50px;
}

.work {
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}

.work img {
  border-radius: 10px;
  overflow: hidden;
  display: block;
  width: 100%;
}

.layer {
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba(0, 0, 0, 0.6), #0f0f11);
  border-radius: 10px;
  position: absolute; /* Position relative to the parent .work */
  left: 0;
  bottom: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 0 40px;
  text-align: center;
  gap: 1em;
}

.project-styling {
  color: white;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
}

/* Sections for styling for project portion of my website*/

.portfolio-projects {
  padding: 2em;
  background-color: #cbcbcb;
}

.personal-info-text-design {
  color: rgb(142 55 124);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.2rem;
  text-transform: uppercase;
}

.work-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-gap: 40px;
  margin-top: 50px;
}

.work {
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}

.work img {
  border-radius: 10px;
  overflow: hidden;
  display: block;
  width: 100%;
}

.layer {
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba(0, 0, 0, 0.6), #0f0f11);
  border-radius: 10px;
  position: absolute; /* Position relative to the parent .work */
  left: 0;
  bottom: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 0 40px;
  text-align: center;
  gap: 1em;
}

.project-styling {
  color: white;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
}

Rrmon Ok, Just to let you guy's know I cannot send a CodePen as it's bugging out sinc...

C

curiousmissfox•2/24/24, 3:35 AM

So you know you can host your images anywhere online, even use a discord cdn link or something like https://imgur.com , upload them and then use the link in the <img src="https://myimagelink.com">

Imgur

Imgur: The magic of the Internet

C

curiousmissfox•2/24/24, 3:35 AM

I'm not totally clear on your goal. How much smaller do you want them to be?

R

rmonOP•2/24/24, 3:35 AM

Honestly the best way to put it is, Small enough where it looks nice and legible

R

rmonOP•2/24/24, 3:35 AM

Right now it's giant

R

rmonOP•2/24/24, 3:36 AM

a reference I was going off was this

Ccuriousmissfox So you know you can host your images anywhere online, even use a discord cdn lin...

R

rmonOP•2/24/24, 3:43 AM

Quick question, Should I upload them to communities?

R

rmonOP•2/24/24, 3:44 AM

https://imgur.com/PMFuSyy

Imgur

R

rmonOP•2/24/24, 3:44 AM

That's the link for it, I tried adding it into my code but it hasn't worked?

Rrmon Quick question, Should I upload them to communities?

C

curiousmissfox•2/24/24, 3:46 AM

on imgur you just go to new post.

C

curiousmissfox•2/24/24, 3:47 AM

for discord i send it to a bot so im not mucking up any servers

R

rmonOP•2/24/24, 3:47 AM

I realized, They have an option to embed for ex (<blockquote class="imgur-embed-pub" lang="en" data-id="a/Q7zrxTO" ><a href="//imgur.com/a/Q7zrxTO">Simple IPhone stock images</a></blockquote><script async src="//s.imgur.com/min/embed.js" charset="utf-8"></script>:

Rrmon https://imgur.com/PMFuSyy

C

curiousmissfox•2/24/24, 3:47 AM

if you use

<img src="https://i.imgur.com/PMFuSyy.png" alt="">

<img src="https://i.imgur.com/PMFuSyy.png" alt="">

<img src="https://i.imgur.com/PMFuSyy.png" alt="">

<img src="https://i.imgur.com/PMFuSyy.png" alt=""> it wil work

Rrmon I realized, They have an option to embed for ex (<blockquote class="imgur-embed-...

R

rmonOP•2/24/24, 3:48 AM

Doesn't look that good tho lol

C

curiousmissfox•2/24/24, 3:48 AM

you can also just use the link from github if you have your project pushed to a repo there

C

curiousmissfox•2/24/24, 3:49 AM

the image youre uploading, at least the one you linked here is very small. so it wont look good anywhere if youre trying to stretch it bigger than its height/width

R

rmonOP•2/24/24, 3:49 AM

I see

R

rmonOP•2/24/24, 3:50 AM

Let me try to figure this img situation out, I'll get back to you!

B

b1mind•2/24/24, 3:56 AM

https://picsum.photos/ is what I use for demos

Lorem Picsum

Lorem Ipsum... but for photos

B

b1mind•2/24/24, 3:56 AM

<img src="https://picsum.photos/200/300?random=1">
<img src="https://picsum.photos/200/300?random=2">

<img src="https://picsum.photos/200/300?random=1">
<img src="https://picsum.photos/200/300?random=2">

<img src="https://picsum.photos/200/300?random=1">
<img src="https://picsum.photos/200/300?random=2">

<img src="https://picsum.photos/200/300?random=1">
<img src="https://picsum.photos/200/300?random=2">

Ccuriousmissfox you can also just use the link from github if you have your project pushed to a ...

R

rmonOP•2/24/24, 4:11 AM

Just so I don't keep you waiting I'll continue a long tomorrow with this project I've been coding for the past 3-4 hours (Rookie numbers)

C

curiousmissfox•2/24/24, 4:45 AM

picsum is great. you can also use placeholder images from https://souece.unsplash.com/300x300/?fruits where you put your desired width and height in the 300x300 area and you can target keywords where i have put "fruits". ill often use it for landscape photos and use the keyword "forest", "beach", "desert" etc

Rrmon Just so I don't keep you waiting I'll continue a long tomorrow with this project...

C

curiousmissfox•2/25/24, 12:21 AM

Did you figure out how to use images you have hosted and use placeholder images ?

Ccuriousmissfox Did you figure out how to use images you have hosted and use placeholder images ...

R

rmonOP•2/25/24, 1:13 AM

Not yet Im going to give the Lorem Picsum a try in a little bit im trying to fix my PC

Bb1mind https://picsum.photos/ is what I use for demos

R

rmonOP•2/25/24, 4:24 AM

Hey I have a question, How can I get specific images?

Rrmon Not yet Im going to give the Lorem Picsum a try in a little bit im trying to fix...

C

curiousmissfox•2/25/24, 5:12 AM

I dont think so, I think it's just their library of placeholder images

Rrmon Hey I have a question, How can I get specific images?

C

curiousmissfox•2/25/24, 5:13 AM

Depends how specific ? What are you looking for ?

R

rmonOP•2/25/24, 5:13 AM

To be honest the current images I have are pretty basic stock images

R

rmonOP•2/25/24, 5:13 AM

their just phone imgs I can send em as a reference

R

rmonOP•2/25/24, 5:13 AM

Rrmon To be honest the current images I have are pretty basic stock images

C

curiousmissfox•2/25/24, 5:24 AM

And what kind of images are you looking for ? You can look through the free open source images at https://unsplash.com and see if you find anything you like better

Beautiful Free Images & Pictures | Unsplash

Beautiful, free images and photos that you can download and use for any project. Better than any royalty free or stock photos.

Ccuriousmissfox And what kind of images are you looking for ? You can look through the free open...

R

rmonOP•2/27/24, 1:22 AM

Ok apolgies for the late responses, I found a few images that look good enough

R

rmonOP•2/28/24, 2:39 AM

https://codepen.io/hrphyn/pen/yLrBpmZ Worked greatly

CodePenhrphyn

Help

...