< !DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
how do I create a responsive three column responsive web page using css grid.
To create a three-column responsive web page using CSS grid, you can follow these steps:
- Create the HTML structure:
<div class=“grid-container”>
<div class=“grid-item”>Column 1</div>
<div class=“grid-item”>Column 2</div>
<div class=“grid-item”>Column 3</div>
</div>
- Add CSS to create the grid container and set the number of columns:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 20px;
}
This will create a grid container with three columns of equal width and a gap of 20 pixels between them.
- Add CSS to make the grid responsive:
@media screen and (max-width: 768px) {
.grid-container {
grid-template-columns: 1fr;
}
}
This will change the grid to a single column when the screen size is less than or equal to 768 pixels.
- Add CSS to style the grid items:
.grid-item {
background-color: #fff;
padding: 20px;
text-align: center;
font-size: 20px;
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3);
}
This will add some basic styling to the grid items, including a white background, padding, center alignment, font size, and a box shadow.
Here’s the complete CSS code:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 20px;
}
@media screen and (max-width: 768px) {
.grid-container {
grid-template-columns: 1fr;
}
}
.grid-item {
background-color: #fff;
padding: 20px;
text-align: center;
font-size: 20px;
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3);
}
Note that you can customize the CSS to suit your specific needs and design preferences.
Onno:
great! now create a portfolio web page for a design student looking for employment
Sure! Here’s an example of a portfolio web page for a design student looking for employment:
HTML code:
<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset=“UTF-8”>
<title>Design Portfolio | Jane Doe</title>
<link rel=“stylesheet” href=“style.css”>
</head>
<body>
<header>
<h1>Jane Doe</h1>
<nav>
<ul>
<li><a href=“#about”>About</a></li>
<li><a href=“#work”>Work</a></li>
<li><a href=“#contact”>Contact</a></li>
</ul>
</nav>
</header>
<main>
<section id=“about”>
<h2>About Me</h2>
<p>I am a recent graduate from XYZ University with a degree in Graphic Design. Throughout my studies, I have developed a strong passion for visual storytelling and creating unique designs that capture the essence of a brand. I am constantly seeking new challenges and opportunities to expand my skill set.</p>
<img src=“profile-pic.jpg” alt=“Jane Doe”>
</section>
<section id=“work”>
<h2>My Work</h2>
<div class=“grid-container”>
<div class=“grid-item”>
<img src=“project1.jpg” alt=“Project 1”>
<h3>Project 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi euismod purus velit, a volutpat enim pellentesque ac.</p>
</div>
<div class=“grid-item”>
<img src=“project2.jpg” alt=“Project 2”>
<h3>Project 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi euismod purus velit, a volutpat enim pellentesque ac.</p>
</div>
<div class=“grid-item”>
<img src=“project3.jpg” alt=“Project 3”>
<h3>Project 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi euismod purus velit, a volutpat enim pellentesque ac.</p>
</div>
</div>
</section>
<section id=“contact”>
<h2>Contact Me</h2>
<form action=“#” method=“post”>
<label for=“name”>Name:</label>
<input type=“text” id=“name” name=“name”>
<label for=“email”>Email:</label>
<input type=“email” id=“email” name=“email”>
<label for=“message”>Message:</label>
<textarea id=“message” name=“message”></textarea>
<button type=“submit”>Send Message</button>
</form>
</section>
</main>
<footer>
<p>© 2023 Jane Doe</p>
</footer>
</body>
</html>
CSS code:
/* Global styles */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: Arial, sans-serif;
font-size: 16px;
line-height: 1.5;
}
h1, h2, h3 {
font-family: ‘Montserrat’, sans-serif;
}
a {
color: #333;
text-decoration: none;
}
a
onno:
Can you use images from the web to make this attractive?
Sure! Here’s an updated HTML code for the portfolio web page, with image URLs from the web:
<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset=“UTF-8”>
<title>Design Portfolio | Jane Doe</title>
<link rel=“stylesheet” href=“style.css”>
</head>
<body>
<header>
<h1>Jane Doe</h1>
<nav>
<ul>
<li><a href=“#about”>About</a></li>
<li><a href=“#work”>Work</a></li>
<li><a href=“#contact”>Contact</a></li>
</ul>
</nav>
</header>
<main>
<section id=“about”>
<h2>About Me</h2>
<p>I am a recent graduate from XYZ University with a degree in Graphic Design. Throughout my studies, I have developed a strong passion for visual storytelling and creating unique designs that capture the essence of a brand. I am constantly seeking new challenges and opportunities to expand my skill set.</p>
<img src=“https://picsum.photos/400/400?random=1” alt=“Jane Doe”>
</section>
<section id=“work”>
<h2>My Work</h2>
<div class=“grid-container”>
<div class=“grid-item”>
<img src=“https://picsum.photos/400/400?random=2” alt=“Project 1”>
<h3>Project 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi euismod purus velit, a volutpat enim pellentesque ac.</p>
</div>
<div class=“grid-item”>
<img src=“https://picsum.photos/400/400?random=3” alt=“Project 2”>
<h3>Project 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi euismod purus velit, a volutpat enim pellentesque ac.</p>
</div>
<div class=“grid-item”>
<img src=“https://picsum.photos/400/400?random=4” alt=“Project 3”>
<h3>Project 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi euismod purus velit, a volutpat enim pellentesque ac.</p>
</div>
</div>
</section>
<section id=“contact”>
<h2>Contact Me</h2>
<form action=“#” method=“post”>
<label for=“name”>Name:</label>
<input type=“text” id=“name” name=“name”>
<label for=“email”>Email:</label>
<input type=“email” id=“email” name=“email”>
<label for=“message”>Message:</label>
<textarea id=“message” name=“message”></textarea>
<button type=“submit”>Send Message</button>
</form>
</section>
</main>
<footer>
<p>© 2023 Jane Doe</p>
</footer>
</body>
</html>
Note that the src attributes of the img elements now point to image URLs from the web, obtained using the Lorem Picsum service.
Onno:
No background picture to make eveything unified? How about design elements. Can we do it in 3 columns?
Sure! Here’s an updated HTML code for the portfolio web page with a background image, design elements, and a three-column layout using CSS Grid:
<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset=“UTF-8”>
<title>Design Portfolio | Jane Doe</title>
<link rel=“stylesheet” href=“style.css”>
</head>
<body>
<header>
<h1>Jane Doe</h1>
<nav>
<ul>
<li><a href=“#about”>About</a></li>
<li><a href=“#work”>Work</a></li>
<li><a href=“#contact”>Contact</a></li>
</ul>
</nav>
</header>
<main>
<section id=“about” class=“section”>
<div class=“grid-container”>
<div class=“grid-item”>
<h2>About Me</h2>
<p>I am a recent graduate from XYZ University with a degree in Graphic Design. Throughout my studies, I have developed a strong passion for visual storytelling and creating unique designs that capture the essence of a brand. I am constantly seeking new challenges and opportunities to expand my skill set.</p>
</div>
<div class=“grid-item”>
<img src=“https://picsum.photos/400/400?random=1” alt=“Jane Doe”>
</div>
</div>
</section>
<section id=“work” class=“section”>
<h2>My Work</h2>
<div class=“grid-container”>
<div class=“grid-item”>
<img src=“https://picsum.photos/400/400?random=2” alt=“Project 1”>
<h3>Project 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi euismod purus velit, a volutpat enim pellentesque ac.</p>
</div>
<div class=“grid-item”>
<img src=“https://picsum.photos/400/400?random=3” alt=“Project 2”>
<h3>Project 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi euismod purus velit, a volutpat enim pellentesque ac.</p>
</div>
<div class=“grid-item”>
<img src=“https://picsum.photos/400/400?random=4” alt=“Project 3”>
<h3>Project 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi euismod purus velit, a volutpat enim pellentesque ac.</p>
</div>
</div>
</section>
<section id=“contact” class=“section”>
<h2>Contact Me</h2>
<form action=“#” method=“post”>
<label for=“name”>Name:</label>
<input type=“text” id=“name” name=“name”>
<label for=“email”>Email:</label>
<input type=“email” id=“email” name=“email”>
<label for=“message”>Message:</label>
<textarea id=“message” name=“message”></textarea>
<button type=“submit”>Send Message</button>
</form>
</section>
</main>
<footer>
<p>© 2023 Jane Doe</p>
</footer>
</body>
</html>
And
/* Reset default margin and padding */
* {
margin: 0;
padding: 0;
}
/* Set the background image */
body {
background-image: url(“https://picsum.photos/1920/1080?random=5”);
background-size: cover;
}
/* Style the header */
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
}
h1 {
font-size: 2.5rem;
font-weight: bold;
color: #fff;
}
nav ul {
display: flex;
list-style: none;
}
nav li {
margin: 0 20px;
}
nav a {
color: #fff;
text-decoration: none;
font-size: 1.2rem;
font-weight: bold;
}
/* Style the main content */
main {
display: flex;
flex-direction: column;
align-items: center;
padding: 50px 20px;
}
.section {
width: 100%;
margin-bottom: 50px;
}
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
}
.grid-item {
background-color: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
img {
max-width: 100%;
height: auto;
margin-bottom: 20px;
border-radius: 5px;
}
h2 {
font-size: 2rem;
font-weight: bold;
color: #fff;
margin-bottom: 20px;
}
h3 {
font-size: 1.5rem;
font-weight: bold;
margin-bottom: 10px;
}
p {
font-size: 1.2rem;
line-height: 1.5;
margin-bottom: 20px;
}
form label {
font-size: 1.2rem;
font-weight: bold;
margin-bottom: 10px;
display: block;
}
form input,
form textarea {
padding: 10px;
margin-bottom: 20px;
border-radius: 5px;
border: none;
font-size: 1.2rem;
}
form button {
background-color: #333;
color: #fff;
padding: 10px 20px;
border-radius: 5px;
border: none;
font-size: 1.2rem;
font-weight: bold;
cursor: pointer;
transition: background-color 0.2s ease-in-out;
}
form button:hover {
background-color: #555;
}
This should style the HTML code I provided earlier and create a visually appealing portfolio web page with the requested design elements.
Onno:
Nw could you make it responsive so it looks good on a smart phone?
Sure! Here’s the updated CSS code with media queries to make the portfolio web page responsive for smaller screens such as smartphones:
/* Reset default margin and padding */
* {
margin: 0;
padding: 0;
}
/* Set the background image */
body {
background-image: url(“https://picsum.photos/1920/1080?random=5”);
background-size: cover;
}
/* Style the header */
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
}
h1 {
font-size: 2.5rem;
font-weight: bold;
color: #fff;
}
nav ul {
display: flex;
list-style: none;
}
nav li {
margin: 0 20px;
}
nav a {
color: #fff;
text-decoration: none;
font-size: 1.2rem;
font-weight: bold;
}
/* Style the main content */
main {
display: flex;
flex-direction: column;
align-items: center;
padding: 50px 20px;
}
.section {
width: 100%;
margin-bottom: 50px;
}
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
}
.grid-item {
background-color: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
img {
max-width: 100%;
height: auto;
margin-bottom: 20px;
border-radius: 5px;
}
h2 {
font-size: 2rem;
font-weight: bold;
color: #fff;
margin-bottom: 20px;
}
h3 {
font-size: 1.5rem;
font-weight: bold;
margin-bottom: 10px;
}
p {
font-size: 1.2rem;
line-height: 1.5;
margin-bottom: 20px;
}
form label {
font-size: 1.2rem;
font-weight: bold;
margin-bottom: 10px;
display: block;
}
form input,
form textarea {
padding: 10px;
margin-bottom: 20px;
border-radius: 5px;
border: none;
font-size: 1.2rem;
}
form button {
background-color: #333;
color: #fff;
padding: 10px 20px;
border-radius: 5px;
border: none;
font-size: 1.2rem;
font-weight: bold;
cursor: pointer;
transition: background-color 0.2s ease-in-out;
}
form button:hover {
background-color: #555;
}
/* Media queries for smaller screens */
@media screen and (max-width: 768px) {
header {
flex-direction: column;
align-items: center;
}
nav ul {
margin-top: 20px;
}
.grid-container {
grid-template-columns: repeat(1, 1fr);
}
.grid-item {
margin-bottom: 30px;
}
h1 {
font-size: 2rem;
text-align: center;
}
h2 {
font-size: 1.5rem;
}
h3 {
font-size: 1.2rem;
}
p {