How to have two entries for a tiny DIV?

HTML & CSS
1

Hello,

I hired a designer to create our website with some fancy CSS files. 3 CSS files and have lost contact with him.
The home page layout looks like this:
the left side has a large image that represents what we do and the right side has four tiny DIVs each displaying key information.

The current home page: https://eatcoffee.net/

Now I want a tiny DIV in the home page to have two elements ( our email address at the top; “Coffee Stories” at the bottom) and I have some trouble with the CSS files in making it happen, the developing new home page,
https://www.eatcoffee.net/index-NEW.html

Can you help?

Thanks.

2

I’m a bit unclear about what you want. Do you mean only two elements, as in remove two of the four? Or do you mean two additional small elements?
The site appears to use the Bootstrap CSS framework, so it may help to study their documentation.

3

The objective is to have two entries of

  1. { email }
  2. {blogs} → link to blogs page to show up in the tiny DIV.

Currently it has only " email " entry.

Embarrassing, I was never into CSS.

4

As an exercise for myself, I have coded a web page similar to the original without the overhead of Bootstrap and jQuery.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Coffee Candy</title>
<style>
*{box-sizing:border-box; margin:0px;}
body{display:flex; flex-wrap:wrap; background-color:rgb(33,37,41);}
p{font:18px sans-serif; color:white; margin:10px 0;}
.side{display: flex; flex-wrap:wrap; flex: 1 1 500px; margin:10px;}
.cog{margin: 20px 10%; font-size:25px;}
#poster{width: 80%; margin: 20px 10%;}
.tiny{flex: 1 0 50%; padding:5%; border: 1px solid white;}
.column{display:flex; flex-direction:column; padding:0; align-items:stretch;}
.column>a{display:flex; flex-direction:column; flex:0 0 50%; justify-content:center; text-align:center;}
.buy>p{text-align:center;}
a{text-decoration:none; color:white;}
a:hover{background-color:rgb(21,40,69);}
a:hover>p{transform:translate(0,-10px);}
.subhead{font-size:30px;}
.author{font-size:14px;}
.email{font-size:24px;}
</style>
</head>
<body>
<div class="side">
<p class="cog">COG™</p>
<img id="poster" src="https://www.eatcoffee.net/image/COG-coffee-candy-FRONT.png">
</div>
<div class="side">
<article class="tiny">
<p class="subhead">CoffeeCandy™</p>
<p>CoffeeCandy™ is a unique blend of coffee and candy. It provides the most CONVENIENCE for your love of coffee because you can have it any time anywhere you want.</p> 
</article>
<article class="tiny">
<p class="subhead">Testimonials</p>
<p>"Tastes great, fair price, clean BUZZ."</p>
<p class="author">-Joe Kiley</p>
<p>"This is the most interesting product I've found for this year!"</p>
<p class="author">-Tim Barrett</p>
</article>
<div class="tiny column">
<a href="mailto:info@eatcoffee.net">
<p class="subhead email">info@eatcoffee.net</p>
</a>
<a href="#">
<p class="subhead">Blogs</p>
</a>
</div>
<a class="tiny buy" href="#">
<p class="subhead">Buy Now</p>
</a>
</div>
</body>
</html>
1 Like
5

Good stuff.

I don’t want to start anew with new css file for the entire website.

Attempt to simply add your css code just for this tiny DIV without touching existing CSS files proves to be in vein:

	<style>
.tiny{flex: 1 0 50%; padding:5%; border: 1px solid white;}

.column{display: flex; flex-direction:column; padding:0; align-items:stretch;}

.column>a{display:flex; flex-direction:column; flex:0 0 50%; justify-content:center; text-align:center;}

.subhead{font-size:30px;}
.email{font-size:24px;}

	</style>

then for the HMTL part,

					<div class="tiny column">

						<a href="mailto:info@eatcoffee.net">
							<p class="subhead email">info@eatcoffee.net</p>
						</a>

						<a href="coffee-stories.html" target="_new">
							<p class="subhead">Blogs</p>
						</a>

					</div>

Appreciated tho

6

I’ve put on a developer’s hat and using a debugging tool to fix it. All, please take a look at the dev page and let me know what you think. Thanks.

7

It looks good with android phone. If anyone has an iPhone and use it to take a look at the dev page we’d appreciate it.

9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.