Edit Content
Icon Ahmadwebx

Linktree

info@ahmadwebx.com
Facebook Twitter Youtube Linkedin
© Ahmadwebx . 2025.

Artist Portfolio HTML CSS Project

Artist Portfolio

Basic Project Setup

  • Collect images links and font (click) link 

Writing the Navbar Markup

Header:

  • The header is the head of the webpage.  All the element like navbar, logo is in navbar.
				
					<header>
    
</header>

Navbar:

  •  It is a section that provides navigation links, either within the current document or other documents.
				
					<nav>
    <ol>
    	<li> Home </li>
	<ol>
</nav>
				
			
				
					/* HTML Code Ahmadwebx*/
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Cormorant:wght@300&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="index.css">
    <title>JSCermics</title>
</head>

<body>
    <header>
        <h1>Joseph Shmoe | Ceramics</h1>
        <nav>
            <ul>
                <li><a href="#work">Work</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>
    </header>

</body>

</html>

				
			
				
					/* CSS Code */
body {
  font-family: Cormorant, serif;
}

Styling the Navbar

  • We use all the header content use inline-block as display.
  • That makes all the content is inline. Then we change color, margin, etc. to change the design.
				
					Display: inline-block;
				
			
				
					/*CSS Code*/
h1 {
  display: inline-block;
}

.links {
  display: inline-block;
}

.links li {
  display: inline-block;
}

.links a {
  color: black;
  text-decoration: none;
  font-size: 20px;
  margin: 0 8px;
}

Finishing Up the Navbar

  • Changing in padding, margin and add border.
				
					/*CSS Code*/
.links ul {
  padding: 0;
}
.navbar {
  margin: 32px;
}

a.active {
  border-bottom: 1px solid black;
}

Creating the Photo Grid

Add image links at once press and hold alt button and select all the point where the image link is start, 

				
					<img class="lazy lazy-hidden" src="//ahmadwebx.com/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src= “link” ><noscript><img src= “link” ></noscript>.

write Now image is added, but large in size. Give the 

				
					width: 40%;

which brings two images in row.  We give the 

				
					height: 500px;

that makes equal size of all the images.

				
					 /* HTML Code Ahmadwebx*/
  <div class="card">
        <img class="lazy lazy-hidden" decoding="async"
            src="//ahmadwebx.com/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src="https://images.unsplash.com/photo-1565193566173-7a0ee3dbe261?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2670&q=80"><noscript><img decoding="async"
            src="https://images.unsplash.com/photo-1565193566173-7a0ee3dbe261?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2670&q=80"></noscript>
        <h2>Joshua Vase</h2>
    </div>
    <div class="card">
        <img class="lazy lazy-hidden" decoding="async"
            src="//ahmadwebx.com/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src="https://images.unsplash.com/photo-1578749556568-bc2c40e68b61?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2670&q=80"><noscript><img decoding="async"
            src="https://images.unsplash.com/photo-1578749556568-bc2c40e68b61?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2670&q=80"></noscript>
        <h2>Larkin Plates</h2>
    </div>
    <div class="card">
        <img class="lazy lazy-hidden" decoding="async"
            src="//ahmadwebx.com/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src="https://images.unsplash.com/photo-1610701596007-11502861dcfa?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80"><noscript><img decoding="async"
            src="https://images.unsplash.com/photo-1610701596007-11502861dcfa?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80"></noscript>
        <h2>Fortessa Cloud No 2</h2>
    </div>
    <div class="card">
        <img class="lazy lazy-hidden" decoding="async"
            src="//ahmadwebx.com/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src="https://images.unsplash.com/photo-1576020799627-aeac74d58064?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2615&q=80"><noscript><img decoding="async"
            src="https://images.unsplash.com/photo-1576020799627-aeac74d58064?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2615&q=80"></noscript>
        <h2>Astoria Collection</h2>
    </div>
    <div class="card">
        <img class="lazy lazy-hidden" decoding="async"
            src="//ahmadwebx.com/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src="https://images.unsplash.com/photo-1525974160448-038dacadcc71?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2274&q=80"><noscript><img decoding="async"
            src="https://images.unsplash.com/photo-1525974160448-038dacadcc71?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2274&q=80"></noscript>
        <h2>Lava Beach Stoneware</h2>
    </div>
    <div class="card">
        <img class="lazy lazy-hidden" decoding="async"
            src="//ahmadwebx.com/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src="https://images.unsplash.com/photo-1610701596061-2ecf227e85b2?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2670&q=80"><noscript><img decoding="async"
            src="https://images.unsplash.com/photo-1610701596061-2ecf227e85b2?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2670&q=80"></noscript>
        <h2>Sand Canyon Bowls</h2>
    </div>
    <div class="card">
        <img class="lazy lazy-hidden" decoding="async"
            src="//ahmadwebx.com/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src="https://images.unsplash.com/photo-1490312278390-ab64016e0aa9?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2670&q=80"><noscript><img decoding="async"
            src="https://images.unsplash.com/photo-1490312278390-ab64016e0aa9?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2670&q=80"></noscript>
        <h2>Lennon Collection</h2>
    </div>
    <div class="card">
        <img class="lazy lazy-hidden" decoding="async"
            src="//ahmadwebx.com/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src="https://images.unsplash.com/photo-1605883705077-8d3d3cebe78c?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2670&q=80"><noscript><img decoding="async"
            src="https://images.unsplash.com/photo-1605883705077-8d3d3cebe78c?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2670&q=80"></noscript>
        <h2>Mendocino Dinnerware</h2>
    </div>
				
			
				
					/*CSS Code*/
