Skip to content

Commit 8d742f2

Browse files
solygambassolygambas
committed
add css grid
1 parent 827e9a9 commit 8d742f2

File tree

3 files changed

+500
-54
lines changed

3 files changed

+500
-54
lines changed

Diff for: ‎52-responsive website grid/index.html

+91
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
<!-- Based on Mobile-First Responsive Build (with CSS Grid) by Shaun Pelling - The Net Ninja (2020)
2+
https://www.youtube.com/watch?v=PM3XW_1RAIs&list=PL4cUxeGkcC9hH1tAjyUPZPjbj-7s200a4&index=1 -->
3+
4+
<!DOCTYPE html>
5+
<html lang="en">
6+
<head>
7+
<meta charset="UTF-8" />
8+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
9+
<link rel="stylesheet" href="style.css" />
10+
<title>Cosmo Junkie</title>
11+
</head>
12+
<body>
13+
<nav class="site-nav grid">
14+
<h1>Cosmo Junkie</h1>
15+
<ul>
16+
<li><a href="#portfolio">Portfolio</a></li>
17+
<li><a href="#skills">Skills</a></li>
18+
<li><a href="#contact">Contact</a></li>
19+
</ul>
20+
</nav>
21+
<section id="welcome" class="grid">
22+
<div class="welcome-text">
23+
<h2>Space Enthusiast<br />& JavaScript Developer</h2>
24+
<p class="leading">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In commodo consequat.</p>
25+
<a href="#portfolio" class="button">View my work</a>
26+
</div>
27+
<div class="welcome-img">
28+
<img src="https://image.flaticon.com/icons/svg/190/190279.svg" alt="pic of planet">
29+
</div>
30+
</section>
31+
<section id="portfolio">
32+
<h3>Some of my Projects</h3>
33+
<div class="projects grid">
34+
<a href="#">
35+
<img src="https://image.flaticon.com/icons/svg/190/190283.svg" alt="space race image">
36+
<h4>Space Race Game</h4>
37+
</a>
38+
<a href="#">
39+
<img src="https://image.flaticon.com/icons/svg/190/190288.svg" alt="planet boy image">
40+
<h4>Planet Boy API</h4>
41+
</a>
42+
<a href="#">
43+
<img src="https://image.flaticon.com/icons/svg/190/190278.svg" alt="captain cosmo image">
44+
<h4>Captain Cosmo Blog</h4>
45+
</a>
46+
</div>
47+
</section>
48+
<section id="skills">
49+
<h3>Things I Can Do</h3>
50+
<ul class="grid">
51+
<li>
52+
<img src="https://image.flaticon.com/icons/svg/2647/2647400.svg" alt="comet">
53+
<h4>JavaScript</h4>
54+
</li>
55+
<li>
56+
<img src="https://image.flaticon.com/icons/svg/2534/2534248.svg" alt="comet">
57+
<h4>React</h4>
58+
</li>
59+
<li>
60+
<img src="https://image.flaticon.com/icons/svg/2909/2909923.svg" alt="comet">
61+
<h4>Firebase</h4>
62+
</li>
63+
<li>
64+
<img src="https://image.flaticon.com/icons/svg/3419/3419291.svg" alt="comet">
65+
<h4>Gatsby</h4>
66+
</li>
67+
</ul>
68+
69+
</section>
70+
<section id="contact">
71+
<h3>Get In Touch</h3>
72+
<p class="leading">Lorem ipsum dolor sit amet, consectetur.</p>
73+
<form>
74+
<input type="text" placeholder='NAME'>
75+
<input type="email" placeholder='EMAIL'>
76+
<textarea placeholder='YOUR MESSAGE'></textarea>
77+
<button class="button">Send Flare</button>
78+
</form>
79+
</section>
80+
<footer>
81+
<div class="grid">
82+
<p class="copyright">Copyright 2021 Cosmo Junkie</p>
83+
<ul class="social">
84+
<li><a href="#"><img src="https://raw.githubusercontent.com/iamshaunjp/responsive-css-grid-build/847f0a24fecf4aba7cd205a09b7a52b7924766cf/assets/icon_fb.svg" alt="facebook"></a></li>
85+
<li><a href="#"><img src="https://raw.githubusercontent.com/iamshaunjp/responsive-css-grid-build/847f0a24fecf4aba7cd205a09b7a52b7924766cf/assets/icon_tw.svg" alt="twitter"></a></li>
86+
</ul>
87+
</div>
88+
</footer>
89+
</body>
90+
</html>
91+
</html>

0 commit comments

Comments
 (0)