If example is needed let me know.
#How do I make a box introduction layout?
dark ice
inland kernel
what box layout are you trying to replicate?
dark ice
what box layout are you trying to replicate?
And like adding the badges below like tha if u don't know I'll figure it out
inland kernel
you can style components in a list, and use flexbox to handle the layout itself. here's a quick example to get you started:
<ul class="pills">
<li>
<!-- add an image or svg logo here if you wish -->
<span>Skill 1</span>
</li>
<li>
<span>Skill 2</span>
</li>
</ul>
<style>
.pills {
display: flex;
flex-wrap: wrap;
gap: 4px;
list-style: none;
}
.pills li {
background-color: #eee;
padding: 4px 8px;
border-radius: 4px;
}
</style>
Where would I put this at.
inland kernel
place your styles in your style tag, and the list wherever you want it in your page
dark ice
place your styles in your style tag, and the list wherever you want it in your p...
Ok, still trying to figure this out..
dark ice
place your styles in your style tag, and the list wherever you want it in your p...
where is the style tag...
on the astro local host?
inland kernel
where is the style tag...
you have a style tag in your header
dark ice
you have a style tag in your header
Got it to work just the images just not loading
inland kernel
what images did you add?
also, you can change the background-color in the styles to something like #222222 (or anything darker) to make the text visible
dark ice
what images did you add?
inland kernel
where did you add this? in place of the comment?
dark ice
I just added it to the index.html to see what it looked like now it works..
But Im just really trying to get this layout packed down
@inland kernel
inland kernel
what part of the layout? the page content itself? the width?
dark ice
Yes, mainly the width. The only content I need is the skills badges. @inland kernel
Then I'l be set.
inland kernel
you can set the max width of any element with max-width: value; e.g. max-width: 900px; like in the website above
use this in the css of the element you want to limit the size of
dark ice
Ok so you want me to put it inside of style.css? @inland kernel
Current what it looks like ignore the desc.
inland kernel
yes, styling whatever element you want to limit the size of
you might want to wrap your content that's inside body in a <div> then style that component
in index.html
<body>
<div class="content">
My Content
</div>
</body>
in style.css
.content {
max-width: 900px;
}
My fault I'm a little slow but I'm trying which line do you want me to put.
<body>
<div class="content">
My Content
</div>
</body>
in.
inland kernel
ahh, that's just example code. in your file, you have a body element. inside your body element you have several things I assume you want to limit the width of. wrap them all inside a <div> element with your content between the opening and closing tags.
then add a class to the div so you can style that specifically in your css
inland kernel
anything that was inside body before changing it, should now be inside div
dark ice
Is there any way you can edit the index.html and give me a small example? I'm trying to learn a bit so I know how to do certain things in the future because right now I feel a bit confused.
@inland kernel
quiet bloom
My friend you may want to consider watching or reading a basic cas tutorial
inland kernel
can you undo to just before you added the above code? then paste what you have
@dark ice this is close to what I mean. I don't see the styles.css being used in your code though.
<!DOCTYPE html>
<html>
<head>
<title>i12</title>
<style>
body {
background-color: #000000;
font-family: Arial, sans-serlf;
padding: 20px;
color: rgb(235, 235, 235);
text-align: center; /* This line centers the text */
}
.profile-icon {
border-radius: 50%;
width: 100px;
height: 100px;
}
.content {
max-width: 900px;
}
</style>
</head>
<body>
<div class="content">
<img
class="profile-icon"
src="https://cdn.discordapp.com/attachments/1258199411087900682/1260884400162476074/3c801219ab93f37ba281472e63ac0798.jpg?ex=6690f19b&is=668fa01b&hm=deac5391b744203181ef706034fd810ac2a191bca9a59071ddd9540bf22aeb23&"
/>
<section id="timezone">
<h2>i12's timezone</h2>
<div id="clock"></div>
</section>
<header>Header Content</header>
<main>Main Content</main>
<footer>Footer Content</footer>
</div>
<script>
function updateClock() {
var now = new Date()
var hours = now.getHours()
var minutes = now.getMinutes()
var seconds = now.getSeconds()
hours = hours < 10 ? '0' + hours : hours
minutes = minutes < 10 ? '0' + minutes : minutes
seconds = seconds < 10 ? '0' + seconds : seconds
document.getElementById('clock').textContent =
hours + ':' + minutes + ':' + seconds
}
setInterval(updateClock, 1000)
</script>
</body>
</html>
Also, is this an Astro project or just HTML files? I believe this is just HTML, which if so, you can use a link in your head element to include your css file.
<link href="styles.css" rel="stylesheet" />
It's a Astro Project.
inland kernel
in that case you should move your css file outside src/pages like src/styles.css
dark ice
in that case you should move your css file outside `src/pages` like `src/styles....
I just started working back on the Astro Project I was working in Visual Studio.
inland kernel
This looks like an HTML project in StackBlitz, not an Astro project. But I would actually strongly recommend learning and getting comfortable with HTML/CSS/JS before starting an Astro project. There's some amazing resources out there for getting started with these.
- MDN - Getting started with the web
- w3schools - Learn HTML
Astro itself is a great next step, but it's not going to teach you the fundamentals.