Skip to content

Commit 7142c84

Browse files
N0sBaN0sBa
committed
2 parents d161af5 + 191efe4 commit 7142c84

File tree

4 files changed

+42
-2
lines changed

4 files changed

+42
-2
lines changed

‎custom/float-layout/index.html

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Float layout</title>
8+
<link rel="stylesheet" href="style.css">
9+
</head>
10+
<body>
11+
<div class="float">Float</div>
12+
<p class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus soluta nam quae numquam suscipit itaque, facere accusamus assumenda. Atque, nobis nam, sunt architecto consectetur autem deserunt repellat quidem, tenetur ipsam ducimus sed. Repellendus, repellat quidem. Nisi itaque distinctio vel, maxime assumenda neque quam nostrum quas rem quos molestias corrupti. Accusamus in nobis placeat laboriosam perferendis officiis, nisi ipsam esse sapiente fugit magni dignissimos earum commodi nostrum quas rerum culpa nam consectetur dicta reprehenderit illo eum cum? In repellat accusamus dolore.</p>
13+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia earum optio, explicabo quibusdam corporis fuga vitae et quo. Aliquid debitis modi quisquam, quasi exercitationem odio eius reprehenderit ipsum ex, alias voluptatibus harum, ab dolores. Neque dicta consectetur cum saepe sit magnam? Minus maxime alias rerum esse fugiat placeat consequuntur dignissimos perferendis sapiente dolor omnis, porro explicabo id mollitia illo veritatis beatae dolore, assumenda eaque eveniet iste quidem pariatur tenetur vitae! Iusto voluptates, vitae corporis incidunt quam at perspiciatis harum quas nostrum laborum laboriosam nesciunt porro quod dolores eaque natus odio, soluta dolor quibusdam fuga iure earum veniam perferendis sed. Blanditiis sapiente inventore ipsam ipsum eveniet! Suscipit corporis ipsa magnam adipisci, aperiam, laboriosam quaerat officiis asperiores consequatur saepe minima, ducimus sit fugiat facilis omnis quia ratione dignissimos? Eveniet atque molestias nobis totam molestiae non porro at vel ex officia impedit rerum est, blanditiis voluptatum voluptas sint eaque dignissimos temporibus neque magni asperiores ab excepturi? Praesentium vero voluptatibus reprehenderit quam facere soluta eveniet eligendi nostrum aliquam voluptate fugiat, doloremque nulla eum officiis architecto numquam. Tempore quo consequuntur voluptatem asperiores atque quos eos placeat dolore. Numquam fuga unde tempore vitae consequuntur. Necessitatibus soluta ad ex hic in cumque, dolore aliquid eveniet excepturi optio!</p>
14+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam totam quo voluptatibus fuga veniam? Laboriosam, aperiam! Aspernatur, quia animi unde, recusandae quasi maiores at aperiam minus harum iste voluptatem id iusto asperiores, blanditiis ipsum enim vero vel eveniet assumenda! Labore magnam eaque voluptatibus, quas expedita voluptates odio aperiam architecto deleniti eum tenetur rem beatae sed, ea excepturi fugit ad molestiae. Temporibus similique modi voluptatibus architecto, impedit voluptates aut sed vel quam eum exercitationem asperiores aspernatur blanditiis reprehenderit, natus, est inventore! Tenetur consequuntur tempora fugiat harum quasi earum optio, beatae ratione laudantium soluta molestias dolor quidem velit nam obcaecati laboriosam est minima eveniet nesciunt suscipit, omnis officiis, autem iure. Ratione, laudantium suscipit. Molestias nemo a qui. Tempore esse facere labore, nisi voluptas veniam libero quae nobis fuga quisquam corporis nemo autem quibusdam doloribus laborum eligendi impedit ab vero consequatur delectus, sit est doloremque dolores aliquam. Perferendis quo minus excepturi fugit distinctio quasi ad non beatae magni placeat, laboriosam, nobis voluptate atque totam rerum sint consectetur sapiente voluptatibus consequatur? Neque quisquam quidem at. Ad, exercitationem voluptates cupiditate consectetur nesciunt nostrum beatae corrupti sed tempora dicta similique voluptate fugit aut eligendi praesentium! Perspiciatis dignissimos officiis aut ratione, facilis laudantium sequi repudiandae voluptatem, laboriosam veniam porro officia minus provident quas maiores ea reiciendis. Quaerat veniam consequatur, asperiores quo sit id autem ad pariatur unde quas tempore error est odio aut excepturi, aliquid esse accusantium, sint assumenda consequuntur commodi voluptas? Voluptatibus illum animi ratione id consequatur veritatis nisi impedit, minus temporibus iusto quos corrupti ea vitae maiores error itaque exercitationem quas! Non officia debitis dicta quod facilis velit aut ipsam repellat error, commodi deleniti ducimus! Aut soluta amet eos hic dolor! Consectetur, quod quis! Quia autem iste, quaerat nemo excepturi hic id, nostrum reprehenderit alias, voluptas iure! Odio esse ipsum adipisci impedit quam velit, sint aspernatur officiis fuga neque repudiandae blanditiis ad amet architecto odit reprehenderit illum porro, animi corporis. Doloremque excepturi similique, deserunt tempora consequatur deleniti laudantium nihil saepe. Neque officiis fugiat ipsam molestiae aliquid excepturi enim, optio vel iure possimus cum minima rerum provident laudantium est a necessitatibus iste aut repudiandae recusandae accusantium. Accusamus voluptatibus, quidem illo eligendi dolore beatae numquam voluptatum vero deleniti dignissimos enim delectus. Nihil officia assumenda ipsa at sapiente itaque illo magnam quidem consectetur nulla quas corporis repellat maxime adipisci vel soluta placeat vero, odio molestias ex deleniti blanditiis. Natus nihil, non aspernatur blanditiis perspiciatis dolorem quae numquam hic, ut ullam iste illo. Corrupti temporibus repudiandae molestias laborum veniam id adipisci accusamus error? Dolore consectetur quod quo consequuntur esse autem optio error eius aspernatur voluptatem! Nam delectus assumenda quo nulla provident nostrum quia cupiditate fugiat veritatis nihil ullam eius saepe consectetur, quidem corporis reprehenderit voluptatibus iste nemo alias accusamus exercitationem beatae vitae rerum? Eius ullam et sint hic? Veniam nostrum nam aliquam magni illum! Velit minima praesentium mollitia. Ab quia necessitatibus delectus omnis cupiditate, aut iure consequuntur quod perferendis ducimus ut commodi repellendus magni perspiciatis aperiam ipsam tempora ad amet autem veritatis quos sunt facilis nesciunt tempore! Tenetur, sunt?</p>
15+
</body>
16+
</html>

‎custom/float-layout/style.css

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
.float {
2+
float: left;
3+
margin: 15px;
4+
width: 150px;
5+
height: 100px;
6+
border-radius: 5px;
7+
background-color: rgb(207,232,220);
8+
padding: 1em;
9+
}
10+
11+
.text {
12+
background-color: rgb(79,185,227);
13+
padding: 10px;
14+
color: #fff;
15+
}

‎starter/04-CSS-Layouts/index.html

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -38,10 +38,11 @@ <h2>The Basic Language of the Web: HTML</h2>
3838
src="img/laura-jones.jpg"
3939
alt="Headshot of Laura Jones"
4040
height="50"
41-
width="50"
41+
width="50"\
42+
class="author-img"
4243
/>
4344

44-
<p id="author">
45+
<p id="author" class="author">
4546
Posted by <strong>Laura Jones</strong> on Monday, June 21st 2027
4647
</p>
4748

‎starter/04-CSS-Layouts/style.css

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -279,4 +279,12 @@ aside {
279279

280280
footer {
281281
clear: both;
282+
}
283+
284+
.author-img {
285+
float: left;
286+
}
287+
288+
.author {
289+
padding-left: 10px;
282290
}

0 commit comments

Comments
 (0)