What is the code? HTML/CSS 1. Let’s start by adjusting our box size to use the b

ID: 3872151 • Letter: W

Question

What is the code? HTML/CSS

1. Let’s start by adjusting our box size to use the border-box version of the box model, which will make sizing all of our elements much easier. Within our style.css file, just below our reset, let’s add a comment to identify the code for what will become our grid and help determine the layout of our website. We’re putting this below our reset so that it falls in the proper position within the cascade.

From there, we can use the universal selector, *, along with universal pseudo-elements, *:before and *:after, to select every imaginable element and change the box-sizing to border-box. Remember, we’re going to want to include the necessary vendor prefixes for the box-sizing property, as it is a relatively new property.

1. /*
2. ========================================
3. Grid
4. ========================================
5. */
6.
7. *,
8. *:before,
9. *:after {
10. -webkit-box-sizing: border-box;
11. -moz-box-sizing: border-box;
12. box-sizing: border-box;
13. }

2. Next we’ll want to create a class that will serve as a container for our elements. We can use this container class on different elements to set a common width, center the elements on the page, and apply some common horizontal padding.

Just below our universal selector rule set, let’s create a selector with a class of container. Within this selector let’s set our width to 960pixels, our left and right padding to 30 pixels, our top and bottommargins to 0, and our left and right margins to auto.

Setting a width tells the browser definitively how wide any element with the class of container should be. Using a left and rightmargin of auto in conjunction with this width lets the browser automatically figure out equal left and right margins for the element, thus centering it on the page. Lastly, the left and rightpadding ensures that our content isn’t sitting directly on the edge of the element and provides a little breathing room for the content.

1. .container {
2. margin: 0 auto;
3. padding-left: 30px;
4. padding-right: 30px;
5. width: 960px;
6. }

3. Now that we have a container class available to use, let’s go ahead and apply the class of container throughout our HTML to the

and

elements on each page, including theindex.html, speakers.html, schedule.html, venue.html, andregister.html files.

...

2.
3.

...

4. While we’re at it, let’s go ahead and center the rest of the content on our pages. On the home page, our index.html file, let’s add the class of container to each

element on the page, one for our hero section (the section that introduces our conference) and one for our teasers section.

...

Additionally, let’s wrap all of the

elements on each page with a

element with the class of container.

2.
3.

...

4.
5.

We’ll come back and adjust these elements and classes later, but for now we’re headed in the right direction.

5. Now that all of our content is centered, let’s create some vertical spacing between elements. For starters let’s place a 22-pixel bottom margin on a few of our heading and paragraph elements. We’ll place and comment on these typography styles below our grid styles.

1. /*
2. ========================================
3. Typography
4. ========================================
5. */
6.
7. h1, h3, h4, h5, p {
8. margin-bottom: 22px;
9. }

6. Let’s also try our hand at creating a border and some rounded corners. We’ll start by placing a button within the top

element on our home page, just below the header.

Previously we added an element within this

element. Let’s add the classes of btn and btn-alt to this anchor.

1. ...

Now let’s create some styles for those classes within our CSS. Below our typography rule set, let’s create a new section of the CSS file for buttons.

To begin let’s add the btn class and apply some common styles that can be shared across all buttons. We’ll want all of our buttons to have a 5-pixel border-radius. They should be displayed as inline-blockelements so we can add padding around all four sides without issue; we’ll remove any margin.

1. /*
2. ========================================
3. Buttons
4. ========================================
5. */
6.
7. .btn {
8. border-radius: 5px;
9. display: inline-block;
10. margin: 0;
11. }

We’ll also want to include styles specific to this button, which we’ll do by using the btn-alt class. Here we’ll add a 1-pixel, solid, gray border with 10 pixels of padding on the top and bottom of the button and 30 pixels of padding on the left and right of the button.

1. .btn-alt {
2. border: 1px solid #dfe2e5;
3. padding: 10px 30px;
4. }

Using both the btn and btn-alt classes on the same element allows these styles to be layered on, rendering all of the styles on a single element.

7. Because we’re working on the home page, let’s also add a bit of padding to the

element that contains our element with the classes of btn and btn-alt. We’ll do so by adding a class attribute value of home to the element, alongside the container class attribute value, as this will be the leading section of our website.

2. ...
3.

Next we’ll want to create a new section within our CSS file for home page styles, and, once we’re ready, we’ll use the class of hero to apply padding around all four sides of the

element.

1. /*
2. ========================================
3. Home
4. ========================================
5. */
6.
7. .hero {
8. padding: 22px 80px 66px 80px;
9. }

With a solid understanding of reusable layouts, the time has come to implement one in our personal website.

8. For the personal website, we’ll create a three-column reusable layout using inline-block elements. We’ll do so in a way that allows us to have three columns of equal width or two columns with the total width split between them, two-thirds in one and one-third in the other.

