Skip to content

Commit 0e56d7a

Browse files
NS007-devNS007-dev
committed
update
1 parent 7235040 commit 0e56d7a

14 files changed

+454
-0
lines changed

‎favicon.png

6.12 KB
Loading

‎images/enjoy.png

7.58 KB
Loading

‎images/learncode.jpg

14.2 KB
Loading

‎images/mathcat.png

392 KB
Loading

‎images/mindmap.jpg

18.3 KB
Loading

‎images/mozilla.jpg

19.8 KB
Loading

‎images/software-engineer-skills.png

570 KB
Loading

‎images/softwareword.jpg

11.4 KB
Loading

‎images/stackoverflow.png

19.7 KB
Loading

‎images/w3.jpg

5.23 KB
Loading

‎index.css

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
2+
3+
*{
4+
box-sizing: border-box;
5+
}
6+
7+
body{
8+
font-family: Arial, Helvetica, sans-serif;
9+
padding: 10px;
10+
background-image: linear-gradient(rgb(16, 78, 78), rgb(121, 121, 5));
11+
}
12+
13+
.header{
14+
padding: 30px;
15+
background-image: linear-gradient(rgb(8, 196, 196), yellow);
16+
text-align: center;
17+
font-family: 'Bebas Neue', cursive;
18+
border-top-left-radius: 25px;
19+
border-top-right-radius: 25px;
20+
}
21+
22+
.header h1{
23+
font-size: 50px;
24+
}
25+
26+
.topnav{
27+
overflow: hidden;
28+
background-color: #333;
29+
border-bottom-left-radius: 25px;
30+
border-bottom-right-radius: 25px;
31+
}
32+
33+
.topnav a{
34+
float: left;
35+
display: block;
36+
color: #f2f2f2;
37+
text-align: center;
38+
padding: 14px 16px;
39+
text-decoration: none;
40+
}
41+
42+
.topnav a:hover{
43+
background-color: #ddd;
44+
color: black;
45+
}
46+
47+
48+
.logo img{
49+
width: 130px;
50+
height:130px;
51+
float: left;
52+
}
53+
54+
.leftcolumn{
55+
float:left;
56+
width: 75%;
57+
border-radius: 25px;
58+
}
59+
60+
.rightcolumn{
61+
float: left;
62+
width:25%;
63+
padding-left: 20px;
64+
border-radius: 25px;
65+
}
66+
67+
img{
68+
width: 100%;
69+
padding: 20px;
70+
}
71+
72+
.card{
73+
background-color: white;
74+
padding: 20px;
75+
margin-top: 20px;
76+
border-radius: 25px;
77+
}
78+
79+
.row:after{
80+
content: "";
81+
display: table;
82+
clear: both;
83+
}
84+
85+
.footer{
86+
padding: 20px;
87+
text-align: center;
88+
background-color: #ddd;
89+
margin-top: 20px;
90+
border-radius: 25px;
91+
}
92+
93+
@media screen and (max-width: 800px){
94+
.leftcolumn, .rightcolumn{
95+
width: 100%;
96+
padding: 0;
97+
}
98+
}
99+
100+
@media screen and (max-width: 400px){
101+
.topnav a{
102+
float: none;
103+
width: 100%;
104+
}
105+
}

