Skip to content

Commit ac42b13

Browse files
NS007-devNS007-dev
committed
changes
1 parent 6d251be commit ac42b13

File tree

9 files changed

+651
-13
lines changed

9 files changed

+651
-13
lines changed

‎codeeequip.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
body{
88
font-family: Arial, Helvetica, sans-serif;
99
padding: 10px;
10-
background-image: linear-gradient(rgb(16, 78, 78), rgb(121, 121, 5));
10+
background-image: linear-gradient(rgb(231, 133, 5), rgb(61, 155, 37));
1111
}
1212

1313
.header{

‎codeequip.html‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<head>
55
<link rel="icon" href="./favicon.png" />
66
<title> Web Dev Book 📚</title>
7-
<link rel="stylesheet" type="text/css" href="index.css">
7+
<link rel="stylesheet" type="text/css" href="./codeequip.css">
88
<meta name="viewport" content="width=device-width, initial-scale=1">
99
</head>
1010

@@ -22,11 +22,9 @@ <h3> Here is a list of websites and resources to begin your developer journey! <
2222
<a href="./index.html">Home 🏡</a>
2323
<a href="./codeequip.html"> Code equipment 💼 </a>
2424
<a href="./links.html">Links and resources 🔗</a>
25-
<a href="https://noorinsakhi.github.io/itsupportslideshow.html">Quick start to basic code!</a>
26-
<a href="https://noorinsakhi.github.io/itsupportslideshow.html">GitHub</a>
27-
<a href="https://noorinsakhi.github.io/itsupportslideshow.html">Intro to JavaScript!</a>
28-
<a href="https://noorinsakhi.github.io/itsupportslideshow.html">Intro to HTML!</a>
29-
<a href="https://noorinsakhi.github.io/itsupportslideshow.html">Intro to CSS!</a>
25+
<a href="./js.html">JavaScript Links.</a>
26+
<a href="./html.html">HTML Links.</a>
27+
<a href="./css.html">CSS Links.</a>
3028
</div>
3129

3230

‎css.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(231, 133, 5), rgb(61, 155, 37));
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+
}

‎css.html‎

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

‎html.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(231, 133, 5), rgb(61, 155, 37));
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+
}

0 commit comments

Comments
 (0)