To begin, we’ll create classes that define the width of these columns. The two classes we’ll create arecol-1-3, for one-third, and col-2-3, for two-thirds. Within the grid section of our style.css file, let’s go ahead and define these classes and their corresponding widths.

1. .col-1-3 {
2. width: 33.33%;
3. }
4. .col-2-3 {
5. width: 66.66%;
6. }

9. We’ll want both of the columns to be displayed as inline-block elements. We’ll need to make sure that their vertical alignment is set to the top of each column, too.

Let’s create two new selectors that will share the display andvertical-alignment property styles.

1. .col-1-3,
2. .col-2-3 {
3. display: inline-block;
4. vertical-align: top;
5. }

Looking at the CSS again, we’ve created two class selectors, col-1-3and col-2-3, that are separated with a comma. The comma at the end of the first selector signifies that another selector is to follow. The second selector is followed by the opening curly bracket, {, which signifies that style declarations are to follow. By comma-separating the selectors, we can bind the same styles to multiple selectors at one time.

10. We’ll want to put some space in between each of the columns to help break up the content. We can accomplish this by putting horizontal padding on each of the columns.

This works well; however, when two columns are sitting next to one another, the width of the space between them will be double that of the space from the outside columns to the edge of the row. To balance this we’ll place all of our columns within a grid and add the same padding from our columns to that grid.

Let’s use a class name of grid to identify our grid, and then let’s identify the same horizontal padding for our grid, col-1-3, and col-2-3 classes. With commas separating our selectors again, our CSS looks like this:

1. .grid,
2. .col-1-3,
3. .col-2-3 {
4. padding-left: 15px;
5. padding-right: 15px;
6. }

11. When we’re setting up the horizontal padding, we’ll need to be careful. Remember, in the last lesson we created a container element, known by the class of container, to center all of our content on a page within a 960 -pixel-wide element. Currently if we were to put an element with the class of grid inside an element with the class of container, their horizontal paddings would add to one another, and our columns would not appear proportionate to the width of the rest of the page.

We don’t want this to happen, so instead, we’ll have to share some of the styles from the container rule set with the grid rule set. Specifically, we’ll need to share the width property and values (to make sure our page stays fixed at 960 pixels wide) and the marginproperty and values (to center any element with the class of grid on the page).

We’ll accomplish this by breaking up the old container rule set into the following:

1. .container,
2. .grid {
3. margin: 0 auto;
4. width: 960px;
5. }
6. .container {
7. padding-left: 30px;
8. padding-right: 30px;
9. }

Now any element with the class of container or grid will be 960pixels wide and centered on the page. Additionally, we’ve preserved the existing horizontal padding for any element with the class ofcontainer by moving it into a new, separate rule set.

12. All right—all of the heavy lifting needed to get our reusable grid styles into place is finished. Now it’s time to work in our HTML and to see how these classes perform.

We’ll begin with the teasers on the home page, within ourindex.html file, aligning them into three columns. Currently, the teasers are wrapped in a

element with the class ofcontainer. We’ll want to change that class from container to gridso that we can begin placing columns within it.

2. ...
3.

13. Next, we’ll want to add a class of col-1-3 to each of the

elements within the element with the class of grid.

2.
3.

4. ...
5.

6.
7.

8. ...
9.

10.
11.

12. ...
13.

14.
15.

14. And lastly, because each of our columns is an inline-block element, we’ll want to make sure we remove the empty white space between them. We’ll use comments to do this, and we’ll add a little bit of documentation noting each upcoming section while we’re at it to better organize our code.

2.
3.

4.
5.

6. ...
7.

12. ...
13.

section class="col-1-3">
18. ...
19.
20.
21.

To review, on line 3 we leave a comment identifying the “Speakers” section to follow. At the end of line 7, we open a comment immediately after the closing

tag. Within that comment, on line 9 we identify the “Schedule” section to come. We then close the comment at the beginning of line 11, just before the openingtag. This same comment structure reappears on lines 13 through 17 between the two elements, right before the “Venue” section. In all, we’ve commented out any potential white space between the columns while also using those comments to identify our sections.

We now have a reusable three-column grid that supports multiple arrangements, using both one-third- and two-thirds-width columns.

Explanation / Answer

<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'/>
<title>Positioning Is Easy!</title>
<link href="styles.css" rel='stylesheet'/>
</head>
<body>

</body>
</html>

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
height: 1200px;
}

.container {
display: flex;
justify-content: center;
}

.example {
display: flex;
justify-content: space-around;

width: 800px;
margin: 50px 0;
background-color: #D6E9FE;
}

.item img {
display: block;
}
.item-relative {
position: relative;
top: 30px;
left: 30px;
}

