added template1

This commit is contained in:
jsriwongsa 2023-05-11 15:27:34 -05:00
commit f8a33f044e
3 changed files with 612 additions and 0 deletions

1
.gitignore vendored Normal file
View file

@ -0,0 +1 @@
template1/images/*

372
template1/style.css Normal file
View file

@ -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%;
}
}

239
template1/template1.html Normal file
View file

@ -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>