added template1
This commit is contained in:
jsriwongsa
commit
f8a33f044e
3 changed files with 612 additions and 0 deletions
1
.gitignore
vendored
Normal file
1
.gitignore
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
template1/images/*
|
||||
372
template1/style.css
Normal file
372
template1/style.css
Normal 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
239
template1/template1.html
Normal 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 </h4>
|
||||
<small>Our plan</small><br>
|
||||
<small>Free30 days</small>
|
||||
</div>
|
||||
|
||||
<div class="link-title">
|
||||
<h4>About Us </h4>
|
||||
<small>Request Demo</small><br>
|
||||
<small>FAQ</small>
|
||||
</div>
|
||||
|
||||
<div class="link-title">
|
||||
<h4>Support </h4>
|
||||
<small>Features</small><br>
|
||||
<small>Contact Us</small>
|
||||
</div>
|
||||
|
||||
<div class="link-title">
|
||||
<h4>Explore </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>
|
||||
Loading…
Add table
Reference in a new issue