‎index.html

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<link rel="icon" href="./favicon.png" />
5+
<title> Web Dev Book 📚</title>
6+
<link rel="stylesheet" type = "text/css" href="index.css">
7+
<meta name="viewport" content="width=device-width, initial-scale=1">
8+
</head>
9+
<body>
10+
<div class="header">
11+
<div class="logo">
12+
<img src="./favicon.png"/>
13+
</div>
14+
<h1>
15+
Web Dev Book 📚
16+
</h1>
17+
<h3> Here is a list of websites and resources to begin your developer journey! </h3>
18+
</div>
19+
<div class="topnav">
20+
<a href="./index.html">Home 🏡</a>
21+
<a href="https://noorinsakhi.github.io/duties.html"> Code equipment 💼 </a>
22+
<a href="./links.html">Links and resources 🔗</a>
23+
<a href="https://noorinsakhi.github.io/itsupportslideshow.html">Quick start to basic code!</a>
24+
</div>
25+
26+
27+
<div class="row">
28+
<div class="leftcolumn">
29+
<div class="card">
30+
<h2>
31+
What can you do if you are a software engineer? 🤷‍♀️🤷
32+
</h2>
33+
<h3>
34+
See the list below:
35+
</h3>
36+
<img src="./images/mindmap.jpg" width="950" height="480" />
37+
</h3>
38+
<p>
39+
<ul>
40+
<li> Create websites! 🌐</li>
41+
<li> Create life changing apps! 📱</li>
42+
<li> Learn multiple languages! 👩‍💻👨‍💻</li>
43+
<li> Create your own games! 🎮🕹️</li>
44+
<li>Learn a new life skill...</li>
45+
</ul>
46+
</p>
47+
</div>
48+
49+
<div class="card">
50+
<h2>
51+
What mindset an aspiring software engineer needs to be equipped with 🧠:
52+
</h2>
53+
<h3>
54+
<i>It's not just code you need to get your head around 💫 ...</i>
55+
</h3>
56+
<img src="./images/software-engineer-skills.png" style="height:500px;"/>
57+
<p>
58+
<ul>
59+
<li> You need the endurance to complete a task. ✔️</li>
60+
<li> You need the time to complete a code task. ⌚ </li>
61+
<li> You need to be able to work well with others. 👊</li>
62+
<li> You need to be able to set reasonable targets. 🎯</li>
63+
<li> You should have a love and passion for the modern world of technology! ⚙️</li>
64+
<li> Be confident with mathematics! ➗➖</li>
65+
</ul>
66+
</p>
67+
</div>
68+
</div>
69+
<div class="rightcolumn">
70+
<div class="card">
71+
<h2>
72+
Our personal Favourite resource... 🤩
73+
</h2>
74+
<img src="./images/w3.jpg" style="height: 200px; width: 275px;"/>
75+
<h3>With all the code examples, and docs, see here:</h3>
76+
<a href="https://www.w3schools.com/" class="button">W3 Schools</a>
77+
</div>
78+
<div class="card">
79+
<h3>
80+
See the official documentation:
81+
</h3>
82+
<p>Want to see the latest releases in documentation? Click the image below for mozilla web docs!</p>
83+
<a href="https://developer.mozilla.org/en-US/"><img src ="./images/mozilla.jpg"/></a>
84+
<h3>
85+
See frequently asked code questions...
86+
</h3>
87+
<p>Stackoverflow, the home of code questions!</p>
88+
<a href="https://stackoverflow.com/"><img src="./images/stackoverflow.png"/></a>
89+
<h3>Welcome to your coding journey! 🎒</h3>
90+
<p>Enjoy learning to code!</p>
91+
92+
<img src="./images/enjoy.png"/>
93+
94+
</div>
95+
</div>
96+
</div>
97+
<div class="footer">
98+
<img src="./favicon.png" style="height: 100px; width: 100px; float: left;"/>
99+
<h2>
100+
Web Dev Book!
101+
</h2>
102+
</div>
103+
</body>
104+
</html>
105+
106+
</html>

‎links.css

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
2+
3+
*{
4+
box-sizing: border-box;
5+
}
6+
7+
body{
8+
font-family: Arial, Helvetica, sans-serif;
9+
padding: 10px;
10+
background-image: linear-gradient(rgb(16, 78, 78), rgb(121, 121, 5));
11+
}
12+
13+
.header{
14+
padding: 30px;
15+
background-image: linear-gradient(rgb(8, 196, 196), yellow);
16+
text-align: center;
17+
font-family: 'Bebas Neue', cursive;
18+
border-top-left-radius: 25px;
19+
border-top-right-radius: 25px;
20+
}
21+
22+
.header h1{
23+
font-size: 50px;
24+
}
25+
26+
.topnav{
27+
overflow: hidden;
28+
background-color: #333;
29+
border-bottom-left-radius: 25px;
30+
border-bottom-right-radius: 25px;
31+
}
32+
33+
.topnav a{
34+
float: left;
35+
display: block;
36+
color: #f2f2f2;
37+
text-align: center;
38+
padding: 14px 16px;
39+
text-decoration: none;
40+
}
41+
42+
.topnav a:hover{
43+
background-color: #ddd;
44+
color: black;
45+
}
46+
47+
table, th, td{
48+
border: 1px solid blue;
49+
font-size: 20px;
50+
border-radius: 6px;
51+
width: 600px;
52+
background-image: linear-gradient(yellow, cyan);
53+
}
54+
55+
.logo img{
56+
width: 130px;
57+
height:130px;
58+
float: left;
59+
}
60+
61+
.leftcolumn{
62+
float:left;
63+
width: 75%;
64+
border-radius: 25px;
65+
}
66+
67+
.rightcolumn{
68+
float: left;
69+
width:25%;
70+
padding-left: 20px;
71+
border-radius: 25px;
72+
}
73+
74+
img{
75+
width: 100%;
76+
padding: 20px;
77+
}
78+
79+
.card{
80+
background-color: white;
81+
padding: 20px;
82+
margin-top: 20px;
83+
border-radius: 25px;
84+
}
85+
86+
.row:after{
87+
content: "";
88+
display: table;
89+
clear: both;
90+
}
91+
92+
.footer{
93+
padding: 20px;
94+
text-align: center;
95+
background-color: #ddd;
96+
margin-top: 20px;
97+
border-radius: 25px;
98+
}
99+
100+
@media screen and (max-width: 800px){
101+
.leftcolumn, .rightcolumn{
102+
width: 100%;
103+
padding: 0;
104+
}
105+
}
106+
107+
@media screen and (max-width: 400px){
108+
.topnav a{
109+
float: none;
110+
width: 100%;
111+
}
112+
}

0 commit comments

Comments
 (0)