.card {
  width: 49.75%;
  display: inline-block;
  box-sizing: border-box;
  padding: 16px;
}

.card img {
  height: 500px;
  width: 100%;
}

.card h2 {
  display: inline-block;
}

Continuing the Photo Grid

If we add h2 under every image the image is now one in a row. So why it does happen? Because there is space btw every other element. So, we add

				
					<div>
    
</div>

element in every image and h2’s.  and change

				
					display: inline-block

to div.  Now change

				
					width: 100%;

for image. Now, change the 40% width into

				
					width: 49.75%

or approach to 50%. Because there is a space between two div. Now we use

				
					box-sizing: border-box;

so, we use padding now instead of margin because padding is use inside the element.

				
					/* HTML Code Ahmadwebx*/
    <section class="gallery">
        <div class="card">
            <img class="lazy lazy-hidden" decoding="async"
                src="//ahmadwebx.com/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src="https://images.unsplash.com/photo-1565193566173-7a0ee3dbe261?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2670&q=80"><noscript><img decoding="async"
                src="https://images.unsplash.com/photo-1565193566173-7a0ee3dbe261?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2670&q=80"></noscript>
            <h2>Joshua Vase</h2>
        </div>
        <div class="card">
            <img class="lazy lazy-hidden" decoding="async"
                src="//ahmadwebx.com/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src="https://images.unsplash.com/photo-1578749556568-bc2c40e68b61?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2670&q=80"><noscript><img decoding="async"
                src="https://images.unsplash.com/photo-1578749556568-bc2c40e68b61?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2670&q=80"></noscript>
            <h2>Larkin Plates</h2>
        </div>
        <div class="card">
            <img class="lazy lazy-hidden" decoding="async"
                src="//ahmadwebx.com/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src="https://images.unsplash.com/photo-1610701596007-11502861dcfa?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80"><noscript><img decoding="async"
                src="https://images.unsplash.com/photo-1610701596007-11502861dcfa?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80"></noscript>
            <h2>Fortessa Cloud No 2</h2>
        </div>
        <div class="card">
            <img class="lazy lazy-hidden" decoding="async"
                src="//ahmadwebx.com/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src="https://images.unsplash.com/photo-1576020799627-aeac74d58064?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2615&q=80"><noscript><img decoding="async"
                src="https://images.unsplash.com/photo-1576020799627-aeac74d58064?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2615&q=80"></noscript>
            <h2>Astoria Collection</h2>
        </div>
        <div class="card">
            <img class="lazy lazy-hidden" decoding="async"
                src="//ahmadwebx.com/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src="https://images.unsplash.com/photo-1525974160448-038dacadcc71?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2274&q=80"><noscript><img decoding="async"
                src="https://images.unsplash.com/photo-1525974160448-038dacadcc71?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2274&q=80"></noscript>
            <h2>Lava Beach Stoneware</h2>
        </div>
        <div class="card">
            <img class="lazy lazy-hidden" decoding="async"
                src="//ahmadwebx.com/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src="https://images.unsplash.com/photo-1610701596061-2ecf227e85b2?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2670&q=80"><noscript><img decoding="async"
                src="https://images.unsplash.com/photo-1610701596061-2ecf227e85b2?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2670&q=80"></noscript>
            <h2>Sand Canyon Bowls</h2>
        </div>
        <div class="card">
            <img class="lazy lazy-hidden" decoding="async"
                src="//ahmadwebx.com/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src="https://images.unsplash.com/photo-1490312278390-ab64016e0aa9?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2670&q=80"><noscript><img decoding="async"
                src="https://images.unsplash.com/photo-1490312278390-ab64016e0aa9?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2670&q=80"></noscript>
            <h2>Lennon Collection</h2>
        </div>
        <div class="card">
            <img class="lazy lazy-hidden" decoding="async"
                src="//ahmadwebx.com/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src="https://images.unsplash.com/photo-1605883705077-8d3d3cebe78c?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2670&q=80"><noscript><img decoding="async"
                src="https://images.unsplash.com/photo-1605883705077-8d3d3cebe78c?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2670&q=80"></noscript>
            <h2>Mendocino Dinnerware</h2>
        </div>
    </section>



				
			
				
					/* CSS Code*/
