Skip to content

Commit 711a7b5

Browse files
codeadamcacodeadamca
committed
Removed duplicate deconstruction
1 parent 3bd02b1 commit 711a7b5

File tree

18 files changed

+799
-0
lines changed

18 files changed

+799
-0
lines changed

‎7-deconstruction-fluid/adam/background.jpeg

390 KB
Loading

‎7-deconstruction-fluid/adam/home.html

Lines changed: 117 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
1+
<!--
2+
This code snippet is a deconstruction of a previous verion of:
3+
https://codeadam.ca/
4+
-->
5+
<!DOCTYPE html>
6+
<html lang="en">
7+
<head>
8+
<title>Deconstruction</title>
9+
10+
<style>
11+
12+
body {
13+
margin: 0;
14+
}
15+
16+
header {
17+
display: flex;
18+
background-color: #333;
19+
padding: 10px;
20+
color: #fff;
21+
justify-content: space-between;
22+
position: fixed;
23+
top: 0;
24+
left: 0;
25+
right: 0;
26+
}
27+
28+
.hero {
29+
width: 100vw;
30+
height: 100vh;
31+
background-color: #999;
32+
display: flex;
33+
justify-content: center;
34+
align-items: center;
35+
text-align: center;
36+
background-image: url('background.jpeg');
37+
background-size: cover;
38+
position: relative;
39+
}
40+
41+
.hero h1,
42+
.hero h2 {
43+
background-color: #fff;
44+
padding: 5px;
45+
}
46+
47+
.hero-content {
48+
z-index: 20;
49+
}
50+
51+
.hero video {
52+
width: 100vw;
53+
height: 100vh;
54+
object-fit: cover;
55+
position: absolute;
56+
top: 0;
57+
left: 0;
58+
z-index: 10;
59+
}
60+
61+
</style>
62+
</head>
63+
<body>
64+
65+
<header>
66+
67+
<div>
68+
Adam Thomas
69+
</div>
70+
71+
<div>
72+
73+
&starf;
74+
&starf;
75+
&starf;
76+
&starf;
77+
&starf;
78+
79+
</div>
80+
81+
<!--
82+
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
83+
-->
84+
85+
86+
</header>
87+
88+
<div class="hero">
89+
90+
<div class="hero-content">
91+
<h1>Adam Thomas</h1>
92+
<h2>Learning and teaching code!</h2>
93+
</div>
94+
95+
<div class="hero-video">
96+
<video width="320" height="240" preload="auto" autoplay="true" loop muted>
97+
<source src="https://codeadam.ca/static/media/home-video.6057a6c8ab306b428d78.mp4" type="video/mp4">
98+
</video>
99+
</div>
100+
101+
<!--
102+
https://codeadam.ca/static/media/home-video.6057a6c8ab306b428d78.mp4
103+
-->
104+
105+
</div>
106+
107+
<div>
108+
109+
<h2>Lorem, ipsum dolor.</h2>
110+
111+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet et tempora quis?</p>
112+
<p>Lorem ipsum dolor sit amet consectetur adipisicing.</p>
113+
114+
</div>
115+
116+
</body>
117+
</html>

‎7-deconstruction-fluid/caferati/home.html

Lines changed: 153 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,153 @@
1+
<!--
2+
This code snippet is a deconstruction of a previous verion of:
3+
https://caferati.me/portfolio
4+
-->
5+
<!DOCTYPE html>
6+
<html lang="en">
7+
<head>
8+
<title>Deconstruction</title>
9+
10+
<style>
11+
12+
body {
13+
background-color: #2a2a2a;
14+
color: #fff;
15+
font-family: Arial, Helvetica, sans-serif;
16+
}
17+
18+
#container {
19+
max-width: 1000px;
20+
margin: auto;
21+
}
22+
h1 {
23+
text-transform: lowercase;
24+
}
25+
26+
#gallery img {
27+
max-width: 100%;
28+
}
29+
30+
#gallery {
31+
display: flex;
32+
flex-wrap: wrap;
33+
justify-content: space-between;
34+
}
35+
#gallery div {
36+
width: 48%;
37+
margin-bottom: 4%;
38+
}
39+
40+
footer {
41+
text-align: center;
42+
}
43+
44+
a:link,
45+
a:visited,
46+
a:hover,
47+
a:active {
48+
color: #fff;
49+
font-weight: bold;
50+
text-decoration: none;
51+
}
52+
53+
nav a:link,
54+
nav a:visited,
55+
nav a:hover,
56+
nav a:active {
57+
display: inline-block;
58+
border: 1px solid #fff;
59+
padding: 3px 5px;
60+
}
61+
62+
#follow {
63+
position: fixed;
64+
top: -30px;
65+
left: -30px;
66+
background: #08769b;
67+
transform-origin: 100% 0; /* or top left */
68+
transform: translate(-29.3%) rotate(-45deg);
69+
padding: 10px 60px;
70+
}
71+
72+
</style>
73+
74+
</head>
75+
<body>
76+
77+
<div id="follow">
78+
79+
<a href="#"> Follow me on GitHub</a>
80+
81+
</div>
82+
83+
<div id="container">
84+
85+
<header>
86+
87+
<h1>Web Developer Portfolio</h1>
88+
89+
</header>
90+
91+
<main>
92+
93+
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quidem, nobis.</p>
94+
95+
<nav>
96+
<a href="#">HTML</a>
97+
<a href="#">CSS</a>
98+
<a href="#">JavaScript</a>
99+
<a href="#">PHP</a>
100+
<a href="#">Node.js</a>
101+
<a href="#">Python</a>
102+
<a href="#">C#</a>
103+
<a href="#">Laravel</a>
104+
</nav>
105+
106+
<p>Lorem ipsum dolor sit, amet consectetur adipisicing.</p>
107+
108+
<div id="gallery">
109+
110+
<div>
111+
<a href="#">
112+
<img src="images/arduino.jpg">
113+
</a>
114+
</div>
115+
116+
<div>
117+
<a href="#">
118+
<img src="images/robot.jpg">
119+
</a>
120+
</div>
121+
122+
<div>
123+
<a href="#">
124+
<img src="images/arduino.jpg">
125+
</a>
126+
</div>
127+
128+
<div>
129+
<a href="#">
130+
<img src="images/robot.jpg">
131+
</a>
132+
</div>
133+
134+
</div>
135+
136+
</main>
137+
138+
<footer>
139+
140+
<h3>Let's Talk</h3>
141+
142+
<a href="#">Instagram</a>
143+
<a href="#">Facebook</a>
144+
<a href="#">Twitter</a>
145+
146+
</footer>
147+
148+
</div>
149+
150+
151+
152+
</body>
153+
</html>

‎7-deconstruction-fluid/caferati/images/arduino.jpg

137 KB
Loading

‎7-deconstruction-fluid/caferati/images/robot.jpg

77.2 KB
Loading

0 commit comments

Comments
 (0)