• R/O
  • SSH

speakers: Commit

General HTML mock-up


Commit MetaInfo

Revision0c9729027971d4c63700a38791bfc567f45a5d87 (tree)
Time2022-06-23 07:27:59
AuthorD Sullivan <david@prov...>
CommiterD Sullivan

Log Message

Initial version.

Change Summary

Incremental Difference

diff -r 000000000000 -r 0c9729027971 img/bjarne.png
Binary file img/bjarne.png has changed
diff -r 000000000000 -r 0c9729027971 img/linus.jpg
Binary file img/linus.jpg has changed
diff -r 000000000000 -r 0c9729027971 index.html
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/index.html Wed Jun 22 23:27:59 2022 +0100
@@ -0,0 +1,93 @@
1+<html><!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>Speakers</title>
8+ <link href='https://fonts.googleapis.com/css?family=Covered+By+Your+Grace|Raleway:100,200,300,500,600,800' rel='stylesheet'>
9+ <link rel='stylesheet' href='style.css'>
10+</head>
11+<body>
12+
13+<div class="main">
14+
15+<header>
16+ <div class="styles-conference-head">STYLES<br>CONFERENCE</div>
17+ <table>
18+ <tr>
19+ <td class="date" colspan="5">24th - 26th August, London</td>
20+ </tr>
21+ <tr>
22+ <td><a href="#" class="menu-head">Home</a></td>
23+ <td><a href="#" class="menu-head">Speakers</a></td>
24+ <td><a href="#" class="menu-head">Schedule</a></td>
25+ <td><a href="#" class="menu-head">Venue</a></td>
26+ <td><a href="#" class="menu-head">Register</a></td>
27+ </tr>
28+ </table>
29+</header>
30+
31+ <div class="title">
32+ <p class="speakers">Speakers</p>
33+ <p class="blurb">We're happy to welcome over twenty speakers to present on the industry's latest technologies.</p><p class="blurb">Prepare for an inspiration extravaganza.</p>
34+ </div>
35+
36+<div class="container">
37+
38+<div class="child-1">
39+
40+<div class="title-speakers">
41+ <h3 class="title-speakers">Linus Torvalds</h3>
42+ <h3 class="bio">LINUX FOUNDER</h3>
43+</div>
44+
45+<div class="bio">
46+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vel rhoncus magna. Nunc sagittis velit sed tellus blandit maximus. Praesent finibus tincidunt risus sed condimentum. Maecenas egestas metus id nunc finibus pharetra. Aliquam auctor ex id justo sodales venenatis. Praesent cursus, augue quis egestas ultrices, magna nisi hendrerit quam, et tincidunt quam elit porttitor leo. In hac habitasse platea dictumst. Cras vitae rutrum diam, vitae rhoncus ex. Sed elementum lobortis nisi, et pellentesque lorem vehicula a. Suspendisse ut rutrum ligula.</p>
47+<p>ABOUT LINUS</p>
48+<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vel rhoncus magna. Nunc sagittis velit sed tellus blandit maximus. Praesent finibus tincidunt risus sed condimentum. Maecenas egestas metus id nunc finibus pharetra.</p>
49+<br>
50+</div>
51+
52+ <div class="title-speakers">
53+ <h3 class="title-speakers">Bjarne Stroustrup</h3>
54+ <h3 class="bio">COMPUTER SCIENTIST</h3>
55+</div>
56+
57+<div class="bio">
58+<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vel rhoncus magna. Nunc sagittis velit sed tellus blandit maximus. Praesent finibus tincidunt risus sed condimentum. Maecenas egestas metus id nunc finibus pharetra. Aliquam auctor ex id justo sodales venenatis. Praesent cursus, augue quis egestas ultrices, magna nisi hendrerit quam, et tincidunt quam elit porttitor leo. In hac habitasse platea dictumst. Cras vitae rutrum diam, vitae rhoncus ex. Sed elementum lobortis nisi, et pellentesque lorem vehicula a. Suspendisse ut rutrum ligula.</p>
59+<p>ABOUT BJARNE</p>
60+<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vel rhoncus magna. Nunc sagittis velit sed tellus blandit maximus. Praesent finibus tincidunt risus sed condimentum. Maecenas egestas metus id nunc finibus pharetra.</p><br></div>
61+
62+ </div>
63+
64+ <div class="child-2">
65+ <img src="./img/linus.jpg" class="photo1" alt="Linus Torvalds">
66+ <figcaption>Linus Torvalds</figcaption>
67+
68+
69+ <img src="./img/bjarne.png" class="photo2" alt="Bjarne Stroustrup">
70+ <figcaption>Bjarne Stroustrup</figcaption>
71+ </div>
72+
73+ </div>
74+</div>
75+
76+ <footer>
77+
78+
79+ <div class="styles-conference-foot">Styles Conference Ltd.</div>
80+ <table>
81+ <tr>
82+ <td><a href="#" class="menu-foot">Home</a></td>
83+ <td><a href="#" class="menu-foot">Speakers</a></td>
84+ <td><a href="#" class="menu-foot">Schedule</a></td>
85+ <td><a href="#" class="menu-foot">Venue</a></td>
86+ <td><a href="#" class="menu-foot">Register</a></td>
87+ </tr>
88+ </table>
89+
90+ </footer>
91+</div>
92+</body>
93+</html>
diff -r 000000000000 -r 0c9729027971 style.css
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/style.css Wed Jun 22 23:27:59 2022 +0100
@@ -0,0 +1,161 @@
1+body {
2+ margin: 0 200px 0;
3+ padding: 0;
4+ background-color: rgb(199, 207, 212);
5+}
6+
7+
8+header{
9+ background-color: rgb(49, 69, 94);
10+ width:100%;
11+ display: flex;
12+ height: 200px;
13+ align-items: flex-end;
14+}
15+
16+.styles-conference-head{
17+ font-size: 50px;
18+ color:rgb(202, 206, 214);
19+ font-family: 'Raleway', sans-serif;
20+ font-weight: 200;
21+ flex: 1;
22+ margin-left: 50px;
23+ margin-bottom: 50px;
24+}
25+
26+.date {
27+ font-family: Verdana, Geneva, Tahoma, sans-serif;
28+ height: 50px;
29+ font-size: 22px;
30+ color: rgb(134, 136, 141);
31+ text-align: right;
32+}
33+
34+
35+.menu-head {
36+ text-decoration: none;
37+ color: rgb(239, 244, 255);
38+ font-family: 'Raleway', sans-serif;
39+ text-transform: uppercase;
40+ font-size: 18px;
41+}
42+
43+table {
44+ margin-bottom: 50px;
45+ margin-right: 50px;
46+}
47+
48+td {
49+ padding-right: 20px;
50+
51+}
52+
53+.title {
54+ width: auto;
55+ height: 250px;
56+ text-align: center;
57+ padding: 10 50 60 50;
58+ font-family: 'Raleway', sans-serif;
59+ background: linear-gradient(to right, #ACE7CB 0%, #F1F2EF 90%);
60+}
61+
62+.speakers {
63+ font-size: 50px;
64+ font-family: 'Raleway', sans-serif;
65+ font-weight: 300;
66+ color: #2b7552;
67+}
68+
69+.blurb {
70+ font-size: 32px;
71+ font-family: 'Raleway', sans-serif;
72+ font-weight: 300;
73+ font-size: 26px;
74+ color: #5f5f5f;
75+ margin: 10px;
76+}
77+
78+.child-1 {
79+ background: white;
80+ padding: 20px;
81+ padding-left: 60px;
82+ width: 60%
83+}
84+
85+.child-2 {
86+ background: white;
87+ width: 40%;
88+}
89+
90+.container {
91+ display: inline-flex;
92+}
93+
94+.bio {
95+ font-size: 20px;
96+ font-family: 'Raleway', sans-serif;
97+ font-weight: 300;
98+ color: #5f5f5f;
99+}
100+
101+.title-speakers {
102+ font-size: 30px;
103+ font-family: 'Raleway', sans-serif;
104+ font-weight: 300;
105+ color: #2b7552;
106+}
107+
108+h3.bio {
109+ font-size: 20px;
110+ margin-top: -20px;
111+ margin-bottom: 40px;
112+}
113+
114+.photo1 {
115+ margin: 150px 130 0 130;
116+ margin-left: 150px;
117+ height: 250px;
118+ width: 250px;
119+}
120+
121+.photo2 {
122+ margin: 30px 50 0 50;
123+ margin-left: 150px;
124+ height: 250px;
125+ width: 250px;
126+
127+}
128+
129+.styles-conference-foot {
130+ font-size: 22px;
131+ color: rgb(134, 136, 141);
132+ font-family: Verdana, Geneva, Tahoma, sans-serif;
133+ font-weight: 200;
134+ flex: 1;
135+ margin-left: 50px;
136+ margin-bottom: 50px;
137+}
138+
139+.menu-foot {
140+ text-decoration: none;
141+ color: rgb(239, 244, 255);
142+ font-family: 'Raleway', sans-serif;
143+ font-size: 18px;
144+}
145+
146+footer{
147+ background-color: rgb(49, 69, 94);
148+ width:100%;
149+ display: flex;
150+ height: 150px;
151+ align-items: flex-end;
152+}
153+
154+figcaption {
155+ text-align: center;
156+ margin-bottom: 190px;
157+ margin-top: 10;
158+ font-size: 16px;
159+ font-family: 'Raleway', sans-serif;
160+ color: #4d4c4c;
161+}
\ No newline at end of file
Show on old repository browser