Kevin Powell - Community•4mo ago

How to make this smaller?

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.

26 Replies

RMON•4mo ago

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

    <!--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>

/* 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;
}

clevermissfox•4mo ago

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

clevermissfox•4mo ago

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

RMON•4mo ago

Honestly the best way to put it is, Small enough where it looks nice and legible Right now it's giant

RMON•4mo ago

a reference I was going off was this

RMON•4mo ago

Quick question, Should I upload them to communities?

RMON•4mo ago

https://imgur.com/PMFuSyy

Imgur

RMON•4mo ago

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

clevermissfox•4mo ago

on imgur you just go to new post.

clevermissfox•4mo ago

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

RMON•4mo ago

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>:

clevermissfox•4mo ago

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

RMON•4mo ago

Doesn't look that good tho lol

clevermissfox•4mo ago

you can also just use the link from github if you have your project pushed to a repo there 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

RMON•4mo ago

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

b1mind•4mo ago

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

Lorem Picsum

Lorem Ipsum... but for photos

b1mind•4mo ago

<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">

RMON•4mo ago

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)

clevermissfox•4mo ago

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 Did you figure out how to use images you have hosted and use placeholder images ?

RMON•4mo ago

Not yet Im going to give the Lorem Picsum a try in a little bit im trying to fix my PC Hey I have a question, How can I get specific images?

clevermissfox•4mo ago

I dont think so, I think it's just their library of placeholder images Depends how specific ? What are you looking for ?

RMON•4mo ago

To be honest the current images I have are pretty basic stock images their just phone imgs I can send em as a reference

RMON•4mo ago

clevermissfox•4mo ago

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.

RMON•4mo ago

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

RMON•4mo ago

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

hrphyn

CodePen

Help

...

Gaming

Programming

How to make this smaller?