-
Notifications
You must be signed in to change notification settings - Fork 1
/
web-design.html
135 lines (123 loc) · 4.64 KB
/
web-design.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<!DOCTYPE html>
<html lang="en-GB">
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
<meta name="author" content="Habdul Hazeez, ziizium"/>
<title>Alice & Bob Design Studio :: Web Design</title>
<link rel="stylesheet" href="css/all.min.css">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div id="skip">
<a href="#content">Skip to main content</a>
</div>
<div class="top">
<header class="header">
<a href="index.html">
<h1 class="header__name">Alice & Bob™</h1>
</a>
</header>
<nav class="navigation">
<ul class="navigation__menu">
<li class="navigation__item">
<a href="web-design.html" class="navigation__link active">Web Design</a>
</li>
<li class="navigation__item">
<a href="graphics-design.html" class="navigation__link">Graphics Design</a>
</li>
<li class="navigation__item">
<a href="contact.html" class="navigation__link">Contact Us</a>
</li>
<li class="navigation__item">
<a href="blog.html" class="navigation__link">Our Blog</a>
</li>
</ul>
</nav>
</div>
<aside id="hero" class="hero webdesign">
<div class="hero__container">
<p>We craft rich user interfaces using the latest in HTML, CSS and JavaScript</p>
</div>
</aside>
<main class="main">
<div class="page-intro web-design" id="content">
<p class="page-intro__text">We specialize in creating accessible and usable websites using the latest development tools and technologies. Please check out some of our project below.</p>
</div>
<div class="row clearfix">
<section class="project">
<div class="media-card">
<img class="media-card__image" src="images/Unsplash.png" alt="An image of unsplash photosharing website" width="300px" height="200px">
<div class="media-card__content">
<h2 class="media-card__title">Unsplash</h2>
<p class="media-card__body">Visit the real <a href="https://unsplash.com">unsplash website</a></p>
</div>
</div>
</section>
<section class="project">
<div class="media-card">
<img class="media-card__image" src="images/Rethink.png" alt="An image of a fictional site named Rethink studios" width="300px" height="200px">
<div class="media-card__content">
<h2 class="media-card__title">Rethink studios</h2>
<p class="media-card__body">The site is fiction</p>
</div>
</div>
</section>
</div>
<div class="row clearfix">
<section class="project">
<div class="media-card">
<img class="media-card__image" src="images/Bukateria.png" alt="An image of a fictional site named Bukateria" width="300px" height="200px">
<div class="media-card__content">
<h2 class="media-card__title">Bukateria</h2>
<p class="media-card__body">The site is fiction</p>
</div>
</div>
</section>
<section class="project">
<div class="media-card">
<img class="media-card__image" src="images/DEV.png" alt="An image of the developer site named ThePracticalDev" width="300px" height="200px">
<div class="media-card__content">
<h2 class="media-card__title">ThePractical DEV</h2>
<p class="media-card__body">Visit the <a href="https://dev.to">ThePracticalDev website</a></p>
</div>
</div>
</section>
</div>
</main>
<footer class="footer">
<div class="footer__row">
<div class="footer__column">
<a href="index.html">Alice & Bob™</a>
</div>
<div class="footer__column">
<ul class="footer__list">
<li class="footer__item social">
<a class="footer__link" href="#"><em class="fab fa-facebook"><span class="visuallyhidden">Alice and Bob Facebook</span></em></a>
</li>
<li class="footer__item social">
<a class="footer__link" href="#"><em class="fab fa-twitter"><span class="visuallyhidden">Alice and Bob Twitter</span></em></a>
</li>
<li class="footer__item social">
<a class="footer__link" href="#"><em class="fab fa-instagram"><span class="visuallyhidden">Alice and Bob Instagram</span></em></a>
</li>
</ul>
</div>
<div class="footer__column">
<ul class="footer__list">
<li class="footer__item hidden-mobile">
<a class="footer__link" href="contact.html">Contact Us</a>
</li>
<li class="footer__item hidden-mobile">
<a class="footer__link" href="blog.html">Our Blog</a>
</li>
</ul>
</div>
</div>
<div class="footer__inner">
<p class="footer__text">© 2020</p>
</div>
</footer>
</body>
</html>