Skip to content

Commit 0147579

Browse files
author
prathi.kotian
committed
Staging all files
0 parents  commit 0147579

6 files changed

+129
-0
lines changed

‎img/boris-smokrovic-blue and brown bird on brown tree trunk-unsplash.jpg

1.16 MB
Loading

‎img/boris-smokrovic-yellow bird on Sakura tree-unsplash.jpg

772 KB
Loading

‎img/main.jpg

104 KB
Loading

‎img/mehdi-sepehri-unsplash.jpg

262 KB
Loading

‎shapes.css

+89
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
* {
2+
box-sizing: border-box;
3+
}
4+
5+
body {
6+
font-family: Ubuntu, Roboto, Arial, sans-serif;
7+
margin: 0;
8+
/* background: darkorange; */
9+
background: #ffaf87;
10+
}
11+
12+
.header {
13+
background: center/cover border-box url("img/mehdi-sepehri-unsplash.jpg") no-repeat transparent;
14+
height: 100vh;
15+
}
16+
17+
.mehdi {
18+
background-color: #bbbaba;
19+
color: white;
20+
text-decoration: none;
21+
padding: 4px 6px;
22+
font-size: 12px;
23+
font-weight: bold;
24+
line-height: 1.2;
25+
border-radius: 3px;
26+
position: absolute;
27+
left: 0;
28+
bottom: 0;
29+
}
30+
31+
.mehdi:hover,
32+
.mehdi:focus {
33+
background: black;
34+
}
35+
36+
.mehdi span {
37+
display: inline-block;
38+
padding: 2px 3px;
39+
}
40+
41+
.mehdi svg {
42+
height: 12px;
43+
width: auto;
44+
position: relative;
45+
vertical-align: middle;
46+
top: -2px;
47+
fill: white;
48+
}
49+
50+
51+
52+
53+
54+
55+
56+
57+
58+
59+
60+
61+
62+
63+
64+
65+
/* img {
66+
max-width: 200px;
67+
height: 200px;
68+
border-radius: 100px;
69+
float: left;
70+
margin-right: 2em;
71+
margin-bottom: 1em;
72+
}
73+
74+
75+
76+
.circle {
77+
shape-outside: circle();
78+
} */
79+
80+
/* .fifty { */
81+
/* shape-outside: circle(50%); */
82+
/* shape-outside: polygon(0 0, 10% 10%, 50% 20%, 150% 100%, 100% 80%, 50% 60%); */
83+
/* shape-outside: polygon(0px 57px, 75.51% 3.98%, 101.72% 41.31%, 95.25% 67.59%, 76.72% 90.19%, 41.81% 97.5%);
84+
shape-margin: 20px;
85+
}
86+
87+
.para {
88+
writing-mode: sideways-lr;
89+
} */

‎shapes.html

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<!DOCTYPE html>
2+
<html lang="en" dir="ltr">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>CSS Shapes</title>
6+
<link rel="stylesheet" href="shapes.css">
7+
</head>
8+
<body>
9+
<main>
10+
<section class="header">
11+
<a class="mehdi" href="https://unsplash.com/@mehdisepehri?utm_medium=referral&amp;utm_campaign=photographer-credit&amp;utm_content=creditBadge" target="_blank" rel="noopener noreferrer" title="Download free do whatever you want high-resolution photos from Mehdi Sepehri">
12+
<span>
13+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
14+
<title>unsplash-logo</title>
15+
<path d="M10 9V0h12v9H10zm12 5h10v18H0V14h10v9h12v-9z"></path>
16+
</svg>
17+
</span>
18+
<span>Mehdi Sepehri</span>
19+
</a>
20+
</section>
21+
<section>
22+
<h1>Mountain Range</h1>
23+
<img class="circle" src="img/main.jpg" alt="Mountain">
24+
<p>
25+
The shape-outside CSS property defines a shape—which may be non-rectangular—around which adjacent inline content should wrap. By default, inline content wraps around its margin box; shape-outside provides a way to customize this wrapping, making it possible to wrap text around complex objects rather than simple boxes.
26+
Sometimes a web page's text content appears to be funneling your attention towards a spot on the page to drive you to follow a particular link. Sometimes you don't notice.
27+
</p>
28+
<img class="fifty" src="img/main.jpg" alt="Mountain">
29+
<p>
30+
The shape-outside CSS property defines a shape—which may be non-rectangular—around which adjacent inline content should wrap. By default, inline content wraps around its margin box; shape-outside provides a way to customize this wrapping, making it possible to wrap text around complex objects rather than simple boxes.
31+
Sometimes a web page's text content appears to be funneling your attention towards a spot on the page to drive you to follow a particular link. Sometimes you don't notice.
32+
</p>
33+
<p class="para">
34+
This athletic young Frenchman belongs to a small set of Parisian sportsmen, who have taken up “ballooning” as a pastime. After having exhausted all the sensations that are to be found in ordinary sports, even those of “automobiling” at a breakneck speed, the members of the “Aéro Club” now seek in the air, where they indulge in all kinds of daring feats, the nerve-racking at a breakneck speed, the members of the “Aéro Club” now seek in the air, where they indulge in all kinds of daring feats, the nerve-racking excitement that they have ceased to find on earth.
35+
</p>
36+
<a style="background-color:black;color:white;text-decoration:none;padding:4px 6px;font-family:-apple-system, BlinkMacSystemFont, &quot;San Francisco&quot;, &quot;Helvetica Neue&quot;, Helvetica, Ubuntu, Roboto, Noto, &quot;Segoe UI&quot;, Arial, sans-serif;font-size:12px;font-weight:bold;line-height:1.2;display:inline-block;border-radius:3px" href="https://unsplash.com/@borisworkshop?utm_medium=referral&amp;utm_campaign=photographer-credit&amp;utm_content=creditBadge" target="_blank" rel="noopener noreferrer" title="Download free do whatever you want high-resolution photos from Boris Smokrovic"><span><svg xmlns="http://www.w3.org/2000/svg" style="height:12px;width:auto;position:relative;vertical-align:middle;top:-2px;fill:white" viewBox="0 0 32 32"><title>unsplash-logo</title><path d="M10 9V0h12v9H10zm12 5h10v18H0V14h10v9h12v-9z"></path></svg></span><span>Boris Smokrovic</span></a>
37+
</section>
38+
</main>
39+
</body>
40+
</html>

0 commit comments

Comments
 (0)