Skip to content

Commit 7151445

Browse files
renanharriganrenanharrigan
committed
lab2blog
1 parent 6816e29 commit 7151445

File tree

3 files changed

+73
-42
lines changed

3 files changed

+73
-42
lines changed

‎Code/renan/html_css_flask/lab2/images/background.jpg‎

11 MB
Loading

‎Code/renan/html_css_flask/lab2/index.html‎

Lines changed: 23 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -5,36 +5,37 @@
55
<meta http-equiv="X-UA-Compatible" content="IE=edge">
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
77
<title>Blog</title>
8+
89
<link rel="stylesheet" href="styles.css">
910
</head>
1011
<body>
11-
<header>
12-
13-
<a href="https://www.afvclub.com/">Vacations Deals</a>
14-
<h2>Kiwi Travel Blog</h2>
15-
<a href="https://www.id.me/">Hotel and Parks Discounts</a>
16-
17-
</header>
18-
19-
20-
<b></b>
21-
22-
<p>
23-
This Travel Blog is specifically to help veterans in geting the help they need in selecting vacation destinations at a phenomenal deal! Not only do we provide the destination at a locked in rate but we also provide recreational resources to get discounts so that you and your family can enjoy awesome activities while on vacation. Please feel free to contact at [email protected] us for more information.
24-
12+
<div class="wrapper">
2513

26-
</p>
27-
28-
<b></b>
14+
<header class="header">
15+
<h1><a href="https://www.afvclub.com/">Vacations Deals</a>
16+
<h2>Kiwi Travel Blog</h2>
17+
</header>
2918

19+
<article class="main">
20+
<p>
21+
This Travel Blog is specifically to help veterans in geting the help they need in selecting vacation destinations at a phenomenal deal! Not only do we provide the destination at a locked in rate but we also provide recreational resources to get discounts so that you and your family can enjoy awesome activities while on vacation. Please feel free to contact at [email protected] us for more information.
3022

31-
<p>
32-
Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem quaerat repellendus nihil natus earum sint possimus officia voluptate sunt ipsa obcaecati, eligendi porro aperiam sit non excepturi, voluptatibus ratione numquam!
33-
34-
</p>
35-
23+
24+
</p>
25+
26+
</article>
27+
28+
<aside class="aside aside1">
29+
<h1>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Facilis magnam, laborum harum incidunt exercitationem eaque libero dolorum velit autem tenetur officiis! Ullam est eius ex dolorum repellat temporibus architecto iste!</h1>
30+
</aside>
31+
<aside class="aside aside2">
32+
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore perspiciatis consequuntur ex deserunt adipisci placeat eaque mollitia. Libero, eius ipsum facere dolorem enim praesentium deserunt quisquam, cumque, itaque suscipit temporibus!</h1>
33+
</aside>
34+
</div>
35+
3636
<footer>Kiwi Travel Blog &copy; 2022</footer>
3737
</body>
38+
3839
</html>
3940
<!-- <head>This is a header</head>
4041
<article>This is an article</article>

‎Code/renan/html_css_flask/lab2/styles.css‎

Lines changed: 50 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,66 @@
1-
header {
2-
1+
.wrapper{
32
display: flex;
4-
/* horizontal positioning */
5-
justify-content: space-between;
6-
/* vertical positioning */
7-
/* align-items: flex-start;
8-
text-align: center; */
9-
}
3+
flex-flow: row wrap;
4+
text-align: center;
5+
}
6+
7+
.wrapper > * {
8+
padding: 10px;
9+
margin: 10px;
10+
flex: 1 100%;
11+
border-radius: 10px;
12+
}
1013

14+
.header {
15+
background: tomato;
16+
height: 120px;
1117

12-
body {
13-
background-color: coral;
18+
}
1419

20+
.main{
21+
text-align: left;
22+
background: deepskyblue;
23+
height: 300px;
24+
font-size: 24px;
25+
}
1526

16-
}
27+
.aside1{
28+
background: hotpink;
29+
}
1730

18-
h2 {
19-
border: red 10px;
20-
/* justify-content: space-evenly; */
21-
margin: 0;
22-
align-items: flex-end;
23-
/* float: left; */
31+
.aside2{
32+
background: lightgreen;
2433

2534
}
35+
@media all and (min-width: 800px){
36+
.main{
37+
flex: 3;
38+
}
39+
.aside1{
40+
order: 1;
41+
}
42+
.aside2{
43+
order: 2;
44+
}
2645

27-
/* a {
28-
/* justify-content: space-between; */
46+
.main{
47+
order: 2;
48+
}
49+
}
50+
@media all and (min-width: 600px){
51+
.aside {
52+
flex: 1;
53+
}
2954

30-
/* } */
55+
}
3156

3257
footer {
3358
font-weight: bold;
3459
text-align: left;
3560

61+
}
62+
body{
63+
background-color: antiquewhite;
64+
background-image: url(../images/background.jpeg);
65+
3666
}

0 commit comments

Comments
 (0)