KPC
Kevin Powell - Community•10mo ago
RMON

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.
No description
26 Replies
RMON
RMONOP•10mo 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
clevermissfox•10mo 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
Imgur: The magic of the Internet
clevermissfox
clevermissfox•10mo ago
I'm not totally clear on your goal. How much smaller do you want them to be?
RMON
RMONOP•10mo ago
Honestly the best way to put it is, Small enough where it looks nice and legible Right now it's giant
RMON
RMONOP•10mo ago
a reference I was going off was this
No description
RMON
RMONOP•10mo ago
Quick question, Should I upload them to communities?
RMON
RMONOP•10mo ago
RMON
RMONOP•10mo ago
That's the link for it, I tried adding it into my code but it hasn't worked?
clevermissfox
clevermissfox•10mo ago
on imgur you just go to new post.
clevermissfox
clevermissfox•10mo ago
for discord i send it to a bot so im not mucking up any servers
RMON
RMONOP•10mo 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
clevermissfox•10mo ago
if you use <img src="https://i.imgur.com/PMFuSyy.png" alt=""> it wil work
RMON
RMONOP•10mo ago
Doesn't look that good tho lol
clevermissfox
clevermissfox•10mo 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
RMONOP•10mo ago
I see Let me try to figure this img situation out, I'll get back to you!
b1mind
b1mind•10mo ago
https://picsum.photos/ is what I use for demos
Lorem Picsum
Lorem Picsum
Lorem Ipsum... but for photos
b1mind
b1mind•10mo 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
RMONOP•10mo 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
clevermissfox•10mo 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
RMONOP•10mo 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
clevermissfox•10mo ago
I dont think so, I think it's just their library of placeholder images Depends how specific ? What are you looking for ?
RMON
RMONOP•10mo 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
RMONOP•10mo ago
No description
No description
No description
clevermissfox
clevermissfox•10mo 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
RMONOP•10mo ago
Ok apolgies for the late responses, I found a few images that look good enough
RMON
RMONOP•10mo ago
Want results from more Discord servers?
Add your server