add index.html, page styling and images

I have made a basic landing page for my dev portfolio. I have used CSS for some styling and images for the icons of languages with experience.
Ewan-Dev · Aug 2, 2024 · 49211a9 · 49211a9
commit 49211a9
Show file tree

Hide file tree

Showing 8 changed files with 69 additions and 0 deletions.
diff --git a/images/cLogo.png b/images/cLogo.png
diff --git a/images/cssLogo.png b/images/cssLogo.png
diff --git a/images/gitLogo.png b/images/gitLogo.png
diff --git a/images/grainyPurpleGradient.pdf b/images/grainyPurpleGradient.pdf
diff --git a/images/html5Logo.png b/images/html5Logo.png
diff --git a/images/pythonLogo.png b/images/pythonLogo.png
diff --git a/index.html b/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <link href="styling.css" rel="stylesheet">
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Ewan McCairn || Developer Portfolio </title>
+</head>
+<body>
+
+    <section class="center header">
+<p>hi, I'm Ewan</p>
+ </section>
+
+ <p><u><i>I am a senior-school student and developer</i></u></p>
+<p>languages with experience:</p>
+ <div class="wrap">
+            <img class="icon" src="images/pythonLogo.png">
+            <img class="icon" src="images/cLogo.png">
+            <img class="icon" src="images/html5Logo.png">
+            <img class="icon" src="images/gitLogo.png">
+</div>
+<br>
+<p>projects:</p>
+<p>wip</p>
+</body>
+
+</html>
diff --git a/styling.css b/styling.css
@@ -0,0 +1,41 @@
+@import url('https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');
+body {
+  font-family: "Space Mono", monospace;
+    font-weight: 200;
+    font-style: normal;
+    color: white;
+    margin:0.2em ;
+    padding: 0;
+    background-color: #0f0f0f;
+
+
+}
+p
+{
+  margin:0.3em;
+}
+.header
+{
+  height: 5em;
+  text-align: center;
+  border-radius: 1em;
+  background: linear-gradient(215deg, rgba(255,102,252,0.9819940476190476) 0%, rgba(141,51,228,1) 61%, rgba(9,17,102,1) 100%);
+}
+.center
+{
+  display: flex; 
+  justify-content: center;
+  align-items: center;
+}
+.wrap {
+  display: flex;
+  flex-wrap: wrap;
+}
+.icon {
+  height: 1.5em;
+  width: 1.5em;
+  margin: 0.2em;
+  padding: 0.3em;
+  border: #ededed solid 0.15em;
+  border-radius:0.5em ;
+}