Please help!!!

+1 Jay Corn · June 8, 2014
Hi everyone. I'm brand new to the site, and could really use some help. (note: I've watched Bucky's tutorials).

I have a job interview on Monday, and I've been tasked with duplicating a screenshot using HTML and CSS.

I've actually got a good handle on most elements, but I've got two BIG questions I could use help with.

Hopefully after getting some assistance with those my momentum will pick up again.

The biggest problem I'm having is creating the large, white area of main content. I really hope that makes sense. 

I know my problem is with layers, but I can't figure out how to manipulate them correctly. I can create the block (rounded corners included), but I can't figure out how to keep it from blocking out the other elements on the page.

Second, I'm trying to decide the best way to create the orange blocks. Should I create each as its own element and position accordingly, or is there a way to create all three (a table of some sort, perhaps?) and have them line up identically.

Any help would be soooo appreciated. Thanks in advance everyone. I'll be happy to send the code I've got so far, but it's really incomplete right now. 


/images/forum/d3df4c498a477727260daad64fc5cefb.jpg

Post a Reply

Replies

Oldest  Newest  Rating
0 Jay Corn · June 8, 2014
Hi everyone. I've made good progress on this project.

My last and only problem right now is configuring the oval logo in the upper left part of the screen shot.

I've created the oval and have successfully overlayed the text. However, I'm having trouble splitting the oval in half and coloring appropriately. 

Any ideas would be SOOOOO appreciated. Thanks.

Jay
-1 Jay Corn · June 9, 2014

<!DOCTYPE html>

<html>

<head>

<style type="text/css">

body {background: black;}

#MastContainer {background-color:gray;
height: 120px;
width: 100%;
border-radius:10px;}

.circle-text {width:12%;}

.circle-text:after {content: "";
display: block;
width:220px;
height:56px;
padding-bottom: 50%;
background:#FE833D;
border-radius: 80%;
border:4px solid black;}

.circle-text div {
float:right;
width:50%;
padding-top:1%;
line-height:1em;
margin-top:-0.5em;
text-align:right;
color:white;}

ul {background-color: white;
position:absolute;
width:400px;
text-align:center;
position: absolute; top: 20px; left: 270px; padding: 10px;
border-radius:5px;
word-spacing:10px;}

li {display:inline;}

a {text-decoration:none;}
a:link {color:black;}
a:visited {color:black;}
a:hover {background-color:gray; padding: 3px; color:white; text-decoration: none; text-weight:bold;}
a:active {background-color:gray; padding: 3px; border:1px solid black; text-decoration:none;}

h2 {color:black;
font-family:"script";
font-size:65px;
font-weight:bold;
font-style:italic;
}

h3 {background: black; font-size:30px;}


#MainContainer {background-color: white;
position: absolute;
border: none;
width:98%;
height:100%;
border-radius: 10px;
padding-top:0;
padding-left:15px;
margin-right:15px;}

h1 {color:#FE833D;
letter-spacing:5px;}

hr {margin:2px; height: 1px; color:#69422C; background:#69422C;
font-size:0; border:0;}

#OrangeBox1
{color:white;
padding: 10px;
text-align:centered;
margin: 25px;
margin-top:0px;
background-color:#FE833D;
border-radius:10px;
width:180px;
height: relative;
position:absolute;
left:10px;
top:285px;}

#OrangeBox2
{color:white;
padding: 10px;
text-align:centered;
margin: 25px;
margin-top:0px;
background-color:#FE833D;
border-radius:10px;
width:180px;
height: relative;
position:absolute;
left:220px;
top:285px;}

#OrangeBox3
{color:white;
padding: 10px;
text-align:centered;
margin: 25px;
margin-top:0px;
background-color:#FE833D;
border-radius:10px;
width:180px;
height: relative;
position: absolute;
left:435px;
top:285px;}

</style>

<title>

Jay's Interview Prep

</title>

</head>

<body>

<div id="MastContainer">
<div class="circle-text"><div><h2>Rock</h2></div>
</div></div>

<br>

<ul>
<a href="http://www.JayCorn.SnapPages.com"><li>Home</li></a>
<a href="http://www.JayCorn.SnapPages.com"><li>Televisions</li></a>
<a href="http://www.JayCorn.SnapPages.com"><li>Electronics</li></a>
<a href="http://www.JayCorn.SnapPages.com"><li>Services</li></a>
</ul>

<div id="MainContainer"><h1>Something Occurs</h1>

Within this space is some text or other graphical representations of things that this page displays.

<h1> Products</h1>
<br><br><br><br>
<pre><b> Product Name Product Name Product Name</b></pre>

<div id=OrangeBox1>This is a product description.<br>It takes up a few lines of space.<hr></hr>
Product<br>Info: Dimensions might go here.<br><br>
<br>More info:<br> Another piece of data.<hr></hr>
Buy it now!</div>

<div id=OrangeBox2>This is a product description.<br>It takes up a few lines of space.<hr></hr>
Product Info: Dimensions might go here.<br><br>
<br>More info: Another piece of data.<hr></hr>
Buy it now!</div>

<div id=OrangeBox3>This is a product description.<br>It takes up a few lines of space.<hr></hr>
Product Info: Dimensions might go here.<br><br>
<br>More info: Another piece of data.<hr></hr>
Buy it now!</div>

</body>
</html>

0 Bucky Roberts · June 9, 2014
Try something like this...



#pacman {
width: 0px;
height: 0px;
border-right: 60px solid transparent;
border-top: 60px solid red;
border-left: 60px solid red;
border-bottom: 60px solid red;
border-top-left-radius: 60px;
border-top-right-radius: 60px;
border-bottom-left-radius: 60px;
border-bottom-right-radius: 60px;
}

-3 Bucky Roberts · June 9, 2014
This is a really helpful website. And remember to LAYER!

https://css-tricks.com/examples/ShapesOfCSS/
-1 Jay Corn · June 9, 2014
Thanks, Bucky! This helped. I'll work on layering. I love the site. Such a great resource. Thank you.
  • 1

HTML / CSS / Web Design

107,198 followers
About

Discuss, share, ask, learn and teach HTML5 and CSS3.

Links
Moderators