.gallery {
  padding: 16px;
}
.card {
  width: 49.75%;
  display: inline-block;
  box-sizing: border-box;
  padding: 16px;
}

.card img {
  height: 500px;
  width: 100%;
  object-fit: cover;
}

.card h2 {
  display: inline-block;
  margin: 8px 0 16px 0;
  font-weight: 300;
}

Adding the Footer Content

Add footer content as separate section.

				
					/* HTML Code Ahmadwebx*/
 <section class="about">
        <h3>Designing, making, and selling goods of timeless design and uncompromising
            integrity—made thoughtfully, honestly, and with pride—to be enjoyed with similar intention.</h3>
        <h3 class="cta">Let's work together.</h3>
        <div class="contact">
            <p>joseph@jsceramics.com</p>
            <p>(212)772-5445</p>
        </div>
    </section>
				
			
				
					/* CSS Code*/
.about {
  width: 40%;
  min-width: 600px;
  margin: 100px 0 100px 200px;
}

.about h3 {
  font-size: 40px;
  font-weight: 300;
}
.contact {
  margin-top: 100px;
}

.contact p {
  margin: 0;
  font-size: 20px;
}

.cta {
  border-bottom: 1px solid black;
  display: inline-block;
  padding-bottom: 8px;
  margin-top: 0;
}

Final Project

				
					/* HTML Code Ahmadwebx*/
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Cormorant:wght@300&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="index.css">
    <title>JSCermics</title>
