Code-the-Dream-School · TammamWafai · Jun 9, 2022 · Jun 9, 2022 · Jul 1, 2022 · Jul 1, 2022
diff --git a/css/index.css b/css/index.css
@@ -0,0 +1,171 @@
+.indented {
+    margin-left: 20px;
+    color: rgb(0, 81, 95);
+}
+
+body {
+    background-color: rgba(0, 255, 255, 0.233);
+    color: rgb(0, 71, 71);
+    font-family: 'Kanit', sans-serif;
+    margin: 0;
+    padding: 0;
+}
+
+body::before {
+    display: block;
+    content: '';
+    height: 100px;
+}
+
+section {
+
+    margin: 55px;
+}
+
+h1 {
+    font-size: 42px;
+    font-weight: 900;
+}
+
+h2 {
+    font-size: 25px;
+    font-weight: 600;
+}
+
+ul#expList {
+    /* transform-style: preserve-3d; */
+    list-style-type: none;
+    border-block: dashed rgb(175, 175, 175);
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-around;
+
+}
+
+ul#expList li {
+    border-color: gray;
+    border-left: solid;
+    flex: 1;
+    padding: 35px;
+
+
+}
+
+ul#skillsList {
+    list-style-type: square;
+    border-block: dashed rgb(175, 175, 175);
+}
+
+@media screen and (max-width: 500px) {
+    ul#connectList li {
+        list-style: none;
+        align-items: center;
+        align-content: center;
+        text-align: center;
+        margin: 20px;
+        padding: 10px;
+        border-radius: 5;
+        border-style: dashed;
+        border-color: rgba(0, 0, 0, 0.363);
+    }
+}
+
+@media screen and (min-width: 501px) {
+    ul#connectList li {
+        display: inline;
+        margin: 20px;
+        padding: 10px;
+        border-radius: 5;
+        border-style: dashed;
+        border-color: rgba(0, 0, 0, 0.363);
+    }
+}
+
+
+form {
+    padding: 25px;
+    background-color: rgba(0, 19, 19, 0.075);
+    border-style: dashed;
+    border-color: rgba(0, 0, 0, 0.363);
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: space-evenly;
+    align-content: flex-start;
+    align-items: stretch;
+    display: flex;
+}
+
+form>label {
+    flex: 1;
+    font-size: 20px;
+    color: rgba(0, 0, 0, 0.705);
+}
+
+form>input,
+form>textarea {
+    flex: 5;
+    font-size: 15px;
+    padding: 5px;
+    margin: 5px;
+    border-style: dashed;
+}
+
+form>button {
+    background-color: rgba(0, 0, 0, 0.705);
+    padding: 20px;
+    color: white;
+    font-size: 15px;
+    border-radius: 24px;
+}
+
+#messages>ul {
+    background-color: rgba(255, 253, 253, 0.541);
+    border-radius: 25px;
+    border-style: dashed;
+
+}
+
+#messages>ul>li:nth-last-of-type(odd) {
+    background-color: rgba(0, 0, 0, 0.137);
+}
+
+#messages>ul>li>button {
+    background-color: rgba(0, 0, 0, 0.562);
+    padding: 10px;
+    color: white;
+    font-size: 14px;
+    border-radius: 14px;
+    margin: 10px;
+}
+
+ul#navMenu {
+    overflow: hidden;
+    background-color: rgba(51, 51, 51, 0.514);
+    position: fixed;
+    top: 0;
+    width: 100%;
+
+
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+}
+
+ul#navMenu li {
+    float: left;
+}
+
+ul#navMenu li a {
+    display: block;
+    color: white;
+    text-align: center;
+    padding: 16px;
+    text-decoration: none;
+}
+
+ul#navMenu li a:hover {
+    background-color: #111111;
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,95 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <title>Tammam intro code CTD</title>
+    <!-- <meta http-equiv="refresh" content="15"> -->
+    <meta charset="UTF-8">
+    <meta name="description" content="Intro course CTD">
+    <meta name="keywords" content="HTML, CSS, JavaScript">
+    <meta name="author" content="Tammam Alwafai">
+    <link rel="stylesheet" href="css/index.css">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Kanit&display=swap" rel="stylesheet">
+</head>
+
+<body>
+    <ul id="navMenu">
+        <li><a href="#about">About</a></li>
+        <li><a href="#experience">Experience</a></li>
+        <li><a href="#skills">Skills</a></li>
+        <li><a href="#connect">Connect</a></li>
+        <li><a href="#messageme">Message me</a></li>
+    </ul>
+
+    </ul>
+    <section>
+        <h1>Tammam Alwafai</h1>
+
+    </section>
+    <section id="about">
+        <h2>About</h2>
+        <p>Computer engineer with a big passion for languages and technology</p>
+    </section>
+    <section id="experience">
+        <h2>Experience</h2>
+        <p>
+        <ul id="expList">
+            <li>Code the Dream 2022</li>
+            <li>Syriatel - IT support engineer from 2017 to 2019</li>
+            <li>AlamiyaFx - Content writer from 2020 to 2021</li>
+        </ul>
+
+
+        </p>
+    </section>
+    <section id="skills">
+        <h2>Skills</h2>
+        <ul id="skillsList">
+
+        </ul>
+    </section>
+    <section id="projects">
+        <h2>Projects</h2>
+        <ul id="projectsUL">
+
+        </ul>
+    </section>
+
+    <section id="connect">
+        <h2>Connect</h2>
+        <p>
+        <ul id="connectList">
+            <li><a href="mailto:tammam.wafai@gmail.com">Email</a></li>
+            <li> <a href="https://github.com/TammamWafai">GitHub</a></li>
+            <li><a href="https://www.facebook.com/tammam.wafai">Facebook</a></li>
+
+        </ul>
+        </p>
+        <br><br>
+    </section>
+    <section id="messageme">
+        <h2>Leave a Message</h2>
+        <form name="leave_message">
+            <label>Name: </label><input type="text" name="name" required><br>
+            <label>Email: </label><input type="email" name="email" required><br>
+            <label>Message: </label><br>
+            <textarea name="message" required></textarea><br>
+            <button type="submit">Submit</button>
+
+        </form>
+    </section>
+    <section id="messages">
+        <h2>Messages</h2>
+        <ul>
+        </ul>
+    </section>
+    <section>
+
+        <footer></footer>
+    </section>
+    <script src="js/index.js"></script>
+</body>
+
+</html>