commit f8a33f044ea92c31a822841dc5ee2f5a5d052bc0
Author: jsriwongsa <sriwongsa.jtp@gmail.com>
Date:   Thu May 11 15:27:34 2023 -0500

    added template1

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..17c1e96
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1 @@
+template1/images/*
\ No newline at end of file
diff --git a/template1/style.css b/template1/style.css
new file mode 100644
index 0000000..a2b97f7
--- /dev/null
+++ b/template1/style.css
@@ -0,0 +1,372 @@
+*{
+    margin: 0;
+    padding: 0;
+    font-family: sans-serif;
+}
+#header{
+    height: 100vh;
+    background-image: url(images/wall2.jpg);
+    background-position: center;
+    background-size: cover;
+}
+.container{
+    margin-right: 50px;
+    margin-left: 50px;
+}
+.logo{
+    margin-top: 30px;
+    width: 125px;
+}
+.header-text{
+    max-width: 550px;
+    margin-top: 100px;
+    color: aliceblue;
+}
+h1{
+    font-size: 30px;
+}
+.square{
+    height: 12px;
+    width: 12px;
+    display: inline-block;
+    background: grey;
+    margin: 15px 0;
+}
+.common-btn{
+    padding: 18px 40px;
+    background: transparent;
+    outline: none;
+    border: 2px solid grey;
+    font-weight: bold;
+    color: rgb(182, 203, 182);
+    font-size: 14px;
+    cursor: pointer;
+}
+p{
+    font-size: 18px;
+}
+.header-text button{
+    margin-top: 20px;
+    margin-bottom: 60px;
+}
+.line1{
+    width: 100px;
+    height: 1px;
+    background: grey;
+    display: inline-block;
+}
+.line2{
+    width: 80px;
+    height: 1px;
+    background: grey;
+    display: inline-block;
+}
+.line3{
+    width: 60px;
+    height: 1px;
+    background: grey;
+    display: inline-block;
+}
+.line{
+    line-height: 10px;
+}
+#sideNav{
+    width: 250px;
+    height: 100vh;
+    position: fixed;
+    right: -250px;
+    top: 0;
+    background: rgb(175, 180, 175);
+    z-index: 2;
+    transition: 0.5s;
+}
+nav ul li{
+    list-style: none;
+    margin: 50px 20px;
+}
+nav ul li a{
+    text-decoration: none;
+    color: black;
+}
+#menuBtn{
+    width: 50px;
+    position: fixed;
+    right: 65px;
+    top: 35px;
+    z-index: 2;
+    cursor: pointer;
+}
+/*------- about -------*/
+#about,#framwork{
+    padding: 100px 0;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+}
+.about-left-col{
+    flex-basis: 50%;
+}
+.about-left-col img{
+    width: 70%;
+}
+.about-right-col{
+    flex-basis: 50%;
+    text-align: right;
+}
+.about-text{
+    max-width: 650px;
+    margin-right: 100px;
+    display: inline-block;
+}
+.about-text h2{
+    margin: 25px 0 10px;
+    font-size: 28px;
+    font-style: italic;
+}
+.about-text h3{
+    font-size: 20px;
+    font-style: italic;
+}
+
+/*------- features -------*/
+#features{
+    padding-top: 50px;
+    padding-bottom: 50px;
+}
+.feature-row{
+    width: 80%;
+    margin: auto;
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    flex-wrap: wrap;
+}
+.feature-col{
+    flex-basis: 25%;
+    text-align: center;
+}
+.feature-col{
+    width: 100px;
+
+}
+.feature-col img{
+    width: 35%;
+}
+.feature-col h4{
+    margin-bottom: 15px;
+    font-size: 20px;
+    font-weight: 400;
+}
+.feature-btn{
+    margin: 80px auto 0;
+    display: flex;
+    align-items: flex-end;
+    justify-content: center;
+}
+.feature-btn .line{
+    text-align: right;
+    display: inline-block;
+    margin-right: 25px;
+}
+/*------- applications -------*/
+#applications{
+    padding: 100px 0;
+}
+.container-app-row{
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;    
+}
+.app-right-col{
+    flex-basis: 50%;
+}
+.app-right-col img{
+    width: 90%;
+}
+.app-left-col{
+    flex-basis: 50%;
+}
+.app-text{
+    max-width: 550px;
+    margin-left: 100px;
+    display: inline-block;
+}
+.app-text button{
+    margin: 20px 0;
+}
+/*------- Framworks -------*/
+#framwork button{
+margin: 30px 0;
+}
+/*------- contact -------*/
+.cont-row{
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+}
+.cont-left-col, .cont-right-col{
+    flex-basis: 50%;
+}
+.cont-right-col img{
+    width: 40%;
+}
+form{
+    max-width: 350%;
+    margin: 30px 0;
+}
+form input{
+    width: 85%;
+    padding: 12px 10px;
+    margin-bottom: 5px;
+    outline: none;
+    box-shadow: none;
+    box-sizing: border-box;
+    border: 2px solid gray;
+}
+.btn-box{
+    width: 40%;
+    display: flex;
+    justify-content: space-between;
+}
+.btn-box button{
+    flex-basis: 46%;
+    padding: 18px 0;
+}
+
+/*------ footer -----*/
+#footer{
+    padding: 50px 0 30px;
+}
+hr{
+    width: 100%;
+    border: 0;
+    border-top: 1px solid gray;
+}
+.footer-row{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex-wrap: wrap;
+}
+.footer-left-col{
+    flex-basis: 50;
+    margin-top: 40px;
+}
+.footer-links{
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+}
+.link-title h4{
+    font-size: 20px;
+    color: rgb(35, 42, 37);
+    margin-bottom: 20px; 
+}
+.link-title small{
+    font-size: 15px;
+    color: rgb(61, 69, 67);
+}
+/*social media*/
+
+.social-icons{
+    width: 50px;
+    position: fixed;
+    top: 50%;
+    left: 0;
+    transform: translateY(-50%);
+    z-index: 1;
+}
+.social-icons img{
+    width: 65%;
+    display: block;
+    margin: 0 auto 10px;
+    cursor: pointer;
+}
+@media only screen and (max-width:770px){
+    #header{
+        background-image: none;  
+    }
+    .container{
+        margin-right: 50px;
+        margin-left: 50px;
+    }
+    .logo{
+        margin-top: b25px;
+        width: 50px;
+    }
+    .header-text{
+        margin-top: 50px;
+        color: black;
+    }
+    h1{
+        font-size: 25px;
+    }
+    #menuBtn{
+        width: 40px;
+        right: 50px; 
+    }
+    .common-btn{
+        padding: 10px 16px;
+        
+    }
+    .social-icons img{
+        width: 40%;
+        margin: 15px auto;
+    }
+    .about-left-col, .about-right-col{
+        flex-basis: 100%;
+    }
+    .about-left-col img{
+        width: 70%;
+        margin-top: -200px;
+    }
+    .about-text{
+        margin: 50px 50px 0;
+        display: inline-block;
+    }
+    .about-text h2{
+        font-size: 18px;
+    }
+    .feature-col{
+        flex-basis: 100%;
+        margin-bottom: 20px;
+    }
+    .app-left-col{
+        flex-basis: 100%;
+    }
+    .app-right-col{
+        flex-basis: 100%;
+        margin-top: 20%;
+        margin-bottom: 40%;
+    }
+    .cont-left-col, .cont-right-col{
+        flex-basis: 100%;
+    }
+    .cont-right-col{
+        margin-top: 50px;
+    }
+    .cont-right-col img{
+        width: 50%;
+    }
+    form input{
+        width: 85%;
+        padding: 12px 10px;
+        margin-bottom: 5px;
+        outline: none;
+        box-shadow: none;
+        box-sizing: border-box;
+        border: 2px solid gray;
+    }
+    .btn-box{
+        width: 60%;
+        display: flex;
+        justify-content: space-between;
+    }
+    .btn-box button{
+        flex-basis: 48%;
+        padding: 10px 0;
+    }
+    .footer-left-col{
+        flex-basis: 100%;
+    }
+}
\ No newline at end of file
diff --git a/template1/template1.html b/template1/template1.html
new file mode 100644
index 0000000..6819c9a
--- /dev/null
+++ b/template1/template1.html
@@ -0,0 +1,239 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale =1">
+    <title> Complete Website Design- HTML & CSS </title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.jsdelivr.net/gh/cferdinandi/smooth-scroll/dist/smooth-scroll.polyfills.min.js"></script>
+</head>
+<body>
+    <section id ="header">
+        <div class="container">
+            <img src="images/ai1.png" class ="logo">
+            <div class="header-text">
+                <h1>A year spent in artificial intelligence is enough to make one believe in God</h1>
+                <span class ="square"></span>
+                <p>"One of our big goals in search is to make search that really understands exactly what you want, 
+                    understands everything in the world. As computer scientists, we call that artificial intelligence."
+                    <br> -Larry Page- </p>
+                <button class="common-btn">Read More</button>
+                <div class="line">
+                    <span class="line1"></span> <br>
+                    <span class="line2"></span> <br>
+                    <span class="line3"></span>
+                </div>
+            </div>
+        </div>
+    </section>
+    <nav id ="sideNav">
+        <ul>
+            <li><a href = "#header">HOME</a></li>
+            <li><a href = "#about">ABOUT US</a></li>
+            <li><a href = "#features">FEATURES</a></li>
+            <li><a href = "#applications">APPLICATIONS</a></li>
+            <li><a href = "#framwork">FRAMEWORK</a></li>
+            <li><a href = "#contact">CONTACT</a></li>
+        </ul>
+    </nav>
+    <img src="images/menu3.png" id="menuBtn">
+
+<!------- About Us ------->
+<section id="about">
+    <div class ="about-left-col">
+        <img src="images/ai5.png">
+    </div>
+    <div class = "about-right-col">
+        <div class="about-text">
+            <h1>About Us</h1>
+            <span class ="square"></span>
+            <p>Artificial intelligence is intelligence perceiving, synthesizing, and inferring information-demonstrated 
+            by machines, as opposed to intelligence displayed by humans or by other animals. 
+            Example tasks in which this is done include speech recognition, computer vision, translation between (natural) 
+            languages, as well as other mappings of inputs. </p><br>
+            
+            <div class="line">
+                <span class="line1"></span> <br>
+                <span class="line2"></span> <br>
+                <span class="line3"></span>
+            </div>
+
+            <h2>"Machines will be capable, within twenty years, of doing any work a man can do."</h2>
+            <h3>-Herbert Simon-</h3>
+
+        </div>
+    </div>
+</section>
+
+<!------- Features ------->
+<section id ="features">
+    <div class="feature-row">
+        <div class="feature-col">
+            <img src="images/ai3.png">
+            <h4>Deep Learning</h4>
+            <p>Deep learning is part of a broader family of machine learning methods, 
+                which is based on artificial neural networks with representation learning.</p>
+        </div>
+
+        <div class="feature-col">
+            <img src="images/f9.png">
+            <h4>Facial recognition</h4>
+            <p>A facial recognition system is a technology capable of matching 
+                a human face from a digital image or a video frame against a database of faces.</p>
+        </div>
+
+        <div class="feature-col">
+            <img src="images/f5.png">
+            <h4>Quantum Computing</h4>
+            <p>Quantum computing is a rapidly-emerging technology that harnesses 
+                the laws of quantum mechanics to solve problems too complex for classical computers.</p>
+        </div>
+    </div>
+    <div class="feature-btn">
+        <div class="line">
+            <span class="line1"></span> <br>
+            <span class="line2"></span> <br>
+            <span class="line3"></span>
+        </div>
+        <button class="common-btn"> Read More</button>
+    </div>
+</section>
+
+<!--------- Applications --------->
+<section id = "applications">
+    <div class = "container-app-row">
+        <div class="app-left-col">
+            <div class="app-text">
+                <h1>AI applications </h1>
+                <span class="square"></span>
+                <p>AI and machine learning-enabled technologies are used in medicine, transportation, robotics, 
+                    science, education, the military, surveillance, finance and its regulation, agriculture, 
+                    entertainment, retail, customer service, and manufacturing.</p>
+                    <button class="common-btn"> Read More</button>
+                    <div class="line">
+                        <span class="line1"></span> <br>
+                        <span class="line2"></span> <br>
+                        <span class="line3"></span>
+                    </div>
+            </div>
+        </div>
+        <div class="app-right-col">
+            <img src="images/ai_app2.png">
+        
+        </div>
+    </div>
+</section>
+
+<!--frameworks-->
+<section id="framwork">
+    <div class ="about-left-col">
+        <img src="images/fram1.png">
+    </div>
+    <div class = "about-right-col">
+        <div class="about-text">
+            <h1>Top 5 Frameworks for Integration AI <br> in App Development </h1>
+            <span class ="square"></span>
+            <p>The best frameworks for AI and machine learning development tasks that can employ 
+                to stay ahead with the technological trends in 2023 are <br>TensorFlow, 
+                Microsoft CNTK,Torch, Theano, and Caffe.</p>
+                <button class="common-btn"> Read More</button>
+                <div class="line">
+                    <span class="line1"></span> <br>
+                    <span class="line2"></span> <br>
+                    <span class="line3"></span>
+                </div>
+        </div>
+    </div>
+</section id>
+
+<!------- Contact -------->
+<section id="contact">
+    <div class="container cont-row">
+        <div class="cont-left-col">
+            <h1> Sign Up to join us</h1>
+            <form>
+                <input type="text" placeholder="Enter your name">
+                <input type="email" placeholder="Enter your email">
+                <input type="password" placeholder="Enter your password">
+                <div class="btn-box">
+                    <button class="common-btn">Sign Up</button>
+                    <button class="common-btn"> Sign In</button>
+                </div>
+            </form>
+            <div class="line">
+                <span class="line1"></span> <br>
+                <span class="line2"></span> <br>
+                <span class="line3"></span>
+            </div>
+        </div>
+        <div class="cont-right-col">
+            <img src="images/con2.png">
+        </div>
+    </div>
+</section>
+
+<!------- Footer ------->
+<section id="footer">
+    <div class="container footer-row">
+        <hr>
+        <div class="footer-left-col">
+            <div class="footer-links">
+                <div class="link-title">
+                    <h4>Product &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </h4>
+                    <small>Our plan</small><br>
+                    <small>Free30 days</small>
+                </div>
+
+                <div class="link-title">
+                    <h4>About Us &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</h4>
+                    <small>Request Demo</small><br>
+                    <small>FAQ</small>
+                </div>
+
+                <div class="link-title">
+                    <h4>Support &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</h4>
+                    <small>Features</small><br>
+                    <small>Contact Us</small>
+                </div>
+
+                <div class="link-title">
+                    <h4>Explore &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</h4>
+                    <small>Find a nonpofit</small><br>
+                    <small>Coporate Solution</small>
+                </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</section>
+
+<!--Social media-->
+
+<div class= "social-icons">
+    <img src="images/s_fa.png">
+    <img src="images/s_ig.png">
+    <img src="images/s_in.png">
+    <img src="images/s_tw.png">
+</div>
+
+<!-------- JavaScript------->
+    <script>
+        var menuBtn = document.getElementById("menuBtn");
+        var sideNav = document.getElementById("sideNav");
+
+        sideNav.style.right="-250px";
+        menuBtn.onclick = function(){
+            if(sideNav.style.right == "-250px"){
+                sideNav.style.right = "0px"
+            }
+            else{
+                sideNav.style.right = "-250px";
+            }
+        }
+
+	    var scroll = new SmoothScroll('a[href*="#"]',{
+            speed:650
+        });
+    </script>
+</body>
+</html>