</head>
<body>
    <header class="navbar">
        <h1>Joseph Shmoe | Ceramics</h1>
        <nav class="links">
            <ul>
                <li><a class="active" href="#work">Work</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>
    </header>
    <section class="gallery">
        <div class="card">
            <img class="lazy lazy-hidden" decoding="async"
                src="//ahmadwebx.com/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src="https://images.unsplash.com/photo-1565193566173-7a0ee3dbe261?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2670&q=80"><noscript><img decoding="async"
                src="https://images.unsplash.com/photo-1565193566173-7a0ee3dbe261?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2670&q=80"></noscript>
            <h2>Joshua Vase</h2>
        </div>
        <div class="card">
            <img class="lazy lazy-hidden" decoding="async"
                src="//ahmadwebx.com/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src="https://images.unsplash.com/photo-1578749556568-bc2c40e68b61?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2670&q=80"><noscript><img decoding="async"
                src="https://images.unsplash.com/photo-1578749556568-bc2c40e68b61?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2670&q=80"></noscript>
            <h2>Larkin Plates</h2>
        </div>
        <div class="card">
            <img class="lazy lazy-hidden" decoding="async"
                src="//ahmadwebx.com/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src="https://images.unsplash.com/photo-1610701596007-11502861dcfa?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80"><noscript><img decoding="async"
                src="https://images.unsplash.com/photo-1610701596007-11502861dcfa?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80"></noscript>
            <h2>Fortessa Cloud No 2</h2>
        </div>
        <div class="card">
            <img class="lazy lazy-hidden" decoding="async"
                src="//ahmadwebx.com/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src="https://images.unsplash.com/photo-1576020799627-aeac74d58064?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2615&q=80"><noscript><img decoding="async"
                src="https://images.unsplash.com/photo-1576020799627-aeac74d58064?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2615&q=80"></noscript>
            <h2>Astoria Collection</h2>
        </div>
        <div class="card">
            <img class="lazy lazy-hidden" decoding="async"
                src="//ahmadwebx.com/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src="https://images.unsplash.com/photo-1525974160448-038dacadcc71?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2274&q=80"><noscript><img decoding="async"
                src="https://images.unsplash.com/photo-1525974160448-038dacadcc71?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2274&q=80"></noscript>
            <h2>Lava Beach Stoneware</h2>
        </div>
        <div class="card">
            <img class="lazy lazy-hidden" decoding="async"
                src="//ahmadwebx.com/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src="https://images.unsplash.com/photo-1610701596061-2ecf227e85b2?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2670&q=80"><noscript><img decoding="async"
                src="https://images.unsplash.com/photo-1610701596061-2ecf227e85b2?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2670&q=80"></noscript>
            <h2>Sand Canyon Bowls</h2>
        </div>
        <div class="card">
            <img class="lazy lazy-hidden" decoding="async"
                src="//ahmadwebx.com/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src="https://images.unsplash.com/photo-1490312278390-ab64016e0aa9?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2670&q=80"><noscript><img decoding="async"
                src="https://images.unsplash.com/photo-1490312278390-ab64016e0aa9?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2670&q=80"></noscript>
            <h2>Lennon Collection</h2>
        </div>
        <div class="card">
            <img class="lazy lazy-hidden" decoding="async"
                src="//ahmadwebx.com/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src="https://images.unsplash.com/photo-1605883705077-8d3d3cebe78c?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2670&q=80"><noscript><img decoding="async"
                src="https://images.unsplash.com/photo-1605883705077-8d3d3cebe78c?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2670&q=80"></noscript>
            <h2>Mendocino Dinnerware</h2>
        </div>
    </section>
    <section class="about">
        <h3>Designing, making, and selling goods of timeless design and uncompromising
            integrity—made thoughtfully, honestly, and with pride—to be enjoyed with similar intention.</h3>
        <h3 class="cta">Let's work together.</h3>
        <div class="contact">
            <p>joseph@jsceramics.com</p>
            <p>(212)772-5445</p>
        </div>
    </section>
</body>
</html>
				
			
				
					/* CSS Code Ahmadwebx*/
body {
  font-family: Cormorant, serif;
}

h1 {
  display: inline-block;
  font-weight: 300;
  margin: 0 32px 0 0;
}

.links {
  display: inline-block;
}

.links li {
  display: inline-block;
}

.links a {
  color: black;
  text-decoration: none;
  font-size: 20px;
  margin: 0 8px;
}

.links ul {
  padding: 0;
}
.navbar {
  margin: 32px;
}

a.active {
  border-bottom: 1px solid black;
}

.gallery {
  padding: 16px;
}

.card {
  width: 49.75%;
  display: inline-block;
  box-sizing: border-box;
  padding: 16px;
}
.card img {
  height: 500px;
  width: 100%;
  object-fit: cover;
}
.card img:hover {
  opacity: 0.9;
}

.card h2 {
  display: inline-block;
  margin: 8px 0 16px 0;
  font-weight: 300;
}

.about {
  width: 40%;
  min-width: 600px;
  margin: 100px 0 100px 200px;
}

.about h3 {
  font-size: 40px;
  font-weight: 300;
}
.contact {
  margin-top: 100px;
}

.contact p {
  margin: 0;
  font-size: 20px;
}

.cta {
  border-bottom: 1px solid black;
  display: inline-block;
  padding-bottom: 8px;
  margin-top: 0;
}

Final Look

Image CV
CV Image
Facebook
Twitter
LinkedIn
Pinterest
WhatsApp

Table of Contents

Interesting Posts

Ghulam Ahmad is an Excellent Writer, His magical words added value in growth of our life. Highly Recommended

- Fazal Rehman Tweet
Read more about poetries

Ahmad Shafi Poetry

Read More

More Posts

Pages

6 Responses

  1. Pingback: Random Color Generator Project - AhmadWebx
  2. Pingback: Dark Mode in Web Development: Best Practices & Implementation - AhmadWebx
  3. Pingback: How to Build Your First Website from Scratch - AhmadWebx
  4. Pingback: Theory of Automata - AhmadWebx
  5. Pingback: HTML, CSS, and JS: A Beginner’s Guide to Web Development - AhmadWebx
  6. Pingback: Data Mining - AhmadWebx

Leave a Reply

Your email address will not be published. Required fields are marked *

Ahmadwebx Logo Green
Facebook Twitter Instagram Linkedin Pinterest Behance