function frame() {
var element = document.querySelector('.item-relative');
left += 2;
element.style.left = left + 'px';
if (left >= 300) {
clearInterval(id)
}
}

var id = setInterval(frame, 10)
</script>
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'/>
<title>Awesome!</title>
<link href="menu.css" rel='stylesheet'/>
</head>
<body>

<div class='header'>
<div class='logo'><img src="images/awesome-logo.svg"/></div>
<ul class='menu'>
<li class='dropdown'><span>Features </span></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Subscribe</a></li>
<li><a href="#">About</a></li>
</ul>
</div>

</body>
</html>

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
height: 1200px;
font-size: 18px;
font-family: sans-serif;
color: #5D6063;
}

a:link,
a:visited {
color: #5D6063;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}

.header {
position: fixed;
display: flex;
justify-content: space-between;

width: 100%;
padding: 50px;
background: #D6E9FE;
}

<ul class='menu'>
<li class='dropdown'><span>Features ▾</span>
<ul class='features-menu'> 
<li><a href="#">Harder</a></li>
<li><a href="#">Better</a></li>
<li><a href="#">Faster</a></li>
<li><a href="#">Stronger</a></li>
</ul> 
</li>
<li><a href="#">Blog</a></li> 
<li><a href="#">Subscribe</a></li>
<li><a href="#">About</a></li>
</ul>

.features-menu {
display: flex;
flex-direction: column;
background: #B2D6FF;
border-radius: 5px;
padding-top: 60px;
}

.features-menu li {
list-style: none;
border-bottom: 1px solid #FFF;

padding: 0 40px 10px 20px;
margin: 10px;
}

.features-menu li:last-of-type {
border-bottom: none;
}
.features-menu {
display: flex;
flex-direction: column;
background: #B2D6FF;
border-radius: 5px;
padding-top: 60px;

position: absolute; /* Add these */
top: -25px;
left: -30px;
}

.dropdown:hover .features-menu { /* This used to be `.features-menu` */
display: flex; /* Leave everything else alone */
flex-direction: column;
background: #B2D6FF;
/* ... */
}

<body>
<div class="slidercontainer">
<div class="showSlide fade">
<img src="images/img1.jpg" />
<div class="content">Lorem ipsum dolor sit amet</div>
</div>
<div class="showSlide fade">
<img src="images/img2.jpg"/>
<div class="content">Lorem ipsum dolor sit amet</div>
</div>

<div class="showSlide fade">
<img src="images/img3.jpg"/>
<div class="content">Lorem ipsum dolor sit amet</div>
</div>
<div class="showSlide fade">
<img src="images/img4.jpg"/>
<div class="content">Lorem ipsum dolor sit amet</div>
</div>

<a class="left">â®</a>
<a class="right">â¯</a>
</div>
</body>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>My Slider</title>
<style type="text/css">
body {
margin: 0;
background: #e6e6e6;
}
.showSlide {
display: none
}
.showSlide img {
width: 100%;
}
.slidercontainer {
max-width: 1000px;
position: relative;
margin: auto;
}
.left, .right {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}
.right {
right: 0;
border-radius: 3px 0 0 3px;
}
.left:hover, .right:hover {
background-color: rgba(115, 115, 115, 0.8);
}
.content {
color: #eff5d4;
font-size: 30px;
padding: 8px 12px;
position: absolute;
top: 10px;
width: 100%;
text-align: center;
}
.active {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
@-webkit-keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}

@keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
</style>
</head>
<body>
<div class="slidercontainer">
<div class="showSlide fade">
<img src="images/img1.jpg" />
<div class="content">Slide1 heading</div>
</div>
<div class="showSlide fade">
<img src="images/img2.jpg" />
<div class="content">Slide2 heading</div>
</div>

<div class="showSlide fade">
<img src="images/img3.jpg" />
<div class="content">Slide3 heading</div>
</div>
<div class="showSlide fade">
<img src="images/img4.jpg" />
<div class="content">Slide4 heading</div>
</div>

<a class="left">â®</a>
<a class="right">â¯</a>
</div>

<script type="text/javascript">
var slide_index = 1;
displaySlides(slide_index);

function nextSlide(n) {
displaySlides(slide_index += n);
}

function currentSlide(n) {
displaySlides(slide_index = n);
}

function displaySlides(n) {
var i;
var slides = document.getElementsByClassName("showSlide");
if (n > slides.length) { slide_index = 1 }
if (n < 1) { slide_index = slides.length }
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slides[slide_index - 1].style.display = "block";
}
</script>

</body>
</html>

Navigate

What is the code? Create an Account class (Account.java) that a bank might use t

What is the code? Use only html, php, and Javacript, to work with the mysql data

Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.

What is the code? HTML/CSS 1. Let’s start by adjusting our box size to use the b

Question

Explanation / Answer

Related Questions

Navigate